@flozy/editor 1.2.1 → 1.2.3

package/dist/Editor/CollaborativeEditor.js

@@ -9,6 +9,7 @@ import withCommon from "./hooks/withCommon";
 import withCollaborative from "./hooks/withCollaborative";
 import CommonEditor from "./CommonEditor";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const CollaborativeEditor = props => {
   const editorRef = useRef(null);
   const {
@@ -108,6 +109,17 @@ const CollaborativeEditor = props => {
     setConnected(false);
     setMessage("Seems your connection is lost... Reload the page to edit the document...");
   });
+
+  // const getContent = () => {
+  //   console.log(editorRef.current.getContent());
+  // };
+
+  // const insertFragments = () => {
+  //   editorRef.current.insertFragments([
+  //     { type: "paragraph", children: [{ text: "some fragements to inss" }] },
+  //   ]);
+  // };
+
   if (authenticated.status === "error") {
     return /*#__PURE__*/_jsx("h1", {
       "data-status": connected,
@@ -119,18 +131,20 @@ const CollaborativeEditor = props => {
       children: message || "Loading..."
     });
   }
-  return /*#__PURE__*/_jsx(CommonEditor, {
-    ref: editorRef,
-    editor: editor,
-    id: id,
-    content: [],
-    onSave: onSave,
-    readOnly: authenticated.scope,
-    otherProps: {
-      token: user?.token,
-      API_HOST: apiHOST
-    },
-    ...rest
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(CommonEditor, {
+      ref: editorRef,
+      editor: editor,
+      id: id,
+      content: [],
+      onSave: onSave,
+      readOnly: authenticated.scope,
+      otherProps: {
+        token: user?.token,
+        API_HOST: apiHOST
+      },
+      ...rest
+    })
   });
 };
 export default CollaborativeEditor;

package/dist/Editor/CommonEditor.js

@@ -1,7 +1,7 @@
 import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } from "react";
 import { createEditor } from "slate";
-import { Slate, Editable } from "slate-react";
-import html2canvas from "html2canvas";
+import { Slate, Editable, ReactEditor } from "slate-react";
+import { useDebounce } from "use-debounce";
 import Toolbar from "./Toolbar/Toolbar";
 import { getMarked, getBlock } from "./utils/SlateUtilityFunctions";
 import CodeToText from "./Elements/CodeToText/CodeToText";
@@ -15,8 +15,10 @@ import DialogWrapper from "./DialogWrapper";
 import useTimeout from "./hooks/useTimeout";
 import "./Editor.css";
 import { serialize } from "./utils/serializer";
+import { getThumbnailImage } from "./helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const PREVIEW_IMAGE_HIDE_CLASS = ["grid-container-toolbar", "grid-item-toolbar", "element-toolbar"];
 const Element = props => {
   return getBlock(props);
 };
@@ -46,7 +48,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     data: content
   });
   const [value, setValue] = useState(convertedContent);
-  const [lastUpdated, setLastUpdated] = useState(JSON.stringify(convertedContent));
+  const [deboundedValue] = useDebounce(value, 500);
   const [count] = useTimeout({
     timeoutInMS: timeoutInMS
   });
