@flozy/editor 10.8.6 → 10.8.8

package/dist/Editor/Toolbar/FormatTools/TextSize.js

@@ -8,13 +8,19 @@ import { TextSizeDownArrow, TextSizeUpArrow } from "../../common/iconListV2.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-const TextSize = ({
-  classes,
-  editor,
-  format,
-  fullWidth
-}) => {
+const TextSize = props => {
+  const {
+    classes,
+    editor,
+    format,
+    fullWidth,
+    fromMiniTextFormat,
+    setResizedSize,
+    resizedSize
+  } = props;
   const [fontSize, setFontSize] = useState();
+  const sizeValue = fromMiniTextFormat ? resizedSize : fontSize;
+  const setSizeValue = fromMiniTextFormat ? setResizedSize : setFontSize;
   const timerRef = useRef();
   const [size] = useWindowResize();
   const val = activeMark(editor, format);
@@ -24,7 +30,7 @@ const TextSize = ({
 
   const value = getTextSizeVal(editor);
   useEffect(() => {
-    setFontSize(getSizeVal());
+    setSizeValue(getSizeVal());
   }, [value]);
   const updateMarkData = newVal => {
     let upData = {
@@ -51,9 +57,10 @@ const TextSize = ({
     if (value) {
       let inc = parseInt(value);
       inc = inc > 200 ? 200 : inc;
+      setSizeValue(inc);
       updateMarkData(inc);
     } else {
-      setFontSize(null);
+      setSizeValue(null);
     }
   };
   const getSizeVal = () => {
@@ -63,20 +70,20 @@ const TextSize = ({
       return "";
     }
   };
-  const combinedOldVal = getSizeVal();
   const onIncreaseSize = () => {
-    let inc = (combinedOldVal || 0) + 1;
-    inc = inc > 200 ? 200 : inc;
-    updateMarkData(inc);
+    const newValue = Math.min((sizeValue || 16) + 1, 200);
+    setSizeValue(newValue);
+    updateMarkData(newValue);
   };
   const onDecreaseSize = () => {
-    const newVal = combinedOldVal - 1 < 0 ? 0 : combinedOldVal - 1;
-    updateMarkData(newVal);
+    const newValue = sizeValue ? Math.max(sizeValue - 1, 1) : 16;
+    setSizeValue(newValue);
+    updateMarkData(newValue);
   };
   const onChange = e => {
     clearTimeout(timerRef.current);
     const value = e.target.value;
-    setFontSize(value);
+    setSizeValue(value);
     timerRef.current = setTimeout(() => {
       onChangeSize(value);
     }, 500);
@@ -84,7 +91,7 @@ const TextSize = ({
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(TextField, {
       sx: classes?.textSize,
-      value: fontSize,
+      value: sizeValue || 16,
       onChange: onChange,
       size: "small",
       inputProps: {

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

@@ -7,12 +7,18 @@ import { BREAKPOINTS_DEVICES, getBreakPointsValue, getTextSizeVal } from "../../
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const fontSizeOptions = [8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 26, 32, 36, 40, 48, 64, 96, 128];
-function SelectFontSize({
-  editor,
-  classes
-}) {
+function SelectFontSize(props) {
+  const {
+    editor,
+    classes,
+    fromMiniTextFormat,
+    setResizedSize,
+    resizedSize
+  } = props;
   const format = "fontSize";
   const [fontSize, setFontSize] = useState();
+  const sizeValue = fromMiniTextFormat ? resizedSize : fontSize;
+  const setSizeValue = fromMiniTextFormat ? setResizedSize : setFontSize;
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
   const containerRef = useRef();
@@ -45,9 +51,10 @@ function SelectFontSize({
     if (value) {
       let inc = parseInt(value);
       inc = inc > 200 ? 200 : inc;
+      setSizeValue(inc);
       updateMarkData(inc);
     } else {
-      setFontSize(null);
+      setSizeValue(null);
     }
   };
   const getSizeVal = () => {
@@ -58,12 +65,12 @@ function SelectFontSize({
     }
   };
   useEffect(() => {
-    setFontSize(getSizeVal());
+    setSizeValue(getSizeVal());
   }, [value]);
   const onChange = e => {
     clearTimeout(timerRef.current);
     const value = e.target.value;
-    setFontSize(value);
+    setSizeValue(value);
     timerRef.current = setTimeout(() => {
       onChangeSize(value);
     }, 500);
@@ -76,7 +83,7 @@ function SelectFontSize({
     },
     children: [/*#__PURE__*/_jsx(TextField, {
       sx: classes?.miniFontSizeInput,
-      value: fontSize,
+      value: sizeValue,
       onChange: onChange,
       size: "small"
     }), /*#__PURE__*/_jsx(IconButton, {
@@ -97,9 +104,9 @@ function SelectFontSize({
       children: fontSizeOptions.map((s, i) => {
         return /*#__PURE__*/_jsx("div", {
           children: /*#__PURE__*/_jsx(Button, {
-            className: `customSelectOptionLabel ${fontSize === s ? "selected" : ""}`,
+            className: `customSelectOptionLabel ${sizeValue === s ? "selected" : ""}`,
             onClick: () => {
-              setFontSize(s);
+              setSizeValue(s);
               onChangeSize(s);
             },
             children: s

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

@@ -34,6 +34,7 @@ const MiniTextFormat = props => {
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
   const id = open ? "popup-edit-tool" : "";
+  const [resizedSize, setResizedSize] = useState();
   const [size] = useWindowResize();
   const theme = useTheme();
   const listType = getListType(editor);
@@ -84,7 +85,10 @@ const MiniTextFormat = props => {
           className: "verticalLine mr-1"
         }), /*#__PURE__*/_jsx(SelectFontSize, {
           classes: classes,
-          editor: editor
+          editor: editor,
+          fromMiniTextFormat: true,
+          setResizedSize: setResizedSize,
+          resizedSize: resizedSize
         }), /*#__PURE__*/_jsx("div", {
           className: "verticalLine mr-1"
         }), fontStyle?.map((m, i) => {
@@ -147,7 +151,10 @@ const MiniTextFormat = props => {
                 classes: classes,
                 closeMainPopup: closeMainPopup,
                 customProps: customProps,
-                commonProps: commonProps
+                commonProps: commonProps,
+                fromMiniTextFormat: true,
+                setResizedSize: setResizedSize,
+                resizedSize: resizedSize
               })]
             })
           })

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

@@ -1159,7 +1159,7 @@ const usePopupStyle = theme => ({
   miniFontSizeInput: {
     "& input": {
       fontSize: "14px",
-      width: "16px",
+      width: "26px",
       padding: "8px 4px"
     },
     "& fieldset": {

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

@@ -32,7 +32,10 @@ const TextFormat = props => {
     onClose,
     closeMainPopup,
     customProps,
-    commonProps
+    commonProps,
+    setResizedSize,
+    resizedSize,
+    fromMiniTextFormat
   } = props;
   const [anchorEl, setAnchorEl] = useState(null);
   const [type, setType] = useState(null);
@@ -252,7 +255,10 @@ const TextFormat = props => {
             format: "fontSize",
             activeMark: activeMark,
             editor: editor,
-            fullWidth: true
+            fullWidth: true,
+            fromMiniTextFormat: fromMiniTextFormat,
+            setResizedSize: setResizedSize,
+            resizedSize: resizedSize
           })
         })]
       })]

package/dist/Editor/hooks/useEditorTheme.js

@@ -1,5 +1,5 @@
 import { useSlate } from "slate-react";
-import { baseTheme } from "../theme";
+import { defaultTheme } from "../theme";
 import { getPageSettings, updatePageSettings } from "../utils/pageSettings";
 import { HEADING_THEME_FIELDS, PARAGRAPH_THEME_FIELDS } from "../helper/theme";
 import { useEditorContext } from "./useMouseMove";
@@ -145,10 +145,8 @@ export const useEditorTheme = () => {
   const {
     theme
   } = pageProps || {};
-  const fallbackTheme = baseTheme?.theme || {};
-  console.log("fallbackTheme", fallbackTheme, baseTheme);
   return {
-    selectedTheme: theme?.theme || fallbackTheme,
+    selectedTheme: theme?.theme || defaultTheme()?.theme,
     updateTheme: (update, actionData) => updateTheme(editor, pageSt, update, actionData, triggerRender),
     theme
   };

package/dist/Editor/theme/ThemeList.js

@@ -1,5 +1,5 @@
 import { Box, MenuItem, Select } from "@mui/material";
-import { baseTheme } from ".";
+import { defaultTheme } from ".";
 import { useEditorTheme } from "../hooks/useEditorTheme";
 import { useEffect, useState } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -31,8 +31,7 @@ function ThemeList({
     const {
       value
     } = e.target;
-    const fallbackTheme = baseTheme || {};
-    const selectedTheme = themes.find(t => t.id === value) || fallbackTheme;
+    const selectedTheme = themes.find(t => t.id === value) || defaultTheme();
     updateTheme(selectedTheme, "THEME_CHANGE");
   };
   return /*#__PURE__*/_jsx(Box, {

package/dist/Editor/theme/index.js

@@ -117,7 +117,7 @@ export const transformTheme = (selectedTheme = {}) => {
     ...others
   };
 };
-export const baseTheme = {
+export const defaultTheme = () => ({
   theme: {
     cssVars: {},
     elementProps: {
@@ -143,7 +143,7 @@ export const baseTheme = {
       }
     }
   }
-};
+});
 export function getTheme(selectedTheme) {
-  return transformTheme(selectedTheme?.theme || baseTheme.theme);
+  return transformTheme(selectedTheme?.theme || defaultTheme().theme);
 }

package/package.json

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