@flozy/editor 4.6.8 → 4.7.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -3,7 +3,7 @@ import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, u
3
3
  import PropTypes from "prop-types";
4
4
  import { createEditor, Range, Transforms } from "slate";
5
5
  import { Slate, Editable, ReactEditor } from "slate-react";
6
- import { useDebounce, useDebouncedCallback } from "use-debounce";
6
+ import { useDebouncedCallback } from "use-debounce";
7
7
  import { getMarked, getBlock } from "./utils/SlateUtilityFunctions";
8
8
  import CodeToText from "./Elements/CodeToText/CodeToText";
9
9
  import { draftToSlate } from "./utils/draftToSlate";
@@ -491,7 +491,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
491
491
  ,
492
492
  children: /*#__PURE__*/_jsxs(Slate, {
493
493
  editor: editor,
494
- initialValue: value,
494
+ initialValue: debouncedValue?.current,
495
495
  onChange: handleEditorChange,
496
496
  children: [/*#__PURE__*/_jsx(DragAndDrop, {
497
497
  children: /*#__PURE__*/_jsxs(Overlay, {
@@ -1206,4 +1206,17 @@ blockquote {
1206
1206
 
1207
1207
  .freegrid-section {
1208
1208
  max-width: 100% !important;
1209
+ }
1210
+
1211
+ .divider-settings {
1212
+ display: none;
1213
+ position: absolute;
1214
+ }
1215
+
1216
+ .dividerComponent:hover {
1217
+ padding: 10px 0;
1218
+ }
1219
+
1220
+ .dividerComponent:hover .divider-settings {
1221
+ display: block;
1209
1222
  }
@@ -1,30 +1,138 @@
1
- import React from "react";
1
+ import React, { useState } from "react";
2
+ import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
3
+ import { ReactEditor, useSlateStatic } from "slate-react";
4
+ import { IconButton, Tooltip } from "@mui/material";
5
+ import { GridSettingsIcon } from "../../common/iconslist";
6
+ import DividerPopup from "./DividerPopup";
7
+ import { Transforms } from "slate";
2
8
  import { jsx as _jsx } from "react/jsx-runtime";
3
9
  import { jsxs as _jsxs } from "react/jsx-runtime";
4
10
  const Divider = props => {
5
11
  const {
6
12
  attributes,
7
- children
13
+ children,
14
+ element,
15
+ customProps
8
16
  } = props;
17
+ const {
18
+ theme
19
+ } = useEditorContext();
20
+ const {
21
+ borderColor = theme?.palette?.primary?.main || '#0F172A',
22
+ borderWidth = '1px',
23
+ borderStyle = 'solid'
24
+ } = element;
25
+ const {
26
+ readOnly
27
+ } = customProps;
28
+ const editor = useSlateStatic();
29
+ const path = ReactEditor.findPath(editor, element);
30
+ const [openSettings, setOpenSettings] = useState(false);
31
+ const {
32
+ hoverPath
33
+ } = useEditorContext();
34
+ const [showTool] = useEditorSelection(editor);
35
+ const selected = hoverPath === path.join(",");
36
+ const width = borderWidth?.includes('px') ? borderWidth : `${borderWidth}px`;
37
+ const onSettings = () => {
38
+ setOpenSettings(true);
39
+ };
40
+ const DividerToolbar = ({
41
+ selected,
42
+ showTool,
43
+ onSettings
44
+ }) => {
45
+ return /*#__PURE__*/_jsx("div", {
46
+ contentEditable: false,
47
+ className: "divider-settings",
48
+ style: {
49
+ top: "-20px",
50
+ left: 0
51
+ },
52
+ children: /*#__PURE__*/_jsx(Tooltip, {
53
+ title: "Divider Settings",
54
+ arrow: true,
55
+ children: /*#__PURE__*/_jsx(IconButton, {
56
+ size: "small",
57
+ sx: {
58
+ background: theme?.palette?.type === 'dark' ? theme?.palette?.greyshades?.light8 : theme?.palette?.containers?.card,
59
+ border: theme?.palette?.type === 'dark' ? '1px solid #E4E8EB33' : 'none',
60
+ boxShadow: '0px 0px 4px 0px #00000040',
61
+ borderRadius: '50%',
62
+ '& svg': {
63
+ stroke: theme?.palette?.text?.secondary3
64
+ },
65
+ '&.MuiIconButton-root:hover': {
66
+ background: theme?.palette?.type === 'dark' ? `${theme?.palette?.greyshades?.light8} !important` : `${theme?.palette?.containers?.card} !important`
67
+ }
68
+ },
69
+ onClick: onSettings,
70
+ children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
71
+ })
72
+ })
73
+ });
74
+ };
75
+ const onSave = data => {
76
+ const updateData = {
77
+ ...data
78
+ };
79
+ delete updateData.children;
80
+ Transforms.setNodes(editor, {
81
+ ...updateData
82
+ }, {
83
+ at: path
84
+ });
85
+ onClose();
86
+ };
87
+ const onClose = () => {
88
+ setOpenSettings(false);
89
+ };
90
+ const onDelete = () => {
91
+ if (path) {
92
+ Transforms.removeNodes(editor, {
93
+ at: path
94
+ });
95
+ }
96
+ };
9
97
  return /*#__PURE__*/_jsxs("div", {
10
98
  ...attributes,
11
99
  className: "dividerComponent",
12
- contentEditable: "false",
13
100
  style: {
14
- userSelect: "none"
101
+ userSelect: "none",
102
+ position: 'relative'
15
103
  },
16
- children: [/*#__PURE__*/_jsx("hr", {
17
- contentEditable: "false",
104
+ children: [!readOnly && /*#__PURE__*/_jsx("div", {
105
+ className: `element-root element-selector`,
106
+ contentEditable: false,
107
+ style: {
108
+ zIndex: 1000
109
+ },
110
+ children: /*#__PURE__*/_jsx(DividerToolbar, {
111
+ selected: selected,
112
+ showTool: showTool,
113
+ onSettings: onSettings
114
+ })
115
+ }), /*#__PURE__*/_jsx("hr", {
116
+ contentEditable: false,
18
117
  className: "editorDivider",
19
118
  style: {
20
- userSelect: "none"
119
+ userSelect: "none",
120
+ borderTop: !borderColor?.includes("linear") ? `${width} ${borderStyle} ${borderColor}` : `transparent`,
121
+ backgroundImage: borderColor?.includes("linear") ? borderColor : "none",
122
+ height: borderColor?.includes("linear") ? borderWidth : undefined
21
123
  }
22
124
  }), /*#__PURE__*/_jsx("span", {
23
125
  style: {
24
126
  display: "none"
25
127
  },
26
128
  children: children
27
- })]
129
+ }), openSettings ? /*#__PURE__*/_jsx(DividerPopup, {
130
+ element: element,
131
+ onSave: onSave,
132
+ onClose: onClose,
133
+ onDelete: onDelete,
134
+ customProps: customProps
135
+ }) : null]
28
136
  });
29
137
  };
30
138
  export default Divider;
@@ -0,0 +1,24 @@
1
+ import React from "react";
2
+ import StyleBuilder from "../../common/StyleBuilder";
3
+ import dividerStyle from "../../common/StyleBuilder/dividerStyles";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ const DividerPopup = props => {
6
+ const {
7
+ element,
8
+ onSave,
9
+ onClose,
10
+ onDelete,
11
+ customProps
12
+ } = props;
13
+ return /*#__PURE__*/_jsx(StyleBuilder, {
14
+ title: "Divider",
15
+ type: "dividerStyle",
16
+ element: element,
17
+ onSave: onSave,
18
+ onClose: onClose,
19
+ renderTabs: dividerStyle,
20
+ onDelete: onDelete,
21
+ customProps: customProps
22
+ });
23
+ };
24
+ export default DividerPopup;
@@ -87,7 +87,8 @@ const Video = ({
87
87
  url,
88
88
  xsHidden,
89
89
  width: oldWidth,
90
- bannerSpacing
90
+ bannerSpacing,
91
+ aspectRatio
91
92
  } = element;
92
93
  const editor = useSlateStatic();
93
94
  const [openSetttings, setOpenSettings] = useState(false);
@@ -189,9 +190,10 @@ const Video = ({
189
190
  width: {
190
191
  ...getBreakPointsValue(getSize(), null, "overrideReSize", true)
191
192
  },
192
- height: url ? {
193
+ height: url && !aspectRatio ? {
193
194
  ...getBreakPointsValue(getSize(), null, "overrideReSizeH", true)
194
- } : "auto"
195
+ } : "auto",
196
+ aspectRatio: aspectRatio ? aspectRatio : "auto"
195
197
  }, theme)
196
198
  };
197
199
  }
@@ -344,6 +344,26 @@ const FreeGrid = props => {
344
344
  at: [...insertAt]
345
345
  });
346
346
  break;
347
+ case "addDivider":
348
+ Transforms.insertNodes(editor, [{
349
+ type: "freegridItem",
350
+ childType: "divider",
351
+ children: [{
352
+ type: "divider",
353
+ children: [{
354
+ text: ""
355
+ }]
356
+ }],
357
+ gridArea: "3 / 1 / 4 / 2",
358
+ left: 50,
359
+ marginTop: 0,
360
+ top: 0,
361
+ width: 170,
362
+ height: 30
363
+ }], {
364
+ at: [...insertAt]
365
+ });
366
+ break;
347
367
  default:
348
368
  }
349
369
  // focus on newly added element
@@ -43,6 +43,10 @@ const FREE_GRID_ELEMENTS = [{
43
43
  actionType: "addSignature",
44
44
  label: "Signature",
45
45
  icon: "signature"
46
+ }, {
47
+ actionType: "addDivider",
48
+ label: "Divider",
49
+ icon: "divider"
46
50
  }];
47
51
  const AddElement = props => {
48
52
  const {
@@ -51,6 +55,10 @@ const AddElement = props => {
51
55
  } = props;
52
56
  const ADD_ELEMENTS = FREE_GRID_ELEMENTS.filter(f => (hideTools || []).indexOf(f.actionType) === -1);
53
57
  return /*#__PURE__*/_jsx(Box, {
58
+ sx: {
59
+ maxHeight: "500px",
60
+ overflowY: 'auto'
61
+ },
54
62
  children: /*#__PURE__*/_jsx(List, {
55
63
  className: "item-list-wrpr",
56
64
  children: ADD_ELEMENTS.map(m => {
@@ -11,6 +11,7 @@ const sectionOptions = ["addElementInSection", "settings", "moveUp", "moveDown",
11
11
  const formOptions = ["drag", "edit", "settings", "addFormField", "workFlow", "saveAsTemplate", "close"];
12
12
  const signatureOptions = ["signatureSettings", "saveAsTemplate", "close"];
13
13
  const signOptions = ["removeSign", "saveAsTemplate", "close"];
14
+ const dividerOptions = ["settings", "saveAsTemplate", "close"];
14
15
  const itemOptions = {
15
16
  default: commonOptions,
16
17
  text: textOptions,
@@ -24,6 +25,7 @@ const itemOptions = {
24
25
  embedScript: embedScriptOptions,
25
26
  video: videoOptions,
26
27
  signature: signatureOptions,
27
- sign: signOptions
28
+ sign: signOptions,
29
+ divider: dividerOptions
28
30
  };
29
31
  export default itemOptions;
@@ -44,9 +44,12 @@ const useFreeGridStyles = ({
44
44
  zIndex: 100
45
45
  }
46
46
  },
47
+ "&.type_text": {
48
+ minHeight: "fit-content !important",
49
+ wordBreak: "break-all"
50
+ },
47
51
  "&.enable-1, &.enable-2": {
48
52
  "&.type_text": {
49
- minHeight: "fit-content !important",
50
53
  // for dark theme
51
54
  // pages needs no color
52
55
  "&.no-color": {
@@ -91,7 +94,6 @@ const useFreeGridStyles = ({
91
94
  },
92
95
  "&.enable-1": {
93
96
  "&.type_text": {
94
- wordBreak: "break-all",
95
97
  "*": {
96
98
  "::selection": {
97
99
  backgroundColor: "transparent !important",
@@ -1,14 +1,7 @@
1
1
  import React from "react";
2
- import { useSlateStatic } from "slate-react";
3
2
  import RedoIcon from "../../assets/svg/RedoIcon";
4
3
  import { jsx as _jsx } from "react/jsx-runtime";
5
4
  const RedoButton = () => {
6
- const editor = useSlateStatic();
7
- const onRedo = () => {
8
- editor?.redo();
9
- };
10
- return /*#__PURE__*/_jsx(RedoIcon, {
11
- onClick: onRedo
12
- });
5
+ return /*#__PURE__*/_jsx(RedoIcon, {});
13
6
  };
14
7
  export default RedoButton;
@@ -1,14 +1,7 @@
1
1
  import React from "react";
2
- import { useSlateStatic } from "slate-react";
3
2
  import UndoIcon from "../../assets/svg/UndoIcon";
4
3
  import { jsx as _jsx } from "react/jsx-runtime";
5
4
  const UndoButton = () => {
6
- const editor = useSlateStatic();
7
- const onUndo = () => {
8
- editor?.undo();
9
- };
10
- return /*#__PURE__*/_jsx(UndoIcon, {
11
- onClick: onUndo
12
- });
5
+ return /*#__PURE__*/_jsx(UndoIcon, {});
13
6
  };
14
7
  export default UndoButton;
@@ -42,6 +42,8 @@ const MiniToolbar = props => {
42
42
  const [popper, setPopper] = useState(null);
43
43
  const [anchorEl, setAnchorEl] = useState(null);
44
44
  const [fullScreen, setFullScreen] = useState(false);
45
+ const [undoCooldown, setUndoCooldown] = useState(false);
46
+ const [redoCooldown, setRedoCooldown] = useState(false);
45
47
  const [search, setSearch] = useState("");
46
48
  const PopupComponent = POPUP_TYPES[popper] || null;
47
49
  const open = Boolean(PopupComponent);
@@ -56,8 +58,9 @@ const MiniToolbar = props => {
56
58
  selectedElement,
57
59
  setSelectedElement
58
60
  } = useEditorContext();
59
- const canUndo = editor.history.undos.length > 0;
60
- const canRedo = editor.history.redos.length > 0;
61
+ const cooldownTime = 200;
62
+ const canUndo = editor.history.undos.length > 0 && !undoCooldown;
63
+ const canRedo = editor.history.redos.length > 0 && !redoCooldown;
61
64
  const [toolTip, setToolTip] = useState(false);
62
65
  const [data, setData] = useState(null);
63
66
  useEffect(() => {
@@ -72,6 +75,18 @@ const MiniToolbar = props => {
72
75
  }
73
76
  }, [editor.selection]);
74
77
  const handleClick = type => e => {
78
+ if (type === "undo" && canUndo && !undoCooldown) {
79
+ editor.undo();
80
+ setUndoCooldown(true);
81
+ setTimeout(() => setUndoCooldown(false), cooldownTime);
82
+ return;
83
+ }
84
+ if (type === "redo" && canRedo && !redoCooldown) {
85
+ editor.redo();
86
+ setRedoCooldown(true);
87
+ setTimeout(() => setRedoCooldown(false), cooldownTime);
88
+ return;
89
+ }
75
90
  if (type === "page-settings") {
76
91
  setToolTip(true);
77
92
  }
@@ -1,12 +1,13 @@
1
1
  import React, { useEffect, useState, useRef, forwardRef, useImperativeHandle } from "react";
2
2
  import { Transforms } from "slate";
3
- import { ReactEditor, useSlateStatic } from "slate-react";
3
+ import { ReactEditor, useSlate } from "slate-react";
4
4
  import { insertMention } from "../../utils/mentions";
5
5
  import ElementListCard from "./ElementsListCard";
6
6
  import MentionsListCard from "./MentionsListCard";
7
7
  import { Typography, Popper, Box, Paper } from "@mui/material";
8
8
  import usePopupStyle from "./Styles";
9
9
  import { useEditorContext } from "../../hooks/useMouseMove";
10
+ import { checkTypings } from "../../hooks/useMentions";
10
11
  import { jsx as _jsx } from "react/jsx-runtime";
11
12
  import { jsxs as _jsxs } from "react/jsx-runtime";
12
13
  const POPUP_LIST_TYPES = {
@@ -26,7 +27,7 @@ const MentionsPopup = /*#__PURE__*/forwardRef((props, ref) => {
26
27
  const classes = usePopupStyle(theme);
27
28
  const papperRef = useRef(null);
28
29
  const buttonRef = useRef(null);
29
- const editor = useSlateStatic();
30
+ const editor = useSlate();
30
31
  const ListElement = POPUP_LIST_TYPES[type] || null;
31
32
  const [anchorEl, setAnchorEl] = useState(null);
32
33
  let open = Boolean(anchorEl);
@@ -34,6 +35,19 @@ const MentionsPopup = /*#__PURE__*/forwardRef((props, ref) => {
34
35
  const {
35
36
  setOpenAI
36
37
  } = useEditorContext();
38
+ useEffect(() => {
39
+ const s = checkTypings(editor);
40
+ if (s?.type !== mentions.type) {
41
+ setMentions({
42
+ ...s
43
+ });
44
+ } else if (s?.type) {
45
+ // here we need to increase performance for search list update
46
+ setMentions({
47
+ ...s
48
+ });
49
+ }
50
+ }, [editor?.selection]);
37
51
  useEffect(() => {
38
52
  try {
39
53
  if (target && chars.length > 0) {
@@ -0,0 +1,49 @@
1
+ import React from "react";
2
+ import { Transforms, Node } from "slate";
3
+ import { Box } from "@mui/material";
4
+ import { StyleContent } from "../../../StyleBuilder";
5
+ import dividerStyle from "../../../StyleBuilder/dividerStyles";
6
+ import { jsx as _jsx } from "react/jsx-runtime";
7
+ const DividerSettings = props => {
8
+ const {
9
+ editor,
10
+ path,
11
+ customProps
12
+ } = props;
13
+ const item_path = path?.split("|").map(m => parseInt(m));
14
+ const element_path = [...item_path, 0];
15
+ const element = Node.get(editor, element_path);
16
+ const onChange = data => {
17
+ console.log("🚀 ~ onChange ~ data:", data);
18
+ console.log("🚀 ~ onChange ~ element:", element);
19
+ const updated_props = {
20
+ ...element,
21
+ ...data,
22
+ field_type: data?.element
23
+ };
24
+ delete updated_props.children;
25
+ Transforms.setNodes(editor, {
26
+ ...updated_props
27
+ }, {
28
+ at: element_path
29
+ });
30
+ };
31
+ const handleClose = () => {
32
+ console.log("close");
33
+ };
34
+ return /*#__PURE__*/_jsx(Box, {
35
+ component: "div",
36
+ className: "item-w",
37
+ children: dividerStyle?.map((m, i) => {
38
+ return /*#__PURE__*/_jsx(StyleContent, {
39
+ renderTabs: dividerStyle,
40
+ value: m.value,
41
+ element: element,
42
+ onChange: onChange,
43
+ customProps: customProps,
44
+ handleClose: handleClose
45
+ }, `tab_${m.value}_$${i}`);
46
+ })
47
+ });
48
+ };
49
+ export default DividerSettings;
@@ -13,6 +13,7 @@ const VideoSettings = props => {
13
13
  const item_path = path?.split("|").map(m => parseInt(m));
14
14
  const element_path = [...item_path, 0];
15
15
  const element = Node.get(editor, element_path);
16
+ const styleMaps = embedVideoStyle?.filter(f => !f?.hideOnFGS);
16
17
  const onChange = data => {
17
18
  const updated_props = {
18
19
  ...element,
@@ -32,9 +33,9 @@ const VideoSettings = props => {
32
33
  return /*#__PURE__*/_jsx(Box, {
33
34
  component: "div",
34
35
  className: "item-w",
35
- children: embedVideoStyle?.map((m, i) => {
36
+ children: styleMaps?.map((m, i) => {
36
37
  return /*#__PURE__*/_jsx(StyleContent, {
37
- renderTabs: embedVideoStyle,
38
+ renderTabs: styleMaps,
38
39
  value: m.value,
39
40
  element: element,
40
41
  onChange: onChange,
@@ -7,6 +7,7 @@ import AppHeaderSettings from "./AppHeaderSettings";
7
7
  import FormSettings from "./FormSettings";
8
8
  import TableSettings from "./TableSettings";
9
9
  import CodeSettings from "./CodeSettings";
10
+ import DividerSettings from "./DividerSettings";
10
11
  const SettingsComponents = {
11
12
  text: TextSettings,
12
13
  button: ButtonSettings,
@@ -16,6 +17,7 @@ const SettingsComponents = {
16
17
  appHeader: AppHeaderSettings,
17
18
  form: FormSettings,
18
19
  table: TableSettings,
19
- embedScript: CodeSettings
20
+ embedScript: CodeSettings,
21
+ divider: DividerSettings
20
22
  };
21
23
  export default SettingsComponents;
@@ -7,7 +7,8 @@ export const settingsLabel = {
7
7
  appHeader: "App Header Settings",
8
8
  form: "Form Settings",
9
9
  table: "Table Settings",
10
- embedScript: "Code Settings"
10
+ embedScript: "Code Settings",
11
+ divider: 'Divider Settings'
11
12
  };
12
13
  export const ItemTypes = {
13
14
  text: "Text",
@@ -19,5 +20,6 @@ export const ItemTypes = {
19
20
  form: "Form",
20
21
  table: "Table",
21
22
  embedScript: "Code",
22
- signature: "Signature"
23
+ signature: "Signature",
24
+ divider: 'Divider'
23
25
  };
@@ -24,6 +24,16 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
24
24
  import { Fragment as _Fragment } from "react/jsx-runtime";
25
25
  const ITEM_TYPES = ["child", "parent-container"];
26
26
  const EDIT_MODES = ["text", "form", "table"];
27
+ const DISABLE_RESIZING = {
28
+ bottom: false,
29
+ top: false,
30
+ left: false,
31
+ right: false,
32
+ topLeft: false,
33
+ topRight: false,
34
+ bottomLeft: false,
35
+ bottomRight: false
36
+ };
27
37
  const RnD = props => {
28
38
  const rndRef = useRef(null);
29
39
  const {
@@ -519,7 +529,9 @@ const RnD = props => {
519
529
  }) : {},
520
530
  disableDragging: readOnly || disableDragging || enable !== 1,
521
531
  suppressContentEditableWarning: true,
522
- enableResizing: readOnly ? false : enable && !active ? enableResizing : {},
532
+ enableResizing: readOnly ? false : enable && !active ? enableResizing : {
533
+ ...DISABLE_RESIZING
534
+ },
523
535
  ...getEventProps(),
524
536
  children: [/*#__PURE__*/_jsx("div", {
525
537
  id: `opt_ref_${str_path}`,
@@ -0,0 +1,56 @@
1
+ import Icon from "../Icon";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ const dividerStyle = [{
4
+ tab: "Border",
5
+ value: "sectionBorderRadius",
6
+ fields: [{
7
+ label: "Divider Color",
8
+ key: "borderColor",
9
+ type: "color",
10
+ infoIcon: /*#__PURE__*/_jsx(Icon, {
11
+ icon: "info"
12
+ })
13
+ }, {
14
+ label: "Divider Width",
15
+ key: "borderWidth",
16
+ type: "text",
17
+ placeholder: "1px",
18
+ width: 6
19
+ }, {
20
+ label: "Divider Style",
21
+ key: "borderStyle",
22
+ type: "textOptions",
23
+ width: 6,
24
+ options: [{
25
+ text: "Solid",
26
+ value: "solid"
27
+ }, {
28
+ text: "Dotted",
29
+ value: "dotted"
30
+ }, {
31
+ text: "Dashed",
32
+ value: "dashed"
33
+ }, {
34
+ text: "Double",
35
+ value: "double"
36
+ }, {
37
+ text: "Groove",
38
+ value: "groove"
39
+ }, {
40
+ text: "Ridge",
41
+ value: "ridge"
42
+ }, {
43
+ text: "Inset",
44
+ value: "inset"
45
+ }, {
46
+ text: "Outset",
47
+ value: "outset"
48
+ }],
49
+ renderOption: option => {
50
+ return /*#__PURE__*/_jsx("span", {
51
+ children: option.text
52
+ });
53
+ }
54
+ }]
55
+ }];
56
+ export default dividerStyle;
@@ -7,6 +7,30 @@ const embedVideoStyle = [{
7
7
  key: "url",
8
8
  type: "text"
9
9
  }]
10
+ }, {
11
+ tab: "Aspect Ratio",
12
+ value: "Aspect Ratio",
13
+ hideOnFGS: true,
14
+ fields: [{
15
+ label: "Aspect Ratio",
16
+ key: "aspectRatio",
17
+ type: "textOptions",
18
+ options: [{
19
+ text: "Cover (Default)",
20
+ value: ""
21
+ }, {
22
+ text: "16:9",
23
+ value: "16 / 9"
24
+ }, {
25
+ text: "9:16",
26
+ value: "9 / 16"
27
+ }],
28
+ renderOption: option => {
29
+ return /*#__PURE__*/_jsx("span", {
30
+ children: option.text
31
+ });
32
+ }
33
+ }]
10
34
  }, {
11
35
  tab: "Position",
12
36
  value: "position",
@@ -1,5 +1,5 @@
1
1
  import React, { useEffect, useState } from "react";
2
- import { Grid, TextField, InputAdornment, Typography } from "@mui/material";
2
+ import { Grid, TextField, InputAdornment, Typography, Tooltip } from "@mui/material";
3
3
  import ColorPickerButton from "../../ColorPickerButton";
4
4
  import { jsx as _jsx } from "react/jsx-runtime";
5
5
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -46,15 +46,30 @@ const Color = props => {
46
46
  item: true,
47
47
  xs: 12,
48
48
  className: "btnColorPicker",
49
- children: [/*#__PURE__*/_jsx(Typography, {
49
+ children: [/*#__PURE__*/_jsxs(Typography, {
50
50
  variant: "body1",
51
51
  color: "primary",
52
52
  sx: {
53
53
  fontSize: "14px",
54
54
  fontWeight: 500,
55
- marginBottom: "5px"
55
+ marginBottom: "5px",
56
+ display: 'flex',
57
+ alignItems: 'center',
58
+ '& svg': {
59
+ width: '20px',
60
+ height: '20px'
61
+ }
56
62
  },
57
- children: label
63
+ children: [label, data?.infoIcon ? /*#__PURE__*/_jsx(Tooltip, {
64
+ arrow: true,
65
+ title: "Note: If color gradient is used, divider styles will not apply",
66
+ children: /*#__PURE__*/_jsx("span", {
67
+ style: {
68
+ display: 'inline-block'
69
+ },
70
+ children: data?.infoIcon
71
+ })
72
+ }) : null]
58
73
  }), /*#__PURE__*/_jsx(TextField, {
59
74
  fullWidth: true,
60
75
  value: value,
@@ -43,7 +43,7 @@ const getStartEnd = ({
43
43
  const firstChar = word[0];
44
44
 
45
45
  // Handle the commands
46
- if (firstChar === '@') {
46
+ if (firstChar === "@") {
47
47
  // Only trigger @ if preceded by a space
48
48
  const isPrecededBySpace = Editor.string(editor, {
49
49
  anchor: {
@@ -60,7 +60,7 @@ const getStartEnd = ({
60
60
  type: TYPES[firstChar]
61
61
  };
62
62
  }
63
- } else if (firstChar === '/') {
63
+ } else if (firstChar === "/") {
64
64
  return {
65
65
  word,
66
66
  search: word.substring(1),
@@ -81,6 +81,41 @@ const getStartEnd = ({
81
81
  };
82
82
  }
83
83
  };
84
+ export const checkTypings = editor => {
85
+ console.log(editor?.selection);
86
+ if (editor?.selection) {
87
+ const {
88
+ target,
89
+ search,
90
+ type
91
+ } = getStartEnd({
92
+ selection: editor?.selection,
93
+ editor
94
+ });
95
+ if (target && type) {
96
+ return {
97
+ target,
98
+ search,
99
+ index: 0,
100
+ type: type
101
+ };
102
+ } else {
103
+ return {
104
+ target: null,
105
+ search: null,
106
+ index: null,
107
+ type: null
108
+ };
109
+ }
110
+ } else {
111
+ return {
112
+ target: null,
113
+ search: null,
114
+ index: null,
115
+ type: null
116
+ };
117
+ }
118
+ };
84
119
  const useMentions = props => {
85
120
  const {
86
121
  editor,
@@ -92,7 +127,7 @@ const useMentions = props => {
92
127
  search: null,
93
128
  type: null
94
129
  });
95
- useEffect(() => {
130
+ const checkTypings = () => {
96
131
  if (selection && Range.isCollapsed(selection)) {
97
132
  const {
98
133
  target,
@@ -125,6 +160,9 @@ const useMentions = props => {
125
160
  type: null
126
161
  });
127
162
  }
163
+ };
164
+ useEffect(() => {
165
+ checkTypings();
128
166
  }, [selection, editor]);
129
167
  return [mentions, setMentions];
130
168
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "4.6.8",
3
+ "version": "4.7.0",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"