refactor: document component

frontend/appflowy_tauri/src/appflowy_app/block_editor/blocks/text_block/index.ts

@@ -1,123 +0,0 @@
-import { BaseEditor, BaseSelection, Descendant, Editor, Transforms } from "slate";
-import { TreeNode } from '$app/block_editor/view/tree_node';
-import { Operation } from "$app/block_editor/core/operation";
-import { TextBlockSelectionManager } from './text_selection';
-import { BlockType } from "@/appflowy_app/interfaces";
-import { ReactEditor } from "slate-react";
-
-export class TextBlockManager {
-  public selectionManager: TextBlockSelectionManager;
-  private editorMap: Map<string, BaseEditor & ReactEditor> = new Map();
-
-  constructor(private rootId: string, private operation: Operation) {
-    this.selectionManager = new TextBlockSelectionManager();
-  }
-
-  register(id: string, editor: BaseEditor & ReactEditor) {
-    this.editorMap.set(id, editor);
-  }
-
-  unregister(id: string) {
-    this.editorMap.delete(id);
-  }
-
-  setSelection(node: TreeNode, selection: BaseSelection) {
-    // console.log(node.id, selection);
-    this.selectionManager.setSelection(node.id, selection)
-  }
-
-  update(node: TreeNode, path: string[], data: Descendant[]) {
-    this.operation.updateNode(node.id, path, data);
-  }
-
-  deleteNode(node: TreeNode) {
-    if (node.type !== BlockType.TextBlock) {
-      this.operation.updateNode(node.id, ['type'], BlockType.TextBlock);
-      this.operation.updateNode(node.id, ['data'], { content: node.data.content });
-      return;
-    }
-
-    if (!node.block.next && node.parent!.id !== this.rootId) {
-      const newParent = node.parent!.parent!;
-      const newPrev = node.parent;
-      this.operation.moveNode(node.id, newParent.id, newPrev?.id || '');
-      return;
-    }
-    if (!node.prevLine) return;
-
-    const retainData = node.prevLine.data.content;
-    const editor = this.editorMap.get(node.prevLine.id);
-    if (editor) {
-      const index = retainData.length - 1;
-      const anchor = {
-        path: [0, index],
-        offset: retainData[index].text.length,
-      };
-      const selection = {
-        anchor,
-        focus: {...anchor}
-      };
-      ReactEditor.focus(editor);
-      Transforms.select(editor, selection);
-    }
-
-    this.operation.updateNode(node.prevLine.id, ['data', 'content'], [
-      ...retainData,
-      ...node.data.content,
-    ]);
-    
-    this.operation.deleteNode(node.id);
-
-  }
-
-  splitNode(node: TreeNode, editor: BaseEditor) {
-    const focus = editor.selection?.focus;
-    const path = focus?.path || [0, editor.children.length - 1];
-    const offset = focus?.offset || 0;
-    const parentIndex = path[0];
-    const index = path[1];
-    const editorNode = editor.children[parentIndex];
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    const children: { [key: string]: boolean | string; text: string }[] = editorNode.children;
-    const retainItems = children.filter((_: any, i: number) => i < index);
-    const splitItem: { [key: string]: boolean | string } = children[index];
-    const text = splitItem.text.toString();
-    const prevText = text.substring(0, offset);
-    const afterText = text.substring(offset);
-    retainItems.push({
-      ...splitItem,
-      text: prevText
-    });
-
-    const removeItems = children.filter((_: any, i: number) => i > index);
-
-    const data = {
-      type: node.type,
-      data: {
-        ...node.data,
-        content: [
-          {
-            ...splitItem,
-            text: afterText
-          },
-          ...removeItems
-        ]
-      }
-    };
-
-    const newBlock = this.operation.splitNode(node.id, {
-      path: ['data', 'content'],
-      value: retainItems,
-    }, data);
-    newBlock && this.selectionManager.focusStart(newBlock.id);
-  }
-
-  destroy() {
-    this.selectionManager.destroy();
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    this.operation = null;
-  }
-
-}

frontend/appflowy_tauri/src/appflowy_app/block_editor/blocks/text_block/text_selection.ts

@@ -1,35 +0,0 @@
-export class TextBlockSelectionManager {
-  private focusId = '';
-  private selection?: any;
-
-  getFocusSelection() {
-    return {
-      focusId: this.focusId,
-      selection: this.selection
-    }
-  }
-
-  focusStart(blockId: string) {
-    this.focusId = blockId;
-    this.setSelection(blockId, {
-      focus: {
-        path: [0, 0],
-        offset: 0,
-      },
-      anchor: {
-        path: [0, 0],
-        offset: 0,
-      },
-    })
-  }
-
-  setSelection(blockId: string, selection: any) {
-    this.focusId = blockId;
-    this.selection = selection;
-  }
-
-  destroy() {
-    this.focusId = '';
-    this.selection = undefined;
-  }
-}

frontend/appflowy_tauri/src/appflowy_app/block_editor/core/block.ts

@@ -1,107 +0,0 @@
-import { BlockType, BlockData } from '$app/interfaces/index';
-import { generateBlockId } from '$app/utils/block';
-
-/**
- * Represents a single block of content in a document.
- */
-export class Block<T extends BlockType = BlockType> {
-  id: string;
-  type: T;
-  data: BlockData<T>;
-  parent: Block<BlockType> | null = null; // Pointer to the parent block
-  prev: Block<BlockType> | null = null; // Pointer to the previous sibling block
-  next: Block<BlockType> | null = null; // Pointer to the next sibling block
-  firstChild: Block<BlockType> | null = null; // Pointer to the first child block
-
-  constructor(id: string, type: T, data: BlockData<T>) {
-    this.id = id;
-    this.type = type;
-    this.data = data;
-  }
-
-  /**
-   * Adds a new child block to the beginning of the current block's children list.
-   *
-   * @param {Object} content - The content of the new block, including its type and data.
-   * @param {string} content.type - The type of the new block.
-   * @param {Object} content.data - The data associated with the new block.
-   * @returns {Block} The newly created child block.
-   */
-  prependChild(content: { type: T, data: BlockData<T> }): Block | null {
-    const id = generateBlockId();
-    const newBlock = new Block(id, content.type, content.data);
-    newBlock.reposition(this, null);
-    return newBlock;
-  }
-
-  /**
-   * Add a new sibling block after this block.
-   * 
-   * @param content The type and data for the new sibling block.
-   * @returns The newly created sibling block.
-   */
-  addSibling(content: { type: T, data: BlockData<T> }): Block | null {
-    const id = generateBlockId();
-    const newBlock = new Block(id, content.type, content.data);
-    newBlock.reposition(this.parent, this);
-    return newBlock;
-  }
-
-  /**
-   * Remove this block and its descendants from the tree.
-   * 
-   */
-  remove() {
-    this.detach();
-    let child = this.firstChild;
-    while (child) {
-      const next = child.next;
-      child.remove();
-      child = next;
-    }
-  }
-
-  reposition(newParent: Block<BlockType> | null, newPrev: Block<BlockType> | null) {
-    // Update the block's parent and siblings
-    this.parent = newParent;
-    this.prev = newPrev;
-    this.next = null;
-
-    if (newParent) {
-      const prev = newPrev;
-      if (!prev) {
-        const next = newParent.firstChild;
-        newParent.firstChild = this;
-        if (next) {
-          this.next = next;
-          next.prev = this;
-        }
-        
-      } else {
-        // Update the next and prev pointers of the newPrev and next blocks
-        if (prev.next !== this) {
-          const next = prev.next;
-          if (next) {
-            next.prev = this
-            this.next = next;
-          }
-          prev.next = this;
-        }
-      }
-      
-    }
-  }
-
-  // detach the block from its current position in the tree
-  detach() {
-    if (this.prev) {
-      this.prev.next = this.next;
-    } else if (this.parent) {
-      this.parent.firstChild = this.next;
-    }
-    if (this.next) {
-      this.next.prev = this.prev;
-    }
-  }
-
-}

frontend/appflowy_tauri/src/appflowy_app/block_editor/core/block_chain.ts

@@ -1,226 +0,0 @@
-import { BlockData, BlockInterface, BlockType } from '$app/interfaces/index';
-import { set } from '../../utils/tool';
-import { Block } from './block';
-export interface BlockChangeProps {
-  block?: Block,
-  startBlock?: Block,
-  endBlock?: Block,
-  oldParentId?: string,
-  oldPrevId?: string
-}
-export class BlockChain {
-  private map: Map<string, Block<BlockType>> = new Map();
-  public head: Block<BlockType> | null = null;
-
-  constructor(private onBlockChange: (command: string, data: BlockChangeProps) => void) {
-
-  }
-  /**
-   * generate blocks from doc data
-   * @param id doc id
-   * @param map doc data
-   */
-  rebuild = (id: string, map: Record<string, BlockInterface<BlockType>>) => {
-    this.map.clear();
-    this.head = this.createBlock(id, map[id].type, map[id].data);
-
-    const callback = (block: Block) => {
-      const firstChildId = map[block.id].firstChild;
-      const nextId = map[block.id].next;
-      if (!block.firstChild && firstChildId) {
-        block.firstChild = this.createBlock(firstChildId, map[firstChildId].type, map[firstChildId].data);
-        block.firstChild.parent = block;
-        block.firstChild.prev = null;
-      }
-      if (!block.next && nextId) {
-        block.next = this.createBlock(nextId, map[nextId].type, map[nextId].data);
-        block.next.parent = block.parent;
-        block.next.prev = block;
-      }
-    }
-    this.traverse(callback);
-  }
-
-  /**
-   * Traversing the block list from front to back
-   * @param callback It will be call when the block visited
-   * @param block block item, it will be equal head node when the block item is undefined
-   */
-  traverse(callback: (_block: Block<BlockType>) => void, block?: Block<BlockType>) {
-    let currentBlock: Block | null = block || this.head;
-    while (currentBlock) {
-      callback(currentBlock);
-      if (currentBlock.firstChild) {
-        this.traverse(callback, currentBlock.firstChild);
-      }
-      currentBlock = currentBlock.next;
-    }
-  }
-
-  /**
-   * get block data
-   * @param blockId string
-   * @returns Block
-   */
-  getBlock = (blockId: string) => {
-    return this.map.get(blockId) || null;
-  }
-
-  destroy() {
-    this.map.clear();
-    this.head = null;
-    this.onBlockChange = () => null;
-  }
-
-  /**
-   * Adds a new child block to the beginning of the current block's children list.
-   *
-   * @param {string} parentId
-   * @param {Object} content - The content of the new block, including its type and data.
-   * @param {string} content.type - The type of the new block.
-   * @param {Object} content.data - The data associated with the new block.
-   * @returns {Block} The newly created child block.
-   */
-  prependChild(blockId: string, content: { type: BlockType, data: BlockData<BlockType> }): Block | null {
-    const parent = this.getBlock(blockId);
-    if (!parent) return null;
-    const newBlock = parent.prependChild(content);
-
-    if (newBlock) {
-      this.map.set(newBlock?.id, newBlock);
-      this.onBlockChange('insert', { block: newBlock });
-    }
-
-    return newBlock;
-  }
-
-  /**
-   * Add a new sibling block after this block.
-   * @param {string} blockId
-   * @param content The type and data for the new sibling block.
-   * @returns The newly created sibling block.
-   */
-  addSibling(blockId: string, content: { type: BlockType, data: BlockData<BlockType> }): Block | null {
-    const block = this.getBlock(blockId);
-    if (!block) return null;
-    const newBlock = block.addSibling(content);
-    if (newBlock) {
-      this.map.set(newBlock?.id, newBlock);
-      this.onBlockChange('insert', { block: newBlock });
-    }
-    return newBlock;
-  }
-
-  /**
-   * Remove this block and its descendants from the tree.
-   * @param {string} blockId
-   */
-  remove(blockId: string) {
-    const block = this.getBlock(blockId);
-    if (!block) return;
-    const oldParentId = block.parent?.id;
-    block.remove();
-    this.map.delete(block.id);
-    this.onBlockChange('remove', { oldParentId });
-    return block;
-  }
-
-  /**
-   * Move this block to a new position in the tree.
-   * @param {string} blockId
-   * @param newParentId The new parent block of this block. If null, the block becomes a top-level block.
-   * @param newPrevId The new previous sibling block of this block. If null, the block becomes the first child of the new parent.
-   * @returns This block after it has been moved.
-   */
-  move(blockId: string, newParentId: string, newPrevId: string): Block | null {
-    const block = this.getBlock(blockId);
-    if (!block) return null;
-    const oldParentId = block.parent?.id;
-    const oldPrevId = block.prev?.id;
-    block.detach();
-    const newParent = this.getBlock(newParentId);
-    const newPrev = this.getBlock(newPrevId);
-    block.reposition(newParent, newPrev);
-    this.onBlockChange('move', {
-      block,
-      oldParentId,
-      oldPrevId
-    });
-    return block;
-  }
-
-  updateBlock(id: string, data: { path: string[], value: any }) {
-    const block = this.getBlock(id);
-    if (!block) return null;
-    
-    set(block, data.path, data.value);
-    this.onBlockChange('update', {
-      block
-    });
-    return block;
-  }
-
-
-  moveBulk(startBlockId: string, endBlockId: string, newParentId: string, newPrevId: string): [Block, Block] | null {
-    const startBlock = this.getBlock(startBlockId);
-    const endBlock = this.getBlock(endBlockId);
-    if (!startBlock || !endBlock) return null;
-
-    if (startBlockId === endBlockId) {
-      const block = this.move(startBlockId, newParentId, '');
-      if (!block) return null;
-      return [block, block];
-    }
-
-    const oldParent = startBlock.parent;
-    const prev = startBlock.prev;
-    const newParent = this.getBlock(newParentId);
-    if (!oldParent || !newParent) return null;
-
-    if (oldParent.firstChild === startBlock) {
-      oldParent.firstChild = endBlock.next;
-    } else if (prev) {
-      prev.next = endBlock.next;
-    }
-    startBlock.prev = null;
-    endBlock.next = null;
-
-    startBlock.parent = newParent;
-    endBlock.parent = newParent;
-    const newPrev = this.getBlock(newPrevId);
-    if (!newPrev) {
-      const firstChild = newParent.firstChild;
-      newParent.firstChild = startBlock;
-      if (firstChild) {
-        endBlock.next = firstChild;
-        firstChild.prev = endBlock;
-      }
-    } else {
-      const next = newPrev.next;
-      newPrev.next = startBlock;
-      endBlock.next = next;
-      if (next) {
-        next.prev = endBlock;
-      }
-    }
-
-    this.onBlockChange('move', {
-      startBlock,
-      endBlock,
-      oldParentId: oldParent.id,
-      oldPrevId: prev?.id
-    });
-    
-    return [
-      startBlock,
-      endBlock
-    ];
-  }
-
-
-  private createBlock(id: string, type: BlockType, data: BlockData<BlockType>) {
-    const block = new Block(id, type, data);
-    this.map.set(id, block);
-    return block;
-  }
-}

