@flozy/editor 11.2.1 → 11.2.2

package/dist/Editor/plugins/withHTML.js

@@ -3,7 +3,7 @@ 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", "hr"];
+const NON_TEXT_TAGS = ["ol", "ul", "img", "table", "video", "a", "button", "GOOGLE-SHEETS-HTML-ORIGIN"];
 const ALLOWED_TEXT_NODES = ["paragraph", "title", "headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix"];
 const parseCopiedHTML = html => {
   const parsed = new DOMParser().parseFromString(html, "text/html");
@@ -56,7 +56,7 @@ const loopChildren = (children = [], defaultInsert) => {
   }
   return defaultInsert;
 };
-export const getCurrentElement = editor => {
+const getCurrentElement = editor => {
   try {
     if (editor.selection) {
       return Node.parent(editor, editor?.selection?.anchor?.path);
@@ -151,52 +151,6 @@ const getFocusedNode = (editor, nodeType = "") => {
   }
 };
 const voidTypes = ["image", "page-settings"];
-
-// 🧠 Split the fragment into first text and rest
-const splitFragment = fragment => {
-  let found = false;
-  let firstText = "";
-  const rest = [];
-  for (const node of fragment) {
-    if (found) {
-      rest.push(node);
-      continue;
-    }
-    const textNodeEntry = [...Node.texts(node)].find(([n]) => n.text.trim().length > 0);
-    if (textNodeEntry) {
-      const [textNode, path] = textNodeEntry;
-      firstText = textNode.text;
-
-      // Remove the first text node from the node
-      const cloned = JSON.parse(JSON.stringify(node));
-      let pointer = cloned;
-      for (let i = 0; i < path.length - 1; i++) {
-        pointer = pointer.children[path[i]];
-      }
-
-      // Remove the first text portion or replace with remaining text
-      const index = path[path.length - 1];
-      // const original = pointer.children[index];
-      // const remainingText = original.text.slice(firstText.length);
-
-      // if (remainingText) {
-      //   pointer.children[index] = { ...original, text: remainingText };
-      // } else {
-      //   pointer.children.splice(index, 1);
-      // }
-
-      pointer.children.splice(index, 1);
-      if (cloned.children.length > 0) {
-        rest.push(cloned);
-      }
-      found = true;
-    } else {
-      rest.push(node); // fallback
-    }
-  }
-
-  return [firstText, rest];
-};
 const withHtml = editor => {
   const {
     insertData,
@@ -324,14 +278,7 @@ const withHtml = editor => {
         const firstNodePasted = formattedFragment[0];
         const isAllowedTextNode = ALLOWED_TEXT_NODES.includes(firstNodePasted?.type || "");
         if (isAllowedTextNode) {
-          const [firstText, remainingFragment] = splitFragment(fragment);
-          Transforms.insertFragment(editor, [{
-            text: firstText
-          }]);
-          insertAtNextNode(editor, remainingFragment);
-          if (editor.getTitleSaveData) {
-            editor.getTitleSaveData(firstText);
-          }
+          Transforms.insertFragment(editor, formattedFragment);
         } else {
           insertAtNextNode(editor, formattedFragment);
         }

package/dist/Editor/plugins/withTable.js

@@ -1,6 +1,6 @@
 import { Editor, Range, Point, Element, Transforms, Node } from "slate";
 import { TableUtil, createTableCell } from "../utils/table";
-const NON_DELETABLE_BLOCKS = ["table-cell", "carousel-item", "page-settings"];
+const NON_DELETABLE_BLOCKS = ["table-cell", "carousel-item"];
 const withTable = editor => {
   const {
     deleteBackward,

package/dist/Editor/service/fileupload.js

@@ -1,4 +1,3 @@
-import { Transforms } from "slate";
 export const uploadFile = async (formData, props) => {
   try {
     const response = await fetch(`${props.API_HOST}/general/notes/file_upload`, {
@@ -14,73 +13,4 @@ export const uploadFile = async (formData, props) => {
     console.log(err);
     return err;
   }
-};
-export const formatFileSize = bytes => {
-  const MB = bytes / (1024 * 1024);
-  if (MB < 100) {
-    return `${MB.toFixed(2)} MB`;
-  } else {
-    const GB = MB / 1024;
-    return `${GB.toFixed(2)} GB`;
-  }
-};
-export const insertUploadStatusNodeForAttachment = (editor, file) => {
-  const uploadId = `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-  const node = {
-    type: getFileTypeFromName(file?.name),
-    url: "",
-    fileName: file?.name,
-    uploadId,
-    file: file,
-    isUploading: true,
-    isUpload: true,
-    fileSize: file?.size,
-    children: [{
-      text: ""
-    }]
-  };
-  Transforms.insertNodes(editor, node);
-  return uploadId;
-};
-export const getFileTypeFromName = fileName => {
-  const extension = fileName.split(".").pop()?.toLowerCase();
-  if (!extension) return "unknown";
-  switch (extension) {
-    case "pdf":
-      return "pdf";
-    case "doc":
-    case "docx":
-    case "rtf":
-    case "txt":
-    case "pages":
-      return "doc";
-    case "xls":
-    case "xlsx":
-    case "csv":
-    case "numbers":
-      return "xls";
-    case "ppt":
-    case "pptx":
-    case "key":
-      return "ppt";
-    default:
-      return "docs";
-  }
-};
-export const buildUpdateData = (data, url) => {
-  if (typeof data === "string") {
-    return {
-      url: data
-    };
-  }
-  if (typeof data?.url?.embedURL === "string") {
-    return {
-      url: data.url.embedURL
-    };
-  }
-  const resolvedUrl = data?.url && data.url !== "none" ? data.url : typeof url === "string" ? url : "";
-  return {
-    ...data,
-    url: resolvedUrl
-  };
 };

package/dist/Editor/theme/ThemeList.js

@@ -1,58 +1,181 @@
-import { Box, MenuItem, Select } from "@mui/material";
-import { defaultTheme } from ".";
-import { useEditorTheme } from "../hooks/useEditorTheme";
-import { useEffect, useState } from "react";
+import { MenuItem, Select, useTheme } from "@mui/material";
+import { fontOptions } from "../utils/font";
+import { toolbarGroups } from "../Toolbar/toolbarGroups";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-function ThemeList({
-  editor,
-  services = () => {}
-}) {
-  const [themes, setThemes] = useState([]);
-  const [loading, setLoading] = useState(false);
-  console.log("loading", loading);
-  const getThemesList = async () => {
-    setLoading(true);
-    try {
-      const result = await services("getThemes", {});
-      setThemes(result?.data || []);
-    } catch (err) {
-      console.log(err);
-    }
-    setLoading(false);
-  };
+const themes = [{
+  label: "Theme 1",
+  colors: ["#c90c1f", "#ff5d05"]
+}, {
+  label: "Theme 2",
+  colors: ["#4c0be3", "#43f7ee"]
+}, {
+  label: "Theme 3",
+  colors: ["#22f20f", "#fff705"]
+}];
+const allTools = toolbarGroups.flat();
+function ThemeList(props) {
   const {
-    updateTheme
-  } = useEditorTheme();
-  useEffect(() => {
-    getThemesList();
-  }, []);
-  const handleThemeChange = e => {
-    const {
-      value
-    } = e.target;
-    const selectedTheme = themes.find(t => t.id === value) || defaultTheme();
-    updateTheme(selectedTheme, "THEME_CHANGE");
+    selectedTheme,
+    setSelectedTheme
+  } = props;
+  const fontWeight = allTools.find(f => f.format === "fontWeight");
+  const fontStyles = [{
+    text: "Bold",
+    value: "bold",
+    styleField: "fontWeight"
+  }, {
+    text: "Italic",
+    value: "italic",
+    styleField: "fontStyle"
+  }
+  // {
+  //   text: "Underline",
+  //   value: "underline",
+  //   styleField: "textDecoration",
+  // },
+  // {
+  //   text: "Line through",
+  //   value: "line-through",
+  //   styleField: "textDecoration",
+  // },
+  ];
+
+  const theme = useTheme();
+  const colorVars = theme?.vars?.colors || {};
+  const handleTypographyTheme = (key, value, elementType) => {
+    setSelectedTheme(prev => {
+      const newValue = {
+        ...prev,
+        typography: {
+          ...(prev.typography || {}),
+          [elementType]: {
+            ...(prev?.typography?.[elementType] || {}),
+            [key]: value
+          }
+        }
+      };
+      if (!value) {
+        delete newValue?.typography?.[elementType]?.[key];
+      }
+      return newValue;
+    });
   };
-  return /*#__PURE__*/_jsx(Box, {
-    sx: {
-      padding: "10px",
-      background: "#efefef",
-      borderRadius: "6px"
-    },
-    children: /*#__PURE__*/_jsxs(Select, {
-      onChange: handleThemeChange,
-      defaultValue: 0,
-      children: [/*#__PURE__*/_jsx(MenuItem, {
-        value: 0,
-        children: "Default Theme"
-      }), themes.map((theme, i) => {
-        return /*#__PURE__*/_jsx(MenuItem, {
-          value: theme?.id,
-          children: theme?.name
-        }, i);
+  return /*#__PURE__*/_jsxs("div", {
+    children: [themes.map((theme, i) => {
+      return /*#__PURE__*/_jsxs("button", {
+        style: {
+          margin: "10px"
+        },
+        onClick: () => setSelectedTheme(prev => ({
+          ...prev,
+          colors: theme.colors
+        })),
+        children: [theme.label, /*#__PURE__*/_jsx("div", {
+          children: theme.colors.map((c, j) => {
+            return /*#__PURE__*/_jsx("div", {
+              style: {
+                width: "20px",
+                height: "20px",
+                background: c,
+                margin: "10px"
+              }
+            }, j);
+          })
+        })]
+      }, i);
+    }), /*#__PURE__*/_jsxs("div", {
+      children: ["Heading 1 Font Family", /*#__PURE__*/_jsx(Select
+      // value={""}
+      , {
+        label: "Font Family",
+        onChange: e => {
+          handleTypographyTheme("fontFamily", e.target.value, "h1");
+        },
+        children: fontOptions.map((font, i) => {
+          const {
+            text,
+            value
+          } = font;
+          return /*#__PURE__*/_jsx(MenuItem, {
+            value: value,
+            children: text
+          }, i);
+        })
+      }), "Font Weight", /*#__PURE__*/_jsx(Select
+      // value={""}
+      , {
+        label: "Font Weight",
+        onChange: e => {
+          handleTypographyTheme("fontWeight", e.target.value, "h1");
+        },
+        children: fontWeight.options.map((option, i) => {
+          const {
+            text,
+            value
+          } = option;
+          return /*#__PURE__*/_jsx(MenuItem, {
+            value: value,
+            children: text
+          }, i);
+        })
+      }), /*#__PURE__*/_jsx("input", {
+        type: "number",
+        placeholder: "font size",
+        onChange: e => {
+          handleTypographyTheme("fontSize", e.target.value, "h1");
+        }
+      }), /*#__PURE__*/_jsxs("div", {
+        children: ["Text", /*#__PURE__*/_jsx("br", {}), "Theme color", Object.values(colorVars).map((colorVar, i) => {
+          return /*#__PURE__*/_jsx("button", {
+            style: {
+              width: "20px",
+              height: "20px",
+              background: colorVar,
+              margin: "10px",
+              outline: "none"
+            },
+            onClick: () => handleTypographyTheme("color", colorVar, "h1")
+          }, i);
+        }), "normal color", /*#__PURE__*/_jsx("button", {
+          style: {
+            width: "20px",
+            height: "20px",
+            background: "#ff00e1",
+            margin: "10px",
+            outline: "none"
+          },
+          onClick: () => handleTypographyTheme("color", "#ff00e1", "h1")
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        children: ["Font styles", fontStyles.map((option, i) => {
+          const styles = selectedTheme?.typography?.h1 || {};
+          const {
+            text,
+            value,
+            styleField
+          } = option;
+          return /*#__PURE__*/_jsxs("button", {
+            onClick: () => {
+              handleTypographyTheme(styleField, styles[styleField] === value ? null : value, "h1");
+            },
+            children: [text, " ", styles[styleField] === value]
+          }, i);
+        })]
+      }), /*#__PURE__*/_jsx("input", {
+        type: "number",
+        placeholder: "Margin text Spacing",
+        onChange: e => {
+          handleTypographyTheme("letterSpacing", e.target.value, "h1");
+        }
+      }), /*#__PURE__*/_jsx("input", {
+        type: "number",
+        placeholder: "Line spacing",
+        onChange: e => {
+          handleTypographyTheme("lineHeight", e.target.value, "h1");
+        }
       })]
-    })
+    })]
   });
 }
 export default ThemeList;