@pie-lib/editable-html 11.18.6-esmbeta.0 → 11.19.0-mui-update.0

package/lib/plugins/css/index.js

@@ -1,66 +1,45 @@
 "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 _List = _interopRequireDefault(require("@mui/material/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 _ListItem = _interopRequireDefault(require("@mui/material/ListItem"));
 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 removeDialogs = exports.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 _parentNode$data;
   var editorDOM = _ref.editorDOM,
-      value = _ref.value,
-      callback = _ref.callback,
-      opts = _ref.opts,
-      textNode = _ref.textNode,
-      parentNode = _ref.parentNode;
+    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
@@ -68,7 +47,6 @@ var insertDialog = function insertDialog(_ref) {
     if (firstCallMade) {
       var focusIsInModals = newEl.contains(e.target) || popoverEl && popoverEl.contains(e.target);
       var focusIsInEditor = editorDOM.contains(e.target);
-
       if (!(focusIsInModals || focusIsInEditor)) {
         handleClose();
       }
@@ -76,44 +54,34 @@ var insertDialog = function insertDialog(_ref) {
       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 parentNodeClass = parentNode === null || parentNode === void 0 || (_parentNode$data = parentNode.data) === null || _parentNode$data === void 0 || (_parentNode$data = _parentNode$data.get('attributes')) === null || _parentNode$data === void 0 ? void 0 : _parentNode$data["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',
@@ -145,21 +113,18 @@ var insertDialog = function insertDialog(_ref) {
       }
     }));
   })));
-
   _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
+      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;
@@ -173,39 +138,33 @@ var insertDialog = function insertDialog(_ref) {
       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
@@ -213,52 +172,40 @@ var findParentNodeInfo = function findParentNodeInfo(value, textNode) {
  * @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"];
-
+    blockClass = _ref2["class"];
   var _ref3 = inlineData.attributes || {},
-      inlineClass = _ref3["class"];
-
+    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',
@@ -272,15 +219,12 @@ function CSSPlugin(opts) {
         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) {
@@ -289,12 +233,13 @@ function CSSPlugin(opts) {
           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
+        }
+
+        // keeping this if implementation needs to be changed to regular blocks instead of marks
         // let nodeWithClass = getNodeWithClass(value, opts);
         //
         // if (nodeWithClass) {
@@ -318,18 +263,14 @@ function CSSPlugin(opts) {
         //   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',
@@ -339,8 +280,8 @@ function CSSPlugin(opts) {
                 }
               }
             });
-
-            _change.addMark(newMark); // keeping this if implementation needs to be changed to regular blocks instead of marks
+            _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);
@@ -351,13 +292,9 @@ function CSSPlugin(opts) {
             //
             // valueToUse = change.value;
             // log('[characters:insert]: ', value);
-
-
             onChange(_change);
           }
-
           log('[characters:click]');
