@flozy/editor 1.4.3 → 1.4.5

Sign up to get free protection for your applications and to get access to all the features.
Files changed (27) hide show
  1. package/README.md +3 -0
  2. package/dist/Editor/CommonEditor.js +124 -34
  3. package/dist/Editor/Editor.css +25 -0
  4. package/dist/Editor/Elements/AppHeader/AppHeader.js +166 -102
  5. package/dist/Editor/Elements/AppHeader/useEleveateScroll.js +53 -0
  6. package/dist/Editor/Elements/Embed/Image.js +14 -13
  7. package/dist/Editor/Elements/Grid/Grid.js +136 -12
  8. package/dist/Editor/Elements/Grid/GridItem.js +2 -6
  9. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +16 -7
  10. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +5 -8
  11. package/dist/Editor/Elements/Signature/SignaturePopup.js +32 -19
  12. package/dist/Editor/Toolbar/FormatTools/Autocomplete.js +4 -4
  13. package/dist/Editor/Toolbar/Toolbar.js +2 -1
  14. package/dist/Editor/common/DroppableOverlay.js +33 -0
  15. package/dist/Editor/common/EditorIcons.js +27 -0
  16. package/dist/Editor/common/StyleBuilder/appHeaderStyle.js +5 -0
  17. package/dist/Editor/common/StyleBuilder/fieldTypes/alignment.js +12 -7
  18. package/dist/Editor/common/StyleBuilder/fieldTypes/selectBox.js +8 -4
  19. package/dist/Editor/common/StyleBuilder/gridItemStyle.js +0 -5
  20. package/dist/Editor/common/StyleBuilder/gridStyle.js +10 -0
  21. package/dist/Editor/common/useDragAndDrop.js +83 -0
  22. package/dist/Editor/helper/index.js +15 -1
  23. package/dist/Editor/hooks/useWindowResize.js +21 -0
  24. package/dist/Editor/utils/customHooks/useResize.js +6 -4
  25. package/dist/Editor/utils/grid.js +3 -3
  26. package/dist/Editor/utils/insertAppHeader.js +1 -1
  27. package/package.json +3 -1
package/README.md CHANGED
@@ -1,2 +1,5 @@
1
1
  # editor
2
2
  A brain document editor
3
+
4
+ # Node version
5
+ 18.9.1
@@ -1,6 +1,7 @@
1
1
  import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } from "react";
2
2
  import { createEditor } from "slate";
3
3
  import { Slate, Editable, ReactEditor } from "slate-react";
4
+ import { DndContext, DragOverlay } from "@dnd-kit/core";
4
5
  import { useDebounce } from "use-debounce";
5
6
  import Toolbar from "./Toolbar/Toolbar";
6
7
  import { getMarked, getBlock } from "./utils/SlateUtilityFunctions";
@@ -13,13 +14,28 @@ import { mentionsEvent, commands } from "./utils/events";
13
14
  import withCommon from "./hooks/withCommon";
14
15
  import DialogWrapper from "./DialogWrapper";
15
16
  import { serialize } from "./utils/serializer";
16
- import { getThumbnailImage } from "./helper";
17
+ import { customCollisionDetectionAlgorithm, getThumbnailImage } from "./helper";
17
18
  import PopupTool from "./Toolbar/PopupTool";
18
19
  import "./font.css";
19
20
  import "./Editor.css";
20
21
  import { jsx as _jsx } from "react/jsx-runtime";
21
22
  import { jsxs as _jsxs } from "react/jsx-runtime";
22
23
  const PREVIEW_IMAGE_HIDE_CLASS = ["grid-container-toolbar", "grid-item-toolbar", "element-toolbar"];
