@pie-element/complex-rubric 3.8.4-next.9 → 5.0.1-esmbeta.0

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/editable-html/lib/plugins/css/index.js

@@ -0,0 +1,397 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = CSSPlugin;
+exports.removeDialogs = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _List = _interopRequireDefault(require("@material-ui/core/List"));
+
+var _slate = require("slate");
+
+var _immutable = _interopRequireDefault(require("immutable"));
+
+var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));
+
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+
+var _debug = _interopRequireDefault(require("debug"));
+
+var _icons = _interopRequireDefault(require("./icons"));
+
+var log = (0, _debug["default"])('@pie-lib:editable-html:plugins:characters');
+
+var removeDialogs = function removeDialogs() {
+  var prevDialogs = document.querySelectorAll('.insert-css-dialog');
+  log('[characters:removeDialogs]');
+  prevDialogs.forEach(function (s) {
+    return s.remove();
+  });
+};
+
+exports.removeDialogs = removeDialogs;
+
+var insertDialog = function insertDialog(_ref) {
+  var _parentNode$data, _parentNode$data$get;
+
+  var editorDOM = _ref.editorDOM,
+      value = _ref.value,
+      callback = _ref.callback,
+      opts = _ref.opts,
+      textNode = _ref.textNode,
+      parentNode = _ref.parentNode;
+  var newEl = document.createElement('div');
+  log('[characters:insertDialog]');
+  removeDialogs();
+  newEl.className = 'insert-css-dialog';
+  var popoverEl;
+
+  var closePopOver = function closePopOver() {
+    if (popoverEl) {
+      popoverEl.remove();
+    }
+  };
+
+  var firstCallMade = false;
+
+  var listener = function listener(e) {
+    // this will be triggered right after setting it because
+    // this toolbar is added on the mousedown event
+    // so right after mouseup, the click will be triggered
+    if (firstCallMade) {
+      var focusIsInModals = newEl.contains(e.target) || popoverEl && popoverEl.contains(e.target);
+      var focusIsInEditor = editorDOM.contains(e.target);
+
+      if (!(focusIsInModals || focusIsInEditor)) {
+        handleClose();
+      }
+    } else {
+      firstCallMade = true;
+    }
+  };
+
+  var handleClose = function handleClose() {
+    callback(undefined, true);
+    newEl.remove();
+    closePopOver();
+    document.body.removeEventListener('click', listener);
+  };
+
+  var handleChange = function handleChange(name) {
+    callback(name, true);
+    newEl.remove();
+    closePopOver();
+    document.body.removeEventListener('click', listener);
+  };
+
+  var selectedText = textNode.text.slice(value.selection.anchorOffset, value.selection.focusOffset);
+  var parentNodeClass = parentNode === null || parentNode === void 0 ? void 0 : (_parentNode$data = parentNode.data) === null || _parentNode$data === void 0 ? void 0 : (_parentNode$data$get = _parentNode$data.get('attributes')) === null || _parentNode$data$get === void 0 ? void 0 : _parentNode$data$get["class"];
+
+  var createHTML = function createHTML(name) {
+    var html = "<span class=\"".concat(name, "\">").concat(selectedText, "</span>");
+
+    if (parentNode) {
+      var tag;
+
+      if ((parentNode === null || parentNode === void 0 ? void 0 : parentNode.object) === 'inline') {
+        tag = 'span';
+      }
+
+      if ((parentNode === null || parentNode === void 0 ? void 0 : parentNode.object) === 'block') {
+        tag = 'div';
+      }
+
+      html = "<".concat(tag, " class=\"").concat(parentNodeClass, "\">").concat(parentNode.text.slice(0, value.selection.anchorOffset)).concat(html).concat(parentNode.text.slice(value.selection.focusOffset), "</").concat(tag, ">");
+    }
+
+    return html;
+  };
+
+  var el = /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      background: 'white',
+      height: 500,
+      padding: 20,
+      overflow: 'hidden',
+      display: 'flex',
+      flexFlow: 'column'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("h2", null, "Please choose a css class"), parentNodeClass && /*#__PURE__*/_react["default"].createElement("div", null, "The current parent has this class ", parentNodeClass), /*#__PURE__*/_react["default"].createElement(_List["default"], {
+    component: "nav",
+    style: {
+      overflow: 'scroll'
+    }
+  }, opts.names.map(function (name, i) {
+    return /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+      key: "rule-".concat(i),
+      button: true,
+      onClick: function onClick() {
+        return handleChange(name);
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        marginRight: 20
+      }
+    }, name), /*#__PURE__*/_react["default"].createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: createHTML(name)
+      }
+    }));
+  })));
+
+  _reactDom["default"].render(el, newEl, function () {
+    var cursorItem = document.querySelector("[data-key=\"".concat(value.anchorKey, "\"]"));
+
+    if (cursorItem) {
+      var bodyRect = editorDOM.parentElement.parentElement.parentElement.getBoundingClientRect();
+      var boundRect = cursorItem.getBoundingClientRect();
+      editorDOM.parentElement.parentElement.parentElement.appendChild(newEl); // when height of toolbar exceeds screen - can happen in scrollable contexts
+
+      var additionalTopOffset = 0;
+
+      if (boundRect.y < newEl.offsetHeight) {
+        additionalTopOffset = newEl.offsetHeight - boundRect.y + 10;
+      }
+
+      newEl.style.maxWidth = '500px';
+      newEl.style.position = 'absolute';
+      newEl.style.top = 0;
+      newEl.style.zIndex = 99999;
+      var leftValue = "".concat(boundRect.left + Math.abs(bodyRect.left) + cursorItem.offsetWidth + 10, "px");
+      var rightValue = "".concat(boundRect.x, "px");
+      newEl.style.left = leftValue;
+      var leftAlignedWidth = newEl.offsetWidth;
+      newEl.style.left = 'unset';
+      newEl.style.right = rightValue;
+      var rightAlignedWidth = newEl.offsetWidth;
+      newEl.style.left = 'unset';
+      newEl.style.right = 'unset';
+
+      if (leftAlignedWidth >= rightAlignedWidth) {
+        newEl.style.left = leftValue;
+      } else {
+        newEl.style.right = rightValue;
+      }
+
+      document.body.addEventListener('click', listener);
+    }
+  });
+};
+
+var findParentNodeInfo = function findParentNodeInfo(value, textNode) {
+  var _closestInline$nodes, _closestBlock$nodes;
+
+  var closestInline = value.document.getClosestInline(value.selection.endKey);
+  var closestBlock = value.document.getClosestBlock(value.selection.endKey);
+  var nodeToUse = null;
+
+  if (closestInline !== null && closestInline !== void 0 && (_closestInline$nodes = closestInline.nodes) !== null && _closestInline$nodes !== void 0 && _closestInline$nodes.find(function (n) {
+    return n.key === textNode.key;
+  })) {
+    nodeToUse = closestInline;
+  }
+
+  if (closestBlock !== null && closestBlock !== void 0 && (_closestBlock$nodes = closestBlock.nodes) !== null && _closestBlock$nodes !== void 0 && _closestBlock$nodes.find(function (n) {
+    return n.key === textNode.key;
+  })) {
+    nodeToUse = closestBlock;
+  }
+
+  return nodeToUse;
+};
+/**
+ * Find the node that has a class attribute and return it.
+ * Keeping this in case the implementation of classes needs to be changed
+ * @param value
+ * @param opts
+ * @returns {*}
+ */
+
+
+var getNodeWithClass = function getNodeWithClass(value, opts) {
+  var _blocksAtRange$, _inlinesAtRange$, _blockData$attributes, _inlineData$attribute;
+
+  var blocksAtRange = value.document.getBlocksAtRangeAsArray(value.selection);
+  var inlinesAtRange = value.document.getInlinesAtRangeAsArray(value.selection);
+  var blockData = ((_blocksAtRange$ = blocksAtRange[0]) === null || _blocksAtRange$ === void 0 ? void 0 : _blocksAtRange$.data.toJSON()) || {};
+  var inlineData = ((_inlinesAtRange$ = inlinesAtRange[0]) === null || _inlinesAtRange$ === void 0 ? void 0 : _inlinesAtRange$.data.toJSON()) || {};
+
+  if (!((_blockData$attributes = blockData.attributes) !== null && _blockData$attributes !== void 0 && _blockData$attributes["class"]) && !((_inlineData$attribute = inlineData.attributes) !== null && _inlineData$attribute !== void 0 && _inlineData$attribute["class"])) {
+    return null;
+  }
+
+  var _ref2 = blockData.attributes || {},
+      blockClass = _ref2["class"];
+
+  var _ref3 = inlineData.attributes || {},
+      inlineClass = _ref3["class"];
+
+  var inlineHasClass = opts.names.find(function (name) {
+    return inlineClass.includes(name);
+  });
+
+  if (inlineHasClass) {
+    return inlinesAtRange[0];
+  }
+
+  var blockHasClass = opts.names.find(function (name) {
+    return blockClass.includes(name);
+  });
+
+  if (blockHasClass) {
+    return blocksAtRange[0];
+  }
+
+  return null;
+};
+/**
+ * Plugin in order to be able to add a css clas that is provided through the model
+ * on a text element. Works like a mark (bold, italic etc.).
+ * @param opts
+ * @constructor
+ */
+
+
+function CSSPlugin(opts) {
+  var plugin = {
+    name: 'extraCSSRules',
+    toolbar: {
+      isMark: true,
+      icon: /*#__PURE__*/_react["default"].createElement(_icons["default"], null),
+      ariaLabel: 'CSS editor',
+      type: 'css',
+      onToggle: function onToggle(change) {
+        var type = 'css';
+        var hasMark = change.value.activeMarks.find(function (entry) {
+          return entry.type === type;
+        });
+
+        if (hasMark) {
+          change.removeMark(hasMark);
+        } else {
+          var newMark = _slate.Mark.create(type);
+
+          change.addMark(newMark);
+        }
+
+        return change;
+      },
+      onClick: function onClick(value, onChange, getFocusedValue) {
+        var type = 'css';
+        var hasMark = value.activeMarks.find(function (entry) {
+          return entry.type === type;
+        });
+        var change = value.change();
+
+        if (hasMark) {
+          change.removeMark(hasMark);
+          onChange(change);
+          return;
+        } // keeping this if implementation needs to be changed to regular blocks instead of marks
+        // let nodeWithClass = getNodeWithClass(value, opts);
+        //
+        // if (nodeWithClass) {
+        //   const nodeAttributes = nodeWithClass.data.get('attributes');
+        //
+        //   opts.names.forEach((name) => {
+        //     if (nodeAttributes.class.includes(name)) {
+        //       nodeAttributes.class = nodeAttributes.class.replace(name, '');
+        //     }
+        //   });
+        //
+        //   // keeping only one space between classes
+        //   nodeAttributes.class = nodeAttributes.class.replace(/ +/g, ' ');
+        //
+        //   nodeWithClass.data.set('attributes', nodeAttributes);
+        //
+        //   let change = value.change();
+        //   change.replaceNodeByKey(nodeWithClass.key, nodeWithClass);
+        //
+        //   onChange(change);
+        //   return;
+        // }
+
+
+        var editorDOM = document.querySelector("[data-key=\"".concat(value.document.key, "\"]"));
+        var valueToUse = value;
+
+        var callback = function callback(className, focus) {
+          if (getFocusedValue) {
+            valueToUse = getFocusedValue() || valueToUse;
+          }
+
+          if (className) {
+            var _change = valueToUse.change();
+
+            var newMark = _slate.Mark.create({
+              object: 'mark',
+              type: 'css',
+              data: {
+                attributes: {
+                  "class": className
+                }
+              }
+            });
+
+            _change.addMark(newMark); // keeping this if implementation needs to be changed to regular blocks instead of marks
+            // change = change.wrapInline({ type: 'span', data: { attributes: { class: className } } });
+            //
+            // // change = change.splitBlockAtRange(adaptedRange);
+            // //
+            // // const newBlock = change.value.document.getFurthestBlock(change.value.selection.endKey);
+            // //
+            // // change = change.setNodeByKey(newBlock.key, { data: { attributes: { class: className } } });
+            //
+            // valueToUse = change.value;
+            // log('[characters:insert]: ', value);
+
+
+            onChange(_change);
+          }
+
+          log('[characters:click]');
+
+          if (focus) {
+            setTimeout(function () {
+              if (editorDOM) {
+                editorDOM.focus();
+              }
+            }, 0);
+          }
+        };
+
+        var textNode = value.document.getTextsAtRangeAsArray(value.selection)[0];
+
+        if (textNode) {
+          var parentNode = findParentNodeInfo(value, textNode, opts);
+          insertDialog({
+            editorDOM: editorDOM,
+            value: valueToUse,
+            callback: callback,
+            opts: opts,
+            textNode: textNode,
+            parentNode: parentNode
+          });
+        }
+      }
+    },
+    renderMark: function renderMark(props) {
+      if (props.mark.type === 'css') {
+        var _ref4 = props.mark || {},
+            data = _ref4.data;
+
+        var jsonData = (data === null || data === void 0 ? void 0 : data.toJSON()) || {};
+        return /*#__PURE__*/_react["default"].createElement("span", jsonData.attributes, props.children);
+      }
+    }
+  };
+  return plugin;
+}
+//# sourceMappingURL=index.js.map

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/editable-html/lib/plugins/css/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/plugins/css/index.jsx"],"names":["log","removeDialogs","prevDialogs","document","querySelectorAll","forEach","s","remove","insertDialog","editorDOM","value","callback","opts","textNode","parentNode","newEl","createElement","className","popoverEl","closePopOver","firstCallMade","listener","e","focusIsInModals","contains","target","focusIsInEditor","handleClose","undefined","body","removeEventListener","handleChange","name","selectedText","text","slice","selection","anchorOffset","focusOffset","parentNodeClass","data","get","createHTML","html","tag","object","el","background","height","padding","overflow","display","flexFlow","names","map","i","marginRight","__html","ReactDOM","render","cursorItem","querySelector","anchorKey","bodyRect","parentElement","getBoundingClientRect","boundRect","appendChild","additionalTopOffset","y","offsetHeight","style","maxWidth","position","top","zIndex","leftValue","left","Math","abs","offsetWidth","rightValue","x","leftAlignedWidth","right","rightAlignedWidth","addEventListener","findParentNodeInfo","closestInline","getClosestInline","endKey","closestBlock","getClosestBlock","nodeToUse","nodes","find","n","key","getNodeWithClass","blocksAtRange","getBlocksAtRangeAsArray","inlinesAtRange","getInlinesAtRangeAsArray","blockData","toJSON","inlineData","attributes","blockClass","inlineClass","inlineHasClass","includes","blockHasClass","CSSPlugin","plugin","toolbar","isMark","icon","ariaLabel","type","onToggle","change","hasMark","activeMarks","entry","removeMark","newMark","Mark","create","addMark","onClick","onChange","getFocusedValue","valueToUse","focus","setTimeout","getTextsAtRangeAsArray","renderMark","props","mark","jsonData","children"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport List from '@material-ui/core/List';\nimport { Leaf, Mark } from 'slate';\nimport Immutable from 'immutable';\nimport ListItem from '@material-ui/core/ListItem';\nimport isEmpty from 'lodash/isEmpty';\nimport debug from 'debug';\nimport CssIcon from './icons';\n\nconst log = debug('@pie-lib:editable-html:plugins:characters');\n\nexport const removeDialogs = () => {\n  const prevDialogs = document.querySelectorAll('.insert-css-dialog');\n\n  log('[characters:removeDialogs]');\n  prevDialogs.forEach((s) => s.remove());\n};\n\nconst insertDialog = ({ editorDOM, value, callback, opts, textNode, parentNode }) => {\n  const newEl = document.createElement('div');\n\n  log('[characters:insertDialog]');\n\n  removeDialogs();\n\n  newEl.className = 'insert-css-dialog';\n\n  let popoverEl;\n\n  const closePopOver = () => {\n    if (popoverEl) {\n      popoverEl.remove();\n    }\n  };\n\n  let firstCallMade = false;\n\n  const listener = (e) => {\n    // this will be triggered right after setting it because\n    // this toolbar is added on the mousedown event\n    // so right after mouseup, the click will be triggered\n    if (firstCallMade) {\n      const focusIsInModals = newEl.contains(e.target) || (popoverEl && popoverEl.contains(e.target));\n      const focusIsInEditor = editorDOM.contains(e.target);\n\n      if (!(focusIsInModals || focusIsInEditor)) {\n        handleClose();\n      }\n    } else {\n      firstCallMade = true;\n    }\n  };\n\n  const handleClose = () => {\n    callback(undefined, true);\n    newEl.remove();\n    closePopOver();\n    document.body.removeEventListener('click', listener);\n  };\n\n  const handleChange = (name) => {\n    callback(name, true);\n    newEl.remove();\n    closePopOver();\n    document.body.removeEventListener('click', listener);\n  };\n\n  const selectedText = textNode.text.slice(value.selection.anchorOffset, value.selection.focusOffset);\n  const parentNodeClass = parentNode?.data?.get('attributes')?.class;\n  const createHTML = (name) => {\n    let html = `<span class=\"${name}\">${selectedText}</span>`;\n\n    if (parentNode) {\n      let tag;\n\n      if (parentNode?.object === 'inline') {\n        tag = 'span';\n      }\n\n      if (parentNode?.object === 'block') {\n        tag = 'div';\n      }\n\n      html = `<${tag} class=\"${parentNodeClass}\">${parentNode.text.slice(\n        0,\n        value.selection.anchorOffset,\n      )}${html}${parentNode.text.slice(value.selection.focusOffset)}</${tag}>`;\n    }\n\n    return html;\n  };\n\n  const el = (\n    <div\n      style={{ background: 'white', height: 500, padding: 20, overflow: 'hidden', display: 'flex', flexFlow: 'column' }}\n    >\n      <h2>Please choose a css class</h2>\n      {parentNodeClass && <div>The current parent has this class {parentNodeClass}</div>}\n      <List component=\"nav\" style={{ overflow: 'scroll' }}>\n        {opts.names.map((name, i) => (\n          <ListItem key={`rule-${i}`} button onClick={() => handleChange(name)}>\n            <div style={{ marginRight: 20 }}>{name}</div>\n            <div\n              dangerouslySetInnerHTML={{\n                __html: createHTML(name),\n              }}\n            />\n          </ListItem>\n        ))}\n      </List>\n    </div>\n  );\n\n  ReactDOM.render(el, newEl, () => {\n    const cursorItem = document.querySelector(`[data-key=\"${value.anchorKey}\"]`);\n\n    if (cursorItem) {\n      const bodyRect = editorDOM.parentElement.parentElement.parentElement.getBoundingClientRect();\n      const boundRect = cursorItem.getBoundingClientRect();\n\n      editorDOM.parentElement.parentElement.parentElement.appendChild(newEl);\n\n      // when height of toolbar exceeds screen - can happen in scrollable contexts\n      let additionalTopOffset = 0;\n      if (boundRect.y < newEl.offsetHeight) {\n        additionalTopOffset = newEl.offsetHeight - boundRect.y + 10;\n      }\n\n      newEl.style.maxWidth = '500px';\n      newEl.style.position = 'absolute';\n      newEl.style.top = 0;\n      newEl.style.zIndex = 99999;\n\n      const leftValue = `${boundRect.left + Math.abs(bodyRect.left) + cursorItem.offsetWidth + 10}px`;\n\n      const rightValue = `${boundRect.x}px`;\n\n      newEl.style.left = leftValue;\n\n      const leftAlignedWidth = newEl.offsetWidth;\n\n      newEl.style.left = 'unset';\n      newEl.style.right = rightValue;\n\n      const rightAlignedWidth = newEl.offsetWidth;\n\n      newEl.style.left = 'unset';\n      newEl.style.right = 'unset';\n\n      if (leftAlignedWidth >= rightAlignedWidth) {\n        newEl.style.left = leftValue;\n      } else {\n        newEl.style.right = rightValue;\n      }\n\n      document.body.addEventListener('click', listener);\n    }\n  });\n};\n\nconst findParentNodeInfo = (value, textNode) => {\n  const closestInline = value.document.getClosestInline(value.selection.endKey);\n  const closestBlock = value.document.getClosestBlock(value.selection.endKey);\n  let nodeToUse = null;\n\n  if (closestInline?.nodes?.find((n) => n.key === textNode.key)) {\n    nodeToUse = closestInline;\n  }\n\n  if (closestBlock?.nodes?.find((n) => n.key === textNode.key)) {\n    nodeToUse = closestBlock;\n  }\n\n  return nodeToUse;\n};\n\n/**\n * Find the node that has a class attribute and return it.\n * Keeping this in case the implementation of classes needs to be changed\n * @param value\n * @param opts\n * @returns {*}\n */\nconst getNodeWithClass = (value, opts) => {\n  const blocksAtRange = value.document.getBlocksAtRangeAsArray(value.selection);\n  const inlinesAtRange = value.document.getInlinesAtRangeAsArray(value.selection);\n  const blockData = blocksAtRange[0]?.data.toJSON() || {};\n  const inlineData = inlinesAtRange[0]?.data.toJSON() || {};\n\n  if (!blockData.attributes?.class && !inlineData.attributes?.class) {\n    return null;\n  }\n\n  const { class: blockClass } = blockData.attributes || {};\n  const { class: inlineClass } = inlineData.attributes || {};\n  const inlineHasClass = opts.names.find((name) => inlineClass.includes(name));\n\n  if (inlineHasClass) {\n    return inlinesAtRange[0];\n  }\n\n  const blockHasClass = opts.names.find((name) => blockClass.includes(name));\n\n  if (blockHasClass) {\n    return blocksAtRange[0];\n  }\n\n  return null;\n};\n\n/**\n * Plugin in order to be able to add a css clas that is provided through the model\n * on a text element. Works like a mark (bold, italic etc.).\n * @param opts\n * @constructor\n */\nexport default function CSSPlugin(opts) {\n  const plugin = {\n    name: 'extraCSSRules',\n    toolbar: {\n      isMark: true,\n      icon: <CssIcon />,\n      ariaLabel: 'CSS editor',\n      type: 'css',\n      onToggle: (change) => {\n        const type = 'css';\n        const hasMark = change.value.activeMarks.find((entry) => {\n          return entry.type === type;\n        });\n\n        if (hasMark) {\n          change.removeMark(hasMark);\n        } else {\n          const newMark = Mark.create(type);\n\n          change.addMark(newMark);\n        }\n\n        return change;\n      },\n      onClick: (value, onChange, getFocusedValue) => {\n        const type = 'css';\n        const hasMark = value.activeMarks.find((entry) => {\n          return entry.type === type;\n        });\n\n        let change = value.change();\n\n        if (hasMark) {\n          change.removeMark(hasMark);\n          onChange(change);\n          return;\n        }\n\n        // keeping this if implementation needs to be changed to regular blocks instead of marks\n        // let nodeWithClass = getNodeWithClass(value, opts);\n        //\n        // if (nodeWithClass) {\n        //   const nodeAttributes = nodeWithClass.data.get('attributes');\n        //\n        //   opts.names.forEach((name) => {\n        //     if (nodeAttributes.class.includes(name)) {\n        //       nodeAttributes.class = nodeAttributes.class.replace(name, '');\n        //     }\n        //   });\n        //\n        //   // keeping only one space between classes\n        //   nodeAttributes.class = nodeAttributes.class.replace(/ +/g, ' ');\n        //\n        //   nodeWithClass.data.set('attributes', nodeAttributes);\n        //\n        //   let change = value.change();\n        //   change.replaceNodeByKey(nodeWithClass.key, nodeWithClass);\n        //\n        //   onChange(change);\n        //   return;\n        // }\n\n        const editorDOM = document.querySelector(`[data-key=\"${value.document.key}\"]`);\n        let valueToUse = value;\n\n        const callback = (className, focus) => {\n          if (getFocusedValue) {\n            valueToUse = getFocusedValue() || valueToUse;\n          }\n\n          if (className) {\n            let change = valueToUse.change();\n\n            const newMark = Mark.create({\n              object: 'mark',\n              type: 'css',\n              data: {\n                attributes: {\n                  class: className,\n                },\n              },\n            });\n\n            change.addMark(newMark);\n            // keeping this if implementation needs to be changed to regular blocks instead of marks\n            // change = change.wrapInline({ type: 'span', data: { attributes: { class: className } } });\n            //\n            // // change = change.splitBlockAtRange(adaptedRange);\n            // //\n            // // const newBlock = change.value.document.getFurthestBlock(change.value.selection.endKey);\n            // //\n            // // change = change.setNodeByKey(newBlock.key, { data: { attributes: { class: className } } });\n            //\n            // valueToUse = change.value;\n            // log('[characters:insert]: ', value);\n            onChange(change);\n          }\n\n          log('[characters:click]');\n\n          if (focus) {\n            setTimeout(() => {\n              if (editorDOM) {\n                editorDOM.focus();\n              }\n            }, 0);\n          }\n        };\n        const textNode = value.document.getTextsAtRangeAsArray(value.selection)[0];\n\n        if (textNode) {\n          const parentNode = findParentNodeInfo(value, textNode, opts);\n\n          insertDialog({ editorDOM, value: valueToUse, callback, opts, textNode, parentNode });\n        }\n      },\n    },\n    renderMark(props) {\n      if (props.mark.type === 'css') {\n        const { data } = props.mark || {};\n        const jsonData = data?.toJSON() || {};\n\n        return <span {...jsonData.attributes}>{props.children}</span>;\n      }\n    },\n  };\n\n  return plugin;\n}\n"],"file":"index.js"}

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/editable-html/lib/plugins/customPlugin/index.js

