25/03/01

I18N/Plugin/Canvas编辑器之Rspack工程实践.md

@@ -7,12 +7,13 @@ Previously, we discussed various aspects of code design concerning `Canvas`. Now
 
 Related articles about the `Canvas` resume editor project:
 
-* [Juejin Keeps Recommending Canvas, So I Learned Canvas and Made a Resume Editor](https://juejin.cn/post/7329799331216015395)
-* [Canvas Graphic Editor - Data Structures and History (undo/redo)](https://juejin.cn/post/7331575219957366836)
-* [Canvas Graphic Editor - What Data is Actually in My Clipboard](https://juejin.cn/post/7331992322233024548)
-* [Canvas Resume Editor - Graphic Drawing and State Management (Lightweight DOM)](https://juejin.cn/spost/7354986873733333055)
-* [Canvas Resume Editor - Monorepo and Rspack Project Practice](https://juejin.cn/spost/7357349281885503500)
-* [Canvas Resume Editor - Hierarchical Rendering and Event Management Design](https://juejin.cn/spost/7376197082203684873)
+* [Juejin Keeps Recommending Canvas, So I Learned Canvas and Made a Resume Editor](./基于Canvas构建简历编辑器.md)
+* [Canvas Resume Editor - Data Structures and History (undo/redo)](./Canvas编辑器之数据结构设计.md)
+* [Canvas Resume Editor - What Data is Actually in My Clipboard](./Canvas编辑器之剪贴板数据处理.md)
+* [Canvas Resume Editor - Graphic Drawing and State Management (Lightweight DOM)](./Canvas编辑器之图形状态管理.md)
+* [Canvas Resume Editor - Monorepo and Rspack Project Practice](./Canvas编辑器之Rspack工程实践.md)
+* [Canvas Resume Editor - Hierarchical Rendering and Event Management Design](./Canvas编辑器之层级渲染事件管理.md)
+* [Canvas Resume Editor - Selected Drawing and Drag-and-Drop Multi-Selection Interaction Scheme](./Canvas编辑器之选中绘制交互方案.md)
 
 ## Pnpm+Monorepo
 Let’s start by discussing why we should use `monorepo`. To illustrate, I’ll reference a pitfall I encountered before. In my previous rich-text editor project, [DocEditor](https://github.com/WindrunnerMax/DocEditor), everything was written in a single independent `src` directory. There were no issues during the project’s operation, but I wanted to extract the editor as an `NPM` package. The bundling process using `Rollup` was fine, but the problems arose during the referencing. When I tried to incorporate the document editor's `NPM` package into the resume editor, I discovered that a module had been incorrectly `TreeShaken`. You can still see this compatibility issue in the editor.

I18N/Plugin/Canvas编辑器之剪贴板数据处理.md

@@ -7,12 +7,13 @@ Let's discuss how we should handle the clipboard, specifically dealing with copy
 
 Articles related to the `Canvas` resume editor project:
 
-* [Got Pushed Towards Canvas by Juejin, So I Learned and Made a Resume Editor](https://juejin.cn/post/7329799331216015395)
-* [Canvas Graphic Editor - Data Structure and History (undo/redo)](https://juejin.cn/post/7331575219957366836)
-* [Canvas Graphic Editor - What's in My Clipboard?](https://juejin.cn/post/7331992322233024548)
-* [Canvas Resume Editor - Graphic Drawing and State Management (Lightweight DOM)](https://juejin.cn/spost/7354986873733333055)
-* [Canvas Resume Editor - Monorepo + Rspack Engineering Practice](https://juejin.cn/spost/7357349281885503500)
-* [Canvas Resume Editor - Layer Rendering and Event Management Design](https://juejin.cn/spost/7376197082203684873)
+* [Juejin Keeps Recommending Canvas, So I Learned Canvas and Made a Resume Editor](./基于Canvas构建简历编辑器.md)
+* [Canvas Resume Editor - Data Structures and History (undo/redo)](./Canvas编辑器之数据结构设计.md)
+* [Canvas Resume Editor - What Data is Actually in My Clipboard](./Canvas编辑器之剪贴板数据处理.md)
+* [Canvas Resume Editor - Graphic Drawing and State Management (Lightweight DOM)](./Canvas编辑器之图形状态管理.md)
+* [Canvas Resume Editor - Monorepo and Rspack Project Practice](./Canvas编辑器之Rspack工程实践.md)
+* [Canvas Resume Editor - Hierarchical Rendering and Event Management Design](./Canvas编辑器之层级渲染事件管理.md)
+* [Canvas Resume Editor - Selected Drawing and Drag-and-Drop Multi-Selection Interaction Scheme](./Canvas编辑器之选中绘制交互方案.md)
 
 ## Clipboard
 

I18N/Plugin/Canvas编辑器之图形状态管理.md

@@ -7,12 +7,13 @@ Previously, we discussed the design of data structures and data manipulation wit
 
 Related articles on the `Canvas` resume editor project:
 
-* [I often get recommended Canvas on Juejin, so I learned Canvas and created a resume editor](https://juejin.cn/post/7329799331216015395)
-* [Canvas Graphic Editor - Data Structures and History (undo/redo)](https://juejin.cn/post/7331575219957366836)
-* [Canvas Graphic Editor - What Data is in My Clipboard](https://juejin.cn/post/7331992322233024548)
-* [Canvas Resume Editor - Graphic Rendering and State Management (Lightweight DOM)](https://juejin.cn/spost/7354986873733333055)
-* [Canvas Resume Editor - Monorepo + Rspack Engineering Practice](https://juejin.cn/spost/7357349281885503500)
-* [Canvas Resume Editor - Hierarchical Rendering and Event Management Capabilities Design](https://juejin.cn/spost/7376197082203684873)
+* [Juejin Keeps Recommending Canvas, So I Learned Canvas and Made a Resume Editor](./基于Canvas构建简历编辑器.md)
+* [Canvas Resume Editor - Data Structures and History (undo/redo)](./Canvas编辑器之数据结构设计.md)
+* [Canvas Resume Editor - What Data is Actually in My Clipboard](./Canvas编辑器之剪贴板数据处理.md)
+* [Canvas Resume Editor - Graphic Drawing and State Management (Lightweight DOM)](./Canvas编辑器之图形状态管理.md)
+* [Canvas Resume Editor - Monorepo and Rspack Project Practice](./Canvas编辑器之Rspack工程实践.md)
+* [Canvas Resume Editor - Hierarchical Rendering and Event Management Design](./Canvas编辑器之层级渲染事件管理.md)
+* [Canvas Resume Editor - Selected Drawing and Drag-and-Drop Multi-Selection Interaction Scheme](./Canvas编辑器之选中绘制交互方案.md)
 
 ## Graphic Rendering
 When working on a project, we must start from the requirements. First, it is essential to clarify that we are developing a resume editor, which only requires a limited variety of graphic types: rectangles, images, and rich text shapes. Thus, we can conveniently abstract this: we can assume that any element is a rectangle to achieve our goal.

I18N/Plugin/Canvas编辑器之层级渲染事件管理.md

@@ -7,12 +7,13 @@ Before discussing the capabilities related to `Canvas`, we talked about engineer
 
 Articles related to the `Canvas` resume editor project:
 
-* [I was recommended to use Canvas by an old miner, so I made a resume editor learning Canvas](https://juejin.cn/post/7329799331216015395)
-* [Canvas Graphic Editor - Data Structure and History (undo/redo)](https://juejin.cn/post/7331575219957366836)
-* [Canvas Graphic Editor - What's in my clipboard](https://juejin.cn/post/7331992322233024548)
-* [Canvas Resume Editor - Graphic Drawing and State Management (lightweight DOM)](https://juejin.cn/spost/7354986873733333055)
-* [Canvas Resume Editor - Monorepo+Rspack Engineering Practice](https://juejin.cn/spost/7357349281885503500)
-* [Canvas Resume Editor - Layered Rendering and Event Management Capability Design](https://juejin.cn/spost/7376197082203684873)
+* [Juejin Keeps Recommending Canvas, So I Learned Canvas and Made a Resume Editor](./基于Canvas构建简历编辑器.md)
+* [Canvas Resume Editor - Data Structures and History (undo/redo)](./Canvas编辑器之数据结构设计.md)
+* [Canvas Resume Editor - What Data is Actually in My Clipboard](./Canvas编辑器之剪贴板数据处理.md)
+* [Canvas Resume Editor - Graphic Drawing and State Management (Lightweight DOM)](./Canvas编辑器之图形状态管理.md)
+* [Canvas Resume Editor - Monorepo and Rspack Project Practice](./Canvas编辑器之Rspack工程实践.md)
+* [Canvas Resume Editor - Hierarchical Rendering and Event Management Design](./Canvas编辑器之层级渲染事件管理.md)
+* [Canvas Resume Editor - Selected Drawing and Drag-and-Drop Multi-Selection Interaction Scheme](./Canvas编辑器之选中绘制交互方案.md)
 
 
 ## Layered Rendering

I18N/Plugin/Canvas编辑器之数据结构设计.md

@@ -7,12 +7,13 @@ This is a follow-up content as part of the series [Juejin pushed me to learn Can
 
 Related articles about the `Canvas` resume editor project:
 
-* [Juejin pushed me to learn Canvas, so I made a resume editor with Canvas](https://juejin.cn/post/7329799331216015395)
-* [Canvas Graphics Editor-Data Structure and History (undo/redo)](https://juejin.cn/post/7331575219957366836)
-* [Canvas Graphics Editor-What Data is in My Clipboard](https://juejin.cn/post/7331992322233024548)
-* [Canvas Resume Editor-Graphic Drawing and State Management (Lightweight DOM)](https://juejin.cn/spost/7354986873733333055)
-* [Canvas Resume Editor-Monorepo+Rspack Engineering Practice](https://juejin.cn/spost/7357349281885503500)
-* [Canvas Resume Editor-Layer Rendering and Event Management Capability Design](https://juejin.cn/spost/7376197082203684873)
+* [Juejin pushed me to learn Canvas, so I made a resume editor with Canvas](https://juejin.cn/post/* [Juejin Keeps Recommending Canvas, So I Learned Canvas and Made a Resume Editor](./基于Canvas构建简历编辑器.md)
+* [Canvas Resume Editor - Data Structures and History (undo/redo)](./Canvas编辑器之数据结构设计.md)
+* [Canvas Resume Editor - What Data is Actually in My Clipboard](./Canvas编辑器之剪贴板数据处理.md)
+* [Canvas Resume Editor - Graphic Drawing and State Management (Lightweight DOM)](./Canvas编辑器之图形状态管理.md)
+* [Canvas Resume Editor - Monorepo and Rspack Project Practice](./Canvas编辑器之Rspack工程实践.md)
+* [Canvas Resume Editor - Hierarchical Rendering and Event Management Design](./Canvas编辑器之层级渲染事件管理.md)
+* [Canvas Resume Editor - Selected Drawing and Drag-and-Drop Multi-Selection Interaction Scheme](./Canvas编辑器之选中绘制交互方案.md)
 
 ## Description
 For an editor, `History`, which includes `undo` and `redo`, is an essential capability. There are generally two methods to implement the history recording:

I18N/Plugin/Canvas编辑器之选中绘制交互方案.md

@@ -7,13 +7,13 @@ Previously, we discussed how to create a lightweight `DOM` based on `Canvas` and
 
 Related articles about the `Canvas` resume editor project:
 
-* [My Journey with Canvas: Creating a Resume Editor](https://github.com/WindRunnerMax/EveryDay/blob/master/Plugin/基于Canvas构建简历编辑器.md)
-* [Canvas Graphics Editor - Data Structures and History (undo/redo)](https://github.com/WindRunnerMax/EveryDay/blob/master/Plugin/Canvas编辑器之数据结构设计.md)
-* [Canvas Graphics Editor - What Data is in My Clipboard](https://github.com/WindRunnerMax/EveryDay/blob/master/Plugin/Canvas编辑器之剪贴板数据处理.md)
-* [Canvas Resume Editor - Graphic Drawing and State Management (Lightweight DOM)](https://github.com/WindRunnerMax/EveryDay/blob/master/Plugin/Canvas编辑器之图形状态管理.md)
-* [Canvas Resume Editor - Monorepo + Rspack Engineering Practice](https://github.com/WindRunnerMax/EveryDay/blob/master/Plugin/Canvas编辑器之Rspack工程实践.md)
-* [Canvas Resume Editor - Hierarchical Rendering and Event Management Capability Design](https://github.com/WindRunnerMax/EveryDay/blob/master/Plugin/Canvas编辑器之层级渲染事件管理.md)
-* [Canvas Resume Editor - Selected Drawing and Drag-and-Drop Multi-Selection Interaction Scheme](https://github.com/WindRunnerMax/EveryDay/blob/master/Plugin/Canvas编辑器之选中绘制交互方案.md)
+* [Juejin Keeps Recommending Canvas, So I Learned Canvas and Made a Resume Editor](./基于Canvas构建简历编辑器.md)
+* [Canvas Resume Editor - Data Structures and History (undo/redo)](./Canvas编辑器之数据结构设计.md)
+* [Canvas Resume Editor - What Data is Actually in My Clipboard](./Canvas编辑器之剪贴板数据处理.md)
+* [Canvas Resume Editor - Graphic Drawing and State Management (Lightweight DOM)](./Canvas编辑器之图形状态管理.md)
+* [Canvas Resume Editor - Monorepo and Rspack Project Practice](./Canvas编辑器之Rspack工程实践.md)
+* [Canvas Resume Editor - Hierarchical Rendering and Event Management Design](./Canvas编辑器之层级渲染事件管理.md)
+* [Canvas Resume Editor - Selected Drawing and Drag-and-Drop Multi-Selection Interaction Scheme](./Canvas编辑器之选中绘制交互方案.md)
 
 ## Selected Drawing
 Let’s start by discussing the most fundamental interactions of node click selection and dragging. Before we dive into the specifics of the code implementation, let's first address the drawing of shapes. In `Canvas`, when we draw paths, we can fill them using `fill` or outline them using `stroke`. However, when outlining, we could encounter certain drawing issues if we’re not careful. 

I18N/Plugin/基于Canvas构建简历编辑器.md

@@ -4,12 +4,13 @@ About a month ago, I noticed that Juejin kept recommending `Canvas`-related cont
 
 Related articles about the Canvas resume editor project:
 
-* [Juejin Keeps Recommending Canvas to Me, So I Learned Canvas and Created a Resume Editor](https://juejin.cn/post/7329799331216015395)
-* [Canvas Graphic Editor - Data Structure and History (Undo/Redo)](https://juejin.cn/post/7331575219957366836)
-* [Canvas Graphic Editor - What Data Is Actually in My Clipboard?](https://juejin.cn/post/7331992322233024548)
-* [Canvas Resume Editor - Graphic Drawing and State Management (Lightweight DOM)](https://juejin.cn/spost/7354986873733333055)
-* [Canvas Resume Editor - Monorepo + Rspack Project Practice](https://juejin.cn/spost/7357349281885503500)
-* [Canvas Resume Editor - Layered Rendering and Event Management Design](https://juejin.cn/spost/7376197082203684873)
+* [Juejin Keeps Recommending Canvas, So I Learned Canvas and Made a Resume Editor](./基于Canvas构建简历编辑器.md)
+* [Canvas Resume Editor - Data Structures and History (undo/redo)](./Canvas编辑器之数据结构设计.md)
+* [Canvas Resume Editor - What Data is Actually in My Clipboard](./Canvas编辑器之剪贴板数据处理.md)
+* [Canvas Resume Editor - Graphic Drawing and State Management (Lightweight DOM)](./Canvas编辑器之图形状态管理.md)
+* [Canvas Resume Editor - Monorepo and Rspack Project Practice](./Canvas编辑器之Rspack工程实践.md)
+* [Canvas Resume Editor - Hierarchical Rendering and Event Management Design](./Canvas编辑器之层级渲染事件管理.md)
+* [Canvas Resume Editor - Selected Drawing and Drag-and-Drop Multi-Selection Interaction Scheme](./Canvas编辑器之选中绘制交互方案.md)
 
 Why create a resume editor from scratch:
 

I18N/RichText/Decorator装饰器渲染调度.md

@@ -6,10 +6,11 @@ Previously, we discussed the design of data structures based on a document edito
 
 Related articles about the `slate` document editor project:
 
-* [Building a Document Editor with Slate](https://juejin.cn/post/7265516410490830883)
-* [Slate Document Editor - WrapNode Data Structure and Operation Transformation](https://juejin.cn/spost/7385752495535603727)
-* [Slate Document Editor - TS Type Extension and Node Type Checking](https://juejin.cn/spost/7399453742346551332)
-* [Slate Document Editor - Decorator Rendering Dispatcher]()
+* [Building a Document Editor with Slate](./基于slate构建文档编辑器.md)
+* [Slate Document Editor - WrapNode Data Structure and Operation Transformation](./WrapNode数据结构与操作变换.md)
+* [Slate Document Editor - TS Type Extension and Node Type Checking](./TS类型扩展与节点类型检查.md)
+* [Slate Document Editor - Decorator Rendering Dispatcher](./Decorator装饰器渲染调度.md)
+* [Slate Document Editor - Node and Path Mapping](./Node节点与Path路径映射.md)
 
 ## Decorate
 In `slate`, `decoration` is a particularly interesting feature. Imagine a scenario where we need to highlight code blocks. We can implement this in several ways: the first approach involves directly parsing the content of the code block, extracting the keyword categories, and storing them in the data structure to render the highlight information during rendering. However, this increases the size of the data structure. The second approach involves storing only the code information and parsing it into `Marks` during frontend rendering when highlighting is needed. This approach adds a bit of complexity because we may need to mark it as a non-collaborative operation and as pure client-side `Op` that does not require server storage. The third method involves using `decoration`, where `slate` essentially streamlines the second approach by rendering additional `Marks` without altering the data structure.

I18N/RichText/Node节点与Path路径映射.md

@@ -6,11 +6,11 @@ Previously, we discussed the implementation of the `Decorator` decorator in `sla
 
 Related articles about the `slate` document editor project:
 
-* [Building a Document Editor with Slate](https://juejin.cn/post/7265516410490830883)
-* [Slate Document Editor - WrapNode Data Structure and Operations Transformation](https://juejin.cn/spost/7385752495535603727)
-* [Slate Document Editor - TypeScript Type Extension and Node Type Checking](https://juejin.cn/spost/7399453742346551332)
-* [Slate Document Editor - Decorator Rendering Dispatch](https://juejin.cn/post/7433069014978592819)
-* [Slate Document Editor - Node and Path Mapping]()
+* [Building a Document Editor with Slate](./基于slate构建文档编辑器.md)
+* [Slate Document Editor - WrapNode Data Structure and Operation Transformation](./WrapNode数据结构与操作变换.md)
+* [Slate Document Editor - TS Type Extension and Node Type Checking](./TS类型扩展与节点类型检查.md)
+* [Slate Document Editor - Decorator Rendering Dispatcher](./Decorator装饰器渲染调度.md)
+* [Slate Document Editor - Node and Path Mapping](./Node节点与Path路径映射.md)
 
 
 ## Rendering and Commands

I18N/RichText/TS类型扩展与节点类型检查.md

@@ -7,9 +7,11 @@ Previously, we discussed the `WrapNode` data structure and operations transforma
 
 Related articles about the `slate` document editor project:
 
-- [Building a Document Editor with Slate](https://juejin.cn/post/7265516410490830883)
-- [Slate Document Editor - WrapNode Data Structure and Operation Transformation](https://juejin.cn/spost/7385752495535603727)
-- [Slate Document Editor - TS Type Extension and Node Type Checking](https://juejin.cn/spost/7399453742346551332)
+* [Building a Document Editor with Slate](./基于slate构建文档编辑器.md)
+* [Slate Document Editor - WrapNode Data Structure and Operation Transformation](./WrapNode数据结构与操作变换.md)
+* [Slate Document Editor - TS Type Extension and Node Type Checking](./TS类型扩展与节点类型检查.md)
+* [Slate Document Editor - Decorator Rendering Dispatcher](./Decorator装饰器渲染调度.md)
+* [Slate Document Editor - Node and Path Mapping](./Node节点与Path路径映射.md)
 
 ## TS Type Extension
 When incorporating `slate` into TypeScript (`TS`), you may notice that when calling `createEditor` to instantiate the editor, there is no generic type defined for input. Does this imply that `slate` cannot define types in `TS` and one must resort to using `as` for type assertions during property handling? This approach is not suitable for a mature editor engine. For a rich text editor, defining types in `TS` is crucial. We can perceive rich text as text with attributes. Unclear attribute definitions can lead to maintenance challenges. Maintaining rich text content is already problematic, hence defining types becomes necessary.

I18N/RichText/WrapNode数据结构与操作变换.md

@@ -7,9 +7,11 @@ Previously, we discussed some basic concepts of the `slate` rich text engine and
 
 Related articles on the `slate` document editor project:
 
-- [Building a Document Editor Using Slate](https://juejin.cn/post/7265516410490830883)
-- [Slate Document Editor-WrapNode Data Structure and Transformation Operations](https://juejin.cn/spost/7385752495535603727)
-- [Slate Document Editor-TS Type Extension and Node Type Checking](https://juejin.cn/spost/7399453742346551332)
+* [Building a Document Editor with Slate](./基于slate构建文档编辑器.md)
+* [Slate Document Editor - WrapNode Data Structure and Operation Transformation](./WrapNode数据结构与操作变换.md)
+* [Slate Document Editor - TS Type Extension and Node Type Checking](./TS类型扩展与节点类型检查.md)
+* [Slate Document Editor - Decorator Rendering Dispatcher](./Decorator装饰器渲染调度.md)
+* [Slate Document Editor - Node and Path Mapping](./Node节点与Path路径映射.md)
 
 ## Normalize