frontend/appflowy_tauri/src/appflowy_app/block_editor/core/op_adapter.ts

@@ -1,16 +0,0 @@
-import { BackendOp, LocalOp } from "$app/interfaces";
-
-export class OpAdapter {
-
-  toBackendOp(localOp: LocalOp): BackendOp {
-    const backendOp: BackendOp = { ...localOp };
-    // switch localOp type and generate backendOp
-    return backendOp;
-  }
-
-  toLocalOp(backendOp: BackendOp): LocalOp {
-    const localOp: LocalOp = { ...backendOp };
-    // switch backendOp type and generate localOp
-    return localOp;
-  }
-}

frontend/appflowy_tauri/src/appflowy_app/block_editor/core/operation.ts

@@ -1,167 +0,0 @@
-import { BlockChain } from './block_chain';
-import { BlockInterface, BlockType, InsertOpData, LocalOp, UpdateOpData, moveOpData, moveRangeOpData, removeOpData, BlockData } from '$app/interfaces';
-import { BlockEditorSync } from './sync';
-import { Block } from './block';
-
-export class Operation {
-  private sync: BlockEditorSync;
-
-  constructor(private blockChain: BlockChain) {
-    this.sync = new BlockEditorSync();
-  }
-
-
-  splitNode(
-    retainId: string,
-    retainData: { path: string[], value: any },
-    newBlockData: {
-      type: BlockType;
-      data: BlockData
-    }) {
-    const ops: {
-      type: LocalOp['type'];
-      data: LocalOp['data'];
-    }[] = [];
-    const newBlock = this.blockChain.addSibling(retainId, newBlockData);
-    const parentId = newBlock?.parent?.id;
-    const retainBlock = this.blockChain.getBlock(retainId);
-    if (!newBlock || !parentId || !retainBlock) return null;
-
-    const insertOp = this.getInsertNodeOp({
-      id: newBlock.id,
-      next: newBlock.next?.id || null,
-      firstChild: newBlock.firstChild?.id || null,
-      data: newBlock.data,
-      type: newBlock.type,
-    }, parentId, retainId);
-
-    const updateOp = this.getUpdateNodeOp(retainId, retainData.path, retainData.value);
-    this.blockChain.updateBlock(retainId, retainData);
-
-    ops.push(insertOp, updateOp);
-    const startBlock = retainBlock.firstChild;
-    if (startBlock) {
-      const startBlockId = startBlock.id;
-      let next: Block | null = startBlock.next;
-      let endBlockId = startBlockId;
-      while (next) {
-        endBlockId = next.id;
-        next = next.next;
-      }
-      
-      const moveOp = this.getMoveRangeOp([startBlockId, endBlockId], newBlock.id);
-      this.blockChain.moveBulk(startBlockId, endBlockId, newBlock.id, '');
-      ops.push(moveOp);
-    }
-
-    this.sync.sendOps(ops);
-
-    return newBlock;
-  }
-
-  updateNode<T>(blockId: string, path: string[], value: T) {
-    const op = this.getUpdateNodeOp(blockId, path, value);
-    this.blockChain.updateBlock(blockId, {
-      path,
-      value
-    });
-    this.sync.sendOps([op]);
-  }
-
-  moveNode(blockId: string, newParentId: string, newPrevId: string) {
-    const op = this.getMoveOp(blockId, newParentId, newPrevId);
-    this.blockChain.move(blockId, newParentId, newPrevId);
-    this.sync.sendOps([op]);
-  }
-
-  deleteNode(blockId: string) {
-    const op = this.getRemoveOp(blockId);
-    this.blockChain.remove(blockId);
-    this.sync.sendOps([op]);
-  }
-
-  private getUpdateNodeOp<T>(blockId: string, path: string[], value: T): {
-    type: 'update',
-    data: UpdateOpData
-  } {
-    return {
-      type: 'update',
-      data: {
-        blockId,
-        path: path,
-        value
-      }
-    };
-  }
-
-  private getInsertNodeOp<T extends BlockInterface>(block: T, parentId: string, prevId?: string): {
-    type: 'insert';
-    data: InsertOpData
-  } {
-    return {
-      type: 'insert',
-      data: {
-        block,
-        parentId,
-        prevId
-      }
-    }
-  }
-
-  private getMoveRangeOp(range: [string, string], newParentId: string, newPrevId?: string): {
-    type: 'move_range',
-    data: moveRangeOpData
-  } {
-    return {
-      type: 'move_range',
-      data: {
-        range,
-        newParentId,
-        newPrevId,
-      }
-    }
-  }
-
-  private getMoveOp(blockId: string, newParentId: string, newPrevId?: string): {
-    type: 'move',
-    data: moveOpData
-  } {
-    return {
-      type: 'move',
-      data: {
-        blockId,
-        newParentId,
-        newPrevId
-      }
-    }
-  }
-
-  private getRemoveOp(blockId: string): {
-    type: 'remove'
-    data: removeOpData
-  } {
-    return {
-      type: 'remove',
-      data: {
-        blockId
-      }
-    }
-  }
-
-  applyOperation(op: LocalOp) {
-    switch (op.type) {
-      case 'insert':
-
-        break;
-
-      default:
-        break;
-    }
-  }
-
-  destroy() {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    this.blockChain = null;
-  }
-}

frontend/appflowy_tauri/src/appflowy_app/block_editor/core/sync.ts

@@ -1,48 +0,0 @@
-import { BackendOp, LocalOp } from '$app/interfaces';
-import { OpAdapter } from './op_adapter';
-
-/**
- * BlockEditorSync is a class that synchronizes changes made to a block chain with a server.
- * It allows for adding, removing, and moving blocks in the chain, and sends pending operations to the server.
- */
-export class BlockEditorSync {
-  private version = 0;
-  private opAdapter: OpAdapter;
-  private pendingOps: BackendOp[] = [];
-  private appliedOps: LocalOp[] = [];
-  
-  constructor() {
-    this.opAdapter = new OpAdapter();
-  }
-
-  private applyOp(op: BackendOp): void {
-    const localOp = this.opAdapter.toLocalOp(op);
-    this.appliedOps.push(localOp);
-  }
-
-  private receiveOps(ops: BackendOp[]): void {
-    // Apply the incoming operations to the local document
-    ops.sort((a, b) => a.version - b.version);
-    for (const op of ops) {
-      this.applyOp(op);
-    }
-  }
-
-  private resolveConflict(): void {
-    // Implement conflict resolution logic here
-  }
-
-  public sendOps(ops: {
-    type: LocalOp["type"];
-    data: LocalOp["data"]
-  }[]) {
-    const backendOps = ops.map(op => this.opAdapter.toBackendOp({
-      ...op,
-      version: this.version
-    }));
-    this.pendingOps.push(...backendOps);
-    // Send the pending operations to the server
-    console.log('==== sync pending ops ====', [...this.pendingOps]);
-  }
-
-}

frontend/appflowy_tauri/src/appflowy_app/block_editor/index.ts

@@ -1,60 +0,0 @@
-// Import dependencies
-import { BlockInterface } from '../interfaces';
-import { BlockChain, BlockChangeProps } from './core/block_chain';
-import { RenderTree } from './view/tree';
-import { Operation } from './core/operation';
-
-/**
- * The BlockEditor class manages a block chain and a render tree for a document editor.
- * The block chain stores the content blocks of the document in sequence, while the
- * render tree displays the document as a hierarchical tree structure.
- */
-export class BlockEditor {
-  // Public properties
-  public blockChain: BlockChain; // (local data) the block chain used to store the document
-  public renderTree: RenderTree; // the render tree used to display the document
-  public operation: Operation;
-  /**
-   * Constructs a new BlockEditor object.
-   * @param id - the ID of the document
-   * @param data - the initial data for the document
-   */
-  constructor(private id: string, data: Record<string, BlockInterface>) {    
-    // Create the block chain and render tree
-    this.blockChain = new BlockChain(this.blockChange);
-    this.operation = new Operation(this.blockChain);
-    this.changeDoc(id, data);
-
-    this.renderTree = new RenderTree(this.blockChain);
-  }
-
-  /**
-   * Updates the document ID and block chain when the document changes.
-   * @param id - the new ID of the document
-   * @param data - the updated data for the document
-   */
-  changeDoc = (id: string, data: Record<string, BlockInterface>) => {
-    console.log('==== change document ====', id, data);
-    
-    // Update the document ID and rebuild the block chain
-    this.id = id;
-    this.blockChain.rebuild(id, data);
-  }
-
-
-  /**
-   * Destroys the block chain and render tree.
-   */
-  destroy = () => {
-    // Destroy the block chain and render tree
-    this.blockChain.destroy();
-    this.renderTree.destroy();
-    this.operation.destroy();
-  }
-
-  private blockChange = (command: string, data: BlockChangeProps) => {
-    this.renderTree.onBlockChange(command, data);
-  }
-
-}
-

frontend/appflowy_tauri/src/appflowy_app/block_editor/view/block_position.ts

@@ -1,87 +0,0 @@
-import { RegionGrid, BlockPosition } from './region_grid';
-export class BlockPositionManager {
-  private regionGrid: RegionGrid;
-  private viewportBlocks: Set<string> = new Set();
-  private blockPositions: Map<string, BlockPosition> = new Map();
-  private container: HTMLDivElement | null = null;
-
-  constructor(container: HTMLDivElement) {
-    this.container = container;
-    this.regionGrid = new RegionGrid(container.offsetHeight);
-  }
-
-  isInViewport(nodeId: string) {
-    return this.viewportBlocks.has(nodeId);
-  }
-
-  observeBlock(node: HTMLDivElement) {
-    const blockId = node.getAttribute('data-block-id');
-    if (blockId) {
-      this.updateBlockPosition(blockId);
-      this.viewportBlocks.add(blockId);
-    }
-    return {
-      unobserve: () => {
-        if (blockId) this.viewportBlocks.delete(blockId);
-      },
-    }
-  }
-
-  getBlockPosition(blockId: string) {
-    if (!this.blockPositions.has(blockId)) {
-      this.updateBlockPosition(blockId);
-    }
-    return this.blockPositions.get(blockId);
-  }
-
-  updateBlockPosition(blockId: string) {
-    if (!this.container) return;
-    const node = document.querySelector(`[data-block-id=${blockId}]`) as HTMLDivElement;
-    if (!node) return;
-    const rect = node.getBoundingClientRect();
-    const position = {
-      id: blockId,
-      x: rect.x,
-      y: rect.y + this.container.scrollTop,
-      height: rect.height,
-      width: rect.width
-    };
-    const prevPosition =  this.blockPositions.get(blockId);
-    if (prevPosition && prevPosition.x === position.x &&
-      prevPosition.y === position.y &&
-      prevPosition.height === position.height &&
-      prevPosition.width === position.width) {
-      return;
-    }
-    this.blockPositions.set(blockId, position);
-    this.regionGrid.removeBlock(blockId);
-    this.regionGrid.addBlock(position);
-  }
-
-  getIntersectBlocks(startX: number, startY: number, endX: number, endY: number): BlockPosition[] {
-    return this.regionGrid.getIntersectBlocks(startX, startY, endX, endY);
-  }
-
-  getViewportBlockByPoint(x: number, y: number): BlockPosition | null {
-    let blockPosition: BlockPosition | null = null;
-    this.viewportBlocks.forEach(id => {
-      this.updateBlockPosition(id);
-      const block = this.blockPositions.get(id);
-      if (!block) return;
-      
-      if (block.x + block.width - 1 >= x &&
-        block.y + block.height - 1 >= y && block.y <= y) {
-          if (!blockPosition || block.y > blockPosition.y) {
-            blockPosition = block;
-          }
-      }
-    });
-    return blockPosition;
-  }
-
-
-  destroy() {
-    this.container = null;
-  }
-
-}

