chore: update doc

example/src/assets/explain.html

@@ -10,27 +10,7 @@ <h1 style="margin: 5px 0; font-size: 1.625em; font-weight: bolder; margin-top: 0
             max-width: 100%;
             max-height: 1000px;
             height: auto;
-        " src="./doc-imgs/svelte-logo.png"></td></tr></tbody></table><p>This is a practive project for exploring <code style="
-            padding: 2px 6px;
-            border-radius: 3px;
-            background-color: #afafaf33;
-        ">Svelte</code> and <code style="
-            padding: 2px 6px;
-            border-radius: 3px;
-            background-color: #afafaf33;
-        ">Tiptap</code> to create a WYSIWYG rich text editor. So , this project is <b>in prototype phase</b>.🤣</p><p>This project's final goal is to be able to be a <code style="
-            padding: 2px 6px;
-            border-radius: 3px;
-            background-color: #afafaf33;
-        ">TML5 Copy/Paste Friendly</code> &amp; <code style="
-            padding: 2px 6px;
-            border-radius: 3px;
-            background-color: #afafaf33;
-        ">Email Friendly</code> &amp; <code style="
-            padding: 2px 6px;
-            border-radius: 3px;
-            background-color: #afafaf33;
-        ">Markdown Friendly</code> feature rich WYSIWYG rich text editor 🚀🚀🚀.</p><table style="min-width: 343px"><colgroup><col style="width: 318px"><col style="min-width: 25px"></colgroup><tbody><tr><td style="border: 1px solid #70707099" colspan="1" rowspan="1" colwidth="318"><ul style="
+        " src="./doc-imgs/svelte-logo.png"></td></tr></tbody></table><p>This is a practive project for exploring <code class="inline-code">Svelte</code> and <code class="inline-code">Tiptap</code> to create a WYSIWYG rich text editor. So , this project is <b>in prototype phase</b>.🤣</p><p>This project's final goal is to be able to be a <code class="inline-code">TML5 Copy/Paste Friendly</code> &amp; <code class="inline-code">Email Friendly</code> &amp; <code class="inline-code">Markdown Friendly</code> feature rich WYSIWYG rich text editor 🚀🚀🚀.</p><table style="min-width: 343px"><colgroup><col style="width: 318px"><col style="min-width: 25px"></colgroup><tbody><tr><td style="border: 1px solid #70707099" colspan="1" rowspan="1" colwidth="318"><ul style="
             /*
              * It's a hack here, for some editor (eg: wechat editor) 
              * didn't support 0 value padding
@@ -82,11 +62,7 @@ <h1 style="margin: 5px 0; font-size: 1.625em; font-weight: bolder; margin-top: 0
             " data-checked="false" data-type="taskItem"><label><input type="checkbox"><span></span></label><div><p>Resize Box (base extension, in plan, soon)</p></div></li><li style="
                 display: flex;
                 gap: 0.625em;
-            " data-checked="false" data-type="taskItem"><label><input type="checkbox"><span></span></label><div><p>Paper Mode (support <b>docx</b> and <b>PDF export</b>)</p></div></li></ul></td></tr></tbody></table><h2 style="margin: 5px 0; font-size: 1.250em; font-weight: bold; margin-top: 0.5em"><b>0x01 Why Svelte?</b></h2><p><code style="
-            padding: 2px 6px;
-            border-radius: 3px;
-            background-color: #afafaf33;
-        ">Svelte</code> is a less runtime UI framework. Fewer components can get fewer runtime code.</p><p>I have built some vanilla JavaScript extensions for <a target="_blank" rel="noopener noreferrer nofollow" style="
+            " data-checked="false" data-type="taskItem"><label><input type="checkbox"><span></span></label><div><p>Paper Mode (support <b>docx</b> and <b>PDF export</b>)</p></div></li></ul></td></tr></tbody></table><h2 style="margin: 5px 0; font-size: 1.250em; font-weight: bold; margin-top: 0.5em"><b>0x01 Why Svelte?</b></h2><p><code class="inline-code">Svelte</code> is a less runtime UI framework. Fewer components can get fewer runtime code.</p><p>I have built some vanilla JavaScript extensions for <a target="_blank" rel="noopener noreferrer nofollow" style="
             text-decoration: underline;
             color: #0096dc;
             cursor: pointer
@@ -106,39 +82,15 @@ <h1 style="margin: 5px 0; font-size: 1.625em; font-weight: bolder; margin-top: 0
             max-width: 100%;
             max-height: 1000px;
             height: auto;
-        " src="./doc-imgs/mermaid-example.png"><p>I got a small output, <b>less than 5KB</b> that excited me (17.33KB total including 12KB pan zoom library and others).</p><p>Using <code style="
-            padding: 2px 6px;
-            border-radius: 3px;
-            background-color: #afafaf33;
-        ">Svelte</code> to build a vanilla JavaScript plugin, can provide you with good DX and small output. So I can use <code style="
-            padding: 2px 6px;
-            border-radius: 3px;
-            background-color: #afafaf33;
-        ">Svelte</code> to build <code style="
-            padding: 2px 6px;
-            border-radius: 3px;
-            background-color: #afafaf33;
-        ">Tiptap NodeView</code> components with pleasure.</p><p>You can see <code style="
-            padding: 2px 6px;
-            border-radius: 3px;
-            background-color: #afafaf33;
-        ">packages/tiptap-extension-code-block-shiki</code> for a example.</p><h2 style="margin: 5px 0; font-size: 1.250em; font-weight: bold; margin-top: 0.5em"><b>0x02 Brief view of Tiptap</b></h2><blockquote style="
+        " src="./doc-imgs/mermaid-example.png"><p>I got a small output, <b>less than 5KB</b> that excited me (17.33KB total including 12KB pan zoom library and others).</p><p>Using <code class="inline-code">Svelte</code> to build a vanilla JavaScript plugin, can provide you with good DX and small output. So I can use <code class="inline-code">Svelte</code> to build <code class="inline-code">Tiptap NodeView</code> components with pleasure.</p><p>You can see <code class="inline-code">packages/tiptap-extension-code-block-shiki</code> for a example.</p><h2 style="margin: 5px 0; font-size: 1.250em; font-weight: bold; margin-top: 0.5em"><b>0x02 Brief view of Tiptap</b></h2><blockquote style="
             overflow: hidden;
             padding: 10px 20px;
             border-left: 4px;
             border-style: solid;
             border-color: #70707099;
             margin: 10px 0;
             background-color: #afafaf33
-        "><p>Tiptap is a <b>headless wrapper</b> around <b>ProseMirror </b>– a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as New York Times, The Guardian or Atlassian.</p></blockquote><p>For developer, <code style="
-            padding: 2px 6px;
-            border-radius: 3px;
-            background-color: #afafaf33;
-        ">Tiptap</code> is a higher level <code style="
-            padding: 2px 6px;
-            border-radius: 3px;
-            background-color: #afafaf33;
-        ">ProseMirror</code> encapsulation.</p><p>Tiptap provides:</p><ul class="list-paddingleft-1" style="padding-left: 1.25em; list-style-type: decimal"><li><p>Tiptap is <b>vanilla based</b>, is designed to be framework agnostic (React, Vue, Angular, Svelte...)</p></li><li><p>Combined a series of complex ProseMirror modules into a clear-path extension development suite. <a target="_blank" rel="noopener noreferrer nofollow" style="
+        "><p>Tiptap is a <b>headless wrapper</b> around <b>ProseMirror </b>– a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as New York Times, The Guardian or Atlassian.</p></blockquote><p>For developer, <code class="inline-code">Tiptap</code> is a higher level <code class="inline-code">ProseMirror</code> encapsulation.</p><p>Tiptap provides:</p><ul class="list-paddingleft-1" style="padding-left: 1.25em; list-style-type: decimal"><li><p>Tiptap is <b>vanilla based</b>, is designed to be framework agnostic (React, Vue, Angular, Svelte...)</p></li><li><p>Combined a series of complex ProseMirror modules into a clear-path extension development suite. <a target="_blank" rel="noopener noreferrer nofollow" style="
             text-decoration: underline;
             color: #0096dc;
             cursor: pointer
@@ -258,11 +210,7 @@ <h1 style="margin: 5px 0; font-size: 1.625em; font-weight: bolder; margin-top: 0
             contentDOM: code
         }
     }
-})</code></pre><p><code style="
-            padding: 2px 6px;
-            border-radius: 3px;
-            background-color: #afafaf33;
-        ">contentDOM</code> is important, if you want fully control your sub content, for example, mount a third party code editor (CodeMirror), just leave contentDOM null. <a target="_blank" rel="noopener noreferrer nofollow" style="
+})</code></pre><p><code class="inline-code">contentDOM</code> is important, if you want fully control your sub content, for example, mount a third party code editor (CodeMirror), just leave contentDOM null. <a target="_blank" rel="noopener noreferrer nofollow" style="
             text-decoration: underline;
             color: #0096dc;
             cursor: pointer
@@ -288,11 +236,7 @@ <h1 style="margin: 5px 0; font-size: 1.625em; font-weight: bolder; margin-top: 0
             border-color: #70707099;
             margin: 10px 0;
             background-color: #afafaf33
-        "><p>The <code style="
-            padding: 2px 6px;
-            border-radius: 3px;
-            background-color: #afafaf33;
-        ">parseFromString()</code> method of the <a target="_blank" rel="noopener noreferrer nofollow" style="
+        "><p>The <code class="inline-code">parseFromString()</code> method of the <a target="_blank" rel="noopener noreferrer nofollow" style="
             text-decoration: underline;
             color: #0096dc;
             cursor: pointer
@@ -310,4 +254,4 @@ <h1 style="margin: 5px 0; font-size: 1.625em; font-weight: bolder; margin-top: 0
 
 // prosemirror-model provide methods to deserialize a node/mark from its JSON representation
 const node = schema.nodeFromJSON(content) 
-// ...</code></pre><p></p><h2 style="margin: 5px 0; font-size: 1.250em; font-weight: bold; margin-top: 0.5em"><b>0x04 Let's build a CodeBlock extension as an example, and get figure out how it works.</b></h2><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
+// ...</code></pre><h4 style="margin: 5px 0; font-size: 1.000em; font-weight: bold; margin-top: 0.3em"><span style="font-size: 18px"><b>3. How extension render DOM relay on serialized "params"?</b></span></h4><h4 style="margin: 5px 0; font-size: 1.000em; font-weight: bold; margin-top: 0.3em"><span style="font-size: 18px"><b>4. How extension add commands?</b></span></h4><h4 style="margin: 5px 0; font-size: 1.000em; font-weight: bold; margin-top: 0.3em"><span style="font-size: 18px"><b>5. What is Transaction? How transaction update content?</b></span></h4><h4 style="margin: 5px 0; font-size: 1.000em; font-weight: bold; margin-top: 0.3em"><span style="font-size: 18px"><b>6. How to get node position? Or get node from pos?</b></span></h4><h2 style="margin: 5px 0; font-size: 1.250em; font-weight: bold; margin-top: 0.5em"><b>0x04 Let's build a CodeBlock extension as an example, and get figure out how it works.</b></h2><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>