docs: update for todos

README.md

@@ -5,7 +5,8 @@
 > 3b is a sophisticated editor designed for content creation, catering to various formats such as blogs, articles, user
 > stories, and more.
 
-In the documentary "10 Years with Hayao Miyazaki"  the esteemed artist (宫崎骏, 宮﨑駿／みやざきはやお) chooses a 3B pencil, 
+In the documentary "10 Years with Hayao Miyazaki"  the esteemed artist (宫崎骏, 宮﨑駿／みやざきはやお) chooses a 3B
+pencil,
 deeming conventional ones too inflexible for his creative process. Let us pay homage to his lofty ideals.
 
 Todos
@@ -18,10 +19,11 @@ Todos
         - [x] Quick Insert. Type `Command` + `/` or `Ctrl` + `/` to show menu.
         - [ ] Context Menu. Right click to show menu.
     - [ ] Diff
-        - [ ] JSON Schema, like lines, $from, $to
+        - [ ] GPT JSON Schema: like lines, $from, $to
         - [ ] Diff algorithm
-        - [x] Diff Viewer Change
-          Diff [https://github.com/chenyuncai/tiptap-track-change-extension](https://github.com/chenyuncai/tiptap-track-change-extension)
+        - [ ] Change accept/reject
+        - [x] Tiptap: [track-change-extension](https://github.com/chenyuncai/tiptap-track-change-extension)
+        - [ ] ProseMirror Change: [Changeset](https://github.com/ProseMirror/prosemirror-changeset)
     - [ ] More plugins for
       Intelli: [https://github.com/ueberdosis/tiptap/issues/819](https://github.com/ueberdosis/tiptap/issues/819)
 - [ ] Customize prompt
@@ -37,6 +39,19 @@ Todos
 - [ ] Online Runtime
     - [ ] Unit Runtime
 
+## Design Principle
+
+- [Facets as Composable Extension Points](https://marijnhaverbeke.nl/blog/facets.html)
+
+* Composition: Multiple extensions attaching to a given extension point must have their effects combined in a
+  predictable way.
+* Precedence: In cases where combining effects is order-sensitive, it must be easy to reason about and control the order
+  of the extensions.
+* Grouping: Many extensions will need to attach to a number of extension points, or even pull in other extensions that
+  they depend on.
+* Change: The effect produced by extensions may depend on other aspects of the system state, or be explicitly
+  reconfigured.
+
 ## Refs:
 
 ### Tiptap Editor extensions

components/editor/intelli/menu/menu-bubble.jsx

@@ -1,14 +1,18 @@
 import { BubbleMenu } from '@tiptap/react'
 import React from 'react'
 import { MagicWandIcon } from '@radix-ui/react-icons'
+import { Span, Change, ChangeSet } from 'prosemirror-changeset'
+
+const { computeDiff } = ChangeSet
 
 export const MenuBubble = ({ editor }) => {
   const selection = editor.commands.getSelectedText()
   let selectLength = selection?.length ? selection.length : 0
 
+
   // 根据长度优化
   return <BubbleMenu className={'ToggleGroup'} editor={editor} tippyOptions={{ duration: 100 }}>
-    {selectLength > 20 && <div className={"BubbleMenuGroup"}>
+    {selectLength > 20 && <div className={'BubbleMenuGroup'}>
       <button
         onClick={() => {
           editor.commands.setTrackChangeStatus(true)
@@ -19,6 +23,13 @@ export const MenuBubble = ({ editor }) => {
             to: selection.to
           }, '永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修禊事也。群贤毕至，少长咸集。此地有崇山峻岭，茂林修竹；又有清流激湍，映带左右').run()
 
+
+          let content1 = '永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修禊事也。群贤毕至，少长咸集。此地有崇山峻岭，茂林修竹；又有清流激湍，映带左右'
+          let content2 = '岁在癸丑，暮春之初，会于会稽山阴之兰亭，修禊事也。群贤毕至，少长咸集。此地有崇山峻岭，茂林修竹；又有清流激湍，映带左右'
+          let diff = []
+          let output = computeDiff(content1, content2, diff)
+          console.log(output)
+
           editor.commands.setTrackChangeStatus(false)
         }}
         value="left" aria-label="Left aligned"

package.json

@@ -58,6 +58,7 @@
     "@tiptap/suggestion": "^2.1.12",
     "markdown-it": "^13.0.2",
     "next": "latest",
+    "prosemirror-changeset": "^2.2.1",
     "prosemirror-keymap": "^1.2.2",
     "prosemirror-view": "^1.32.4",
     "react": "18.2.0",