@flozy/editor 1.0.6 → 1.0.8

package/dist/Editor/utils/serializer.js

@@ -0,0 +1,28 @@
+import { Text } from 'slate';
+import { getBlock, getMarked } from './SlateUtilityFunctions.js';
+import ReactDOMServer from 'react-dom/server';
+const {
+  renderToStaticMarkup
+} = ReactDOMServer;
+export const serialize = node => {
+  if (Text.isText(node)) {
+    let string = getMarked(node, node.text);
+    string = renderToStaticMarkup(string);
+    return string;
+  }
+  const children = node.children.map(n => serialize(n)).join('');
+  let block = getBlock({
+    children,
+    element: node
+  });
+  block = renderToStaticMarkup(block);
+  return block;
+};
+export const serializer = editorValue => {
+  if (editorValue.length > 0) {
+    return editorValue.map(n => serialize(n)).join('');
+  }
+};
+export const deserializer = body => {
+  console.log(body);
+};

package/dist/Editor/utils/table.js

@@ -0,0 +1,129 @@
+import { Transforms, Editor, Range, Element, Path } from "slate";
+export class TableUtil {
+  constructor(editor) {
+    this.editor = editor;
+  }
+  insertTable = (rows, columns) => {
+    const [tableNode] = Editor.nodes(this.editor, {
+      match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table",
+      mode: "highest"
+    });
+    if (tableNode) return;
+    if (!rows || !columns) {
+      return;
+    }
+    //Creating a 2-d array of blank string as default text for the table
+    const cellText = Array.from({
+      length: rows
+    }, () => Array.from({
+      length: columns
+    }, () => ""));
+    const newTable = createTableNode(cellText, rows, columns);
+    Transforms.insertNodes(this.editor, newTable, {
+      //   mode: "highest",
+    });
+    Transforms.insertNodes(this.editor, {
+      type: "paragraph",
+      children: [{
+        text: ""
+      }]
+    }
+    //   { mode: "highest" }
+    );
+  };
+
+  removeTable = () => {
+    Transforms.removeNodes(this.editor, {
+      match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
+      // mode:'highest'
+    });
+  };
+
+  insertRow = action => {
+    const {
+      selection
+    } = this.editor;
+    if (!!selection && Range.isCollapsed(selection)) {
+      const [tableNode] = Editor.nodes(this.editor, {
+        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-row"
+      });
+      if (tableNode) {
+        const [[table, tablePath]] = Editor.nodes(this.editor, {
+          match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
+        });
+        const [, currentRow] = tableNode;
+        const path = action === "after" ? Path.next(currentRow) : currentRow;
+        Transforms.insertNodes(this.editor, createRow(Array(table.columns).fill("")), {
+          at: path
+        });
+        Transforms.setNodes(this.editor, {
+          rows: table.rows + 1
+        }, {
+          at: tablePath
+        });
+      }
+    }
+  };
+  insertColumn = action => {
+    const {
+      selection
+    } = this.editor;
+    if (!!selection && Range.isCollapsed(selection)) {
+      const [tableNode] = Editor.nodes(this.editor, {
+        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-cell"
+      });
+      if (tableNode) {
+        const [[table, tablePath]] = Editor.nodes(this.editor, {
+          match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
+        });
+        const [, currentCell] = tableNode;
+        const startPath = action === "after" ? Path.next(currentCell) : currentCell;
+
+        // The last two indices of the path represents the row and column. We need to add one cell to each row starting from the first row
+        startPath[startPath.length - 2] = 0;
+        for (let row = 0; row < table.rows; row++) {
+          Transforms.insertNodes(this.editor, createTableCell(""), {
+            at: startPath
+          });
+          startPath[startPath.length - 2]++;
+        }
+        Transforms.setNodes(this.editor, {
+          columns: table.columns + 1
+        }, {
+          at: tablePath
+        });
+      }
+    }
+  };
+}
+const createRow = cellText => {
+  const newRow = Array.from(cellText, value => createTableCell(value));
+  return {
+    type: "table-row",
+    children: newRow
+  };
+};
+export const createTableCell = text => {
+  return {
+    type: "table-cell",
+    children: [{
+      type: "paragraph",
+      children: [{
+        text
+      }]
+    }]
+  };
+};
+const createTableNode = (cellText, rows, columns) => {
+  const tableChildren = Array.from(cellText, value => createRow(value));
+  let tableNode = {
+    type: "paragraph",
+    children: [{
+      type: "table",
+      children: tableChildren,
+      rows,
+      columns
+    }]
+  };
+  return tableNode;
+};

