@flozy/editor 1.2.2 → 1.2.3

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,16 +77,40 @@ 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;
@@ -118,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 || {})
@@ -212,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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "1.2.2",
+  "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"