@pie-lib/editable-html-tip-tap 2.1.2-next.30 → 2.1.2-next.34

package/lib/components/MenuBar.js

@@ -0,0 +1,696 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _styles = require("@mui/material/styles");
+var _prosemirrorState = require("prosemirror-state");
+var _FormatBold = _interopRequireDefault(require("@mui/icons-material/FormatBold"));
+var _FormatItalic = _interopRequireDefault(require("@mui/icons-material/FormatItalic"));
+var _FormatStrikethrough = _interopRequireDefault(require("@mui/icons-material/FormatStrikethrough"));
+var _Code = _interopRequireDefault(require("@mui/icons-material/Code"));
+var _GridOn = _interopRequireDefault(require("@mui/icons-material/GridOn"));
+var _FormatListBulleted = _interopRequireDefault(require("@mui/icons-material/FormatListBulleted"));
+var _FormatListNumbered = _interopRequireDefault(require("@mui/icons-material/FormatListNumbered"));
+var _FormatUnderlined = _interopRequireDefault(require("@mui/icons-material/FormatUnderlined"));
+var _Functions = _interopRequireDefault(require("@mui/icons-material/Functions"));
+var _Image = _interopRequireDefault(require("@mui/icons-material/Image"));
+var _Redo = _interopRequireDefault(require("@mui/icons-material/Redo"));
+var _Undo = _interopRequireDefault(require("@mui/icons-material/Undo"));
+var _FormatQuote = _interopRequireDefault(require("@mui/icons-material/FormatQuote"));
+var _Theaters = _interopRequireDefault(require("@mui/icons-material/Theaters"));
+var _VolumeUp = _interopRequireDefault(require("@mui/icons-material/VolumeUp"));
+var _BorderAll = _interopRequireDefault(require("@mui/icons-material/BorderAll"));
+var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
+var _react2 = require("@tiptap/react");
+var _constants = require("../constants");
+var _ToolbarIcon = require("./respArea/ToolbarIcon");
+var _characterUtils = require("./characters/characterUtils");
+var _TextAlign = _interopRequireDefault(require("./icons/TextAlign"));
+var _CssIcon = _interopRequireDefault(require("./icons/CssIcon"));
+var _TableIcons = require("./icons/TableIcons");
+var _CharacterPicker = require("./CharacterPicker");
+var _doneButton = require("./common/done-button");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var SuperscriptIcon = function SuperscriptIcon() {
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    height: "24px",
+    viewBox: "0 0 24 24",
+    width: "24px",
+    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"
+  }));
+};
+var SubscriptIcon = function SubscriptIcon() {
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    height: "24px",
+    viewBox: "0 0 24 24",
+    width: "24px",
+    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"
+  }));
+};
+var HeadingIcon = function HeadingIcon() {
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    width: "30",
+    height: "28",
+    viewBox: "0 0 30 28",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: {
+      width: '20px',
+      height: '18px'
+    }
+  }, /*#__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"
+  }));
+};
+function MenuBar(_ref) {
+  var _editorState$currentN;
+  var editor = _ref.editor,
+    classes = _ref.classes,
+    activePlugins = _ref.activePlugins,
+    toolOpts = _ref.toolbarOpts,
+    responseAreaProps = _ref.responseAreaProps,
+    onChange = _ref.onChange,
+    autoWidthToolbar = _ref.autoWidthToolbar;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    showPicker = _useState2[0],
+    setShowPicker = _useState2[1];
+  var toolbarOpts = toolOpts !== null && toolOpts !== void 0 ? toolOpts : {};
+  var editorState = (0, _react2.useEditorState)({
+    editor: editor,
+    selector: function selector(ctx) {
+      var _ctx$editor, _ctx$editor2, _ctx$editor3, _ctx$editor4, _ctx$editor5, _ctx$editor6, _ctx$editor7, _ctx$editor$isActive, _ctx$editor$can$chain, _ctx$editor$isActive2, _ref3, _ctx$editor$getAttrib, _ctx$editor$can$chain2, _ctx$editor$isActive3, _ctx$editor$can$chain3, _ctx$editor$isActive4, _ctx$editor$can$chain4, _ctx$editor$isActive5, _ctx$editor$can$chain5, _ctx$editor$can$chain6, _ctx$editor$isActive6, _ctx$editor$isActive7, _ctx$editor$isActive8, _ctx$editor$isActive9, _ctx$editor$isActive0, _ctx$editor$isActive1, _ctx$editor$isActive10, _ctx$editor$isActive11, _ctx$editor$isActive12, _ctx$editor$isActive13, _ctx$editor$isActive14, _ctx$editor$isActive15, _ctx$editor$isActive16, _ctx$editor$isActive17, _ctx$editor$isActive18, _ctx$editor$can$chain7, _ctx$editor$can$chain8;
+      var _ref2 = ((_ctx$editor = ctx.editor) === null || _ctx$editor === void 0 ? void 0 : _ctx$editor.state) || {},
+        selection = _ref2.selection;
+      var currentNode;
+      if (!((_ctx$editor2 = ctx.editor) !== null && _ctx$editor2 !== void 0 && _ctx$editor2.commandManager)) {
+        return {};
+      }
+      if (selection instanceof _prosemirrorState.NodeSelection) {
+        currentNode = selection.node; // the selected node
+      }
+      var hideDefaultToolbar = ((_ctx$editor3 = ctx.editor) === null || _ctx$editor3 === void 0 ? void 0 : _ctx$editor3.isActive('math')) || ((_ctx$editor4 = ctx.editor) === null || _ctx$editor4 === void 0 ? void 0 : _ctx$editor4.isActive('explicit_constructed_response')) || ((_ctx$editor5 = ctx.editor) === null || _ctx$editor5 === void 0 ? void 0 : _ctx$editor5.isActive('imageUploadNode')) || ((_ctx$editor6 = ctx.editor) === null || _ctx$editor6 === void 0 ? void 0 : _ctx$editor6.isActive('drag_in_the_blank'));
+      var hasTextSelectionInTable = selection && selection.empty === false && ctx.editor.isActive('table');
+      return {
+        currentNode: currentNode,
+        hideDefaultToolbar: hideDefaultToolbar,
+        hasTextSelectionInTable: hasTextSelectionInTable,
+        isFocused: (_ctx$editor7 = ctx.editor) === null || _ctx$editor7 === void 0 ? void 0 : _ctx$editor7.isFocused,
+        isBold: (_ctx$editor$isActive = ctx.editor.isActive('bold')) !== null && _ctx$editor$isActive !== void 0 ? _ctx$editor$isActive : false,
+        canBold: (_ctx$editor$can$chain = ctx.editor.can().chain().toggleBold().run()) !== null && _ctx$editor$can$chain !== void 0 ? _ctx$editor$can$chain : false,
+        isTable: (_ctx$editor$isActive2 = ctx.editor.isActive('table')) !== null && _ctx$editor$isActive2 !== void 0 ? _ctx$editor$isActive2 : false,
+        tableHasBorder: (_ref3 = ((_ctx$editor$getAttrib = ctx.editor.getAttributes('table')) === null || _ctx$editor$getAttrib === void 0 ? void 0 : _ctx$editor$getAttrib.border) === '1') !== null && _ref3 !== void 0 ? _ref3 : false,
+        canTable: (_ctx$editor$can$chain2 = ctx.editor.can().chain().insertTable().run()) !== null && _ctx$editor$can$chain2 !== void 0 ? _ctx$editor$can$chain2 : false,
+        isItalic: (_ctx$editor$isActive3 = ctx.editor.isActive('italic')) !== null && _ctx$editor$isActive3 !== void 0 ? _ctx$editor$isActive3 : false,
+        canItalic: (_ctx$editor$can$chain3 = ctx.editor.can().chain().toggleItalic().run()) !== null && _ctx$editor$can$chain3 !== void 0 ? _ctx$editor$can$chain3 : false,
+        isStrike: (_ctx$editor$isActive4 = ctx.editor.isActive('strike')) !== null && _ctx$editor$isActive4 !== void 0 ? _ctx$editor$isActive4 : false,
+        canStrike: (_ctx$editor$can$chain4 = ctx.editor.can().chain().toggleStrike().run()) !== null && _ctx$editor$can$chain4 !== void 0 ? _ctx$editor$can$chain4 : false,
+        isCode: (_ctx$editor$isActive5 = ctx.editor.isActive('code')) !== null && _ctx$editor$isActive5 !== void 0 ? _ctx$editor$isActive5 : false,
+        canCode: (_ctx$editor$can$chain5 = ctx.editor.can().chain().toggleCode().run()) !== null && _ctx$editor$can$chain5 !== void 0 ? _ctx$editor$can$chain5 : false,
+        canClearMarks: (_ctx$editor$can$chain6 = ctx.editor.can().chain().unsetAllMarks().run()) !== null && _ctx$editor$can$chain6 !== void 0 ? _ctx$editor$can$chain6 : false,
+        isUnderline: (_ctx$editor$isActive6 = ctx.editor.isActive('underline')) !== null && _ctx$editor$isActive6 !== void 0 ? _ctx$editor$isActive6 : false,
+        isSubScript: (_ctx$editor$isActive7 = ctx.editor.isActive('subscript')) !== null && _ctx$editor$isActive7 !== void 0 ? _ctx$editor$isActive7 : false,
+        isSuperScript: (_ctx$editor$isActive8 = ctx.editor.isActive('superscript')) !== null && _ctx$editor$isActive8 !== void 0 ? _ctx$editor$isActive8 : false,
+        isParagraph: (_ctx$editor$isActive9 = ctx.editor.isActive('paragraph')) !== null && _ctx$editor$isActive9 !== void 0 ? _ctx$editor$isActive9 : false,
+        isHeading1: (_ctx$editor$isActive0 = ctx.editor.isActive('heading', {
+          level: 1
+        })) !== null && _ctx$editor$isActive0 !== void 0 ? _ctx$editor$isActive0 : false,
+        isHeading2: (_ctx$editor$isActive1 = ctx.editor.isActive('heading', {
+          level: 2
+        })) !== null && _ctx$editor$isActive1 !== void 0 ? _ctx$editor$isActive1 : false,
+        isHeading3: (_ctx$editor$isActive10 = ctx.editor.isActive('heading', {
+          level: 3
+        })) !== null && _ctx$editor$isActive10 !== void 0 ? _ctx$editor$isActive10 : false,
+        isHeadingParagraph: (_ctx$editor$isActive11 = ctx.editor.isActive('headingParagraph')) !== null && _ctx$editor$isActive11 !== void 0 ? _ctx$editor$isActive11 : false,
+        isHeading4: (_ctx$editor$isActive12 = ctx.editor.isActive('heading', {
+          level: 4
+        })) !== null && _ctx$editor$isActive12 !== void 0 ? _ctx$editor$isActive12 : false,
+        isHeading5: (_ctx$editor$isActive13 = ctx.editor.isActive('heading', {
+          level: 5
+        })) !== null && _ctx$editor$isActive13 !== void 0 ? _ctx$editor$isActive13 : false,
+        isHeading6: (_ctx$editor$isActive14 = ctx.editor.isActive('heading', {
+          level: 6
+        })) !== null && _ctx$editor$isActive14 !== void 0 ? _ctx$editor$isActive14 : false,
+        isBulletList: (_ctx$editor$isActive15 = ctx.editor.isActive('bulletList')) !== null && _ctx$editor$isActive15 !== void 0 ? _ctx$editor$isActive15 : false,
+        isOrderedList: (_ctx$editor$isActive16 = ctx.editor.isActive('orderedList')) !== null && _ctx$editor$isActive16 !== void 0 ? _ctx$editor$isActive16 : false,
+        isCodeBlock: (_ctx$editor$isActive17 = ctx.editor.isActive('codeBlock')) !== null && _ctx$editor$isActive17 !== void 0 ? _ctx$editor$isActive17 : false,
+        isBlockquote: (_ctx$editor$isActive18 = ctx.editor.isActive('blockquote')) !== null && _ctx$editor$isActive18 !== void 0 ? _ctx$editor$isActive18 : false,
+        canUndo: (_ctx$editor$can$chain7 = ctx.editor.can().chain().undo().run()) !== null && _ctx$editor$can$chain7 !== void 0 ? _ctx$editor$can$chain7 : false,
+        canRedo: (_ctx$editor$can$chain8 = ctx.editor.can().chain().redo().run()) !== null && _ctx$editor$can$chain8 !== void 0 ? _ctx$editor$can$chain8 : false
+      };
+    }
+  });
+  var hasDoneButton = false;
+  var autoWidth = !!autoWidthToolbar;
+  var names = (0, _classnames["default"])(classes.toolbar, _constants.PIE_TOOLBAR__CLASS, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, classes.toolbarWithNoDone, !hasDoneButton), classes.toolbarTop, toolbarOpts.position === 'top'), classes.toolbarRight, toolbarOpts.alignment === 'right'), classes.focused, toolbarOpts.alwaysVisible || editorState.isFocused && !editor._toolbarOpened && !editorState.hideDefaultToolbar), classes.autoWidth, autoWidth), classes.fullWidth, !autoWidth), classes.hidden, toolbarOpts.isHidden === true));
+  var customStyles = toolbarOpts.minWidth !== undefined ? {
+    minWidth: toolbarOpts.minWidth
+  } : {};
+  var handleMouseDown = function handleMouseDown(e) {
+    e.preventDefault();
+  };
+  var toolbarButtons = (0, _react.useMemo)(function () {
+    return [{
+      icon: /*#__PURE__*/_react["default"].createElement(_GridOn["default"], null),
+      onClick: function onClick(editor) {
+        return editor.chain().focus().insertTable({
+          rows: 2,
+          cols: 2,
+          withHeaderRow: false
+        }).run();
+      },
+      hidden: function hidden(state) {
+        return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('table')) || state.isTable;
+      },
+      isActive: function isActive(state) {
+        return state.isTable;
+      },
+      isDisabled: function isDisabled(state) {
+        return !state.canTable;
+      }
+    }, {
+      icon: /*#__PURE__*/_react["default"].createElement(_TableIcons.AddRow, null),
+      onClick: function onClick(editor) {
+        return editor.chain().focus().addRowAfter().run();
+      },
+      hidden: function hidden(state) {
+        return !(state.isTable && !state.hasTextSelectionInTable);
+      },
+      isActive: function isActive(state) {
+        return state.isTable;
+      },
+      isDisabled: function isDisabled(state) {
+        return !state.canTable;
+      }
+    }, {
+      icon: /*#__PURE__*/_react["default"].createElement(_TableIcons.RemoveRow, null),
+      onClick: function onClick(editor) {
+        return editor.chain().focus().deleteRow().run();
+      },
+      hidden: function hidden(state) {
+        return !(state.isTable && !state.hasTextSelectionInTable);
+      },
+      isActive: function isActive(state) {
+        return state.isTable;
+      },
+      isDisabled: function isDisabled(state) {
+        return !state.canTable;
+      }
+    }, {
+      icon: /*#__PURE__*/_react["default"].createElement(_TableIcons.AddColumn, null),
+      onClick: function onClick(editor) {
+        return editor.chain().focus().addColumnAfter().run();
+      },
+      hidden: function hidden(state) {
+        return !(state.isTable && !state.hasTextSelectionInTable);
+      },
+      isActive: function isActive(state) {
+        return state.isTable;
+      },
+      isDisabled: function isDisabled(state) {
+        return !state.canTable;
+      }
+    }, {
+      icon: /*#__PURE__*/_react["default"].createElement(_TableIcons.RemoveColumn, null),
+      onClick: function onClick(editor) {
+        return editor.chain().focus().deleteColumn().run();
+      },
+      hidden: function hidden(state) {
+        return !(state.isTable && !state.hasTextSelectionInTable);
+      },
+      isActive: function isActive(state) {
+        return state.isTable;
+      },
+      isDisabled: function isDisabled(state) {
+        return !state.canTable;
+      }
+    }, {
+      icon: /*#__PURE__*/_react["default"].createElement(_TableIcons.RemoveTable, null),
+      onClick: function onClick(editor) {
+        return editor.chain().focus().deleteTable().run();
+      },
+      hidden: function hidden(state) {
+        return !(state.isTable && !state.hasTextSelectionInTable);
+      },
+      isActive: function isActive(state) {
+        return state.isTable;
+      },
+      isDisabled: function isDisabled(state) {
+        return !state.canTable;
+      }
+    }, {
+      icon: /*#__PURE__*/_react["default"].createElement(_BorderAll["default"], null),
+      onClick: function onClick(editor) {
+        var tableAttrs = editor.getAttributes('table');
+        var update = _objectSpread(_objectSpread({}, tableAttrs), {}, {
+          border: tableAttrs.border !== '0' ? '0' : '1'
+        });
+        editor.commands.updateAttributes('table', update);
+      },
+      hidden: function hidden(state) {
+        return !(state.isTable && !state.hasTextSelectionInTable);
+      },
+      isActive: function isActive(state) {
+        return state.tableHasBorder;
+      },
+      isDisabled: function isDisabled(state) {
+        return !state.canTable;
+      }
+    }, {
+      icon: /*#__PURE__*/_react["default"].createElement(_FormatBold["default"], null),
+      onClick: function onClick(editor) {
+        return editor.chain().focus().toggleBold().run();
+      },
+      hidden: function hidden() {
+        return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('bold'));
+      },
+      isActive: function isActive(state) {
+        return state.isBold;
+      },
+      isDisabled: function isDisabled(state) {
+        return !state.canBold;
+      }
+    }, {
+      icon: /*#__PURE__*/_react["default"].createElement(_FormatItalic["default"], null),
+      onClick: function onClick(editor) {
+        return editor.chain().focus().toggleItalic().run();
+      },
+      hidden: function hidden() {
+        return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('italic'));
+      },
+      isActive: function isActive(state) {
+        return state.isItalic;
+      },
+      isDisabled: function isDisabled(state) {
+        return !state.canItalic;
+      }
+    }, {
+      icon: /*#__PURE__*/_react["default"].createElement(_FormatStrikethrough["default"], null),
+      onClick: function onClick(editor) {
+        return editor.chain().focus().toggleStrike().run();
+      },
+      hidden: function hidden() {
+        return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('strikethrough'));
+      },
+      isActive: function isActive(state) {
+        return state.isStrike;
+      },
+      isDisabled: function isDisabled(state) {
+        return !state.canStrike;
+      }
+    }, {
+      icon: /*#__PURE__*/_react["default"].createElement(_Code["default"], null),
+      onClick: function onClick(editor) {
+        return editor.chain().focus().toggleCode().run();
+      },
+      hidden: function hidden() {
+        return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('code'));
+      },
+      isActive: function isActive(state) {
+        return state.isCode;
+      },
+      isDisabled: function isDisabled(state) {
+        return !state.canCode;
+      }
+    }, {
+      icon: /*#__PURE__*/_react["default"].createElement(_FormatUnderlined["default"], null),
+      onClick: function onClick(editor) {
+        return editor.chain().focus().toggleUnderline().run();
+      },
+      hidden: function hidden() {
+        return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('underline'));
+      },
+      isActive: function isActive(state) {
+        return state.isUnderline;
+      }
+    }, {
+      icon: /*#__PURE__*/_react["default"].createElement(SubscriptIcon, null),
+      onClick: function onClick(editor) {
+        return editor.chain().focus().toggleSubscript().run();
+      },
+      hidden: function hidden() {
+        return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('subscript'));
+      },
+      isActive: function isActive(state) {
+        return state.isSubScript;
+      }
+    }, {
+      icon: /*#__PURE__*/_react["default"].createElement(SuperscriptIcon, null),
+      onClick: function onClick(editor) {
+        return editor.chain().focus().toggleSuperscript().run();
+      },
+      hidden: function hidden() {
+        return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('superscript'));
+      },
+      isActive: function isActive(state) {
+        return state.isSuperScript;
+      }
+    }, {
+      icon: /*#__PURE__*/_react["default"].createElement(_Image["default"], null),
+      hidden: function hidden() {
+        return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('image'));
+      },
+      onClick: function onClick(editor) {
+        return editor.chain().focus().setImageUploadNode().run();
+      }
+    }, {
+      icon: /*#__PURE__*/_react["default"].createElement(_Theaters["default"], null),
+      hidden: function hidden() {
+        return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('video'));
+      },
+      onClick: function onClick(editor) {
+        return editor.chain().focus().insertMedia({
+          type: 'video'
+        }).run();
+      }
+    }, {
+      icon: /*#__PURE__*/_react["default"].createElement(_VolumeUp["default"], null),
+      hidden: function hidden() {
+        return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('audio'));
+      },
+      onClick: function onClick(editor) {
+        return editor.chain().focus().insertMedia({
+          type: 'audio',
+          tag: 'audio'
+        }).run();
+      }
+    }, {
+      icon: /*#__PURE__*/_react["default"].createElement(_CssIcon["default"], null),
+      hidden: function hidden() {
+        return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('css'));
+      },
+      onClick: function onClick(editor) {
+        return editor.commands.openCSSClassDialog();
+      }
+    }, {
+      icon: /*#__PURE__*/_react["default"].createElement(_FormatQuote["default"], null),
+      hidden: function hidden() {
+        return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('blockquote'));
+      },
+      onClick: function onClick(editor) {
+        return editor.chain().focus().toggleBlockquote().run();
+      },
+      isActive: function isActive(state) {
+        return state.isBlockquote;
+      }
+    }, {
+      icon: /*#__PURE__*/_react["default"].createElement(HeadingIcon, null),
+      hidden: function hidden() {
+        return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('h3'));
+      },
+      onClick: function onClick(editor) {
+        return editor.chain().focus().toggleHeadingParagraph().run();
+      },
+      isActive: function isActive(state) {
+        return state.isHeadingParagraph;
+      }
+    }, {
+      icon: /*#__PURE__*/_react["default"].createElement(_Functions["default"], null),
+      hidden: function hidden() {
+        return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('math'));
+      },
+      onClick: function onClick(editor) {
+        return editor.chain().focus().insertMath('').run();
+      }
+    }, {
+      icon: /*#__PURE__*/_react["default"].createElement(_CharacterPicker.CharacterIcon, {
+        letter: "\xF1"
+      }),
+      hidden: function hidden() {
+        return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('languageCharacters'));
+      },
+      onClick: function onClick() {
+        return setShowPicker(_characterUtils.spanishConfig);
+      }
+    }, {
+      icon: /*#__PURE__*/_react["default"].createElement(_CharacterPicker.CharacterIcon, {
+        letter: "\u20AC"
+      }),
+      hidden: function hidden() {
+        return (activePlugins === null || activePlugins === void 0 ? void 0 : activePlugins.filter(function (p) {
+          return p === 'languageCharacters';
+        }).length) !== 2;
+      },
+      onClick: function onClick() {
+        return setShowPicker(_characterUtils.specialConfig);
+      }
+    }, {
+      icon: /*#__PURE__*/_react["default"].createElement(_TextAlign["default"], {
+        editor: editor
+      }),
+      hidden: function hidden() {
+        return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('text-align'));
+      },
+      onClick: function onClick() {}
+    }, {
+      icon: /*#__PURE__*/_react["default"].createElement(_FormatListBulleted["default"], null),
+      hidden: function hidden() {
+        return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('bulleted-list'));
+      },
+      onClick: function onClick(editor) {
+        return editor.chain().focus().toggleBulletList().run();
+      },
+      isActive: function isActive(state) {
+        return state.isBulletList;
+      }
+    }, {
+      icon: /*#__PURE__*/_react["default"].createElement(_FormatListNumbered["default"], null),
+      hidden: function hidden() {
+        return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('numbered-list'));
+      },
+      onClick: function onClick(editor) {
+        return editor.chain().focus().toggleOrderedList().run();
+      },
+      isActive: function isActive(state) {
+        return state.isOrderedList;
+      }
+    }, {
+      icon: /*#__PURE__*/_react["default"].createElement(_Undo["default"], null),
+      hidden: function hidden() {
+        return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('undo'));
+      },
+      onClick: function onClick(editor) {
+        return editor.chain().focus().undo().run();
+      },
+      isDisabled: function isDisabled(state) {
+        return !state.canUndo;
+      }
+    }, {
+      icon: /*#__PURE__*/_react["default"].createElement(_Redo["default"], null),
+      hidden: function hidden() {
+        return !(activePlugins !== null && activePlugins !== void 0 && activePlugins.includes('redo'));
+      },
+      onClick: function onClick(editor) {
+        return editor.chain().focus().redo().run();
+      },
+      isDisabled: function isDisabled(state) {
+        return !state.canRedo;
+      }
+    }];
+  }, [activePlugins, editor]);
+  var isDragInTheBlankSelected = editorState.hideDefaultToolbar && ((_editorState$currentN = editorState.currentNode) === null || _editorState$currentN === void 0 || (_editorState$currentN = _editorState$currentN.type) === null || _editorState$currentN === void 0 ? void 0 : _editorState$currentN.name) === 'drag_in_the_blank';
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: names,
+    style: _objectSpread({}, customStyles),
+    onMouseDown: handleMouseDown
+  }, isDragInTheBlankSelected && /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.defaultToolbar,
+    tabIndex: "1"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.buttonsContainer
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    className: classes.button,
+    onClick: function onClick(e) {
+      e.preventDefault();
+      editor.chain().focus().deleteSelection().run();
+      onChange === null || onChange === void 0 || onChange(editor.getHTML());
+    },
+    "aria-label": "Delete response area"
+  }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], null)))), !editorState.hideDefaultToolbar && /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.defaultToolbar,
+    tabIndex: "1"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.buttonsContainer
+  }, toolbarButtons.filter(function (btn) {
+    var _btn$hidden;
+    return !((_btn$hidden = btn.hidden) !== null && _btn$hidden !== void 0 && _btn$hidden.call(btn, editorState));
+  }).map(function (btn, index) {
+    var _btn$isDisabled, _btn$isActive;
+    var disabled = (_btn$isDisabled = btn.isDisabled) === null || _btn$isDisabled === void 0 ? void 0 : _btn$isDisabled.call(btn, editorState);
+    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,
+      disabled: disabled,
+      onClick: function onClick(e) {
+        e.preventDefault();
+        btn.onClick(editor);
+      },
+      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", {
+    onClick: function onClick() {
+      editor.chain().focus().insertResponseArea(responseAreaProps.type).run();
+    },
+    className: classes.button
+  }, /*#__PURE__*/_react["default"].createElement(_ToolbarIcon.ToolbarIcon, null)), toolbarOpts.showDone && /*#__PURE__*/_react["default"].createElement(_doneButton.DoneButton, {
+    onClick: function onClick() {
+      onChange === null || onChange === void 0 || onChange(editor.getHTML());
+      editor.commands.blur();
+    }
+  })), showPicker && /*#__PURE__*/_react["default"].createElement(_CharacterPicker.CharacterPicker, {
+    editor: editor,
+    opts: _objectSpread(_objectSpread({}, showPicker), {}, {
+      renderPopOver: function renderPopOver(ev, ch) {
+        return console.log('Show popover', ch);
+      },
+      closePopOver: function closePopOver() {
+        return console.log('Close popover');
+      }
+    }),
+    onClose: function onClose() {
+      return setShowPicker(false);
+    }
+  }));
+}
+
+// Wrapper component that provides classes object using styled API
+var StyledMenuBar = function StyledMenuBar(props) {
+  var theme = (0, _styles.useTheme)();
+  var classes = {
+    defaultToolbar: 'defaultToolbar',
+    buttonsContainer: 'buttonsContainer',
+    button: 'toolbarButton',
+    active: 'active',
+    disabled: 'disabled',
+    isActive: 'isActive',
+    toolbar: 'toolbar',
+    toolbarWithNoDone: 'toolbarWithNoDone',
+    toolbarTop: 'toolbarTop',
+    toolbarRight: 'toolbarRight',
+    fullWidth: 'fullWidth',
+    hidden: 'hidden',
+    autoWidth: 'autoWidth',
+    focused: 'focused',
+    iconRoot: 'iconRoot',
+    label: 'label',
+    shared: 'shared'
+  };
+  return /*#__PURE__*/_react["default"].createElement(StyledMenuBarRoot, null, /*#__PURE__*/_react["default"].createElement(MenuBar, (0, _extends2["default"])({}, props, {
+    classes: classes
+  })));
+};
+var StyledMenuBarRoot = (0, _styles.styled)('div')(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    '& .defaultToolbar': {
+      display: 'flex',
+      width: '100%',
+      justifyContent: 'space-between'
+    },
+    '& .buttonsContainer': {
+      alignItems: 'center',
+      display: 'flex',
+      width: '100%'
+    },
+    '& .toolbarButton': {
+      color: 'grey',
+      display: 'inline-flex',
+      padding: '2px',
+      background: 'none',
+      border: 'none',
+      cursor: 'pointer',
+      '&:hover': {
+        color: 'black'
+      },
+      '&:focus': {
+        outline: "2px solid ".concat(theme.palette.grey[700])
+      }
+    },
+    '& .active': {
+      color: 'black'
+    },
+    '& .disabled': {
+      opacity: 0.7,
+      cursor: 'not-allowed',
+      '& :hover': {
+        color: 'grey'
+      }
+    },
+    '& .isActive': {
+      background: 'var(--purple)',
+      color: 'var(--white)'
+    },
+    '& .toolbar': {
+      position: 'absolute',
+      zIndex: 20,
+      cursor: 'pointer',
+      justifyContent: 'space-between',
+      background: 'var(--editable-html-toolbar-bg, #efefef)',
+      minWidth: '280px',
+      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',
+      display: 'flex',
+      opacity: 0,
+      pointerEvents: 'none'
+    },
+    '& .toolbarWithNoDone': {
+      minWidth: '265px'
+    },
+    '& .toolbarTop': {
+      top: '-45px'
+    },
+    '& .toolbarRight': {
+      right: 0
+    },
+    '& .fullWidth': {
+      width: '100%'
+    },
+    '& .hidden': {
+      visibility: 'hidden'
+    },
+    '& .autoWidth': {
+      width: 'auto'
+    },
+    '& .focused': {
+      opacity: 1,
+      pointerEvents: 'auto'
+    },
+    '& .iconRoot': {
+      width: '28px',
+      height: '28px',
+      padding: '4px',
+      verticalAlign: 'top'
+    },
+    '& .label': {
+      color: 'var(--editable-html-toolbar-check, #00bb00)'
+    },
+    '& .shared': {
+      display: 'flex'
+    }
+  };
+});
+var _default = exports["default"] = StyledMenuBar;
+//# sourceMappingURL=MenuBar.js.map