@flozy/editor 10.2.1 → 10.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Editor/ChatEditor.js +17 -16
- package/dist/Editor/CommonEditor.js +120 -16
- package/dist/Editor/DialogWrapper.js +31 -25
- package/dist/Editor/Editor.css +46 -8
- package/dist/Editor/Elements/AI/PopoverAIInput.js +11 -3
- package/dist/Editor/Elements/Accordion/Accordion.js +6 -2
- package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -3
- package/dist/Editor/Elements/Button/EditorButton.js +25 -9
- package/dist/Editor/Elements/Carousel/CarouselItem.js +2 -1
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +61 -14
- package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +10 -7
- package/dist/Editor/Elements/Color Picker/Styles.js +15 -13
- package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +4 -2
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +454 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +21 -6
- package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +5 -2
- package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +3 -2
- package/dist/Editor/Elements/DataView/Layouts/Options/index.js +11 -0
- package/dist/Editor/Elements/DataView/Layouts/ViewData.js +8 -4
- package/dist/Editor/Elements/Embed/Image.js +3 -2
- package/dist/Editor/Elements/Embed/Video.js +1 -1
- package/dist/Editor/Elements/EmbedScript/Code.js +14 -2
- package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +57 -28
- package/dist/Editor/Elements/EmbedScript/styles.js +89 -0
- package/dist/Editor/Elements/Form/Form.js +181 -168
- package/dist/Editor/Elements/Form/FormElements/FormText.js +23 -6
- package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +3 -2
- package/dist/Editor/Elements/Form/FormField.js +13 -6
- package/dist/Editor/Elements/Form/Workflow/Styles.js +24 -22
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +36 -31
- package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
- package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
- package/dist/Editor/Elements/FreeGrid/helper.js +113 -0
- package/dist/Editor/Elements/FreeGrid/styles.js +75 -7
- package/dist/Editor/Elements/Grid/Grid.js +14 -2
- package/dist/Editor/Elements/Grid/GridItem.js +1 -1
- package/dist/Editor/Elements/List/CheckList.js +3 -2
- package/dist/Editor/Elements/Search/SearchAttachment.js +40 -9
- package/dist/Editor/Elements/Search/SearchButton.js +9 -8
- package/dist/Editor/Elements/Search/SearchList.js +9 -7
- package/dist/Editor/Elements/Signature/Signature.css +2 -1
- package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
- package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
- package/dist/Editor/Elements/SimpleText/index.js +6 -1
- package/dist/Editor/Elements/SimpleText/style.js +2 -2
- package/dist/Editor/Elements/Table/DragButton.js +0 -1
- package/dist/Editor/Elements/Table/Draggable.js +6 -2
- package/dist/Editor/Elements/Table/Styles.js +7 -0
- package/dist/Editor/Elements/Table/Table.js +3 -3
- package/dist/Editor/Elements/Table/TableCell.js +24 -5
- package/dist/Editor/Elements/Title/title.js +6 -6
- package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
- package/dist/Editor/MiniEditor.js +2 -1
- package/dist/Editor/Styles/EditorStyles.js +5 -5
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
- package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
- package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
- package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -12
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +100 -27
- package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
- package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
- package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
- package/dist/Editor/assets/svg/BackIcon.js +18 -0
- package/dist/Editor/assets/svg/ClearAllRounded.js +31 -0
- package/dist/Editor/assets/svg/ResetIconNew.js +23 -0
- package/dist/Editor/assets/svg/SettingsIcon.js +1 -0
- package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
- package/dist/Editor/common/ColorPickerButton.js +38 -16
- package/dist/Editor/common/CustomColorPicker/index.js +130 -0
- package/dist/Editor/common/CustomColorPicker/style.js +53 -0
- package/dist/Editor/common/CustomDialog2/index.js +94 -0
- package/dist/Editor/common/CustomDialog2/style.js +67 -0
- package/dist/Editor/common/CustomSelect.js +43 -0
- package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
- package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
- package/dist/Editor/common/Icon.js +31 -1
- package/dist/Editor/common/ImageSelector/Styles.js +3 -9
- package/dist/Editor/common/LinkSettings/NavComponents.js +34 -8
- package/dist/Editor/common/LinkSettings/index.js +84 -68
- package/dist/Editor/common/LinkSettings/style.js +245 -30
- package/dist/Editor/common/RnD/ElementOptions/Actions.js +13 -14
- package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +1 -0
- package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
- package/dist/Editor/common/RnD/ElementOptions/styles.js +28 -1
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +6 -5
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
- package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/styles.js +147 -12
- package/dist/Editor/common/RnD/OptionsPopup/index.js +8 -5
- package/dist/Editor/common/RnD/OptionsPopup/style.js +121 -19
- package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +8 -5
- package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
- package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
- package/dist/Editor/common/RnD/Utils/gridDropItem.js +28 -19
- package/dist/Editor/common/RnD/Utils/index.js +3 -1
- package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +48 -54
- package/dist/Editor/common/RnD/VirtualElement/helper.js +143 -131
- package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
- package/dist/Editor/common/RnD/index.js +6 -11
- package/dist/Editor/common/Select/index.js +2 -0
- package/dist/Editor/common/Shorthands/elements.js +65 -11
- package/dist/Editor/common/SnackBar/index.js +43 -0
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +7 -6
- package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +13 -6
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
- package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +5 -7
- package/dist/Editor/common/Uploader.js +8 -0
- package/dist/Editor/common/iconListV2.js +156 -6
- package/dist/Editor/common/iconslist.js +24 -0
- package/dist/Editor/commonStyle.js +168 -62
- package/dist/Editor/helper/index.js +4 -0
- package/dist/Editor/helper/textIndeces.js +58 -0
- package/dist/Editor/helper/theme.js +203 -2
- package/dist/Editor/hooks/useEditorTheme.js +153 -0
- package/dist/Editor/hooks/useMouseMove.js +8 -5
- package/dist/Editor/hooks/useTable.js +5 -4
- package/dist/Editor/hooks/useThemeValues.js +63 -0
- package/dist/Editor/plugins/withEmbeds.js +1 -1
- package/dist/Editor/plugins/withHTML.js +3 -1
- package/dist/Editor/plugins/withTable.js +1 -1
- package/dist/Editor/theme/ThemeList.js +50 -173
- package/dist/Editor/theme/index.js +149 -0
- package/dist/Editor/themeSettings/ActiveTheme.js +82 -0
- package/dist/Editor/themeSettings/buttons/index.js +300 -0
- package/dist/Editor/themeSettings/buttons/style.js +23 -0
- package/dist/Editor/themeSettings/colorTheme/index.js +310 -0
- package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
- package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
- package/dist/Editor/themeSettings/fonts/index.js +240 -0
- package/dist/Editor/themeSettings/fonts/style.js +62 -0
- package/dist/Editor/themeSettings/icons.js +60 -0
- package/dist/Editor/themeSettings/index.js +361 -0
- package/dist/Editor/themeSettings/style.js +299 -0
- package/dist/Editor/themeSettingsAI/icons.js +96 -0
- package/dist/Editor/themeSettingsAI/index.js +355 -0
- package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
- package/dist/Editor/themeSettingsAI/style.js +332 -0
- package/dist/Editor/utils/SlateUtilityFunctions.js +169 -45
- package/dist/Editor/utils/accordion.js +14 -4
- package/dist/Editor/utils/button.js +1 -17
- package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
- package/dist/Editor/utils/draftToSlate.js +3 -2
- package/dist/Editor/utils/events.js +50 -6
- package/dist/Editor/utils/font.js +40 -37
- package/dist/Editor/utils/form.js +4 -4
- package/dist/Editor/utils/formfield.js +8 -2
- package/dist/Editor/utils/helper.js +109 -19
- package/dist/Editor/utils/signature.js +2 -9
- package/package.json +4 -4
@@ -1,6 +1,6 @@
|
|
1
1
|
import React, { useCallback, useMemo, useRef, useImperativeHandle, forwardRef, useState } from "react";
|
2
|
-
import { Editable, Slate, ReactEditor } from
|
3
|
-
import { createEditor, Transforms, Editor } from
|
2
|
+
import { Editable, Slate, ReactEditor } from "slate-react";
|
3
|
+
import { createEditor, Transforms, Editor } from "slate";
|
4
4
|
import withCommon from "./hooks/withCommon";
|
5
5
|
import { getBlock, getMarked, serializeMentions } from "./utils/chatEditor/SlateUtilityFunctions";
|
6
6
|
import MiniTextFormat from "./Toolbar/PopupTool/MiniTextFormat";
|
@@ -33,15 +33,15 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
33
33
|
isMobile = false,
|
34
34
|
debounceTimeOut = 10,
|
35
35
|
isMarkDown = false,
|
36
|
-
markDownContent =
|
36
|
+
markDownContent = "",
|
37
37
|
translation
|
38
38
|
} = props;
|
39
39
|
const classes = usePopupStyle(theme);
|
40
40
|
const convertedContent = draftToSlate({
|
41
41
|
data: content && content?.length > 0 ? content : [{
|
42
|
-
type:
|
42
|
+
type: "paragraph",
|
43
43
|
children: [{
|
44
|
-
text:
|
44
|
+
text: ""
|
45
45
|
}]
|
46
46
|
}]
|
47
47
|
});
|
@@ -153,14 +153,6 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
153
153
|
// needLayout = true,
|
154
154
|
} = otherProps || {};
|
155
155
|
const mentionsRef = useRef();
|
156
|
-
const customProps = {
|
157
|
-
...(otherProps || {}),
|
158
|
-
hideTools: ["settings", "add_column", "drag", "resize"],
|
159
|
-
readOnly: isReadOnly,
|
160
|
-
editorPlaceholder: "Write Something",
|
161
|
-
page_id: 1,
|
162
|
-
translation: translation || translationMock
|
163
|
-
};
|
164
156
|
const [mentions, setMentions] = useMentions({
|
165
157
|
editor,
|
166
158
|
selection: editor?.selection
|
@@ -222,6 +214,15 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
222
214
|
debounced(newValue);
|
223
215
|
debouncedValue.current = newValue;
|
224
216
|
};
|
217
|
+
const dummyTranslation = () => {};
|
218
|
+
const customProps = {
|
219
|
+
...(otherProps || {}),
|
220
|
+
hideTools: ["settings", "add_column", "drag", "resize"],
|
221
|
+
readOnly: isReadOnly,
|
222
|
+
editorPlaceholder: "Write Something",
|
223
|
+
page_id: 1,
|
224
|
+
translation: translation || translationMock || dummyTranslation
|
225
|
+
};
|
225
226
|
const Element = props => {
|
226
227
|
return getBlock(props);
|
227
228
|
};
|
@@ -257,7 +258,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
257
258
|
editor
|
258
259
|
});
|
259
260
|
} else if (event.key === "Enter" && !isMobile) {
|
260
|
-
const isEmpty = debouncedValue?.current.length === 1 && debouncedValue?.current[0].type ===
|
261
|
+
const isEmpty = debouncedValue?.current.length === 1 && debouncedValue?.current[0].type === "paragraph" && debouncedValue?.current[0].children.length === 1 && debouncedValue?.current[0].children[0].text === "";
|
261
262
|
if (isEmpty) {
|
262
263
|
event.preventDefault();
|
263
264
|
return;
|
@@ -297,10 +298,10 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
297
298
|
}
|
298
299
|
};
|
299
300
|
|
301
|
+
const html = isMarkDown ? convertMDToHTML(markDownContent) : null;
|
300
302
|
const handleFocus = () => {
|
301
303
|
setIsFocused(true);
|
302
304
|
};
|
303
|
-
const html = isMarkDown ? convertMDToHTML(markDownContent) : null;
|
304
305
|
return !isMarkDown ? /*#__PURE__*/_jsx(EditorProvider, {
|
305
306
|
theme: theme,
|
306
307
|
editor: editor,
|
@@ -314,13 +315,13 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
314
315
|
closeMainPopup: handleClose,
|
315
316
|
customProps: customProps
|
316
317
|
}), /*#__PURE__*/_jsx(Editable, {
|
317
|
-
onFocus: handleFocus,
|
318
318
|
className: "chatEditorRoot",
|
319
319
|
renderElement: renderElement,
|
320
320
|
renderLeaf: renderLeaf,
|
321
321
|
decorate: decorators,
|
322
322
|
placeholder: "Start typing ...",
|
323
323
|
spellCheck: true,
|
324
|
+
onFocus: handleFocus,
|
324
325
|
onBlur: handleBlur,
|
325
326
|
onKeyDown: onKeyDown,
|
326
327
|
onPaste: handlePaste,
|
@@ -1,7 +1,7 @@
|
|
1
1
|
/* eslint-disable no-unused-vars */
|
2
|
-
import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } from "react";
|
2
|
+
import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle, createContext } from "react";
|
3
3
|
import PropTypes from "prop-types";
|
4
|
-
import { createEditor, Range, Transforms } from "slate";
|
4
|
+
import { createEditor, Editor, Range, Transforms } from "slate";
|
5
5
|
import { Slate, Editable, ReactEditor } from "slate-react";
|
6
6
|
import { useDebouncedCallback } from "use-debounce";
|
7
7
|
import { getMarked, getBlock } from "./utils/SlateUtilityFunctions";
|
@@ -10,14 +10,14 @@ import { draftToSlate } from "./utils/draftToSlate";
|
|
10
10
|
import useMentions from "./hooks/useMentions";
|
11
11
|
import MentionsPopup from "./common/MentionsPopup";
|
12
12
|
import { RemoteCursorOverlay } from "./RemoteCursorOverlay/Overlay";
|
13
|
-
import { mentionsEvent, commands, indentation, escapeEvent, enterEvent, upDownArrowKeyEvents } from "./utils/events";
|
13
|
+
import { mentionsEvent, commands, indentation, escapeEvent, enterEvent, upDownArrowKeyEvents, handleAccordionOnBackspace } from "./utils/events";
|
14
14
|
import withCommon from "./hooks/withCommon";
|
15
15
|
import DialogWrapper from "./DialogWrapper";
|
16
16
|
import { serializeToText } from "./utils/serializeToText";
|
17
17
|
import { getPageSettings } from "./utils/pageSettings";
|
18
18
|
import { getThumbnailImage, invertColor, pageTextStyle } from "./helper";
|
19
19
|
import PopupTool from "./Toolbar/PopupTool";
|
20
|
-
import { Box, Typography, useTheme } from "@mui/material";
|
20
|
+
import { Box, Typography, useTheme, IconButton } from "@mui/material";
|
21
21
|
import Shorthands from "./common/Shorthands";
|
22
22
|
import MiniToolbar from "./Toolbar/Mini/MiniToolbar";
|
23
23
|
import { EditorProvider } from "./hooks/useMouseMove";
|
@@ -26,9 +26,12 @@ import editorStyles from "./Styles/EditorStyles";
|
|
26
26
|
import DragAndDrop from "./common/DnD";
|
27
27
|
import Section from "./common/Section";
|
28
28
|
import decorators from "./utils/Decorators";
|
29
|
-
import {
|
29
|
+
import { getTRBLBreakPoints, getVariableValue, getBreakpointLineSpacing } from "./helper/theme";
|
30
30
|
import { getInitialValue, handleInsertLastElement, isEverythingSelected, isFreeGrid, isFreeGridFragment, isRestrictedNode, outsideEditorClickLabel } from "./utils/helper";
|
31
31
|
import useWindowResize from "./hooks/useWindowResize";
|
32
|
+
import { getTheme } from "./theme";
|
33
|
+
import ThemeSettings from "./themeSettings";
|
34
|
+
import ThemeSettingsAI from "./themeSettingsAI";
|
32
35
|
import PopoverAIInput from "./Elements/AI/PopoverAIInput";
|
33
36
|
import RnDCopy from "./common/RnD/RnDCopy";
|
34
37
|
import SwitchViewport from "./common/RnD/SwitchViewport/SwitchViewport";
|
@@ -37,9 +40,12 @@ import "./font.css";
|
|
37
40
|
import "./Editor.css";
|
38
41
|
import "animate.css";
|
39
42
|
import FontLoader from "./common/FontLoader/FontLoader";
|
43
|
+
import { ThemeAIIcon, ThemePaintIcon } from "./assets/svg/ThemeIcons";
|
40
44
|
import { CustomDialogComponent } from "./common/CustomDialog";
|
45
|
+
import { extractTextWithPath, replaceTextPath } from "./helper/textIndeces.js";
|
41
46
|
import { jsx as _jsx } from "react/jsx-runtime";
|
42
47
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
48
|
+
export const ThemeContext = /*#__PURE__*/createContext(null);
|
43
49
|
const Item = /*#__PURE__*/forwardRef(({
|
44
50
|
children,
|
45
51
|
...props
|
@@ -81,6 +87,7 @@ const updateTopBanner = (content = [], setTopBanner) => {
|
|
81
87
|
return firstNode?.type === "topbanner" ? firstNode : null;
|
82
88
|
});
|
83
89
|
};
|
90
|
+
const dummyTranslation = () => {};
|
84
91
|
const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
85
92
|
const {
|
86
93
|
id,
|
@@ -94,6 +101,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
94
101
|
otherProps,
|
95
102
|
isIframe,
|
96
103
|
theme,
|
104
|
+
showThemeButtons,
|
97
105
|
showViewport = false,
|
98
106
|
overrideWrapperStyles = {},
|
99
107
|
translation
|
@@ -101,7 +109,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
101
109
|
const editorWrapper = useRef();
|
102
110
|
const mentionsRef = useRef();
|
103
111
|
const convertedContent = draftToSlate({
|
104
|
-
data: content
|
112
|
+
data: content,
|
113
|
+
needLayout: otherProps?.needLayout
|
105
114
|
});
|
106
115
|
const [value, setValue] = useState(convertedContent);
|
107
116
|
const [isInteracted, setIsInteracted] = useState(false);
|
@@ -145,10 +154,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
145
154
|
const {
|
146
155
|
bannerSpacing,
|
147
156
|
pageBgImage,
|
148
|
-
pageColor,
|
157
|
+
pageColor = "",
|
149
158
|
color: pageTextColor,
|
150
159
|
pageWidth,
|
151
160
|
maxWidth: pageMaxWidth,
|
161
|
+
theme: selectedTheme,
|
152
162
|
lineHeight
|
153
163
|
} = pageSt?.pageProps || {
|
154
164
|
bannerSpacing: {
|
@@ -160,10 +170,17 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
160
170
|
};
|
161
171
|
const classes = editorStyles({
|
162
172
|
padHeight: !fullScreen ? otherProps?.padHeight : 20,
|
163
|
-
placeHolderColor: invertColor(pageColor || "#FFF"),
|
173
|
+
placeHolderColor: invertColor(pageColor.startsWith("var") ? getVariableValue(pageColor) : pageColor || "#FFF"),
|
164
174
|
theme,
|
165
175
|
overrideWrapperStyles
|
166
176
|
});
|
177
|
+
const [openTheme, setOpenTheme] = useState(false);
|
178
|
+
const [openAITheme, setOpenAITheme] = useState(false);
|
179
|
+
const [, setThemeUpdated] = useState(0);
|
180
|
+
const triggerRender = () => {
|
181
|
+
setThemeUpdated(prev => prev + 1); // Incrementing forces a re-render while updating theme
|
182
|
+
};
|
183
|
+
|
167
184
|
const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
|
168
185
|
useEffect(() => {
|
169
186
|
setValue(draftToSlate({
|
@@ -177,11 +194,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
177
194
|
const debounced = useDebouncedCallback(
|
178
195
|
// function
|
179
196
|
value => {
|
197
|
+
debouncedValue.current = value;
|
180
198
|
const {
|
181
199
|
value: strVal,
|
182
200
|
...restVal
|
183
201
|
} = getOnSaveData(value);
|
184
|
-
debouncedValue.current = value;
|
185
202
|
onSave(strVal, restVal);
|
186
203
|
},
|
187
204
|
// delay in ms
|
@@ -192,7 +209,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
192
209
|
return {
|
193
210
|
value: JSON.stringify(val),
|
194
211
|
text: text,
|
195
|
-
title: serializeToText(title?.children) || "
|
212
|
+
title: serializeToText(title?.children) || ""
|
196
213
|
};
|
197
214
|
};
|
198
215
|
const getTitleSaveData = title => {
|
@@ -305,6 +322,12 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
305
322
|
redo() {
|
306
323
|
editor?.redo();
|
307
324
|
},
|
325
|
+
toggleTheme() {
|
326
|
+
setOpenTheme(!openTheme);
|
327
|
+
},
|
328
|
+
toggleAITheme() {
|
329
|
+
setOpenAITheme(!openAITheme);
|
330
|
+
},
|
308
331
|
getPageSettings: {
|
309
332
|
background: pageBgImage && pageBgImage !== "none" ? `url(${pageBgImage})` : pageColor || ""
|
310
333
|
}
|
@@ -345,6 +368,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
345
368
|
const onDrawerOpen = status => {
|
346
369
|
setIsDrawerOpen(status);
|
347
370
|
};
|
371
|
+
const lineH = getBreakpointLineSpacing(lineHeight, breakpoint || (isMobile ? "xs" : ""));
|
348
372
|
const isReadOnly = readOnly === "readonly";
|
349
373
|
const customProps = {
|
350
374
|
...(otherProps || {}),
|
@@ -357,9 +381,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
357
381
|
onDrawerOpen: onDrawerOpen,
|
358
382
|
ICON_API: "https://assets.agenciflow.com",
|
359
383
|
translation: translationFn,
|
360
|
-
getTitleSaveData
|
384
|
+
getTitleSaveData,
|
385
|
+
customLineHeight: lineH
|
361
386
|
};
|
362
|
-
const lineH = getBreakpointLineSpacing(lineHeight, breakpoint);
|
363
387
|
const renderElement = useCallback(props => {
|
364
388
|
return /*#__PURE__*/_jsx(Element, {
|
365
389
|
...props,
|
@@ -427,6 +451,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
427
451
|
} else if (event.key === "ArrowDown" && otherProps?.tagName !== "Pages") {
|
428
452
|
upDownArrowKeyEvents(event, editor);
|
429
453
|
} else if (event.key === "Backspace") {
|
454
|
+
const isAccordion = handleAccordionOnBackspace(event, editor);
|
455
|
+
if (isAccordion) {
|
456
|
+
return;
|
457
|
+
}
|
430
458
|
const isNodeRestricted = isRestrictedNode(event, editor);
|
431
459
|
if (isNodeRestricted) {
|
432
460
|
return;
|
@@ -502,6 +530,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
502
530
|
}
|
503
531
|
return style;
|
504
532
|
}, [pageBgImage, pageColor, pageTextColor]);
|
533
|
+
const themeProps = getTheme(selectedTheme);
|
505
534
|
|
506
535
|
// const handleContextMenu = (e) => {
|
507
536
|
// if (!readOnly) {
|
@@ -532,14 +561,75 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
532
561
|
console.log("handleCursorScroll", err);
|
533
562
|
}
|
534
563
|
};
|
564
|
+
window.getTextIndeces = () => {
|
565
|
+
try {
|
566
|
+
const textWithPaths = extractTextWithPath(editor.children, []);
|
567
|
+
return textWithPaths;
|
568
|
+
} catch (err) {
|
569
|
+
console.log(err);
|
570
|
+
}
|
571
|
+
};
|
572
|
+
window.replaceTextIndeces = (path_data = []) => {
|
573
|
+
try {
|
574
|
+
const replacedJson = replaceTextPath(JSON.parse(JSON.stringify(editor.children)), path_data);
|
575
|
+
|
576
|
+
// loop delete all
|
577
|
+
editor.children.forEach(() => {
|
578
|
+
Transforms.delete(editor, {
|
579
|
+
at: [0]
|
580
|
+
});
|
581
|
+
});
|
582
|
+
|
583
|
+
// Insert new nodes
|
584
|
+
Transforms.insertNodes(editor, replacedJson, {
|
585
|
+
at: [0]
|
586
|
+
});
|
587
|
+
} catch (err) {
|
588
|
+
console.log(err);
|
589
|
+
}
|
590
|
+
};
|
591
|
+
window.replaceEditorContent = (fragments = []) => {
|
592
|
+
try {
|
593
|
+
// loop delete all
|
594
|
+
editor.children.forEach(() => {
|
595
|
+
Transforms.delete(editor, {
|
596
|
+
at: [0]
|
597
|
+
});
|
598
|
+
});
|
599
|
+
|
600
|
+
// Insert new nodes
|
601
|
+
Transforms.insertNodes(editor, fragments, {
|
602
|
+
at: [0]
|
603
|
+
});
|
604
|
+
} catch (err) {
|
605
|
+
console.log(err);
|
606
|
+
}
|
607
|
+
};
|
535
608
|
return /*#__PURE__*/_jsxs(EditorProvider, {
|
536
609
|
theme: theme,
|
537
610
|
editor: editor,
|
538
|
-
|
611
|
+
openTheme: openTheme,
|
612
|
+
setOpenTheme: setOpenTheme,
|
613
|
+
triggerRender: triggerRender,
|
614
|
+
children: [showThemeButtons ? /*#__PURE__*/_jsxs("div", {
|
615
|
+
className: "theme-buttons",
|
616
|
+
children: [/*#__PURE__*/_jsx(IconButton, {
|
617
|
+
onClick: () => setOpenTheme(true),
|
618
|
+
className: "themePaintIcon",
|
619
|
+
children: /*#__PURE__*/_jsx(ThemePaintIcon, {})
|
620
|
+
}), /*#__PURE__*/_jsx(IconButton, {
|
621
|
+
onClick: () => setOpenAITheme(true),
|
622
|
+
style: {
|
623
|
+
marginTop: "4px"
|
624
|
+
},
|
625
|
+
children: /*#__PURE__*/_jsx(ThemeAIIcon, {})
|
626
|
+
})]
|
627
|
+
}) : null, /*#__PURE__*/_jsx(DialogWrapper, {
|
539
628
|
classes: classes,
|
540
629
|
...props,
|
541
630
|
fullScreen: fullScreen,
|
542
631
|
footer: footer || "",
|
632
|
+
selectedTheme: selectedTheme,
|
543
633
|
children: /*#__PURE__*/_jsxs(Box, {
|
544
634
|
component: "div",
|
545
635
|
className: `et-wrpr stimulate-${breakpoint} ${editorClass || ""} ${isIframe ? "iframe-editor" : ""}`,
|
@@ -574,6 +664,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
574
664
|
children: /*#__PURE__*/_jsxs(Box, {
|
575
665
|
component: "div",
|
576
666
|
className: "max-content",
|
667
|
+
sx: themeProps?.sxProps || {},
|
577
668
|
"data-info": outsideEditorClickLabel,
|
578
669
|
children: [renderTopBanner(), /*#__PURE__*/_jsx("div", {
|
579
670
|
className: "scroll-area",
|
@@ -618,8 +709,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
618
709
|
chars: chars,
|
619
710
|
type: type,
|
620
711
|
theme: theme,
|
621
|
-
|
622
|
-
|
712
|
+
customProps: customProps,
|
713
|
+
otherProps: customProps
|
623
714
|
}) : null, /*#__PURE__*/_jsx(RnDCopy, {
|
624
715
|
readOnly: readOnly
|
625
716
|
})]
|
@@ -642,6 +733,18 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
642
733
|
"data-info": outsideEditorClickLabel,
|
643
734
|
onClick: handleFooterClick,
|
644
735
|
children: footer
|
736
|
+
}), openTheme ? /*#__PURE__*/_jsx(ThemeSettings, {
|
737
|
+
open: openTheme,
|
738
|
+
setOpen: setOpenTheme,
|
739
|
+
editor: editor,
|
740
|
+
services: otherProps?.services,
|
741
|
+
appTheme: theme,
|
742
|
+
customProps: customProps
|
743
|
+
}) : null, /*#__PURE__*/_jsx(ThemeSettingsAI, {
|
744
|
+
openAITheme: openAITheme,
|
745
|
+
setOpenAITheme: setOpenAITheme,
|
746
|
+
onSaveTheme: otherProps?.onSaveTheme,
|
747
|
+
theme: theme
|
645
748
|
})]
|
646
749
|
})
|
647
750
|
}), !readOnly ? /*#__PURE__*/_jsx(PopupTool, {
|
@@ -650,8 +753,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
650
753
|
setIsTextSelected: setIsTextSelected,
|
651
754
|
customProps: customProps,
|
652
755
|
editorWrapper: editorWrapper
|
653
|
-
}) : null, !readOnly
|
756
|
+
}) : null, !readOnly ? /*#__PURE__*/_jsx(SwitchViewport, {
|
654
757
|
breakpoint: breakpoint,
|
758
|
+
show: showViewport,
|
655
759
|
onChange: b => onSwitchBreakpoint(b),
|
656
760
|
translation: translationFn
|
657
761
|
}) : null]
|
@@ -2,6 +2,7 @@ import React from "react";
|
|
2
2
|
import { Dialog, DialogTitle, DialogContent, IconButton, Grid } from "@mui/material";
|
3
3
|
import CloseIcon from "@mui/icons-material/Close";
|
4
4
|
import ViewportStimulator from "./common/RnD/Theme/ViewportStimulator";
|
5
|
+
import MainThemeProvider from "./common/RnD/Theme/MainThemeProvider";
|
5
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
6
7
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
7
8
|
const DialogWrapper = props => {
|
@@ -9,40 +10,45 @@ const DialogWrapper = props => {
|
|
9
10
|
fullScreen,
|
10
11
|
onClose,
|
11
12
|
children,
|
12
|
-
classes
|
13
|
+
classes,
|
14
|
+
selectedTheme
|
13
15
|
} = props;
|
14
|
-
return fullScreen ? /*#__PURE__*/
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
},
|
22
|
-
sx: classes.fullScreenWrapper,
|
23
|
-
children: [/*#__PURE__*/_jsx(DialogTitle, {
|
16
|
+
return fullScreen ? /*#__PURE__*/_jsx(MainThemeProvider, {
|
17
|
+
userSelectedTheme: selectedTheme,
|
18
|
+
children: /*#__PURE__*/_jsxs(Dialog, {
|
19
|
+
className: `dialogComp`,
|
20
|
+
open: fullScreen,
|
21
|
+
fullScreen: fullScreen,
|
22
|
+
onClose: onClose,
|
24
23
|
style: {
|
25
|
-
|
24
|
+
zIndex: 1000
|
26
25
|
},
|
27
|
-
|
26
|
+
sx: classes.fullScreenWrapper,
|
27
|
+
children: [/*#__PURE__*/_jsx(DialogTitle, {
|
28
|
+
style: {
|
29
|
+
padding: "6px 8px"
|
30
|
+
},
|
28
31
|
children: /*#__PURE__*/_jsx(Grid, {
|
29
|
-
|
30
|
-
display: "flex",
|
31
|
-
justifyContent: "end"
|
32
|
-
},
|
33
|
-
children: /*#__PURE__*/_jsx(IconButton, {
|
34
|
-
onClick: onClose,
|
32
|
+
children: /*#__PURE__*/_jsx(Grid, {
|
35
33
|
style: {
|
36
|
-
|
34
|
+
display: "flex",
|
35
|
+
justifyContent: "end"
|
37
36
|
},
|
38
|
-
children: /*#__PURE__*/_jsx(
|
37
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
38
|
+
onClick: onClose,
|
39
|
+
style: {
|
40
|
+
background: "rgba(255,255,255,0.5)"
|
41
|
+
},
|
42
|
+
children: /*#__PURE__*/_jsx(CloseIcon, {})
|
43
|
+
})
|
39
44
|
})
|
40
45
|
})
|
41
|
-
})
|
42
|
-
|
43
|
-
|
44
|
-
})
|
46
|
+
}), /*#__PURE__*/_jsx(DialogContent, {
|
47
|
+
children: children
|
48
|
+
})]
|
49
|
+
})
|
45
50
|
}) : /*#__PURE__*/_jsx(ViewportStimulator, {
|
51
|
+
selectedTheme: selectedTheme,
|
46
52
|
children: children
|
47
53
|
});
|
48
54
|
};
|
package/dist/Editor/Editor.css
CHANGED
@@ -426,6 +426,32 @@ blockquote {
|
|
426
426
|
|
427
427
|
.upload-sign-img-wrapper {
|
428
428
|
text-align: center;
|
429
|
+
position: relative;
|
430
|
+
}
|
431
|
+
|
432
|
+
.upload-sign-img {
|
433
|
+
max-width: 100%;
|
434
|
+
}
|
435
|
+
|
436
|
+
.remove-sign-img-btn {
|
437
|
+
padding: 8px 12px;
|
438
|
+
background-color: #ffffff68;
|
439
|
+
cursor: pointer;
|
440
|
+
width: fit-content;
|
441
|
+
border-radius: 8px;
|
442
|
+
position: absolute;
|
443
|
+
left: 50%;
|
444
|
+
top: 50%;
|
445
|
+
transform: translate(-50%, -50%);
|
446
|
+
display: none;
|
447
|
+
}
|
448
|
+
|
449
|
+
.remove-sign-img-btn:hover {
|
450
|
+
background-color: #ffffffa0;
|
451
|
+
}
|
452
|
+
|
453
|
+
.upload-sign-img-wrapper:hover .remove-sign-img-btn {
|
454
|
+
display: block;
|
429
455
|
}
|
430
456
|
|
431
457
|
.signature-tab img {
|
@@ -1342,21 +1368,33 @@ code.markcode {
|
|
1342
1368
|
background-color: #f3f3f3;
|
1343
1369
|
font-family: 'Source Code Pro' !important;
|
1344
1370
|
}
|
1371
|
+
|
1345
1372
|
/* Hide the popper when the reference is hidden */
|
1346
1373
|
.hide-popper-on-overlap[data-popper-escaped],
|
1347
1374
|
.hide-popper-on-overlap[data-popper-reference-hidden] {
|
1348
1375
|
visibility: hidden;
|
1349
1376
|
pointer-events: none;
|
1350
1377
|
}
|
1351
|
-
|
1352
|
-
|
1353
|
-
|
1354
|
-
|
1355
|
-
|
1356
|
-
|
1357
|
-
|
1378
|
+
|
1379
|
+
.theme-buttons {
|
1380
|
+
display: flex;
|
1381
|
+
justify-content: end;
|
1382
|
+
align-items: center;
|
1383
|
+
margin: auto;
|
1384
|
+
position: absolute;
|
1385
|
+
top: 60px;
|
1386
|
+
right: 20px;
|
1387
|
+
z-index: 1000;
|
1388
|
+
}
|
1389
|
+
|
1390
|
+
.themePaintIcon:hover .iconBorder {
|
1391
|
+
fill: #2563EB;
|
1392
|
+
}
|
1393
|
+
|
1394
|
+
.themePaintIcon:hover .iconStroke {
|
1395
|
+
stroke: #2563EB;
|
1358
1396
|
}
|
1359
1397
|
|
1360
1398
|
.hyperLink {
|
1361
1399
|
word-break: break-all;
|
1362
|
-
}
|
1400
|
+
}
|
@@ -167,6 +167,7 @@ function PopoverAIInput({
|
|
167
167
|
const [generatedText, setGeneratedText] = useState("");
|
168
168
|
const [inputValue, setInputValue] = useState("");
|
169
169
|
const [selectedOption, setSelectedOption] = useState();
|
170
|
+
const [threadId, setThreadId] = useState("");
|
170
171
|
const selectedEleRef = useRef({});
|
171
172
|
const classes = Styles();
|
172
173
|
const editor = useSlate();
|
@@ -188,6 +189,7 @@ function PopoverAIInput({
|
|
188
189
|
useEffect(() => {
|
189
190
|
if (openAI) {
|
190
191
|
scrollToAIInput(editor);
|
192
|
+
setThreadId("");
|
191
193
|
}
|
192
194
|
}, [openAI]);
|
193
195
|
useEffect(() => {
|
@@ -196,8 +198,12 @@ function PopoverAIInput({
|
|
196
198
|
const framePayload = (type, option) => {
|
197
199
|
let payload = {
|
198
200
|
mode: option.mode || 0,
|
199
|
-
query: option?.inputValue || inputValue
|
201
|
+
query: option?.inputValue || inputValue,
|
202
|
+
useSession: true
|
200
203
|
};
|
204
|
+
if (threadId) {
|
205
|
+
payload.threadId = threadId;
|
206
|
+
}
|
201
207
|
if (option.mode === MODES.translate || option.mode === MODES.rephraseTone) {
|
202
208
|
payload.textOptionInput = type;
|
203
209
|
}
|
@@ -257,12 +263,14 @@ function PopoverAIInput({
|
|
257
263
|
setLoading(false);
|
258
264
|
setInputValue("");
|
259
265
|
let {
|
260
|
-
|
261
|
-
|
266
|
+
body: text,
|
267
|
+
threadId
|
268
|
+
} = result?.data || {};
|
262
269
|
if (!text) {
|
263
270
|
onClickOutside();
|
264
271
|
return;
|
265
272
|
}
|
273
|
+
setThreadId(threadId || "");
|
266
274
|
|
267
275
|
// if (!option.replace) {
|
268
276
|
if (type === "continue_writing") {
|
@@ -8,6 +8,7 @@ import { GridSettingsIcon } from "../../common/iconslist";
|
|
8
8
|
import Icon from "../../common/Icon";
|
9
9
|
import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
|
10
10
|
import useCommonStyle from "../../commonStyle";
|
11
|
+
import { getBorderColor } from "../../helper";
|
11
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
12
13
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
13
14
|
const accordionBtnStyleKeys = {
|
@@ -78,8 +79,10 @@ const Accordion = props => {
|
|
78
79
|
const path = ReactEditor.findPath(editor, element);
|
79
80
|
const {
|
80
81
|
textColor,
|
81
|
-
bgColor
|
82
|
+
bgColor,
|
83
|
+
borderColor
|
82
84
|
} = element;
|
85
|
+
const borderStyle = getBorderColor(borderColor);
|
83
86
|
const {
|
84
87
|
theme
|
85
88
|
} = useEditorContext();
|
@@ -168,7 +171,8 @@ const Accordion = props => {
|
|
168
171
|
children: [/*#__PURE__*/_jsxs("div", {
|
169
172
|
className: "accordion-title",
|
170
173
|
style: {
|
171
|
-
background: bgColor
|
174
|
+
background: bgColor,
|
175
|
+
...borderStyle
|
172
176
|
},
|
173
177
|
onClick: onToggle,
|
174
178
|
children: [/*#__PURE__*/_jsx(Box, {
|
@@ -265,7 +265,7 @@ function AppHeader(props) {
|
|
265
265
|
style: {
|
266
266
|
display: "inline-flex",
|
267
267
|
alignItems: "center",
|
268
|
-
color: textColor,
|
268
|
+
color: textColor || "#000000",
|
269
269
|
fontSize: logoFontSize,
|
270
270
|
fontFamily: titleFontFamily,
|
271
271
|
justifyContent: isLogoRight ? "end" : "start"
|
@@ -320,7 +320,7 @@ function AppHeader(props) {
|
|
320
320
|
fontFamily: fontFamily,
|
321
321
|
textTransform: "none",
|
322
322
|
fontSize: fontSize || "16px",
|
323
|
-
color: textColor || "#
|
323
|
+
color: textColor || "#000",
|
324
324
|
background: bgColor || "none",
|
325
325
|
"& .m-settings": {
|
326
326
|
display: "none",
|
@@ -335,7 +335,7 @@ function AppHeader(props) {
|
|
335
335
|
background: "#FFF"
|
336
336
|
},
|
337
337
|
"&:hover": {
|
338
|
-
color: textColorHover || textColor || "#
|
338
|
+
color: textColorHover || textColor || "#000",
|
339
339
|
background: bgColorHover || bgColor || "none",
|
340
340
|
"& .m-settings": {
|
341
341
|
display: "block"
|