@flozy/editor 9.5.2 → 9.5.4

package/dist/Editor/Elements/Color Picker/ColorPicker.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { ReactEditor } from "slate-react";
-import { IconButton, Tooltip, Box, Popover } from "@mui/material";
+import { IconButton, Tooltip, Box, Popover, useTheme } from "@mui/material";
 import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions";
 import ColorButtons from "./ColorButtons";
 import ColorPickerStyles from "./Styles";
@@ -8,6 +8,7 @@ import colorWheel from "./colorWheel.png";
 import "./ColorPicker.css";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import CustomColorPicker from "../../common/CustomColorPicker";
+import { getSelectedElementColor } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -25,7 +26,8 @@ const ColorPicker = props => {
     classes,
     forMiniTool,
     openColorTool,
-    closeColorTool
+    closeColorTool,
+    type
   } = props;
   const {
     theme
@@ -34,6 +36,7 @@ const ColorPicker = props => {
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
   const pickerStyles = ColorPickerStyles(theme);
+  const muiTheme = useTheme();
   const onOpen = e => {
     e.preventDefault();
     setAnchorEl(e.currentTarget);
@@ -58,7 +61,7 @@ const ColorPicker = props => {
     setAnchorEl(null);
     setSelection(null);
   };
-  const activeColor = activeMark(editor, format) || DEFAULT_COLOR[format];
+  const activeColor = type === "textColor" ? getSelectedElementColor(editor, format, muiTheme) : activeMark(editor, format) || DEFAULT_COLOR[format];
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [forMiniTool ? null : /*#__PURE__*/_jsx(Tooltip, {
       title: title,

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

@@ -316,6 +316,9 @@ const useFreeGridStyles = ({
         "& .fgi_type_text": {
           "& .edt-headings": {
             margin: "0px"
+          },
+          "& .edt-paragraphs": {
+            margin: "0px"
           }
         },
         /** element toolbar hide */

package/dist/Editor/Elements/Search/SearchAttachment.js

@@ -50,12 +50,18 @@ const SearchAttachment = props => {
         cursor: 'pointer',
         margin: '4px 0px',
         lineHeight: 1.43,
+        "&.MuiPaper-root": {
+          width: "fit-content !important"
+        },
         "&.MuiPaper-root.MuiPaper-rounded": {
           borderRadius: "7px !important",
           paddingTop: '0px !important'
         },
         "& *::selection": {
           background: "#000"
+        },
+        "&.MuiPaper-root > div": {
+          width: "unset !important"
         }
       },
       onClick: handleClick,
@@ -65,6 +71,9 @@ const SearchAttachment = props => {
             '& path': {
               stroke: theme?.palette?.text?.slashBrainText
             }
+          },
+          "&.MuiPaper-root > div": {
+            width: "unset !important"
           }
         },
         children: /*#__PURE__*/_jsx(Icon, {
@@ -80,6 +89,9 @@ const SearchAttachment = props => {
           color: "#2563EB",
           '&.MuiCardContent-root:last-child': {
             paddingBottom: '3px'
+          },
+          "&.MuiPaper-root > div": {
+            width: "unset !important"
           }
         },
         children: /*#__PURE__*/_jsxs(Typography, {

package/dist/Editor/Elements/Search/SearchList.js

@@ -78,9 +78,6 @@ const SearchAndDocList = ({
         InputProps: {
           startAdornment: /*#__PURE__*/_jsx(InputAdornment, {
             position: "start",
-            sx: {
-              pointerEvents: 'none'
-            },
             children: /*#__PURE__*/_jsx(SearchIcon, {})
           }),
           sx: {
@@ -92,6 +89,9 @@ const SearchAndDocList = ({
           borderRadius: "8px",
           fontSize: '14px',
           color: theme?.palette?.editor?.textColor,
+          '& input': {
+            pointerEvents: "none"
+          },
           "& .MuiOutlinedInput-root": {
             color: `${theme?.palette?.editor?.textColor} !important`,
             boxShadow: theme?.palette?.shadows?.shadow12,

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

@@ -12,7 +12,8 @@ function MiniColorPicker(props) {
     classes,
     id,
     editor,
-    customProps
+    customProps,
+    type
   } = props;
   const [openColorTool, setOpenColorTool] = useState(null);
   const {
@@ -38,7 +39,8 @@ function MiniColorPicker(props) {
       classes: classes,
       forMiniTool: true,
       openColorTool: openColorTool,
-      closeColorTool: () => setOpenColorTool(null)
+      closeColorTool: () => setOpenColorTool(null),
+      type: type
     }, id)]
   });
 }

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

@@ -1,4 +1,4 @@
-import { Fade, Grid, IconButton, Paper, Popper } from "@mui/material";
+import { Fade, Grid, IconButton, Paper, Popper, useTheme } from "@mui/material";
 import SelectTypography from "./SelectTypography";
 import SelectList from "./SelectList";
 import { toolbarGroups } from "../../toolbarGroups";
@@ -14,7 +14,7 @@ import MiniColorPicker from "./MiniColorPicker";
 import SelectAlignment from "./SelectAlignment";
 import SelectFontSize from "./SelectFontSize";
 import InfinityAITool from "./InfinityAITool";
-import { viewSlateSelection } from "../../../utils/helper";
+import { getSelectedElementColor, viewSlateSelection } from "../../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_COLOR = {
@@ -35,11 +35,12 @@ const MiniTextFormat = props => {
   const open = Boolean(anchorEl);
   const id = open ? "popup-edit-tool" : "";
   const [size] = useWindowResize();
+  const theme = useTheme();
   const removeFontStyles = ["superscript", "subscript"];
   const fontStyle = allTools.filter(f => f.type === "mark" && !removeFontStyles.includes(f.format));
   const link = allTools.find(f => f.format?.indexOf("link") >= 0);
   const fontAlign = allTools.filter(f => f.format?.indexOf("align") >= 0);
-  const activeColor = activeMark(editor, textColorFormat) || DEFAULT_COLOR[textColorFormat];
+  const activeColor = getSelectedElementColor(editor, textColorFormat, theme);
   const activeBg = activeMark(editor, textBgFormat) || DEFAULT_COLOR[textBgFormat];
   return /*#__PURE__*/_jsx(Grid, {
     container: true,
@@ -93,7 +94,8 @@ const MiniTextFormat = props => {
           activeColor: activeColor,
           id: "11_cc",
           editor: editor,
-          customProps: customProps
+          customProps: customProps,
+          type: "textColor"
         }), /*#__PURE__*/_jsx(MiniColorPicker, {
           format: textBgFormat,
           classes: classes,

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

@@ -296,7 +296,8 @@ const TextFormat = props => {
           rounded: true,
           title: translation("textColor"),
           id: "11_cc",
-          classes: classes
+          classes: classes,
+          type: "textColor"
         }, "11_cc")
       })]
     }), /*#__PURE__*/_jsxs(Grid, {

package/dist/Editor/common/CustomColorPicker/index.js

@@ -2,9 +2,10 @@ import { Box, Button, Paper, Typography, useTheme } from "@mui/material";
 import ColorPickerTool from "react-gcolor-picker";
 import customColorPickerStyles from "./style";
 import { colors } from "../../Elements/Color Picker/defaultColors";
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import { getVariableValue } from "../../helper/theme";
+import { getSelectedColor } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getColors = (colors, colorTab, key) => {
@@ -25,7 +26,7 @@ function CustomColorPicker(props) {
   const {
     gradient,
     color,
-    onChange,
+    onChange: onChangeColor,
     defaultColors,
     recentColors,
     closeDrawer,
@@ -39,6 +40,9 @@ function CustomColorPicker(props) {
   const classes = customColorPickerStyles();
   const theme = useTheme();
   const colorVars = theme?.vars?.colors || {};
+  const onChange = useCallback(color => {
+    onChangeColor(getSelectedColor(color, theme));
+  }, [onChangeColor, theme]);
   const colorTabs = useMemo(() => {
     const otherColors = {
       title: "Recent colours",
@@ -63,6 +67,7 @@ function CustomColorPicker(props) {
     tabs.push(otherColors);
     return tabs;
   }, [recentColors, defaultColors, onChange, colorVars]);
+  const selectValue = getSelectedColor(color, theme);
   return /*#__PURE__*/_jsxs(Paper, {
     component: "div",
     sx: classes.customColorPickerContainer,
@@ -100,7 +105,7 @@ function CustomColorPicker(props) {
           component: "div",
           className: "colorPickerBtnContainer",
           children: getColors(colors, colorTab, key).map((colorVar, i) => {
-            const isSelected = colorVar === color;
+            const isSelected = colorVar === selectValue;
             return /*#__PURE__*/_jsx(Box, {
               className: isSelected ? "colorPicketBtnActive" : "",
               component: "div",

package/dist/Editor/common/StyleBuilder/fieldTypes/color.js

@@ -1,7 +1,6 @@
 import React, { useEffect, useMemo, useState } from "react";
 import { Grid, TextField, InputAdornment, Typography, Tooltip } from "@mui/material";
 import ColorPickerButton from "../../ColorPickerButton";
-import { useSlateStatic } from "slate-react";
 import { getVariableValue } from "../../../helper/theme";
 import { useButtonStyle } from "../../../hooks/useThemeValues";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -29,22 +28,21 @@ const Color = props => {
     translation
   } = customProps;
   const [recentColors, setRecentColors] = useState({});
-  const editor = useSlateStatic();
   const {
     buttonStyle
-  } = useButtonStyle(val, editor, elementProps, MAP_STYLE_PROPS[key]);
+  } = useButtonStyle(val, key, elementProps);
+  const newValue = buttonStyle?.color;
   const {
     value,
     inputValue
   } = useMemo(() => {
-    const isVariable = val && val.startsWith("var");
-    const value = isVariable ? val : buttonStyle;
-    const inputValue = isVariable ? getVariableValue(val) : buttonStyle;
+    const isVariable = newValue && newValue.startsWith("var");
+    const inputValue = isVariable ? getVariableValue(newValue) : newValue;
     return {
-      value: value || val,
-      inputValue: inputValue || val
+      value: newValue,
+      inputValue: inputValue
     };
-  }, [buttonStyle, val]);
+  }, [buttonStyle?.color]);
   const getLable = label === "Text" ? translation("selectTextColor") : label === "Background" ? translation("selectBgColor") : translation(label);
   useEffect(() => {
     const storedColors = JSON.parse(localStorage.getItem("recentColors"));

package/dist/Editor/helper/theme.js

@@ -164,7 +164,9 @@ const MAP_PROPERTY_KEYS = {
   fontFamily: "font-family",
   fontSize: "font-size",
   textSize: "font-size",
-  fontWeight: "font-weight"
+  fontWeight: "font-weight",
+  color: "color",
+  bgColor: "background-color"
 };
 export function getElementProperty(element, styleProperty) {
   if (!element) {

package/dist/Editor/hooks/useThemeValues.js

@@ -2,20 +2,52 @@ import { useEffect, useState } from "react";
 import { getElementProperty } from "../helper/theme";
 import { ReactEditor } from "slate-react";
 import { Node } from "slate";
+import { useEditorTheme } from "./useEditorTheme";
 function useThemeValues() {
   return {};
 }
 export default useThemeValues;
-export function useButtonStyle(value, editor, element, stylePropertyName) {
+export function useButtonStyle(value, key, element) {
   const [buttonStyle, setButtonStyle] = useState(value);
+  const {
+    selectedTheme
+  } = useEditorTheme();
+  const themeBtnProps = selectedTheme?.elementProps?.button || {};
   useEffect(() => {
-    const style = getButtonElementStyle(editor, element, stylePropertyName);
-    setButtonStyle(style);
-  }, [value, editor, element, stylePropertyName]);
+    const color = getColorValue(value, key, element, themeBtnProps);
+    setButtonStyle({
+      color
+    });
+  }, [value, key, element]);
   return {
     buttonStyle
   };
 }
+const DEFAULT_MAP_THEMES = {
+  textColor: "color",
+  bgColor: "backgroundColor"
+};
+const hoverMap = (theme, format) => {
+  const hover = theme?.hover || {};
+  const key = DEFAULT_MAP_THEMES[format];
+  return hover[key];
+};
+const MAP_THEME_KEYS = {
+  ...DEFAULT_MAP_THEMES,
+  textColorHover: hoverMap,
+  bgColorHover: hoverMap
+};
+const getColorValue = (val, key, elementProps, themeBtnProps) => {
+  const themeKey = MAP_THEME_KEYS[key];
+  if (elementProps?.type === "button" && !val && themeKey) {
+    if (typeof themeKey === "string") {
+      return themeBtnProps[themeKey];
+    } else {
+      return themeKey(themeBtnProps, key);
+    }
+  }
+  return val;
+};
 export function getButtonElementStyle(editor, element, stylePropertyName) {
   try {
     const path = ReactEditor.findPath(editor, element);

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -396,7 +396,7 @@ export const getBlock = props => {
   const commonParaProps = paraType => ({
     ...attributes,
     ...element.attr,
-    className: `content-editable ${isEmpty ? "empty" : ""} theme-element ${paraType}`
+    className: `edt-paragraphs content-editable ${isEmpty ? "empty" : ""} theme-element ${paraType}`
   });
   switch (element.type) {
     case "headingOne":

package/dist/Editor/utils/helper.js

@@ -2,6 +2,7 @@ import { Editor, Node, Transforms, Element, Path, Range, Text } from "slate";
 import { ReactEditor } from "slate-react";
 import insertNewLine from "./insertNewLine";
 import { getDevice } from "../helper/theme";
+import { activeMark, getSelectedElementStyle } from "./SlateUtilityFunctions";
 export const windowVar = {};
 let ST_TIMEOUT = null;
 const BLOCKS = ["grid", "dataView"];
@@ -886,4 +887,46 @@ export const getCurrentNodeText = editor => {
   } catch (error) {
     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) => {
+  const colorVars = 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": "9.5.2",
+  "version": "9.5.4",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"