@flozy/editor 1.6.5 → 1.6.6

Sign up to get free protection for your applications and to get access to all the features.
@@ -4,7 +4,6 @@ import { createEditor, Transforms } from "slate";
4
4
  import { Slate, Editable, ReactEditor } from "slate-react";
5
5
  import { DndContext, DragOverlay } from "@dnd-kit/core";
6
6
  import { useDebounce } from "use-debounce";
7
- // import Toolbar from "./Toolbar/Toolbar";
8
7
  import { getMarked, getBlock } from "./utils/SlateUtilityFunctions";
9
8
  import CodeToText from "./Elements/CodeToText/CodeToText";
10
9
  import { draftToSlate } from "./utils/draftToSlate";
@@ -21,7 +20,6 @@ import PopupTool from "./Toolbar/PopupTool";
21
20
  import "./font.css";
22
21
  import "./Editor.css";
23
22
  import { Box } from "@mui/material";
24
- import { KeyboardDoubleArrowDown, KeyboardDoubleArrowLeft, KeyboardDoubleArrowRight, KeyboardDoubleArrowUp } from "@mui/icons-material";
25
23
  import Shorthands from "./common/Shorthands";
26
24
  import MiniToolbar from "./Toolbar/Mini/MiniToolbar";
27
25
  import { EditorProvider } from "./hooks/useMouseMove";
@@ -361,65 +359,13 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
361
359
  backgroundSize: "40px 40px",
362
360
  backgroundPosition: "-19px -19px"
363
361
  } : {};
