halo/ui/packages/editor/src
Takagi 73798e86c6
feat: add gap cursor for top-level block nodes in default editor (#6103)
#### What type of PR is this?

/kind feature
/area editor
/milestone 2.17.x

#### What this PR does / why we need it:

目前想对块级节点进行换行是一件比较困难的事情,尤其是两个相邻的块级节点之间的想插入额外的一行时更加困难。间隙光标可以解决这一问题。

为默认编辑器的顶级块节点(pos.depth = 1)增加间隙光标的功能。当 NodeType 属性 `allowGapCursor` 为 true 时,将会在目标节点上启用间隙光标的功能。间隙光标将可能出现在目标节点的左上方与右下方。

<img width="909" alt="image" src="https://github.com/halo-dev/halo/assets/31335418/fbbdc8fe-59c9-4ae3-a7c8-97a90607c785">

已知问题:
1. 对于 inlineContent 的节点,点击生成间隙光标时,光标会先出现在对应的内容上,会出现闪动的问题。
2. 在间隙光标上使用组合输入(例如中文输入)时,首个字母会被新增至新的一行。
3. CodeBlock 无法使用间隙光标(CodeBlock 自身问题,待适配)
~~4. 首行空文本无法被删除(与 Gap Cursor 问题无关,待适配  Paragraph)~~
~~5. 删除文本上方有可以添加间隙光标的块级节点时,无法触发间隙光标的 Backspace 事件(同 4,属于 Paragraph 适配问题)~~

目前已经启用此功能的节点:

- 表格
- 分栏卡片
- CodeBlock (无法生效)

#### How to test it?

测试间隙光标是否能够在表格与分栏卡片上出现。
测试间隙光标出现后,输入文本、使用快捷键等操作是否符合逻辑。
测试使用方向键调整间隙光标位置。

#### Does this PR introduce a user-facing change?
```release-note
为默认编辑器的块级节点增加间隙光标的功能。
```
2024-06-26 11:18:50 +00:00
..
components chore: organize and fix imports (#6152) 2024-06-26 10:42:50 +00:00
dev chore: organize and fix imports (#6152) 2024-06-26 10:42:50 +00:00
extensions feat: add gap cursor for top-level block nodes in default editor (#6103) 2024-06-26 11:18:50 +00:00
locales pref: improve code block styling in editor (#6089) 2024-06-18 06:00:52 +00:00
styles feat: add gap cursor for top-level block nodes in default editor (#6103) 2024-06-26 11:18:50 +00:00
tiptap chore: organize and fix imports (#6152) 2024-06-26 10:42:50 +00:00
types chore: organize and fix imports (#6152) 2024-06-26 10:42:50 +00:00
utils feat: add gap cursor for top-level block nodes in default editor (#6103) 2024-06-26 11:18:50 +00:00
index.ts chore: organize and fix imports (#6152) 2024-06-26 10:42:50 +00:00