package/dist/index.js

@@ -0,0 +1,4 @@
+import Collaborative from "./Editor/CollaborativeEditor";
+import CommonEditor from "./Editor/CommonEditor";
+export const Editor = CommonEditor;
+export const CollaborativeEditor = Collaborative;

package/package.json

@@ -1,7 +1,11 @@
 {
   "name": "@flozy/editor",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "An Editor for flozy app brain",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.js",
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
@@ -18,8 +22,6 @@
     "interweave": "^13.1.0",
     "lint-staged": "^13.2.3",
     "prettier": "^3.0.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "react-icons": "^4.10.1",
     "react-katex": "^3.0.1",
     "react-scripts": "5.0.1",
@@ -31,6 +33,10 @@
     "y-websocket": "^1.5.0",
     "yjs": "^13.6.8"
   },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
   "scripts": {
     "prepare": "husky install .husky",
     "lint": "./node_modules/.bin/eslint --ignore-path .gitignore . --fix",
@@ -39,7 +45,8 @@
     "test": "craco test --passWithNoTests",
     "eject": "react-scripts eject",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "publish:npm": "rm -rf dist && mkdir dist &&  babel src/components -d dist --copy-files"
   },
   "eslintConfig": {
     "extends": [
@@ -71,7 +78,9 @@
     ]
   },
   "devDependencies": {
+    "@babel/cli": "^7.23.0",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/preset-react": "^7.22.15",
     "@craco/craco": "^7.1.0",
     "@storybook/addon-essentials": "^7.4.0",
     "@storybook/addon-interactions": "^7.4.0",
@@ -104,8 +113,9 @@
   "bugs": {
     "url": "https://github.com/Flozy-App/editor/issues"
   },
-  "files": [
-    "build"
-  ],
-  "main": "build/index.js"
+  "babel": {
+    "presets": [
+      "@babel/preset-react"
+    ]
+  }
 }

package/build/asset-manifest.json

@@ -1,14 +0,0 @@
-{
-  "files": {
-    "main.css": "/static/css/main.71100b24.css",
-    "main.js": "/static/js/main.dd36b23b.js",
-    "static/media/unlink.svg": "/static/media/unlink.b8761030d4a17499149d2d61adc064b3.svg",
-    "index.html": "/index.html",
-    "main.71100b24.css.map": "/static/css/main.71100b24.css.map",
-    "main.dd36b23b.js.map": "/static/js/main.dd36b23b.js.map"
-  },
-  "entrypoints": [
-    "static/css/main.71100b24.css",
-    "static/js/main.dd36b23b.js"
-  ]
-}

package/build/index.html

@@ -1 +0,0 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>FLOZY APP - Editor</title><script defer="defer" src="/static/js/main.dd36b23b.js"></script><link href="/static/css/main.71100b24.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

package/build/manifest.json

@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

package/build/robots.txt

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

package/build/static/css/main.71100b24.css

