@flozy/editor 10.9.1 → 10.9.3

package/dist/Editor/Elements/Button/EditorButton.js

@@ -61,8 +61,8 @@ const EditorButton = props => {
     fontFamily,
     textColorHover,
     bgColorHover,
-    borderColorHover,
     // buttonIcon,
+    borderColorHover,
     iconPosition = "start",
     borderStyle,
     borderWidth,

package/dist/Editor/Elements/FreeGrid/styles.js

@@ -312,6 +312,12 @@ const useFreeGridStyles = ({
             "& .toolbtn.remove": {
               display: "none"
             }
+          },
+          "& .edt-headings": {
+            margin: "0px"
+          },
+          "& .edt-paragraphs": {
+            margin: "0px"
           }
         },
         "& .fgi_type_embedScript": {

package/dist/Editor/Elements/Table/TableCell.js

@@ -13,7 +13,7 @@ import { Droppable } from "./Droppable";
 import { useDndContext } from "@dnd-kit/core";
 import { getNodeWithType } from "../../utils/helper";
 import { ResizeIcon } from "../../common/iconListV2";
-import { isEmptyTextNode } from "../../helper";
+import { getTextColor, isEmptyTextNode } from "../../helper";
 import SimpleText from "../SimpleText";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -443,8 +443,10 @@ const TableCell = props => {
   };
   const showRowDragBtn = (showRowDrag || isRowDragging) && containerEle?.scrollLeft <= 0;
   const TableResizer = isMobile && hoverCol === column ? MobileResizer : Resizer;
+  const cellTextColor = entireTextColor || rowProps?.textColor || parentProps?.textColor;
+  const textStyles = cellTextColor ? getTextColor(cellTextColor) : "inherit";
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs("td", {
+    children: [/*#__PURE__*/_jsxs(Box, {
       ...element.attr,
       ...attributes,
       className: `editor-table-cell ${hasSelected ? "selection" : ""}`,
@@ -455,14 +457,19 @@ const TableCell = props => {
         fontFamily: entireFontFamily || "inherit",
         fontWeight: entireFontWeight || "inherit",
         fontSize: entireTextSize || "inherit",
-        color: entireTextColor || "inherit",
         cursor: "text",
         verticalAlign: "top",
         padding: "0px",
         ...(sizeProps || {})
       },
+      sx: {
+        '& span[data-slate-string="true"]': {
+          ...textStyles
+        }
+      },
       ...tbProps,
       "data-cell": path.toString(),
+      component: "td",
       children: [isFirstRow && currentDraggingType === "col" ? /*#__PURE__*/_jsx(Droppable, {
         ...dndProps,
         dragType: currentDraggingType,

package/dist/Editor/Elements/Title/title.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
-import { Editor, Text } from "slate";
+import { Text } from "slate";
 import { useSlate } from "slate-react";
-import { getNodeText } from "../../utils/helper";
+import { getNodeText, getNodeWithType } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 const isEmptyTextNode = node => {
   if (Text.isText(node)) {
@@ -37,9 +37,8 @@ const useDetectExitFromTitle = (titleNode, onSaveTitle) => {
     if (!editor.selection) return;
 
     // Get the current node where the cursor is
-    const [nodeEntry] = Editor.nodes(editor, {
-      at: editor.selection,
-      match: n => n.type === "title"
+    const [nodeEntry] = getNodeWithType(editor, "title", {
+      at: editor.selection
     });
     if (nodeEntry) {
       setWasInsideTitle(true); // User was inside the title

package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js

@@ -65,7 +65,9 @@ function SelectFontSize(props) {
     }
   };
   useEffect(() => {
-    setSizeValue(getSizeVal());
+    if (value) {
+      setSizeValue(getSizeVal());
+    }
   }, [value]);
   const onChange = e => {
     clearTimeout(timerRef.current);

package/dist/Editor/Toolbar/PopupTool/index.js

@@ -143,13 +143,13 @@ const PopupTool = props => {
       sx: classes.popupWrapper,
       placement: "top-start",
       style: {
-        boxShadow: 'unset'
+        boxShadow: "unset"
       } //this is for overriding global shadow from popupwrapper used in other places
       ,
       children: /*#__PURE__*/_jsx(Paper, {
         sx: {
           border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
-          boxShadow: '1px 2px 12px 0px #0000001F'
+          boxShadow: "1px 2px 12px 0px #0000001F"
         },
         children: /*#__PURE__*/_jsx(MiniTextFormat, {
           editor: editor,

package/dist/Editor/common/StyleBuilder/formStyle.js

@@ -124,19 +124,25 @@ export const formStyle = [{
       key: "alignment",
       type: "alignment"
     }]
-  }, {
-    tab: "Background",
-    value: "backgroundImage",
-    fields: [{
-      label: "URL",
-      key: "backgroundImage",
-      type: "text"
-    }, {
-      label: "Background Image",
-      key: "backgroundImage",
-      type: "backgroundImage"
-    }]
-  }, {
+  },
+  // Commented out because the background functionality for forms has not been implemented yet
+  // {
+  //   tab: "Background",
+  //   value: "backgroundImage",
+  //   fields: [
+  //     {
+  //       label: "URL",
+  //       key: "backgroundImage",
+  //       type: "text",
+  //     },
+  //     {
+  //       label: "Background Image",
+  //       key: "backgroundImage",
+  //       type: "backgroundImage",
+  //     },
+  //   ],
+  // },
+  {
     tab: "Add to Boards",
     value: "metadatamapping",
     fields: [{

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -435,12 +435,12 @@ export const getBlock = props => {
   const commonHeadingProps = () => ({
     ...attributes,
     ...element.attr,
-    className: `edt-headings content-editable ${isEmpty ? "empty" : ""} theme-element`
+    className: `edt-headings content-editable ${isEmpty ? "empty" : ""} theme-element disablePointerEvent`
   });
   const commonParaProps = paraType => ({
     ...attributes,
     ...element.attr,
-    className: `edt-paragraphs content-editable ${isEmpty ? "empty" : ""} theme-element ${paraType}`
+    className: `edt-paragraphs content-editable ${isEmpty ? "empty" : ""} theme-element disablePointerEvent ${paraType}`
   });
   const breakpoint = getDevice(window.innerWidth);
   const lineH = element?.children[0]?.lineHeight;
@@ -448,49 +448,37 @@ export const getBlock = props => {
   switch (element.type) {
     case "headingOne":
       return /*#__PURE__*/_jsx("h1", {
-        ...attributes,
-        ...element.attr,
-        className: `edt-headings content-editable ${isEmpty ? "empty" : ""} disablePointerEvent`,
+        ...commonHeadingProps(),
         placeholder: translation("Heading 1"),
         children: children
       });
     case "headingTwo":
       return /*#__PURE__*/_jsx("h2", {
-        ...attributes,
-        ...element.attr,
-        className: `edt-headings content-editable ${isEmpty ? "empty" : ""} disablePointerEvent`,
+        ...commonHeadingProps(),
         placeholder: translation("Heading 2"),
         children: children
       });
     case "headingThree":
       return /*#__PURE__*/_jsx("h3", {
-        ...attributes,
-        ...element.attr,
-        className: `edt-headings content-editable ${isEmpty ? "empty" : ""} disablePointerEvent`,
+        ...commonHeadingProps(),
         placeholder: translation("Heading 3"),
         children: children
       });
     case "headingFour":
       return /*#__PURE__*/_jsx("h4", {
-        ...attributes,
-        ...element.attr,
-        className: `edt-headings content-editable ${isEmpty ? "empty" : ""} disablePointerEvent`,
+        ...commonHeadingProps(),
         placeholder: translation("Heading 4"),
         children: children
       });
     case "headingFive":
       return /*#__PURE__*/_jsx("h5", {
-        ...attributes,
-        ...element.attr,
-        className: `edt-headings content-editable ${isEmpty ? "empty" : ""} disablePointerEvent`,
+        ...commonHeadingProps(),
         placeholder: translation("Heading 5"),
         children: children
       });
     case "headingSix":
       return /*#__PURE__*/_jsx("h6", {
-        ...attributes,
-        ...element.attr,
-        className: `edt-headings content-editable ${isEmpty ? "empty" : ""} disablePointerEvent`,
+        ...commonHeadingProps(),
         placeholder: translation("Heading 6"),
         children: children
       });

package/dist/Editor/utils/helper.js

@@ -923,48 +923,6 @@ export const getCurrentNodeText = editor => {
     console.log("Error:", error);
   }
 };
-function convertColorToRgb(color) {
-  if (color?.startsWith("#")) {
-    // HEX to RGB
-    let hex = color.replace("#", "");
-    let r, g, b;
-    if (hex.length === 3) {
-      hex = hex.split("").map(x => x + x).join("");
-    }
-    if (hex.length === 6) {
-      [r, g, b] = [hex.substring(0, 2), hex.substring(2, 4), hex.substring(4, 6)].map(val => parseInt(val, 16));
-      return `rgb(${r}, ${g}, ${b})`;
-    }
-  } else {
-    return color;
-  }
-}
-export const getSelectedColor = (selectedColor, theme, hideThemeColors) => {
-  const colorVars = hideThemeColors ? null : theme?.vars?.colors;
-  let selectedValue = selectedColor;
-  if (colorVars) {
-    const convertedColor = convertColorToRgb(selectedColor);
-    Object.entries(theme.colors).forEach(([key, value]) => {
-      const convertedThemeColor = convertColorToRgb(value);
-      if (convertedThemeColor === convertedColor) {
-        selectedValue = colorVars[key];
-      }
-    });
-  }
-  return selectedValue;
-};
-const themeTextFormats = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree"];
-export const getSelectedElementColor = (editor, format, theme) => {
-  const [isThemeText] = Editor.nodes(editor, {
-    at: editor.selection,
-    match: n => themeTextFormats.includes(n?.type)
-  });
-  if (!isThemeText) {
-    return activeMark(editor, "color") || "#000000";
-  }
-  const color = getSelectedElementStyle(format, editor, format);
-  return getSelectedColor(color, theme);
-};
 export const isHavingColor = color => {
   if (!color) {
     return false;
@@ -1059,4 +1017,46 @@ export const handleCopy = (event, editor) => {
   event.clipboardData?.setData("text/plain", text);
   event.clipboardData?.setData("application/x-slate-fragment", encodedFragment);
 };
-export const ALLOWED_TEXT_NODES = ["paragraph", "title", "headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "blockquote"];
+export const ALLOWED_TEXT_NODES = ["paragraph", "title", "headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "blockquote"];
+function convertColorToRgb(color) {
+  if (color?.startsWith("#")) {
+    // HEX to RGB
+    let hex = color.replace("#", "");
+    let r, g, b;
+    if (hex.length === 3) {
+      hex = hex.split("").map(x => x + x).join("");
+    }
+    if (hex.length === 6) {
+      [r, g, b] = [hex.substring(0, 2), hex.substring(2, 4), hex.substring(4, 6)].map(val => parseInt(val, 16));
+      return `rgb(${r}, ${g}, ${b})`;
+    }
+  } else {
+    return color;
+  }
+}
+export const getSelectedColor = (selectedColor, theme, hideThemeColors) => {
+  const colorVars = hideThemeColors ? null : theme?.vars?.colors;
+  let selectedValue = selectedColor;
+  if (colorVars) {
+    const convertedColor = convertColorToRgb(selectedColor);
+    Object.entries(theme.colors).forEach(([key, value]) => {
+      const convertedThemeColor = convertColorToRgb(value);
+      if (convertedThemeColor === convertedColor) {
+        selectedValue = colorVars[key];
+      }
+    });
+  }
+  return selectedValue;
+};
+const themeTextFormats = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree"];
+export const getSelectedElementColor = (editor, format, theme) => {
+  const [isThemeText] = Editor.nodes(editor, {
+    at: editor.selection,
+    match: n => themeTextFormats.includes(n?.type)
+  });
+  if (!isThemeText) {
+    return activeMark(editor, "color") || "#000000";
+  }
+  const color = getSelectedElementStyle(format, editor, format);
+  return getSelectedColor(color, theme);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "10.9.1",
+  "version": "10.9.3",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"