@flozy/editor 3.6.7 → 3.6.9

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,5 +1,5 @@
1
1
  import React, { useCallback, useMemo, useRef, useState, useEffect, useImperativeHandle, forwardRef } from "react";
2
- import { Editable, Slate } from 'slate-react';
2
+ import { Editable, Slate, ReactEditor } from 'slate-react';
3
3
  import { createEditor } from 'slate';
4
4
  import { useDebounce } from "use-debounce";
5
5
  import withCommon from "./hooks/withCommon";
@@ -44,7 +44,16 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
44
44
  const isReadOnly = readOnly === "readonly";
45
45
  useImperativeHandle(ref, () => ({
46
46
  emojiClick: emoji => {
47
- insertEmoji(editor, emoji?.native, editor.selection);
47
+ if (editor) {
48
+ insertEmoji(editor, emoji?.native, editor.selection);
49
+ ReactEditor.focus(editor);
50
+ }
51
+ },
52
+ // Focus enable
53
+ enableFocus: () => {
54
+ if (editor) {
55
+ ReactEditor.focus(editor);
56
+ }
48
57
  }
49
58
  }));
50
59
  useEffect(() => {
@@ -29,7 +29,7 @@ import Section from "./common/Section";
29
29
  import "animate.css";
30
30
  import decorators from "./utils/Decorators";
31
31
  import { getTRBLBreakPoints, getVariableValue } from "./helper/theme";
32
- import { handleInsertLastElement, outsideEditorClickLabel } from "./utils/helper";
32
+ import { handleInsertLastElement, onDeleteKey, outsideEditorClickLabel } from "./utils/helper";
33
33
  import useWindowResize from "./hooks/useWindowResize";
34
34
  import { getTheme } from "./theme";
35
35
  import { useTheme } from "@emotion/react";
@@ -337,7 +337,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
337
337
  } else if (isCtrlKey) {
338
338
  commands({
339
339
  event,
340
- editor
340
+ editor,
341
+ needLayout
341
342
  });
342
343
  } else if (event.key === "Tab") {
343
344
  event.preventDefault();
@@ -9,6 +9,55 @@ import Icon from "../../common/Icon";
9
9
  import { useEditorSelection } from "../../hooks/useMouseMove";
10
10
  import { jsx as _jsx } from "react/jsx-runtime";
11
11
  import { jsxs as _jsxs } from "react/jsx-runtime";
12
+ const accordionBtnStyleKeys = {
13
+ accordionTextColor: "textColor",
14
+ accordionBgColor: "bgColor",
15
+ accordionBorderColor: "borderColor"
16
+ };
17
+ const getAccordionData = updateData => {
18
+ const accordionBtnStyle = {}; // accordion btn style will come under type: accordion node
19
+ const accordionTitleStyle = {}; // accordion title style will come under type: accordion-summary node
20
+
21
+ Object.entries(updateData).forEach(([key, value]) => {
22
+ const accordionBtnStyleKey = accordionBtnStyleKeys[key];
23
+ if (accordionBtnStyleKey) {
24
+ // converting accordion button elementProp keys to node keys e.g: accordionTextColor -> textColor
25
+ accordionBtnStyle[accordionBtnStyleKey] = value;
26
+ return;
27
+ }
28
+ accordionTitleStyle[key] = value;
29
+ });
30
+ return {
31
+ accordionBtnStyle,
32
+ accordionTitleStyle
33
+ };
34
+ };
35
+ const convertAccordionBtnStyleKeys = (data = {}) => {
36
+ const style = {
37
+ ...data
38
+ };
39
+ Object.entries(accordionBtnStyleKeys).forEach(([key, value]) => {
40
+ const val = data[value];
41
+ if (val) {
42
+ // deleting the existing style key in node e.g: textColor
43
+ delete style[value];
44
+
45
+ // convertint into new key in element props e.g: accordionTextColor
46
+ style[key] = val;
47
+ }
48
+ });
49
+ return style;
50
+ };
51
+ const getElementProps = element => {
52
+ const accordionSummary = element.children?.find(c => c.type === "accordion-summary");
53
+
54
+ // joining accordion title and button styles
55
+ const elementProps = {
56
+ ...accordionSummary,
57
+ ...convertAccordionBtnStyleKeys(element)
58
+ };
59
+ return elementProps;
60
+ };
12
61
  const Accordion = props => {
13
62
  const {
14
63
  attributes,
@@ -69,16 +118,34 @@ const Accordion = props => {
69
118
  at: path
70
119
  });
71
120
  };
121
+ const setNodes = (data, path) => {
122
+ Transforms.setNodes(editor, data, {
123
+ at: path
124
+ });
125
+ };
72
126
  const onSave = data => {
73
127
  const updateData = {
74
128
  ...data
75
129
  };
76
- delete updateData.children;
77
- Transforms.setNodes(editor, {
78
- ...updateData
79
- }, {
80
- at: path
81
- });
130
+ const {
131
+ accordionBtnStyle,
132
+ accordionTitleStyle
133
+ } = getAccordionData(updateData);
134
+
135
+ // applying accordion title style
136
+ const accordionSummary = data.children?.find(c => c.type === "accordion-summary");
137
+ const accordionSummaryPath = ReactEditor.findPath(editor, accordionSummary);
138
+ setNodes({
139
+ ...accordionTitleStyle,
140
+ type: "accordion-summary",
141
+ children: accordionSummary.children
142
+ }, accordionSummaryPath);
143
+
144
+ // applying accordion button style
145
+ delete accordionBtnStyle.children;
146
+ setNodes({
147
+ ...accordionBtnStyle
148
+ }, path);
82
149
  onClose();
83
150
  };
84
151
  const onClose = () => {
@@ -123,7 +190,7 @@ const Accordion = props => {
123
190
  },
124
191
  children: children[1]
125
192
  }), !readOnly && /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionBtnPopup, {
126
- element: element,
193
+ element: getElementProps(element),
127
194
  onSave: onSave,
128
195
  onClose: onClose,
129
196
  customProps: customProps
@@ -1,6 +1,7 @@
1
1
  import React from "react";
2
2
  import StyleBuilder from "../../common/StyleBuilder";
3
3
  import accordionTitleBtnStyle from "../../common/StyleBuilder/accordionTitleBtnStyle";
4
+ import accordionTitleStyle from "../../common/StyleBuilder/accordionTitleStyle";
4
5
  import { jsx as _jsx } from "react/jsx-runtime";
5
6
  const AccordionBtnPopup = props => {
6
7
  const {
@@ -10,12 +11,12 @@ const AccordionBtnPopup = props => {
10
11
  customProps
11
12
  } = props;
12
13
  return /*#__PURE__*/_jsx(StyleBuilder, {
13
- title: "Accordion Collapse Button",
14
+ title: "Accordion Settings",
14
15
  type: "accordionTitleBtnStyle",
15
16
  element: element,
16
17
  onSave: onSave,
17
18
  onClose: onClose,
18
- renderTabs: accordionTitleBtnStyle,
19
+ renderTabs: [...accordionTitleBtnStyle, ...accordionTitleStyle],
19
20
  customProps: customProps
20
21
  });
21
22
  };
@@ -1,68 +1,17 @@
1
- import React, { useState } from "react";
2
- import { Transforms } from "slate";
3
- import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
4
- import AccordionTitlePopup from "./AccordionTitlePopup";
5
- import { IconButton, Tooltip } from "@mui/material";
6
- import { GridSettingsIcon } from "../../common/iconslist";
7
- import { useEditorSelection } from "../../hooks/useMouseMove";
1
+ import React from "react";
8
2
  import { jsx as _jsx } from "react/jsx-runtime";
9
- import { jsxs as _jsxs } from "react/jsx-runtime";
10
3
  const AccordionSummary = props => {
11
4
  const {
12
5
  attributes,
13
6
  children,
14
- element,
15
- customProps
7
+ element
16
8
  } = props;
17
- const {
18
- readOnly
19
- } = customProps;
20
- const [openSetttings, setOpenSettings] = useState(false);
21
- const editor = useSlateStatic();
22
- const [showTool] = useEditorSelection(editor);
23
- const selected = useSelected();
24
- const path = ReactEditor.findPath(editor, element);
25
9
  const {
26
10
  textColor,
27
11
  bgColor,
28
12
  borderColor
29
13
  } = element;
30
- const ToolBar = () => {
31
- return selected && !showTool ? /*#__PURE__*/_jsx("div", {
32
- className: "element-toolbar hr",
33
- contentEditable: false,
34
- style: {
35
- top: "-42px"
36
- },
37
- children: /*#__PURE__*/_jsx(Tooltip, {
38
- title: "Settings",
39
- arrow: true,
40
- children: /*#__PURE__*/_jsx(IconButton, {
41
- onClick: onSettings,
42
- children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
43
- })
44
- })
45
- }) : null;
46
- };
47
- const onSettings = () => {
48
- setOpenSettings(true);
49
- };
50
- const onSave = data => {
51
- const updateData = {
52
- ...data
53
- };
54
- delete updateData.children;
55
- Transforms.setNodes(editor, {
56
- ...updateData
57
- }, {
58
- at: path
59
- });
60
- onClose();
61
- };
62
- const onClose = () => {
63
- setOpenSettings(false);
64
- };
65
- return /*#__PURE__*/_jsxs("div", {
14
+ return /*#__PURE__*/_jsx("div", {
66
15
  className: `accordion-summary-container`,
67
16
  ...attributes,
68
17
  style: {
@@ -72,12 +21,7 @@ const AccordionSummary = props => {
72
21
  border: `1px solid ${borderColor}`,
73
22
  color: textColor
74
23
  },
75
- children: [children, !readOnly && /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionTitlePopup, {
76
- element: element,
77
- onSave: onSave,
78
- onClose: onClose,
79
- customProps: customProps
80
- }) : null]
24
+ children: children
81
25
  });
82
26
  };
83
27
  export default AccordionSummary;
@@ -0,0 +1,35 @@
1
+ import { Editor, Transforms } from "slate";
2
+ const selectAll = (event, {
3
+ editor,
4
+ needLayout
5
+ }) => {
6
+ try {
7
+ if (needLayout) {
8
+ event.preventDefault();
9
+ // Select the entire document
10
+ const {
11
+ selection
12
+ } = editor;
13
+ const [firstNode] = Editor.nodes(editor, {
14
+ at: [0]
15
+ }); // First node
16
+ const [lastNode] = Editor.nodes(editor, {
17
+ at: [editor.children.length - 1]
18
+ }); // Last node
19
+
20
+ if (firstNode && lastNode) {
21
+ Transforms.select(editor, {
22
+ anchor: Editor.start(editor, [0]),
23
+ // Start at the first node
24
+ focus: Editor.end(editor, [editor.children.length - 1]) // End at the last node
25
+ });
26
+ }
27
+ }
28
+ } catch (err) {
29
+ console.log(err);
30
+ }
31
+ };
32
+ const EDITORCMDS = {
33
+ a: selectAll
34
+ };
35
+ export default EDITORCMDS;
@@ -13,7 +13,8 @@ const MentionsListCard = props => {
13
13
  } = props;
14
14
  const {
15
15
  name,
16
- email
16
+ email,
17
+ avatar_filename = null
17
18
  } = data;
18
19
  return /*#__PURE__*/_jsxs(Card, {
19
20
  sx: {
@@ -37,7 +38,9 @@ const MentionsListCard = props => {
37
38
  alignItems: "center"
38
39
  },
39
40
  alt: name,
40
- children: /*#__PURE__*/_jsx(Avatar, {})
41
+ children: /*#__PURE__*/_jsx(Avatar, {
42
+ src: avatar_filename
43
+ })
41
44
  }), /*#__PURE__*/_jsx(Box, {
42
45
  sx: {
43
46
  display: "flex",
@@ -10,7 +10,7 @@ const usePopupStyles = theme => ({
10
10
  papper: {
11
11
  boxShadow: "none",
12
12
  width: "300px",
13
- height: "300px",
13
+ height: "auto",
14
14
  overflow: "auto",
15
15
  padding: "8px",
16
16
  margin: "0px",
@@ -39,10 +39,13 @@ const usePopupStyles = theme => ({
39
39
  color: theme?.palette?.editor?.textColor
40
40
  },
41
41
  "&.active": {
42
- background: `${theme?.palette?.containers?.bg3 || "#E9F3FE"}`
42
+ background: `#2563EB2B`,
43
+ "& .MuiTypography-root": {
44
+ color: `${theme?.palette?.editor?.activeColor} !important`
45
+ }
43
46
  },
44
47
  "&:hover": {
45
- background: `${theme?.palette?.containers?.bg3 || "#E9F3FE"}`
48
+ background: theme?.palette?.action?.hover || `#F4F4F4`
46
49
  },
47
50
  "&.renderComp": {
48
51
  padding: "0px",
@@ -1,18 +1,18 @@
1
1
  const accordionTitleBtnStyle = [{
2
2
  tab: "Colors",
3
- value: "colors",
3
+ value: "accordionColor",
4
4
  fields: [{
5
- label: "Text Color",
6
- key: "textColor",
5
+ label: "Accordion Color",
6
+ key: "accordionTextColor",
7
7
  type: "color",
8
8
  needPreview: true
9
9
  }, {
10
- label: "Background Color",
11
- key: "bgColor",
10
+ label: "Accordion Background Color",
11
+ key: "accordionBgColor",
12
12
  type: "color"
13
13
  }, {
14
- label: "Border Color",
15
- key: "borderColor",
14
+ label: "Accordion Border Color",
15
+ key: "accordionBorderColor",
16
16
  type: "color"
17
17
  }]
18
18
  }];
@@ -1,20 +1,4 @@
1
1
  const accordionTitleStyle = [{
2
- tab: "Banner Spacing",
3
- value: "bannerSpacing",
4
- fields: [{
5
- label: "Banner Spacing",
6
- key: "bannerSpacing",
7
- type: "bannerSpacing"
8
- }]
9
- }, {
10
- tab: "Border Radius",
11
- value: "borderRadius",
12
- fields: [{
13
- label: "Border Radius",
14
- key: "borderRadius",
15
- type: "borderRadius"
16
- }]
17
- }, {
18
2
  tab: "Colors",
19
3
  value: "colors",
20
4
  fields: [{
@@ -31,5 +15,21 @@ const accordionTitleStyle = [{
31
15
  key: "borderColor",
32
16
  type: "color"
33
17
  }]
18
+ }, {
19
+ tab: "Banner Spacing",
20
+ value: "bannerSpacing",
21
+ fields: [{
22
+ label: "Banner Spacing",
23
+ key: "bannerSpacing",
24
+ type: "bannerSpacing"
25
+ }]
26
+ }, {
27
+ tab: "Border Radius",
28
+ value: "borderRadius",
29
+ fields: [{
30
+ label: "Border Radius",
31
+ key: "borderRadius",
32
+ type: "borderRadius"
33
+ }]
34
34
  }];
35
35
  export default accordionTitleStyle;
@@ -78,7 +78,6 @@ const useMouseMove = () => {
78
78
  }, []);
79
79
  const onMouseMove = e => {
80
80
  const dpath = e?.target?.closest(".dpath");
81
- console.log(dpath);
82
81
  if (dpath) {
83
82
  console.log(`Stopped position: (${e.clientX}, ${e.clientY})`, dpath);
84
83
  setEvent({
@@ -32,16 +32,21 @@ const withLayout = editor => {
32
32
  editor.normalizeNode = ([node, path]) => {
33
33
  if (path.length === 0) {
34
34
  if (editor.children.length <= 1 && Editor.string(editor, [0, 0]) === "") {
35
- const title = {
36
- type: "title",
37
- children: [{
38
- text: "Untitled"
39
- }]
40
- };
41
- Transforms.insertNodes(editor, title, {
42
- at: path.concat(0),
43
- select: true
44
- });
35
+ const {
36
+ anchor
37
+ } = editor?.selection || {};
38
+ if (anchor?.offset !== 0) {
39
+ const title = {
40
+ type: "title",
41
+ children: [{
42
+ text: "Untitled"
43
+ }]
44
+ };
45
+ Transforms.insertNodes(editor, title, {
46
+ at: path.concat(0),
47
+ select: true
48
+ });
49
+ }
45
50
  }
46
51
  if (editor.children.length === 0) {
47
52
  const paragraph = {
@@ -8,7 +8,7 @@ const withTable = editor => {
8
8
  delete: slateDelete
9
9
  } = editor;
10
10
  editor.delete = arg => {
11
- if (arg.reverse) {
11
+ if (arg?.reverse) {
12
12
  const table = new TableUtil(editor);
13
13
  const cellsSelected = table.isCellSelected(editor.selection);
14
14
  if (cellsSelected && cellsSelected.length > 1) {
@@ -3,6 +3,7 @@ import { toggleBlock } from "./SlateUtilityFunctions";
3
3
  import insertNewLine from "./insertNewLine";
4
4
  import { insertAccordion } from "./accordion";
5
5
  import { isListItem } from "./helper";
6
+ import EDITORCMDS from "../common/EditorCmds";
6
7
  const HOTKEYS = {
7
8
  b: "bold",
8
9
  i: "italic",
@@ -63,7 +64,8 @@ export const commands = props => {
63
64
  try {
64
65
  const {
65
66
  event,
66
- editor
67
+ editor,
68
+ needLayout
67
69
  } = props;
68
70
  if (HOTKEYS[event.key]) {
69
71
  event.preventDefault();
@@ -73,6 +75,11 @@ export const commands = props => {
73
75
  } else {
74
76
  Editor.addMark(editor, HOTKEYS[event.key], true);
75
77
  }
78
+ } else if (EDITORCMDS[event.key]) {
79
+ EDITORCMDS[event.key](event, {
80
+ editor,
81
+ needLayout
82
+ });
76
83
  }
77
84
  } catch (err) {
78
85
  console.log(err);
@@ -96,7 +103,7 @@ export const indentation = props => {
96
103
  Transforms.wrapNodes(editor, {
97
104
  type: listItem.type,
98
105
  children: [{
99
- text: ''
106
+ text: ""
100
107
  }]
101
108
  });
102
109
  } else {
@@ -153,7 +160,7 @@ const checkListEnterEvent = (editor, type) => {
153
160
  Transforms.insertNodes(editor, {
154
161
  type: "check-list-item",
155
162
  children: [{
156
- text: ''
163
+ text: ""
157
164
  }]
158
165
  }, {
159
166
  at: newPath
@@ -162,7 +169,7 @@ const checkListEnterEvent = (editor, type) => {
162
169
  // focus on the end of the line
163
170
  Transforms.move(editor, {
164
171
  distance: 1,
165
- unit: 'line'
172
+ unit: "line"
166
173
  });
167
174
  } else {
168
175
  toggleBlock(editor, type);
@@ -405,4 +405,25 @@ export const getContrastColor = color => {
405
405
 
406
406
  // Return black for light colors, white for dark colors
407
407
  return luminance > 0.5 ? "#000000" : "#FFFFFF";
408
+ };
409
+ export const onDeleteKey = (event, {
410
+ editor
411
+ }) => {
412
+ try {
413
+ const {
414
+ selection
415
+ } = editor;
416
+ if (selection) {
417
+ // If text is selected, delete the selection
418
+ Transforms.delete(editor);
419
+ } else {
420
+ // If no text is selected, handle deleting the next character/element
421
+ Transforms.delete(editor, {
422
+ unit: "character",
423
+ reverse: false
424
+ });
425
+ }
426
+ } catch (err) {
427
+ console.log(err);
428
+ }
408
429
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "3.6.7",
3
+ "version": "3.6.9",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"