frontend/appflowy_tauri/src/appflowy_app/block_editor/view/tree.ts

@@ -1,173 +0,0 @@
-import { BlockChain, BlockChangeProps } from '../core/block_chain';
-import { Block } from '../core/block';
-import { TreeNode } from "./tree_node";
-import { BlockPositionManager } from './block_position';
-import { filterSelections } from '@/appflowy_app/utils/block_selection';
-
-export class RenderTree {
-  public blockPositionManager?: BlockPositionManager;
-
-  private map: Map<string, TreeNode> = new Map();
-  private root: TreeNode | null = null;
-  private selections: Set<string> = new Set();
-  constructor(private blockChain: BlockChain) {
-  }
-
-
-  createPositionManager(container: HTMLDivElement) {
-    this.blockPositionManager = new BlockPositionManager(container);
-  }
-
-  observeBlock(node: HTMLDivElement) {
-    return this.blockPositionManager?.observeBlock(node);
-  }
-
-  getBlockPosition(nodeId: string) {
-    return this.blockPositionManager?.getBlockPosition(nodeId) || null;
-  }
-  /**
-   * Get the TreeNode data by nodeId
-   * @param nodeId string
-   * @returns TreeNode|null
-   */
-  getTreeNode = (nodeId: string): TreeNode | null => {
-    // Return the TreeNode instance from the map or null if it does not exist
-    return this.map.get(nodeId) || null;
-  }
-
-  private createNode(block: Block): TreeNode {
-    if (this.map.has(block.id)) {
-      return this.map.get(block.id)!;
-    }
-    const node = new TreeNode(block);
-    this.map.set(block.id, node);
-    return node;
-  }
-
-
-  buildDeep(rootId: string): TreeNode | null {
-    this.map.clear();
-    // Define a callback function for the blockChain.traverse() method
-    const callback = (block: Block) => {
-      // Check if the TreeNode instance already exists in the map
-      const node = this.createNode(block);
-
-      // Add the TreeNode instance to the map
-      this.map.set(block.id, node);
-
-      // Add the first child of the block as a child of the current TreeNode instance
-      const firstChild = block.firstChild;
-      if (firstChild) {
-        const child = this.createNode(firstChild);
-        node.addChild(child);
-        this.map.set(child.id, child);
-      }
-
-      // Add the next block as a sibling of the current TreeNode instance
-      const next = block.next;
-      if (next) {
-        const nextNode = this.createNode(next);
-        node.parent?.addChild(nextNode);
-        this.map.set(next.id, nextNode);
-      }
-    }
-
-    // Traverse the blockChain using the callback function
-    this.blockChain.traverse(callback);
-
-    // Get the root node from the map and return it
-    const root = this.map.get(rootId)!;
-    this.root = root;
-    return root || null;
-  }
-
-
-  forceUpdate(nodeId: string, shouldUpdateChildren = false) {
-    const block = this.blockChain.getBlock(nodeId);
-    if (!block) return null;
-    const node = this.createNode(block);
-    if (!node) return null;
-    if (!shouldUpdateChildren) {
-      node.update(node.block, node.children);
-      node.reRender();
-      return;
-    }
-
-
-    const children: TreeNode[] = [];
-    let childBlock = block.firstChild;
-
-    while (childBlock) {
-      const child = this.createNode(childBlock);
-      child.update(childBlock, child.children);
-      children.push(child);
-      childBlock = childBlock.next;
-    }
-
-    node.update(block, children);
-    node.reRender();
-    node.children.forEach(child => {
-      child.reRender();
-    });
-  }
-
-  onBlockChange(command: string, data: BlockChangeProps) {
-    const { block, startBlock, endBlock, oldParentId = '', oldPrevId = '' } = data;
-    switch (command) {
-      case 'insert':
-        if (block?.parent) this.forceUpdate(block.parent.id, true);
-        break;
-      case 'update':
-        this.forceUpdate(block!.id);
-        break;
-      case 'remove':
-        if (oldParentId) this.forceUpdate(oldParentId, true);
-        break;
-      case 'move':
-        if (oldParentId) this.forceUpdate(oldParentId, true);
-        if (block?.parent) this.forceUpdate(block.parent.id, true);
-        if (startBlock?.parent) this.forceUpdate(startBlock.parent.id, true);
-        break;
-      default:
-        break;
-    }
-
-  }
-
-  updateSelections(selections: string[]) {
-    const newSelections = filterSelections<TreeNode>(selections, this.map);
-
-    const selectedBlocksSet = new Set(newSelections);
-
-    const updateNotSelected: string[] = [];
-    const updateSelected: string[] = [];
-    Array.from(this.selections).forEach((id) => {
-      if (!selectedBlocksSet.has(id)) {
-        updateNotSelected.push(id);
-      }
-    });
-    newSelections.forEach(id => {
-      if (!this.selections.has(id)) {
-        updateSelected.push(id);
-      }
-    });
-
-    this.selections = selectedBlocksSet;
-    [...updateNotSelected, ...updateSelected].forEach((id) => {
-      this.forceUpdate(id);
-    });
-  }
-
-  isSelected(nodeId: string) {
-    return this.selections.has(nodeId);
-  }
-
-  /**
-   * Destroy the RenderTreeRectManager instance
-   */
-  destroy() {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    this.blockChain = null;
-  }
-}

frontend/appflowy_tauri/src/appflowy_app/block_editor/view/tree_node.ts

@@ -1,78 +0,0 @@
-import { BlockData, BlockType } from '$app/interfaces/index';
-import { Block } from '../core/block';
-
-/**
- * Represents a node in a tree structure of blocks.
- */
-export class TreeNode {
-  id: string;
-  type: BlockType;
-  parent: TreeNode | null = null;
-  children: TreeNode[] = [];
-  data: BlockData<BlockType>;
-
-  private forceUpdate?: () => void;
-
-  /**
-   * Create a new TreeNode instance.
-   * @param block - The block data used to create the node.
-   */
-  constructor(private _block: Block) {
-    this.id = _block.id;
-    this.data = _block.data;
-    this.type = _block.type;
-  }
-
-  registerUpdate(forceUpdate: () => void) {
-    this.forceUpdate = forceUpdate;
-  }
-
-  unregisterUpdate() {
-    this.forceUpdate = undefined;
-  }
-
-  reRender() {
-    this.forceUpdate?.();
-  }
-
-  update(block: Block, children: TreeNode[]) {
-    this.type = block.type;
-    this.data = block.data;
-    this.children = [];
-    children.forEach(child => {
-      this.addChild(child);
-    })
-  }
-
-  /**
-   * Add a child node to the current node.
-   * @param node - The child node to add.
-   */
-  addChild(node: TreeNode) {
-    node.parent = this;
-    this.children.push(node);
-  }
-
-  get lastChild() {
-    return this.children[this.children.length - 1];
-  }
-
-  get prevLine(): TreeNode | null {
-    if (!this.parent) return null;
-    const index = this.parent?.children.findIndex(item => item.id === this.id);
-    if (index === 0) {
-      return this.parent;
-    }
-    const prev = this.parent.children[index - 1];
-    let line = prev;
-    while(line.lastChild) {
-      line = line.lastChild;
-    }
-    return line;
-  }
-
-  get block() {
-    return this._block;
-  }
- 
-}

frontend/appflowy_tauri/src/appflowy_app/components/block/BlockComponent/BlockComponet.hooks.ts

@@ -1,36 +0,0 @@
-import { useEffect, useState, useRef, useContext } from 'react';
-
-import { TreeNode } from '@/appflowy_app/block_editor/view/tree_node';
-import { BlockContext } from '$app/utils/block';
-
-export function useBlockComponent({
-  node
-}: {
-  node: TreeNode
-}) {
-  const { blockEditor } = useContext(BlockContext);
-
-  const [version, forceUpdate] = useState<number>(0);
-  const myRef = useRef<HTMLDivElement | null>(null);
-
-  const isSelected = blockEditor?.renderTree.isSelected(node.id);
-
-  useEffect(() => {
-    if (!myRef.current) {
-      return;
-    }
-    const observe = blockEditor?.renderTree.observeBlock(myRef.current);
-    node.registerUpdate(() => forceUpdate((prev) => prev + 1));
-
-    return () => {
-      node.unregisterUpdate();
-      observe?.unobserve();
-    };
-  }, []);
-  return {
-    version,
-    myRef,
-    isSelected,
-    className: `relative my-[1px] px-1`
-  }
-}

frontend/appflowy_tauri/src/appflowy_app/components/block/BlockComponent/index.tsx

@@ -1,91 +0,0 @@
-import React, { forwardRef } from 'react';
-import { BlockCommonProps, BlockType } from '$app/interfaces';
-import PageBlock from '../PageBlock';
-import TextBlock from '../TextBlock';
-import HeadingBlock from '../HeadingBlock';
-import ListBlock from '../ListBlock';
-import CodeBlock from '../CodeBlock';
-import { TreeNode } from '@/appflowy_app/block_editor/view/tree_node';
-import { withErrorBoundary } from 'react-error-boundary';
-import { ErrorBoundaryFallbackComponent } from '../BlockList/BlockList.hooks';
-import { useBlockComponent } from './BlockComponet.hooks';
-
-const BlockComponent = forwardRef(
-  (
-    {
-      node,
-      renderChild,
-      ...props
-    }: { node: TreeNode; renderChild?: (_node: TreeNode) => React.ReactNode } & React.DetailedHTMLProps<
-      React.HTMLAttributes<HTMLDivElement>,
-      HTMLDivElement
-    >,
-    ref: React.ForwardedRef<HTMLDivElement>
-  ) => {
-    const { myRef, className, version, isSelected } = useBlockComponent({
-      node,
-    });
-
-    const renderComponent = () => {
-      let BlockComponentClass: (_: BlockCommonProps<TreeNode>) => JSX.Element | null;
-      switch (node.type) {
-        case BlockType.PageBlock:
-          BlockComponentClass = PageBlock;
-          break;
-        case BlockType.TextBlock:
-          BlockComponentClass = TextBlock;
-          break;
-        case BlockType.HeadingBlock:
-          BlockComponentClass = HeadingBlock;
-          break;
-        case BlockType.ListBlock:
-          BlockComponentClass = ListBlock;
-          break;
-        case BlockType.CodeBlock:
-          BlockComponentClass = CodeBlock;
-          break;
-        default:
-          break;
-      }
-
-      const blockProps: BlockCommonProps<TreeNode> = {
-        version,
-        node,
-      };
-
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      if (BlockComponentClass) {
-        return <BlockComponentClass {...blockProps} />;
-      }
-      return null;
-    };
-
-    return (
-      <div
-        ref={(el: HTMLDivElement | null) => {
-          myRef.current = el;
-          if (typeof ref === 'function') {
-            ref(el);
-          } else if (ref) {
-            ref.current = el;
-          }
-        }}
-        {...props}
-        data-block-id={node.id}
-        data-block-selected={isSelected}
-        className={props.className ? `${props.className} ${className}` : className}
-      >
-        {renderComponent()}
-        {renderChild ? node.children.map(renderChild) : null}
-        <div className='block-overlay'></div>
-        {isSelected ? <div className='pointer-events-none absolute inset-0 z-[-1] rounded-[4px] bg-[#E0F8FF]' /> : null}
-      </div>
-    );
-  }
-);
-
-const ComponentWithErrorBoundary = withErrorBoundary(BlockComponent, {
-  FallbackComponent: ErrorBoundaryFallbackComponent,
-});
-export default React.memo(ComponentWithErrorBoundary);

frontend/appflowy_tauri/src/appflowy_app/components/block/BlockList/BlockList.hooks.tsx

@@ -1,91 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { BlockEditor } from '@/appflowy_app/block_editor';
-import { TreeNode } from '$app/block_editor/view/tree_node';
-import { Alert } from '@mui/material';
-import { FallbackProps } from 'react-error-boundary';
-import { TextBlockManager } from '@/appflowy_app/block_editor/blocks/text_block';
-import { TextBlockContext } from '@/appflowy_app/utils/slate/context';
-import { useVirtualizer } from '@tanstack/react-virtual';
-export interface BlockListProps {
-  blockId: string;
-  blockEditor: BlockEditor;
-}
-
-const defaultSize = 45;
-
-export function useBlockList({ blockId, blockEditor }: BlockListProps) {
-  const [root, setRoot] = useState<TreeNode | null>(null);
-
-  const parentRef = useRef<HTMLDivElement>(null);
-
-  const rowVirtualizer = useVirtualizer({
-    count: root?.children.length || 0,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => {
-      return defaultSize;
-    },
-  });
-
-  const [version, forceUpdate] = useState<number>(0);
-
-  const buildDeepTree = useCallback(() => {
-    const treeNode = blockEditor.renderTree.buildDeep(blockId);
-    setRoot(treeNode);
-  }, [blockEditor]);
-
-  useEffect(() => {
-    if (!parentRef.current) return;
-    blockEditor.renderTree.createPositionManager(parentRef.current);
-    buildDeepTree();
-
-    return () => {
-      blockEditor.destroy();
-    };
-  }, [blockId, blockEditor]);
-
-  useEffect(() => {
-    root?.registerUpdate(() => forceUpdate((prev) => prev + 1));
-    return () => {
-      root?.unregisterUpdate();
-    };
-  }, [root]);
-
-  return {
-    root,
-    rowVirtualizer,
-    parentRef,
-    blockEditor,
-  };
-}
-
-export function ErrorBoundaryFallbackComponent({ error, resetErrorBoundary }: FallbackProps) {
-  return (
-    <Alert severity='error' className='mb-2'>
-      <p>Something went wrong:</p>
-      <pre>{error.message}</pre>
-      <button onClick={resetErrorBoundary}>Try again</button>
-    </Alert>
-  );
-}
-
-export function withTextBlockManager(Component: (props: BlockListProps) => React.ReactElement) {
-  return (props: BlockListProps) => {
-    const textBlockManager = new TextBlockManager(props.blockId, props.blockEditor.operation);
-
-    useEffect(() => {
-      return () => {
-        textBlockManager.destroy();
-      };
-    }, []);
-
-    return (
-      <TextBlockContext.Provider
-        value={{
-          textBlockManager,
-        }}
-      >
-        <Component {...props} />
-      </TextBlockContext.Provider>
-    );
-  };
-}