364
- const handleToolbarSwitch = () => {
365
- if (ref) {
366
- ref?.current?.toggleToolbarShow();
367
- } else {
368
- setToolbarShow(!toolbarShow);
369
- }
370
- };
371
- const getToolbarShowOpenIcon = type => {
372
- switch (toolbarOptions?.toolbarPosition) {
373
- case "top-left":
374
- if (type === "open") {
375
- return /*#__PURE__*/_jsx(KeyboardDoubleArrowRight, {});
376
- }
377
- return /*#__PURE__*/_jsx(KeyboardDoubleArrowLeft, {});
378
- case "top-right":
379
- if (type === "open") {
380
- return /*#__PURE__*/_jsx(KeyboardDoubleArrowLeft, {});
381
- }
382
- return /*#__PURE__*/_jsx(KeyboardDoubleArrowRight, {});
383
- case "left-top":
384
- if (type === "open") {
385
- return /*#__PURE__*/_jsx(KeyboardDoubleArrowDown, {});
386
- }
387
- return /*#__PURE__*/_jsx(KeyboardDoubleArrowUp, {});
388
- case "left-bottom":
389
- if (type === "open") {
390
- return /*#__PURE__*/_jsx(KeyboardDoubleArrowUp, {});
391
- }
392
- return /*#__PURE__*/_jsx(KeyboardDoubleArrowDown, {});
393
- case "right-top":
394
- if (type === "open") {
395
- return /*#__PURE__*/_jsx(KeyboardDoubleArrowDown, {});
396
- }
397
- return /*#__PURE__*/_jsx(KeyboardDoubleArrowUp, {});
398
- case "right-bottom":
399
- if (type === "open") {
400
- return /*#__PURE__*/_jsx(KeyboardDoubleArrowUp, {});
401
- }
402
- return /*#__PURE__*/_jsx(KeyboardDoubleArrowDown, {});
403
- case "bottom-left":
404
- if (type === "open") {
405
- return /*#__PURE__*/_jsx(KeyboardDoubleArrowRight, {});
406
- }
407
- return /*#__PURE__*/_jsx(KeyboardDoubleArrowLeft, {});
408
- case "bottom-right":
409
- if (type === "open") {
410
- return /*#__PURE__*/_jsx(KeyboardDoubleArrowLeft, {});
411
- }
412
- return /*#__PURE__*/_jsx(KeyboardDoubleArrowRight, {});
413
- default:
414
- if (type === "open") {
415
- return /*#__PURE__*/_jsx(KeyboardDoubleArrowRight, {});
416
- }
417
- return /*#__PURE__*/_jsx(KeyboardDoubleArrowLeft, {});
418
- }
362
+ const hasTopBanner = () => {
363
+ const tb = editor.children[0];
364
+ return tb?.type === "topbanner" ? tb : null;
419
365
  };
420
366
  const renderTopBanner = () => {
421
- const tb = editor.children[0];
422
- return tb?.type === "topbanner" ? /*#__PURE__*/_jsx(TopBanner, {
367
+ const tb = hasTopBanner();
368
+ return tb ? /*#__PURE__*/_jsx(TopBanner, {
423
369
  element: tb,
424
370
  editor: editor,
425
371
  customProps: customProps
@@ -446,51 +392,59 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
446
392
  onDragStart: handleDragStart,
447
393
  onDragEnd: handleDragEnd,
448
394
  children: [/*#__PURE__*/_jsx(Overlay, {
449
- children: /*#__PURE__*/_jsxs(Box, {
395
+ children: /*#__PURE__*/_jsx(Box, {
396
+ className: `${hasTopBanner() ? "has-topbanner" : ""}`,
450
397
  sx: classes.slateWrapper,
451
398
  id: "slate-wrapper-scroll-container",
452
- children: [renderTopBanner(), /*#__PURE__*/_jsx("div", {
453
- className: "scroll-area",
454
- children: /*#__PURE__*/_jsxs("div", {
455
- ref: editorWrapper,
456
- className: `editor-wrapper ${pageWidth === "fixed" ? "fixed" : "full"}`,
399
+ children: /*#__PURE__*/_jsxs(Box, {
400
+ component: "div",
401
+ className: "max-content",
402
+ children: [renderTopBanner(), /*#__PURE__*/_jsx("div", {
403
+ className: "scroll-area",
457
404
  style: {
458
- backgroundColor: pageColor || "#FFF",
459
- paddingLeft: `${bannerSpacing?.left || 12}px`,
460
- paddingRight: `${bannerSpacing?.right || 12}px`,
461
- paddingTop: `${bannerSpacing?.top}px`,
462
- paddingBottom: `${bannerSpacing?.bottom}px`,
463
- width: !pageWidth || pageWidth === "fixed" ? fixedWidth : fullWidth,
464
- // width: viewport.w ? `${viewport.w}px` : "100%",
465
- height: viewport.h ? `${viewport.h}px` : `100%`,
466
- alignSelf: "center",
467
- transformOrigin: "left top",
468
- transition: "all 0.3s",
469
- minHeight: "87%"
405
+ backgroundColor: pageColor || "#FFF"
470
406
  },
471
- children: [/*#__PURE__*/_jsx(PopupTool, {
472
- onDrawerOpen: onDrawerOpen
473
- }), /*#__PURE__*/_jsx(Editable, {
474
- className: "innert-editor-textbox",
475
- readOnly: isReadOnly,
476
- renderElement: renderElement,
477
- renderLeaf: renderLeaf,
478
- onKeyDown: onKeyDown
479
- }), /*#__PURE__*/_jsx(MentionsPopup, {
480
- ref: mentionsRef,
481
- mentions: mentions,
482
- setMentions: setMentions,
483
- editor: editor,
484
- target: target,
485
- index: index,
486
- chars: chars,
487
- type: type
488
- })]
489
- })
490
- }), /*#__PURE__*/_jsx(MiniToolbar, {
491
- customProps: customProps,
492
- toolbarOptions: toolbarOptions
493
- })]
407
+ children: /*#__PURE__*/_jsxs("div", {
408
+ ref: editorWrapper,
409
+ className: `editor-wrapper ${pageWidth === "fixed" ? "fixed" : "full"}`,
410
+ style: {
411
+ backgroundColor: "transparent",
412
+ paddingLeft: `${bannerSpacing?.left || 12}px`,
413
+ paddingRight: `${bannerSpacing?.right || 12}px`,
414
+ paddingTop: `${bannerSpacing?.top}px`,
415
+ paddingBottom: `${bannerSpacing?.bottom}px`,
416
+ width: !pageWidth || pageWidth === "fixed" ? fixedWidth : fullWidth,
417
+ // width: viewport.w ? `${viewport.w}px` : "100%",
418
+ height: viewport.h ? `${viewport.h}px` : `100%`,
419
+ alignSelf: "center",
420
+ transformOrigin: "left top",
421
+ transition: "all 0.3s",
422
+ minHeight: "87%"
423
+ },
424
+ children: [/*#__PURE__*/_jsx(PopupTool, {
425
+ onDrawerOpen: onDrawerOpen
426
+ }), /*#__PURE__*/_jsx(Editable, {
427
+ className: "innert-editor-textbox",
428
+ readOnly: isReadOnly,
429
+ renderElement: renderElement,
430
+ renderLeaf: renderLeaf,
431
+ onKeyDown: onKeyDown
432
+ }), /*#__PURE__*/_jsx(MentionsPopup, {
433
+ ref: mentionsRef,
434
+ mentions: mentions,
435
+ setMentions: setMentions,
436
+ editor: editor,
437
+ target: target,
438
+ index: index,
439
+ chars: chars,
440
+ type: type
441
+ })]
442
+ })
443
+ }), !readOnly ? /*#__PURE__*/_jsx(MiniToolbar, {
444
+ customProps: customProps,
445
+ toolbarOptions: toolbarOptions
446
+ }) : null]
447
+ })
494
448
  })
495
449
  }), /*#__PURE__*/_jsx(DragOverlay, {
496
450
  className: "drag-overlay",
@@ -34,6 +34,9 @@ const DialogWrapper = props => {
34
34
  })
35
35
  })
36
36
  }), /*#__PURE__*/_jsx(DialogContent, {
37
+ style: {
38
+ padding: "0px"
39
+ },
37
40
  children: children
38
41
  }), /*#__PURE__*/_jsx(DialogActions, {
39
42
  style: {
@@ -46,25 +46,41 @@ const SingleColorButton = ({
46
46
  export const AllColors = props => {
47
47
  const {
48
48
  classes,
49
+ open,
50
+ anchorEl,
51
+ onClose,
49
52
  onSelect,
50
53
  activeColor
51
54
  } = props;
52
55
  const all = ColorChunks([]);
53
- return /*#__PURE__*/_jsx(Box, {
54
- component: "div",
55
- sx: classes.allColor,
56
+ return /*#__PURE__*/_jsx(Popover, {
57
+ open: open,
58
+ anchorEl: anchorEl,
59
+ anchorOrigin: {
60
+ vertical: "bottom",
61
+ horizontal: "center"
62
+ },
63
+ transformOrigin: {
64
+ vertical: "top",
65
+ horizontal: "center"
66
+ },
67
+ onClose: onClose,
56
68
  children: /*#__PURE__*/_jsx(Box, {
57
- sx: classes.allColorInner,
69
+ component: "div",
70
+ sx: classes.allColor,
58
71
  children: /*#__PURE__*/_jsx(Box, {
59
- className: "buttonsWrpr",
60
- children: all.map((m, i) => {
61
- return /*#__PURE__*/_jsx(SingleColorButton, {
62
- crs: m,
63
- index: i,
64
- handleSelect: onSelect,
65
- classes: classes,
66
- activeColor: activeColor
67
- }, `si_btn_row1_${m}_${i}`);
72
+ sx: classes.allColorInner,
73
+ children: /*#__PURE__*/_jsx(Box, {
74
+ className: "buttonsWrpr",
75
+ children: all.map((m, i) => {
76
+ return /*#__PURE__*/_jsx(SingleColorButton, {
77
+ crs: m,
78
+ index: i,
79
+ handleSelect: onSelect,
80
+ classes: classes,
81
+ activeColor: activeColor
82
+ }, `si_btn_row1_${m}_${i}`);
83
+ })
68
84
  })
69
85
  })
70
86
  })
@@ -16,8 +16,8 @@ const ColorPickerStyles = () => ({
16
16
  "&:before": {
17
17
  content: '" "',
18
18
  position: "absolute",
19
- top: "-5px",
20
- left: "-5px",
19
+ top: "-2px",
20
+ left: "-2px",
21
21
  width: "calc(100% + 4px)",
22
22
  height: "calc(100% + 4px)",
23
23
  border: "3px solid blue",
@@ -14,7 +14,7 @@ const DrawSignature = props => {
14
14
  } = props;
15
15
  const [uploading, setUploading] = useState(false);
16
16
  const onSigned = async () => {
17
- const strImage = canvasRef.toDataURL();
17
+ const strImage = canvasRef.getTrimmedCanvas().toDataURL();
18
18
  setUploading(true);
19
19
  const result = await services("uploadFile", {
20
20
  image: strImage
@@ -37,8 +37,9 @@ const Signed = props => {
37
37
  src: signature,
38
38
  alt: "signature",
39
39
  style: {
40
- width: "150px",
41
- height: "auto"
40
+ width: "200px",
41
+ height: "auto",
42
+ marginBottom: "4px"
42
43
  }
43
44
  });
44
45
  } else if (signedText) {
@@ -65,12 +66,22 @@ const Signed = props => {
65
66
  }) : null, /*#__PURE__*/_jsxs("button", {
66
67
  className: "signed-btn",
67
68
  onClick: onSelect,
69
+ style: {
70
+ background: "transparent",
71
+ border: "none",
72
+ textAlign: "left"
73
+ },
68
74
  children: [renderSign(), /*#__PURE__*/_jsx("div", {
69
75
  style: {
70
76
  fontWeight: "bold"
71
77
  },
72
78
  children: signedBy || ""
73
79
  }), /*#__PURE__*/_jsx("div", {
80
+ style: {
81
+ fontSize: "10px",
82
+ color: "#ccc",
83
+ marginTop: "4px"
84
+ },
74
85
  children: formatDate(signedOn, "MM/DD/YYYY")
75
86
  })]
76
87
  })]
@@ -32,7 +32,11 @@ const SimpleText = props => {
32
32
  const {
33
33
  element,
34
34
  attributes,
35
- children
35
+ children,
36
+ customProps
37
+ } = props;
38
+ const {
39
+ readOnly
36
40
  } = props;
37
41
  const classes = SimpleTextStyle();
38
42
  const editor = useSlateStatic();
@@ -47,13 +51,13 @@ const SimpleText = props => {
47
51
  ...attributes,
48
52
  className: `simple-text`,
49
53
  sx: classes.root,
50
- children: [children, selected && noContent ? /*#__PURE__*/_jsxs("span", {
54
+ children: [children, selected && noContent && !readOnly ? /*#__PURE__*/_jsxs("span", {
51
55
  className: "placeholder-simple-text",
52
56
  children: ["Type ", /*#__PURE__*/_jsx("span", {
53
57
  className: "bg-pad-sl",
54
58
  children: "/"
55
59
  }), " for browse elements"]
56
- }) : null, emptyEditor ? /*#__PURE__*/_jsx("span", {
60
+ }) : null, emptyEditor && !readOnly ? /*#__PURE__*/_jsx("span", {
57
61
  className: "placeholder-simple-text",
58
62
  children: "Write Something..."
59
63
  }) : null]
@@ -3,19 +3,30 @@ const editorStyles = ({
3
3
  }) => ({
4
4
  root: {
5
5
  display: "flex",
6
- flexDirection: "column",
7
6
  position: "relative",
8
- padding: "0 8px"
7
+ padding: "0px",
8
+ alignItems: "center",
9
+ justifyContent: "center"
9
10
  },
10
11
  slateWrapper: {
11
12
  height: `${window.innerHeight - padHeight}px`,
12
- overflow: "auto",
13
+ width: "100%",
14
+ overflowY: "auto",
15
+ overflowX: "hidden",
13
16
  display: "flex",
14
17
  flexDirection: "column",
18
+ alignItems: "center",
19
+ "& .max-content": {
20
+ maxWidth: "1280px",
21
+ width: "100%",
22
+ display: "flex",
23
+ flex: 1,
24
+ flexDirection: "column",
25
+ paddingBottom: "18px"
26
+ },
15
27
  "& .scroll-area": {
16
28
  display: "flex",
17
29
  justifyContent: "center",
18
- // minHeight: "100vh",
19
30
  flex: 1
20
31
  },
21
32
  "& .editor-wrapper": {
@@ -5,7 +5,7 @@ const miniToolbarStyles = () => ({
5
5
  justifyContent: "center",
6
6
  alignItems: "center",
7
7
  position: "absolute",
8
- bottom: "-12px",
8
+ bottom: "-25px",
9
9
  left: 0,
10
10
  right: 0,
11
11
  margin: "auto",
@@ -205,8 +205,8 @@ const usePopupStyle = () => ({
205
205
  "&:before": {
206
206
  content: '" "',
207
207
  position: "absolute",
208
- top: "-5px",
209
- left: "-5px",
208
+ top: "-2px",
209
+ left: "-2px",
210
210
  width: "calc(100% + 4px)",
211
211
  height: "calc(100% + 4px)",
212
212
  border: "3px solid blue",
@@ -327,22 +327,12 @@ const TextFormat = props => {
327
327
  },
328
328
  children: "Full width"
329
329
  })]
330
- }), /*#__PURE__*/_jsx(Popover, {
330
+ }), /*#__PURE__*/_jsx(AllColors, {
331
331
  open: open,
332
332
  anchorEl: anchorEl,
333
- anchorOrigin: {
334
- vertical: "bottom",
335
- horizontal: "center"
336
- },
337
- transformOrigin: {
338
- vertical: "top",
339
- horizontal: "center"
340
- },
341
333
  onClose: onClosePicker,
342
- children: /*#__PURE__*/_jsx(AllColors, {
343
- classes: classes,
344
- onSelect: onSelectColor
345
- })
334
+ classes: classes,
335
+ onSelect: onSelectColor
346
336
  })]
347
337
  });
348
338
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "1.6.5",
3
+ "version": "1.6.6",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"
@@ -59,7 +59,7 @@
59
59
  "storybook": "storybook dev -p 6006",
60
60
  "build-storybook": "storybook build",
61
61
  "publish:npm": "rm -rf dist && mkdir dist && babel src/components -d dist --copy-files",
62
- "publish:local": "rm -rf dist && mkdir dist && babel src/components -d dist --copy-files && rm -rf /Users/dineshkumar/Desktop/devop/sweetpsocial-2.0/client/node_modules/@flozy/editor/dist && babel dist -d /Users/dineshkumar/Desktop/devop/sweetpsocial-2.0/client/node_modules/@flozy/editor/dist --copy-files"
62
+ "publish:local": "rm -rf /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist --copy-files"
63
63
  },
64
64
  "eslintConfig": {
65
65
  "extends": [