@@ -0,0 +1,114 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ICON_TYPE = exports.CONTENT_TYPE = void 0;
+exports["default"] = CustomPlugin;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _serialization = require("../../serialization");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+// We're possibly going to have to support content types, so starting it as an enum
+var CONTENT_TYPE = {
+  FRAGMENT: 'FRAGMENT'
+}; // We're possibly going to have to support multiple icon types, so starting it as an enum
+
+exports.CONTENT_TYPE = CONTENT_TYPE;
+var ICON_TYPE = {
+  SVG: 'SVG'
+};
+exports.ICON_TYPE = ICON_TYPE;
+
+var getIcon = function getIcon(customPluginProps) {
+  var svg = customPluginProps.icon;
+
+  switch (customPluginProps.iconType) {
+    case ICON_TYPE.SVG:
+      return /*#__PURE__*/_react["default"].createElement("span", {
+        style: {
+          width: 28,
+          height: 28
+        },
+        dangerouslySetInnerHTML: {
+          __html: svg
+        }
+      });
+
+    default:
+      return /*#__PURE__*/_react["default"].createElement("span", null, customPluginProps.iconAlt);
+  }
+};
+
+function CustomPlugin(type, customPluginProps) {
+  var toolbar = {
+    icon: getIcon(customPluginProps),
+    onClick: function onClick(value, onChange, getFocusedValue) {
+      var editorDOM = document.querySelector("[data-key=\"".concat(value.document.key, "\"]"));
+      var valueToUse = value;
+
+      var callback = function callback(_ref, focus) {
+        var customContent = _ref.customContent,
+            contentType = _ref.contentType;
+        valueToUse = getFocusedValue();
+
+        switch (contentType) {
+          case CONTENT_TYPE.FRAGMENT:
+          default:
+            {
+              var contentValue = (0, _serialization.htmlToValue)(customContent);
+              var change = valueToUse.change().insertFragment(contentValue.document);
+              valueToUse = change.value;
+              onChange(change);
+              break;
+            }
+        }
+
+        if (focus) {
+          if (editorDOM) {
+            editorDOM.focus();
+          }
+        }
+      }; // NOTE: the emitted event (custom event named by client) will be suffixed with "PIE-"
+
+
+      window.dispatchEvent(new CustomEvent("PIE-".concat(customPluginProps.event), {
+        detail: _objectSpread(_objectSpread({}, customPluginProps), {}, {
+          callback: callback
+        })
+      }));
+    },
+    supports: function supports(node) {
+      return node.object === 'inline' && node.type === type;
+    }
+  };
+  return {
+    name: type,
+    toolbar: toolbar,
+    renderNode: function renderNode(props) {
+      if (props.node.type === type) {
+        var node = props.node;
+        var data = node.data;
+        var jsonData = data.toJSON();
+        var customContent = jsonData.customContent,
+            contentType = jsonData.contentType;
+
+        switch (contentType) {
+          case CONTENT_TYPE.FRAGMENT:
+          default:
+            return customContent;
+        }
+      }
+    }
+  };
+}
+//# sourceMappingURL=index.js.map

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/editable-html/lib/plugins/customPlugin/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/plugins/customPlugin/index.jsx"],"names":["CONTENT_TYPE","FRAGMENT","ICON_TYPE","SVG","getIcon","customPluginProps","svg","icon","iconType","width","height","__html","iconAlt","CustomPlugin","type","toolbar","onClick","value","onChange","getFocusedValue","editorDOM","document","querySelector","key","valueToUse","callback","focus","customContent","contentType","contentValue","change","insertFragment","window","dispatchEvent","CustomEvent","event","detail","supports","node","object","name","renderNode","props","data","jsonData","toJSON"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { htmlToValue } from '../../serialization';\n\n// We're possibly going to have to support content types, so starting it as an enum\nexport const CONTENT_TYPE = {\n  FRAGMENT: 'FRAGMENT',\n};\n\n// We're possibly going to have to support multiple icon types, so starting it as an enum\nexport const ICON_TYPE = {\n  SVG: 'SVG',\n};\n\nconst getIcon = (customPluginProps) => {\n  const svg = customPluginProps.icon;\n\n  switch (customPluginProps.iconType) {\n    case ICON_TYPE.SVG:\n      return <span style={{ width: 28, height: 28 }} dangerouslySetInnerHTML={{ __html: svg }} />;\n    default:\n      return <span>{customPluginProps.iconAlt}</span>;\n  }\n};\n\nexport default function CustomPlugin(type, customPluginProps) {\n  const toolbar = {\n    icon: getIcon(customPluginProps),\n    onClick: (value, onChange, getFocusedValue) => {\n      const editorDOM = document.querySelector(`[data-key=\"${value.document.key}\"]`);\n      let valueToUse = value;\n      const callback = ({ customContent, contentType }, focus) => {\n        valueToUse = getFocusedValue();\n\n        switch (contentType) {\n          case CONTENT_TYPE.FRAGMENT:\n          default: {\n            const contentValue = htmlToValue(customContent);\n            const change = valueToUse.change().insertFragment(contentValue.document);\n\n            valueToUse = change.value;\n            onChange(change);\n\n            break;\n          }\n        }\n\n        if (focus) {\n          if (editorDOM) {\n            editorDOM.focus();\n          }\n        }\n      };\n\n      // NOTE: the emitted event (custom event named by client) will be suffixed with \"PIE-\"\n      window.dispatchEvent(\n        new CustomEvent(`PIE-${customPluginProps.event}`, {\n          detail: {\n            ...customPluginProps,\n            callback,\n          },\n        }),\n      );\n    },\n    supports: (node) => node.object === 'inline' && node.type === type,\n  };\n\n  return {\n    name: type,\n    toolbar,\n    renderNode(props) {\n      if (props.node.type === type) {\n        const { node } = props;\n        const { data } = node;\n        const jsonData = data.toJSON();\n        const { customContent, contentType } = jsonData;\n\n        switch (contentType) {\n          case CONTENT_TYPE.FRAGMENT:\n          default:\n            return customContent;\n        }\n      }\n    },\n  };\n}\n"],"file":"index.js"}

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/editable-html/lib/plugins/html/icons/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var styles = function styles(theme) {
+  return {
+    icon: {
+      fontFamily: 'Cerebri Sans, Arial, sans-serif',
+      fontSize: theme.typography.fontSize,
+      fontWeight: 'bold',
+      lineHeight: '14px',
+      position: 'relative',
+      whiteSpace: 'nowrap'
+    }
+  };
+};
+
+var HtmlModeIcon = function HtmlModeIcon(_ref) {
+  var classes = _ref.classes,
+      isHtmlMode = _ref.isHtmlMode;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.icon
+  }, isHtmlMode ? 'Exit <HTML> mode' : '<HTML>');
+};
+
+var _default = (0, _styles.withStyles)(styles)(HtmlModeIcon);
+
+exports["default"] = _default;
+//# sourceMappingURL=index.js.map

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/editable-html/lib/plugins/html/icons/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/plugins/html/icons/index.jsx"],"names":["styles","theme","icon","fontFamily","fontSize","typography","fontWeight","lineHeight","position","whiteSpace","HtmlModeIcon","classes","isHtmlMode"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBC,IAAAA,IAAI,EAAE;AACJC,MAAAA,UAAU,EAAE,iCADR;AAEJC,MAAAA,QAAQ,EAAEH,KAAK,CAACI,UAAN,CAAiBD,QAFvB;AAGJE,MAAAA,UAAU,EAAE,MAHR;AAIJC,MAAAA,UAAU,EAAE,MAJR;AAKJC,MAAAA,QAAQ,EAAE,UALN;AAMJC,MAAAA,UAAU,EAAE;AANR;AADmB,GAAZ;AAAA,CAAf;;AAWA,IAAMC,YAAY,GAAG,SAAfA,YAAe;AAAA,MAAGC,OAAH,QAAGA,OAAH;AAAA,MAAYC,UAAZ,QAAYA,UAAZ;AAAA,sBACnB;AAAK,IAAA,SAAS,EAAED,OAAO,CAACT;AAAxB,KAA+BU,UAAU,GAAG,kBAAH,GAAwB,QAAjE,CADmB;AAAA,CAArB;;eAIe,wBAAWZ,MAAX,EAAmBU,YAAnB,C","sourcesContent":["import React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\n\nconst styles = (theme) => ({\n  icon: {\n    fontFamily: 'Cerebri Sans, Arial, sans-serif',\n    fontSize: theme.typography.fontSize,\n    fontWeight: 'bold',\n    lineHeight: '14px',\n    position: 'relative',\n    whiteSpace: 'nowrap',\n  },\n});\n\nconst HtmlModeIcon = ({ classes, isHtmlMode }) => (\n  <div className={classes.icon}>{isHtmlMode ? 'Exit <HTML> mode' : '<HTML>'}</div>\n);\n\nexport default withStyles(styles)(HtmlModeIcon);\n"],"file":"index.js"}