[PR #2671] [MERGED] Refactor text block delta and across block selection #5358

New issue

Closed

opened 2026-03-23 22:18:23 +00:00 by mirror · 0 comments

mirror commented

2026-03-23 22:18:23 +00:00

Owner

📋 Pull Request Information

Original PR: https://github.com/AppFlowy-IO/AppFlowy/pull/2671
Author: @qinluhe
Created: 5/31/2023
Status: ✅ Merged
Merged: 6/2/2023
Merged by: @qinluhe

Base: develop ← Head: refactor/text-block-delta

📝 Commits (2)

aae01bd fix: add block menu comment
a23727b refactor: separation of abstract delta and editor, and optimization across block selections

📊 Changes

99 files changed (+3497 additions, -2636 deletions)

View changed files

📝 frontend/appflowy_tauri/package.json (+6 -2)
📝 frontend/appflowy_tauri/pnpm-lock.yaml (+143 -21)
📝 frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSelection/BlockRangeSelection.hooks.ts (+106 -40)
📝 frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSelection/BlockRectSelection.hooks.ts (+8 -5)
📝 frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSelection/BlockRectSelection.tsx (+6 -5)
➕ frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSelection/RangeKeyDown.hooks.ts (+119 -0)
📝 frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSelection/index.tsx (+4 -1)
📝 frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSideToolbar/BlockMenu.tsx (+14 -5)
📝 frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSideToolbar/BlockMenuTurnInto.tsx (+1 -0)
📝 frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSideToolbar/BlockSideToolbar.hooks.tsx (+7 -9)
📝 frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSideToolbar/index.tsx (+2 -4)
📝 frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSlash/BlockSlashMenu.tsx (+6 -0)
📝 frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSlash/index.hooks.ts (+2 -2)
➖ frontend/appflowy_tauri/src/appflowy_app/components/document/CodeBlock/CodeBlock.hooks.ts (+0 -86)
📝 frontend/appflowy_tauri/src/appflowy_app/components/document/CodeBlock/SelectLanguage.tsx (+6 -1)
📝 frontend/appflowy_tauri/src/appflowy_app/components/document/CodeBlock/index.tsx (+18 -20)
➕ frontend/appflowy_tauri/src/appflowy_app/components/document/CodeBlock/useKeyDown.ts (+51 -0)
📝 frontend/appflowy_tauri/src/appflowy_app/components/document/HeadingBlock/index.tsx (+1 -1)
📝 frontend/appflowy_tauri/src/appflowy_app/components/document/Node/index.tsx (+4 -2)
➕ frontend/appflowy_tauri/src/appflowy_app/components/document/Overlay/BlockOverlay.tsx (+7 -0)

...and 79 more files

📄 Description

Feature Preview

Refactor Delta and Operation

The abstraction of delta and editor separation decouples the editing operations from the specific implementation of the editor, allowing the operations to be reused in different editor environments.

Refactor Across block selection

The cross-block selection is achieved by listening to mouse events at a higher level. When the mouse cursor passes over a block, the block is focused, allowing the block itself to store the changes in the selection within that block.

Considering the scenario of virtual scrolling where nodes are destroyed and re-rendered, the cross-block selection ensures that each block is dispatched with its own selection, enabling it to redraw accordingly.

Due to the way slate.js handles the selection, there will be some interaction problems in the process of drawing the selection. The code uses some completions and hacks to solve these problems. Maybe there are other more elegant solutions?

PR Checklist

My code adheres to the AppFlowy Style Guide
I've listed at least one issue that this PR fixes in the description above.
I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes.
All existing tests are passing.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/AppFlowy-IO/AppFlowy/pull/2671 **Author:** [@qinluhe](https://github.com/qinluhe) **Created:** 5/31/2023 **Status:** ✅ Merged **Merged:** 6/2/2023 **Merged by:** [@qinluhe](https://github.com/qinluhe) **Base:** `develop` ← **Head:** `refactor/text-block-delta` --- ### 📝 Commits (2) - [`aae01bd`](https://github.com/AppFlowy-IO/AppFlowy/commit/aae01bda4cf07153053a73bfd4fcb9e4697638c8) fix: add block menu comment - [`a23727b`](https://github.com/AppFlowy-IO/AppFlowy/commit/a23727b945a7aa41be51e42891fadbb13a3221e2) refactor: separation of abstract delta and editor, and optimization across block selections ### 📊 Changes **99 files changed** (+3497 additions, -2636 deletions) <details> <summary>View changed files</summary> 📝 `frontend/appflowy_tauri/package.json` (+6 -2) 📝 `frontend/appflowy_tauri/pnpm-lock.yaml` (+143 -21) 📝 `frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSelection/BlockRangeSelection.hooks.ts` (+106 -40) 📝 `frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSelection/BlockRectSelection.hooks.ts` (+8 -5) 📝 `frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSelection/BlockRectSelection.tsx` (+6 -5) ➕ `frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSelection/RangeKeyDown.hooks.ts` (+119 -0) 📝 `frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSelection/index.tsx` (+4 -1) 📝 `frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSideToolbar/BlockMenu.tsx` (+14 -5) 📝 `frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSideToolbar/BlockMenuTurnInto.tsx` (+1 -0) 📝 `frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSideToolbar/BlockSideToolbar.hooks.tsx` (+7 -9) 📝 `frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSideToolbar/index.tsx` (+2 -4) 📝 `frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSlash/BlockSlashMenu.tsx` (+6 -0) 📝 `frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSlash/index.hooks.ts` (+2 -2) ➖ `frontend/appflowy_tauri/src/appflowy_app/components/document/CodeBlock/CodeBlock.hooks.ts` (+0 -86) 📝 `frontend/appflowy_tauri/src/appflowy_app/components/document/CodeBlock/SelectLanguage.tsx` (+6 -1) 📝 `frontend/appflowy_tauri/src/appflowy_app/components/document/CodeBlock/index.tsx` (+18 -20) ➕ `frontend/appflowy_tauri/src/appflowy_app/components/document/CodeBlock/useKeyDown.ts` (+51 -0) 📝 `frontend/appflowy_tauri/src/appflowy_app/components/document/HeadingBlock/index.tsx` (+1 -1) 📝 `frontend/appflowy_tauri/src/appflowy_app/components/document/Node/index.tsx` (+4 -2) ➕ `frontend/appflowy_tauri/src/appflowy_app/components/document/Overlay/BlockOverlay.tsx` (+7 -0) _...and 79 more files_ </details> ### 📄 Description   ### Feature Preview #### Refactor Delta and Operation The abstraction of delta and editor separation decouples the editing operations from the specific implementation of the editor, allowing the operations to be reused in different editor environments. #### Refactor Across block selection The cross-block selection is achieved by listening to mouse events at a higher level. When the mouse cursor passes over a block, the block is focused, allowing the block itself to store the changes in the selection within that block. Considering the scenario of virtual scrolling where nodes are destroyed and re-rendered, the cross-block selection ensures that each block is dispatched with its own selection, enabling it to redraw accordingly. Due to the way slate.js handles the selection, there will be some interaction problems in the process of drawing the selection. The code uses some completions and hacks to solve these problems. Maybe there are other more elegant solutions?  ---  #### PR Checklist - [ ] My code adheres to the [AppFlowy Style Guide](https://appflowy.gitbook.io/docs/essential-documentation/contribute-to-appflowy/software-contributions/submitting-code/style-guides) - [ ] I've listed at least one issue that this PR fixes in the description above. - [ ] I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes. - [ ] All existing tests are passing. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>