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

package/LICENSE.md

@@ -0,0 +1,5 @@
+Copyright 2019 CoreSpring Inc
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/lib/components/CharacterPicker.js

@@ -0,0 +1,201 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CharacterIcon = void 0;
+exports.CharacterPicker = CharacterPicker;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _get = _interopRequireDefault(require("lodash-es/get"));
+var _mathToolbar = require("@pie-lib/math-toolbar");
+var _customPopper = _interopRequireDefault(require("./characters/custom-popper"));
+var _characterUtils = require("./characters/characterUtils");
+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 CharacterIcon = exports.CharacterIcon = function CharacterIcon(_ref) {
+  var letter = _ref.letter;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      fontSize: '24px',
+      lineHeight: '24px'
+    }
+  }, letter);
+};
+CharacterIcon.propTypes = {
+  letter: _propTypes["default"].string
+};
+function CharacterPicker(_ref2) {
+  var _opts$characters;
+  var editor = _ref2.editor,
+    opts = _ref2.opts,
+    onClose = _ref2.onClose;
+  if (!(opts !== null && opts !== void 0 && (_opts$characters = opts.characters) !== null && _opts$characters !== void 0 && _opts$characters.length)) {
+    return null;
+  }
+  var containerRef = (0, _react.useRef)(null);
+  var onCloseRef = (0, _react.useRef)(onClose);
+  var _useState = (0, _react.useState)({
+      top: 0,
+      left: 0
+    }),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    position = _useState2[0],
+    setPosition = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    popover = _useState4[0],
+    setPopover = _useState4[1];
+  onCloseRef.current = onClose;
+  var configToUse = (0, _react.useMemo)(function () {
+    if (!opts) return _characterUtils.spanishConfig;
+    switch (true) {
+      case opts.language === 'spanish':
+        return _characterUtils.spanishConfig;
+      case opts.language === 'special':
+        return _characterUtils.specialConfig;
+      default:
+        return opts;
+    }
+  }, [opts]);
+  var layoutForCharacters = (0, _react.useMemo)(function () {
+    return configToUse.characters.reduce(function (obj, arr) {
+      if (arr.length >= obj.columns) {
+        obj.columns = arr.length;
+      }
+      return obj;
+    }, {
+      rows: configToUse.characters.length,
+      columns: 0
+    });
+  }, [configToUse]);
+  var closePopOver = function closePopOver() {
+    return setPopover(null);
+  };
+  (0, _react.useEffect)(function () {
+    return function () {
+      closePopOver();
+    };
+  }, []);
+
+  // Keep `onClose` out of the dependency array — parents often pass a new callback each
+  // render (e.g. after each keystroke), which would re-run this effect constantly. Use a
+  // ref so click-outside always calls the latest close handler.
+  (0, _react.useEffect)(function () {
+    if (!editor) return;
+
+    // Calculate position relative to selection
+    var editorDOM = editor.options.element;
+    var editorRect = editorDOM.getBoundingClientRect();
+    var bodyRect = document.body.getBoundingClientRect();
+    var from = editor.state.selection.from;
+    var start = editor.view.coordsAtPos(from);
+    var top = editorRect.top + Math.abs(bodyRect.top) + editorRect.height + 60;
+    if (editorRect.y > containerRef.current.offsetHeight) {
+      top = top - (containerRef.current.offsetHeight + editorRect.height) - 80;
+    }
+    setPosition({
+      top: top,
+      left: start.left
+    });
+    var editorViewDom = editor.view.dom;
+    var handleClickOutside = function handleClickOutside(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target) && !editorViewDom.contains(e.target)) {
+        onCloseRef.current();
+      }
+    };
+    var timeoutId = setTimeout(function () {
+      document.addEventListener('click', handleClickOutside);
+    });
+    return function () {
+      clearTimeout(timeoutId);
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, [editor]);
+  var renderPopOver = function renderPopOver(event, el) {
+    return setPopover({
+      anchorEl: event.currentTarget,
+      el: el
+    });
+  };
+  var handleChange = function handleChange(val) {
+    if (typeof val === 'string') {
+      editor.chain().focus().insertContent(val).run();
+    }
+  };
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_reactDom["default"].createPortal(/*#__PURE__*/_react["default"].createElement("div", {
+    ref: containerRef,
+    className: "insert-character-dialog",
+    "data-toolbar-for": editor.instanceId,
+    style: {
+      visibility: position.top === 0 && position.left === 0 ? 'hidden' : 'initial',
+      position: 'absolute',
+      top: "".concat(position.top, "px"),
+      left: "".concat(position.left, "px"),
+      maxWidth: '500px',
+      zIndex: 99
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_mathToolbar.PureToolbar, {
+    keyPadCharacterRef: opts.keyPadCharacterRef,
+    setKeypadInteraction: opts.setKeypadInteraction,
+    autoFocus: true,
+    noDecimal: true,
+    hideInput: true,
+    noLatexHandling: true,
+    hideDoneButtonBackground: true,
+    layoutForKeyPad: layoutForCharacters,
+    additionalKeys: configToUse.characters.reduce(function (arr, n) {
+      arr = [].concat((0, _toConsumableArray2["default"])(arr), (0, _toConsumableArray2["default"])(n.map(function (k) {
+        return _objectSpread({
+          name: (0, _get["default"])(k, 'name') || k,
+          write: (0, _get["default"])(k, 'write') || k,
+          label: (0, _get["default"])(k, 'label') || k,
+          category: 'character',
+          extraClass: 'character',
+          extraProps: _objectSpread(_objectSpread({}, k.extraProps || {}), {}, {
+            style: _objectSpread(_objectSpread({}, (k.extraProps || {}).style), {}, {
+              border: '1px solid #000'
+            })
+          })
+        }, configToUse.hasPreview ? {
+          actions: {
+            onMouseEnter: function onMouseEnter(ev) {
+              return renderPopOver(ev, k);
+            },
+            onMouseLeave: closePopOver
+          }
+        } : {});
+      })));
+      return arr;
+    }, []),
+    keypadMode: "language",
+    onChange: handleChange,
+    onDone: onClose
+  }))), document.body), popover && /*#__PURE__*/_reactDom["default"].createPortal(/*#__PURE__*/_react["default"].createElement(_customPopper["default"], {
+    onClose: closePopOver,
+    anchorEl: popover.anchorEl
+  }, /*#__PURE__*/_react["default"].createElement("div", null, popover.el.label), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      fontSize: 20,
+      lineHeight: '20px'
+    }
+  }, popover.el.description), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      fontSize: 20,
+      lineHeight: '20px'
+    }
+  }, popover.el.unicode)), document.body));
+}
+CharacterPicker.propTypes = {
+  editor: _propTypes["default"].object,
+  opts: _propTypes["default"].object,
+  onClose: _propTypes["default"].func.isRequired
+};
+//# sourceMappingURL=CharacterPicker.js.map