24
+ const Item = /*#__PURE__*/forwardRef(({
25
+ children,
26
+ ...props
27
+ }, ref) => {
28
+ return /*#__PURE__*/_jsx("div", {
29
+ ...props,
30
+ ref: ref,
31
+ contentEditable: false,
32
+ style: {
33
+ background: "rgba(255, 255,255, 0.54)"
34
+ },
35
+ children: children
36
+ });
37
+ });
38
+ Item.displayName = "Item";
23
39
  const Element = props => {
24
40
  return getBlock(props);
25
41
  };
@@ -64,6 +80,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
64
80
  CHARACTERS = [],
65
81
  editorClass
66
82
  } = otherProps || {};
83
+ const [drag, setDrag] = useState(null);
67
84
  const editor = useMemo(() => {
68
85
  if (collaborativeEditor) return collaborativeEditor;
69
86
  return withCommon(createEditor(), {
@@ -227,6 +244,62 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
227
244
  });
228
245
  }
229
246
  }, [chars, editor, target, mentions, setMentions]);
247
+ const handleDragStart = e => {
248
+ try {
249
+ const {
250
+ active: {
251
+ data: {
252
+ current: {
253
+ element
254
+ }
255
+ }
256
+ }
257
+ } = e;
258
+ const dragEle = ReactEditor.toDOMNode(editor, element);
259
+ const {
260
+ width,
261
+ height
262
+ } = dragEle.getBoundingClientRect();
263
+ setDrag({
264
+ style: {
265
+ width,
266
+ height
267
+ },
268
+ dom: dragEle.outerHTML
269
+ });
270
+ } catch (err) {
271
+ console.log(err);
272
+ }
273
+ };
274
+ const handleDragEnd = e => {
275
+ try {
276
+ const {
277
+ active: {
278
+ data: {
279
+ current: {
280
+ element,
281
+ onDragEnd
282
+ }
283
+ }
284
+ },
285
+ over: {
286
+ data: {
287
+ current: {
288
+ onDrop
289
+ }
290
+ }
291
+ }
292
+ } = e;
293
+ onDrop(JSON.stringify(element));
294
+ setTimeout(() => {
295
+ onDragEnd();
296
+ }, 100);
297
+ setDrag(null);
298
+ } catch (err) {
299
+ console.log(e);
300
+ console.log(err);
301
+ }
302
+ };
230
303
  const Overlay = collaborativeEditor && !isReadOnly ? RemoteCursorOverlay : React.Fragment;