frontend/appflowy_tauri/src/appflowy_app/components/block/BlockList/BlockListTitle.tsx

@@ -1,18 +0,0 @@
-import TextBlock from '../TextBlock';
-import { TreeNode } from '$app/block_editor/view/tree_node';
-
-export default function BlockListTitle({ node }: { node: TreeNode | null }) {
-  if (!node) return null;
-  return (
-    <div data-block-id={node.id} className='doc-title flex pt-[50px] text-4xl font-bold'>
-      <TextBlock
-        version={0}
-        toolbarProps={{
-          showGroups: [],
-        }}
-        node={node}
-        needRenderChildren={false}
-      />
-    </div>
-  );
-}

frontend/appflowy_tauri/src/appflowy_app/components/block/BlockList/ListFallbackComponent.tsx

@@ -1,31 +0,0 @@
-import * as React from 'react';
-import Typography, { TypographyProps } from '@mui/material/Typography';
-import Skeleton from '@mui/material/Skeleton';
-import Grid from '@mui/material/Grid';
-
-const variants = ['h1', 'h3', 'body1', 'caption'] as readonly TypographyProps['variant'][];
-
-export default function ListFallbackComponent() {
-  return (
-    <div id='appflowy-block-doc' className='doc-scroller-container flex h-[100%] flex-col items-center overflow-auto'>
-      <div className='doc-content min-x-[0%] p-lg w-[900px] max-w-[100%]'>
-        <div className='doc-title my-[50px] flex w-[100%] px-14 text-4xl font-bold'>
-          <Typography className='w-[100%]' component='div' key={'h1'} variant={'h1'}>
-            <Skeleton />
-          </Typography>
-        </div>
-        <div className='doc-body px-14' style={{ height: '100vh' }}>
-          <Grid container spacing={8}>
-            <Grid item xs>
-              {variants.map((variant) => (
-                <Typography component='div' key={variant} variant={variant}>
-                  <Skeleton />
-                </Typography>
-              ))}
-            </Grid>
-          </Grid>
-        </div>
-      </div>
-    </div>
-  );
-}

frontend/appflowy_tauri/src/appflowy_app/components/block/BlockList/Overlay.tsx

@@ -1,14 +0,0 @@
-import React, { useState } from 'react';
-import BlockSideTools from '../BlockSideTools';
-import BlockSelection from '../BlockSelection';
-import { BlockEditor } from '@/appflowy_app/block_editor';
-
-export default function Overlay({ blockEditor, container }: { container: HTMLDivElement; blockEditor: BlockEditor }) {
-  const [isDragging, setDragging] = useState(false);
-  return (
-    <>
-      {isDragging ? null : <BlockSideTools blockEditor={blockEditor} container={container} />}
-      <BlockSelection onDragging={setDragging} blockEditor={blockEditor} container={container} />
-    </>
-  );
-}

frontend/appflowy_tauri/src/appflowy_app/components/block/BlockList/index.tsx

@@ -1,58 +0,0 @@
-import React from 'react';
-import { BlockListProps, useBlockList, withTextBlockManager } from './BlockList.hooks';
-import { withErrorBoundary } from 'react-error-boundary';
-import ListFallbackComponent from './ListFallbackComponent';
-import BlockListTitle from './BlockListTitle';
-import BlockComponent from '../BlockComponent';
-import Overlay from './Overlay';
-
-function BlockList(props: BlockListProps) {
-  const { root, rowVirtualizer, parentRef, blockEditor } = useBlockList(props);
-
-  const virtualItems = rowVirtualizer.getVirtualItems();
-  return (
-    <div id='appflowy-block-doc' className='h-[100%] overflow-hidden'>
-      <div
-        ref={parentRef}
-        className={`doc-scroller-container flex h-[100%] flex-wrap items-center justify-center overflow-auto px-20`}
-      >
-        <div
-          className='doc-body max-w-screen w-[900px] min-w-0'
-          style={{
-            height: rowVirtualizer.getTotalSize(),
-            position: 'relative',
-          }}
-        >
-          {root && virtualItems.length ? (
-            <div
-              style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                transform: `translateY(${virtualItems[0].start || 0}px)`,
-              }}
-            >
-              {virtualItems.map((virtualRow) => {
-                const id = root.children[virtualRow.index].id;
-                return (
-                  <div className='p-[1px]' key={id} data-index={virtualRow.index} ref={rowVirtualizer.measureElement}>
-                    {virtualRow.index === 0 ? <BlockListTitle node={root} /> : null}
-                    <BlockComponent node={root.children[virtualRow.index]} />
-                  </div>
-                );
-              })}
-            </div>
-          ) : null}
-        </div>
-      </div>
-      {parentRef.current ? <Overlay container={parentRef.current} blockEditor={blockEditor} /> : null}
-    </div>
-  );
-}
-
-const ListWithErrorBoundary = withErrorBoundary(withTextBlockManager(BlockList), {
-  FallbackComponent: ListFallbackComponent,
-});
-
-export default React.memo(ListWithErrorBoundary);

frontend/appflowy_tauri/src/appflowy_app/components/block/BlockPortal/index.tsx

@@ -1,9 +0,0 @@
-import ReactDOM from 'react-dom';
-
-const BlockPortal = ({ blockId, children }: { blockId: string; children: JSX.Element }) => {
-  const root = document.querySelectorAll(`[data-block-id=${blockId}] > .block-overlay`)[0];
-
-  return typeof document === 'object' && root ? ReactDOM.createPortal(children, root) : null;
-};
-
-export default BlockPortal;

frontend/appflowy_tauri/src/appflowy_app/components/block/BlockSideTools/BlockSideTools.hooks.tsx

@@ -1,64 +0,0 @@
-import { BlockEditor } from '@/appflowy_app/block_editor';
-import { BlockType } from '@/appflowy_app/interfaces';
-import { debounce } from '@/appflowy_app/utils/tool';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-
-export function useBlockSideTools({ blockEditor, container }: { container: HTMLDivElement; blockEditor: BlockEditor }) {
-  const [hoverBlock, setHoverBlock] = useState<string>();
-  const ref = useRef<HTMLDivElement | null>(null);
-
-  const handleMouseMove = useCallback((e: MouseEvent) => {
-    const { clientX, clientY } = e;
-    const x = clientX;
-    const y = clientY + container.scrollTop;
-    const block = blockEditor.renderTree.blockPositionManager?.getViewportBlockByPoint(x, y);
-
-    if (!block) {
-      setHoverBlock('');
-    } else {
-      const node = blockEditor.renderTree.getTreeNode(block.id)!;
-      if ([BlockType.ColumnBlock].includes(node.type)) {
-        setHoverBlock('');
-      } else {
-        setHoverBlock(block.id);
-      }
-    }
-  }, []);
-
-  const debounceMove = useMemo(() => debounce(handleMouseMove, 30), [handleMouseMove]);
-
-  useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    if (!hoverBlock) {
-      el.style.opacity = '0';
-      el.style.zIndex = '-1';
-    } else {
-      el.style.opacity = '1';
-      el.style.zIndex = '1';
-      const node = blockEditor.renderTree.getTreeNode(hoverBlock);
-      el.style.top = '3px';
-      if (node?.type === BlockType.HeadingBlock) {
-        if (node.data.level === 1) {
-          el.style.top = '8px';
-        } else if (node.data.level === 2) {
-          el.style.top = '6px';
-        } else {
-          el.style.top = '5px';
-        }
-      }
-    }
-  }, [hoverBlock]);
-
-  useEffect(() => {
-    container.addEventListener('mousemove', debounceMove);
-    return () => {
-      container.removeEventListener('mousemove', debounceMove);
-    };
-  }, [debounceMove]);
-
-  return {
-    hoverBlock,
-    ref,
-  };
-}

frontend/appflowy_tauri/src/appflowy_app/components/block/CodeBlock/index.tsx

@@ -1,6 +0,0 @@
-import { TreeNode } from '@/appflowy_app/block_editor/view/tree_node';
-import { BlockCommonProps } from '@/appflowy_app/interfaces';
-
-export default function CodeBlock({ node }: BlockCommonProps<TreeNode>) {
-  return <div>{node.data.text}</div>;
-}

frontend/appflowy_tauri/src/appflowy_app/components/block/HeadingBlock/index.tsx

@@ -1,17 +0,0 @@
-import TextBlock from '../TextBlock';
-import { TreeNode } from '@/appflowy_app/block_editor/view/tree_node';
-import { BlockCommonProps } from '@/appflowy_app/interfaces';
-
-const fontSize: Record<string, string> = {
-  1: 'mt-8 text-3xl',
-  2: 'mt-6 text-2xl',
-  3: 'mt-4 text-xl',
-};
-
-export default function HeadingBlock({ node, version }: BlockCommonProps<TreeNode>) {
-  return (
-    <div className={`${fontSize[node.data.level]} font-semibold	`}>
-      <TextBlock version={version} node={node} needRenderChildren={false} />
-    </div>
-  );
-}

frontend/appflowy_tauri/src/appflowy_app/components/block/HoveringToolbar/FormatButton.tsx

@@ -1,32 +0,0 @@
-import { toggleFormat, isFormatActive } from '@/appflowy_app/utils/slate/format';
-import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
-
-import { command } from '$app/constants/toolbar';
-import FormatIcon from './FormatIcon';
-import { BaseEditor } from 'slate';
-
-const FormatButton = ({ editor, format, icon }: { editor: BaseEditor; format: string; icon: string }) => {
-  return (
-    <Tooltip
-      slotProps={{ tooltip: { style: { background: '#E0F8FF', borderRadius: 8 } } }}
-      title={
-        <div className='flex flex-col'>
-          <span className='text-base font-medium text-black'>{command[format].title}</span>
-          <span className='text-sm text-slate-400'>{command[format].key}</span>
-        </div>
-      }
-      placement='top-start'
-    >
-      <IconButton
-        size='small'
-        sx={{ color: isFormatActive(editor, format) ? '#00BCF0' : 'white' }}
-        onClick={() => toggleFormat(editor, format)}
-      >
-        <FormatIcon icon={icon} />
-      </IconButton>
-    </Tooltip>
-  );
-};
-
-export default FormatButton;

frontend/appflowy_tauri/src/appflowy_app/components/block/HoveringToolbar/FormatIcon.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { FormatBold, FormatUnderlined, FormatItalic, CodeOutlined, StrikethroughSOutlined } from '@mui/icons-material';
-import { iconSize } from '$app/constants/toolbar';
-
-export default function FormatIcon({ icon }: { icon: string }) {
-  switch (icon) {
-    case 'bold':
-      return <FormatBold sx={iconSize} />;
-    case 'underlined':
-      return <FormatUnderlined sx={iconSize} />;
-    case 'italic':
-      return <FormatItalic sx={iconSize} />;
-    case 'code':
-      return <CodeOutlined sx={iconSize} />;
-    case 'strikethrough':
-      return <StrikethroughSOutlined sx={iconSize} />;
-    default:
-      return null;
-  }
-}

frontend/appflowy_tauri/src/appflowy_app/components/block/HoveringToolbar/index.hooks.ts

@@ -1,36 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { useFocused, useSlate } from 'slate-react';
-import { calcToolbarPosition } from '@/appflowy_app/utils/slate/toolbar';
-import { TreeNode } from '$app/block_editor/view/tree_node';
-
-export function useHoveringToolbar({node}: {
-  node: TreeNode
-}) {
-  const editor = useSlate();
-  const inFocus = useFocused();
-  const ref = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    const nodeRect = document.querySelector(`[data-block-id=${node.id}]`)?.getBoundingClientRect();
-
-    if (!nodeRect) return;
-    const position = calcToolbarPosition(editor, el, nodeRect);
-
-    if (!position) {
-      el.style.opacity = '0';
-      el.style.zIndex = '-1';
-    } else {
-      el.style.opacity = '1';
-      el.style.zIndex = '1';
-      el.style.top = position.top;
-      el.style.left = position.left;
-    }
-  });
-  return {
-    ref,
-    inFocus,
-    editor
-  }
-}

frontend/appflowy_tauri/src/appflowy_app/components/block/HoveringToolbar/index.tsx

