-
Notifications
You must be signed in to change notification settings - Fork 0
/
todo
144 lines (114 loc) · 4.76 KB
/
todo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
name:? zEditor
Zeditor
# own text editor
1. Implementing Rich Text Features
Determine which rich text features are essential for your editor (e.g., bold, italic, underline, lists, links, images) and implement them systematically. This involves:
Creating toolbar components with buttons to toggle these styles.
Handling command execution to apply the selected styles to the text.
Defining commands that modify the processedProps based on the current selection and desired action.
2. Managing Editor State
The core of your editor is its internal state (processedProps), which represents the document structure. Efficiently managing this state is crucial:
Ensure that every change within the contentEditable div is captured and accurately reflected in your state.
Consider using a library like Immer for immutable state updates, which can simplify complex state manipulations.
Implement a mechanism for undo and redo actions.
3. Custom Selection and Cursor Management
While contentEditable takes care of basic cursor and selection behaviors, you may need finer control for certain features:
Track the current selection range within the editor.
Implement custom behaviors for text selection, especially if you're handling custom elements like images or embeds that require special interaction models.
4. Handling Paste Events
Pasted content can bring unwanted styles or elements into your editor:
Intercept paste events (onPaste) to sanitize the input, stripping out unsupported styles or elements and transforming the content to match your editor's model.
5. Implementing Serialization and Deserialization
For saving and loading content:
Define a serialization format for saving your editor's state to a database or file. This might be HTML, Markdown, or a custom JSON structure.
Implement deserialization logic to load and parse saved content back into your editor's state structure.
6. Accessibility and Usability
Ensure your editor is accessible and user-friendly:
Add keyboard shortcuts for common actions.
Ensure that your editor and its controls are accessible to screen readers and support keyboard navigation.
7. Optimization and Testing
Optimize performance, particularly for large documents or complex rendering logic.
Write unit and integration tests to cover key functionalities and ensure that changes don’t introduce regressions.
8. Review and Research
Continuously review your editor's design and code against best practices.
Study existing open-source editors (e.g., Slate.js, Quill, Draft.js) to understand their architectures and solutions to common problems.
action base trigger:
up / down arrow
space & enter case issue
space ?? ignore it for now?:
? ignore?
up/down interaction, space / enter is natural.
trigger expansion?
regular typing ' '
setAction --> feedback loop
consume once schema? framework?
try approach:
with / => {
type: 'dropdown',
meta: { ... data },
children: [
{
text: ''
}
]
}
void element?
=> Customized Escape, with Escape key => convert it to strign `/` plus some text?
=> need to fully customzied
popoup的默认位置,就不够自然
而且自己要考虑是放上面还是放下面——根据用户现在的位置,智能调整——》所以的跳出的内容可以scroll
/(empty) => headings, basic blocks
* interactable => headings => expand to h1 ~ h6
* basic blocks => all blocks available
/h => headings only
/h1, h2, h3, h4, h5, h6
/heading1, heading2, heading3, heading4, heading5, heading6
/heading 1, heading 2, heading 3, heading 4, heading 5, heading 6
smart match?
/p /paragraph /text
/blockquote
/list
/order list
/unordered list
/check-list
/checklist
/numbered list
/ol
/ul
/
only => default dropdown
* should be interactable..
/ + Escape = ignore this / only
slash dropdown
/p, /paragraph,
/blockquote
/list-item
/bold, /underline, /strike, /code, /heading, /link
smart match
/code-jsx
/code-js
/code-c
/code python
key tab, enter interaction, ctrl + k smart retrigger
let's say, I typed /code, then press Escape by accident
if I press ctrl + k, with cursor after it, it would smartly retrigger dropdown
select text, start with /, it could smartly retrigger dropdown
/split, (2, 3, 4, ...)
configurable, could expand, collapsed
bugfix:
with text selection, using left, right cursor is not intuitive
?
/timeline
smart collect #hash tags on meta data
/notification
database sync
color font
color background
adding drag & drop to relocate element
https://dev.to/devterminal/slatejs-dnd-kit-improving-rich-text-editor-ux-by-adding-drag-and-drop-23d3
future todo:
link的那种ctrl + k toggle不够好
应该是 {type: 'link', url: <link>, chilcren: [{text: <text>}]}
再加上 {showPopup: boolean}
然后数据库做persistence的时候, showPopup不应该保存——》没必要
读取的时候再只能赋予 {showPopup: false}的初始值这样