@flozy/editor 3.7.9 → 3.8.0

package/dist/Editor/Elements/AI/VoiceToText/index.js

@@ -1,167 +0,0 @@
-import { useState, useEffect, useRef, cloneElement } from "react";
-import PropTypes from "prop-types";
-import STTStyles from "./style";
-import { Grid, IconButton, Box } from "@mui/material";
-import { AudioWave } from "./AudioWave";
-import { CloseGreyCircle, PauseRecordingIcon, TickBlueCircle } from "../../../assets/svg/AIIcons";
-import { MODES } from "../helper";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-function STT(props) {
-  const {
-    children,
-    otherProps,
-    onSend
-  } = props;
-  const {
-    services
-  } = otherProps;
-  const classes = STTStyles();
-  const [isRecording, setIsRecording] = useState(false);
-  const [mediaRecorder, setMediaRecorder] = useState(null);
-  const [audioChunks, setAudioChunks] = useState([]);
-  const [chunkIndex, setChunkIndex] = useState(0);
-  const audioChunksRef = useRef([]);
-  const [transcription, setTranscription] = useState("");
-  const [showPause, setShowPause] = useState(true);
-  const [isAILoading, setAILoading] = useState(false);
-  const setChunk = event => {
-    if (event.data.size > 0) {
-      setAudioChunks(prev => {
-        const updatedChunks = [...prev, event.data];
-        audioChunksRef.current = updatedChunks; // Update ref manually
-        return updatedChunks;
-      });
-    }
-  };
-  const sendChunck = async (isLast = false) => {
-    if (audioChunksRef.current.length > 0) {
-      const audioBlob = new Blob(audioChunksRef.current, {
-        type: "audio/webm"
-      });
-      const formData = new FormData();
-      formData.append("audio", audioBlob, `audio_chunk_${chunkIndex}.wav`);
-      formData.append("chunkIndex", chunkIndex); // Send chunk index to the backend
-      if (isLast) {
-        formData.append("isLastChunk", true); // Send chunk index to the backend
-      } else {
-        formData.append("isLastChunk", false);
-        setChunkIndex(prevIndex => prevIndex + 1);
-      }
-      const result = await services("speechToText", {
-        formData
-      });
-      setTranscription(result?.data);
-      await sendChunck();
-    }
-  };
-  const handleStopRecording = () => {
-    sendChunck(true);
-    setAudioChunks([]);
-  };
-  const startRecording = async () => {
-    setTranscription("");
-    const stream = await navigator.mediaDevices.getUserMedia({
-      audio: true
-    });
-    const recorder = new MediaRecorder(stream);
-    setMediaRecorder(recorder);
-    recorder.ondataavailable = setChunk;
-    recorder.onstop = handleStopRecording;
-    recorder.start(100);
-    setIsRecording(true);
-    setTimeout(() => {
-      sendChunck();
-    }, 2000);
-  };
-  const stopRecording = () => {
-    if (mediaRecorder) {
-      mediaRecorder.stop();
-
-      // Stop all tracks to release the microphone
-      if (mediaRecorder.stream) {
-        mediaRecorder.stream.getTracks().forEach(track => track.stop());
-      }
-      setChunkIndex(0);
-      setShowPause(false);
-    }
-  };
-  const sendToInfiniti = async () => {
-    setAILoading(true);
-    setIsRecording(false);
-    const result = await services("infinityAI", {
-      mode: MODES.default,
-      query: transcription
-    });
-    const text = result?.data || "";
-    onSend("speech_to_text", {
-      text
-    });
-    stopRecording();
-    setAILoading(false);
-  };
-  const closeRecording = () => {
-    setAudioChunks([]);
-    stopRecording();
-    setIsRecording(false);
-    setShowPause(true);
-    setTranscription("");
-  };
-  useEffect(() => {
-    audioChunksRef.current = audioChunks;
-  }, [audioChunks]);
-  return /*#__PURE__*/_jsx(Grid, {
-    xs: 12,
-    children: /*#__PURE__*/_jsx(Grid, {
-      className: classes.SttContainer,
-      children: !isRecording ? /*#__PURE__*/_jsx(Grid, {
-        xs: 12,
-        children: /*#__PURE__*/cloneElement(children, {
-          startRecording,
-          isAILoading
-        })
-      }) : /*#__PURE__*/_jsxs(Grid, {
-        xs: 12,
-        sx: classes.AudioVizualizerContainer,
-        children: [transcription ? /*#__PURE__*/_jsx(Grid, {
-          xs: 12,
-          sx: classes.TranscriptionContainer,
-          children: transcription
-        }) : null, /*#__PURE__*/_jsxs(Grid, {
-          xs: 12,
-          sx: classes.AudioVizualizerContent,
-          children: [/*#__PURE__*/_jsx(Box, {
-            children: /*#__PURE__*/_jsx(IconButton, {
-              onClick: closeRecording,
-              children: /*#__PURE__*/_jsx(CloseGreyCircle, {})
-            })
-          }), /*#__PURE__*/_jsx(Box, {
-            sx: classes.AudioVisualiser,
-            children: /*#__PURE__*/_jsx(AudioWave, {
-              audioChunks: audioChunks
-            })
-          }), /*#__PURE__*/_jsx(Box, {
-            children: showPause ? /*#__PURE__*/_jsx(IconButton, {
-              onClick: stopRecording,
-              children: /*#__PURE__*/_jsx(PauseRecordingIcon, {})
-            }) : /*#__PURE__*/_jsx(IconButton, {
-              onClick: sendToInfiniti,
-              disabled: !transcription,
-              style: !transcription ? {
-                opacity: 0.5
-              } : {},
-              children: /*#__PURE__*/_jsx(TickBlueCircle, {})
-            })
-          })]
-        })]
-      })
-    })
-  });
-}
-STT.defaultProps = {
-  classes: {}
-};
-STT.propTypes = {
-  classes: PropTypes.object
-};
-export const VoiceToText = STT;

