@flozy/editor 4.2.3 → 4.2.4

Sign up to get free protection for your applications and to get access to all the features.
@@ -10,7 +10,7 @@ import { draftToSlate } from "./utils/draftToSlate";
10
10
  import useMentions from "./hooks/useMentions";
11
11
  import MentionsPopup from "./common/MentionsPopup";
12
12
  import { RemoteCursorOverlay } from "./RemoteCursorOverlay/Overlay";
13
- import { mentionsEvent, commands, indentation, escapeEvent, enterEvent } from "./utils/events";
13
+ import { mentionsEvent, commands, indentation, escapeEvent, enterEvent, upArrowEvent, downArrowEvent } from "./utils/events";
14
14
  import withCommon from "./hooks/withCommon";
15
15
  import DialogWrapper from "./DialogWrapper";
16
16
  import { serializeToText } from "./utils/serializeToText";
@@ -379,6 +379,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
379
379
  });
380
380
  }
381
381
  }
382
+ } else if (event.key === "ArrowUp" && otherProps?.tagName !== "Pages") {
383
+ upArrowEvent(event, editor);
384
+ } else if (event.key === "ArrowDown" && otherProps?.tagName !== "Pages") {
385
+ downArrowEvent(event, editor);
382
386
  }
383
387
  }, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
384
388
  const Overlay = collaborativeEditor && !isReadOnly ? RemoteCursorOverlay : React.Fragment;
@@ -176,11 +176,11 @@ const Video = ({
176
176
  at: path
177
177
  });
178
178
  };
179
- const getWidth = useCallback(() => {
179
+ const getWidth = () => {
180
180
  if (resizing) {
181
181
  return {
182
- width: `${size.width}px`,
183
- height: url ? `${size.height}px` : "auto"
182
+ width: size.width ? `${size.width}px` : "100%",
183
+ height: url ? `${size.height || 300}px` : "auto"
184
184
  };
185
185
  } else {
186
186
  return {
@@ -194,7 +194,7 @@ const Video = ({
194
194
  }, theme)
195
195
  };
196
196
  }
197
- }, [size]);
197
+ };
198
198
  const embedURL = getEmbedURL(element);
