generated from LiteLoaderQQNT/Plugin-Template
-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
doc: Update render process doc and install doc.
feat: Update manifest.json
- Loading branch information
Showing
7 changed files
with
326 additions
and
98 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,134 @@ | ||
| <mxfile host="Electron" modified="2024-07-09T07:32:55.857Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/21.6.1 Chrome/112.0.5615.204 Electron/24.6.1 Safari/537.36" etag="cP2pwXDnCcL_vyiy6X7w" version="21.6.1" type="device"> | ||
| <diagram name="Page-1" id="zotAlQJJTCq7FzbI9wUf"> | ||
| <mxGraphModel dx="1295" dy="519" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="3300" pageHeight="4681" math="0" shadow="0"> | ||
| <root> | ||
| <mxCell id="0" /> | ||
| <mxCell id="1" parent="0" /> | ||
| <mxCell id="8dtW_6vD572V2-CuLths-22" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1"> | ||
| <mxGeometry x="395" y="240" width="130" height="260" as="geometry" /> | ||
| </mxCell> | ||
| <mxCell id="8dtW_6vD572V2-CuLths-29" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="8dtW_6vD572V2-CuLths-20" target="8dtW_6vD572V2-CuLths-28"> | ||
| <mxGeometry relative="1" as="geometry" /> | ||
| </mxCell> | ||
| <mxCell id="8dtW_6vD572V2-CuLths-20" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;fontColor=#333333;" vertex="1" parent="1"> | ||
| <mxGeometry x="580" y="240" width="200" height="260" as="geometry" /> | ||
| </mxCell> | ||
| <mxCell id="8dtW_6vD572V2-CuLths-8" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="8dtW_6vD572V2-CuLths-1"> | ||
| <mxGeometry relative="1" as="geometry"> | ||
| <mxPoint x="400" y="365" as="targetPoint" /> | ||
| </mxGeometry> | ||
| </mxCell> | ||
| <mxCell id="8dtW_6vD572V2-CuLths-1" value="MsgBox" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1"> | ||
| <mxGeometry x="280" y="291.25" width="80" height="147.5" as="geometry" /> | ||
| </mxCell> | ||
| <mxCell id="8dtW_6vD572V2-CuLths-14" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="8dtW_6vD572V2-CuLths-2" target="8dtW_6vD572V2-CuLths-11"> | ||
| <mxGeometry relative="1" as="geometry" /> | ||
| </mxCell> | ||
| <mxCell id="8dtW_6vD572V2-CuLths-2" value="SPAN text" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1"> | ||
| <mxGeometry x="420" y="265" width="80" height="40" as="geometry" /> | ||
| </mxCell> | ||
| <mxCell id="8dtW_6vD572V2-CuLths-15" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="8dtW_6vD572V2-CuLths-3" target="8dtW_6vD572V2-CuLths-11"> | ||
| <mxGeometry relative="1" as="geometry"> | ||
| <Array as="points"> | ||
| <mxPoint x="550" y="335" /> | ||
| <mxPoint x="550" y="285" /> | ||
| </Array> | ||
| </mxGeometry> | ||
| </mxCell> | ||
| <mxCell id="8dtW_6vD572V2-CuLths-3" value="SPAN text" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1"> | ||
| <mxGeometry x="420" y="315" width="80" height="40" as="geometry" /> | ||
| </mxCell> | ||
| <mxCell id="8dtW_6vD572V2-CuLths-17" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="8dtW_6vD572V2-CuLths-4" target="8dtW_6vD572V2-CuLths-12"> | ||
| <mxGeometry relative="1" as="geometry"> | ||
| <Array as="points"> | ||
| <mxPoint x="570" y="385" /> | ||
| <mxPoint x="570" y="335" /> | ||
| </Array> | ||
| </mxGeometry> | ||
| </mxCell> | ||
| <mxCell id="8dtW_6vD572V2-CuLths-4" value="SPAN other" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1"> | ||
| <mxGeometry x="420" y="365" width="80" height="40" as="geometry" /> | ||
| </mxCell> | ||
| <mxCell id="8dtW_6vD572V2-CuLths-19" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fillColor=#f5f5f5;strokeColor=#666666;dashed=1;" edge="1" parent="1" source="8dtW_6vD572V2-CuLths-5" target="8dtW_6vD572V2-CuLths-18"> | ||
| <mxGeometry relative="1" as="geometry" /> | ||
| </mxCell> | ||
| <mxCell id="8dtW_6vD572V2-CuLths-5" value="DIV other" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1"> | ||
| <mxGeometry x="420" y="415" width="80" height="40" as="geometry" /> | ||
| </mxCell> | ||
| <mxCell id="8dtW_6vD572V2-CuLths-9" value="Pieces" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1"> | ||
| <mxGeometry x="430" y="465" width="60" height="30" as="geometry" /> | ||
| </mxCell> | ||
| <mxCell id="8dtW_6vD572V2-CuLths-11" value="textSpanProcessor" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1"> | ||
| <mxGeometry x="600" y="265" width="160" height="40" as="geometry" /> | ||
| </mxCell> | ||
| <mxCell id="8dtW_6vD572V2-CuLths-12" value="spanReplaceProcessor" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1"> | ||
| <mxGeometry x="600" y="315" width="160" height="40" as="geometry" /> | ||
| </mxCell> | ||
| <mxCell id="8dtW_6vD572V2-CuLths-13" value="..." style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1"> | ||
| <mxGeometry x="600" y="365" width="160" height="40" as="geometry" /> | ||
| </mxCell> | ||
| <mxCell id="8dtW_6vD572V2-CuLths-18" value="Ignored" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#f5f5f5;fontColor=#333333;strokeColor=#666666;" vertex="1" parent="1"> | ||
| <mxGeometry x="600" y="415" width="160" height="40" as="geometry" /> | ||
| </mxCell> | ||
| <mxCell id="8dtW_6vD572V2-CuLths-21" value="FragProcessor" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1"> | ||
| <mxGeometry x="630" y="460" width="100" height="40" as="geometry" /> | ||
| </mxCell> | ||
| <mxCell id="8dtW_6vD572V2-CuLths-28" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1"> | ||
| <mxGeometry x="830" y="240" width="190" height="260" as="geometry" /> | ||
| </mxCell> | ||
| <mxCell id="8dtW_6vD572V2-CuLths-23" value="{mark: ..., replace: ...}" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1"> | ||
| <mxGeometry x="856.63" y="265" width="133.37" height="40" as="geometry" /> | ||
| </mxCell> | ||
| <mxCell id="8dtW_6vD572V2-CuLths-24" value="{mark: ..., replace: ...}" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1"> | ||
| <mxGeometry x="856.63" y="315" width="133.37" height="40" as="geometry" /> | ||
| </mxCell> | ||
| <mxCell id="8dtW_6vD572V2-CuLths-25" value="{mark: ..., replace: ...}" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1"> | ||
| <mxGeometry x="856.63" y="365" width="133.37" height="40" as="geometry" /> | ||
| </mxCell> | ||
| <mxCell id="8dtW_6vD572V2-CuLths-27" value="..." style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1"> | ||
| <mxGeometry x="856.63" y="415" width="133.37" height="40" as="geometry" /> | ||
| </mxCell> | ||
| <mxCell id="8dtW_6vD572V2-CuLths-38" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="8dtW_6vD572V2-CuLths-32" target="8dtW_6vD572V2-CuLths-37"> | ||
| <mxGeometry relative="1" as="geometry" /> | ||
| </mxCell> | ||
| <mxCell id="8dtW_6vD572V2-CuLths-39" value="Accumulate<br>`mark`" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="8dtW_6vD572V2-CuLths-38"> | ||
| <mxGeometry x="0.0165" y="1" relative="1" as="geometry"> | ||
| <mxPoint x="-1" y="1" as="offset" /> | ||
| </mxGeometry> | ||
| </mxCell> | ||
| <mxCell id="8dtW_6vD572V2-CuLths-32" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1"> | ||
| <mxGeometry x="280" y="600" width="190" height="260" as="geometry" /> | ||
| </mxCell> | ||
| <mxCell id="8dtW_6vD572V2-CuLths-33" value="{mark: ..., replace: ...}" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1"> | ||
| <mxGeometry x="306.63" y="630" width="133.37" height="40" as="geometry" /> | ||
| </mxCell> | ||
| <mxCell id="8dtW_6vD572V2-CuLths-34" value="{mark: ..., replace: ...}" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1"> | ||
| <mxGeometry x="306.63" y="681.25" width="133.37" height="40" as="geometry" /> | ||
| </mxCell> | ||
| <mxCell id="8dtW_6vD572V2-CuLths-35" value="{mark: ..., replace: ...}" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1"> | ||
| <mxGeometry x="306.63" y="735" width="133.37" height="40" as="geometry" /> | ||
| </mxCell> | ||
| <mxCell id="8dtW_6vD572V2-CuLths-36" value="..." style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1"> | ||
| <mxGeometry x="306.63" y="790" width="133.37" height="40" as="geometry" /> | ||
| </mxCell> | ||
| <mxCell id="8dtW_6vD572V2-CuLths-42" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="8dtW_6vD572V2-CuLths-37" target="8dtW_6vD572V2-CuLths-40"> | ||
| <mxGeometry relative="1" as="geometry" /> | ||
| </mxCell> | ||
| <mxCell id="8dtW_6vD572V2-CuLths-43" value="Rendered<br>HTML" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="8dtW_6vD572V2-CuLths-42"> | ||
| <mxGeometry x="-0.2279" relative="1" as="geometry"> | ||
| <mxPoint x="9" as="offset" /> | ||
| </mxGeometry> | ||
| </mxCell> | ||
| <mxCell id="8dtW_6vD572V2-CuLths-37" value="Markdown It Renderer" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1"> | ||
| <mxGeometry x="580" y="700" width="170" height="60" as="geometry" /> | ||
| </mxCell> | ||
| <mxCell id="8dtW_6vD572V2-CuLths-40" value="Replacer<br><i>`pieceInfoList[i].replace()`</i>" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1"> | ||
| <mxGeometry x="856.63" y="700" width="170" height="60" as="geometry" /> | ||
| </mxCell> | ||
| <mxCell id="8dtW_6vD572V2-CuLths-41" value="pieceInfoList" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1"> | ||
| <mxGeometry x="873.3099999999998" y="460" width="100" height="40" as="geometry" /> | ||
| </mxCell> | ||
| </root> | ||
| </mxGraphModel> | ||
| </diagram> | ||
| </mxfile> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| - [Workflow](#workflow) | ||
| - [MsgProcessInfo](#msgprocessinfo) | ||
| - [FragmentProcessFunc](#fragmentprocessfunc) | ||
| - [Rendered Flag](#rendered-flag) | ||
| - [Refs](#refs) | ||
|
|
||
|
|
||
| # Workflow | ||
|
|
||
| Currently the plugin does NOT rendering all content inside a message box. We only deal with contents that may need go through the markdown renderer. Also, since some element should NOT be considered as Markdown when rendering and should keep what it look like throughout the rendering, we introduced the *Replacer*. | ||
|
|
||
|  | ||
|
|
||
| As you see, we consider the `childern` of the message box as pieces. Then we have a list of `FragProcessor` which take in charge of convert the list of HTML children (or you can say: list of pieces) into list of `MsgProcessInfo` object. | ||
|
|
||
| ## MsgProcessInfo | ||
|
|
||
| This refers to object like: `{mark:..., replace:...}`: | ||
|
|
||
| - `mark` Determine how it looks like for Markdown Renderer. | ||
| - `replace` Determine replace behaviour after markdown render process. | ||
|
|
||
| This decide what this element looks like when passed to Markdown Renderer. For example, an element `<span>123</span>` should converted to: | ||
|
|
||
| ```js | ||
| {mark: '123', replace: undefined} | ||
| ``` | ||
|
|
||
| And an element that should be replaced later `<img class="face-element__icon"></img>` could be converted to: | ||
|
|
||
| ```js | ||
| { | ||
| mark: '<span id="some_placeholder"></span>', | ||
| replace: (parent)=>{...} | ||
| } | ||
| ``` | ||
|
|
||
| ## FragmentProcessFunc | ||
|
|
||
| The work of generating `MsgProcessInfo` based on HTML pieces is done by a set of function with type `FragmentProcessFunc`. | ||
|
|
||
| There is a list of `FragmentProcessFunc`. When iterating pieces, all `FragmentProcessFunc` inside the list will be **triggered from begin to end respectively and preemptively**, which means once a processor successfully returned a `MsgProcessInfo` object, process interrupt and program will continue with next piece. | ||
|
|
||
| ----- | ||
|
|
||
|  | ||
|
|
||
|
|
||
| After the process above, we will get a list of `MsgProcessInfo` object. What we need to do is: | ||
|
|
||
| - First, accumulate all `mark` from the list, passed it to *Markdown Renderer*, then get a `renderedHtml`. | ||
| - Iterating `replace` field of `MsgProcessInfo` list, if not `undefined`, execute the replace function. | ||
|
|
||
| # Rendered Flag | ||
|
|
||
| We use a special HTML `class` text to mark a message box as `rendered` in `renderSingleMsgBox()` function. When `render()` triggered, it first detect all message box inside UI, then filter the ones that already been rendered. This approach could not only improve the performance but also solve some async issue. | ||
|
|
||
|  | ||
|
|
||
| `renderSingleMsgBox()` function is an `async` function. And `render()` will not use `await` to call that function, means if we do nothing, two `renderSingleMsgBox()` could be called at the same time to process the same message box. To ensure only one `renderSingleMsgBox()` function called for each message box, we could put the Rendered detection at the begining of the function: | ||
|
|
||
| ```js | ||
| // skip rendered message | ||
| if (messageBox.classList.contains(markdownRenderedClassName)) { | ||
| return; | ||
| } | ||
| // mark current message as rendered | ||
| messageBox.classList.add(markdownRenderedClassName); | ||
| ``` | ||
|
|
||
| # Refs | ||
|
|
||
| For more info about the process, check out source code file: | ||
|
|
||
| - [msgpiece_processor.ts](/src/render/msgpiece_processor.ts) | ||
| - [renderer.tsx](/src/renderer.tsx) |
Oops, something went wrong.