package/lib/components/CharacterPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CharacterPicker.js","names":["_react","_interopRequireWildcard","require","_reactDom","_interopRequireDefault","_propTypes","_get","_mathToolbar","_customPopper","_characterUtils","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","CharacterIcon","exports","_ref","letter","createElement","style","fontSize","lineHeight","propTypes","PropTypes","string","CharacterPicker","_ref2","_opts$characters","editor","opts","onClose","characters","containerRef","useRef","onCloseRef","_useState","useState","top","left","_useState2","_slicedToArray2","position","setPosition","_useState3","_useState4","popover","setPopover","current","configToUse","useMemo","spanishConfig","language","specialConfig","layoutForCharacters","reduce","obj","arr","columns","rows","closePopOver","useEffect","editorDOM","options","element","editorRect","getBoundingClientRect","bodyRect","document","body","from","state","selection","start","view","coordsAtPos","Math","abs","height","y","offsetHeight","editorViewDom","dom","handleClickOutside","contains","target","timeoutId","setTimeout","addEventListener","clearTimeout","removeEventListener","renderPopOver","event","el","anchorEl","currentTarget","handleChange","val","chain","focus","insertContent","run","Fragment","ReactDOM","createPortal","ref","className","instanceId","visibility","concat","maxWidth","zIndex","PureToolbar","keyPadCharacterRef","setKeypadInteraction","autoFocus","noDecimal","hideInput","noLatexHandling","hideDoneButtonBackground","layoutForKeyPad","additionalKeys","_toConsumableArray2","map","k","name","write","label","category","extraClass","extraProps","border","hasPreview","actions","onMouseEnter","ev","onMouseLeave","keypadMode","onChange","onDone","description","unicode","object","func","isRequired"],"sources":["../../src/components/CharacterPicker.jsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport get from 'lodash-es/get';\n\nimport { PureToolbar } from '@pie-lib/math-toolbar';\n\nimport CustomPopper from './characters/custom-popper';\nimport { spanishConfig, specialConfig } from './characters/characterUtils';\n\nconst CharacterIcon = ({ letter }) => (\n  <div\n    style={{\n      fontSize: '24px',\n      lineHeight: '24px',\n    }}\n  >\n    {letter}\n  </div>\n);\n\nCharacterIcon.propTypes = {\n  letter: PropTypes.string,\n};\n\nexport function CharacterPicker({ editor, opts, onClose }) {\n  if (!opts?.characters?.length) {\n    return null;\n  }\n\n  const containerRef = useRef(null);\n  const onCloseRef = useRef(onClose);\n  const [position, setPosition] = useState({ top: 0, left: 0 });\n  const [popover, setPopover] = useState(null);\n\n  onCloseRef.current = onClose;\n\n  const configToUse = useMemo(() => {\n    if (!opts) return spanishConfig;\n\n    switch (true) {\n      case opts.language === 'spanish':\n        return spanishConfig;\n      case opts.language === 'special':\n        return specialConfig;\n      default:\n        return opts;\n    }\n  }, [opts]);\n\n  const layoutForCharacters = useMemo(\n    () =>\n      configToUse.characters.reduce(\n        (obj, arr) => {\n          if (arr.length >= obj.columns) {\n            obj.columns = arr.length;\n          }\n\n          return obj;\n        },\n        { rows: configToUse.characters.length, columns: 0 },\n      ),\n    [configToUse],\n  );\n\n  const closePopOver = () => setPopover(null);\n\n  useEffect(\n    () => () => {\n      closePopOver();\n    },\n    [],\n  );\n\n  // Keep `onClose` out of the dependency array — parents often pass a new callback each\n  // render (e.g. after each keystroke), which would re-run this effect constantly. Use a\n  // ref so click-outside always calls the latest close handler.\n  useEffect(() => {\n    if (!editor) return;\n\n    // Calculate position relative to selection\n    const editorDOM = editor.options.element;\n    const editorRect = editorDOM.getBoundingClientRect();\n    const bodyRect = document.body.getBoundingClientRect();\n    const { from } = editor.state.selection;\n    const start = editor.view.coordsAtPos(from);\n\n    let top = editorRect.top + Math.abs(bodyRect.top) + editorRect.height + 60;\n\n    if (editorRect.y > containerRef.current.offsetHeight) {\n      top = top - (containerRef.current.offsetHeight + editorRect.height) - 80;\n    }\n\n    setPosition({\n      top: top,\n      left: start.left,\n    });\n\n    const editorViewDom = editor.view.dom;\n\n    const handleClickOutside = (e) => {\n      if (containerRef.current && !containerRef.current.contains(e.target) && !editorViewDom.contains(e.target)) {\n        onCloseRef.current();\n      }\n    };\n\n    const timeoutId = setTimeout(() => {\n      document.addEventListener('click', handleClickOutside);\n    });\n\n    return () => {\n      clearTimeout(timeoutId);\n      document.removeEventListener('click', handleClickOutside);\n    };\n  }, [editor]);\n\n  const renderPopOver = (event, el) => setPopover({ anchorEl: event.currentTarget, el });\n\n  const handleChange = (val) => {\n    if (typeof val === 'string') {\n      editor.chain().focus().insertContent(val).run();\n    }\n  };\n\n  return (\n    <>\n      {ReactDOM.createPortal(\n        <div\n          ref={containerRef}\n          className=\"insert-character-dialog\"\n          data-toolbar-for={editor.instanceId}\n          style={{\n            visibility: position.top === 0 && position.left === 0 ? 'hidden' : 'initial',\n            position: 'absolute',\n            top: `${position.top}px`,\n            left: `${position.left}px`,\n            maxWidth: '500px',\n            zIndex: 99,\n          }}\n        >\n          <div>\n            <PureToolbar\n              keyPadCharacterRef={opts.keyPadCharacterRef}\n              setKeypadInteraction={opts.setKeypadInteraction}\n              autoFocus\n              noDecimal\n              hideInput\n              noLatexHandling\n              hideDoneButtonBackground\n              layoutForKeyPad={layoutForCharacters}\n              additionalKeys={configToUse.characters.reduce((arr, n) => {\n                arr = [\n                  ...arr,\n                  ...n.map((k) => ({\n                    name: get(k, 'name') || k,\n                    write: get(k, 'write') || k,\n                    label: get(k, 'label') || k,\n                    category: 'character',\n                    extraClass: 'character',\n                    extraProps: {\n                      ...(k.extraProps || {}),\n                      style: {\n                        ...(k.extraProps || {}).style,\n                        border: '1px solid #000',\n                      },\n                    },\n                    ...(configToUse.hasPreview\n                      ? {\n                          actions: {\n                            onMouseEnter: (ev) => renderPopOver(ev, k),\n                            onMouseLeave: closePopOver,\n                          },\n                        }\n                      : {}),\n                  })),\n                ];\n\n                return arr;\n              }, [])}\n              keypadMode=\"language\"\n              onChange={handleChange}\n              onDone={onClose}\n            />\n          </div>\n        </div>,\n        document.body,\n      )}\n      {popover &&\n        ReactDOM.createPortal(\n          <CustomPopper onClose={closePopOver} anchorEl={popover.anchorEl}>\n            <div>{popover.el.label}</div>\n            <div style={{ fontSize: 20, lineHeight: '20px' }}>{popover.el.description}</div>\n            <div style={{ fontSize: 20, lineHeight: '20px' }}>{popover.el.unicode}</div>\n          </CustomPopper>,\n          document.body,\n        )}\n    </>\n  );\n}\n\nCharacterPicker.propTypes = {\n  editor: PropTypes.object,\n  opts: PropTypes.object,\n  onClose: PropTypes.func.isRequired,\n};\n\nexport { CharacterIcon };\n"],"mappings":"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","ignoreList":[]}

package/lib/components/EditableHtml.js

@@ -0,0 +1,376 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.EditableHtml = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _debounce = _interopRequireDefault(require("lodash-es/debounce"));
+var _react2 = require("@tiptap/react");
+var _styles = require("@mui/material/styles");
+var _starterKit = _interopRequireDefault(require("@tiptap/starter-kit"));
+var _extensionTextStyle = require("@tiptap/extension-text-style");
+var _extensionCharacterCount = require("@tiptap/extension-character-count");
+var _extensionSuperscript = _interopRequireDefault(require("@tiptap/extension-superscript"));
+var _extensionSubscript = _interopRequireDefault(require("@tiptap/extension-subscript"));
+var _extensionTextAlign = _interopRequireDefault(require("@tiptap/extension-text-align"));
+var _extensionImage = _interopRequireDefault(require("@tiptap/extension-image"));
+var _extensionPlaceholder = _interopRequireDefault(require("@tiptap/extension-placeholder"));
+var _helper = require("../utils/helper");
+var _extendedTable = _interopRequireDefault(require("../extensions/extended-table"));
+var _extendedTableCell = require("../extensions/extended-table-cell");
+var _divNode = require("../extensions/div-node");
+var _ensureEmptyRootDiv = require("../extensions/ensure-empty-root-div");
+var _ensureListItemContentIsDiv = require("../extensions/ensure-list-item-content-is-div");
+var _extensionTableRow = require("@tiptap/extension-table-row");
+var _responseArea = require("../extensions/responseArea");
+var _math = require("../extensions/math");
+var _image = require("../extensions/image");
+var _media = require("../extensions/media");
+var _css = require("../extensions/css");
+var _extendedListItem = require("../extensions/extended-list-item");
+var _headingParagraph = require("../extensions/heading-paragraph");
+var _TiptapContainer = _interopRequireDefault(require("./TiptapContainer"));
+var _size = require("../utils/size");
+var _extensions = require("../extensions");
+var _excluded = ["customPlugins"];
+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 defaultToolbarOpts = {
+  position: 'bottom',
+  alignment: 'left',
+  alwaysVisible: false,
+  showDone: true,
+  doneOn: 'blur'
+};
+var defaultResponseAreaProps = {
+  options: {},
+  respAreaToolbar: function respAreaToolbar() {},
+  onHandleAreaChange: function onHandleAreaChange() {}
+};
+var DEFAULT_ACTIVE_PLUGINS = ['bold', 'italic', 'underline', 'strikethrough', 'code', 'bulleted-list', 'numbered-list', 'image', 'math', 'languageCharacters', 'text-align', 'table', 'video', 'audio', 'responseArea', 'superscript', 'subscript', 'css', 'h3', 'undo', 'redo'];
+var cssVariables = {
+  '--white': '#fff',
+  '--black': '#2e2b29',
+  '--black-contrast': '#110f0e',
+  '--gray-1': 'rgba(61, 37, 20, .05)',
+  '--gray-2': 'rgba(61, 37, 20, .08)',
+  '--gray-3': 'rgba(61, 37, 20, .12)',
+  '--gray-4': 'rgba(53, 38, 28, .3)',
+  '--gray-5': 'rgba(28, 25, 23, .6)',
+  '--green': '#22c55e',
+  '--purple': '#6a00f5',
+  '--purple-contrast': '#5800cc',
+  '--purple-light': 'rgba(88, 5, 255, .05)',
+  '--yellow-contrast': '#facc15',
+  '--yellow': 'rgba(250, 204, 21, .4)',
+  '--yellow-light': '#fffae5',
+  '--red': '#ff5c33',
+  '--red-light': '#ffebe5',
+  '--shadow': "0px 12px 33px 0px rgba(0, 0, 0, .06),\n               0px 3.618px 9.949px 0px rgba(0, 0, 0, .04)"
+};
+var EditableHtml = exports.EditableHtml = function EditableHtml(props) {
+  var _props$pluginProps;
+  var _ref = props.pluginProps || {},
+    showParagraphs = _ref.showParagraphs,
+    separateParagraphs = _ref.separateParagraphs;
+  var _useState = (0, _react.useState)([]),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    pendingImages = _useState2[0],
+    setPendingImages = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    scheduled = _useState4[0],
+    setScheduled = _useState4[1];
+  var toolbarOpts = props.toolbarOpts;
+  var removePendingImage = (0, _react.useCallback)(function (imagePos) {
+    setPendingImages(function (prev) {
+      var next = prev.filter(function (img) {
+        return img.pos !== imagePos;
+      });
+      if (next.length === 0) {
+        setScheduled(false);
+      }
+      return next;
+    });
+  }, [setPendingImages]);
+  var toolbarOptsToUse = _objectSpread(_objectSpread({}, defaultToolbarOpts), toolbarOpts);
+  var activePluginsToUse = (0, _react.useMemo)(function () {
+    var _ref3, _props$responseAreaPr;
+    var _ref2 = props.pluginProps || {},
+      customPlugins = _ref2.customPlugins,
+      otherPluginProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+    customPlugins = customPlugins || [];
+    var filteredActivePlugins = (_ref3 = props.activePlugins || DEFAULT_ACTIVE_PLUGINS) === null || _ref3 === void 0 ? void 0 : _ref3.filter(function (pluginName) {
+      var nameToUse = _extensions.PLUGINS_MAP[pluginName] || pluginName;
+      var pluginInfo = otherPluginProps[nameToUse] || {};
+      return !pluginInfo || !pluginInfo.disabled;
+    });
+    return (0, _extensions.buildExtensions)(filteredActivePlugins, customPlugins, {
+      math: {},
+      textAlign: props.textAlign,
+      html: {},
+      extraCSSRules: props.extraCSSRules || {},
+      image: _objectSpread({}, props.imageSupport),
+      toolbar: {},
+      table: {},
+      responseArea: {
+        type: (_props$responseAreaPr = props.responseAreaProps) === null || _props$responseAreaPr === void 0 ? void 0 : _props$responseAreaPr.type
+      },
+      languageCharacters: props.languageCharactersProps,
+      keyPadCharacterRef: {},
+      setKeypadInteraction: {},
+      media: {}
+    });
+  }, [props]);
+  var extensions = [_extensionTextAlign["default"].configure({
+    types: ['heading', 'paragraph', 'div', 'headingParagraph', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'td', 'th'],
+    alignments: ['left', 'right', 'center', 'justify']
+  }), _extensionTextStyle.TextStyleKit, _extensionCharacterCount.CharacterCount.configure({
+    limit: props.charactersLimit || 1000000
+  }), _starterKit["default"].configure({
+    trailingNode: {
+      node: 'paragraph',
+      notAfter: ['paragraph', 'div']
+    }
+  }), _extendedListItem.ExtendedListItem, _divNode.DivNode, _headingParagraph.HeadingParagraph, _ensureEmptyRootDiv.EnsureEmptyRootIsDiv, _ensureListItemContentIsDiv.EnsureListItemContentIsDiv, _extensionPlaceholder["default"].configure({
+    placeholder: props.placeholder,
+    // show placeholder even when editor is focused
+    showOnlyWhenEditable: true,
+    showOnlyCurrent: false,
+    // show on all empty nodes, not only the current one
+    includeChildren: true
+  }), _extendedTable["default"], _extensionTableRow.TableRow, _extendedTableCell.ExtendedTableHeader, _extendedTableCell.ExtendedTableCell, _responseArea.ResponseAreaExtension.configure(props.responseAreaProps), _responseArea.ExplicitConstructedResponseNode.configure(props.responseAreaProps), _responseArea.DragInTheBlankNode.configure(props.responseAreaProps), _responseArea.InlineDropdownNode.configure(props.responseAreaProps), _responseArea.MathTemplatedNode.configure(props.responseAreaProps), _math.MathNode.configure({
+    toolbarOpts: toolbarOptsToUse,
+    math: ((_props$pluginProps = props.pluginProps) === null || _props$pluginProps === void 0 ? void 0 : _props$pluginProps.math) || {}
+  }), _extensionSubscript["default"], _extensionSuperscript["default"], _extensionImage["default"], _image.ImageUploadNode.configure({
+    toolbarOpts: toolbarOptsToUse,
+    imageHandling: {
+      disableImageAlignmentButtons: props.disableImageAlignmentButtons,
+      onDone: function onDone(editor) {
+        var _props$onDone;
+        return (_props$onDone = props.onDone) === null || _props$onDone === void 0 ? void 0 : _props$onDone.call(props, editor.getHTML());
+      },
+      onDelete: props.imageSupport && props.imageSupport["delete"] && function (node) {
+        var src = node.attrs.src;
+        props.imageSupport["delete"](src, function (e) {
+          removePendingImage(node.pos);
+        });
+      },
+      insertImageRequested: props.imageSupport && function (editor, imageInfo, getHandler) {
+        var _imageInfo = (0, _slicedToArray2["default"])(imageInfo, 2),
+          addedImage = _imageInfo[0],
+          pos = _imageInfo[1];
+        var onFinish = function onFinish(result) {
+          var _cb;
+          var cb;
+          if (scheduled && result) {
+            // finish editing only on success
+            cb = props.onChange;
+          }
+          removePendingImage(pos);
+          (_cb = cb) === null || _cb === void 0 || _cb(editor.getHTML());
+        };
+        var callback = function callback() {
+          /**
+           * The handler is the object through which the outer context
+           * communicates file upload events like: fileChosen, cancel, progress
+           */
+          var handler = getHandler(onFinish);
+
+          // If the user closes the file picker without choosing a file, the window regains
+          // focus while _insertingImage is still true — drop the stale pending entry.
+          var focusHandler = (0, _debounce["default"])(function () {
+            var detach = function detach() {
+              return window.removeEventListener('focus', focusHandler);
+            };
+            if (!editor._insertingImage) {
+              detach();
+              return;
+            }
+            removePendingImage(pos);
+            editor._insertingImage = false;
+            detach();
+          }, 500);
+          window.addEventListener('focus', focusHandler);
+          props.imageSupport.add(handler);
+        };
+        editor._insertingImage = true;
+        setPendingImages(function (prev) {
+          return [].concat((0, _toConsumableArray2["default"])(prev), [addedImage]);
+        });
+        callback();
+      },
+      maxImageWidth: props.maxImageWidth,
+      maxImageHeight: props.maxImageHeight
+    },
+    limit: 3
+  }), _media.Media.configure({
+    uploadSoundSupport: props.uploadSoundSupport
+  }), _css.CSSMark.configure({
+    extraCSSRules: props.extraCSSRules
+  })];
+  var editor = (0, _react2.useEditor)({
+    extensions: extensions,
+    immediatelyRender: false,
+    editorProps: {
+      handleKeyDown: function handleKeyDown(view, event) {
+        if (props.onKeyDown) {
+          return props.onKeyDown(event);
+        }
+
+        // Return false to let default behavior continue
+        return false;
+      }
+    },
+    editable: !props.disabled,
+    content: (0, _helper.normalizeInitialMarkup)(props.markup),
+    onUpdate: function onUpdate(_ref4) {
+      var editor = _ref4.editor,
+        transaction = _ref4.transaction;
+      if (transaction.isDone) {
+        var _props$onChange;
+        (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, editor.getHTML());
+      }
+    },
+    onBlur: function onBlur(_ref5) {
+      var editor = _ref5.editor;
+      var otherToolbarOpened = editor._insertingImage || editor._toolbarOpened || editor.isActive('inline_dropdown') || editor.isActive('explicit_constructed_response');
+      if (otherToolbarOpened || !editor.schema) {
+        return;
+      }
+      var html = editor.getHTML();
+      if (props.markup !== html) {
+        var _props$onChange2;
+        (_props$onChange2 = props.onChange) === null || _props$onChange2 === void 0 || _props$onChange2.call(props, html);
+      }
+      if (toolbarOptsToUse.doneOn === 'blur') {
+        var _props$onDone2;
+        (_props$onDone2 = props.onDone) === null || _props$onDone2 === void 0 || _props$onDone2.call(props, html);
+      }
+    }
+  }, [props.charactersLimit]);
+  (0, _react.useEffect)(function () {
+    if (props.editorRef) {
+      props.editorRef(editor);
+    }
+  }, [props.editorRef, editor]);
+  (0, _react.useEffect)(function () {
+    editor === null || editor === void 0 || editor.setEditable(!props.disabled);
+  }, [props.disabled, editor]);
+  (0, _react.useEffect)(function () {
+    if (!editor) {
+      return;
+    }
+    var nextMarkup = (0, _helper.normalizeInitialMarkup)(props.markup);
+    if (nextMarkup !== editor.getHTML()) {
+      editor.commands.setContent(nextMarkup, false);
+    }
+  }, [props.markup, editor]);
+  (0, _react.useEffect)(function () {
+    Object.entries(cssVariables).forEach(function (_ref6) {
+      var _ref7 = (0, _slicedToArray2["default"])(_ref6, 2),
+        key = _ref7[0],
+        value = _ref7[1];
+      document.documentElement.style.setProperty(key, value);
+    });
+  }, []);
+  var editorState = (0, _react2.useEditorState)({
+    editor: editor,
+    selector: function selector(ctx) {
+      var _ctx$editor;
+      return {
+        isFocused: (_ctx$editor = ctx.editor) === null || _ctx$editor === void 0 ? void 0 : _ctx$editor.isFocused
+      };
+    }
+  });
+  var sizeStyle = (0, _react.useMemo)(function () {
+    var minWidth = props.minWidth,
+      width = props.width,
+      maxWidth = props.maxWidth,
+      minHeight = props.minHeight,
+      height = props.height,
+      maxHeight = props.maxHeight;
+    return {
+      width: (0, _size.valueToSize)(width),
+      minWidth: (0, _size.valueToSize)(minWidth),
+      maxWidth: (0, _size.valueToSize)(maxWidth),
+      height: (0, _size.valueToSize)(height),
+      minHeight: (0, _size.valueToSize)(minHeight),
+      maxHeight: (0, _size.valueToSize)(maxHeight)
+    };
+  }, [props]);
+  return /*#__PURE__*/_react["default"].createElement(_TiptapContainer["default"], (0, _extends2["default"])({}, _objectSpread(_objectSpread({}, props), {}, {
+    activePlugins: activePluginsToUse,
+    toolbarOpts: toolbarOptsToUse
+  }), {
+    editorState: editorState,
+    editor: editor
+  }), editor && /*#__PURE__*/_react["default"].createElement(StyledEditorContent, {
+    style: {
+      minHeight: sizeStyle.minHeight,
+      height: sizeStyle.height,
+      maxHeight: sizeStyle.maxHeight
+    },
+    showParagraph: showParagraphs && !showParagraphs.disabled,
+    separateParagraph: separateParagraphs && !separateParagraphs.disabled,
+    editor: editor
+  }));
+};
+var StyledEditorContent = (0, _styles.styled)(_react2.EditorContent, {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !['showParagraph', 'separateParagraph'].includes(prop);
+  }
+})(function (_ref8) {
+  var showParagraph = _ref8.showParagraph,
+    separateParagraph = _ref8.separateParagraph;
+  return {
+    display: 'flex',
+    outline: 'none !important',
+    '& .ProseMirror': _objectSpread(_objectSpread({
+      flex: 1,
+      padding: '5px',
+      maxHeight: '500px',
+      outline: 'none !important',
+      position: 'initial',
+      // reset default margins for all block paragraphs/divs in the editor
+      '& > p, & > div': {
+        margin: '0'
+      },
+      // Out of flow so the caret stays at the start of the block; in-flow ::before pushes the caret after the hint text.
+      '& p.is-editor-empty, & div.is-editor-empty': {
+        position: 'relative'
+      },
+      '& p.is-editor-empty::before, & div.is-editor-empty::before': {
+        content: 'attr(data-placeholder)',
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        color: '#9CA3AF',
+        pointerEvents: 'none',
+        whiteSpace: 'pre-wrap'
+      }
+    }, showParagraph && {
+      '& > p:has(+ p)::after, & > div:has(+ div)::after': {
+        display: 'block',
+        content: '"¶"',
+        fontSize: '1em',
+        color: '#146EB3'
+      }
+    }), separateParagraph && {
+      '& > p:has(+ p)': {
+        marginBottom: '1em'
+      }
+    })
+  };
+});
+var _default = exports["default"] = EditableHtml;
+//# sourceMappingURL=EditableHtml.js.map