@flozy/editor 5.3.5 → 5.3.7

Sign up to get free protection for your applications and to get access to all the features.
@@ -26,7 +26,6 @@ const PageSettingsButton = props => {
26
26
  element: element?.pageProps || {},
27
27
  path
28
28
  });
29
- console.log("OPen setting :".openSetttings, path, element?.pageProps);
30
29
  };
31
30
  const onSave = data => {
32
31
  try {
@@ -150,8 +150,6 @@ const Table = props => {
150
150
  const tableRef = useRef(null);
151
151
  const containerRef = useRef(null);
152
152
  const path = ReactEditor.findPath(editor, element);
153
- const isValidPath = path && Editor.hasPath(editor, path); // getting cannot find the descendant path error while deleting table from free grid on right click
154
-
155
153
  const dragRowBtnCls = `table-${path?.toString()?.replaceAll(",", "-")}-row-drag-btn`;
156
154
  const handleAction = type => {
157
155
  Transforms.select(editor, editor.selection);
@@ -267,7 +265,7 @@ const Table = props => {
267
265
  openSetttings,
268
266
  exandTools
269
267
  },
270
- children: [isValidPath ? /*#__PURE__*/_jsxs("div", {
268
+ children: [/*#__PURE__*/_jsxs("div", {
271
269
  style: {
272
270
  minWidth: "100%",
273
271
  maxWidth: "100%",
@@ -307,7 +305,7 @@ const Table = props => {
307
305
  addType: "col",
308
306
  onAdd: addCol
309
307
  })]
310
- }) : null, /*#__PURE__*/_jsx(AddRowCol, {
308
+ }), /*#__PURE__*/_jsx(AddRowCol, {
311
309
  ...commonAddBtnProps,
312
310
  addType: "row",
313
311
  onAdd: addRow
@@ -1,5 +1,5 @@
1
1
  import React, { useState, useEffect, useMemo } from "react";
2
- import { Editor, Element, Path, Transforms } from "slate";
2
+ import { Editor, Path, Transforms } from "slate";
3
3
  import { Box } from "@mui/material";
4
4
  import { useSlateStatic, ReactEditor } from "slate-react";
5
5
  import useTableResize from "../../utils/customHooks/useTableResize";
@@ -11,6 +11,7 @@ import DragButton from "./DragButton";
11
11
  import TablePopup from "./TablePopup";
12
12
  import { Droppable } from "./Droppable";
13
13
  import { useDndContext } from "@dnd-kit/core";
14
+ import { getNodeWithType } from "../../utils/helper";
14
15
  import { jsx as _jsx } from "react/jsx-runtime";
15
16
  import { Fragment as _Fragment } from "react/jsx-runtime";
16
17
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -97,14 +98,8 @@ const TableCell = props => {
97
98
  const [openSettings, setOpenSettings] = useState(false);
98
99
  const table = new TableUtil(editor);
99
100
  const tableProps = table.getTableProps();
100
- const [tableNode] = Editor.nodes(editor, {
101
- at: path,
102
- match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
103
- });
104
- const [rowNode] = Editor.nodes(editor, {
105
- at: path,
106
- match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-row"
107
- });
101
+ const [tableNode] = getNodeWithType(editor, "table", path); // getting cannot find the descendant path error, while deleting table because of unknown re-render issue, so wrapping it with try catch
102
+ const [rowNode] = getNodeWithType(editor, "table-row", path);
108
103
  const currentPath = path.slice(-2) || []; // getting last 2 items from path, which gives row and column position of the cell
109
104
  const [row, column] = currentPath;
110
105
  const isFirstRow = row === 0;
@@ -424,7 +419,7 @@ const TableCell = props => {
424
419
  }), isHeader && !readOnly && tableSize?.height && !showTool ? /*#__PURE__*/_jsx(Resizer, {
425
420
  classes: classes,
426
421
  onMouseDown: onMouseDown,
427
- height: tableDOM.getBoundingClientRect()?.height
422
+ height: tableDOM?.getBoundingClientRect()?.height
428
423
  }) : null, hasSelected && !readOnly && !tableResizing ? /*#__PURE__*/_jsx("div", {
429
424
  className: "selection-area-tc",
430
425
  contentEditable: false
@@ -85,6 +85,7 @@ const TextFormat = props => {
85
85
  [type]: color
86
86
  };
87
87
  updateBlockQuote(attr);
88
+ setAnchorEl(null);
88
89
  };
89
90
  const handleQuote = attr => () => {
90
91
  updateBlockQuote(attr);
@@ -11,7 +11,6 @@ const ToolbarIcon = props => {
11
11
  style,
12
12
  icoBtnType
13
13
  } = props;
14
- console.log("Props:", props);
15
14
  const renderIconText = () => {
16
15
  if (icoBtnType === "mini") {
17
16
  return /*#__PURE__*/_jsx("span", {
@@ -20,6 +20,13 @@ const handleTableCell = (el, children) => {
20
20
  }
21
21
  };
22
22
  };
23
+ const paragraphType = el => {
24
+ const firstChild = el?.childNodes?.[0];
25
+ const isFirstChildText = firstChild?.nodeType === 3 || TEXT_TAGS[firstChild?.nodeName];
26
+ return isFirstChildText ? {
27
+ type: "paragraph"
28
+ } : {};
29
+ };
23
30
  const ELEMENT_TAGS = {
24
31
  A: el => ({
25
32
  type: "link",
@@ -59,24 +66,14 @@ const ELEMENT_TAGS = {
59
66
  OL: () => ({
60
67
  type: "orderedList"
61
68
  }),
62
- P: () => ({
63
- type: "paragraph"
64
- }),
65
- DIV: () => ({
66
- type: "paragraph"
67
- }),
69
+ P: paragraphType,
70
+ DIV: paragraphType,
68
71
  PRE: () => ({
69
72
  type: "code"
70
73
  }),
71
- META: () => ({
72
- type: "paragraph"
73
- }),
74
- STYLE: () => ({
75
- type: "paragraph"
76
- }),
77
- "GOOGLE-SHEETS-HTML-ORIGIN": () => ({
78
- type: "paragraph"
79
- }),
74
+ META: paragraphType,
75
+ STYLE: paragraphType,
76
+ "GOOGLE-SHEETS-HTML-ORIGIN": paragraphType,
80
77
  TABLE: (el, children = []) => {
81
78
  try {
82
79
  const bodyChild = children || [];
@@ -98,12 +95,8 @@ const ELEMENT_TAGS = {
98
95
  type: "table-row"
99
96
  }),
100
97
  TD: handleTableCell,
101
- COLGROUP: () => ({
102
- type: "paragraph"
103
- }),
104
- COL: () => ({
105
- type: "paragraph"
106
- })
98
+ COLGROUP: paragraphType,
99
+ COL: paragraphType
107
100
  };
108
101
 
109
102
  // COMPAT: `B` is omitted here because Google Docs uses `<b>` in weird ways.
@@ -133,7 +126,8 @@ const TEXT_TAGS = {
133
126
  const deserialize = el => {
134
127
  if (el.nodeType === 3) {
135
128
  const match = /\r|\n/.exec(el.textContent);
136
- return match ? null : el.textContent;
129
+ const text = el.textContent.replace(/\r|\n/g, "").trim();
130
+ return match && !text ? null : el.textContent;
137
131
  } else if (el.nodeType !== 1) {
138
132
  return null;
139
133
  } else if (el.nodeName === "BR") {
@@ -160,7 +154,9 @@ const deserialize = el => {
160
154
  overwriteChild,
161
155
  ...attrs
162
156
  } = ELEMENT_TAGS[nodeName](el, children);
163
- return jsx("element", attrs, overwriteChild || children);
157
+ if (attrs?.type) {
158
+ return jsx("element", attrs, overwriteChild || children);
159
+ }
164
160
  }
165
161
  if (TEXT_TAGS[nodeName]) {
166
162
  const attrs = TEXT_TAGS[nodeName](el);
@@ -6,21 +6,25 @@ import { DndContext, DragOverlay, PointerSensor, useSensor, useSensors } from "@
6
6
  import { encodeToBase64, isHavingSelection } from "../utils/helper";
7
7
  import { serializeToText } from "../utils/serializeToText";
8
8
  import { createCopiedTableStructure, getRectangleBounds, tableNodeToDom } from "../Elements/Table/tableHelper";
9
+
10
+ // const selectFirstCell = (tablePath, editor, updateTableSelection) => {
11
+ // const firstCell = [...tablePath, 0, 0];
12
+
13
+ // const end = Editor.end(editor, firstCell);
14
+
15
+ // Transforms.select(editor, {
16
+ // anchor: end,
17
+ // focus: end,
18
+ // });
19
+
20
+ // updateTableSelection({
21
+ // startCellPath: firstCell,
22
+ // endCellPath: [],
23
+ // isDragging: false,
24
+ // });
25
+ // };
9
26
  import { jsx as _jsx } from "react/jsx-runtime";
10
27
  import { jsxs as _jsxs } from "react/jsx-runtime";
11
- const selectFirstCell = (tablePath, editor, updateTableSelection) => {
12
- const firstCell = [...tablePath, 0, 0];
13
- const end = Editor.end(editor, firstCell);
14
- Transforms.select(editor, {
15
- anchor: end,
16
- focus: end
17
- });
18
- updateTableSelection({
19
- startCellPath: firstCell,
20
- endCellPath: [],
21
- isDragging: false
22
- });
23
- };
24
28
  const handleDragEnd = (dragData, editor, resetAll) => {
25
29
  const {
26
30
  active,
@@ -77,9 +81,6 @@ export const TableProvider = ({
77
81
  children,
78
82
  otherProps = {}
79
83
  }) => {
80
- const {
81
- tablePath
82
- } = otherProps;
83
84
  const [hoverPath, setHoverPath] = useState(null);
84
85
  const [tableSelection, setTableSelection] = useState(getDefaultTableSelection());
85
86
  const [tableResizing, setTableResizing] = useState(null);
@@ -184,9 +185,11 @@ export const TableProvider = ({
184
185
  window.removeEventListener("cut", handleCut);
185
186
  };
186
187
  }, [tableSelection, editor, tableSelection]);
187
- useEffect(() => {
188
- selectFirstCell(tablePath, editor, updateTableSelection);
189
- }, []);
188
+
189
+ // useEffect(() => {
190
+ // selectFirstCell(tablePath, editor, updateTableSelection);
191
+ // }, []);
192
+
190
193
  return /*#__PURE__*/_jsx(TableContext.Provider, {
191
194
  value: values,
192
195
  children: /*#__PURE__*/_jsxs(DndContext, {
@@ -691,4 +691,17 @@ export const containsSurrogatePair = text => {
691
691
  // Match surrogate pairs (high and low surrogate)
692
692
  const surrogatePairRegex = /[\uD800-\uDBFF][\uDC00-\uDFFF]/;
693
693
  return surrogatePairRegex.test(text);
694
+ };
695
+ export const getNodeWithType = (editor, nodeType = "", otherOptions) => {
696
+ try {
697
+ const options = {
698
+ match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === nodeType,
699
+ ...(otherOptions || {})
700
+ };
701
+ const [node, nodePath] = Editor.nodes(editor, options);
702
+ return node ? [node, nodePath] : [];
703
+ } catch (err) {
704
+ console.log(err);
705
+ return [];
706
+ }
694
707
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "5.3.5",
3
+ "version": "5.3.7",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"