@pie-lib/editable-html-tip-tap 2.1.18 → 2.1.20-beta.1

package/lib/components/MenuBar.js

@@ -13,7 +13,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _styles = require("@mui/material/styles");
 var _prosemirrorState = require("prosemirror-state");
-var _renderUi = require("@pie-lib/render-ui");
 var _FormatBold = _interopRequireDefault(require("@mui/icons-material/FormatBold"));
 var _FormatItalic = _interopRequireDefault(require("@mui/icons-material/FormatItalic"));
 var _FormatStrikethrough = _interopRequireDefault(require("@mui/icons-material/FormatStrikethrough"));
@@ -49,9 +48,7 @@ var SuperscriptIcon = function SuperscriptIcon() {
     height: "24px",
     viewBox: "0 0 24 24",
     width: "24px",
-    fill: "none",
-    "aria-hidden": "true",
-    focusable: "false"
+    fill: "none"
   }, /*#__PURE__*/_react["default"].createElement("path", {
     d: "M22,7h-2v1h3v1h-4V7c0-0.55,0.45-1,1-1h2V5h-3V4h3c0.55,0,1,0.45,1,1v1C23,6.55,22.55,7,22,7z M5.88,20h2.66l3.4-5.42h0.12 l3.4,5.42h2.66l-4.65-7.27L17.81,6h-2.68l-3.07,4.99h-0.12L8.85,6H6.19l4.32,6.73L5.88,20z",
     fill: "currentColor"
@@ -63,9 +60,7 @@ var SubscriptIcon = function SubscriptIcon() {
     height: "24px",
     viewBox: "0 0 24 24",
     width: "24px",
-    fill: "none",
-    "aria-hidden": "true",
-    focusable: "false"
+    fill: "none"
   }, /*#__PURE__*/_react["default"].createElement("path", {
     d: "M22,18h-2v1h3v1h-4v-2c0-0.55,0.45-1,1-1h2v-1h-3v-1h3c0.55,0,1,0.45,1,1v1C23,17.55,22.55,18,22,18z M5.88,18h2.66 l3.4-5.42h0.12l3.4,5.42h2.66l-4.65-7.27L17.81,4h-2.68l-3.07,4.99h-0.12L8.85,4H6.19l4.32,6.73L5.88,18z",
     fill: "currentColor"
@@ -81,9 +76,7 @@ var HeadingIcon = function HeadingIcon() {
     style: {
       width: '20px',
       height: '18px'
-    },
-    "aria-hidden": "true",
-    focusable: "false"
+    }
   }, /*#__PURE__*/_react["default"].createElement("path", {
     d: "M27 4V24H29C29.5 24 30 24.5 30 25V27C30 27.5625 29.5 28 29 28H19C18.4375 28 18 27.5625 18 27V25C18 24.5 18.4375 24 19 24H21V16H9V24H11C11.5 24 12 24.5 12 25V27C12 27.5625 11.5 28 11 28H1C0.4375 28 0 27.5625 0 27V25C0 24.5 0.4375 24 1 24H3V4H1C0.4375 4 0 3.5625 0 3V1C0 0.5 0.4375 0 1 0H11C11.5 0 12 0.5 12 1V3C12 3.5625 11.5 4 11 4H9V12H21V4H19C18.4375 4 18 3.5625 18 3V1C18 0.5 18.4375 0 19 0H29C29.5 0 30 0.5 30 1V3C30 3.5625 29.5 4 29 4H27Z",
     fill: "currentColor"
@@ -180,7 +173,6 @@ function MenuBar(_ref) {
   var toolbarButtons = (0, _react.useMemo)(function () {
     return [{
       icon: /*#__PURE__*/_react["default"].createElement(_GridOn["default"], null),
-      label: 'Insert table',
       onClick: function onClick(editor) {
         return editor.chain().focus().insertTable({
           rows: 2,
@@ -199,7 +191,6 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_TableIcons.AddRow, null),
-      label: 'Add table row',
       onClick: function onClick(editor) {
         return editor.chain().focus().addRowAfter().run();
       },
@@ -214,7 +205,6 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_TableIcons.RemoveRow, null),
-      label: 'Remove table row',
       onClick: function onClick(editor) {
         return editor.chain().focus().deleteRow().run();
       },
@@ -229,7 +219,6 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_TableIcons.AddColumn, null),
-      label: 'Add table column',
       onClick: function onClick(editor) {
         return editor.chain().focus().addColumnAfter().run();
       },
@@ -244,7 +233,6 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_TableIcons.RemoveColumn, null),
-      label: 'Remove table column',
       onClick: function onClick(editor) {
         return editor.chain().focus().deleteColumn().run();
       },
@@ -259,7 +247,6 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_TableIcons.RemoveTable, null),
-      label: 'Remove table',
       onClick: function onClick(editor) {
         return editor.chain().focus().deleteTable().run();
       },
@@ -274,8 +261,6 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_BorderAll["default"], null),
-      label: 'Table borders',
-      toggle: true,
       onClick: function onClick(editor) {
         var tableAttrs = editor.getAttributes('table');
         var update = _objectSpread(_objectSpread({}, tableAttrs), {}, {
@@ -294,8 +279,6 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_FormatBold["default"], null),
-      label: 'Bold',
-      toggle: true,
       onClick: function onClick(editor) {
         return editor.chain().focus().toggleBold().run();
       },
@@ -310,8 +293,6 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_FormatItalic["default"], null),
-      label: 'Italic',
-      toggle: true,
       onClick: function onClick(editor) {
         return editor.chain().focus().toggleItalic().run();
       },
@@ -326,8 +307,6 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_FormatStrikethrough["default"], null),
-      label: 'Strikethrough',
-      toggle: true,
       onClick: function onClick(editor) {
         return editor.chain().focus().toggleStrike().run();
       },
@@ -342,8 +321,6 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_Code["default"], null),
-      label: 'Code',
-      toggle: true,
       onClick: function onClick(editor) {
         return editor.chain().focus().toggleCode().run();
       },
@@ -358,8 +335,6 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_FormatUnderlined["default"], null),
-      label: 'Underline',
-      toggle: true,
       onClick: function onClick(editor) {
         return editor.chain().focus().toggleUnderline().run();
       },
@@ -371,8 +346,6 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(SubscriptIcon, null),
-      label: 'Subscript',
-      toggle: true,
       onClick: function onClick(editor) {
         return editor.chain().focus().toggleSubscript().run();
       },
@@ -384,8 +357,6 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(SuperscriptIcon, null),
-      label: 'Superscript',
-      toggle: true,
       onClick: function onClick(editor) {
         return editor.chain().focus().toggleSuperscript().run();
       },
@@ -397,7 +368,6 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_Image["default"], null),
-      label: 'Insert image',
       hidden: function hidden() {
         return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('image'));
       },
@@ -406,7 +376,6 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_Theaters["default"], null),
-      label: 'Insert video',
       hidden: function hidden() {
         return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('video'));
       },
@@ -417,7 +386,6 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_VolumeUp["default"], null),
-      label: 'Insert audio',
       hidden: function hidden() {
         return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('audio'));
       },