199
199
  const videoSX = groupByBreakpoint({
200
200
  borderRadius: {
@@ -240,7 +240,10 @@ const Video = ({
240
240
  ...element,
241
241
  embedURL: embedURL,
242
242
  onSettings: onSettings,
243
- videoSX: videoSX
243
+ videoSX: videoSX,
244
+ url: url,
245
+ readOnly: readOnly,
246
+ resizing: resizing
244
247
  }), !readOnly && url ? /*#__PURE__*/_jsx(IconButton, {
245
248
  onPointerDown: onMouseDown,
246
249
  style: {
@@ -401,6 +401,7 @@ const Form = props => {
401
401
  component: "button",
402
402
  onClick: onSubmitClick,
403
403
  disabled: loading,
404
+ contentEditable: false,
404
405
  sx: {
405
406
  background: buttonProps?.bgColor || "rgb(30, 75, 122)",
406
407
  borderWidth: "1px",
@@ -495,6 +496,7 @@ const Form = props => {
495
496
  open: anchorEl !== null,
496
497
  anchorEl: anchorEl,
497
498
  onClose: handleClose,
499
+ contentEditable: false,
498
500
  children: [/*#__PURE__*/_jsx(MenuItem, {
499
501
  onClick: onMenuClick("edit"),
500
502
  children: /*#__PURE__*/_jsx(Tooltip, {
@@ -465,15 +465,15 @@ const FreeGrid = props => {
465
465
  className: "freegrid-container freegrid-container-parent",
466
466
  sx: {
467
467
  ...classes.root,
468
- ...freegridSX
468
+ ...freegridSX,
469
+ background: sectionBgColor,
470
+ backgroundImage: sectionBackgroundImage ? `url('${sectionBackgroundImage}')` : "",
471
+ backgroundSize: "cover"
469
472
  },
470
473
  "data-path": path.join("|"),
471
474
  style: {
472
475
  "--cols": `100%`,
473
- "--rows": `repeat(${repeatTimes}, ${ROW_HEIGHT}px)`,
474
- background: sectionBgColor,
475
- backgroundImage: sectionBackgroundImage ? `url('${sectionBackgroundImage}')` : "",
476
- backgroundSize: "cover"
476
+ "--rows": `repeat(${repeatTimes}, ${ROW_HEIGHT}px)`
477
477
  },
478
478
  children: [children, !readOnly ? /*#__PURE__*/_jsx("span", {
479
479
  placeholder: `Section (${sectionName || "Welcome"})`,
@@ -3,6 +3,6 @@ const mentions = props => {
3
3
  CHARACTERS,
4
4
  search
5
5
  } = props;
6
- return CHARACTERS.filter(c => c.name.toLowerCase().startsWith(search?.toLowerCase())).slice(0, 10);
6
+ return CHARACTERS.filter(c => c?.name?.toLowerCase()?.startsWith(search?.toLowerCase())).slice(0, 10);
7
7
  };
8
8
  export default mentions;
@@ -101,9 +101,6 @@ const withHtml = editor => {
101
101
  return element.type === "image" ? true : isVoid(element);
102
102
  };
103
103
  editor.insertData = data => {
104
- if (editor.isChatEditor) {
105
- return;
106
- }
107
104
  const slateHTML = data?.getData("application/x-slate-fragment");
108
105
  const html = data?.getData("text/html");
109
106
  const currentEl = getCurrentElement(editor);
@@ -117,6 +114,23 @@ const withHtml = editor => {
117
114
  const defaultInsert = loopChildren(decoded, true);
118
115
  if (defaultInsert) {
119
116
  insertData(data);
117
+ // } else if (editor.isChatEditor) {
118
+ // // Only convert table to paragraphs if in chat editor mode
119
+ // const paragraphs = decoded.map(row =>
120
+ // row.children.map(cell =>
121
+ // cell.children.map(paragraph =>
122
+ // paragraph.children.map(textNode => textNode.text).join('')
123
+ // ).join(' ')
124
+ // ).join(' ')
125
+ // ).join('\n'); // Joining with a newline for separate paragraphs
126
+
127
+ // // Insert text as paragraphs
128
+ // const textNodes = paragraphs.split('\n').map(text => ({
129
+ // type: 'paragraph',
130
+ // children: [{ text }]
131
+ // }));
132
+
133
+ // Transforms.insertNodes(editor, textNodes);
120
134
  } else {
121
135
  // do not paste table, grid inside table cell
122
136
  // only plain text for internal paste
@@ -141,6 +155,15 @@ const withHtml = editor => {
141
155
  }
142
156
  const fragment = deserialize(parsed.body);
143
157
  const formattedFragment = formatFragment[eltype] ? formatFragment[eltype](fragment) : fragment;
158
+ let is_img_table = false;
159
+ formattedFragment.map(f => {
160
+ if (f.type === 'image' || f.type === 'table') {
161
+ is_img_table = true;
162
+ }
163
+ });
164
+ if (editor.isChatEditor && is_img_table) {
165
+ return;
166
+ }
144
167
  handleInsert(editor, () => Transforms.insertFragment(editor, formattedFragment), formattedFragment);
145
168
  return;
146
169
  } else {
@@ -1,9 +1,6 @@
1
1
  import { Editor, Transforms, Element as SlateElement } from "slate";
2
2
  import { Box } from "@mui/material";
3
3
  import { fontFamilyMap, sizeMap } from "../font";
4
- import Table from "../../Elements/Table/Table";
5
- import TableRow from "../../Elements/Table/TableRow";
6
- import TableCell from "../../Elements/Table/TableCell";
7
4
  import Mentions from "../../Elements/Mentions/Mentions";
8
5
  import CheckList from "../../Elements/List/CheckList";
9
6
  import { isEmptyTextNode } from "../../helper";
@@ -340,26 +337,6 @@ export const getBlock = props => {
340
337
  ...props,
341
338
  isEmpty: isEmpty
342
339
  });
343
- case "table":
344
- return /*#__PURE__*/_jsx(Table, {
345
- ...props
346
- });
347
- case "table-head":
348
- return /*#__PURE__*/_jsx("thead", {
349
- children: children
350
- });
351
- case "table-body":
352
- return /*#__PURE__*/_jsx("tbody", {
353
- children: children
354
- });
355
- case "table-row":
356
- return /*#__PURE__*/_jsx(TableRow, {
357
- ...props
358
- });
359
- case "table-cell":
360
- return /*#__PURE__*/_jsx(TableCell, {
361
- ...props
362
- });
363
340
  case "mention":
364
341
  return /*#__PURE__*/_jsx(Mentions, {
365
342
  ...props
@@ -5,6 +5,7 @@ import { insertAccordion } from "./accordion";
5
5
  import { isListItem } from "./helper";
6
6
  import RnDCtrlCmds from "./RnD/RnDCtrlCmds";
7
7
  import EDITORCMDS from "../common/EditorCmds";
8
+ import { ReactEditor } from "slate-react";
8
9
  const HOTKEYS = {
9
10
  b: "bold",
10
11
  i: "italic",
@@ -284,4 +285,40 @@ export const enterEvent = (e, editor, isMobile) => {
284
285
  } catch (err) {
285
286
  console.log(err);
286
287
  }
288
+ };
289
+ export const upArrowEvent = (e, editor) => {
290
+ try {
291
+ const {
292
+ selection
293
+ } = editor;
294
+ if (!selection) return;
295
+ const prevNodePath = Editor.before(editor, selection, {
296
+ unit: "line"
297
+ });
298
+ if (prevNodePath) {
299
+ e.preventDefault();
300
+ Transforms.select(editor, prevNodePath);
301
+ ReactEditor.focus(editor);
302
+ }
303
+ } catch (err) {
304
+ console.log(err);
305
+ }
306
+ };
307
+ export const downArrowEvent = (e, editor) => {
308
+ try {
309
+ const {
310
+ selection
311
+ } = editor;
312
+ if (!selection) return;
313
+ const nextNodePath = Editor.after(editor, selection, {
314
+ unit: "line"
315
+ });
316
+ if (nextNodePath) {
317
+ e.preventDefault();
318
+ Transforms.select(editor, nextNodePath);
319
+ ReactEditor.focus(editor);
320
+ }
321
+ } catch (err) {
322
+ console.log(err);
323
+ }
287
324
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "4.2.3",
3
+ "version": "4.2.4",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"