Skip to content

Commit

Permalink
merge: Use new rendering logic. Bug fixes.
Browse files Browse the repository at this point in the history 
refactor: Refactor to use new rendering logic, fix a series of issues caused by modified msg HTML format.
  • Loading branch information
@nfnfgo
nfnfgo authored Oct 21, 2024
2 parents 504e67f + c17df3a commit 1c7a514
Show file tree
Hide file tree
Showing 23 changed files with 1,225 additions and 654 deletions.
107 changes: 45 additions & 62 deletions diagram/frag_processor.drawio
View file

Large diffs are not rendered by default.

134 changes: 134 additions & 0 deletions diagram/frag_processor_2.3.5.drawio
View file
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&lt;br&gt;`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&lt;br&gt;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&lt;br&gt;&lt;i&gt;`pieceInfoList[i].replace()`&lt;/i&gt;" 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>
86 changes: 59 additions & 27 deletions docs/dev/msg_rendering_process.md
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,90 @@
- [Workflow](#workflow)
- [MsgProcessInfo](#msgprocessinfo)
- [FragmentProcessFunc](#fragmentprocessfunc)
- [Fragments](#fragments)
- [Fragment Processor](#fragment-processor)
- [Children Replacement](#children-replacement)
- [Rendered Flag](#rendered-flag)
- [Global \& MessageRendered Callback](#global--messagerendered-callback)
- [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*.
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 concept of **Fragement Processor**(FragProcessor).

![image](https://github.com/d0j1a1701/LiteLoaderQQNT-Markdown/assets/61616918/c5f986c4-5bb5-410f-8366-c1cffd6c2c3e)
## Fragments

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.
As you see, we **consider the `childern` of the message box as a "fragment"**. Then we have **a list of `FragProcessor`, each takes in charge of render a certain type of fragments**.

## MsgProcessInfo
## Fragment Processor

This refers to object like: `{mark:..., replace:...}`:
Definition:

- `mark` Determine how it looks like for Markdown Renderer.
- `replace` Determine replace behaviour after markdown render process.
```typescript
type FragmentProcessFunc = (
parent: HTMLElement,
element: HTMLElement,
index: number,
) => FragmentProcessFuncRetType | undefined;
```

This decide what this element looks like when passed to Markdown Renderer. For example, an element `<span>123</span>` should converted to:
When `render()` function is triggered, a provided list of Fragment Processor will be iterated from begin to end **respectively and preemptively**.

```js
{mark: '123', replace: undefined}
```
This means, for a single fragment, once a processor successfully returned a not `undefined` value *(actually it should be `FragmentProcessFuncRetType` obejct)*, the loop is end and the return value is used for this fragment.

And an element that should be replaced later `<img class="face-element__icon"></img>` could be converted to:
![Fragment Processor](https://github.com/user-attachments/assets/670dd3f2-7660-4a59-99bb-9e985f19d323)

```js
{
mark: '<span id="some_placeholder"></span>',
replace: (parent)=>{...}
## Children Replacement

Let's look into the return type of `FragmentProcessFunc`:

```typescript
interface FragmentProcessFuncRetType {
original: HTMLElement;
rendered: HTMLElement;
}
```

## FragmentProcessFunc
As you see, it specified the `original` SPAN element, and a new `rendered` element. For now, we just replace the `original` child of `messageBox` with `rendered`.

The work of generating `MsgProcessInfo` based on HTML pieces is done by a set of function with type `FragmentProcessFunc`.
> **Notice**
>
> Keep in mind that the `original` HTML element passed to Fragment Processor could be directly updated.
>
> In some cases, Fragment Processor function may directly mutated the `original` HTML element due to performance or other consideration. In this case, `original===rendered` should be true in the returned `FragmentProcessFuncRetType`.
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.
# 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.

![image](https://github.com/d0j1a1701/LiteLoaderQQNT-Markdown/assets/61616918/04247260-f2eb-46f3-aae2-1dfa487d8312)
![image](https://github.com/user-attachments/assets/dedce85a-b26e-419c-b740-a42984a06238)

`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:

After the process above, we will get a list of `MsgProcessInfo` object. What we need to do is:
```js
// skip rendered message
if (messageBox.classList.contains(markdownRenderedClassName)) {
return;
}
// mark current message as rendered
messageBox.classList.add(markdownRenderedClassName);
```

# Global & MessageRendered Callback

- 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.
- For the task that need to be done directly after a message is rendered, put it at the end of `renderSingleMsgBox()` function.
- For the task that need to be done after a whole rendering is finished, put it at the end of `renderer()` function.

> TODO:
>
> Add a more general callback protocol and manager for rendering process.
# Refs

For more info about the process, check out source code file:

- [msgpiece_processor.ts](/src/render/msgpiece_processor.ts)
- [renderer.jsx](/src/renderer.jsx)
- [renderer.tsx](/src/renderer.tsx)

For outdated doc:

- [Message Rendering Process Doc 2.3.5](./msg_rendering_process_2.3.5.md)
Loading

0 comments on commit 1c7a514

Please sign in to comment.