@@ -429,7 +397,6 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_CssIcon["default"], null),
-      label: 'CSS classes',
       hidden: function hidden() {
         return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('css'));
       },
@@ -438,8 +405,6 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_FormatQuote["default"], null),
-      label: 'Blockquote',
-      toggle: true,
       hidden: function hidden() {
         return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('blockquote'));
       },
@@ -451,8 +416,6 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(HeadingIcon, null),
-      label: 'Heading',
-      toggle: true,
       hidden: function hidden() {
         return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('h3'));
       },
@@ -464,7 +427,6 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_Functions["default"], null),
-      label: 'Insert math',
       hidden: function hidden() {
         return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('math'));
       },
@@ -475,7 +437,6 @@ function MenuBar(_ref) {
       icon: /*#__PURE__*/_react["default"].createElement(_CharacterPicker.CharacterIcon, {
         letter: "\xF1"
       }),
-      label: 'Spanish characters (ñ)',
       hidden: function hidden() {
         return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('languageCharacters'));
       },
@@ -486,7 +447,6 @@ function MenuBar(_ref) {
       icon: /*#__PURE__*/_react["default"].createElement(_CharacterPicker.CharacterIcon, {
         letter: "\u20AC"
       }),
-      label: 'Special characters (€)',
       hidden: function hidden() {
         return (activePlugins === null || activePlugins === void 0 ? void 0 : activePlugins.filter(function (p) {
           return p === 'languageCharacters';
@@ -499,15 +459,12 @@ function MenuBar(_ref) {
       icon: /*#__PURE__*/_react["default"].createElement(_TextAlign["default"], {
         editor: editor
       }),
-      label: 'Text alignment',
       hidden: function hidden() {
         return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('text-align'));
       },
       onClick: function onClick() {}
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_FormatListBulleted["default"], null),
-      label: 'Bulleted list',
-      toggle: true,
       hidden: function hidden() {
         return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('bulleted-list'));
       },
@@ -519,8 +476,6 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_FormatListNumbered["default"], null),
-      label: 'Numbered list',
-      toggle: true,
       hidden: function hidden() {
         return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('numbered-list'));
       },
@@ -532,7 +487,6 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_Undo["default"], null),
-      label: 'Undo',
       hidden: function hidden() {
         return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('undo'));
       },
