@flozy/editor 5.8.8 → 5.9.0

package/dist/Editor/helper/deserialize/index.js

@@ -90,9 +90,18 @@ const ELEMENT_TAGS = {
     type: "image",
     url: el.getAttribute("src")
   }),
-  LI: () => ({
-    type: "list-item"
-  }),
+  LI: el => {
+    const checkListItem = el.querySelector(".check-list-item");
+    if (checkListItem) {
+      return {
+        type: "check-list-item",
+        checked: checkListItem?.dataset?.checked === "true"
+      };
+    }
+    return {
+      type: "list-item"
+    };
+  },
   UL: () => ({
     type: "unorderedList"
   }),
@@ -109,7 +118,7 @@ const ELEMENT_TAGS = {
   "GOOGLE-SHEETS-HTML-ORIGIN": paragraphType,
   TABLE: (el, children = []) => {
     try {
-      const bodyChild = children || [];
+      const bodyChild = (children || [])?.filter(f => f !== null);
       const firstRowChildren = bodyChild[0]?.children || [];
       return {
         type: "table",
@@ -129,7 +138,11 @@ const ELEMENT_TAGS = {
   }),
   TD: handleTableCell,
   COLGROUP: paragraphType,
-  COL: paragraphType
+  COL: paragraphType,
+  HR: () => ({
+    type: "divider",
+    borderColor: "#CCC"
+  })
 };
 
 // COMPAT: `B` is omitted here because Google Docs uses `<b>` in weird ways.

package/dist/Editor/helper/index.js

@@ -337,14 +337,14 @@ export const isCarouselSelected = editor => {
       return false;
     }
     const [nodeEntry] = Editor.nodes(editor, {
-      match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === 'carousel'
+      match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "carousel"
     });
     if (!nodeEntry) {
       return false;
     }
     const [node] = nodeEntry;
     const carouselDom = ReactEditor.toDOMNode(editor, node);
-    const isEdit = carouselDom.classList.contains('carousel_slider_edit');
+    const isEdit = carouselDom.classList.contains("carousel_slider_edit");
     return !isEdit;
   } catch (err) {
     console.log(err);

package/dist/Editor/helper/markdown.js

@@ -0,0 +1,45 @@
+import MarkdownIt from "markdown-it";
+const md = new MarkdownIt();
+function markdownItCheckbox(md) {
+  md.core.ruler.push("checkbox_lists", function (state) {
+    const tokens = state.tokens;
+    for (let i = 0; i < tokens.length; i++) {
+      const token = tokens[i];
+      if (token.type === "inline" && token.content) {
+        const taskListRegex = /^\s*(-\s*)?\[\s*([xX\s]?)\s*\]\s+(.*)/;
+        const match = taskListRegex.exec(token.content);
+        if (match) {
+          token.attrJoin("class", "check-list-item");
+          const isChecked = match[2].toLowerCase() === "x"; // Check if checked
+          const content = match[3].trim(); // Extract text after checkbox
+
+          // Create new tokens for the task list item
+          const listItemOpenToken = new state.Token("html_inline", "", 0);
+          listItemOpenToken.content = `<li class="check-list-item" data-checked="${isChecked}">`;
+          const checkboxToken = new state.Token("html_inline", "", 0);
+          checkboxToken.content = `<span class='check-list-item' data-checked="${isChecked}" />`;
+          const textToken = new state.Token("text", "", 0);
+          textToken.content = content;
+          const listItemCloseToken = new state.Token("html_inline", "", 0);
+          listItemCloseToken.content = `</li>`;
+
+          // Replace the original token with the new tokens
+          tokens.splice(i, 1, checkboxToken, textToken);
+        }
+      }
+    }
+  });
+}
+
+// init plugin
+md.use(markdownItCheckbox);
+function convertMDToHTML(data) {
+  try {
+    const html = md.render(data);
+    return html;
+  } catch (err) {
+    console.log(err);
+    return data;
+  }
+}
+export default convertMDToHTML;

package/dist/Editor/hooks/useEditorScroll.js

@@ -5,7 +5,7 @@ function useEditorScroll(editorWrapper = {
   useEffect(() => {
     const handleScroll = () => {
       if (editorWrapper.current) {
-        callback();
+        callback("scroll");
       }
     };
     const currentEditorWrapper = editorWrapper.current;

package/dist/Editor/plugins/withHTML.js

@@ -1,6 +1,7 @@
 import { Transforms, Editor, Element, Node, Path } from "slate";
 import deserialize from "../helper/deserialize";
 import { decodeAndParseBase64 } from "../utils/helper";
+import convertMDToHTML from "../helper/markdown";
 const avoidDefaultInsert = ["table", "grid"];
 const NON_TEXT_TAGS = ["ol", "ul", "img", "table", "video", "a", "button", "GOOGLE-SHEETS-HTML-ORIGIN"];
 const ALLOWED_TEXT_NODES = ["paragraph", "title", "headingOne", "headingTwo", "headingThree"];
@@ -274,9 +275,15 @@ const withHtml = editor => {
       Transforms.insertFragment(editor, formattedFragment);
       return;
     } else {
-      insertData(data);
+      const html = convertMDToHTML(data.getData("text/plain"));
+      let parsed = new DOMParser().parseFromString(html, "text/html");
+      parsed = parseCopiedHTML(html);
+      const fragment = deserialize(parsed.body);
+      Transforms.insertFragment(editor, fragment);
+      // insertData(data);
     }
   };
+
   return editor;
 };
 export default withHtml;

package/dist/Editor/plugins/withLayout.js

@@ -39,7 +39,7 @@ const withLayout = editor => {
           const title = {
             type: "title",
             children: [{
-              text: "Untitled"
+              text: ""
             }]
           };
           Transforms.insertNodes(editor, title, {

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -301,6 +301,30 @@ export const getBlock = props => {
         placeholder: "Heading 3",
         children: children
       });
+    case "headingFour":
+      return /*#__PURE__*/_jsx("h4", {
+        ...attributes,
+        ...element.attr,
+        className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
+        placeholder: "Heading 4",
+        children: children
+      });
+    case "headingFive":
+      return /*#__PURE__*/_jsx("h5", {
+        ...attributes,
+        ...element.attr,
+        className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
+        placeholder: "Heading 5",
+        children: children
+      });
+    case "headingSix":
+      return /*#__PURE__*/_jsx("h6", {
+        ...attributes,
+        ...element.attr,
+        className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
+        placeholder: "Heading 6",
+        children: children
+      });
     case "blockquote":
       return /*#__PURE__*/_jsx("blockquote", {
         ...attributes,
@@ -588,7 +612,19 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx(ColumnView, {
         ...props
       });
+    case "code":
+      return /*#__PURE__*/_jsx("code", {
+        ...attributes,
+        ...element.attr,
+        className: "markcode",
+        children: children
+      });
     default:
+      // return (
+      //   <span {...attributes} {...element.attr}>
+      //     {children}
+      //   </span>
+      // );
       return /*#__PURE__*/_jsx(SimpleText, {
         ...props,
         isEmpty: isEmpty

package/dist/Editor/utils/button.js

@@ -20,10 +20,10 @@ export const insertButton = editor => {
       bottomRight: 30
     },
     bannerSpacing: {
-      left: 16,
-      top: 8,
-      right: 16,
-      bottom: 8
+      left: 24,
+      top: 10,
+      right: 24,
+      bottom: 10
     },
     ...(windowVar.lastButtonProps || {})
   };

package/dist/Editor/utils/draftToSlate.js

@@ -82,7 +82,8 @@ const splitInlineStyleRanges = (text, inlineStyleRanges, data) => {
 };
 export const draftToSlate = props => {
   const {
-    data
+    data,
+    needLayout
   } = props;
   if (data?.blocks && data?.blocks?.length > 0) {
     const converted = data?.blocks?.reduce((a, b) => {
@@ -104,7 +105,7 @@ export const draftToSlate = props => {
     return data;
   } else {
     return [{
-      type: "paragraph",
+      type: needLayout ? "title" : "paragraph",
       children: [{
         text: ""
       }]

package/dist/Editor/utils/helper.js

@@ -625,6 +625,10 @@ export const isRestrictedNode = (event, editor) => {
     return isNodeRestricted;
   }
 };
+export function capitalizeFirstLetter(str) {
+  if (!str) return str;
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
 export const insertLineBreakAtEndOfPath = (editor, path) => {
   try {
     const [node, nodePath] = Editor.node(editor, path); // Get the node at the specified path
@@ -643,6 +647,13 @@ export const insertLineBreakAtEndOfPath = (editor, path) => {
     console.log(err);
   }
 };
+export function isHavingSelection(editor) {
+  try {
+    return editor?.selection && !Range.isCollapsed(editor.selection);
+  } catch (err) {
+    console.log(err);
+  }
+}
 const omitNodes = ["site-settings", "page-settings"];
 export function getInitialValue(value = [], readOnly) {
   if (readOnly === "readonly" && value?.length) {
@@ -673,20 +684,17 @@ export function getInitialValue(value = [], readOnly) {
   }
   return value;
 }
-export function capitalizeFirstLetter(str) {
-  if (!str) return str;
-  return str.charAt(0).toUpperCase() + str.slice(1);
-}
-export function isHavingSelection(editor) {
-  try {
-    return editor?.selection && !Range.isCollapsed(editor.selection);
-  } catch (err) {
-    console.log(err);
-  }
-}
 export function getSelectedCls(defaultCls = "", selected, selectedClsName = "selected") {
   return `${defaultCls} ${selected ? selectedClsName : ""}`;
 }
+export function handleNegativeInteger(val) {
+  return val < 0 ? 0 : val;
+}
+export const containsSurrogatePair = text => {
+  // Match surrogate pairs (high and low surrogate)
+  const surrogatePairRegex = /[\uD800-\uDBFF][\uDC00-\uDFFF]/;
+  return surrogatePairRegex.test(text);
+};
 export const getNodeWithType = (editor, nodeType = "", otherOptions) => {
   try {
     const options = {
@@ -700,11 +708,6 @@ export const getNodeWithType = (editor, nodeType = "", otherOptions) => {
     return [];
   }
 };
-export const containsSurrogatePair = text => {
-  // Match surrogate pairs (high and low surrogate)
-  const surrogatePairRegex = /[\uD800-\uDBFF][\uDC00-\uDFFF]/;
-  return surrogatePairRegex.test(text);
-};
 export const getSlateDom = (editor, range) => {
   try {
     const slateDom = ReactEditor.toDOMRange(editor, range);
@@ -753,7 +756,4 @@ export const viewSlateSelection = () => {
 export const hideSlateSelection = () => {
   const root = document.documentElement;
   root.style.setProperty("--slate-highlight-bg", "none");
-};
-export function handleNegativeInteger(val) {
-  return val < 0 ? 0 : val;
-}
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "5.8.8",
+  "version": "5.9.0",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -30,6 +30,7 @@
     "husky": "^8.0.3",
     "interweave": "^13.1.0",
     "lint-staged": "^13.2.3",
+    "markdown-it": "^14.1.0",
     "prettier": "^3.0.1",
     "react-best-gradient-color-picker": "^2.2.23",
     "react-datepicker": "^4.18.0",
@@ -68,7 +69,7 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "NODE_OPTIONS='--max_old_space_size=4096' storybook build",
     "publish:npm": "rm -rf dist && mkdir dist &&  babel src/components -d dist --copy-files",
-    "publish:local": "rm -rf /Users/agmac30/Documents/CODE_BASE/flozy/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agmac30/Documents/CODE_BASE/flozy/client/node_modules/@flozy/editor/dist --copy-files"
+    "publish:local": "rm -rf /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist --copy-files"
   },
   "eslintConfig": {
     "extends": [