Make dialogs movable and sizable.

components/mjs/core/config.json

@@ -4,6 +4,8 @@
     "targets": [
       "mathjax.ts",
       "core", "util", "handlers",
+      "ui/dialog/DraggableDialog.ts",
+      "ui/dialog/InfoDialog.ts",
       "adaptors/HTMLAdaptor.ts",
       "adaptors/browserAdaptor.ts",
       "components/global.ts"

ts/a11y/explorer.ts

@@ -321,6 +321,7 @@ export function ExplorerMathDocumentMixin<
     public static OPTIONS: OptionList = {
       ...BaseDocument.OPTIONS,
       enableExplorer: hasWindow,           // only activate in interactive contexts
+      enableExplorerHelp: true,            // help dialog is enabled
       renderActions: expandable({
         ...BaseDocument.OPTIONS.renderActions,
         explorable: [STATE.EXPLORER]
@@ -417,78 +418,6 @@ export function ExplorerMathDocumentMixin<
         display: 'inline-flex',
         'align-items': 'center',
       },
-
-      'mjx-help-sizer': {
-        position: 'fixed',
-        width: '40%',
-        'max-width': '30em',
-        top: '3em',
-        left: '50%',
-      },
-      'mjx-help-dialog': {
-        position: 'absolute',
-        width: '200%',
-        left: '-100%',
-        border: '3px outset',
-        'border-radius': '15px',
-        color: 'black',
-        'background-color': '#DDDDDD',
-        'z-index': '301',
-        'text-align': 'right',
-        'font-style': 'normal',
-        'text-indent': 0,
-        'text-transform': 'none',
-        'line-height': 'normal',
-        'letter-spacing': 'normal',
-        'word-spacing': 'normal',
-        'word-wrap': 'normal',
-        float: 'none',
-        'box-shadow': '0px 10px 20px #808080',
-        outline: 'none',
-      },
-      'mjx-help-dialog > h1': {
-        'font-size': '24px',
-        'text-align': 'center',
-        margin: '.5em 0',
-      },
-      'mjx-help-dialog > div': {
-        margin: '0 1em',
-        padding: '3px',
-        overflow: 'auto',
-        height: '20em',
-        border: '2px inset black',
-        'background-color': 'white',
-        'text-align': 'left',
-      },
-      'mjx-help-dialog > input': {
-        margin: '.5em 2em',
-      },
-      'mjx-help-dialog kbd': {
-        display: 'inline-block',
-        padding: '3px 5px',
-        'font-size': '11px',
-        'line-height': '10px',
-        color: '#444d56',
-        'vertical-align': 'middle',
-        'background-color': '#fafbfc',
-        border: 'solid 1.5px #c6cbd1',
-        'border-bottom-color': '#959da5',
-        'border-radius': '3px',
-        'box-shadow': 'inset -.5px -1px 0 #959da5',
-      },
-      'mjx-help-dialog ul': {
-        'list-style-type': 'none',
-      },
-      'mjx-help-dialog li': {
-        'margin-bottom': '.5em',
-      },
-      'mjx-help-background': {
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-      },
     };
 
     /**
@@ -556,7 +485,7 @@ export function ExplorerMathDocumentMixin<
           SVGNS
         ),
       ]);
-      this.tmpFocus = this.adaptor.node('mjx-focus', {
+      this.tmpFocus = adaptor.node('mjx-focus', {
         tabIndex: 0,
         style: {
           outline: 'none',