-
           if (focus) {
             setTimeout(function () {
               if (editorDOM) {
@@ -366,9 +303,7 @@ function CSSPlugin(opts) {
             }, 0);
           }
         };
-
         var textNode = value.document.getTextsAtRangeAsArray(value.selection)[0];
-
         if (textNode) {
           var parentNode = findParentNodeInfo(value, textNode, opts);
           insertDialog({
@@ -385,8 +320,7 @@ function CSSPlugin(opts) {
     renderMark: function renderMark(props) {
       if (props.mark.type === 'css') {
         var _ref4 = props.mark || {},
-            data = _ref4.data;
-
+          data = _ref4.data;
         var jsonData = (data === null || data === void 0 ? void 0 : data.toJSON()) || {};
         return /*#__PURE__*/_react["default"].createElement("span", jsonData.attributes, props.children);
       }

package/lib/plugins/css/index.js.map

@@ -1 +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":";;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,GAAG,GAAG,uBAAM,2CAAN,CAAZ;;AAEO,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,GAAM;AACjC,MAAMC,WAAW,GAAGC,QAAQ,CAACC,gBAAT,CAA0B,oBAA1B,CAApB;AAEAJ,EAAAA,GAAG,CAAC,4BAAD,CAAH;AACAE,EAAAA,WAAW,CAACG,OAAZ,CAAoB,UAACC,CAAD;AAAA,WAAOA,CAAC,CAACC,MAAF,EAAP;AAAA,GAApB;AACD,CALM;;;;AAOP,IAAMC,YAAY,GAAG,SAAfA,YAAe,OAAgE;AAAA;;AAAA,MAA7DC,SAA6D,QAA7DA,SAA6D;AAAA,MAAlDC,KAAkD,QAAlDA,KAAkD;AAAA,MAA3CC,QAA2C,QAA3CA,QAA2C;AAAA,MAAjCC,IAAiC,QAAjCA,IAAiC;AAAA,MAA3BC,QAA2B,QAA3BA,QAA2B;AAAA,MAAjBC,UAAiB,QAAjBA,UAAiB;AACnF,MAAMC,KAAK,GAAGZ,QAAQ,CAACa,aAAT,CAAuB,KAAvB,CAAd;AAEAhB,EAAAA,GAAG,CAAC,2BAAD,CAAH;AAEAC,EAAAA,aAAa;AAEbc,EAAAA,KAAK,CAACE,SAAN,GAAkB,mBAAlB;AAEA,MAAIC,SAAJ;;AAEA,MAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;AACzB,QAAID,SAAJ,EAAe;AACbA,MAAAA,SAAS,CAACX,MAAV;AACD;AACF,GAJD;;AAMA,MAAIa,aAAa,GAAG,KAApB;;AAEA,MAAMC,QAAQ,GAAG,SAAXA,QAAW,CAACC,CAAD,EAAO;AACtB;AACA;AACA;AACA,QAAIF,aAAJ,EAAmB;AACjB,UAAMG,eAAe,GAAGR,KAAK,CAACS,QAAN,CAAeF,CAAC,CAACG,MAAjB,KAA6BP,SAAS,IAAIA,SAAS,CAACM,QAAV,CAAmBF,CAAC,CAACG,MAArB,CAAlE;AACA,UAAMC,eAAe,GAAGjB,SAAS,CAACe,QAAV,CAAmBF,CAAC,CAACG,MAArB,CAAxB;;AAEA,UAAI,EAAEF,eAAe,IAAIG,eAArB,CAAJ,EAA2C;AACzCC,QAAAA,WAAW;AACZ;AACF,KAPD,MAOO;AACLP,MAAAA,aAAa,GAAG,IAAhB;AACD;AACF,GAdD;;AAgBA,MAAMO,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxBhB,IAAAA,QAAQ,CAACiB,SAAD,EAAY,IAAZ,CAAR;AACAb,IAAAA,KAAK,CAACR,MAAN;AACAY,IAAAA,YAAY;AACZhB,IAAAA,QAAQ,CAAC0B,IAAT,CAAcC,mBAAd,CAAkC,OAAlC,EAA2CT,QAA3C;AACD,GALD;;AAOA,MAAMU,YAAY,GAAG,SAAfA,YAAe,CAACC,IAAD,EAAU;AAC7BrB,IAAAA,QAAQ,CAACqB,IAAD,EAAO,IAAP,CAAR;AACAjB,IAAAA,KAAK,CAACR,MAAN;AACAY,IAAAA,YAAY;AACZhB,IAAAA,QAAQ,CAAC0B,IAAT,CAAcC,mBAAd,CAAkC,OAAlC,EAA2CT,QAA3C;AACD,GALD;;AAOA,MAAMY,YAAY,GAAGpB,QAAQ,CAACqB,IAAT,CAAcC,KAAd,CAAoBzB,KAAK,CAAC0B,SAAN,CAAgBC,YAApC,EAAkD3B,KAAK,CAAC0B,SAAN,CAAgBE,WAAlE,CAArB;AACA,MAAMC,eAAe,GAAGzB,UAAH,aAAGA,UAAH,2CAAGA,UAAU,CAAE0B,IAAf,6EAAG,iBAAkBC,GAAlB,CAAsB,YAAtB,CAAH,yDAAG,6BAAxB;;AACA,MAAMC,UAAU,GAAG,SAAbA,UAAa,CAACV,IAAD,EAAU;AAC3B,QAAIW,IAAI,2BAAmBX,IAAnB,gBAA4BC,YAA5B,YAAR;;AAEA,QAAInB,UAAJ,EAAgB;AACd,UAAI8B,GAAJ;;AAEA,UAAI,CAAA9B,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU,CAAE+B,MAAZ,MAAuB,QAA3B,EAAqC;AACnCD,QAAAA,GAAG,GAAG,MAAN;AACD;;AAED,UAAI,CAAA9B,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU,CAAE+B,MAAZ,MAAuB,OAA3B,EAAoC;AAClCD,QAAAA,GAAG,GAAG,KAAN;AACD;;AAEDD,MAAAA,IAAI,cAAOC,GAAP,sBAAqBL,eAArB,gBAAyCzB,UAAU,CAACoB,IAAX,CAAgBC,KAAhB,CAC3C,CAD2C,EAE3CzB,KAAK,CAAC0B,SAAN,CAAgBC,YAF2B,CAAzC,SAGAM,IAHA,SAGO7B,UAAU,CAACoB,IAAX,CAAgBC,KAAhB,CAAsBzB,KAAK,CAAC0B,SAAN,CAAgBE,WAAtC,CAHP,eAG8DM,GAH9D,MAAJ;AAID;;AAED,WAAOD,IAAP;AACD,GArBD;;AAuBA,MAAMG,EAAE,gBACN;AACE,IAAA,KAAK,EAAE;AAAEC,MAAAA,UAAU,EAAE,OAAd;AAAuBC,MAAAA,MAAM,EAAE,GAA/B;AAAoCC,MAAAA,OAAO,EAAE,EAA7C;AAAiDC,MAAAA,QAAQ,EAAE,QAA3D;AAAqEC,MAAAA,OAAO,EAAE,MAA9E;AAAsFC,MAAAA,QAAQ,EAAE;AAAhG;AADT,kBAGE,wEAHF,EAIGb,eAAe,iBAAI,mFAAwCA,eAAxC,CAJtB,eAKE,gCAAC,gBAAD;AAAM,IAAA,SAAS,EAAC,KAAhB;AAAsB,IAAA,KAAK,EAAE;AAAEW,MAAAA,QAAQ,EAAE;AAAZ;AAA7B,KACGtC,IAAI,CAACyC,KAAL,CAAWC,GAAX,CAAe,UAACtB,IAAD,EAAOuB,CAAP;AAAA,wBACd,gCAAC,oBAAD;AAAU,MAAA,GAAG,iBAAUA,CAAV,CAAb;AAA4B,MAAA,MAAM,MAAlC;AAAmC,MAAA,OAAO,EAAE;AAAA,eAAMxB,YAAY,CAACC,IAAD,CAAlB;AAAA;AAA5C,oBACE;AAAK,MAAA,KAAK,EAAE;AAAEwB,QAAAA,WAAW,EAAE;AAAf;AAAZ,OAAkCxB,IAAlC,CADF,eAEE;AACE,MAAA,uBAAuB,EAAE;AACvByB,QAAAA,MAAM,EAAEf,UAAU,CAACV,IAAD;AADK;AAD3B,MAFF,CADc;AAAA,GAAf,CADH,CALF,CADF;;AAqBA0B,uBAASC,MAAT,CAAgBb,EAAhB,EAAoB/B,KAApB,EAA2B,YAAM;AAC/B,QAAM6C,UAAU,GAAGzD,QAAQ,CAAC0D,aAAT,uBAAqCnD,KAAK,CAACoD,SAA3C,SAAnB;;AAEA,QAAIF,UAAJ,EAAgB;AACd,UAAMG,QAAQ,GAAGtD,SAAS,CAACuD,aAAV,CAAwBA,aAAxB,CAAsCA,aAAtC,CAAoDC,qBAApD,EAAjB;AACA,UAAMC,SAAS,GAAGN,UAAU,CAACK,qBAAX,EAAlB;AAEAxD,MAAAA,SAAS,CAACuD,aAAV,CAAwBA,aAAxB,CAAsCA,aAAtC,CAAoDG,WAApD,CAAgEpD,KAAhE,EAJc,CAMd;;AACA,UAAIqD,mBAAmB,GAAG,CAA1B;;AACA,UAAIF,SAAS,CAACG,CAAV,GAActD,KAAK,CAACuD,YAAxB,EAAsC;AACpCF,QAAAA,mBAAmB,GAAGrD,KAAK,CAACuD,YAAN,GAAqBJ,SAAS,CAACG,CAA/B,GAAmC,EAAzD;AACD;;AAEDtD,MAAAA,KAAK,CAACwD,KAAN,CAAYC,QAAZ,GAAuB,OAAvB;AACAzD,MAAAA,KAAK,CAACwD,KAAN,CAAYE,QAAZ,GAAuB,UAAvB;AACA1D,MAAAA,KAAK,CAACwD,KAAN,CAAYG,GAAZ,GAAkB,CAAlB;AACA3D,MAAAA,KAAK,CAACwD,KAAN,CAAYI,MAAZ,GAAqB,KAArB;AAEA,UAAMC,SAAS,aAAMV,SAAS,CAACW,IAAV,GAAiBC,IAAI,CAACC,GAAL,CAAShB,QAAQ,CAACc,IAAlB,CAAjB,GAA2CjB,UAAU,CAACoB,WAAtD,GAAoE,EAA1E,OAAf;AAEA,UAAMC,UAAU,aAAMf,SAAS,CAACgB,CAAhB,OAAhB;AAEAnE,MAAAA,KAAK,CAACwD,KAAN,CAAYM,IAAZ,GAAmBD,SAAnB;AAEA,UAAMO,gBAAgB,GAAGpE,KAAK,CAACiE,WAA/B;AAEAjE,MAAAA,KAAK,CAACwD,KAAN,CAAYM,IAAZ,GAAmB,OAAnB;AACA9D,MAAAA,KAAK,CAACwD,KAAN,CAAYa,KAAZ,GAAoBH,UAApB;AAEA,UAAMI,iBAAiB,GAAGtE,KAAK,CAACiE,WAAhC;AAEAjE,MAAAA,KAAK,CAACwD,KAAN,CAAYM,IAAZ,GAAmB,OAAnB;AACA9D,MAAAA,KAAK,CAACwD,KAAN,CAAYa,KAAZ,GAAoB,OAApB;;AAEA,UAAID,gBAAgB,IAAIE,iBAAxB,EAA2C;AACzCtE,QAAAA,KAAK,CAACwD,KAAN,CAAYM,IAAZ,GAAmBD,SAAnB;AACD,OAFD,MAEO;AACL7D,QAAAA,KAAK,CAACwD,KAAN,CAAYa,KAAZ,GAAoBH,UAApB;AACD;;AAED9E,MAAAA,QAAQ,CAAC0B,IAAT,CAAcyD,gBAAd,CAA+B,OAA/B,EAAwCjE,QAAxC;AACD;AACF,GA5CD;AA6CD,CA5ID;;AA8IA,IAAMkE,kBAAkB,GAAG,SAArBA,kBAAqB,CAAC7E,KAAD,EAAQG,QAAR,EAAqB;AAAA;;AAC9C,MAAM2E,aAAa,GAAG9E,KAAK,CAACP,QAAN,CAAesF,gBAAf,CAAgC/E,KAAK,CAAC0B,SAAN,CAAgBsD,MAAhD,CAAtB;AACA,MAAMC,YAAY,GAAGjF,KAAK,CAACP,QAAN,CAAeyF,eAAf,CAA+BlF,KAAK,CAAC0B,SAAN,CAAgBsD,MAA/C,CAArB;AACA,MAAIG,SAAS,GAAG,IAAhB;;AAEA,MAAIL,aAAJ,aAAIA,aAAJ,uCAAIA,aAAa,CAAEM,KAAnB,iDAAI,qBAAsBC,IAAtB,CAA2B,UAACC,CAAD;AAAA,WAAOA,CAAC,CAACC,GAAF,KAAUpF,QAAQ,CAACoF,GAA1B;AAAA,GAA3B,CAAJ,EAA+D;AAC7DJ,IAAAA,SAAS,GAAGL,aAAZ;AACD;;AAED,MAAIG,YAAJ,aAAIA,YAAJ,sCAAIA,YAAY,CAAEG,KAAlB,gDAAI,oBAAqBC,IAArB,CAA0B,UAACC,CAAD;AAAA,WAAOA,CAAC,CAACC,GAAF,KAAUpF,QAAQ,CAACoF,GAA1B;AAAA,GAA1B,CAAJ,EAA8D;AAC5DJ,IAAAA,SAAS,GAAGF,YAAZ;AACD;;AAED,SAAOE,SAAP;AACD,CAdD;AAgBA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,IAAMK,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACxF,KAAD,EAAQE,IAAR,EAAiB;AAAA;;AACxC,MAAMuF,aAAa,GAAGzF,KAAK,CAACP,QAAN,CAAeiG,uBAAf,CAAuC1F,KAAK,CAAC0B,SAA7C,CAAtB;AACA,MAAMiE,cAAc,GAAG3F,KAAK,CAACP,QAAN,CAAemG,wBAAf,CAAwC5F,KAAK,CAAC0B,SAA9C,CAAvB;AACA,MAAMmE,SAAS,GAAG,oBAAAJ,aAAa,CAAC,CAAD,CAAb,oEAAkB3D,IAAlB,CAAuBgE,MAAvB,OAAmC,EAArD;AACA,MAAMC,UAAU,GAAG,qBAAAJ,cAAc,CAAC,CAAD,CAAd,sEAAmB7D,IAAnB,CAAwBgE,MAAxB,OAAoC,EAAvD;;AAEA,MAAI,2BAACD,SAAS,CAACG,UAAX,kDAAC,8BAAD,KAAgC,2BAACD,UAAU,CAACC,UAAZ,kDAAC,8BAAD,CAApC,EAAmE;AACjE,WAAO,IAAP;AACD;;AAED,cAA8BH,SAAS,CAACG,UAAV,IAAwB,EAAtD;AAAA,MAAeC,UAAf;;AACA,cAA+BF,UAAU,CAACC,UAAX,IAAyB,EAAxD;AAAA,MAAeE,WAAf;;AACA,MAAMC,cAAc,GAAGjG,IAAI,CAACyC,KAAL,CAAW0C,IAAX,CAAgB,UAAC/D,IAAD;AAAA,WAAU4E,WAAW,CAACE,QAAZ,CAAqB9E,IAArB,CAAV;AAAA,GAAhB,CAAvB;;AAEA,MAAI6E,cAAJ,EAAoB;AAClB,WAAOR,cAAc,CAAC,CAAD,CAArB;AACD;;AAED,MAAMU,aAAa,GAAGnG,IAAI,CAACyC,KAAL,CAAW0C,IAAX,CAAgB,UAAC/D,IAAD;AAAA,WAAU2E,UAAU,CAACG,QAAX,CAAoB9E,IAApB,CAAV;AAAA,GAAhB,CAAtB;;AAEA,MAAI+E,aAAJ,EAAmB;AACjB,WAAOZ,aAAa,CAAC,CAAD,CAApB;AACD;;AAED,SAAO,IAAP;AACD,CAzBD;AA2BA;AACA;AACA;AACA;AACA;AACA;;;AACe,SAASa,SAAT,CAAmBpG,IAAnB,EAAyB;AACtC,MAAMqG,MAAM,GAAG;AACbjF,IAAAA,IAAI,EAAE,eADO;AAEbkF,IAAAA,OAAO,EAAE;AACPC,MAAAA,MAAM,EAAE,IADD;AAEPC,MAAAA,IAAI,eAAE,gCAAC,iBAAD,OAFC;AAGPC,MAAAA,SAAS,EAAE,YAHJ;AAIPC,MAAAA,IAAI,EAAE,KAJC;AAKPC,MAAAA,QAAQ,EAAE,kBAACC,MAAD,EAAY;AACpB,YAAMF,IAAI,GAAG,KAAb;AACA,YAAMG,OAAO,GAAGD,MAAM,CAAC9G,KAAP,CAAagH,WAAb,CAAyB3B,IAAzB,CAA8B,UAAC4B,KAAD,EAAW;AACvD,iBAAOA,KAAK,CAACL,IAAN,KAAeA,IAAtB;AACD,SAFe,CAAhB;;AAIA,YAAIG,OAAJ,EAAa;AACXD,UAAAA,MAAM,CAACI,UAAP,CAAkBH,OAAlB;AACD,SAFD,MAEO;AACL,cAAMI,OAAO,GAAGC,YAAKC,MAAL,CAAYT,IAAZ,CAAhB;;AAEAE,UAAAA,MAAM,CAACQ,OAAP,CAAeH,OAAf;AACD;;AAED,eAAOL,MAAP;AACD,OApBM;AAqBPS,MAAAA,OAAO,EAAE,iBAACvH,KAAD,EAAQwH,QAAR,EAAkBC,eAAlB,EAAsC;AAC7C,YAAMb,IAAI,GAAG,KAAb;AACA,YAAMG,OAAO,GAAG/G,KAAK,CAACgH,WAAN,CAAkB3B,IAAlB,CAAuB,UAAC4B,KAAD,EAAW;AAChD,iBAAOA,KAAK,CAACL,IAAN,KAAeA,IAAtB;AACD,SAFe,CAAhB;AAIA,YAAIE,MAAM,GAAG9G,KAAK,CAAC8G,MAAN,EAAb;;AAEA,YAAIC,OAAJ,EAAa;AACXD,UAAAA,MAAM,CAACI,UAAP,CAAkBH,OAAlB;AACAS,UAAAA,QAAQ,CAACV,MAAD,CAAR;AACA;AACD,SAZ4C,CAc7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAEA,YAAM/G,SAAS,GAAGN,QAAQ,CAAC0D,aAAT,uBAAqCnD,KAAK,CAACP,QAAN,CAAe8F,GAApD,SAAlB;AACA,YAAImC,UAAU,GAAG1H,KAAjB;;AAEA,YAAMC,QAAQ,GAAG,SAAXA,QAAW,CAACM,SAAD,EAAYoH,KAAZ,EAAsB;AACrC,cAAIF,eAAJ,EAAqB;AACnBC,YAAAA,UAAU,GAAGD,eAAe,MAAMC,UAAlC;AACD;;AAED,cAAInH,SAAJ,EAAe;AACb,gBAAIuG,OAAM,GAAGY,UAAU,CAACZ,MAAX,EAAb;;AAEA,gBAAMK,OAAO,GAAGC,YAAKC,MAAL,CAAY;AAC1BlF,cAAAA,MAAM,EAAE,MADkB;AAE1ByE,cAAAA,IAAI,EAAE,KAFoB;AAG1B9E,cAAAA,IAAI,EAAE;AACJkE,gBAAAA,UAAU,EAAE;AACV,2BAAOzF;AADG;AADR;AAHoB,aAAZ,CAAhB;;AAUAuG,YAAAA,OAAM,CAACQ,OAAP,CAAeH,OAAf,EAba,CAcb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACAK,YAAAA,QAAQ,CAACV,OAAD,CAAR;AACD;;AAEDxH,UAAAA,GAAG,CAAC,oBAAD,CAAH;;AAEA,cAAIqI,KAAJ,EAAW;AACTC,YAAAA,UAAU,CAAC,YAAM;AACf,kBAAI7H,SAAJ,EAAe;AACbA,gBAAAA,SAAS,CAAC4H,KAAV;AACD;AACF,aAJS,EAIP,CAJO,CAAV;AAKD;AACF,SA1CD;;AA2CA,YAAMxH,QAAQ,GAAGH,KAAK,CAACP,QAAN,CAAeoI,sBAAf,CAAsC7H,KAAK,CAAC0B,SAA5C,EAAuD,CAAvD,CAAjB;;AAEA,YAAIvB,QAAJ,EAAc;AACZ,cAAMC,UAAU,GAAGyE,kBAAkB,CAAC7E,KAAD,EAAQG,QAAR,EAAkBD,IAAlB,CAArC;AAEAJ,UAAAA,YAAY,CAAC;AAAEC,YAAAA,SAAS,EAATA,SAAF;AAAaC,YAAAA,KAAK,EAAE0H,UAApB;AAAgCzH,YAAAA,QAAQ,EAARA,QAAhC;AAA0CC,YAAAA,IAAI,EAAJA,IAA1C;AAAgDC,YAAAA,QAAQ,EAARA,QAAhD;AAA0DC,YAAAA,UAAU,EAAVA;AAA1D,WAAD,CAAZ;AACD;AACF;AAhHM,KAFI;AAoHb0H,IAAAA,UApHa,sBAoHFC,KApHE,EAoHK;AAChB,UAAIA,KAAK,CAACC,IAAN,CAAWpB,IAAX,KAAoB,KAAxB,EAA+B;AAC7B,oBAAiBmB,KAAK,CAACC,IAAN,IAAc,EAA/B;AAAA,YAAQlG,IAAR,SAAQA,IAAR;;AACA,YAAMmG,QAAQ,GAAG,CAAAnG,IAAI,SAAJ,IAAAA,IAAI,WAAJ,YAAAA,IAAI,CAAEgE,MAAN,OAAkB,EAAnC;AAEA,4BAAO,wCAAUmC,QAAQ,CAACjC,UAAnB,EAAgC+B,KAAK,CAACG,QAAtC,CAAP;AACD;AACF;AA3HY,GAAf;AA8HA,SAAO3B,MAAP;AACD","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"}
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_reactDom","_List","_slate","_ListItem","_debug","_icons","log","debug","removeDialogs","exports","prevDialogs","document","querySelectorAll","forEach","s","remove","insertDialog","_ref","_parentNode$data","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","concat","tag","object","el","style","background","height","padding","overflow","display","flexFlow","component","names","map","i","key","button","onClick","marginRight","dangerouslySetInnerHTML","__html","ReactDOM","render","cursorItem","querySelector","anchorKey","bodyRect","parentElement","getBoundingClientRect","boundRect","appendChild","additionalTopOffset","y","offsetHeight","maxWidth","position","top","zIndex","leftValue","left","Math","abs","offsetWidth","rightValue","x","leftAlignedWidth","right","rightAlignedWidth","addEventListener","findParentNodeInfo","_closestInline$nodes","_closestBlock$nodes","closestInline","getClosestInline","endKey","closestBlock","getClosestBlock","nodeToUse","nodes","find","n","getNodeWithClass","_blocksAtRange$","_inlinesAtRange$","_blockData$attributes","_inlineData$attribute","blocksAtRange","getBlocksAtRangeAsArray","inlinesAtRange","getInlinesAtRangeAsArray","blockData","toJSON","inlineData","attributes","_ref2","blockClass","_ref3","inlineClass","inlineHasClass","includes","blockHasClass","CSSPlugin","plugin","toolbar","isMark","icon","ariaLabel","type","onToggle","change","hasMark","activeMarks","entry","removeMark","newMark","Mark","create","addMark","onChange","getFocusedValue","valueToUse","focus","setTimeout","getTextsAtRangeAsArray","renderMark","props","mark","_ref4","jsonData","children"],"sources":["../../../src/plugins/css/index.jsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport List from '@mui/material/List';\nimport { Mark } from 'slate';\nimport ListItem from '@mui/material/ListItem';\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"],"mappings":"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","ignoreList":[]}

package/lib/plugins/customPlugin/index.js

@@ -1,37 +1,27 @@
 "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; }
-
+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; }
 // We're possibly going to have to support content types, so starting it as an enum
-var CONTENT_TYPE = {
+var CONTENT_TYPE = exports.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 = {
+// We're possibly going to have to support multiple icon types, so starting it as an enum
+var ICON_TYPE = exports.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", {
@@ -43,24 +33,20 @@ var getIcon = function getIcon(customPluginProps) {
           __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;
+          contentType = _ref.contentType;
         valueToUse = getFocusedValue();
-
         switch (contentType) {
           case CONTENT_TYPE.FRAGMENT:
           default:
@@ -72,15 +58,14 @@ function CustomPlugin(type, customPluginProps) {
               break;
             }
         }
-
         if (focus) {
           if (editorDOM) {
             editorDOM.focus();
           }
         }
-      }; // NOTE: the emitted event (custom event named by client) will be suffixed with "PIE-"
-
+      };
 
+      // 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
@@ -100,8 +85,7 @@ function CustomPlugin(type, customPluginProps) {
         var data = node.data;
         var jsonData = data.toJSON();
         var customContent = jsonData.customContent,
-            contentType = jsonData.contentType;
-
+          contentType = jsonData.contentType;
         switch (contentType) {
           case CONTENT_TYPE.FRAGMENT:
           default:

package/lib/plugins/customPlugin/index.js.map

@@ -1 +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"}
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_serialization","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","CONTENT_TYPE","exports","FRAGMENT","ICON_TYPE","SVG","getIcon","customPluginProps","svg","icon","iconType","createElement","style","width","height","dangerouslySetInnerHTML","__html","iconAlt","CustomPlugin","type","toolbar","onClick","value","onChange","getFocusedValue","editorDOM","document","querySelector","concat","key","valueToUse","callback","_ref","focus","customContent","contentType","contentValue","htmlToValue","change","insertFragment","window","dispatchEvent","CustomEvent","event","detail","supports","node","object","name","renderNode","props","data","jsonData","toJSON"],"sources":["../../../src/plugins/customPlugin/index.jsx"],"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"],"mappings":"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","ignoreList":[]}

package/lib/plugins/html/icons/index.js

@@ -1,38 +1,26 @@
 "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) {
+var _styles = require("@mui/material/styles");
+var StyledHtmlIcon = (0, _styles.styled)('div')(function (_ref) {
+  var theme = _ref.theme;
   return {
-    icon: {
-      fontFamily: 'Cerebri Sans, Arial, sans-serif',
-      fontSize: theme.typography.fontSize,
-      fontWeight: 'bold',
-      lineHeight: '14px',
-      position: 'relative',
-      whiteSpace: 'nowrap'
-    }
+    fontFamily: 'Cerebri Sans, Arial, sans-serif',
+    fontSize: theme.typography.fontSize,
+    fontWeight: 'bold',
+    lineHeight: '14px',
+    position: 'relative',
+    whiteSpace: 'nowrap'
   };
+});
+var HtmlModeIcon = function HtmlModeIcon(_ref2) {
+  var isHtmlMode = _ref2.isHtmlMode;
+  return /*#__PURE__*/_react["default"].createElement(StyledHtmlIcon, null, isHtmlMode ? 'Exit <HTML> mode' : '<HTML>');
 };
-
-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;
+var _default = exports["default"] = HtmlModeIcon;
 //# sourceMappingURL=index.js.map