package/dist/Editor/Elements/AI/VoiceToText/style.js

@@ -1,40 +0,0 @@
-const styles = () => ({
-  SttContainer: {
-    display: "flex",
-    width: "100%",
-    padding: "12px",
-    zIndex: 1
-  },
-  STTInput: {
-    width: "100%",
-    borderRadius: "8px",
-    "&& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
-      borderColor: "#2563EB"
-    },
-    "&& .MuiOutlinedInput-root": {
-      background: "rgba(252, 250, 255, 1)"
-    }
-  },
-  AudioVizualizerContainer: {
-    width: "100%",
-    display: "flex",
-    background: "rgba(252, 250, 255, 1)",
-    borderRadius: "8px",
-    border: "1px solid #2563EB",
-    alignItems: "center",
-    flexWrap: "wrap"
-  },
-  AudioVizualizerContent: {
-    display: "flex",
-    height: "50px",
-    width: "100%"
-  },
-  AudioVisualiser: {
-    flexGrow: "1",
-    height: "100%"
-  },
-  TranscriptionContainer: {
-    padding: "12px"
-  }
-});
-export default styles;

package/dist/Editor/Elements/Link/LinkPopupStyles.js

@@ -1,28 +0,0 @@
-const LinkPopupStyles = theme => ({
-  addLinkField: {
-    "& .MuiOutlinedInput-input": {
-      fontSize: "12px",
-      fontWeight: 500,
-      color: `${theme?.palette?.editor?.textColor} !important`
-    },
-    "& .MuiFormHelperText-root": {
-      color: `${theme?.palette?.editor?.textColor} !important`
-    },
-    "& .MuiOutlinedInput-root": {
-      boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)",
-      color: `${theme?.palette?.editor?.textColor} !important`,
-      borderRadius: "7px",
-      "& fieldset": {
-        borderColor: "#D8DDE1"
-      },
-      "&:hover fieldset": {
-        borderColor: "#64748B"
-      },
-      "&.Mui-focused fieldset": {
-        borderColor: "#2563EB"
-      },
-      "& .MuiFormLabel-root": {}
-    }
-  }
-});
-export default LinkPopupStyles;

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

