fix: add markdown to block test cases

frontend/appflowy_web_app/package.json

@@ -46,6 +46,7 @@
     "dexie-react-hooks": "^1.1.7",
     "emoji-mart": "^5.5.2",
     "emoji-regex": "^10.2.1",
+    "escape-string-regexp": "^5.0.0",
     "events": "^3.3.0",
     "google-protobuf": "^3.15.12",
     "highlight.js": "^11.10.0",

frontend/appflowy_web_app/src/application/slate-yjs/__tests__/withTestingYjsEditor.ts

@@ -20,6 +20,7 @@ export function generateId () {
 export function withTestingYjsEditor (editor: Editor, doc: Y.Doc) {
   const yjdEditor = withYjs(editor, doc, {
     localOrigin: CollabOrigin.Local,
+    readOnly: true,
   });
 
   return yjdEditor;

frontend/appflowy_web_app/src/application/slate-yjs/command/const.ts

@@ -12,4 +12,5 @@ export const CONTAINER_BLOCK_TYPES = [
   BlockType.BulletedListBlock,
   BlockType.NumberedListBlock,
   BlockType.Page,
-];
+];
+export const SOFT_BREAK_TYPES = [BlockType.CalloutBlock, BlockType.CodeBlock];

frontend/appflowy_web_app/src/application/slate-yjs/command/index.ts

@@ -9,25 +9,30 @@ import {
   getSharedRoot,
   handleCollapsedBreakWithTxn,
   handleDeleteEntireDocumentWithTxn,
+  handleIndentBlockWithTxn,
+  handleLiftBlockOnBackspaceAndEnterWithTxn,
+  handleLiftBlockOnTabWithTxn,
   handleMergeBlockBackwardWithTxn,
-  handleNonParagraphBlockBackspaceWithTxn,
-  handleRangeBreak,
-  handleLiftBlockOnBackspaceWithTxn,
   handleMergeBlockForwardWithTxn,
-  removeRangeWithTxn, handleIndentBlockWithTxn, handleLiftBlockOnTabWithTxn, turnToBlock,
+  handleNonParagraphBlockBackspaceAndEnterWithTxn,
+  handleRangeBreak,
+  removeRangeWithTxn,
+  turnToBlock,
 } from '@/application/slate-yjs/utils/yjsOperations';
 import {
   BlockData,
   BlockType,
   InlineBlockType,
   Mention,
-  MentionType, TodoListBlockData,
-  ToggleListBlockData, YBlock,
-  YjsEditorKey, YSharedRoot,
+  MentionType,
+  TodoListBlockData,
+  ToggleListBlockData,
+  YjsEditorKey,
 } from '@/application/types';
 import { FormulaNode } from '@/components/editor/editor.type';
 import { renderDate } from '@/utils/time';
-import { BasePoint, BaseRange, Editor, Element, Node, NodeEntry, Range, Text, Transforms } from 'slate';
+import isEqual from 'lodash-es/isEqual';
+import { BasePoint, BaseRange, Editor, Element, Node, NodeEntry, Path, Range, Text, Transforms } from 'slate';
 import { ReactEditor } from 'slate-react';
 
 export const CustomEditor = {
@@ -79,9 +84,8 @@ export const CustomEditor = {
   },
 
   setBlockData<T = BlockData> (editor: YjsEditor, blockId: string, updateData: T, select?: boolean) {
-    const readonly = editor.isElementReadOnly(editor);
 
-    if (readonly) {
+    if (editor.readOnly) {
       return;
     }
 
@@ -91,25 +95,36 @@ export const CustomEditor = {
       ...oldData,
       ...updateData,
     };
-    const operations = [() => {
-      block.set(YjsEditorKey.block_data, JSON.stringify(newData));
-    }];
-    const entry = Editor.above(editor, {
+
+    const newProperties = {
+      data: newData,
+    } as Partial<Element>;
+    const [entry] = editor.nodes({
+      at: [],
       match: (n) => !Editor.isEditor(n) && Element.isElement(n) && n.blockId === blockId,
     });
 
-    executeOperations(editor.sharedRoot, operations, 'setBlockData');
-
-    if (!select) return;
-
     if (!entry) {
-      Transforms.select(editor, Editor.start(editor, [0]));
+      console.error('Block not found');
       return;
     }
 
-    const nodePath = entry[1];
+    const [, path] = entry;
+    let atChild = false;
+    const { selection } = editor;
+
+    if (selection && Path.isAncestor(path, selection.anchor.path)) {
+      atChild = true;
+    }
+
+    Transforms.setNodes(editor, newProperties, { at: path });
+
+    if (!select) return;
+
+    if (atChild) {
+      Transforms.select(editor, Editor.start(editor, path));
+    }
 
-    Transforms.select(editor, Editor.start(editor, nodePath));
   },
   // Insert break line at the specified path
   insertBreak (editor: YjsEditor, at?: BaseRange) {
@@ -142,11 +157,11 @@ export const CustomEditor = {
       const blockType = block.get(YjsEditorKey.block_type) as BlockType;
 
       if (blockType !== BlockType.Paragraph) {
-        handleNonParagraphBlockBackspaceWithTxn(sharedRoot, block);
+        handleNonParagraphBlockBackspaceAndEnterWithTxn(sharedRoot, block);
         return;
       }
 
-      if (path.length > 1 && handleLiftBlockOnBackspaceWithTxn(editor, sharedRoot, block, point)) {
+      if (path.length > 1 && handleLiftBlockOnBackspaceAndEnterWithTxn(editor, sharedRoot, block, point)) {
         return;
       }
 
@@ -256,6 +271,12 @@ export const CustomEditor = {
     const operations: (() => void)[] = [];
     const sharedRoot = getSharedRoot(editor);
     const sourceBlock = getBlock(blockId, sharedRoot);
+    const sourceType = sourceBlock.get(YjsEditorKey.block_type) as BlockType;
+    const oldData = dataStringTOJson(sourceBlock.get(YjsEditorKey.block_data));
+
+    if (sourceType === type && isEqual(oldData, data)) {
+      return;
+    }
 
     operations.push(() => {
       turnToBlock(sharedRoot, sourceBlock, type, data);

frontend/appflowy_web_app/src/application/slate-yjs/plugins/withHistory.ts

@@ -39,7 +39,7 @@ export function withYHistory<T extends YjsEditor> (
 ): T & YHistoryEditor {
   const e = editor as T & YHistoryEditor;
 
-  if (Editor.isElementReadOnly(e, e)) {
+  if (e.readOnly) {
     return e;
   }
 
@@ -52,6 +52,7 @@ export function withYHistory<T extends YjsEditor> (
 
   e.onChange = () => {
     onChange();
+
     const selection = e.selection;
 
     try {

frontend/appflowy_web_app/src/application/slate-yjs/plugins/withYjs.ts

@@ -11,6 +11,7 @@ type LocalChange = {
 };
 
 export interface YjsEditor extends Editor {
+  readOnly: boolean;
   isYjsEditor: (value: unknown) => value is YjsEditor;
   connect: () => void;
   disconnect: () => void;
@@ -71,16 +72,18 @@ export function withYjs<T extends Editor> (
   editor: T,
   doc: Y.Doc,
   opts?: {
+    readOnly: boolean;
     localOrigin: CollabOrigin;
     readSummary?: boolean;
     onContentChange?: (content: Descendant[]) => void;
   },
 ): T & YjsEditor {
-  const { localOrigin = CollabOrigin.Local, readSummary, onContentChange } = opts ?? {};
+  const { localOrigin = CollabOrigin.Local, readSummary, onContentChange, readOnly = true } = opts ?? {};
   const e = editor as T & YjsEditor;
   const { apply, onChange } = e;
 
   e.interceptLocalChange = false;
+  e.readOnly = readOnly;
 
   e.sharedRoot = doc.getMap(YjsEditorKey.data_section) as YSharedRoot;
 

frontend/appflowy_web_app/src/application/slate-yjs/types.ts

@@ -27,6 +27,8 @@ export enum EditorMarkFormat {
   StrikeThrough = 'strikethrough',
   Code = 'code',
   Href = 'href',
+  Formula = 'formula',
+  Mention = 'mention',
   FontColor = 'font_color',
   BgColor = 'bg_color',
   Align = 'align',

frontend/appflowy_web_app/src/application/slate-yjs/utils/applyToYjs.ts

@@ -1,16 +1,16 @@
 import { CustomEditor } from '@/application/slate-yjs/command';
 import { EditorMarkFormat } from '@/application/slate-yjs/types';
-import { getText } from '@/application/slate-yjs/utils/yjsOperations';
 import { calculateOffsetRelativeToParent } from '@/application/slate-yjs/utils/positions';
+import { getBlock, getNodeAtPath, getText } from '@/application/slate-yjs/utils/yjsOperations';
 import { YjsEditorKey, YSharedRoot } from '@/application/types';
 import {
-  Operation,
-  Element,
+  Descendant,
   Editor,
+  Element,
   InsertTextOperation,
+  Operation,
   RemoveTextOperation,
-  Descendant,
-  SetNodeOperation, Path,
+  SetNodeOperation,
 } from 'slate';
 import * as Y from 'yjs';
 
@@ -37,39 +37,15 @@ function applyInsertText (ydoc: Y.Doc, editor: Editor, op: InsertTextOperation,
   const textId = node.textId as string;
   const sharedRoot = ydoc.getMap(YjsEditorKey.data_section) as YSharedRoot;
   const yText = getText(textId, sharedRoot);
+
+  if (!yText) return;
   const point = { path, offset };
 
   const relativeOffset = Math.min(calculateOffsetRelativeToParent(node, point), yText.toJSON().length);
 
   yText.insert(relativeOffset, text);
 }
 
-function getNodeAtPath (children: Descendant[], path: Path): Descendant | null {
-  let currentNode: Descendant | null = null;
-  let currentChildren = children;
-
-  for (let i = 0; i < path.length; i++) {
-    const index = path[i];
-
-    if (index >= currentChildren.length) {
-      return null;
-    }
-
-    currentNode = currentChildren[index];
-    if (i === path.length - 1) {
-      return currentNode;
-    }
-
-    if (!Element.isElement(currentNode) || !currentNode.children) {
-      return null;
-    }
-
-    currentChildren = currentNode.children;
-  }
-
-  return currentNode;
-}
-
 function applyRemoveText (ydoc: Y.Doc, editor: Editor, op: RemoveTextOperation, slateContent: Descendant[]) {
   const { path, offset, text } = op;
 
@@ -81,6 +57,9 @@ function applyRemoveText (ydoc: Y.Doc, editor: Editor, op: RemoveTextOperation,
 
   const sharedRoot = ydoc.getMap(YjsEditorKey.data_section) as YSharedRoot;
   const yText = getText(textId, sharedRoot);
+
+  if (!yText) return;
+
   const point = { path, offset };
 
   const relativeOffset = Math.min(calculateOffsetRelativeToParent(node, point), yText.toJSON().length);
@@ -100,26 +79,45 @@ function applySetNode (ydoc: Y.Doc, editor: Editor, op: SetNodeOperation, slateC
   const properties = Object.keys(newProperties);
 
   const isLeaf = properties.some((prop: string) => leafKeys.includes(prop));
+  const isData = properties.some((prop: string) => prop === 'data');
+  const sharedRoot = ydoc.getMap(YjsEditorKey.data_section) as YSharedRoot;
 
-  if (!isLeaf) {
-    console.log('set_node', newProperties);
-    return;
-  }
+  if (isLeaf) {
+    const node = getNodeAtPath(slateContent, path.slice(0, -1)) as Element;
+    const textId = node.textId;
 
-  const node = getNodeAtPath(slateContent, path.slice(0, -1)) as Element;
-  const textId = node.textId;
+    if (!textId) return;
 
-  if (!textId) return;
+    const yText = getText(textId, sharedRoot);
+    const [start, end] = Editor.edges(editor, path);
 
-  const sharedRoot = ydoc.getMap(YjsEditorKey.data_section) as YSharedRoot;
-  const yText = getText(textId, sharedRoot);
-  const [start, end] = Editor.edges(editor, path);
+    const startRelativeOffset = Math.min(calculateOffsetRelativeToParent(node, start), yText.toJSON().length);
+    const endRelativeOffset = Math.min(calculateOffsetRelativeToParent(node, end), yText.toJSON().length);
 
-  const startRelativeOffset = Math.min(calculateOffsetRelativeToParent(node, start), yText.toJSON().length);
-  const endRelativeOffset = Math.min(calculateOffsetRelativeToParent(node, end), yText.toJSON().length);
+    const length = endRelativeOffset - startRelativeOffset;
 
-  const length = endRelativeOffset - startRelativeOffset;
+    yText.format(startRelativeOffset, length, newProperties);
+    return;
+  }
+
+  if (isData) {
+    const node = getNodeAtPath(slateContent, path) as Element;
+    const blockId = node.blockId as string;
+
+    if (!blockId) {
+      console.error('blockId is not found in node', node, newProperties);
+      return;
+    }
 
-  yText.format(startRelativeOffset, length, newProperties);
+    const block = getBlock(blockId, sharedRoot);
+
+    if (
+      'data' in newProperties
+    ) {
+      block.set(YjsEditorKey.block_data, JSON.stringify(newProperties.data));
+      return;
+    }
+  }
 
+  console.error('set_node operation is not supported', op);
 }