@flozy/editor 4.2.1 → 4.2.3

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,7 +1,7 @@
1
1
  /* eslint-disable no-unused-vars */
2
2
  import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } from "react";
3
3
  import PropTypes from "prop-types";
4
- import { createEditor, Transforms } from "slate";
4
+ import { createEditor, Transforms, Range } from "slate";
5
5
  import { Slate, Editable, ReactEditor } from "slate-react";
6
6
  import { useDebounce, useDebouncedCallback } from "use-debounce";
7
7
  import { getMarked, getBlock } from "./utils/SlateUtilityFunctions";
@@ -365,6 +365,20 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
365
365
  });
366
366
  } else if (event.key === "Enter") {
367
367
  enterEvent(event, editor, customProps?.isMobile);
368
+ } else if (event.key === 'Backspace') {
369
+ const {
370
+ selection
371
+ } = editor;
372
+ event.preventDefault();
373
+ if (selection) {
374
+ if (!Range.isCollapsed(selection)) {
375
+ editor.deleteFragment();
376
+ } else {
377
+ editor.deleteBackward({
378
+ unit: 'character'
379
+ });
380
+ }
381
+ }
368
382
  }
369
383
  }, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
370
384
  const Overlay = collaborativeEditor && !isReadOnly ? RemoteCursorOverlay : React.Fragment;
@@ -425,18 +439,20 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
425
439
  };
426
440
  const handleCursorScroll = container => {
427
441
  try {
428
- const selection = window?.getSelection();
429
- if (selection && selection.rangeCount > 0) {
430
- const cursorPosition = selection.getRangeAt(0)?.getBoundingClientRect();
431
- const containerBottom = container?.getBoundingClientRect()?.bottom;
432
- if (cursorPosition && cursorPosition.bottom > containerBottom - 250) {
433
- container?.scrollBy({
434
- top: 200,
435
- behavior: "smooth"
436
- });
442
+ if (!customProps?.isMobile) {
443
+ const selection = window?.getSelection();
444
+ if (selection && selection.rangeCount > 0) {
445
+ const cursorPosition = selection.getRangeAt(0)?.getBoundingClientRect();
446
+ const containerBottom = container?.getBoundingClientRect()?.bottom;
447
+ if (cursorPosition && cursorPosition.bottom > containerBottom - 250) {
448
+ container?.scrollBy({
449
+ top: 200,
450
+ behavior: "smooth"
451
+ });
452
+ }
453
+ } else {
454
+ console.warn('No valid selection range found');
437
455
  }
438
- } else {
439
- console.warn('No valid selection range found');
440
456
  }
441
457
  } catch (err) {
442
458
  console.log('handleCursorScroll', err);
@@ -47,14 +47,7 @@ const ToolBar = ({
47
47
  })]
48
48
  }) : null;
49
49
  };
