@flozy/editor 5.7.8 → 5.7.9

package/dist/Editor/Editor.css

@@ -1329,3 +1329,12 @@ blockquote {
   background: linear-gradient(112.61deg, #2C63ED 19.3%, #8360FD 88.14%) !important;
   text-transform: math-auto !important;
 }
+
+code.markcode {
+  border-radius: 4px;
+  padding: 6px 8px;
+  margin: 8px 0px;
+  display: block;
+  background-color: #f3f3f3;
+  font-family: 'Source Code Pro' !important;
+}

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/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/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/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,6 +612,13 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx(ColumnView, {
         ...props
       });
+    case "code":
+      return /*#__PURE__*/_jsx("code", {
+        ...attributes,
+        ...element.attr,
+        className: "markcode",
+        children: children
+      });
     default:
       return /*#__PURE__*/_jsx(SimpleText, {
         ...props,

package/package.json

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