@@ -75,20 +77,53 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   }, [id, content]);
   useEffect(() => {
     if (count > 0) {
-      updateChanges(value);
+      if (editorWrapper && editorWrapper?.current) {
+        const text = serialize(deboundedValue);
+        onSave(JSON.stringify(deboundedValue), {
+          text: text
+        });
+      }
     }
-  }, [count]);
+  }, [deboundedValue]);
+  const getPreviewImage = async (needBackground = false, options = {}) => {
+    ReactEditor.blur(editor);
+    const dom = needBackground ? editorWrapper?.current : editorWrapper?.current.getElementsByClassName("innert-editor-textbox")[0];
+    const c = await getThumbnailImage(dom, {
+      ...options,
+      allowTaint: true,
+      backgroundColor: null,
+      proxy: "anonymous",
+      useCORS: true,
+      onclone: document => {
+        // hide class
+        for (let hidedeClass of PREVIEW_IMAGE_HIDE_CLASS) {
+          for (let element of document.getElementsByClassName(hidedeClass)) {
+            element.style.display = "none";
+          }
+        }
+        return document;
+      }
+    });
+    return c;
+  };
   useImperativeHandle(ref, () => ({
-    async getThumbnail() {
+    async getThumbnail(needBackground = false, options = {}) {
       try {
-        const c = await html2canvas(editorWrapper?.current);
-        if (c) {
-          return c.toDataURL();
-        }
+        const c = await getPreviewImage(needBackground, options);
+        return c;
       } catch (err) {
         console.log(err);
         return null;
       }
+    },
+    getEditor() {
+      return editor;
+    },
+    getContent() {
+      return value;
+    },
+    insertFragments(fragments) {
+      editor.insertNode(fragments);
     }
   }));
   const [htmlAction, setHtmlAction] = useState({
@@ -109,28 +144,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const chars = CHARACTERS.filter(c => c.toLowerCase().startsWith(search?.toLowerCase())).slice(0, 10);
   const handleEditorChange = newValue => {
     setValue(newValue);
-    const isAstChange = editor.operations.some(op => "set_selection" !== op.type);
-    if (isAstChange && onSave && timeoutInMS === 0) {
-      // send the value to onSave api
-      updateChanges(newValue);
-    }
-  };
-  const updateChanges = newValue => {
-    const stringify = JSON.stringify(newValue);
-    const text = serialize(newValue);
-    if (stringify !== lastUpdated && count > 0 && text?.trim().length > 3 && onSave) {
-      if (editorWrapper && editorWrapper?.current) {
-        html2canvas(editorWrapper?.current, {
-          height: 350
-        }).then(c => {
-          onSave(stringify, {
-            text: text,
-            thumbnail: c.toDataURL()
-          });
-          setLastUpdated(stringify);
-        });
-      }
-    }
   };
   const customProps = {
     ...(otherProps || {})
@@ -203,6 +216,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
               paddingBottom: `${bannerSpacing?.bottom}px`
             },
             children: [/*#__PURE__*/_jsx(Editable, {
+              className: "innert-editor-textbox",
               readOnly: isReadOnly,
               placeholder: "Write something",
               renderElement: renderElement,

package/dist/Editor/Elements/PageSettings/PageSettings.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const PageSettings = props => {
+  const {
+    attributes
+  } = props;
+  return /*#__PURE__*/_jsx("div", {
+    ...attributes,
+    className: "page-settings",
+    contentEditable: false
+  });
+};
+export default PageSettings;

package/dist/Editor/helper/index.js

@@ -0,0 +1,10 @@
+import html2canvas from "html2canvas";
+export const getThumbnailImage = async (dom, options = {}) => {
+  try {
+    const canvas = await html2canvas(dom, options);
+    return canvas.toDataURL();
+  } catch (err) {
+    console.log(err);
+    return null;
+  }
+};

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -24,6 +24,7 @@ import ImageText from "../Elements/ImageText/ImageText";
 import ChipText from "../Elements/ChipText/ChipText";
 import DrawerMenu from "../Elements/DrawerMenu/DrawerMenu";
 import AppHeader from "../Elements/AppHeader/AppHeader";
+import PageSettings from "../Elements/PageSettings/PageSettings";
 import { jsx as _jsx } from "react/jsx-runtime";
 const alignment = ["alignLeft", "alignRight", "alignCenter"];
 const list_types = ["orderedList", "unorderedList"];
@@ -358,6 +359,10 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx(AppHeader, {
         ...props
       });
+    case "page-settings":
+      return /*#__PURE__*/_jsx(PageSettings, {
+        ...props
+      });
     default:
       return /*#__PURE__*/_jsx("div", {
         ...element.attr,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -34,6 +34,7 @@
     "slate-history": "^0.93.0",
     "slate-react": "^0.98.3",
     "styled-components": "^5.3.11",
+    "use-debounce": "^10.0.0",
     "web-vitals": "^2.1.4",
     "y-websocket": "^1.5.0",
     "yjs": "^13.6.8"