50
- const ImageContent = ({
51
- readOnly,
52
- setOpenSettings,
53
- element,
54
- handleImageClick,
55
- onTouchEnd,
56
- path
57
- }) => {
50
+ const ImageContent = props => {
58
51
  const {
59
52
  alt,
60
53
  url,
@@ -64,8 +57,13 @@ const ImageContent = ({
64
57
  boxShadow,
65
58
  frame = null,
66
59
  objectFit,
67
- webAddress
68
- } = element;
60
+ webAddress,
61
+ readOnly,
62
+ setOpenSettings,
63
+ handleImageClick,
64
+ onTouchEnd,
65
+ path
66
+ } = props;
69
67
  const theme = useTheme();
70
68
  return !url && !readOnly ? /*#__PURE__*/_jsxs(Box, {
71
69
  component: "button",
@@ -278,9 +276,9 @@ const Image = ({
278
276
  onSettings: onSettings,
279
277
  setOpenNav: setOpenNav
280
278
  }), /*#__PURE__*/_jsx(ImageContent, {
279
+ ...element,
281
280
  readOnly: readOnly,
282
281
  setOpenSettings: setOpenSettings,
283
- element: element,
284
282
  handleImageClick: handleImageClick,
285
283
  onTouchEnd: onTouchEnd,
286
284
  path: path
@@ -1,4 +1,4 @@
1
- import React, { useState, useEffect } from "react";
1
+ import React, { useState, useEffect, useCallback } from "react";
2
2
  import { useSlateStatic, ReactEditor } from "slate-react";
3
3
  import { Node, Transforms } from "slate";
4
4
  import { IconButton, Tooltip, Box, useTheme } from "@mui/material";
@@ -10,9 +10,69 @@ import EmbedPopup from "./EmbedPopup";
10
10
  import { GridSettingsIcon } from "../../common/iconslist";
11
11
  import { gradientBorder } from "../../utils/helper";
12
12
  import { getEmbedURL } from "../../helper";
13
- import { getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
13
+ import { getBreakPointsValue, getTRBLBreakPoints, groupByBreakpoint } from "../../helper/theme";
14
14
  import { jsx as _jsx } from "react/jsx-runtime";
15
15
  import { jsxs as _jsxs } from "react/jsx-runtime";
16
+ const VideoContent = props => {
17
+ const {
18
+ resizing,
19
+ borderColor,
20
+ borderWidth,
21
+ borderStyle,
22
+ bgColor,
23
+ embedURL,
24
+ alt,
25
+ videoSX
26
+ } = props;
27
+ return resizing ? /*#__PURE__*/_jsx("div", {
28
+ style: {
29
+ width: "100%",
30
+ height: "100%",
31
+ border: "2px dashed black",
32
+ display: "flex",
33
+ justifyContent: "center",
34
+ alignItems: "center"
35
+ },
36
+ children: /*#__PURE__*/_jsx(Icon, {
37
+ icon: "videoPlayer"
38
+ })
39
+ }) : /*#__PURE__*/_jsx(Box, {
40
+ component: "iframe",
41
+ className: "embedd-iframe",
42
+ sx: {
43
+ border: "none",
44
+ position: "absolute",
45
+ width: "100%",
46
+ height: "100%",
47
+ maxWidth: "100%",
48
+ left: "0px",
49
+ ...(gradientBorder(borderColor) || {}),
50
+ borderWidth: borderWidth || "1px",
51
+ borderStyle: borderStyle || "solid",
52
+ background: bgColor || "transparent",
53
+ ...videoSX
54
+ },
55
+ src: embedURL,
56
+ title: alt
57
+ });
58
+ };
59
+ const VideoPlaceholder = props => {
60
+ const {
61
+ url,
62
+ readOnly,
63
+ onSettings
64
+ } = props;
65
+ return !url && !readOnly ? /*#__PURE__*/_jsxs(Box, {
66
+ component: "button",
67
+ className: "element-empty-btn",
68
+ onClick: onSettings,
69
+ children: [/*#__PURE__*/_jsx(Icon, {
70
+ icon: "video"
71
+ }), "Embed Video or Other"]
72
+ }) : /*#__PURE__*/_jsx(VideoContent, {
73
+ ...props
74
+ });
75
+ };
16
76
  const Video = ({
17
77
  attributes,
18
78
  element,
@@ -21,15 +81,12 @@ const Video = ({
21
81
  }) => {
22
82
  const theme = useTheme();
23
83
  const {
24
- alt,
25
84
  alignment,
26
85
  borderRadius,
27
- borderWidth,
28
- borderColor,
29
- borderStyle,
30
86
  url,
31
87
  xsHidden,
32
- width: oldWidth
88
+ width: oldWidth,
89
+ bannerSpacing
33
90
  } = element;
34
91
  const editor = useSlateStatic();
35
92
  const [openSetttings, setOpenSettings] = useState(false);
@@ -119,7 +176,7 @@ const Video = ({
119
176
  at: path
120
177
  });
121
178
  };
122
- const getWidth = () => {
179
+ const getWidth = useCallback(() => {
123
180
  if (resizing) {
124
181
  return {
125
182
  width: `${size.width}px`,
@@ -137,52 +194,16 @@ const Video = ({
137
194
  }, theme)
138
195
  };
139
196
  }
140
- };
197
+ }, [size]);
141
198
  const embedURL = getEmbedURL(element);
142
- const VideoContent = () => {
143
- return resizing ? /*#__PURE__*/_jsx("div", {
144
- style: {
145
- width: "100%",
146
- height: "100%",
147
- border: "2px dashed black",
148
- display: "flex",
149
- justifyContent: "center",
150
- alignItems: "center"
151
- },
152
- children: /*#__PURE__*/_jsx(Icon, {
153
- icon: "videoPlayer"
154
- })
155
- }) : /*#__PURE__*/_jsx(Box, {
156
- component: "iframe",
157
- className: "embedd-iframe",
158
- sx: {
159
- border: "none",
160
- position: "absolute",
161
- width: "100%",
162
- height: "100%",
163
- maxWidth: "100%",
164
- left: "0px",
165
- ...(gradientBorder(borderColor) || {}),
166
- borderWidth: borderWidth || "1px",
167
- borderRadius: {
168
- ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
169
- },
170
- borderStyle: borderStyle || "solid"
171
- },
172
- src: embedURL,
173
- title: alt
174
- });
175
- };
176
- const VideoPlaceholder = () => {
177
- return !url && !readOnly ? /*#__PURE__*/_jsxs(Box, {
178
- component: "button",
179
- className: "element-empty-btn",
180
- onClick: onSettings,
181
- children: [/*#__PURE__*/_jsx(Icon, {
182
- icon: "video"
183
- }), "Embed Video or Other"]
184
- }) : /*#__PURE__*/_jsx(VideoContent, {});
185
- };
199
+ const videoSX = groupByBreakpoint({
200
+ borderRadius: {
201
+ ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
202
+ },
203
+ padding: {
204
+ ...getTRBLBreakPoints(bannerSpacing)
205
+ }
206
+ }, theme);
186
207
  return /*#__PURE__*/_jsxs(Box, {
187
208
  ...attributes,
188
209
  className: "embed has-hover video dpath",
@@ -215,7 +236,12 @@ const Video = ({
215
236
  ...getWidth(),
216
237
  maxWidth: "100%"
217
238
  },
218
- children: [!readOnly && url && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx(VideoPlaceholder, {}), !readOnly && url ? /*#__PURE__*/_jsx(IconButton, {
239
+ children: [!readOnly && url && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx(VideoPlaceholder, {
240
+ ...element,
241
+ embedURL: embedURL,
242
+ onSettings: onSettings,
243
+ videoSX: videoSX
244
+ }), !readOnly && url ? /*#__PURE__*/_jsx(IconButton, {
219
245
  onPointerDown: onMouseDown,
220
246
  style: {
221
247
  background: "#FFF"
@@ -262,6 +262,7 @@ const Form = props => {
262
262
  };
263
263
  const handleCloseMessage = () => {
264
264
  setSubmittedSuccessfully(false);
265
+ formEle.current.reset();
265
266
  };
266
267
  const onMouseLeave = () => {
267
268
  setShowOptions(false);
@@ -194,6 +194,13 @@ const useFreeGridStyles = ({
194
194
  }
195
195
  },
196
196
  "& .fgi_type_table": {
197
+ overflowX: "auto",
198
+ "& table": {
199
+ "&.readOnly": {
200
+ tableLayout: "fixed",
201
+ width: "100% !important"
202
+ }
203
+ },
197
204
  "& .tableToolBar": {
198
205
  right: "0px",
199
206
  left: "auto",
@@ -1,7 +1,7 @@
1
1
  import React, { useState } from "react";
2
2
  import { Transforms } from "slate";
3
3
  import { useSelected, useSlateStatic } from "slate-react";
4
- import { Box, IconButton, Tooltip, Table as TableComp, TableBody } from "@mui/material";
4
+ import { Box, IconButton, Tooltip, Table as TableComp, TableBody, useTheme } from "@mui/material";
5
5
  import AlignHorizontalLeftIcon from "@mui/icons-material/AlignHorizontalLeft";
6
6
  import AlignHorizontalRightIcon from "@mui/icons-material/AlignHorizontalRight";
7
7
  import AlignVerticalTopIcon from "@mui/icons-material/AlignVerticalTop";
@@ -16,6 +16,7 @@ import TablePopup from "./TablePopup";
16
16
  import { useEditorSelection } from "../../hooks/useMouseMove";
17
17
  import TableStyles from "./Styles";
18
18
  import "./table.css";
19
+ import { groupByBreakpoint } from "../../helper/theme";
19
20
  import { jsx as _jsx } from "react/jsx-runtime";
20
21
  import { jsxs as _jsxs } from "react/jsx-runtime";
21
22
  const TABLE_MENUS = [{
@@ -72,6 +73,7 @@ const TABLE_MENUS = [{
72
73
  }
73
74
  }];
74
75
  const Table = props => {
76
+ const theme = useTheme();
75
77
  const {
76
78
  element,
77
79
  attributes,
@@ -86,7 +88,8 @@ const Table = props => {
86
88
  const [exandTools, setExpandTools] = useState(false);
87
89
  const {
88
90
  bgColor,
89
- borderColor
91
+ borderColor,
92
+ xsHidden
90
93
  } = element;
91
94
  const editor = useSlateStatic();
92
95
  const selected = useSelected();
@@ -174,6 +177,12 @@ const Table = props => {
174
177
  const onClose = () => {
175
178
  setOpenSettings(false);
176
179
  };
180
+ const tableSX = groupByBreakpoint({
181
+ display: {
182
+ xs: xsHidden ? "none" : "inline-block",
183
+ lg: "inline-block"
184
+ }
185
+ }, theme);
177
186
  return /*#__PURE__*/_jsxs("div", {
178
187
  style: {
179
188
  minWidth: "100%",
@@ -181,7 +190,11 @@ const Table = props => {
181
190
  position: "relative"
182
191
  },
183
192
  children: [/*#__PURE__*/_jsx(TableComp, {
184
- sx: classes.table,
193
+ className: readOnly ? "readOnly" : "",
194
+ sx: {
195
+ ...classes.table,
196
+ ...tableSX
197
+ },
185
198
  style: {
186
199
  background: bgColor,
187
200
  border: borderColor ? `1px solid ${borderColor}` : "",
@@ -23,7 +23,7 @@ const TableRow = props => {
23
23
  return /*#__PURE__*/_jsx("tr", {
24
24
  ...attributes,
25
25
  style: {
26
- backgroundColor: bgColor,
26
+ background: bgColor,
27
27
  border: rowBorderColor ? `1px solid ${rowBorderColor}` : ""
28
28
  },
29
29
  children: children
@@ -25,6 +25,7 @@ const FontLoader = props => {
25
25
  families: [...batchWithWeights]
26
26
  },
27
27
  classes: false,
28
+ timeout: 2000,
28
29
  active: () => {
29
30
  console.log(`Fonts loaded successfully: ${batch}`);
30
31
  currentIndex += batchSize;
@@ -78,7 +79,7 @@ const FontLoader = props => {
78
79
  families = Array.from(fontSet);
79
80
  loadFontsInBatches(families);
80
81
  }
81
- }, [readOnly, otherProps, setFontFamilies]);
82
+ }, []);
82
83
  return null;
83
84
  };
84
85
  export default FontLoader;
@@ -42,7 +42,7 @@ const DragOver = props => {
42
42
  horizontal: "center"
43
43
  },
44
44
  transformOrigin: {
45
- vertical: "top",
45
+ vertical: "bottom",
46
46
  horizontal: "center"
47
47
  },
48
48
  children: /*#__PURE__*/_jsx(Paper, {
@@ -22,7 +22,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
22
22
  import { jsxs as _jsxs } from "react/jsx-runtime";
23
23
  import { Fragment as _Fragment } from "react/jsx-runtime";
24
24
  const ITEM_TYPES = ["child", "parent-container"];
25
- const EDIT_MODES = ["text", "form"];
25
+ const EDIT_MODES = ["text", "form", "table"];
26
26
  let hover_on = new Set();
27
27
  const RnD = props => {
28
28
  const rndRef = useRef(null);
@@ -24,6 +24,10 @@ const embedVideoStyle = [{
24
24
  tab: "Border",
25
25
  value: "border",
26
26
  fields: [{
27
+ label: "Background Color",
28
+ key: "bgColor",
29
+ type: "color"
30
+ }, {
27
31
  label: "Border Color",
28
32
  key: "borderColor",
29
33
  type: "color"
@@ -56,5 +60,13 @@ const embedVideoStyle = [{
56
60
  });
57
61
  }
58
62
  }]
63
+ }, {
64
+ tab: "Banner Spacing",
65
+ value: "bannerSpacing",
66
+ fields: [{
67
+ label: "Banner Spacing",
68
+ key: "bannerSpacing",
69
+ type: "bannerSpacing"
70
+ }]
59
71
  }];
60
72
  export default embedVideoStyle;
@@ -38,5 +38,14 @@ const tableStyle = [{
38
38
  key: "col.borderColor",
39
39
  type: "color"
40
40
  }]
41
+ }, {
42
+ tab: "Visibility",
43
+ value: "visibility",
44
+ fields: [{
45
+ label: "Hide on Mobile",
46
+ key: "table.xsHidden",
47
+ type: "selectBox",
48
+ placeholder: "Hide on Mobile"
49
+ }]
41
50
  }];
42
51
  export default tableStyle;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "4.2.1",
3
+ "version": "4.2.3",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"