@@ -1,31 +0,0 @@
-import FormatButton from './FormatButton';
-import Portal from '../BlockPortal';
-import { TreeNode } from '$app/block_editor/view/tree_node';
-import { useHoveringToolbar } from './index.hooks';
-
-const HoveringToolbar = ({ blockId, node }: { blockId: string; node: TreeNode }) => {
-  const { inFocus, ref, editor } = useHoveringToolbar({ node });
-  if (!inFocus) return null;
-
-  return (
-    <Portal blockId={blockId}>
-      <div
-        ref={ref}
-        style={{
-          opacity: 0,
-        }}
-        className='z-1 absolute mt-[-6px] inline-flex h-[32px] items-stretch overflow-hidden rounded-[8px] bg-[#333] p-2 leading-tight shadow-lg transition-opacity duration-700'
-        onMouseDown={(e) => {
-          // prevent toolbar from taking focus away from editor
-          e.preventDefault();
-        }}
-      >
-        {['bold', 'italic', 'underlined', 'strikethrough', 'code'].map((format) => (
-          <FormatButton key={format} editor={editor} format={format} icon={format} />
-        ))}
-      </div>
-    </Portal>
-  );
-};
-
-export default HoveringToolbar;

frontend/appflowy_tauri/src/appflowy_app/components/block/ListBlock/ColumnListBlock.tsx

@@ -1,18 +0,0 @@
-import { TreeNode } from '@/appflowy_app/block_editor/view/tree_node';
-import React, { useMemo } from 'react';
-import ColumnBlock from '../ColumnBlock';
-
-export default function ColumnListBlock({ node }: { node: TreeNode }) {
-  const resizerWidth = useMemo(() => {
-    return 46 * (node.children?.length || 0);
-  }, [node.children?.length]);
-  return (
-    <>
-      <div className='column-list-block flex-grow-1 flex flex-row'>
-        {node.children?.map((item, index) => (
-          <ColumnBlock key={item.id} index={index} resizerWidth={resizerWidth} node={item} />
-        ))}
-      </div>
-    </>
-  );
-}

frontend/appflowy_tauri/src/appflowy_app/components/block/ListBlock/NumberedListBlock.tsx