@@ -544,7 +498,6 @@ function MenuBar(_ref) {
       }
     }, {
       icon: /*#__PURE__*/_react["default"].createElement(_Redo["default"], null),
-      label: 'Redo',
       hidden: function hidden() {
         return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('redo'));
       },
@@ -574,8 +527,7 @@ function MenuBar(_ref) {
       editor.chain().focus().deleteSelection().run();
       onChange === null || onChange === void 0 || onChange(editor.getHTML());
     },
-    "aria-label": "Delete response area",
-    title: "Delete response area"
+    "aria-label": "Delete response area"
   }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], null)))), !editorState.hideDefaultToolbar && /*#__PURE__*/_react["default"].createElement("div", {
     className: classes.defaultToolbar,
     tabIndex: "1"
@@ -590,11 +542,7 @@ function MenuBar(_ref) {
     var active = (_btn$isActive = btn.isActive) === null || _btn$isActive === void 0 ? void 0 : _btn$isActive.call(btn, editorState);
     return /*#__PURE__*/_react["default"].createElement("button", {
       key: index,
-      type: "button",
       disabled: disabled,
-      "aria-label": btn.label,
-      title: btn.label,
-      "aria-pressed": btn.toggle ? !!active : undefined,
       onClick: function onClick(e) {
         e.preventDefault();
         btn.onClick(editor);
@@ -602,9 +550,6 @@ function MenuBar(_ref) {
       className: (0, _classnames["default"])(classes.button, (0, _defineProperty2["default"])({}, classes.active, active))
     }, btn.icon);
   })), (activePlugins === null || activePlugins === void 0 ? void 0 : activePlugins.includes('responseArea')) && /*#__PURE__*/_react["default"].createElement("button", {
-    type: "button",
-    "aria-label": "Insert response area",
-    title: "Insert response area",
     onClick: function onClick() {
       editor.chain().focus().insertResponseArea(responseAreaProps.type).run();
     },
@@ -656,12 +601,9 @@ var StyledMenuBar = function StyledMenuBar(props) {
     classes: classes
   })));
 };
-var StyledMenuBarRoot = (0, _styles.styled)('div')(function () {
+var StyledMenuBarRoot = (0, _styles.styled)('div')(function (_ref4) {
+  var theme = _ref4.theme;
   return {
-    // A zero-height slot the toolbar overflows out of, so the toolbar rides normal flow while the
-    // root's geometry stays as it was.
-    height: 0,
-    overflow: 'visible',
     '& .defaultToolbar': {
       display: 'flex',
       width: '100%',
@@ -685,26 +627,20 @@ var StyledMenuBarRoot = (0, _styles.styled)('div')(function () {
         height: '24px'
       },
       '&:hover': {
-        color: _renderUi.color.text()
+        color: 'black'
       },
       '&:focus': {
-        /*
-         * A focus ring is the one thing a keyboard user cannot do without, so it takes
-         * the registered focus token rather than a grey. `--pie-button-focus-outline`
-         * measures at least 3.68:1 against every scheme's own background; MUI's
-         * grey[700] fell to 1.28:1 on yellow-on-navy.
-         */
-        outline: "2px solid ".concat(_renderUi.color.buttonFocusOutline())
+        outline: "2px solid ".concat(theme.palette.grey[700])
       }
     },
     '& .active': {
-      color: _renderUi.color.text()
+      color: 'black'
     },
     '& .disabled': {
       opacity: 0.7,
       cursor: 'not-allowed',
       '& :hover': {
-        color: _renderUi.color.disabled()
+        color: 'grey'
       }
     },
     '& .isActive': {
@@ -712,16 +648,13 @@ var StyledMenuBarRoot = (0, _styles.styled)('div')(function () {
       color: 'var(--white)'
     },
     '& .toolbar': {
-      // Offset from its own in-flow position: no containing block and no static position to resolve,
-      // either of which a lockdown browser extension can get wrong as the editor grows.
-      position: 'relative',
-      top: '5px',
+      position: 'absolute',
       zIndex: 20,
       cursor: 'pointer',
       justifyContent: 'space-between',
       background: 'var(--editable-html-toolbar-bg, #efefef)',
       minWidth: '280px',
-      margin: 0,
+      margin: '5px 0 0 0',
       padding: '2px',
       boxShadow: '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)',
       boxSizing: 'border-box',
@@ -733,8 +666,6 @@ var StyledMenuBarRoot = (0, _styles.styled)('div')(function () {
       minWidth: '265px'
     },
     '& .toolbarTop': {
-      // Anchored to the root's top, which never depended on the editor's height.
-      position: 'absolute',
       top: '-45px'
     },
     '& .toolbarRight': {