@pie-lib/editable-html-tip-tap 1.0.20 → 1.0.21-next.6053

package/lib/styles/editorContainerStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/styles/editorContainerStyles.js"],"names":["styles","theme","root","position","padding","border","borderRadius","cursor","wordBreak","overflow","maxHeight","marginTop","margin","marginBottom","lineHeight","textWrap","fontSize","backgroundColor","color","background","fontFamily","borderLeft","paddingLeft","borderTop","tableLayout","width","borderCollapse","text","textAlign","children","editorHolder","overflowY","disabledScrollbar","display","scrollbarWidth","error","palette","main","noBorder","noPadding","toolbarOnTop"],"mappings":"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","sourcesContent":["import { color } from '@pie-lib/render-ui';\nimport { primary } from '../theme';\n\nconst styles = (theme) => ({\n  root: {\n    position: 'relative',\n    padding: '0px',\n    border: '1px solid #ccc',\n    borderRadius: '4px',\n    cursor: 'text',\n    '& [data-slate-editor=\"true\"]': {\n      wordBreak: 'break-word',\n      overflow: 'visible',\n      maxHeight: '500px',\n      // needed in order to be able to put the focus before a void element when it is the first one in the editor\n      padding: '5px',\n    },\n\n    '&:first-child': {\n      marginTop: 0,\n    },\n\n    '& ul, & ol': {\n      padding: '0 1rem',\n      margin: '1.25rem 1rem 1.25rem 0.4rem',\n    },\n\n    '& ul li p, & ol li p': {\n      marginTop: '0.25em',\n      marginBottom: '0.25em',\n    },\n\n    '& h1, & h2, & h3, & h4, & h5, & h6': {\n      lineHeight: 1.1,\n      marginTop: '2.5rem',\n      textWrap: 'pretty',\n    },\n\n    '& h1, & h2': {\n      marginTop: '3.5rem',\n      marginBottom: '1.5rem',\n    },\n\n    '& h1': {\n      fontSize: '1.4rem',\n    },\n\n    '& h2': {\n      fontSize: '1.2rem',\n    },\n\n    '& h3': {\n      fontSize: '1.1rem',\n    },\n\n    '& h4, & h5, & h6': {\n      fontSize: '1rem',\n    },\n\n    '& code': {\n      backgroundColor: 'var(--purple-light)',\n      borderRadius: '0.4rem',\n      color: 'var(--black)',\n      fontSize: '0.85rem',\n      padding: '0.25em 0.3em',\n    },\n\n    '& pre': {\n      background: 'var(--black)',\n      borderRadius: '0.5rem',\n      color: 'var(--white)',\n      fontFamily: \"'JetBrainsMono', monospace\",\n      margin: '1.5rem 0',\n      padding: '0.75rem 1rem',\n\n      '& code': {\n        background: 'none',\n        color: 'inherit',\n        fontSize: '0.8rem',\n        padding: 0,\n      },\n    },\n\n    '& blockquote': {\n      borderLeft: '3px solid var(--gray-3)',\n      margin: '1.5rem 0',\n      paddingLeft: '1rem',\n    },\n\n    '& hr': {\n      border: 'none',\n      borderTop: '1px solid var(--gray-2)',\n      margin: '2rem 0',\n    },\n\n    '& table': {\n      tableLayout: 'fixed',\n      width: '100%',\n      borderCollapse: 'collapse',\n      color: color.text(),\n      backgroundColor: color.background(),\n    },\n    '& table:not([border=\"1\"]) tr': {\n      borderTop: '1px solid #dfe2e5',\n    },\n    '& td, th': {\n      padding: '.6em 1em',\n      textAlign: 'center',\n    },\n    '& table:not([border=\"1\"]) td, th': {\n      border: '1px solid #dfe2e5',\n    },\n  },\n  children: {\n    padding: '10px 16px',\n  },\n  editorHolder: {\n    position: 'relative',\n    padding: '0px',\n    overflowY: 'auto',\n    color: color.text(),\n    backgroundColor: color.background(),\n  },\n  disabledScrollbar: {\n    '&::-webkit-scrollbar': {\n      display: 'none',\n    },\n    scrollbarWidth: 'none',\n    '-ms-overflow-style': 'none',\n  },\n  error: {\n    border: `2px solid ${theme.palette.error.main} !important`,\n  },\n  noBorder: {\n    border: 'none',\n  },\n  noPadding: {\n    padding: 0,\n  },\n  toolbarOnTop: {\n    marginTop: '45px',\n  },\n});\n\nexport default styles;\n"],"file":"editorContainerStyles.js"}
+{"version":3,"file":"editorContainerStyles.js","names":["_renderUi","require","_theme","styles","theme","root","position","padding","border","borderRadius","cursor","wordBreak","overflow","maxHeight","marginTop","margin","marginBottom","lineHeight","textWrap","fontSize","backgroundColor","color","background","fontFamily","borderLeft","paddingLeft","borderTop","tableLayout","width","borderCollapse","text","textAlign","children","editorHolder","overflowY","disabledScrollbar","display","scrollbarWidth","error","concat","palette","main","noBorder","noPadding","toolbarOnTop","_default","exports"],"sources":["../../src/styles/editorContainerStyles.js"],"sourcesContent":["import { color } from '@pie-lib/render-ui';\nimport { primary } from '../theme';\n\nconst styles = (theme) => ({\n  root: {\n    position: 'relative',\n    padding: '0px',\n    border: '1px solid #ccc',\n    borderRadius: '4px',\n    cursor: 'text',\n    '& [data-slate-editor=\"true\"]': {\n      wordBreak: 'break-word',\n      overflow: 'visible',\n      maxHeight: '500px',\n      // needed in order to be able to put the focus before a void element when it is the first one in the editor\n      padding: '5px',\n    },\n\n    '&:first-child': {\n      marginTop: 0,\n    },\n\n    '& ul, & ol': {\n      padding: '0 1rem',\n      margin: '1.25rem 1rem 1.25rem 0.4rem',\n    },\n\n    '& ul li p, & ol li p': {\n      marginTop: '0.25em',\n      marginBottom: '0.25em',\n    },\n\n    '& h1, & h2, & h3, & h4, & h5, & h6': {\n      lineHeight: 1.1,\n      marginTop: '2.5rem',\n      textWrap: 'pretty',\n    },\n\n    '& h1, & h2': {\n      marginTop: '3.5rem',\n      marginBottom: '1.5rem',\n    },\n\n    '& h1': {\n      fontSize: '1.4rem',\n    },\n\n    '& h2': {\n      fontSize: '1.2rem',\n    },\n\n    '& h3': {\n      fontSize: '1.1rem',\n    },\n\n    '& h4, & h5, & h6': {\n      fontSize: '1rem',\n    },\n\n    '& code': {\n      backgroundColor: 'var(--purple-light)',\n      borderRadius: '0.4rem',\n      color: 'var(--black)',\n      fontSize: '0.85rem',\n      padding: '0.25em 0.3em',\n    },\n\n    '& pre': {\n      background: 'var(--black)',\n      borderRadius: '0.5rem',\n      color: 'var(--white)',\n      fontFamily: \"'JetBrainsMono', monospace\",\n      margin: '1.5rem 0',\n      padding: '0.75rem 1rem',\n\n      '& code': {\n        background: 'none',\n        color: 'inherit',\n        fontSize: '0.8rem',\n        padding: 0,\n      },\n    },\n\n    '& blockquote': {\n      borderLeft: '3px solid var(--gray-3)',\n      margin: '1.5rem 0',\n      paddingLeft: '1rem',\n    },\n\n    '& hr': {\n      border: 'none',\n      borderTop: '1px solid var(--gray-2)',\n      margin: '2rem 0',\n    },\n\n    '& table': {\n      tableLayout: 'fixed',\n      width: '100%',\n      borderCollapse: 'collapse',\n      color: color.text(),\n      backgroundColor: color.background(),\n    },\n    '& table:not([border=\"1\"]) tr': {\n      borderTop: '1px solid #dfe2e5',\n    },\n    '& td, th': {\n      padding: '.6em 1em',\n      textAlign: 'center',\n    },\n    '& table:not([border=\"1\"]) td, th': {\n      border: '1px solid #dfe2e5',\n    },\n  },\n  children: {\n    padding: '10px 16px',\n  },\n  editorHolder: {\n    position: 'relative',\n    padding: '0px',\n    overflowY: 'auto',\n    color: color.text(),\n    backgroundColor: color.background(),\n  },\n  disabledScrollbar: {\n    '&::-webkit-scrollbar': {\n      display: 'none',\n    },\n    scrollbarWidth: 'none',\n    '-ms-overflow-style': 'none',\n  },\n  error: {\n    border: `2px solid ${theme.palette.error.main} !important`,\n  },\n  noBorder: {\n    border: 'none',\n  },\n  noPadding: {\n    padding: 0,\n  },\n  toolbarOnTop: {\n    marginTop: '45px',\n  },\n});\n\nexport default styles;\n"],"mappings":"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","ignoreList":[]}

package/lib/theme.js

@@ -4,6 +4,5 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.primary = void 0;
-var primary = '#304ffe';
-exports.primary = primary;
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy90aGVtZS5qcyJdLCJuYW1lcyI6WyJwcmltYXJ5Il0sIm1hcHBpbmdzIjoiOzs7Ozs7QUFBTyxJQUFNQSxPQUFPLEdBQUcsU0FBaEIiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgY29uc3QgcHJpbWFyeSA9ICcjMzA0ZmZlJztcbiJdfQ==
+var primary = exports.primary = '#304ffe';
+//# sourceMappingURL=theme.js.map

package/lib/theme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/theme.js"],"names":["primary"],"mappings":";;;;;;AAAO,IAAMA,OAAO,GAAG,SAAhB","sourcesContent":["export const primary = '#304ffe';\n"],"file":"theme.js"}
+{"version":3,"file":"theme.js","names":["primary","exports"],"sources":["../src/theme.js"],"sourcesContent":["export const primary = '#304ffe';\n"],"mappings":";;;;;;AAAO,IAAMA,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,SAAS","ignoreList":[]}

package/lib/utils/size.js

@@ -4,31 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.valueToSize = void 0;
-
-var valueToSize = function valueToSize(v) {
+var valueToSize = exports.valueToSize = function valueToSize(v) {
   if (!v) {
     return;
   }
-
   var calcRegex = /^calc\((.*)\)$/;
-
   if (typeof v === 'string') {
     if (v.endsWith('%')) {
       return undefined;
     }
-
     if (v.endsWith('px') || v.endsWith('vh') || v.endsWith('vw') || v.endsWith('ch') || v.endsWith('em') || v.match(calcRegex)) {
       return v;
     }
-
     var value = parseInt(v, 10);
     return Number.isNaN(value) ? value : "".concat(value, "px");
   }
-
   if (typeof v === 'number') {
     return "".concat(v, "px");
   }
 };
-
-exports.valueToSize = valueToSize;
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy91dGlscy9zaXplLmpzIl0sIm5hbWVzIjpbInZhbHVlVG9TaXplIiwidiIsImNhbGNSZWdleCIsImVuZHNXaXRoIiwidW5kZWZpbmVkIiwibWF0Y2giLCJ2YWx1ZSIsInBhcnNlSW50IiwiTnVtYmVyIiwiaXNOYU4iXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFBTyxJQUFNQSxXQUFXLEdBQUcsU0FBZEEsV0FBYyxDQUFDQyxDQUFELEVBQU87QUFDaEMsTUFBSSxDQUFDQSxDQUFMLEVBQVE7QUFDTjtBQUNEOztBQUVELE1BQU1DLFNBQVMsR0FBRyxnQkFBbEI7O0FBRUEsTUFBSSxPQUFPRCxDQUFQLEtBQWEsUUFBakIsRUFBMkI7QUFDekIsUUFBSUEsQ0FBQyxDQUFDRSxRQUFGLENBQVcsR0FBWCxDQUFKLEVBQXFCO0FBQ25CLGFBQU9DLFNBQVA7QUFDRDs7QUFFRCxRQUNFSCxDQUFDLENBQUNFLFFBQUYsQ0FBVyxJQUFYLEtBQ0FGLENBQUMsQ0FBQ0UsUUFBRixDQUFXLElBQVgsQ0FEQSxJQUVBRixDQUFDLENBQUNFLFFBQUYsQ0FBVyxJQUFYLENBRkEsSUFHQUYsQ0FBQyxDQUFDRSxRQUFGLENBQVcsSUFBWCxDQUhBLElBSUFGLENBQUMsQ0FBQ0UsUUFBRixDQUFXLElBQVgsQ0FKQSxJQUtBRixDQUFDLENBQUNJLEtBQUYsQ0FBUUgsU0FBUixDQU5GLEVBT0U7QUFDQSxhQUFPRCxDQUFQO0FBQ0Q7O0FBRUQsUUFBTUssS0FBSyxHQUFHQyxRQUFRLENBQUNOLENBQUQsRUFBSSxFQUFKLENBQXRCO0FBRUEsV0FBT08sTUFBTSxDQUFDQyxLQUFQLENBQWFILEtBQWIsSUFBc0JBLEtBQXRCLGFBQWlDQSxLQUFqQyxPQUFQO0FBQ0Q7O0FBRUQsTUFBSSxPQUFPTCxDQUFQLEtBQWEsUUFBakIsRUFBMkI7QUFDekIscUJBQVVBLENBQVY7QUFDRDtBQUNGLENBL0JNIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGNvbnN0IHZhbHVlVG9TaXplID0gKHYpID0+IHtcbiAgaWYgKCF2KSB7XG4gICAgcmV0dXJuO1xuICB9XG5cbiAgY29uc3QgY2FsY1JlZ2V4ID0gL15jYWxjXFwoKC4qKVxcKSQvO1xuXG4gIGlmICh0eXBlb2YgdiA9PT0gJ3N0cmluZycpIHtcbiAgICBpZiAodi5lbmRzV2l0aCgnJScpKSB7XG4gICAgICByZXR1cm4gdW5kZWZpbmVkO1xuICAgIH1cblxuICAgIGlmIChcbiAgICAgIHYuZW5kc1dpdGgoJ3B4JykgfHxcbiAgICAgIHYuZW5kc1dpdGgoJ3ZoJykgfHxcbiAgICAgIHYuZW5kc1dpdGgoJ3Z3JykgfHxcbiAgICAgIHYuZW5kc1dpdGgoJ2NoJykgfHxcbiAgICAgIHYuZW5kc1dpdGgoJ2VtJykgfHxcbiAgICAgIHYubWF0Y2goY2FsY1JlZ2V4KVxuICAgICkge1xuICAgICAgcmV0dXJuIHY7XG4gICAgfVxuXG4gICAgY29uc3QgdmFsdWUgPSBwYXJzZUludCh2LCAxMCk7XG5cbiAgICByZXR1cm4gTnVtYmVyLmlzTmFOKHZhbHVlKSA/IHZhbHVlIDogYCR7dmFsdWV9cHhgO1xuICB9XG5cbiAgaWYgKHR5cGVvZiB2ID09PSAnbnVtYmVyJykge1xuICAgIHJldHVybiBgJHt2fXB4YDtcbiAgfVxufTtcbiJdfQ==
+//# sourceMappingURL=size.js.map

package/lib/utils/size.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/size.js"],"names":["valueToSize","v","calcRegex","endsWith","undefined","match","value","parseInt","Number","isNaN"],"mappings":";;;;;;;AAAO,IAAMA,WAAW,GAAG,SAAdA,WAAc,CAACC,CAAD,EAAO;AAChC,MAAI,CAACA,CAAL,EAAQ;AACN;AACD;;AAED,MAAMC,SAAS,GAAG,gBAAlB;;AAEA,MAAI,OAAOD,CAAP,KAAa,QAAjB,EAA2B;AACzB,QAAIA,CAAC,CAACE,QAAF,CAAW,GAAX,CAAJ,EAAqB;AACnB,aAAOC,SAAP;AACD;;AAED,QACEH,CAAC,CAACE,QAAF,CAAW,IAAX,KACAF,CAAC,CAACE,QAAF,CAAW,IAAX,CADA,IAEAF,CAAC,CAACE,QAAF,CAAW,IAAX,CAFA,IAGAF,CAAC,CAACE,QAAF,CAAW,IAAX,CAHA,IAIAF,CAAC,CAACE,QAAF,CAAW,IAAX,CAJA,IAKAF,CAAC,CAACI,KAAF,CAAQH,SAAR,CANF,EAOE;AACA,aAAOD,CAAP;AACD;;AAED,QAAMK,KAAK,GAAGC,QAAQ,CAACN,CAAD,EAAI,EAAJ,CAAtB;AAEA,WAAOO,MAAM,CAACC,KAAP,CAAaH,KAAb,IAAsBA,KAAtB,aAAiCA,KAAjC,OAAP;AACD;;AAED,MAAI,OAAOL,CAAP,KAAa,QAAjB,EAA2B;AACzB,qBAAUA,CAAV;AACD;AACF,CA/BM","sourcesContent":["export const valueToSize = (v) => {\n  if (!v) {\n    return;\n  }\n\n  const calcRegex = /^calc\\((.*)\\)$/;\n\n  if (typeof v === 'string') {\n    if (v.endsWith('%')) {\n      return undefined;\n    }\n\n    if (\n      v.endsWith('px') ||\n      v.endsWith('vh') ||\n      v.endsWith('vw') ||\n      v.endsWith('ch') ||\n      v.endsWith('em') ||\n      v.match(calcRegex)\n    ) {\n      return v;\n    }\n\n    const value = parseInt(v, 10);\n\n    return Number.isNaN(value) ? value : `${value}px`;\n  }\n\n  if (typeof v === 'number') {\n    return `${v}px`;\n  }\n};\n"],"file":"size.js"}
+{"version":3,"file":"size.js","names":["valueToSize","exports","v","calcRegex","endsWith","undefined","match","value","parseInt","Number","isNaN","concat"],"sources":["../../src/utils/size.js"],"sourcesContent":["export const valueToSize = (v) => {\n  if (!v) {\n    return;\n  }\n\n  const calcRegex = /^calc\\((.*)\\)$/;\n\n  if (typeof v === 'string') {\n    if (v.endsWith('%')) {\n      return undefined;\n    }\n\n    if (\n      v.endsWith('px') ||\n      v.endsWith('vh') ||\n      v.endsWith('vw') ||\n      v.endsWith('ch') ||\n      v.endsWith('em') ||\n      v.match(calcRegex)\n    ) {\n      return v;\n    }\n\n    const value = parseInt(v, 10);\n\n    return Number.isNaN(value) ? value : `${value}px`;\n  }\n\n  if (typeof v === 'number') {\n    return `${v}px`;\n  }\n};\n"],"mappings":";;;;;;AAAO,IAAMA,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAG,SAAdA,WAAWA,CAAIE,CAAC,EAAK;EAChC,IAAI,CAACA,CAAC,EAAE;IACN;EACF;EAEA,IAAMC,SAAS,GAAG,gBAAgB;EAElC,IAAI,OAAOD,CAAC,KAAK,QAAQ,EAAE;IACzB,IAAIA,CAAC,CAACE,QAAQ,CAAC,GAAG,CAAC,EAAE;MACnB,OAAOC,SAAS;IAClB;IAEA,IACEH,CAAC,CAACE,QAAQ,CAAC,IAAI,CAAC,IAChBF,CAAC,CAACE,QAAQ,CAAC,IAAI,CAAC,IAChBF,CAAC,CAACE,QAAQ,CAAC,IAAI,CAAC,IAChBF,CAAC,CAACE,QAAQ,CAAC,IAAI,CAAC,IAChBF,CAAC,CAACE,QAAQ,CAAC,IAAI,CAAC,IAChBF,CAAC,CAACI,KAAK,CAACH,SAAS,CAAC,EAClB;MACA,OAAOD,CAAC;IACV;IAEA,IAAMK,KAAK,GAAGC,QAAQ,CAACN,CAAC,EAAE,EAAE,CAAC;IAE7B,OAAOO,MAAM,CAACC,KAAK,CAACH,KAAK,CAAC,GAAGA,KAAK,MAAAI,MAAA,CAAMJ,KAAK,OAAI;EACnD;EAEA,IAAI,OAAOL,CAAC,KAAK,QAAQ,EAAE;IACzB,UAAAS,MAAA,CAAUT,CAAC;EACb;AACF,CAAC","ignoreList":[]}

package/package.json

@@ -1,20 +1,22 @@
 {
   "name": "@pie-lib/editable-html-tip-tap",
-  "version": "1.0.20",
+  "version": "1.0.21-next.6053+fbf4a810",
   "description": "",
   "license": "ISC",
   "main": "lib/index.js",
   "module": "src/index.jsx",
   "author": "pie-framework developers",
   "dependencies": {
-    "@material-ui/core": "^3.8.3",
-    "@material-ui/icons": "^3.0.2",
-    "@material-ui/styles": "^3.0.0-alpha.10",
-    "@pie-lib/drag": "^2.22.1",
-    "@pie-lib/math-input": "6.31.1-beta-1",
-    "@pie-lib/math-rendering": "^3.22.1",
-    "@pie-lib/math-toolbar": "1.31.2-beta.3",
-    "@pie-lib/render-ui": "^4.35.1",
+    "@dnd-kit/core": "6.1.0",
+    "@dnd-kit/modifiers": "9.0.0",
+    "@dnd-kit/utilities": "3.2.2",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
+    "@pie-lib/drag": "2.22.4-next.0",
+    "@pie-lib/math-input": "6.31.2-next.212+fbf4a810",
+    "@pie-lib/math-rendering": "3.22.3-next.0",
+    "@pie-lib/math-toolbar": "1.31.3-next.203+fbf4a810",
+    "@pie-lib/render-ui": "4.35.4-next.0",
     "@tiptap/core": "3.0.9",
     "@tiptap/extension-character-count": "3.0.9",
     "@tiptap/extension-color": "3.0.9",
@@ -56,15 +58,15 @@
   },
   "devDependencies": {
     "@pie-framework/mathquill": "^1.1.3",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "peerDependencies": {
-    "react": "18.2.0"
+    "react": "^18.2.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ff5ec2ebe11110b7652812a10c6dc230f08e12cb",
+  "gitHead": "fbf4a810003eeb0a0e984ff8f55362ad94cf4b71",
   "scripts": {}
 }

package/src/components/EditableHtml.jsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import classNames from 'classnames';
 import { EditorContent, useEditor, useEditorState } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 import { TextStyleKit } from '@tiptap/extension-text-style';
@@ -8,7 +7,7 @@ import SuperScript from '@tiptap/extension-superscript';
 import SubScript from '@tiptap/extension-subscript';
 import TextAlign from '@tiptap/extension-text-align';
 import Image from '@tiptap/extension-image';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 
 import ExtendedTable from '../extensions/extended-table';
 import { TableRow } from '@tiptap/extension-table-row';
@@ -93,7 +92,7 @@ export const EditableHtml = (props) => {
   const { showParagraphs, separateParagraphs } = props.pluginProps || {};
   const [pendingImages, setPendingImages] = useState([]);
   const [scheduled, setScheduled] = useState(false);
-  const { classes, toolbarOpts } = props;
+  const { toolbarOpts } = props;
 
   const toolbarOptsToUse = {
     ...defaultToolbarOpts,
@@ -317,19 +316,14 @@ export const EditableHtml = (props) => {
       editor={editor}
     >
       {editor && (
-        <EditorContent
+        <StyledEditorContent
           style={{
             minHeight: sizeStyle.minHeight,
             height: sizeStyle.height,
             maxHeight: sizeStyle.maxHeight,
           }}
-          className={classNames(
-            {
-              [classes.showParagraph]: showParagraphs && !showParagraphs.disabled,
-              [classes.separateParagraph]: separateParagraphs && !separateParagraphs.disabled,
-            },
-            classes.root,
-          )}
+          showParagraph={showParagraphs && !showParagraphs.disabled}
+          separateParagraph={separateParagraphs && !separateParagraphs.disabled}
           editor={editor}
         />
       )}
@@ -337,38 +331,32 @@ export const EditableHtml = (props) => {
   );
 };
 
-const StyledEditor = withStyles({
-  root: {
+const StyledEditorContent = styled(EditorContent, {
+  shouldForwardProp: (prop) => !['showParagraph', 'separateParagraph'].includes(prop),
+})(({ showParagraph, separateParagraph }) => ({
+  outline: 'none !important',
+  '& .ProseMirror': {
+    padding: '5px',
+    maxHeight: '500px',
     outline: 'none !important',
-    '& .ProseMirror': {
-      padding: '5px',
-      maxHeight: '500px',
-      outline: 'none !important',
-      position: 'initial',
-      '& > p': {
-        margin: '0',
-      },
+    position: 'initial',
+    '& > p': {
+      margin: '0',
     },
-  },
-  showParagraph: {
-    '& .ProseMirror': {
-      // a p that has a p after it
+    ...(showParagraph && {
       '& > p:has(+ p)::after': {
         display: 'block',
         content: '"¶"',
         fontSize: '1em',
         color: '#146EB3',
       },
-    },
-  },
-  separateParagraph: {
-    '& .ProseMirror': {
-      // a p that has a p after it
+    }),
+    ...(separateParagraph && {
       '& > div:has(+ div)': {
         marginBottom: '1em',
       },
-    },
+    }),
   },
-})(EditableHtml);
+}));
 
-export default StyledEditor;
+export default EditableHtml;

package/src/components/MenuBar.jsx

@@ -1,23 +1,23 @@
 import React, { useMemo, useState } from 'react';
 import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import { NodeSelection } from 'prosemirror-state';
 
-import Bold from '@material-ui/icons/FormatBold';
-import Italic from '@material-ui/icons/FormatItalic';
-import Strikethrough from '@material-ui/icons/FormatStrikethrough';
-import Code from '@material-ui/icons/Code';
-import GridOn from '@material-ui/icons/GridOn';
-import BulletedListIcon from '@material-ui/icons/FormatListBulleted';
-import NumberedListIcon from '@material-ui/icons/FormatListNumbered';
-import Underline from '@material-ui/icons/FormatUnderlined';
-import Functions from '@material-ui/icons/Functions';
-import ImageIcon from '@material-ui/icons/Image';
-import Redo from '@material-ui/icons/Redo';
-import Undo from '@material-ui/icons/Undo';
-import TheatersIcon from '@material-ui/icons/Theaters';
-import VolumeUpIcon from '@material-ui/icons/VolumeUp';
-import BorderAll from '@material-ui/icons/BorderAll';
+import Bold from '@mui/icons-material/FormatBold';
+import Italic from '@mui/icons-material/FormatItalic';
+import Strikethrough from '@mui/icons-material/FormatStrikethrough';
+import Code from '@mui/icons-material/Code';
+import GridOn from '@mui/icons-material/GridOn';
+import BulletedListIcon from '@mui/icons-material/FormatListBulleted';
+import NumberedListIcon from '@mui/icons-material/FormatListNumbered';
+import Underline from '@mui/icons-material/FormatUnderlined';
+import Functions from '@mui/icons-material/Functions';
+import ImageIcon from '@mui/icons-material/Image';
+import Redo from '@mui/icons-material/Redo';
+import Undo from '@mui/icons-material/Undo';
+import TheatersIcon from '@mui/icons-material/Theaters';
+import VolumeUpIcon from '@mui/icons-material/VolumeUp';
+import BorderAll from '@mui/icons-material/BorderAll';
 
 import { EditorContent, useEditorState } from '@tiptap/react';
 
@@ -536,18 +536,49 @@ function MenuBar({ editor, classes, activePlugins, toolbarOpts: toolOpts, respon
   );
 }
 
-const style = (theme) => ({
-  defaultToolbar: {
+// Wrapper component that provides classes object using styled API
+const StyledMenuBar = (props) => {
+  const theme = useTheme();
+
+  const classes = {
+    defaultToolbar: 'defaultToolbar',
+    buttonsContainer: 'buttonsContainer',
+    button: 'button',
+    active: 'active',
+    disabled: 'disabled',
+    isActive: 'isActive',
+    toolbar: 'toolbar',
+    toolbarWithNoDone: 'toolbarWithNoDone',
+    toolbarTop: 'toolbarTop',
+    toolbarRight: 'toolbarRight',
+    fullWidth: 'fullWidth',
+    hidden: 'hidden',
+    autoWidth: 'autoWidth',
+    focused: 'focused',
+    iconRoot: 'iconRoot',
+    label: 'label',
+    shared: 'shared',
+  };
+
+  return (
+    <StyledMenuBarRoot>
+      <MenuBar {...props} classes={classes} />
+    </StyledMenuBarRoot>
+  );
+};
+
+const StyledMenuBarRoot = styled('div')(({ theme }) => ({
+  '& .defaultToolbar': {
     display: 'flex',
     width: '100%',
     justifyContent: 'space-between',
   },
-  buttonsContainer: {
+  '& .buttonsContainer': {
     alignItems: 'center',
     display: 'flex',
     width: '100%',
   },
-  button: {
+  '& .button': {
     color: 'grey',
     display: 'inline-flex',
     padding: '2px',
@@ -561,21 +592,21 @@ const style = (theme) => ({
       outline: `2px solid ${theme.palette.grey[700]}`,
     },
   },
-  active: {
+  '& .active': {
     color: 'black',
   },
-  disabled: {
+  '& .disabled': {
     opacity: 0.7,
     cursor: 'not-allowed',
     '& :hover': {
       color: 'grey',
     },
   },
-  isActive: {
+  '& .isActive': {
     background: 'var(--purple)',
     color: 'var(--white)',
   },
-  toolbar: {
+  '& .toolbar': {
     position: 'absolute',
     zIndex: 20,
     cursor: 'pointer',
@@ -591,42 +622,40 @@ const style = (theme) => ({
     opacity: 0,
     pointerEvents: 'none',
   },
-  toolbarWithNoDone: {
+  '& .toolbarWithNoDone': {
     minWidth: '265px',
   },
-  toolbarTop: {
+  '& .toolbarTop': {
     top: '-45px',
   },
-  toolbarRight: {
+  '& .toolbarRight': {
     right: 0,
   },
-  fullWidth: {
+  '& .fullWidth': {
     width: '100%',
   },
-  hidden: {
+  '& .hidden': {
     visibility: 'hidden',
   },
-  autoWidth: {
+  '& .autoWidth': {
     width: 'auto',
   },
-  focused: {
+  '& .focused': {
     opacity: 1,
     pointerEvents: 'auto',
   },
-  iconRoot: {
+  '& .iconRoot': {
     width: '28px',
     height: '28px',
     padding: '4px',
     verticalAlign: 'top',
   },
-  label: {
+  '& .label': {
     color: 'var(--editable-html-toolbar-check, #00bb00)',
   },
-  shared: {
+  '& .shared': {
     display: 'flex',
   },
-});
-
-const StyledMenuBar = withStyles(style, { index: 1000 })(MenuBar);
+}));
 
 export default StyledMenuBar;

package/src/components/TiptapContainer.jsx

@@ -1,17 +1,136 @@
 import React, { useEffect, useMemo } from 'react';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
-
-import styles from '../styles/editorContainerStyles';
+import { styled } from '@mui/material/styles';
+import { color } from '@pie-lib/render-ui';
 import { valueToSize } from '../utils/size';
 
 import StyledMenuBar from './MenuBar';
 
+const StyledRoot = styled('div', {
+  shouldForwardProp: (prop) => !['noBorder', 'error'].includes(prop),
+})(({ theme, noBorder, error }) => ({
+  position: 'relative',
+  padding: '0px',
+  border: noBorder ? 'none' : '1px solid #ccc',
+  borderRadius: '4px',
+  cursor: 'text',
+  '& [data-slate-editor="true"]': {
+    wordBreak: 'break-word',
+    overflow: 'visible',
+    maxHeight: '500px',
+    padding: '5px',
+  },
+  '&:first-child': {
+    marginTop: 0,
+  },
+  '& ul, & ol': {
+    padding: '0 1rem',
+    margin: '1.25rem 1rem 1.25rem 0.4rem',
+  },
+  '& ul li p, & ol li p': {
+    marginTop: '0.25em',
+    marginBottom: '0.25em',
+  },
+  '& h1, & h2, & h3, & h4, & h5, & h6': {
+    lineHeight: 1.1,
+    marginTop: '2.5rem',
+    textWrap: 'pretty',
+  },
+  '& h1, & h2': {
+    marginTop: '3.5rem',
+    marginBottom: '1.5rem',
+  },
+  '& h1': {
+    fontSize: '1.4rem',
+  },
+  '& h2': {
+    fontSize: '1.2rem',
+  },
+  '& h3': {
+    fontSize: '1.1rem',
+  },
+  '& h4, & h5, & h6': {
+    fontSize: '1rem',
+  },
+  '& code': {
+    backgroundColor: 'var(--purple-light)',
+    borderRadius: '0.4rem',
+    color: 'var(--black)',
+    fontSize: '0.85rem',
+    padding: '0.25em 0.3em',
+  },
+  '& pre': {
+    background: 'var(--black)',
+    borderRadius: '0.5rem',
+    color: 'var(--white)',
+    fontFamily: '\'JetBrainsMono\', monospace',
+    margin: '1.5rem 0',
+    padding: '0.75rem 1rem',
+    '& code': {
+      background: 'none',
+      color: 'inherit',
+      fontSize: '0.8rem',
+      padding: 0,
+    },
+  },
+  '& blockquote': {
+    borderLeft: '3px solid var(--gray-3)',
+    margin: '1.5rem 0',
+    paddingLeft: '1rem',
+  },
+  '& hr': {
+    border: 'none',
+    borderTop: '1px solid var(--gray-2)',
+    margin: '2rem 0',
+  },
+  '& table': {
+    tableLayout: 'fixed',
+    width: '100%',
+    borderCollapse: 'collapse',
+    color: color.text(),
+    backgroundColor: color.background(),
+  },
+  '& table:not([border="1"]) tr': {
+    borderTop: '1px solid #dfe2e5',
+  },
+  '& td, th': {
+    padding: '.6em 1em',
+    textAlign: 'center',
+  },
+  '& table:not([border="1"]) td, th': {
+    border: '1px solid #dfe2e5',
+  },
+  ...(error && {
+    border: `2px solid ${theme.palette.error.main} !important`,
+  }),
+}));
+
+const StyledEditorHolder = styled('div', {
+  shouldForwardProp: (prop) => prop !== 'disableScrollbar',
+})(({ disableScrollbar }) => ({
+  position: 'relative',
+  padding: '0px',
+  overflowY: 'auto',
+  color: color.text(),
+  backgroundColor: color.background(),
+  ...(disableScrollbar && {
+    '&::-webkit-scrollbar': {
+      display: 'none',
+    },
+    scrollbarWidth: 'none',
+    '-ms-overflow-style': 'none',
+  }),
+}));
+
+const StyledChildren = styled('div', {
+  shouldForwardProp: (prop) => prop !== 'noPadding',
+})(({ noPadding }) => ({
+  padding: noPadding ? 0 : '10px 16px',
+}));
+
 function TiptapContainer(props) {
   const {
     editor,
     disabled,
-    classes,
     children,
     disableScrollbar,
     activePlugins,
@@ -26,10 +145,6 @@ function TiptapContainer(props) {
     maxHeight,
   } = props;
 
-  const holderNames = classNames(classes.editorHolder, {
-    [classes.disabledScrollbar]: disableScrollbar,
-  });
-
   useEffect(() => {
     if (editor && autoFocus) {
       Promise.resolve().then(() => {
@@ -51,29 +166,15 @@ function TiptapContainer(props) {
   );
 
   return (
-    <div
-      className={classNames(
-        {
-          [classes.noBorder]: toolbarOpts && toolbarOpts.noBorder,
-          [classes.error]: toolbarOpts && toolbarOpts.error,
-        },
-        classes.root,
-        props.className,
-      )}
+    <StyledRoot
+      noBorder={toolbarOpts && toolbarOpts.noBorder}
+      error={toolbarOpts && toolbarOpts.error}
+      className={props.className}
       style={{ width: sizeStyle.width, minWidth: sizeStyle.minWidth, maxWidth: sizeStyle.maxWidth }}
     >
-      <div className={holderNames}>
-        <div
-          className={classNames(
-            {
-              [classes.noPadding]: toolbarOpts && toolbarOpts.noPadding,
-            },
-            classes.children,
-          )}
-        >
-          {children}
-        </div>
-      </div>
+      <StyledEditorHolder disableScrollbar={disableScrollbar}>
+        <StyledChildren noPadding={toolbarOpts && toolbarOpts.noPadding}>{children}</StyledChildren>
+      </StyledEditorHolder>
 
       {editor && (
         <StyledMenuBar
@@ -84,10 +185,8 @@ function TiptapContainer(props) {
           onChange={props.onChange}
         />
       )}
-    </div>
+    </StyledRoot>
   );
 }
 
-const EditorContainer = withStyles(styles)(TiptapContainer);
-
-export default EditorContainer;
+export default TiptapContainer;