@@ -1,31 +0,0 @@
-import { TreeNode } from '@/appflowy_app/block_editor/view/tree_node';
-import BlockComponent from '../BlockComponent';
-import { BlockType } from '@/appflowy_app/interfaces';
-import { Block } from '@/appflowy_app/block_editor/core/block';
-
-export default function NumberedListBlock({ title, node }: { title: JSX.Element; node: TreeNode }) {
-  let prev = node.block.prev;
-  let index = 1;
-  while (prev && prev.type === BlockType.ListBlock && (prev as Block<BlockType.ListBlock>).data.type === 'numbered') {
-    index++;
-    prev = prev.prev;
-  }
-  return (
-    <div className='numbered-list-block'>
-      <div className='relative flex'>
-        <div
-          className={`relative flex h-[calc(1.5em_+_3px_+_3px)] min-w-[24px] max-w-[24px] select-none items-center`}
-        >{`${index} .`}</div>
-        {title}
-      </div>
-
-      <div className='pl-[24px]'>
-        {node.children?.map((item) => (
-          <div key={item.id}>
-            <BlockComponent node={item} />
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

frontend/appflowy_tauri/src/appflowy_app/components/block/PageBlock/index.tsx

@@ -1,6 +0,0 @@
-import { TreeNode } from '@/appflowy_app/block_editor/view/tree_node';
-import { BlockCommonProps } from '@/appflowy_app/interfaces';
-
-export default function PageBlock({ node }: BlockCommonProps<TreeNode>) {
-  return <div className='cursor-pointer underline'>{node.data.title}</div>;
-}

frontend/appflowy_tauri/src/appflowy_app/components/block/TextBlock/Leaf.tsx

@@ -1,41 +0,0 @@
-import { BaseText } from 'slate';
-import { RenderLeafProps } from 'slate-react';
-
-const Leaf = ({
-  attributes,
-  children,
-  leaf,
-}: RenderLeafProps & {
-  leaf: BaseText & {
-    bold?: boolean;
-    code?: boolean;
-    italic?: boolean;
-    underlined?: boolean;
-    strikethrough?: boolean;
-  };
-}) => {
-  let newChildren = children;
-  if (leaf.bold) {
-    newChildren = <strong>{children}</strong>;
-  }
-
-  if (leaf.code) {
-    newChildren = <code className='rounded-sm	 bg-[#F2FCFF] p-1'>{newChildren}</code>;
-  }
-
-  if (leaf.italic) {
-    newChildren = <em>{newChildren}</em>;
-  }
-
-  if (leaf.underlined) {
-    newChildren = <u>{newChildren}</u>;
-  }
-
-  return (
-    <span {...attributes} className={leaf.strikethrough ? `line-through` : ''}>
-      {newChildren}
-    </span>
-  );
-};
-
-export default Leaf;

frontend/appflowy_tauri/src/appflowy_app/components/block/TextBlock/index.hooks.ts

@@ -1,118 +0,0 @@
-import { TreeNode } from "@/appflowy_app/block_editor/view/tree_node";
-import { triggerHotkey } from "@/appflowy_app/utils/slate/hotkey";
-import { useCallback, useContext, useEffect, useLayoutEffect, useState } from "react";
-import { Transforms, createEditor, Descendant, Range } from 'slate';
-import { ReactEditor, withReact } from 'slate-react';
-import { TextBlockContext } from '$app/utils/slate/context';
-
-export function useTextBlock({
-  node,
-}: {
-  node: TreeNode;
-}) {
-  const [editor] = useState(() => withReact(createEditor()));
-
-  const { textBlockManager } = useContext(TextBlockContext);
-
-  const value = [
-    {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      type: 'paragraph',
-      children: node.data.content,
-    },
-  ];
-
-
-  const onChange = useCallback(
-    (e: Descendant[]) => {
-      if (!editor.operations || editor.operations.length === 0) return;
-      if (editor.operations[0].type !== 'set_selection') {
-        console.log('====text block ==== ', editor.operations)
-        const children = 'children' in e[0] ? e[0].children : [];
-        textBlockManager?.update(node, ['data', 'content'], children);
-      } else {
-        const newProperties = editor.operations[0].newProperties;
-        textBlockManager?.setSelection(node, editor.selection);
-      }
-    },
-    [node.id, editor],
-  );
-  
-
-  const onKeyDownCapture = (event: React.KeyboardEvent<HTMLDivElement>) => {
-    switch (event.key) {
-      case 'Enter': {
-        event.stopPropagation();
-        event.preventDefault();
-        textBlockManager?.splitNode(node, editor);
-
-        return;
-      }
-      case 'Backspace': {
-        if (!editor.selection) return;
-        const { anchor } = editor.selection;
-        const isCollapase = Range.isCollapsed(editor.selection);
-        if (isCollapase && anchor.offset === 0 && anchor.path.toString() === '0,0') {
-          event.stopPropagation();
-          event.preventDefault();
-          textBlockManager?.deleteNode(node);
-        }
-      }
-    }
-
-    triggerHotkey(event, editor);
-  }
-
-  
-
-  const { focusId, selection } = textBlockManager!.selectionManager.getFocusSelection();
-  
-  editor.children = value;
-  Transforms.collapse(editor);
-
-  useEffect(() => {
-    textBlockManager?.register(node.id, editor);
-  
-    return () => {
-      textBlockManager?.unregister(node.id);
-    }
-  }, [ editor ])
-  
-
-  useLayoutEffect(() => {
-    
-    let timer: NodeJS.Timeout;
-    if (focusId === node.id && selection) {
-      ReactEditor.focus(editor);
-      Transforms.select(editor, selection);
-      // Use setTimeout to delay setting the selection
-      // until Slate has fully loaded and rendered all components and contents,
-      // to ensure that the operation succeeds.
-      timer = setTimeout(() => {
-        Transforms.select(editor, selection);
-      }, 100);
-    }
-    
-    return () => timer && clearTimeout(timer)
-  }, [editor]);
-
-  const onDOMBeforeInput = useCallback((e: InputEvent) => {
-    // COMPAT: in Apple, `compositionend` is dispatched after the
-    // `beforeinput` for "insertFromComposition". It will cause repeated characters when inputting Chinese.
-    // Here, prevent the beforeInput event and wait for the compositionend event to take effect
-    if (e.inputType === 'insertFromComposition') {
-      e.preventDefault();
-    }
-    
-  }, []);
-  
-  
-  return {
-    editor,
-    value,
-    onChange,
-    onKeyDownCapture,
-    onDOMBeforeInput,
-  }
-}

frontend/appflowy_tauri/src/appflowy_app/components/block/TextBlock/index.tsx

@@ -1,43 +0,0 @@
-import BlockComponent from '../BlockComponent';
-import { Slate, Editable } from 'slate-react';
-import Leaf from './Leaf';
-import HoveringToolbar from '@/appflowy_app/components/block/HoveringToolbar';
-import { TreeNode } from '@/appflowy_app/block_editor/view/tree_node';
-import { useTextBlock } from './index.hooks';
-import { BlockCommonProps, TextBlockToolbarProps } from '@/appflowy_app/interfaces';
-import { toolbarDefaultProps } from '@/appflowy_app/constants/toolbar';
-
-export default function TextBlock({
-  node,
-  needRenderChildren = true,
-  toolbarProps,
-  ...props
-}: {
-  needRenderChildren?: boolean;
-  toolbarProps?: TextBlockToolbarProps;
-} & BlockCommonProps<TreeNode> &
-  React.HTMLAttributes<HTMLDivElement>) {
-  const { editor, value, onChange, onKeyDownCapture, onDOMBeforeInput } = useTextBlock({ node });
-  const { showGroups } = toolbarProps || toolbarDefaultProps;
-
-  return (
-    <div {...props} className={`${props.className || ''} py-1`}>
-      <Slate editor={editor} onChange={onChange} value={value}>
-        {showGroups.length > 0 && <HoveringToolbar node={node} blockId={node.id} />}
-        <Editable
-          onKeyDownCapture={onKeyDownCapture}
-          onDOMBeforeInput={onDOMBeforeInput}
-          renderLeaf={(leafProps) => <Leaf {...leafProps} />}
-          placeholder='Enter some text...'
-        />
-      </Slate>
-      {needRenderChildren && node.children.length > 0 ? (
-        <div className='pl-[1.5em]'>
-          {node.children.map((item) => (
-            <BlockComponent key={item.id} node={item} />
-          ))}
-        </div>
-      ) : null}
-    </div>
-  );
-}

frontend/appflowy_tauri/src/appflowy_app/components/document/BlockPortal/index.tsx

@@ -1,7 +1,7 @@
 import ReactDOM from 'react-dom';
 
 const BlockPortal = ({ blockId, children }: { blockId: string; children: JSX.Element }) => {
-  const root = document.querySelectorAll(`[data-block-id=${blockId}] > .block-overlay`)[0];
+  const root = document.querySelectorAll(`[data-block-id="${blockId}"] > .block-overlay`)[0];
 
   return typeof document === 'object' && root ? ReactDOM.createPortal(children, root) : null;
 };

frontend/appflowy_tauri/src/appflowy_app/components/block/BlockSelection/BlockSelection.hooks.tsx → frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSelection/BlockSelection.hooks.tsx

@@ -1,17 +1,16 @@
-import { BlockEditor } from '@/appflowy_app/block_editor';
 import { useEffect, useRef, useState, useCallback, useMemo } from 'react';
+import { useAppDispatch } from '$app/stores/store';
+import { documentActions } from '@/appflowy_app/stores/reducers/document/slice';
 
 export function useBlockSelection({
   container,
-  blockEditor,
   onDragging,
 }: {
   container: HTMLDivElement;
-  blockEditor: BlockEditor;
   onDragging?: (_isDragging: boolean) => void;
 }) {
-  const blockPositionManager = blockEditor.renderTree.blockPositionManager;
   const ref = useRef<HTMLDivElement | null>(null);
+  const disaptch = useAppDispatch();
 
   const [isDragging, setDragging] = useState(false);
   const pointRef = useRef<number[]>([]);
@@ -75,7 +74,7 @@ export function useBlockSelection({
 
   const calcIntersectBlocks = useCallback(
     (clientX: number, clientY: number) => {
-      if (!isDragging || !blockPositionManager) return;
+      if (!isDragging) return;
       const [startX, startY] = pointRef.current;
       const endX = clientX + container.scrollLeft;
       const endY = clientY + container.scrollTop;
@@ -86,21 +85,21 @@ export function useBlockSelection({
         endX,
         endY,
       });
-      const selectedBlocks = blockPositionManager.getIntersectBlocks(
-        Math.min(startX, endX),
-        Math.min(startY, endY),
-        Math.max(startX, endX),
-        Math.max(startY, endY)
+      disaptch(
+        documentActions.changeSelectionByIntersectRect({
+          startX: Math.min(startX, endX),
+          startY: Math.min(startY, endY),
+          endX: Math.max(startX, endX),
+          endY: Math.max(startY, endY),
+        })
       );
-      const ids = selectedBlocks.map((item) => item.id);
-      blockEditor.renderTree.updateSelections(ids);
     },
     [isDragging]
   );
 
   const handleDraging = useCallback(
     (e: MouseEvent) => {
-      if (!isDragging || !blockPositionManager) return;
+      if (!isDragging) return;
       e.preventDefault();
       e.stopPropagation();
       calcIntersectBlocks(e.clientX, e.clientY);
@@ -120,7 +119,7 @@ export function useBlockSelection({
   const handleDragEnd = useCallback(
     (e: MouseEvent) => {
       if (isPointInBlock(e.target as HTMLElement) && !isDragging) {
-        blockEditor.renderTree.updateSelections([]);
+        disaptch(documentActions.updateSelections([]));
         return;
       }
       if (!isDragging) return;

frontend/appflowy_tauri/src/appflowy_app/components/block/BlockSelection/index.tsx → frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSelection/index.tsx

@@ -1,19 +1,15 @@
 import { useBlockSelection } from './BlockSelection.hooks';
-import { BlockEditor } from '$app/block_editor';
 import React from 'react';
 
 function BlockSelection({
   container,
-  blockEditor,
   onDragging,
 }: {
   container: HTMLDivElement;
-  blockEditor: BlockEditor;
   onDragging?: (_isDragging: boolean) => void;
 }) {
   const { isDragging, style, ref } = useBlockSelection({
     container,
-    blockEditor,
     onDragging,
   });
 

frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSideTools/BlockSideTools.hooks.tsx

@@ -0,0 +1,126 @@
+import { BlockType } from '@/appflowy_app/interfaces/document';
+import { useAppSelector } from '@/appflowy_app/stores/store';
+import { debounce } from '@/appflowy_app/utils/tool';
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { YDocControllerContext } from '../../../stores/effects/document/document_controller';
+import { Node } from '@/appflowy_app/stores/reducers/document/slice';
+import { v4 } from 'uuid';
+
+export function useBlockSideTools({ container }: { container: HTMLDivElement }) {
+  const [nodeId, setHoverNodeId] = useState<string>('');
+  const ref = useRef<HTMLDivElement | null>(null);
+  const nodes = useAppSelector((state) => state.document.nodes);
+  const { insertAfter } = useController();
+
+  const handleMouseMove = useCallback((e: MouseEvent) => {
+    const { clientX, clientY } = e;
+    const x = clientX;
+    const y = clientY;
+    const id = getNodeIdByPoint(x, y);
+    if (!id) {
+      setHoverNodeId('');
+    } else {
+      if ([BlockType.ColumnBlock].includes(nodes[id].type)) {
+        setHoverNodeId('');
+        return;
+      }
+      setHoverNodeId(id);
+    }
+  }, []);
+
+  const debounceMove = useMemo(() => debounce(handleMouseMove, 30), [handleMouseMove]);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || !nodeId) return;
+
+    const node = nodes[nodeId];
+    if (!node) {
+      el.style.opacity = '0';
+      el.style.zIndex = '-1';
+    } else {
+      el.style.opacity = '1';
+      el.style.zIndex = '1';
+      el.style.top = '1px';
+      if (node?.type === BlockType.HeadingBlock) {
+        if (node.data.style?.level === 1) {
+          el.style.top = '8px';
+        } else if (node.data.style?.level === 2) {
+          el.style.top = '6px';
+        } else {
+          el.style.top = '5px';
+        }
+      }
+    }
+  }, [nodeId, nodes]);
+
+  const handleAddClick = useCallback(() => {
+    if (!nodeId) return;
+    insertAfter(nodes[nodeId]);
+  }, [nodeId, nodes]);
+
+  useEffect(() => {
+    container.addEventListener('mousemove', debounceMove);
+    return () => {
+      container.removeEventListener('mousemove', debounceMove);
+    };
+  }, [debounceMove]);
+
+  return {
+    nodeId,
+    ref,
+    handleAddClick,
+  };
+}
+
+function useController() {
+  const controller = useContext(YDocControllerContext);
+
+  const insertAfter = useCallback((node: Node) => {
+    const parentId = node.parent;
+    if (!parentId || !controller) return;
+
+    controller.transact([
+      () => {
+        const newNode = {
+          id: v4(),
+          delta: [],
+          type: BlockType.TextBlock,
+        };
+        controller.insert(newNode, parentId, node.id);
+      },
+    ]);
+  }, []);
+
+  return {
+    insertAfter,
+  };
+}
+
+function getNodeIdByPoint(x: number, y: number) {
+  const viewportNodes = document.querySelectorAll('[data-block-id]');
+  let node: {
+    el: Element;
+    rect: DOMRect;
+  } | null = null;
+  viewportNodes.forEach((el) => {
+    const rect = el.getBoundingClientRect();
+
+    if (rect.x + rect.width - 1 >= x && rect.y + rect.height - 1 >= y && rect.y <= y) {
+      if (!node || rect.y > node.rect.y) {
+        node = {
+          el,
+          rect,
+        };
+      }
+    }
+  });
+  return node
+    ? (
+        node as {
+          el: Element;
+          rect: DOMRect;
+        }
+      ).el.getAttribute('data-block-id')
+    : null;
+}

frontend/appflowy_tauri/src/appflowy_app/components/block/BlockSideTools/index.tsx → frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSideTools/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { useBlockSideTools } from './BlockSideTools.hooks';
-import { BlockEditor } from '@/appflowy_app/block_editor';
 import AddIcon from '@mui/icons-material/Add';
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
 import Portal from '../BlockPortal';
@@ -8,12 +7,12 @@ import { IconButton } from '@mui/material';
 
 const sx = { height: 24, width: 24 };
 
-export default function BlockSideTools(props: { container: HTMLDivElement; blockEditor: BlockEditor }) {
-  const { hoverBlock, ref } = useBlockSideTools(props);
+export default function BlockSideTools(props: { container: HTMLDivElement }) {
+  const { nodeId, ref, handleAddClick } = useBlockSideTools(props);
 
-  if (!hoverBlock) return null;
+  if (!nodeId) return null;
   return (
-    <Portal blockId={hoverBlock}>
+    <Portal blockId={nodeId}>
       <div
         ref={ref}
         style={{
@@ -25,7 +24,7 @@ export default function BlockSideTools(props: { container: HTMLDivElement; block
           e.preventDefault();
         }}
       >
-        <IconButton sx={sx}>
+        <IconButton onClick={() => handleAddClick()} sx={sx}>
           <AddIcon />
         </IconButton>
         <IconButton sx={sx}>

frontend/appflowy_tauri/src/appflowy_app/components/document/CodeBlock/index.tsx

@@ -0,0 +1,3 @@
+export default function CodeBlock({ id }: { id: string }) {
+  return <div>{id}</div>;
+}

frontend/appflowy_tauri/src/appflowy_app/components/block/ColumnBlock/index.tsx → frontend/appflowy_tauri/src/appflowy_app/components/document/ColumnBlock/index.tsx

@@ -1,17 +1,7 @@
 import React from 'react';
-import { TreeNode } from '@/appflowy_app/block_editor/view/tree_node';
+import NodeComponent from '../Node';
 
-import BlockComponent from '../BlockComponent';
-
-export default function ColumnBlock({
-  node,
-  resizerWidth,
-  index,
-}: {
-  node: TreeNode;
-  resizerWidth: number;
-  index: number;
-}) {
+export default function ColumnBlock({ id, index, width }: { id: string; index: number; width: string }) {
   const renderResizer = () => {
     return (
       <div className={`relative w-[46px] flex-shrink-0 flex-grow-0 transition-opacity`} style={{ opacity: 0 }}></div>
@@ -35,15 +25,14 @@ export default function ColumnBlock({
         renderResizer()
       )}
 
-      <BlockComponent
+      <NodeComponent
         className={`column-block py-3`}
         style={{
           flexGrow: 0,
           flexShrink: 0,
-          width: `calc((100% - ${resizerWidth}px) * ${node.data.ratio})`,
+          width,
         }}
-        node={node}
-        renderChild={(item) => <BlockComponent key={item.id} node={item} />}
+        id={id}
       />
     </>
   );

frontend/appflowy_tauri/src/appflowy_app/components/document/DocumentTitle/DocumentTitle.hooks.ts

@@ -1,7 +1,8 @@
 import { useSubscribeNode } from '../_shared/SubscribeNode.hooks';
 export function useDocumentTitle(id: string) {
-  const { node } = useSubscribeNode(id);
+  const { node, delta } = useSubscribeNode(id);
   return {
-    node
+    node,
+    delta
   }
 }

frontend/appflowy_tauri/src/appflowy_app/components/document/DocumentTitle/index.tsx

@@ -3,12 +3,11 @@ import { useDocumentTitle } from './DocumentTitle.hooks';
 import TextBlock from '../TextBlock';
 
 export default function DocumentTitle({ id }: { id: string }) {
-  const { node } = useDocumentTitle(id);
+  const { node, delta } = useDocumentTitle(id);
   if (!node) return null;
-
   return (
     <div data-block-id={node.id} className='doc-title relative pt-[50px] text-4xl font-bold'>
-      <TextBlock placeholder='Untitled' childIds={[]} node={node} />
+      <TextBlock placeholder='Untitled' childIds={[]} delta={delta || []} node={node} />
     </div>
   );
 }

frontend/appflowy_tauri/src/appflowy_app/components/document/HeadingBlock/index.tsx

@@ -0,0 +1,17 @@
+import TextBlock from '../TextBlock';
+import { Node } from '@/appflowy_app/stores/reducers/document/slice';
+import { TextDelta } from '@/appflowy_app/interfaces/document';
+
+const fontSize: Record<string, string> = {
+  1: 'mt-8 text-3xl',
+  2: 'mt-6 text-2xl',
+  3: 'mt-4 text-xl',
+};
+
+export default function HeadingBlock({ node, delta }: { node: Node; delta: TextDelta[] }) {
+  return (
+    <div className={`${fontSize[node.data.style?.level]} font-semibold	`}>
+      <TextBlock node={node} childIds={[]} delta={delta} />
+    </div>
+  );
+}

frontend/appflowy_tauri/src/appflowy_app/components/document/HoveringToolbar/index.hooks.ts

@@ -11,7 +11,7 @@ export function useHoveringToolbar(id: string) {
   useEffect(() => {
     const el = ref.current;
     if (!el) return;
-    const nodeRect = document.querySelector(`[data-block-id=${id}]`)?.getBoundingClientRect();
+    const nodeRect = document.querySelector(`[data-block-id="${id}"]`)?.getBoundingClientRect();
 
     if (!nodeRect) return;
     const position = calcToolbarPosition(editor, el, nodeRect);

frontend/appflowy_tauri/src/appflowy_app/components/block/ListBlock/BulletedListBlock.tsx → frontend/appflowy_tauri/src/appflowy_app/components/document/ListBlock/BulletedListBlock.tsx

@@ -1,9 +1,16 @@
+import { Node } from '@/appflowy_app/stores/reducers/document/slice';
 import { Circle } from '@mui/icons-material';
+import NodeComponent from '../Node';
 
-import BlockComponent from '../BlockComponent';
-import { TreeNode } from '@/appflowy_app/block_editor/view/tree_node';
-
-export default function BulletedListBlock({ title, node }: { title: JSX.Element; node: TreeNode }) {
+export default function BulletedListBlock({
+  title,
+  node,
+  childIds,
+}: {
+  title: JSX.Element;
+  node: Node;
+  childIds?: string[];
+}) {
   return (
     <div className='bulleted-list-block relative'>
       <div className='relative flex'>
@@ -14,10 +21,8 @@ export default function BulletedListBlock({ title, node }: { title: JSX.Element;
       </div>
 
       <div className='pl-[24px]'>
-        {node.children?.map((item) => (
-          <div key={item.id}>
-            <BlockComponent node={item} />
-          </div>
+        {childIds?.map((item) => (
+          <NodeComponent key={item} id={item} />
         ))}
       </div>
     </div>

frontend/appflowy_tauri/src/appflowy_app/components/document/ListBlock/ColumnListBlock.tsx

@@ -0,0 +1,23 @@
+import React, { useMemo } from 'react';
+import ColumnBlock from '../ColumnBlock';
+import { Node } from '@/appflowy_app/stores/reducers/document/slice';
+
+export default function ColumnListBlock({ node, childIds }: { node: Node; childIds?: string[] }) {
+  const resizerWidth = useMemo(() => {
+    return 46 * (node.children?.length || 0);
+  }, [node.children?.length]);
+  return (
+    <>
+      <div className='column-list-block flex-grow-1 flex flex-row'>
+        {childIds?.map((item, index) => (
+          <ColumnBlock
+            key={item}
+            index={index}
+            width={`calc((100% - ${resizerWidth}px) * ${node.data.style?.ratio})`}
+            id={item}
+          />
+        ))}
+      </div>
+    </>
+  );
+}

frontend/appflowy_tauri/src/appflowy_app/components/document/ListBlock/NumberedListBlock.tsx

@@ -0,0 +1,30 @@
+import { Node } from '@/appflowy_app/stores/reducers/document/slice';
+import NodeComponent from '../Node';
+
+export default function NumberedListBlock({
+  title,
+  node,
+  childIds,
+}: {
+  title: JSX.Element;
+  node: Node;
+  childIds?: string[];
+}) {
+  const index = 1;
+  return (
+    <div className='numbered-list-block'>
+      <div className='relative flex'>
+        <div
+          className={`relative flex h-[calc(1.5em_+_3px_+_3px)] min-w-[24px] max-w-[24px] select-none items-center`}
+        >{`${index} .`}</div>
+        {title}
+      </div>
+
+      <div className='pl-[24px]'>
+        {childIds?.map((item) => (
+          <NodeComponent key={item} id={item} />
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/appflowy_tauri/src/appflowy_app/components/block/ListBlock/index.tsx → frontend/appflowy_tauri/src/appflowy_app/components/document/ListBlock/index.tsx

@@ -3,28 +3,28 @@ import TextBlock from '../TextBlock';
 import NumberedListBlock from './NumberedListBlock';
 import BulletedListBlock from './BulletedListBlock';
 import ColumnListBlock from './ColumnListBlock';
-import { TreeNode } from '@/appflowy_app/block_editor/view/tree_node';
-import { BlockCommonProps } from '@/appflowy_app/interfaces';
+import { Node } from '@/appflowy_app/stores/reducers/document/slice';
+import { TextDelta } from '@/appflowy_app/interfaces/document';
 
-export default function ListBlock({ node, version }: BlockCommonProps<TreeNode>) {
+export default function ListBlock({ node, delta }: { node: Node; delta: TextDelta[] }) {
   const title = useMemo(() => {
-    if (node.data.type === 'column') return <></>;
+    if (node.data.style?.type === 'column') return <></>;
     return (
       <div className='flex-1'>
-        <TextBlock version={version} node={node} needRenderChildren={false} />
+        <TextBlock delta={delta} node={node} childIds={[]} />
       </div>
     );
-  }, [node, version]);
+  }, [node, delta]);
 
-  if (node.data.type === 'numbered') {
+  if (node.data.style?.type === 'numbered') {
     return <NumberedListBlock title={title} node={node} />;
   }
 
-  if (node.data.type === 'bulleted') {
+  if (node.data.style?.type === 'bulleted') {
     return <BulletedListBlock title={title} node={node} />;
   }
 
-  if (node.data.type === 'column') {
+  if (node.data.style?.type === 'column') {
     return <ColumnListBlock node={node} />;
   }
 

frontend/appflowy_tauri/src/appflowy_app/components/document/Node/Node.hooks.ts

@@ -1,11 +1,36 @@
 
+import { useEffect, useRef } from 'react';
 import { useSubscribeNode } from '../_shared/SubscribeNode.hooks';
+import { useAppDispatch } from '$app/stores/store';
+import { documentActions } from '$app/stores/reducers/document/slice';
 
 export function useNode(id: string) {
-  const { node, childIds } = useSubscribeNode(id);
+  const { node, childIds, delta, isSelected } = useSubscribeNode(id);
+  const ref = useRef<HTMLDivElement>(null);
 
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    if (!ref.current) return;
+    const rect = ref.current.getBoundingClientRect();
+
+    const scrollContainer = document.querySelector('.doc-scroller-container') as HTMLDivElement;
+    dispatch(documentActions.updateNodePosition({
+      id,
+      rect: {
+        x: rect.x,
+        y: rect.y + scrollContainer.scrollTop,
+        height: rect.height,
+        width: rect.width
+      }
+    }))
+  }, [])
+  
   return {
+    ref,
     node,
     childIds,
+    delta,
+    isSelected
   }
 }

frontend/appflowy_tauri/src/appflowy_app/components/document/Node/index.tsx

@@ -4,14 +4,17 @@ import { withErrorBoundary } from 'react-error-boundary';
 import { ErrorBoundaryFallbackComponent } from '../_shared/ErrorBoundaryFallbackComponent';
 import { Node } from '@/appflowy_app/stores/reducers/document/slice';
 import TextBlock from '../TextBlock';
+import { TextDelta } from '@/appflowy_app/interfaces/document';
 
-function NodeComponent({ id }: { id: string }) {
-  const { node, childIds } = useNode(id);
+function NodeComponent({ id, ...props }: { id: string } & React.HTMLAttributes<HTMLDivElement>) {
+  const { node, childIds, delta, isSelected, ref } = useNode(id);
 
-  const renderBlock = useCallback((props: { node: Node; childIds?: string[] }) => {
-    switch (props.node.type) {
+  console.log('=====', id);
+  const renderBlock = useCallback((_props: { node: Node; childIds?: string[]; delta?: TextDelta[] }) => {
+    switch (_props.node.type) {
       case 'text':
-        return <TextBlock {...props} />;
+        if (!_props.delta) return null;
+        return <TextBlock {..._props} delta={_props.delta} />;
       default:
         break;
     }
@@ -20,12 +23,14 @@ function NodeComponent({ id }: { id: string }) {
   if (!node) return null;
 
   return (
-    <div data-block-id={node.id} className='relative my-[1px]'>
+    <div {...props} ref={ref} data-block-id={node.id} className={`relative my-[2px] px-[2px] ${props.className}`}>
       {renderBlock({
         node,
         childIds,
+        delta,
       })}
       <div className='block-overlay' />
+      {isSelected ? <div className='pointer-events-none absolute inset-0 z-[-1] rounded-[4px] bg-[#E0F8FF]' /> : null}
     </div>
   );
 }

frontend/appflowy_tauri/src/appflowy_app/components/document/Overlay/index.tsx

@@ -0,0 +1,13 @@
+import React, { useState } from 'react';
+import BlockSideTools from '../BlockSideTools';
+import BlockSelection from '../BlockSelection';
+
+export default function Overlay({ container }: { container: HTMLDivElement }) {
+  const [isDragging, setDragging] = useState(false);
+  return (
+    <>
+      {isDragging ? null : <BlockSideTools container={container} />}
+      <BlockSelection onDragging={setDragging} container={container} />
+    </>
+  );
+}

frontend/appflowy_tauri/src/appflowy_app/components/document/Root/Tree.hooks.tsx

@@ -1,60 +1,20 @@
 import { useEffect } from 'react';
-import { DocumentData, NestedBlock } from '$app/interfaces/document';
+import { DocumentData } from '$app/interfaces/document';
 import { useAppDispatch } from '@/appflowy_app/stores/store';
-import { documentActions, Node } from '$app/stores/reducers/document/slice';
+import { documentActions } from '$app/stores/reducers/document/slice';
 
 export function useParseTree(documentData: DocumentData) {
   const dispatch = useAppDispatch();
-  const { blocks, ytexts, yarrays, rootId } = documentData;
-  const flattenNestedBlocks = (
-    block: NestedBlock
-  ): (Node & {
-    children: string[];
-  })[] => {
-    const node: Node & {
-      children: string[];
-    } = {
-      id: block.id,
-      delta: ytexts[block.data.text],
-      data: block.data,
-      type: block.type,
-      parent: block.parent,
-      children: yarrays[block.children],
-    };
-
-    const nodes = [node];
-    node.children.forEach((child) => {
-      const childBlock = blocks[child];
-      nodes.push(...flattenNestedBlocks(childBlock));
-    });
-    return nodes;
-  };
-
-  const initializeNodeHierarchy = (parentId: string, children: string[]) => {
-    children.forEach((childId) => {
-      dispatch(documentActions.addChild({ parentId, childId }));
-      const child = blocks[childId];
-      initializeNodeHierarchy(childId, yarrays[child.children]);
-    });
-  };
+  const { blocks, ytexts, yarrays } = documentData;
 
   useEffect(() => {
-    const root = documentData.blocks[rootId];
-
-    const initialNodes = flattenNestedBlocks(root);
-
-    initialNodes.forEach((node) => {
-      const _node = {
-        id: node.id,
-        parent: node.parent,
-        data: node.data,
-        type: node.type,
-        delta: node.delta,
-      };
-      dispatch(documentActions.addNode(_node));
-    });
-
-    initializeNodeHierarchy(rootId, yarrays[root.children]);
+    dispatch(
+      documentActions.createTree({
+        nodes: blocks,
+        delta: ytexts,
+        children: yarrays,
+      })
+    );
 
     return () => {
       dispatch(documentActions.clear());

frontend/appflowy_tauri/src/appflowy_app/components/document/TextBlock/BindYjs.hooks.ts

@@ -46,8 +46,7 @@ export function useBindYjs(delta: TextDelta[], update: (_delta: Delta) => void)
     if (!yText) return;
 
     const textEventHandler = (event: Y.YTextEvent) => {
-      console.log(event.delta, event.target.toDelta());
-      update(event.delta as Delta);
+      update(event.changes.delta as Delta);
     }
     yText.applyDelta(delta);
     yText.observe(textEventHandler);

frontend/appflowy_tauri/src/appflowy_app/components/document/TextBlock/TextBlock.hooks.ts

@@ -1,29 +1,65 @@
 import { triggerHotkey } from "@/appflowy_app/utils/slate/hotkey";
-import { useCallback, useContext, useState } from "react";
+import { useCallback, useContext, useMemo, useRef, useState } from "react";
 import { Descendant, Range } from "slate";
 import { useBindYjs } from "./BindYjs.hooks";
 import { YDocControllerContext } from '../../../stores/effects/document/document_controller';
 import { Delta } from "@slate-yjs/core/dist/model/types";
 import { TextDelta } from '../../../interfaces/document';
+import { debounce } from "@/appflowy_app/utils/tool";
 
 function useController(textId: string) {
   const docController = useContext(YDocControllerContext);
-  
+
   const update  = useCallback(
     (delta: Delta) => {
       docController?.yTextApply(textId, delta)
     },
     [textId],
+  );
+  const transact = useCallback(
+    (actions: (() => void)[]) => {
+      docController?.transact(actions)
+    },
+    [textId],
+  )
+  
+  return {
+    update,
+    transact
+  }
+}
+
+function useTransact(textId: string) {
+  const pendingActions = useRef<(() => void)[]>([]);
+  const { update, transact } = useController(textId);
+
+  const sendTransact = useCallback(
+    () => {
+      const actions = pendingActions.current;
+      transact(actions);
+    },
+    [transact],
   )
   
+  const debounceSendTransact = useMemo(() => debounce(sendTransact, 300), [transact]);
+
+  const sendDelta = useCallback(
+    (delta: Delta) => {
+      const action = () => update(delta);
+      pendingActions.current.push(action);
+      debounceSendTransact()
+    },
+    [update, debounceSendTransact],
+  );
   return {
-    update
+    sendDelta
   }
 }
 
 export function useTextBlock(text: string, delta: TextDelta[]) {
-  const { update } = useController(text);
-  const { editor } = useBindYjs(delta, update);
+  const { sendDelta } = useTransact(text);
+
+  const { editor } = useBindYjs(delta, sendDelta);
   const [value, setValue] = useState<Descendant[]>([]);
   
   const onChange = useCallback(

frontend/appflowy_tauri/src/appflowy_app/components/document/TextBlock/index.tsx

@@ -4,21 +4,25 @@ import { useTextBlock } from './TextBlock.hooks';
 import { Node } from '@/appflowy_app/stores/reducers/document/slice';
 import NodeComponent from '../Node';
 import HoveringToolbar from '../HoveringToolbar';
+import { TextDelta } from '@/appflowy_app/interfaces/document';
+import React from 'react';
 
-export default function TextBlock({
+function TextBlock({
   node,
   childIds,
   placeholder,
+  delta,
   ...props
 }: {
   node: Node;
+  delta: TextDelta[];
   childIds?: string[];
   placeholder?: string;
 } & React.HTMLAttributes<HTMLDivElement>) {
-  const { editor, value, onChange, onKeyDownCapture, onDOMBeforeInput } = useTextBlock(node.data.text!, node.delta);
+  const { editor, value, onChange, onKeyDownCapture, onDOMBeforeInput } = useTextBlock(node.data.text!, delta);
 
   return (
-    <div {...props} className={props.className}>
+    <div {...props} className={`py-[2px] ${props.className}`}>
       <Slate editor={editor} onChange={onChange} value={value}>
         <HoveringToolbar id={node.id} />
         <Editable
@@ -38,3 +42,5 @@ export default function TextBlock({
     </div>
   );
 }
+
+export default React.memo(TextBlock);

frontend/appflowy_tauri/src/appflowy_app/components/document/VirtualizerList/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { useVirtualizerList } from './VirtualizerList.hooks';
 import { Node } from '@/appflowy_app/stores/reducers/document/slice';
 import DocumentTitle from '../DocumentTitle';
+import Overlay from '../Overlay';
 
 export default function VirtualizerList({
   childIds,
@@ -17,36 +18,42 @@ export default function VirtualizerList({
   const virtualItems = rowVirtualizer.getVirtualItems();
 
   return (
-    <div ref={parentRef} className={`doc-scroller-container flex h-[100%] flex-wrap justify-center overflow-auto px-20`}>
+    <>
       <div
-        className='doc-body max-w-screen w-[900px] min-w-0'
-        style={{
-          height: rowVirtualizer.getTotalSize(),
-          position: 'relative',
-        }}
+        ref={parentRef}
+        className={`doc-scroller-container flex h-[100%] flex-wrap justify-center overflow-auto px-20`}
       >
-        {node && childIds && virtualItems.length ? (
-          <div
-            style={{
-              position: 'absolute',
-              top: 0,
-              left: 0,
-              width: '100%',
-              transform: `translateY(${virtualItems[0].start || 0}px)`,
-            }}
-          >
-            {virtualItems.map((virtualRow) => {
-              const id = childIds[virtualRow.index];
-              return (
-                <div className='p-[1px]' key={id} data-index={virtualRow.index} ref={rowVirtualizer.measureElement}>
-                  {virtualRow.index === 0 ? <DocumentTitle id={node.id} /> : null}
-                  {renderNode(id)}
-                </div>
-              );
-            })}
-          </div>
-        ) : null}
+        <div
+          className='doc-body max-w-screen w-[900px] min-w-0'
+          style={{
+            height: rowVirtualizer.getTotalSize(),
+            position: 'relative',
+          }}
+        >
+          {node && childIds && virtualItems.length ? (
+            <div
+              style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                transform: `translateY(${virtualItems[0].start || 0}px)`,
+              }}
+            >
+              {virtualItems.map((virtualRow) => {
+                const id = childIds[virtualRow.index];
+                return (
+                  <div className='p-[1px]' key={id} data-index={virtualRow.index} ref={rowVirtualizer.measureElement}>
+                    {virtualRow.index === 0 ? <DocumentTitle id={node.id} /> : null}
+                    {renderNode(id)}
+                  </div>
+                );
+              })}
+            </div>
+          ) : null}
+        </div>
       </div>
-    </div>
+      {parentRef.current ? <Overlay container={parentRef.current} /> : null}
+    </>
   );
 }

frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SubscribeNode.hooks.ts

@@ -1,16 +1,32 @@
 import { Node } from '@/appflowy_app/stores/reducers/document/slice';
 import { useAppSelector } from '@/appflowy_app/stores/store';
 import { useMemo } from 'react';
+import { TextDelta } from '@/appflowy_app/interfaces/document';
 
 export function useSubscribeNode(id: string) {
-  const node = useAppSelector<Node | undefined>(state => state.document.nodes[id]);
-  const childIds = useAppSelector<string[] | undefined>(state => state.document.children[id]);
+  const node = useAppSelector<Node>(state => state.document.nodes[id]);
+  const childIds = useAppSelector<string[] | undefined>(state => {
+    const childrenId = state.document.nodes[id]?.children;
+    if (!childrenId) return;
+    return state.document.children[childrenId];
+  });
+  const delta = useAppSelector<TextDelta[] | undefined>(state => {
+    const deltaId = state.document.nodes[id]?.data?.text;
+    if (!deltaId) return;
+    return state.document.delta[deltaId];
+  });
+  const isSelected = useAppSelector<boolean>(state => {
+    return state.document.selections?.includes(id) || false;
+  });
 
-  const memoizedNode = useMemo(() => node, [node?.id, node?.data, node?.type]);
+  const memoizedNode = useMemo(() => node, [node?.id, node?.data, node?.parent, node?.type, node?.children]);
   const memoizedChildIds = useMemo(() => childIds, [JSON.stringify(childIds)]);
-
+  const memoizedDelta = useMemo(() => delta, [JSON.stringify(delta)]);
+  
   return {
     node: memoizedNode,
-    childIds: memoizedChildIds
-  }
+    childIds: memoizedChildIds,
+    delta: memoizedDelta,
+    isSelected
+  };
 }

frontend/appflowy_tauri/src/appflowy_app/stores/effects/document/document_controller.ts

@@ -1,8 +1,9 @@
 import * as Y from 'yjs';
 import { IndexeddbPersistence } from 'y-indexeddb';
 import { v4 } from 'uuid';
-import { DocumentData } from '@/appflowy_app/interfaces/document';
+import { DocumentData, NestedBlock } from '@/appflowy_app/interfaces/document';
 import { createContext } from 'react';
+import { BlockType } from '@/appflowy_app/interfaces';
 
 export type DeltaAttributes = {
   retain: number;
@@ -21,6 +22,7 @@ export type Delta = Array<
   DeltaRetain | DeltaDelete | DeltaInsert | DeltaAttributes
 >;
 
+
 export const YDocControllerContext = createContext<YDocController | null>(null);
 
 export class YDocController {
@@ -30,6 +32,12 @@ export class YDocController {
   constructor(private id: string) {
     this._ydoc = new Y.Doc();
     this.provider = new IndexeddbPersistence(`document-${this.id}`, this._ydoc);
+    this._ydoc.on('update', this.handleUpdate);
+  }
+
+  handleUpdate = (update: Uint8Array, origin: any) => {
+    const isLocal = origin === null;
+    Y.logUpdate(update);
   }
 
 
@@ -83,9 +91,7 @@ export class YDocController {
   open = async (): Promise<DocumentData> => {
     await this.provider.whenSynced;
     const ydoc = this._ydoc;
-    ydoc.on('updateV2', (update) => {
-      console.log('======', update);
-    })
+    
     const blocks = ydoc.getMap('blocks');
     const obj: DocumentData = {
       rootId: ydoc.getArray<string>('root').toArray()[0] || '',
@@ -93,28 +99,96 @@ export class YDocController {
       ytexts: {},
       yarrays: {}
     };
+    
     Object.keys(obj.blocks).forEach(key => {
       const value = obj.blocks[key];
       if (value.children) {
+        const yarray = ydoc.getArray<string>(value.children);
         Object.assign(obj.yarrays, {
-          [value.children]: ydoc.getArray(value.children).toArray()
+          [value.children]: yarray.toArray()
         });
       }
       if (value.data.text) {
+        const ytext = ydoc.getText(value.data.text);
         Object.assign(obj.ytexts, {
-          [value.data.text]: ydoc.getText(value.data.text).toDelta()
+          [value.data.text]: ytext.toDelta()
         })
       }
     });
+
+    blocks.observe(this.handleBlocksEvent);
     return obj;
   }
 
+  insert(node: {
+    id: string,
+    type: BlockType,
+    delta?: Delta
+  }, parentId: string, prevId: string) {
+    const blocks = this._ydoc.getMap<NestedBlock>('blocks');
+    const parent = blocks.get(parentId);
+    if (!parent) return;
+    const insertNode =  {
+      id: node.id,
+      type: node.type,
+      data: {
+        text: ''
+      },
+      children: '',
+      parent: ''
+    }
+    // create ytext
+    if (node.delta) {
+      const ytextId = v4();
+      const ytext = this._ydoc.getText(ytextId);
+      ytext.applyDelta(node.delta);
+      insertNode.data.text = ytextId;
+    }
+    // create children
+    const yArrayId = v4();
+    this._ydoc.getArray(yArrayId);
+    insertNode.children = yArrayId;
+    // insert in parent's children
+    const children = this._ydoc.getArray(parent.children);
+    const index = children.toArray().indexOf(prevId) + 1;
+    children.insert(index, [node.id]);
+    insertNode.parent = parentId;
+    // set in blocks
+    this._ydoc.getMap('blocks').set(node.id, insertNode);
+  }
+
+  transact(actions: (() => void)[]) {
+    const ydoc = this._ydoc;
+    console.log('====transact')
+    ydoc.transact(() => {
+      actions.forEach(action => {
+        action();
+      });
+    });
+  }
 
   yTextApply = (yTextId: string, delta: Delta) => {
-    console.log("====", yTextId, delta);
     const ydoc = this._ydoc;
     const ytext = ydoc.getText(yTextId);
     ytext.applyDelta(delta);
+    console.log("====", yTextId, delta);
+  }
+
+  close = () => {
+    const blocks = this._ydoc.getMap('blocks');
+    blocks.unobserve(this.handleBlocksEvent);
+  }
+
+  private handleBlocksEvent = (mapEvent: Y.YMapEvent<unknown>) => {
+    console.log(mapEvent.changes);
+  }
+
+  private handleTextEvent = (textEvent: Y.YTextEvent) => {
+    console.log(textEvent.changes);
+  }
+
+  private handleArrayEvent = (arrayEvent: Y.YArrayEvent<string>) => {
+    console.log(arrayEvent.changes);
   }
 
 }

frontend/appflowy_tauri/src/appflowy_app/block_editor/view/region_grid.ts → frontend/appflowy_tauri/src/appflowy_app/stores/reducers/document/region_grid.ts

@@ -14,6 +14,7 @@ interface BlockRegion {
 export class RegionGrid {
   private regions: BlockRegion[][];
   private regionSize: number;
+  private blocks = new Map();
 
   constructor(regionSize: number) {
     this.regionSize = regionSize;
@@ -36,9 +37,22 @@ export class RegionGrid {
       }
       this.regions[regionY][regionX] = region;
     }
-
+    this.blocks.set(blockPosition.id, blockPosition);
     region.blocks.push(blockPosition);
   }
+
+  updateBlock(blockId: string, position: BlockPosition) {
+    const prevPosition = this.blocks.get(blockId);
+    if (prevPosition && prevPosition.x === position.x &&
+      prevPosition.y === position.y &&
+      prevPosition.height === position.height &&
+      prevPosition.width === position.width) {
+      return;
+    }
+    this.blocks.set(blockId, position);
+    this.removeBlock(blockId);
+    this.addBlock(position);
+  }
   
   removeBlock(blockId: string) {
     for (const rows of this.regions) {
@@ -51,6 +65,7 @@ export class RegionGrid {
         }
       }
     }
+    this.blocks.delete(blockId);
   }
   
 

frontend/appflowy_tauri/src/appflowy_app/stores/reducers/document/slice.ts

@@ -1,24 +1,32 @@
 import { BlockType, TextDelta } from "@/appflowy_app/interfaces/document";
 import { PayloadAction, createSlice } from "@reduxjs/toolkit";
+import { RegionGrid } from "./region_grid";
 
 export interface Node {
   id: string;
-  parent: string | null;
   type: BlockType;
-  selected?: boolean;
-  delta: TextDelta[];
   data: {
     text?: string;
+    style?: Record<string, any>
   };
+  parent: string | null;
+  children: string;
 }
 
-export type NodeState = {
+export interface NodeState {
   nodes: Record<string, Node>;
   children: Record<string, string[]>;
-};
+  delta: Record<string, TextDelta[]>;
+  selections: string[];
+}
+
+const regionGrid = new RegionGrid(50);
+
 const initialState: NodeState = {
   nodes: {},
   children: {},
+  delta: {},
+  selections: [],
 };
 
 export const documentSlice = createSlice({
@@ -28,34 +36,68 @@ export const documentSlice = createSlice({
     clear: (state, action: PayloadAction) => {
       return initialState;
     },
-    addNode: (state, action: PayloadAction<Node>) => {
-      state.nodes[action.payload.id] = action.payload;
+
+    createTree: (state, action: PayloadAction<{
+      nodes: Record<string, Node>;
+      children: Record<string, string[]>;
+      delta: Record<string, TextDelta[]>;
+    }>) => {
+      const { nodes, children, delta } = action.payload;
+      state.nodes = nodes;
+      state.children = children;
+      state.delta = delta;
     },
-    addChild: (state, action: PayloadAction<{ parentId: string, childId: string }>) => {
-      const children = state.children[action.payload.parentId];
-      if (children) {
-        children.push(action.payload.childId);
-      } else {
-        state.children[action.payload.parentId] = [action.payload.childId]
-      }
+
+    updateSelections: (state, action: PayloadAction<string[]>) => {
+      state.selections = action.payload;
     },
 
-    updateNode: (state, action: PayloadAction<{id: string; parent?: string; type?: BlockType; data?: any }>) => {
+    changeSelectionByIntersectRect: (state, action: PayloadAction<{
+      startX: number;
+      startY: number;
+      endX: number;
+      endY: number
+    }>) => {
+      const { startX, startY, endX, endY } = action.payload;
+      const blocks = regionGrid.getIntersectBlocks(startX, startY, endX, endY);
+      state.selections = blocks.map(block => block.id);
+    },
+
+    updateNodePosition: (state, action: PayloadAction<{id: string; rect: {
+      x: number;
+      y: number;
+      width: number;
+      height: number;
+    }}>) => {
+      const { id, rect } = action.payload;
+      const position = {
+        id,
+        ...rect
+      };
+      regionGrid.updateBlock(id, position);
+    },
+
+    updateNode: (state, action: PayloadAction<{id: string; type?: BlockType; data?: any }>) => {
       state.nodes[action.payload.id] = {
         ...state.nodes[action.payload.id],
         ...action.payload
       }
     },
-
     removeNode: (state, action: PayloadAction<string>) => {
-      const parentId = state.nodes[action.payload].parent;
-      delete state.nodes[action.payload];
-      if (parentId) {
-        const index = state.children[parentId].indexOf(action.payload);
+      const { children, data, parent } = state.nodes[action.payload];
+      if (parent) {
+        const index = state.children[state.nodes[parent].children].indexOf(action.payload);
         if (index > -1) {
-          state.children[parentId].splice(index, 1);
+          state.children[state.nodes[parent].children].splice(index, 1);
         }
       }
+      if (children) {
+        delete state.children[children];
+      }
+      if (data && data.text) {
+        delete state.delta[data.text];
+      }
+      delete state.nodes[action.payload];
     },
   },
 });

frontend/appflowy_tauri/src/appflowy_app/utils/block.ts

@@ -1,34 +0,0 @@
-
-import { createContext } from 'react';
-import { ulid } from "ulid";
-import { BlockEditor } from '../block_editor/index';
-import { BlockType } from '../interfaces';
-
-export const BlockContext = createContext<{
-  id?: string;
-  blockEditor?: BlockEditor;
-}>({});
-
-
-export function generateBlockId() {
-  const blockId = ulid()
-  return `block-id-${blockId}`;
-}
-
-const AVERAGE_BLOCK_HEIGHT = 30;
-export function calculateViewportBlockMaxCount() {
-  const viewportHeight = window.innerHeight;
-  const viewportBlockCount = Math.ceil(viewportHeight / AVERAGE_BLOCK_HEIGHT);
-
-  return viewportBlockCount;
-}
-
-
-export interface NestedNode {
-  id: string;
-  children: string;
-  parent: string | null;
-  type: BlockType;
-  data: any;
-}
-