@@ -1,438 +0,0 @@
-import { Button, Grid, IconButton, Popover, TextField, Tooltip, Typography } from "@mui/material";
-import { useEditorContext } from "../../hooks/useMouseMove";
-import { fontFamilyMap, fontOptions } from "../../utils/font";
-import FormatClearIcon from "@mui/icons-material/FormatClear";
-import usePopupStyles from "../PopupTool/PopupToolStyle";
-import { TextMinusIcon, TextPlusIcon } from "../../common/iconslist";
-import { BREAKPOINTS_DEVICES, getBreakPointsValue, getVariableValue } from "../../helper/theme";
-import useWindowResize from "../../hooks/useWindowResize";
-import { toolbarGroups } from "../toolbarGroups";
-import Icon from "../../common/Icon";
-import { useMemo, useState } from "react";
-import CommonButton from "../../common/Button";
-import CustomSelect from "../../common/CustomSelect";
-import ColorButtons from "../../Elements/Color Picker/ColorButtons";
-import FormatColorResetIcon from "@mui/icons-material/FormatColorReset";
-import ColorPickerStyles from "../../Elements/Color Picker/Styles";
-import colorWheel from "../../Elements/Color Picker/colorWheel.png";
-import CustomColorPicker from "../../common/CustomColorPicker";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-function getFontStyleProps(settings = {}, format) {
-  const {
-    fontWeight,
-    fontStyle
-  } = settings;
-  let isActive;
-  let onClick;
-  switch (format) {
-    case "bold":
-      isActive = fontWeight === "bold" || fontWeight === "700";
-      onClick = () => {
-        return {
-          fontWeight: isActive ? "normal" : "bold"
-        };
-      };
-      break;
-    case "italic":
-      isActive = fontStyle === "italic";
-      onClick = () => {
-        return {
-          fontStyle: isActive ? "unset" : "italic"
-        };
-      };
-      break;
-
-    // case "underline":
-    //   isActive = textDecoration.includes("underline");
-    //   onClick = () => {
-    //     let otherTextDecoration = textDecoration?.includes("line-through")
-    //       ? "line-through"
-    //       : "";
-
-    //     otherTextDecoration += isActive ? "" : " underline";
-
-    //     return { textDecoration: otherTextDecoration };
-    //   };
-    //   break;
-    // case "strikethrough":
-    //   isActive = textDecoration.includes("line-through");
-    //   onClick = () => {
-    //     let otherTextDecoration = textDecoration?.includes("underline")
-    //       ? "underline"
-    //       : "";
-
-    //     otherTextDecoration += isActive ? "" : " line-through";
-
-    //     return { textDecoration: otherTextDecoration };
-    //   };
-    //   break;
-
-    default:
-      isActive = false;
-      onClick = () => {};
-      break;
-  }
-  return {
-    isActive,
-    onClick
-  };
-}
-const allTools = toolbarGroups.flat();
-function ThemeTextFormat(props) {
-  const {
-    settings,
-    updateSettings,
-    onSaveTextSettings,
-    onClose
-  } = props;
-  const {
-    theme
-  } = useEditorContext();
-  const classes = usePopupStyles(theme);
-  const pickerStyles = ColorPickerStyles(theme);
-  const fontStyle = allTools.filter(f => f.type === "mark" && f.themeEnabled);
-  const fontWeight = allTools.find(f => f.format === "fontWeight");
-  const fontFamilyVal = useMemo(() => {
-    const {
-      fontFamily = ""
-    } = settings;
-    let font = fontFamily.startsWith("var") ? getVariableValue(fontFamily) : fontFamily;
-    return fontOptions?.find(f => f.text === font)?.value;
-  }, [settings, fontOptions]);
-  const fontWeightVal = useMemo(() => {
-    const {
-      options
-    } = fontWeight || {};
-    const selected = options?.find(o => o.value === settings?.fontWeight || o.numVal === settings?.fontWeight);
-    return selected?.value;
-  }, [settings?.fontWeight]);
-  return /*#__PURE__*/_jsxs(Grid, {
-    container: true,
-    sx: classes.textFormatWrapper,
-    children: [/*#__PURE__*/_jsxs(Grid, {
-      item: true,
-      xs: 12,
-      children: [/*#__PURE__*/_jsxs(Grid, {
-        container: true,
-        justifyContent: "space-between",
-        alignItems: "center",
-        children: [/*#__PURE__*/_jsx(Grid, {
-          item: true,
-          children: /*#__PURE__*/_jsx(Typography, {
-            variant: "body1",
-            color: "primary",
-            sx: classes.typoLabel,
-            children: "Font Family"
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          item: true,
-          children: /*#__PURE__*/_jsx(Button, {
-            sx: classes.defaultBtn,
-            startIcon: /*#__PURE__*/_jsx(FormatClearIcon, {}),
-            onClick: () => updateSettings({
-              fontFamily: Object.values(fontFamilyMap)[0]
-            }),
-            children: "Default"
-          })
-        })]
-      }), /*#__PURE__*/_jsx(Grid, {
-        item: true,
-        xs: 12,
-        sx: classes.textFormatField,
-        children: /*#__PURE__*/_jsx(CustomSelect, {
-          options: fontOptions,
-          classes: classes,
-          onChange: e => {
-            const fontFamily = fontOptions.find(f => f.value === e.target.value)?.text;
-            updateSettings({
-              fontFamily
-            });
-          },
-          value: fontFamilyVal || fontOptions[0].value
-        })
-      })]
-    }), /*#__PURE__*/_jsxs(Grid, {
-      container: true,
-      spacing: 2,
-      children: [/*#__PURE__*/_jsxs(Grid, {
-        item: true,
-        xs: 6,
-        children: [/*#__PURE__*/_jsx(Typography, {
-          variant: "body1",
-          color: "primary",
-          sx: classes.typoLabel,
-          children: "Font Weight"
-        }), /*#__PURE__*/_jsx(Grid, {
-          item: true,
-          xs: 12,
-          sx: classes.textFormatField,
-          children: /*#__PURE__*/_jsx(CustomSelect, {
-            options: fontWeight?.options || [],
-            classes: classes,
-            onChange: e => {
-              updateSettings({
-                fontWeight: e.target.value
-              });
-            },
-            value: fontWeightVal
-          })
-        })]
-      }), /*#__PURE__*/_jsxs(Grid, {
-        item: true,
-        xs: 6,
-        children: [/*#__PURE__*/_jsx(Typography, {
-          variant: "body1",
-          color: "primary",
-          sx: classes.typoLabel,
-          children: "Font Size"
-        }), /*#__PURE__*/_jsx(Grid, {
-          item: true,
-          xs: 12,
-          sx: classes.textFormatCG,
-          children: /*#__PURE__*/_jsx(TextSize, {
-            classes: classes,
-            value: settings?.fontSize || 16,
-            onChange: fontSize => updateSettings({
-              fontSize
-            }),
-            fullWidth: true
-          })
-        })]
-      })]
-    }), /*#__PURE__*/_jsxs(Grid, {
-      item: true,
-      xs: 12,
-      sx: classes.textFormatField,
-      style: {
-        marginTop: "14px"
-      },
-      children: [/*#__PURE__*/_jsxs(Grid, {
-        container: true,
-        justifyContent: "space-between",
-        alignItems: "center",
-        children: [/*#__PURE__*/_jsx(Grid, {
-          item: true,
-          children: /*#__PURE__*/_jsx(Typography, {
-            variant: "body1",
-            color: "primary",
-            sx: classes.typoLabel,
-            children: "Text Color"
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          item: true,
-          children: /*#__PURE__*/_jsx(Button, {
-            sx: classes.defaultBtn,
-            startIcon: /*#__PURE__*/_jsx(FormatColorResetIcon, {}),
-            onClick: () => updateSettings({
-              color: "#ddd"
-            }),
-            children: "Default"
-          })
-        })]
-      }), /*#__PURE__*/_jsx(Grid, {
-        sx: classes.textFormatColorWrpr,
-        children: /*#__PURE__*/_jsx(ColorPicker, {
-          classes: classes,
-          pickerStyles: pickerStyles,
-          onChange: color => updateSettings({
-            color
-          }),
-          color: settings?.color,
-          disableEditTheme: true
-        })
-      })]
-    }), /*#__PURE__*/_jsxs(Grid, {
-      item: true,
-      xs: 12,
-      children: [/*#__PURE__*/_jsx(Typography, {
-        variant: "body1",
-        color: "primary",
-        sx: classes.typoLabel,
-        children: "Typography"
-      }), /*#__PURE__*/_jsx(Grid, {
-        item: true,
-        xs: 12,
-        className: "typo-icons",
-        sx: classes.evenSpace,
-        children: fontStyle?.map((m, i) => {
-          const {
-            isActive,
-            onClick
-          } = getFontStyleProps(settings, m.format) || {};
-          return /*#__PURE__*/_jsx(CommonButton, {
-            active: isActive,
-            onClick: () => {
-              const style = onClick();
-              updateSettings(style);
-            },
-            children: /*#__PURE__*/_jsx(Icon, {
-              icon: m.format
-            })
-          }, i);
-        })
-      })]
-    }), /*#__PURE__*/_jsx(Grid, {
-      item: true,
-      xs: 12,
-      sx: {
-        mt: 2
-      },
-      children: /*#__PURE__*/_jsxs("div", {
-        style: {
-          display: "flex",
-          justifyContent: "end",
-          margin: "8px",
-          position: "absolute",
-          bottom: 0,
-          right: 0
-        },
-        children: [/*#__PURE__*/_jsx(Button, {
-          onClick: onClose,
-          className: "secondaryBtn",
-          children: "Cancel"
-        }), /*#__PURE__*/_jsx(Button, {
-          onClick: onSaveTextSettings,
-          className: "primaryBtn",
-          children: "Save"
-        })]
-      })
-    })]
-  });
-}
-export default ThemeTextFormat;
-function TextSize(props) {
-  const {
-    classes,
-    value: val,
-    onChange,
-    fullWidth
-  } = props;
-  const [size] = useWindowResize();
-  const value = getBreakPointsValue(val, size?.device);
-  const updateMarkData = newVal => {
-    let upData = {
-      ...getBreakPointsValue(val),
-      [size?.device]: `${newVal}px`
-    };
-
-    // if desktop update to all other devices
-    // to avoid default normal size
-    if (size?.device === "lg") {
-      upData = BREAKPOINTS_DEVICES.reduce((a, b) => {
-        a[b] = `${newVal}px`;
-        return a;
-      }, {});
-    }
-    onChange(upData);
-  };
-  const onChangeSize = e => {
-    let inc = parseInt(e.target.value) || 8;
-    inc = inc > 200 ? 200 : inc;
-    updateMarkData(inc || 8);
-  };
-  const getSizeVal = () => {
-    try {
-      return parseInt(value);
-    } catch (err) {
-      return "";
-    }
-  };
-  const combinedOldVal = getSizeVal();
-  const onIncreaseSize = () => {
-    let inc = (combinedOldVal || 0) + 1;
-    inc = inc > 200 ? 200 : inc;
-    updateMarkData(inc);
-  };
-  const onDecreaseSize = () => {
-    const newVal = combinedOldVal - 1 < 0 ? 0 : combinedOldVal - 1;
-    updateMarkData(newVal);
-  };
-  return /*#__PURE__*/_jsx(TextField, {
-    sx: classes?.textSize,
-    value: combinedOldVal,
-    onChange: onChangeSize,
-    size: "small",
-    inputProps: {
-      style: {
-        width: fullWidth ? "100%" : "30px",
-        textAlign: "center",
-        height: "19px",
-        fontSize: "14px"
-      }
-    },
-    fullWidth: fullWidth,
-    InputProps: {
-      style: {
-        borderRadius: "8px"
-      },
-      endAdornment: /*#__PURE__*/_jsxs("div", {
-        className: "textFontArrows",
-        children: [/*#__PURE__*/_jsx(IconButton, {
-          onClick: onIncreaseSize,
-          size: "small",
-          children: /*#__PURE__*/_jsx(TextPlusIcon, {})
-        }), /*#__PURE__*/_jsx(IconButton, {
-          onClick: onDecreaseSize,
-          size: "small",
-          children: /*#__PURE__*/_jsx(TextMinusIcon, {})
-        })]
-      })
-    }
-  });
-}
-function ColorPicker(props) {
-  const {
-    classes,
-    pickerStyles,
-    onChange,
-    color,
-    disableEditTheme
-  } = props;
-  const [anchorEl, setAnchorEl] = useState(null);
-  const open = Boolean(anchorEl);
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Tooltip, {
-      title: "",
-      arrow: true,
-      children: /*#__PURE__*/_jsx(IconButton, {
-        sx: pickerStyles.colorPickerIcon,
-        onClick: e => {
-          setAnchorEl(e.currentTarget);
-        },
-        children: /*#__PURE__*/_jsx("img", {
-          src: colorWheel,
-          alt: "color wheel"
-        })
-      })
-    }), /*#__PURE__*/_jsx(ColorButtons, {
-      classes: pickerStyles,
-      onSelect: onChange,
-      activeColor: color,
-      disableEditTheme: disableEditTheme
-    }), /*#__PURE__*/_jsx(Popover, {
-      open: open,
-      anchorEl: anchorEl,
-      onClose: handleClose,
-      anchorOrigin: {
-        vertical: "top",
-        horizontal: "center"
-      },
-      transformOrigin: {
-        vertical: "bottom",
-        horizontal: "top"
-      },
-      sx: classes.colorPickerPopup,
-      children: /*#__PURE__*/_jsx(CustomColorPicker, {
-        gradient: true,
-        onChange: onChange,
-        color: color,
-        disableEditTheme: disableEditTheme
-      })
-    })]
-  });
-}