231
304
  const dotBg = needDotsBG ? {
232
305
  background: "white",
@@ -250,41 +323,58 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
250
323
  editor: editor,
251
324
  initialValue: value,
252
325
  onChange: handleEditorChange,
253
- children: [/*#__PURE__*/_jsxs(Overlay, {
254
- children: [!isReadOnly ? /*#__PURE__*/_jsx(Toolbar, {
255
- handleCodeToText: handleCodeToText,
256
- customProps: customProps
257
- }) : null, /*#__PURE__*/_jsxs("div", {
258
- ref: editorWrapper,
259
- className: "editor-wrapper",
326
+ children: [/*#__PURE__*/_jsxs(DndContext, {
327
+ collisionDetection: customCollisionDetectionAlgorithm,
328
+ onDragStart: handleDragStart,
329
+ onDragEnd: handleDragEnd,
330
+ children: [/*#__PURE__*/_jsxs(Overlay, {
331
+ children: [!isReadOnly ? /*#__PURE__*/_jsx(Toolbar, {
332
+ handleCodeToText: handleCodeToText,
333
+ customProps: customProps
334
+ }) : null, /*#__PURE__*/_jsxs("div", {
335
+ ref: editorWrapper,
336
+ className: "editor-wrapper",
337
+ style: {
338
+ border: "1px solid #f3f3f3",
339
+ backgroundImage: pageBgImage ? `url(${pageBgImage})` : "none",
340
+ backgroundColor: pageColor || defaultBG || "#FFF",
341
+ color: pageProps?.color || "#000",
342
+ paddingLeft: `${bannerSpacing?.left}px`,
343
+ paddingRight: `${bannerSpacing?.right}px`,
344
+ paddingTop: `${bannerSpacing?.top}px`,
345
+ paddingBottom: `${bannerSpacing?.bottom}px`,
346
+ width: viewport.w ? `${viewport.w}px` : "100%",
347
+ height: viewport.h ? `${viewport.h}px` : "auto",
348
+ alignSelf: "center"
349
+ },
350
+ children: [/*#__PURE__*/_jsx(PopupTool, {}), /*#__PURE__*/_jsx(Editable, {
351
+ className: "innert-editor-textbox",
352
+ readOnly: isReadOnly,
353
+ placeholder: "Write something",
354
+ renderElement: renderElement,
355
+ renderLeaf: renderLeaf,
356
+ onKeyDown: onKeyDown
357
+ }), /*#__PURE__*/_jsx(MentionsPopup, {
358
+ mentions: mentions,
359
+ setMentions: setMentions,
360
+ editor: editor,
361
+ target: target,
362
+ index: index,
363
+ chars: chars
364
+ })]
365
+ })]
366
+ }), /*#__PURE__*/_jsx(DragOverlay, {
367
+ className: "drag-overlay",
260
368
  style: {
261
- border: "1px solid #f3f3f3",
262
- backgroundImage: pageBgImage ? `url(${pageBgImage})` : "none",
263
- backgroundColor: pageColor || defaultBG || "#FFF",
264
- color: pageProps?.color || "#000",
265
- paddingLeft: `${bannerSpacing?.left}px`,
266
- paddingRight: `${bannerSpacing?.right}px`,
267
- paddingTop: `${bannerSpacing?.top}px`,
268
- paddingBottom: `${bannerSpacing?.bottom}px`,
269
- width: viewport.w ? `${viewport.w}px` : "100%",
270
- height: viewport.h ? `${viewport.h}px` : "auto",
271
- alignSelf: "center"
369
+ ...(drag?.style || {})
272
370
  },
273
- children: [/*#__PURE__*/_jsx(PopupTool, {}), /*#__PURE__*/_jsx(Editable, {
274
- className: "innert-editor-textbox",
275
- readOnly: isReadOnly,
276
- placeholder: "Write something",
277
- renderElement: renderElement,
278
- renderLeaf: renderLeaf,
279
- onKeyDown: onKeyDown
280
- }), /*#__PURE__*/_jsx(MentionsPopup, {
281
- mentions: mentions,
282
- setMentions: setMentions,
283
- editor: editor,
284
- target: target,
285
- index: index,
286
- chars: chars
287
- })]
371
+ children: drag ? /*#__PURE__*/_jsx(Item, {
372
+ children: /*#__PURE__*/_jsx("div", {
373
+ dangerouslySetInnerHTML: {
374
+ __html: drag?.dom
375
+ }
376
+ })
377
+ }) : null
288
378
  })]
289
379
  }), htmlAction.showInput && /*#__PURE__*/_jsx(CodeToText, {
290
380
  ...htmlAction,
@@ -97,6 +97,8 @@ blockquote {
97
97
  padding: 0px;
98
98
  position: relative;
99
99
  flex-wrap: wrap;
100
+ background-repeat: no-repeat;
101
+ background-size: cover;
100
102
  }
101
103
 
102
104
  .grid-container-toolbar,
@@ -546,4 +548,27 @@ blockquote {
546
548
 
547
549
  .empty-carousel-wrapper .grid-item-toolbar {
548
550
  left: 0px;
551
+ }
552
+
553
+ .drag-overlay .element-selector {
554
+ display: none;
555
+ }
556
+ .drop-overlay {
557
+ position: absolute;
558
+ pointer-events: none;
559
+ width: 100%;
560
+ height: 100%;
561
+ background-color: transparent;
562
+ transition: all 1s;
563
+ }
564
+ .dragging.drop-overlay {
565
+ pointer-events: auto;
566
+ }
567
+ .drop-overlay.active {
568
+ position: relative;
569
+ background-color: #2684ff;
570
+ }
571
+
572
+ .dragging.active_drag .grid-c-wrpr {
573
+ opacity: 0.15;
549
574
  }
@@ -1,6 +1,6 @@
1
- import React, { useState } from "react";
1
+ import React, { useRef, useState } from "react";
2
2
  import { useSlateStatic, ReactEditor } from "slate-react";
3
- import { Transforms } from "slate";
3
+ import { Transforms, Editor, Element } from "slate";
4
4
  import AppBar from "@mui/material/AppBar";
5
5
  import Box from "@mui/material/Box";
6
6
  import CssBaseline from "@mui/material/CssBaseline";
@@ -23,11 +23,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
23
23
  import { jsxs as _jsxs } from "react/jsx-runtime";
24
24
  const drawerWidth = 240;
25
25
  function AppHeader(props) {
26
+ const navWrprRef = useRef(null);
26
27
  const [openSetttings, setOpenSettings] = useState(false);
27
28
  const {
28
29
  attributes,
29
30
  element,
30
- customProps
31
+ customProps,
32
+ children
31
33
  } = props;
32
34
  const {
33
35
  appTitle,
@@ -42,7 +44,8 @@ function AppHeader(props) {
42
44
  fontSize,
43
45
  fontFamily,
44
46
  logoFontSize,
45
- titleFontFamily
47
+ titleFontFamily,
48
+ isLogoRight
46
49
  } = element;
47
50
  const {
48
51
  left,
@@ -60,7 +63,8 @@ function AppHeader(props) {
60
63
  const handleDrawerToggle = () => {
61
64
  setMobileOpen(prevState => !prevState);
62
65
  };
63
- const onSettings = () => {
66
+ const onSettings = e => {
67
+ e.stopPropagation();
64
68
  setOpenSettings(true);
65
69
  };
66
70
  const ToolBar = () => {
@@ -100,7 +104,8 @@ function AppHeader(props) {
100
104
  });
101
105
  onClose();
102
106
  };
103
- const onDelete = () => {
107
+ const onDelete = e => {
108
+ e.stopPropagation();
104
109
  Transforms.removeNodes(editor, {
105
110
  at: path
106
111
  });
@@ -108,6 +113,25 @@ function AppHeader(props) {
108
113
  const onClose = () => {
109
114
  setOpenSettings(false);
110
115
  };
116
+ const handleFocus = e => {
117
+ e.preventDefault();
118
+ try {
119
+ const [[, gridItemPath]] = Editor.nodes(editor, {
120
+ at: path,
121
+ match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "grid-item"
122
+ });
123
+ if (gridItemPath) {
124
+ Transforms.select(editor, gridItemPath);
125
+ }
126
+ } catch (err) {
127
+ console.log(err);
128
+ }
129
+ };
130
+
131
+ // const onMenuSettings = (menuItem, i) => (event) => {
132
+ // event.preventDefault();
133
+ // };
134
+
111
135
  const drawer = /*#__PURE__*/_jsxs(Box, {
112
136
  onClick: handleDrawerToggle,
113
137
  sx: {
@@ -144,6 +168,15 @@ function AppHeader(props) {
144
168
  })]
145
169
  });
146
170
  const container = window !== undefined ? () => window().document.body : undefined;
171
+ // const elevateStyle = useEleveateScroll({
172
+ // ...props,
173
+ // parentRef: navWrprRef,
174
+ // needElevation: readOnly,
175
+ // });
176
+
177
+ const elevateStyle = {
178
+ position: "relative"
179
+ };
147
180
  return /*#__PURE__*/_jsxs(Box, {
148
181
  sx: {
149
182
  display: "flex",
@@ -151,116 +184,147 @@ function AppHeader(props) {
151
184
  },
152
185
  ...attributes,
153
186
  contentEditable: false,
154
- children: [/*#__PURE__*/_jsx(CssBaseline, {}), /*#__PURE__*/_jsx(AppBar, {
155
- component: "nav",
187
+ onClick: handleFocus,
188
+ children: [/*#__PURE__*/_jsxs("div", {
189
+ ref: navWrprRef,
156
190
  style: {
157
- position: "relative",
158
- background: bgColor,
159
- boxShadow: "none",
160
- paddingLeft: `${left}px`,
161
- paddingRight: `${right}px`,
162
- paddingTop: `${top}px`,
163
- paddingBottom: `${bottom}px`
191
+ display: "flex",
192
+ width: "100%"
164
193
  },
165
- children: /*#__PURE__*/_jsxs(Toolbar, {
166
- children: [/*#__PURE__*/_jsx(IconButton, {
167
- color: "inherit",
168
- "aria-label": "open drawer",
169
- edge: "start",
170
- onClick: handleDrawerToggle,
171
- sx: {
172
- mr: 2,
173
- display: {
174
- sm: "none"
175
- }
176
- },
177
- children: /*#__PURE__*/_jsx(MenuIcon, {})
178
- }), /*#__PURE__*/_jsxs(Typography, {
179
- variant: "h6",
180
- component: "div",
181
- color: "primary",
194
+ children: [/*#__PURE__*/_jsx(CssBaseline, {}), /*#__PURE__*/_jsx(AppBar, {
195
+ component: "nav",
196
+ style: {
197
+ ...elevateStyle,
198
+ background: bgColor,
199
+ boxShadow: "none",
200
+ paddingLeft: `${left}px`,
201
+ paddingRight: `${right}px`,
202
+ paddingTop: `${top}px`,
203
+ paddingBottom: `${bottom}px`
204
+ },
205
+ children: /*#__PURE__*/_jsxs(Toolbar, {
182
206
  style: {
183
- display: "inline-flex",
184
- alignItems: "center",
185
- color: textColor,
186
- fontSize: logoFontSize,
187
- fontFamily: titleFontFamily
188
- },
189
- sx: {
190
- flexGrow: 1,
191
- display: {
192
- xs: "none",
193
- sm: "block"
194
- }
207
+ flexDirection: isLogoRight ? "row-reverse" : "row"
195
208
  },
196
- className: "app-logo",
197
- children: [appLogo && appLogo !== "none" ? /*#__PURE__*/_jsx("img", {
198
- alt: `${appTitle} Logo`,
199
- style: {
200
- height: "40px",
201
- width: "auto"
202
- },
203
- src: appLogo
204
- }) : null, "\xA0", appTitle]
205
- }), /*#__PURE__*/_jsxs(Box, {
206
- sx: {
207
- display: {
208
- xs: "none",
209
- sm: "block"
210
- }
211
- },
212
- children: [isDrawer ? /*#__PURE__*/_jsx(IconButton, {
209
+ children: [/*#__PURE__*/_jsx(IconButton, {
213
210
  color: "inherit",
214
211
  "aria-label": "open drawer",
215
212
  edge: "start",
216
213
  onClick: handleDrawerToggle,
214
+ sx: {
215
+ mr: 2,
216
+ display: {
217
+ sm: "none"
218
+ }
219
+ },
217
220
  children: /*#__PURE__*/_jsx(MenuIcon, {})
218
- }) : null, !isDrawer ? menus.map(item => /*#__PURE__*/_jsx(Button, {
219
- component: "a",
220
- href: item.url,
221
+ }), /*#__PURE__*/_jsxs(Typography, {
222
+ variant: "h6",
223
+ component: "div",
224
+ color: "primary",
225
+ style: {
226
+ display: "inline-flex",
227
+ alignItems: "center",
228
+ color: textColor,
229
+ fontSize: logoFontSize,
230
+ fontFamily: titleFontFamily,
231
+ justifyContent: isLogoRight ? "end" : "start"
232
+ },
221
233
  sx: {
222
- fontFamily: fontFamily,
223
- textTransform: "none",
224
- fontSize: fontSize || "16px",
225
- color: textColor || "#FFF",
226
- background: bgColor || "none",
227
- "&:hover": {
228
- color: textColorHover || textColor || "#FFF",
229
- background: bgColorHover || bgColor || "none"
234
+ flexGrow: 1,
235
+ display: {
236
+ xs: "none",
237
+ sm: "block"
230
238
  }
231
239
  },
232
- children: item.text
233
- }, item)) : null]
234
- })]
235
- })
236
- }), /*#__PURE__*/_jsx("nav", {
237
- children: /*#__PURE__*/_jsx(Drawer, {
238
- container: container,
239
- variant: "temporary",
240
- open: mobileOpen,
241
- onClose: handleDrawerToggle,
242
- ModalProps: {
243
- keepMounted: true // Better open performance on mobile.
244
- },
240
+ className: "app-logo",
241
+ children: [appLogo && appLogo !== "none" ? /*#__PURE__*/_jsx("img", {
242
+ alt: `${appTitle} Logo`,
243
+ style: {
244
+ height: "40px",
245
+ width: "auto"
246
+ },
247
+ src: appLogo
248
+ }) : null, "\xA0", appTitle]
249
+ }), /*#__PURE__*/_jsxs(Box, {
250
+ sx: {
251
+ display: {
252
+ xs: "none",
253
+ sm: "block"
254
+ }
255
+ },
256
+ children: [isDrawer ? /*#__PURE__*/_jsx(IconButton, {
257
+ color: "inherit",
258
+ "aria-label": "open drawer",
259
+ edge: "start",
260
+ onClick: handleDrawerToggle,
261
+ children: /*#__PURE__*/_jsx(MenuIcon, {})
262
+ }) : null, !isDrawer ? menus.map((item, i) => /*#__PURE__*/_jsx(Button, {
263
+ component: "a",
264
+ href: item.url,
265
+ sx: {
266
+ position: "relative",
267
+ fontFamily: fontFamily,
268
+ textTransform: "none",
269
+ fontSize: fontSize || "16px",
270
+ color: textColor || "#FFF",
271
+ background: bgColor || "none",
272
+ "& .m-settings": {
273
+ display: "none",
274
+ position: "absolute",
275
+ top: 0,
276
+ bottom: 0,
277
+ left: 0,
278
+ right: 0,
279
+ margin: "auto",
280
+ width: "42px",
281
+ height: "42px",
282
+ background: "#FFF"
283
+ },
284
+ "&:hover": {
285
+ color: textColorHover || textColor || "#FFF",
286
+ background: bgColorHover || bgColor || "none",
287
+ "& .m-settings": {
288
+ display: "block"
289
+ }
290
+ }
291
+ },
292
+ children: item.text
293
+ }, item)) : null]
294
+ })]
295
+ })
296
+ }), /*#__PURE__*/_jsx("nav", {
297
+ children: /*#__PURE__*/_jsx(Drawer, {
298
+ container: container,
299
+ variant: "temporary",
300
+ open: mobileOpen,
301
+ onClose: handleDrawerToggle,
302
+ ModalProps: {
303
+ keepMounted: true // Better open performance on mobile.
304
+ },
245
305
 
246
- sx: {
247
- display: {
248
- xs: "block",
249
- sm: isDrawer ? "block" : "none"
306
+ sx: {
307
+ display: {
308
+ xs: "block",
309
+ sm: isDrawer ? "block" : "none"
310
+ },
311
+ "& .MuiDrawer-paper": {
312
+ boxSizing: "border-box",
313
+ width: drawerWidth
314
+ }
250
315
  },
251
- "& .MuiDrawer-paper": {
252
- boxSizing: "border-box",
253
- width: drawerWidth
254
- }
255
- },
256
- children: drawer
257
- })
258
- }), /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AppHeaderPopup, {
259
- element: element,
260
- onSave: onSave,
261
- onClose: onClose,
262
- customProps: customProps
263
- }) : null]
316
+ children: drawer
317
+ })
318
+ }), /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AppHeaderPopup, {
319
+ element: element,
320
+ onSave: onSave,
321
+ onClose: onClose,
322
+ customProps: customProps
323
+ }) : null]
324
+ }), /*#__PURE__*/_jsx("div", {
325
+ contentEditable: true,
326
+ children: children
327
+ })]
264
328
  });
265
329
  }
266
330
  export default AppHeader;
@@ -0,0 +1,53 @@
1
+ import { useEffect, useState } from "react";
2
+ import useScrollTrigger from "@mui/material/useScrollTrigger";
3
+ import useWindowResize from "../../hooks/useWindowResize";
4
+ const useEleveateScroll = props => {
5
+ const {
6
+ children,
7
+ window,
8
+ parentRef,
9
+ needElevation
10
+ } = props;
11
+ const [stStyle, setStStyle] = useState({});
12
+ const [size] = useWindowResize();
13
+ useEffect(() => {
14
+ if (parentRef && parentRef?.current) {
15
+ const {
16
+ width,
17
+ left,
18
+ top
19
+ } = parentRef?.current?.getBoundingClientRect();
20
+ const inPercent = size?.width ? `${width / size.width * 100}%` : `${width}px`;
21
+ setStStyle({
22
+ width: `${inPercent}`,
23
+ left: `${left}px`,
24
+ top: `${top}px`,
25
+ defaultTop: top
26
+ });
27
+ }
28
+ }, [parentRef?.current, size?.width]);
29
+
30
+ // Note that you normally won't need to set the window ref as useScrollTrigger
31
+ // will default to window.
32
+ // This is only being set here because the demo is in an iframe.
33
+ const trigger = useScrollTrigger({
34
+ disableHysteresis: true,
35
+ threshold: stStyle?.defaultTop || 0,
36
+ target: window ? window() : undefined
37
+ });
38
+ const prevStyle = children?.props?.style || {};
39
+ return !needElevation ? {
40
+ position: "relative"
41
+ } : {
42
+ elevation: trigger ? 4 : 0,
43
+ position: trigger ? "fixed" : "relative",
44
+ className: "hreis",
45
+ style: {
46
+ ...prevStyle,
47
+ ...stStyle,
48
+ background: trigger ? "rgba(0,0,0,0.5)" : prevStyle?.background,
49
+ top: trigger ? "0px" : stStyle?.top
50
+ }
51
+ };
52
+ };
53
+ export default useEleveateScroll;
@@ -97,18 +97,19 @@ const Image = ({
97
97
  const onClose = () => {
98
98
  setOpenSettings(false);
99
99
  };
100
- const onDelete = () => {
101
- Transforms.removeNodes(editor, {
102
- at: path
103
- });
104
- };
105
- const onAddText = () => {
106
- Transforms.wrapNodes(editor, {
107
- type: "image-text-wrapper",
108
- children: []
109
- });
110
- insertImageText(editor, [...path, 1]);
111
- };
100
+
101
+ // const onDelete = () => {
102
+ // Transforms.removeNodes(editor, { at: path });
103
+ // };
104
+
105
+ // const onAddText = () => {
106
+ // Transforms.wrapNodes(editor, {
107
+ // type: "image-text-wrapper",
108
+ // children: [],
109
+ // });
110
+ // insertImageText(editor, [...path, 1]);
111
+ // };
112
+
112
113
  const ToolBar = () => {
113
114
  return selected ? /*#__PURE__*/_jsx("div", {
114
115
  className: "element-toolbar",
@@ -161,7 +162,7 @@ const Image = ({
161
162
  alt: alt,
162
163
  src: url,
163
164
  onClick: handleImageClick
164
- }), selected && !readOnly && size.width > 300 && size.height > 300 && /*#__PURE__*/_jsx(IconButton, {
165
+ }), selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
165
166
  onPointerDown: onMouseDown,
166
167
  style: {
167
168
  opacity: 1,