@flozy/editor 1.6.4 → 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: {
@@ -855,4 +855,42 @@ blockquote {
855
855
  /** to avoid line space **/
856
856
  .page-settings {
857
857
  height: 0px;
858
+ }
859
+
860
+ /* HTML: <div class="loader"></div> */
861
+ .img-loader-wrapper {
862
+ width:28px;
863
+ aspect-ratio: 1;
864
+ border-radius: 50%;
865
+ background: #F10C49;
866
+ animation: l9 2s infinite;
867
+ }
868
+ @keyframes l9 {
869
+ 0% {box-shadow:
870
+ 0 -16px #F4DD51, calc(16px*0.707) calc(-16px*0.707) #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
871
+ 0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
872
+ 12.5% {box-shadow:
873
+ 0 0 #F4DD51, calc(16px*0.707) calc(-16px*0.707) #E3AAD6,16px 0 #F4DD51, 0 0 #E3AAD6,
874
+ 0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
875
+ 25% {box-shadow:
876
+ 0 0 #F4DD51, 0 0 #E3AAD6,16px 0 #F4DD51, calc(16px*0.707) calc(16px*0.707) #E3AAD6,
877
+ 0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
878
+ 37.5% {box-shadow:
879
+ 0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, calc(16px*0.707) calc(16px*0.707) #E3AAD6,
880
+ 0 16px #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
881
+ 50% {box-shadow:
882
+ 0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
883
+ 0 16px #F4DD51, calc(-16px*0.707) calc(16px*0.707) #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
884
+ 62.5% {box-shadow:
885
+ 0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
886
+ 0 0 #F4DD51, calc(-16px*0.707) calc(16px*0.707) #E3AAD6,-16px 0 #F4DD51, 0 0 #E3AAD6}
887
+ 75% {box-shadow:
888
+ 0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
889
+ 0 0 #F4DD51, 0 0 #E3AAD6,-16px 0 #F4DD51, calc(-16px*0.707) calc(-16px*0.707) #E3AAD6}
890
+ 87.5% {box-shadow:
891
+ 0 -16px #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
892
+ 0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, calc(-16px*0.707) calc(-16px*0.707) #E3AAD6}
893
+ 100% {box-shadow:
894
+ 0 -16px #F4DD51, calc(16px*0.707) calc(-16px*0.707) #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
895
+ 0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
858
896
  }
@@ -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",
@@ -1,5 +1,5 @@
1
1
  import React, { useEffect, useState } from "react";
2
- import { Grid, Tabs, Tab, Card, CardMedia, CardContent, Box } from "@mui/material";
2
+ import { Grid, Tabs, Tab, Card, CardMedia, CardContent, Box, CircularProgress } from "@mui/material";
3
3
  import { jsx as _jsx } from "react/jsx-runtime";
4
4
  import { jsxs as _jsxs } from "react/jsx-runtime";
5
5
  const Categories = props => {
@@ -23,6 +23,24 @@ const Categories = props => {
23
23
  }, m))
24
24
  });
25
25
  };
26
+ const ProgressBar = ({
27
+ loading
28
+ }) => {
29
+ return loading ? /*#__PURE__*/_jsx(Grid, {
30
+ item: true,
31
+ xs: 12,
32
+ style: {
33
+ display: "flex",
34
+ justifyContent: "center",
35
+ alignItems: "center",
36
+ margin: 0,
37
+ padding: 0,
38
+ height: "50px",
39
+ overflow: "hidden"
40
+ },
41
+ children: /*#__PURE__*/_jsx(CircularProgress, {})
42
+ }) : null;
43
+ };
26
44
  const AddTemplates = props => {
27
45
  const {
28
46
  classes,
@@ -33,6 +51,7 @@ const AddTemplates = props => {
33
51
  const {
34
52
  services
35
53
  } = customProps;
54
+ const [loading, setLoading] = useState(false);
36
55
  const [categories, setCategories] = useState([]);
37
56
  const [category, setCategory] = useState("");
38
57
  const [templates, setTemplates] = useState([]);
@@ -41,6 +60,7 @@ const AddTemplates = props => {
41
60
  getTemplatesList();
42
61
  }, []);
43
62
  const getTemplatesList = async () => {
63
+ setLoading(true);
44
64
  const result = await services("listTemplates", {});
45
65
  const tempList = result?.data?.filter(f => f.type === "Template");
46
66
  const lic = tempList?.reduce((a, b) => {
@@ -54,6 +74,7 @@ const AddTemplates = props => {
54
74
  setCategories(lic);
55
75
  setCategory(lic[0]);
56
76
  setFilteredTemplates(ft);
77
+ setLoading(false);
57
78
  };
58
79
  const handleChange = (event, newValue) => {
59
80
  setCategory(newValue);
@@ -79,27 +100,31 @@ const AddTemplates = props => {
79
100
  data: categories,
80
101
  handleChange: handleChange
81
102
  })
82
- }), /*#__PURE__*/_jsx(Grid, {
103
+ }), /*#__PURE__*/_jsxs(Grid, {
83
104
  container: true,
84
- spacing: 1,
105
+ spacing: 0,
85
106
  className: `${fullScreen ? "fullscreen" : ""}`,
86
107
  sx: classes.templateCardsWrpr,
87
- children: filteredTemplates.map(m => {
108
+ children: [/*#__PURE__*/_jsx(ProgressBar, {
109
+ loading: loading
110
+ }), filteredTemplates.map(m => {
88
111
  return /*#__PURE__*/_jsx(Grid, {
89
112
  item: true,
90
113
  xs: 4,
91
114
  children: /*#__PURE__*/_jsxs(Card, {
92
115
  sx: classes.templateCard,
93
116
  onClick: onSelectTemplate(m),
94
- children: [/*#__PURE__*/_jsx(Box, {
117
+ children: [/*#__PURE__*/_jsxs(Box, {
95
118
  sx: classes.templateCardMediaWrpr,
96
- children: /*#__PURE__*/_jsx(CardMedia, {
119
+ children: [/*#__PURE__*/_jsx("div", {
120
+ className: "img-loader-wrapper"
121
+ }), /*#__PURE__*/_jsx(CardMedia, {
97
122
  className: `template-card-media ${fullScreen ? "fullscreen" : ""}`,
98
123
  component: "div",
99
124
  image: m?.thumbnail,
100
125
  alt: m?.title,
101
126
  sx: classes.templateCardMedia
102
- })
127
+ })]
103
128
  }), /*#__PURE__*/_jsx(CardContent, {
104
129
  style: {
105
130
  height: "30px"
@@ -108,7 +133,7 @@ const AddTemplates = props => {
108
133
  })]
109
134
  })
110
135
  }, `template_${m.id}`);
111
- })
136
+ })]
112
137
  })]
113
138
  });
114
139
  };
@@ -21,7 +21,8 @@ const usePopupStyle = () => ({
21
21
  "&.templates": {
22
22
  width: "500px",
23
23
  "&.fullscreen": {
24
- width: "100%"
24
+ width: "100%",
25
+ maxHeight: "fit-content"
25
26
  }
26
27
  },
27
28
  "& .headerContainer": {},
@@ -130,18 +131,33 @@ const usePopupStyle = () => ({
130
131
  backgroundSize: "100% auto",
131
132
  borderRadius: "10px",
132
133
  boxShadow: "0px 1px 3px 3px rgba(0,0,0,0.12)",
134
+ zIndex: 1,
135
+ position: "relative",
133
136
  "&.fullscreen": {
134
137
  height: "280px"
135
138
  }
136
139
  },
137
140
  templateCardMediaWrpr: {
138
- padding: "8px",
141
+ position: "relative",
142
+ padding: "4px",
143
+ margin: "8px",
139
144
  border: "1px solid rgba(0, 0, 0, 0.1)",
140
145
  borderRadius: "10px",
141
- background: "#FEFEFE",
146
+ backgroundColor: "#FEFEFE",
142
147
  overflow: "hidden",
143
148
  "&:hover": {
144
149
  border: "1px solid #2563EB"
150
+ },
151
+ "& .img-loader-wrapper": {
152
+ position: "absolute",
153
+ width: "12px",
154
+ height: "12px",
155
+ left: 0,
156
+ right: 0,
157
+ top: 0,
158
+ bottom: 0,
159
+ margin: "auto",
160
+ zIndex: 0
145
161
  }
146
162
  },
147
163
  templateCardsWrpr: {
@@ -189,8 +205,8 @@ const usePopupStyle = () => ({
189
205
  "&:before": {
190
206
  content: '" "',
191
207
  position: "absolute",
192
- top: "-5px",
193
- left: "-5px",
208
+ top: "-2px",
209
+ left: "-2px",
194
210
  width: "calc(100% + 4px)",
195
211
  height: "calc(100% + 4px)",
196
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
  };
@@ -1,27 +1,33 @@
1
1
  import { Transforms } from "slate";
2
2
  import insertNewLine from "./insertNewLine";
3
3
  export const insertAccordion = editor => {
4
- const accordion = {
5
- type: "accordion",
6
- children: [{
7
- type: "accordion-summary",
4
+ try {
5
+ const accordion = {
6
+ type: "accordion",
8
7
  children: [{
9
- type: "paragraph",
8
+ type: "accordion-summary",
10
9
  children: [{
11
- text: ""
10
+ type: "paragraph",
11
+ children: [{
12
+ text: ""
13
+ }]
12
14
  }]
13
- }]
14
- }, {
15
- type: "accordion-details",
16
- children: [{
17
- type: "paragraph",
15
+ }, {
16
+ type: "accordion-details",
18
17
  children: [{
19
- text: ""
18
+ type: "paragraph",
19
+ children: [{
20
+ text: ""
21
+ }]
20
22
  }]
21
23
  }]
22
- }]
23
- };
24
- Transforms.insertNodes(editor, accordion);
25
- Transforms.move(editor);
26
- insertNewLine(editor);
24
+ };
25
+ Transforms.insertNodes(editor, accordion);
26
+ Transforms.move(editor, {
27
+ at: editor.selection.anchor.path
28
+ });
29
+ insertNewLine(editor);
30
+ } catch (err) {
31
+ console.log(err);
32
+ }
27
33
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "1.6.4",
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": [