@@ -1,2 +0,0 @@
-blockquote{border-left:2px solid #ddd;color:#aaa;font-style:italic;margin-left:0;margin-right:0;padding-left:10px}table,td,th{border:1px solid #000}table{border-collapse:collapse}button{background-color:#fff;border:none;opacity:.5}.btnActive{opacity:1}.editor-wrapper{background:#fff;border-radius:10px;box-shadow:-8px 8px 13px #ededed,8px -8px 13px #fff;font-family:Helvetica,Arial,sans-serif;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;max-width:100%;min-height:400px;min-width:100%;padding:12px 10px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}table{width:100%}td{height:50px;padding:0 5px}.popup-wrapper{display:inline;position:relative}.popup{background-color:#fff;border:1px solid #d3d3d3;bottom:0;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;left:0;margin:auto;padding:6px 10px;position:fixed;right:0;top:0;width:300px;z-index:1}button{cursor:pointer}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}[data-slate-node=element]{margin:10px 0}html{scroll-behavior:smooth}.editor-wrapper :focus-visible{outline:none}.grid-container{background-color:#f3f6f9;border:1px solid #e5eaf2;border-radius:12px;display:flex;flex-wrap:wrap;padding:16px;position:relative}.grid-container-toolbar,.grid-item-toolbar{position:absolute;right:0;top:0}.grid-item{background-color:#fff;padding:16px;position:relative}@media (max-width:480px){.toolbar{flex-wrap:nowrap;overflow-x:scroll}.toolbar,.toolbar-grp,.toolbar-grp>div{display:flex}.grid-item{width:100%!important}}.link{display:inline;position:relative}.link-popup{align-items:center;background-color:#fff;border:1px solid #d3d3d3;border-radius:6px;display:flex;gap:10px;left:0;padding:6px 10px;position:absolute;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;z-index:1}img{height:15px}.equation-inline{display:inline;position:relative}.toolbar{align-items:center;background:#fff;border-radius:10px;box-shadow:-8px 8px 13px #ededed,8px -8px 13px #fff;display:flex;flex-wrap:wrap;margin:4px 0;padding:15px 10px;position:-webkit-sticky;position:sticky;row-gap:15px;top:0;z-index:2}.toolbar-grp>*{cursor:pointer;margin-right:10px}.toolbar-grp{margin:0 10px}select{border:none;height:30px;width:6.9rem}.color-options{grid-gap:5px;align-items:center;display:grid;gap:5px;grid-template-columns:auto auto auto auto auto auto auto}.clicked{border:1px solid #d3d3d3;border-bottom:none}.hexPreview,.option{background-color:#000;height:16px;width:16px}.color-picker form{align-items:center;-webkit-column-gap:5px;column-gap:5px;display:flex;width:100%}.color-picker input{border:1px solid #d3d3d3;border-radius:5px;height:1.3em;padding-left:5px;width:65%}.color-picker button{cursor:pointer;margin:0;padding:0}.color-picker input:focus{outline:none}.embed{margin-right:20px;position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.embed iframe,.embed img{height:100%;width:100%}.embed button{bottom:-6px;position:absolute;right:0}.table-option{display:flex;gap:5px;margin:5px 2px;white-space:nowrap}.table-input{grid-gap:3px;display:grid;gap:3px;grid-template-columns:auto auto auto auto auto auto}.table-unit{border:1px solid #d3d3d3;height:15px;width:15px}.contextMenu{background:#fff;border:1px solid #d3d3d3;border-radius:10px;cursor:pointer;flex-direction:column;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:.5%;position:fixed;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.contextMenu,.menuOption{display:flex;gap:15px}.code-wrapper{align-items:center;background:rgba(0,0,0,.9);display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:2}.codeToTextWrapper{height:80%;width:80%}.codeToText,.codeToTextWrapper{grid-template-columns:45% 10% 45%}.codeToText{display:grid;height:90%;width:100%}.codeToText textarea,.textOutput{border-radius:15px;padding:10px}.codeToText textarea{resize:none}.codeToText textarea:focus{outline:none}.textOutput{background:#fff;overflow:scroll}.codeToTextWrapper button{border-radius:5px;cursor:pointer;font-weight:bolder;margin:3% 1%;opacity:1;padding:10px 37px}.done{background:#44c767;color:#fff}.clear{background:#fff;border:1px solid #d3d3d3;color:#a9a4a4}
-/*# sourceMappingURL=main.71100b24.css.map*/

package/build/static/css/main.71100b24.css.map

@@ -1 +0,0 @@
-{"version":3,"file":"static/css/main.71100b24.css","mappings":"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","sources":["components/Editor/Editor.css","components/Editor/Elements/Link/styles.css","components/Editor/Elements/Equation/styles.css","components/Editor/Toolbar/styles.css","components/Editor/Elements/Color Picker/ColorPicker.css","components/Editor/Elements/Embed/Embed.css","components/Editor/Elements/Table/TableSelector.css","components/Editor/Elements/TableContextMenu/styles.css","components/Editor/Elements/CodeToText/CodeToText.css"],"sourcesContent":["blockquote{\r\n    border-left: 2px solid #ddd;\r\n    margin-left: 0;\r\n    margin-right: 0;\r\n    padding-left: 10px;\r\n    color: #aaa;\r\n    font-style: italic;\r\n}\r\ntable, th, td {\r\n    border: 1px solid black;\r\n}\r\ntable{\r\n    border-collapse: collapse;\r\n}\r\nbutton{\r\n    background-color: white;\r\n    border:none;\r\n    opacity: 0.5;\r\n}\r\n.btnActive{\r\n    opacity: 1;\r\n}\r\n.editor-wrapper{\r\n    font-family:'Helvetica','Arial', sans-serif;\r\n    border-radius: 10px;\r\nbackground: #ffffff;\r\nbox-shadow:  -8px 8px 13px #ededed,\r\n             8px -8px 13px #ffffff;\r\n    min-height: 400px;\r\n    min-width: 100%;\r\n    width: fit-content;\r\n    height: fit-content;\r\n    padding: 12px 10px;\r\n    max-width: 100%;\r\n}\r\ntable{\r\n    width:100%;\r\n}\r\ntd{\r\n    height: 50px;\r\n    padding:0 5px;\r\n}\r\n.popup-wrapper{\r\n    display: inline;\r\n    position: relative;\r\n}\r\n.popup{\r\n    position: fixed;\r\n    left: 0;\r\n    right: 0;\r\n    top: 0;\r\n    bottom: 0;\r\n    margin: auto;\r\n    background-color: white;\r\n    padding: 6px 10px;\r\n    border: 1px solid lightgray;\r\n    height: fit-content;\r\n    z-index: 1;\r\n    width: 300px;\r\n\r\n}\r\nbutton{\r\n    cursor: pointer;\r\n}\r\ncode {\r\n    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\r\n      monospace;\r\n}\r\n[data-slate-node=\"element\"] {\r\n    margin: 10px 0;\r\n}\r\nhtml{\r\n    scroll-behavior: smooth;\r\n}\r\n.editor-wrapper *:focus-visible {\r\n    outline: none;\r\n}\r\n\r\n.grid-container {\r\n    display: flex;\r\n    border-radius: 12px;\r\n    background-color: #F3F6F9;\r\n    border: 1px solid #E5EAF2;\r\n    padding: 16px;\r\n    position: relative;\r\n    flex-wrap: wrap;\r\n}\r\n\r\n.grid-container-toolbar,\r\n.grid-item-toolbar {\r\n    position: absolute;\r\n    right: 0;\r\n    top: 0;\r\n}\r\n\r\n.grid-item {\r\n    padding: 16px;\r\n    background-color: #fff;\r\n    position: relative;\r\n}\r\n\r\n@media (max-width: 480px) {\r\n    .toolbar {\r\n        display: flex;\r\n        flex-wrap: nowrap;\r\n        overflow-x: scroll;\r\n    }\r\n    .toolbar-grp,\r\n    .toolbar-grp > div {\r\n        display: flex;\r\n    }\r\n    .grid-item {\r\n        width: 100% !important;\r\n    }\r\n}\r\n",".link{\r\n  display: inline;\r\n  position: relative;\r\n}\r\n.link-popup{\r\n    position: absolute;\r\n  left: 0;\r\n  display: flex;\r\n  align-items: center;\r\n  background-color: white;\r\n  padding: 6px 10px;\r\n  gap: 10px;\r\n  border-radius: 6px;\r\n  border: 1px solid lightgray;\r\n  width: fit-content;\r\n  z-index: 1;\r\n}\r\nimg{\r\n  height: 15px;\r\n}",".equation-inline{\n    display: inline;\n    position: relative;\n}",".toolbar{\r\n    border-radius: 10px;\r\nbackground: #ffffff;\r\nbox-shadow:  -8px 8px 13px #ededed,\r\n             8px -8px 13px #ffffff;\r\n    margin:4px 0;\r\n    display:flex;\r\n    flex-wrap:wrap;\r\n    align-items:center;\r\n    padding: 15px 10px;\r\n    row-gap: 15px;\r\n    position: -webkit-sticky;\r\n  position: sticky;\r\n  top: 0;\r\n  z-index: 2;\r\n}\r\n.toolbar-grp>*{\r\n    margin-right: 10px;\r\n    cursor: pointer;\r\n}\r\n.toolbar-grp{\r\n    margin:0 10px;\r\n}\r\nselect{\r\n    height: 30px;\r\n    border: none;\r\n    width: 6.9rem;\r\n}\r\n","\r\n.color-options{\r\n    display: grid;\r\n    grid-template-columns: auto auto auto auto auto auto auto;\r\n    align-items: center;\r\n    gap: 5px;\r\n}\r\n.clicked{\r\n  border: 1px solid lightgray;\r\n  border-bottom: none;\r\n}\r\n.option,.hexPreview{\r\n  width: 16px;\r\n  height: 16px;\r\n  background-color: #000000;\r\n\r\n}\r\n.color-picker form{\r\n  display: flex;\r\n  align-items: center;\r\n  column-gap: 5px;\r\n  width: 100%;\r\n}\r\n.color-picker input{\r\n  width: 65%;\r\n  height:1.3em;\r\n  border:1px solid lightgray;\r\n  border-radius: 5px;\r\n  padding-left:5px\r\n}\r\n.color-picker button{\r\n  margin:0;\r\n  padding:0;\r\n  cursor: pointer;\r\n}\r\n.color-picker input:focus{\r\n  outline: none;\r\n}\r\n",".embed{\n    width: fit-content;\n    position: relative;\n    margin-right: 20px;\n}\n.embed img,.embed iframe{\n    width: 100%;\n    height:100%;\n}\n.embed button{\n    position: absolute;\n    bottom: -6px;\n    right: 0;\n}",".table-option{\n    display: flex;\n    margin: 5px 2px;\n    gap: 5px;\n}\n.table-option{\n    white-space: nowrap;\n}\n.table-input{\n    display: grid;\n    grid-template-columns: auto auto auto auto auto auto;\n    gap: 3px;\n}\n.table-unit{\n    width:15px;\n    height:15px;\n    border: 1px solid lightgray;\n}",".contextMenu{\n    width: fit-content;\n    height: fit-content;\n    position: fixed;\n    background: white;\n    border: 1px solid lightgray;\n    border-radius: 10px;\n    padding: 0.5%;\n    display: flex;\n    gap: 15px;\n    flex-direction: column;\n    cursor: pointer;\n}\n\n.menuOption {\n    display: flex;\n    gap:15px;\n}","\n.code-wrapper{\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100vw;\n    height: 100vh;\n    background:rgba(0,0, 0,0.9);\n    z-index:2;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n}\n.codeToTextWrapper{\n    width: 80%;\n    height: 80%;\n    grid-template-columns: 45% 10% 45%;\n}\n.codeToText{\n    width: 100%;\n    height: 90%;\n    display: grid;\n    grid-template-columns: 45% 10% 45%;\n}\n.codeToText textarea,.textOutput{\n    border-radius: 15px;\n    padding: 10px;\n}\n\n.codeToText textarea{\n    resize: none;\n}\n.codeToText textarea:focus{\n    outline: none;\n}\n.textOutput{\n    background: #fff;\n    overflow: scroll;\n}\n.codeToTextWrapper button{\n    margin: 3% 1%;\n    padding: 10px 37px;\n    cursor: pointer;\n    border-radius: 5px;\n    opacity: 1;\n    font-weight: bolder;\n}\n.done{\n    background: #44c767;\n    color:#fff;\n}\n.clear{\n    background: #fff;\n    color:#a9a4a4;\n    border:1px solid lightgray;\n}"],"names":[],"sourceRoot":""}