【Harmony】鸿蒙流式输出异常

[GithubGaoYang]

首先感谢您开源词库，这是我遇到的扩展性最强的，鸿蒙 markdown 解析库，但在使用过程中还是遇到了一些问题。

一是流式输出模式下，会出现内容二次渲染或渲染不全的问题。
为了更好地复现此问题，我修改了Demo 里流式输出模式下的 step 跟 interval 参数（如图）

运行 Demo， 选择 Stream 模式。会很容易复现该问题。具体可见录屏。

在第 25 秒的时候，"注意事项"一行出现了二次渲染。
在第 34 秒的时候，不再渲染内容，但右边的日志还在持续输出。
直到视频末尾，可以看到日志输出了完整的内容，但左边的模拟器并没有将完整内容渲染出来。

二是之前提过的性能问题。查看代码，并未发现对 Normal 模式下的渲染有相关改动。实际测试时，发现 如果文本内容较长 Normal 模式下渲染还是会比较慢。

如下图，在 models.ets#164行 处打印日志，可以看到，这里执行了 197 次。这应该是解析耗时的主要原因，如果这个耗时问题不好解决，希望在解析完毕时可以给一个回调方法。

另外看到您在 1.0.3 版本中增加了 Update 模式。尚不清楚如何使用该模式。希望可以给出 Demo。

---

以上，尤其是第一条，希望可以尽快得到您的答复，再次感谢您的开源。

[jiayou-tss]

首先感谢您开源词库，这是我遇到的扩展性最强的，鸿蒙 markdown 解析库，但在使用过程中还是遇到了一些问题。

一是流式输出模式下，会出现内容二次渲染或渲染不全的问题。 为了更好地复现此问题，我修改了Demo 里流式输出模式下的 step 跟 interval 参数（如图） 运行 Demo， 选择 Stream 模式。会很容易复现该问题。具体可见录屏。

在第 25 秒的时候，"注意事项"一行出现了二次渲染。
在第 34 秒的时候，不再渲染内容，但右边的日志还在持续输出。
直到视频末尾，可以看到日志输出了完整的内容，但左边的模拟器并没有将完整内容渲染出来。

二是之前提过的性能问题。查看代码，并未发现对 Normal 模式下的渲染有相关改动。实际测试时，发现 如果文本内容较长 Normal 模式下渲染还是会比较慢。

如下图，在 models.ets#164行 处打印日志，可以看到，这里执行了 197 次。这应该是解析耗时的主要原因，如果这个耗时问题不好解决，希望在解析完毕时可以给一个回调方法。

另外看到您在 1.0.3 版本中增加了 Update 模式。尚不清楚如何使用该模式。希望可以给出 Demo。

以上，尤其是第一条，希望可以尽快得到您的答复，再次感谢您的开源。

感谢反馈。

关于一 ：我们发现确实是问题，内部AST解析时异步的hash提取逻辑可能导致解析队列的回调顺序错乱，我们已经调整成了同步的提取策略；

关于二：性能优化主要体现在渲染环节，您提到的“长内容比较慢”主要是解析环节比较耗时，目前行业内流行的解析器都只能支持全量解析，暂时只能在使用时通过策略尽可能减少提交全量长内容的次数；

另外，最新的v1.0.4版本，我们在AST解析环节内置了插件监听机制，需要的话，可以参考以下方式接入：

import { 
  Markdown, BaseEngine,
  AstServicePlugin, IAstPluginParse, EAstPlugin, 
} from 'fluid-markdown';

class MyPlugin extends AstServicePlugin<IAstPluginParse> {
  readonly type: EAstPlugin = EAstPlugin.Parse;
  readonly handler: IAstPluginParse = {
    willParse: (content) => {
    },
    didParse: (result) => {
    },
  };
}

ComponentV2
struct MyComponent {
  private engine = new BaseEngine();
  aboutToAppear() {
    this.engine.ast!.add(new MyPlugin());
  }
  build() {
    ...
    Markdown({
      engine: this.engine,
      ...
    })
    ...
  }
}

[GithubGaoYang]

首先感谢您开源词库，这是我遇到的扩展性最强的，鸿蒙 markdown 解析库，但在使用过程中还是遇到了一些问题。
一是流式输出模式下，会出现内容二次渲染或渲染不全的问题。 为了更好地复现此问题，我修改了Demo 里流式输出模式下的 step 跟 interval 参数（如图） 运行 Demo， 选择 Stream 模式。会很容易复现该问题。具体可见录屏。

在第 25 秒的时候，"注意事项"一行出现了二次渲染。
在第 34 秒的时候，不再渲染内容，但右边的日志还在持续输出。
直到视频末尾，可以看到日志输出了完整的内容，但左边的模拟器并没有将完整内容渲染出来。

二是之前提过的性能问题。查看代码，并未发现对 Normal 模式下的渲染有相关改动。实际测试时，发现 如果文本内容较长 Normal 模式下渲染还是会比较慢。
如下图，在 models.ets#164行 处打印日志，可以看到，这里执行了 197 次。这应该是解析耗时的主要原因，如果这个耗时问题不好解决，希望在解析完毕时可以给一个回调方法。

另外看到您在 1.0.3 版本中增加了 Update 模式。尚不清楚如何使用该模式。希望可以给出 Demo。
以上，尤其是第一条，希望可以尽快得到您的答复，再次感谢您的开源。

感谢反馈。

关于一 ：我们发现确实是问题，内部AST解析时异步的hash提取逻辑可能导致解析队列的回调顺序错乱，我们已经调整成了同步的提取策略；

关于二：性能优化主要体现在渲染环节，您提到的“长内容比较慢”主要是解析环节比较耗时，目前行业内流行的解析器都只能支持全量解析，暂时只能在使用时通过策略尽可能减少提交全量长内容的次数；

另外，最新的v1.0.4版本，我们在AST解析环节内置了插件监听机制，需要的话，可以参考以下方式接入：

import {
Markdown, BaseEngine,
AstServicePlugin, IAstPluginParse, EAstPlugin,
} from 'fluid-markdown';

class MyPlugin extends AstServicePlugin {
readonly type: EAstPlugin = EAstPlugin.Parse;
readonly handler: IAstPluginParse = {
willParse: (content) => {
},
didParse: (result) => {
},
};
}

ComponentV2
struct MyComponent {
private engine = new BaseEngine();
aboutToAppear() {
this.engine.render!.add(new MyPlugin());
}
build() {
...
Markdown({
engine: this.engine,
...
})
...
}
}

感谢。

经过测试，可以看到 1.0.4 版本相对之前版本异常情况少了一些，但还是有点问题，具体如下：

1. 多次渲染跟渲染不全问题仍能复现。

见录屏 10 到 15 秒 3. 列表（Lists） 附近有二次渲染现象（整个录屏中，此部分有多次渲染）；
在录屏结束时，可以看到并没有输出完整的内容

复现方式：修改流式输出模式下的 step 跟 interval 参数 const step = 20;、interval 改为 200；将 index.ets 中的 markdown 变量改为以下代码（原内容见附件）

let markdown = "# Markdown 全语法示例与效果展示\n\n## 1. 标题（Headings）\n### 原文\n```\n# 一级标题\n## 二级标题\n### 三级标题\n#### 四级标题\n##### 五级标题\n###### 六级标题\n```\n### 渲染效果\n# 一级标题\n## 二级标题\n### 三级标题\n#### 四级标题\n##### 五级标题\n###### 六级标题\n\n## 2. 文本样式（Text Styles）\n### 原文\n```\n*斜体文本* 或 _斜体文本_\n**粗体文本** 或 __粗体文本__\n***粗斜体文本*** 或 ___粗斜体文本___\n~~删除线文本~~\n<mark>高亮文本</mark>\n<sup>上标文本</sup>\n<sub>下标文本</sub>\n```\n### 渲染效果\n*斜体文本* 或 _斜体文本_\n**粗体文本** 或 __粗体文本__\n***粗斜体文本*** 或 ___粗斜体文本___\n~~删除线文本~~\n<mark>高亮文本</mark>\n<sup>上标文本</sup>\n<sub>下标文本</sub>\n\n## 3. 列表（Lists）\n### 无序列表\n#### 原文\n```\n- 列表项一\n- 列表项二\n  - 嵌套子列表一\n  - 嵌套子列表二\n+ 另一种列表项\n* 第三种列表项\n```\n#### 渲染效果\n- 列表项一\n- 列表项二\n  - 嵌套子列表一\n  - 嵌套子列表二\n+ 另一种列表项\n* 第三种列表项\n\n### 有序列表\n#### 原文\n```\n1. 第一项\n2. 第二项\n   1. 子项一\n   2. 子项二\n3. 第三项\n```\n#### 渲染效果\n1. 第一项\n2. 第二项\n   1. 子项一\n   2. 子项二\n3. 第三项\n\n### 任务列表\n#### 原文\n```\n- [ ] 待完成任务\n- [x] 已完成任务\n- [ ] 进行中任务\n```\n#### 渲染效果\n- [ ] 待完成任务\n- [x] 已完成任务\n- [ ] 进行中任务\n\n## 4. 引用（Blockquotes）\n### 原文\n```\n> 这是一段基础引用\n> 多行引用可以连续使用>符号\n>\n> > 嵌套引用\n> > 这是第二层引用\n>\n> 回到第一层引用，可包含**加粗**和*斜体*格式\n```\n### 渲染效果\n> 这是一段基础引用\n> 多行引用可以连续使用>符号\n>\n> > 嵌套引用\n> > 这是第二层引用\n>\n> 回到第一层引用，可包含**加粗**和*斜体*格式\n\n## 5. 代码（Code）\n### 行内代码\n#### 原文\n```\n使用 `print(\"Hello World\")` 输出文本\n```\n#### 渲染效果\n使用 `print(\"Hello World\")` 输出文本\n\n### 代码块\n#### 原文\n```python\ndef quick_sort(arr):\n    if len(arr) <= 1:\n        return arr\n    pivot = arr[len(arr)//2]\n    left = [x for x in arr if x < pivot]\n    middle = [x for x in arr if x == pivot]\n    right = [x for x in arr if x > pivot]\n    return quick_sort(left) + middle + quick_sort(right)\n```\n#### 渲染效果\n```python\ndef quick_sort(arr):\n    if len(arr) <= 1:\n        return arr\n    pivot = arr[len(arr)//2]\n    left = [x for x in arr if x < pivot]\n    middle = [x for x in arr if x == pivot]\n    right = [x for x in arr if x > pivot]\n    return quick_sort(left) + middle + quick_sort(right)\n```\n\n## 6. 链接（Links）\n### 原文\n```\n[虎嗅官网](https://www.huxiu.com \"虎嗅APP\")\n<https://www.huxiu.com>\n[脚注示例][1]\n\n[1]: https://www.huxiu.com \"虎嗅官网\"\n```\n### 渲染效果\n[虎嗅官网](https://www.huxiu.com \"虎嗅APP\")\n<https://www.huxiu.com>\n[脚注示例][1]\n\n[1]: https://www.huxiu.com \"虎嗅官网\"\n\n## 7. 图片（Images）\n### 原文\n```\n![虎嗅LOGO](https://www.huxiu.com/static/images/favicon.ico \"虎嗅图标\")\n```\n### 渲染效果\n![虎嗅LOGO](https://www.huxiu.com/static/images/favicon.ico \"虎嗅图标\")\n\n## 8. 表格（Tables）\n### 原文\n```\n| 产品名称 | 价格 | 销量 |\n| -------- | ---- | ---- |\n| iPhone 16 | ¥5999 | 1200万 |\n| Huawei Pura80 | ¥4999 | 800万 |\n| Xiaomi 16 | ¥3999 | 1500万 |\n```\n### 渲染效果\n| 产品名称 | 价格 | 销量 |\n| -------- | ---- | ---- |\n| iPhone 16 | ¥5999 | 1200万 |\n| Huawei Pura80 | ¥4999 | 800万 |\n| Xiaomi 16 | ¥3999 | 1500万 |\n\n## 9. 分割线（Horizontal Rules）\n### 原文\n```\n---\n***\n___\n```\n### 渲染效果\n---\n***\n___\n\n## 10. 数学公式（Mathematical Formulas）\n### 行内公式\n#### 原文\n```\n爱因斯坦质能方程：$E = mc^2$\n```\n#### 渲染效果\n爱因斯坦质能方程：$E = mc^2$\n\n### 块级公式\n#### 原文\n```\n$$\\int_{-\\infty}^{\\infty} e^{-x^2} dx = \\sqrt{\\pi}$$\n```\n#### 渲染效果\n$$\\int_{-\\infty}^{\\infty} e^{-x^2} dx = \\sqrt{\\pi}$$\n\n## 11. 高级用法\n### 折叠面板\n#### 原文\n```\n<details>\n<summary>点击展开更多内容</summary>\n这里是折叠隐藏的详细信息，可以包含任意Markdown格式。\n</details>\n```\n#### 渲染效果\n<details>\n<summary>点击展开更多内容</summary>\n这里是折叠隐藏的详细信息，可以包含任意Markdown格式。\n</details>\n\n### 流程图\n#### 原文\n```mermaid\ngraph TD\nA[开始] --> B{条件判断}\nB -->|是| C[执行操作]\nB -->|否| D[结束]\n```\n#### 渲染效果\n```mermaid\ngraph TD\nA[开始] --> B{条件判断}\nB -->|是| C[执行操作]\nB -->|否| D[结束]\n```\n\n以上示例涵盖了Markdown的大部分常用语法，并展示了它们的渲染效果。这些语法适用于大多数主流Markdown编辑器和平台，包括GitHub、Stack Overflow、Notion等。[1][2][3];"

2. 新版本中，Normal模式下内容为空了
3. 您给的插件监听机制接入的示例代码中 this.engine.render!.add(new MyPlugin()); 应该是 this.engine.ast!.add(new MyPlugin()); 吧

[jiayou-tss]

首先感谢您开源词库，这是我遇到的扩展性最强的，鸿蒙 markdown 解析库，但在使用过程中还是遇到了一些问题。
一是流式输出模式下，会出现内容二次渲染或渲染不全的问题。 为了更好地复现此问题，我修改了Demo 里流式输出模式下的 step 跟 interval 参数（如图） 运行 Demo， 选择 Stream 模式。会很容易复现该问题。具体可见录屏。

在第 25 秒的时候，"注意事项"一行出现了二次渲染。
在第 34 秒的时候，不再渲染内容，但右边的日志还在持续输出。
直到视频末尾，可以看到日志输出了完整的内容，但左边的模拟器并没有将完整内容渲染出来。

二是之前提过的性能问题。查看代码，并未发现对 Normal 模式下的渲染有相关改动。实际测试时，发现 如果文本内容较长 Normal 模式下渲染还是会比较慢。
如下图，在 models.ets#164行 处打印日志，可以看到，这里执行了 197 次。这应该是解析耗时的主要原因，如果这个耗时问题不好解决，希望在解析完毕时可以给一个回调方法。

另外看到您在 1.0.3 版本中增加了 Update 模式。尚不清楚如何使用该模式。希望可以给出 Demo。
以上，尤其是第一条，希望可以尽快得到您的答复，再次感谢您的开源。

感谢反馈。
关于一 ：我们发现确实是问题，内部AST解析时异步的hash提取逻辑可能导致解析队列的回调顺序错乱，我们已经调整成了同步的提取策略；
关于二：性能优化主要体现在渲染环节，您提到的“长内容比较慢”主要是解析环节比较耗时，目前行业内流行的解析器都只能支持全量解析，暂时只能在使用时通过策略尽可能减少提交全量长内容的次数；
另外，最新的v1.0.4版本，我们在AST解析环节内置了插件监听机制，需要的话，可以参考以下方式接入：
import {
Markdown, BaseEngine,
AstServicePlugin, IAstPluginParse, EAstPlugin,
} from 'fluid-markdown';
class MyPlugin extends AstServicePlugin {
readonly type: EAstPlugin = EAstPlugin.Parse;
readonly handler: IAstPluginParse = {
willParse: (content) => {
},
didParse: (result) => {
},
};
}
ComponentV2
struct MyComponent {
private engine = new BaseEngine();
aboutToAppear() {
this.engine.render!.add(new MyPlugin());
}
build() {
...
Markdown({
engine: this.engine,
...
})
...
}
}

感谢。

经过测试，可以看到 1.0.4 版本相对之前版本异常情况少了一些，但还是有点问题，具体如下：

1. 多次渲染跟渲染不全问题仍能复现。

见录屏 10 到 15 秒 3. 列表（Lists） 附近有二次渲染现象（整个录屏中，此部分有多次渲染）；
在录屏结束时，可以看到并没有输出完整的内容
复现方式：修改流式输出模式下的 step 跟 interval 参数 const step = 20;、interval 改为 200；将 index.ets 中的 markdown 变量改为以下代码（原内容见附件）
let markdown = "# Markdown 全语法示例与效果展示\n\n## 1. 标题（Headings）\n### 原文\n\n# 一级标题\n## 二级标题\n### 三级标题\n#### 四级标题\n##### 五级标题\n###### 六级标题\n\n### 渲染效果\n# 一级标题\n## 二级标题\n### 三级标题\n#### 四级标题\n##### 五级标题\n###### 六级标题\n\n## 2. 文本样式（Text Styles）\n### 原文\n\n*斜体文本* 或 _斜体文本_\n**粗体文本** 或 __粗体文本__\n***粗斜体文本*** 或 ___粗斜体文本___\n~~删除线文本~~\n<mark>高亮文本</mark>\n<sup>上标文本</sup>\n<sub>下标文本</sub>\n\n### 渲染效果\n斜体文本 或 斜体文本\n粗体文本 或 粗体文本\n粗斜体文本 或 粗斜体文本\n删除线文本\n高亮文本\n^上标文本\n_下标文本\n\n## 3. 列表（Lists）\n### 无序列表\n#### 原文\n\n- 列表项一\n- 列表项二\n - 嵌套子列表一\n - 嵌套子列表二\n+ 另一种列表项\n* 第三种列表项\n\n#### 渲染效果\n- 列表项一\n- 列表项二\n - 嵌套子列表一\n - 嵌套子列表二\n+ 另一种列表项\n* 第三种列表项\n\n### 有序列表\n#### 原文\n\n1. 第一项\n2. 第二项\n 1. 子项一\n 2. 子项二\n3. 第三项\n\n#### 渲染效果\n1. 第一项\n2. 第二项\n 1. 子项一\n 2. 子项二\n3. 第三项\n\n### 任务列表\n#### 原文\n\n- [ ] 待完成任务\n- [x] 已完成任务\n- [ ] 进行中任务\n\n#### 渲染效果\n- [ ] 待完成任务\n- [x] 已完成任务\n- [ ] 进行中任务\n\n## 4. 引用（Blockquotes）\n### 原文\n\n> 这是一段基础引用\n> 多行引用可以连续使用>符号\n>\n> > 嵌套引用\n> > 这是第二层引用\n>\n> 回到第一层引用，可包含**加粗**和*斜体*格式\n\n### 渲染效果\n> 这是一段基础引用\n> 多行引用可以连续使用>符号\n>\n> > 嵌套引用\n> > 这是第二层引用\n>\n> 回到第一层引用，可包含加粗和斜体格式\n\n## 5. 代码（Code）\n### 行内代码\n#### 原文\n\n使用 `print(\"Hello World\")` 输出文本\n\n#### 渲染效果\n使用 print(\"Hello World\") 输出文本\n\n### 代码块\n#### 原文\npython\ndef quick_sort(arr):\n if len(arr) <= 1:\n return arr\n pivot = arr[len(arr)//2]\n left = [x for x in arr if x < pivot]\n middle = [x for x in arr if x == pivot]\n right = [x for x in arr if x > pivot]\n return quick_sort(left) + middle + quick_sort(right)\n\n#### 渲染效果\npython\ndef quick_sort(arr):\n if len(arr) <= 1:\n return arr\n pivot = arr[len(arr)//2]\n left = [x for x in arr if x < pivot]\n middle = [x for x in arr if x == pivot]\n right = [x for x in arr if x > pivot]\n return quick_sort(left) + middle + quick_sort(right)\n\n\n## 6. 链接（Links）\n### 原文\n\n[虎嗅官网](https://www.huxiu.com \"虎嗅APP\")\n<https://www.huxiu.com>\n[脚注示例][1]\n\n[1]: https://www.huxiu.com \"虎嗅官网\"\n\n### 渲染效果\n[虎嗅官网](https://www.huxiu.com "虎嗅APP")\nhttps://www.huxiu.com\n[脚注示例][1]\n\n[1]: https://www.huxiu.com "虎嗅官网"\n\n## 7. 图片（Images）\n### 原文\n\n![虎嗅LOGO](https://www.huxiu.com/static/images/favicon.ico \"虎嗅图标\")\n\n### 渲染效果\n\n\n## 8. 表格（Tables）\n### 原文\n\n| 产品名称 | 价格 | 销量 |\n| -------- | ---- | ---- |\n| iPhone 16 | ¥5999 | 1200万 |\n| Huawei Pura80 | ¥4999 | 800万 |\n| Xiaomi 16 | ¥3999 | 1500万 |\n\n### 渲染效果\n| 产品名称 | 价格 | 销量 |\n| -------- | ---- | ---- |\n| iPhone 16 | ¥5999 | 1200万 |\n| Huawei Pura80 | ¥4999 | 800万 |\n| Xiaomi 16 | ¥3999 | 1500万 |\n\n## 9. 分割线（Horizontal Rules）\n### 原文\n\n---\n***\n___\n\n### 渲染效果\n---\n***\n___\n\n## 10. 数学公式（Mathematical Formulas）\n### 行内公式\n#### 原文\n\n爱因斯坦质能方程：$E = mc^2$\n\n#### 渲染效果\n爱因斯坦质能方程：$E = mc^2$\n\n### 块级公式\n#### 原文\n\n$$\\int_{-\\infty}^{\\infty} e^{-x^2} dx = \\sqrt{\\pi}$$\n\n#### 渲染效果\n$$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$\n\n## 11. 高级用法\n### 折叠面板\n#### 原文\n\n<details>\n<summary>点击展开更多内容</summary>\n这里是折叠隐藏的详细信息，可以包含任意Markdown格式。\n</details>\n\n#### 渲染效果\n

\n

点击展开更多内容

\n这里是折叠隐藏的详细信息，可以包含任意Markdown格式。\n

\n\n### 流程图\n#### 原文\nmermaid\ngraph TD\nA[开始] --> B{条件判断}\nB -->|是| C[执行操作]\nB -->|否| D[结束]\n\n#### 渲染效果\nmermaid\ngraph TD\nA[开始] --> B{条件判断}\nB -->|是| C[执行操作]\nB -->|否| D[结束]\n\n\n以上示例涵盖了Markdown的大部分常用语法，并展示了它们的渲染效果。这些语法适用于大多数主流Markdown编辑器和平台，包括GitHub、Stack Overflow、Notion等。[1][2][3];"

2. 新版本中，Normal模式下内容为空了
3. 您给的插件监听机制接入的示例代码中 this.engine.render!.add(new MyPlugin()); 应该是 this.engine.ast!.add(new MyPlugin()); 吧

1. 感谢反馈，我们再排查下
2. 提交遗漏了，已补充了处理，可以更新v1.0.5试试
3. 多谢指正，已修改

[GithubGaoYang]

感谢您的及时响应，目前 1.0.5 版本 Normal 模式已经可以正常渲染内容了。
我将持续关注并期待您发布新版本，修复流式输出的多次渲染和渲染不全问题。
再次感谢！

[jiayou-tss]

感谢您的及时响应，目前 1.0.5 版本 Normal 模式已经可以正常渲染内容了。 我将持续关注并期待您发布新版本，修复流式输出的多次渲染和渲染不全问题。 再次感谢！

鸿蒙的1.0.7版本对解析模块添加了队列机制，来解决渲染回溯的问题，可以更新试试 =)
如果发现仍然有疑似“多次渲染”的问题，可以确认下是否有targets length less than fragments length, unexpected unintended refresh相关的日志，如果没有，应该只是解析后更新的预期内现象。

[GithubGaoYang]

感谢您的及时响应，目前 1.0.5 版本 Normal 模式已经可以正常渲染内容了。 我将持续关注并期待您发布新版本，修复流式输出的多次渲染和渲染不全问题。 再次感谢！

鸿蒙的1.0.7版本对解析模块添加了队列机制，来解决渲染回溯的问题，可以更新试试 =) 如果发现仍然有疑似“多次渲染”的问题，可以确认下是否有targets length less than fragments length, unexpected unintended refresh相关的日志，如果没有，应该只是解析后更新的预期内现象。

感谢。

使用 #59 (comment) 所述的修改，测试发现 1.0.7 版本仍然存在渲染异常问题，但表现发生了一些变化，具体如下（录屏）：
1、如 图一，在录屏第 17 秒时，出现了内容重叠
2、如 图二，在录屏第 42 秒时，底部“渲染效果”四个字，出现了丢字现象

另外，新版本中，发现一些 表格/代码块 渲染时，存在“等待”的现象，比如录屏第 45 秒，能看到表格内容是在等了一小会后才一起渲染出来的

PS: 测试全程未发现打印 targets length less than fragments length, unexpected unintended refresh 相关日志

以上，辛苦您抽时间继续看一下，期待下一个版本。

感恩。

[jiayou-tss]

感谢您的及时响应，目前 1.0.5 版本 Normal 模式已经可以正常渲染内容了。 我将持续关注并期待您发布新版本，修复流式输出的多次渲染和渲染不全问题。 再次感谢！

鸿蒙的1.0.7版本对解析模块添加了队列机制，来解决渲染回溯的问题，可以更新试试 =) 如果发现仍然有疑似“多次渲染”的问题，可以确认下是否有targets length less than fragments length, unexpected unintended refresh相关的日志，如果没有，应该只是解析后更新的预期内现象。

感谢。

使用 #59 (comment) 所述的修改，测试发现 1.0.7 版本仍然存在渲染异常问题，但表现发生了一些变化，具体如下（录屏）： 1、如 图一，在录屏第 17 秒时，出现了内容重叠 2、如 图二，在录屏第 42 秒时，底部“渲染效果”四个字，出现了丢字现象

另外，新版本中，发现一些 表格/代码块 渲染时，存在“等待”的现象，比如录屏第 45 秒，能看到表格内容是在等了一小会后才一起渲染出来的

PS: 测试全程未发现打印 targets length less than fragments length, unexpected unintended refresh 相关日志

以上，辛苦您抽时间继续看一下，期待下一个版本。

感恩。

使用您提供的用例数据#59 (comment)，我们发现在AST解析过程中异步提取高亮代码块的环节还有可能引入渲染回溯问题，最新发布的1.0.8版本已经对这里进行了修复。

另外，您提到的“丢字现象”、“内容重叠”问题，我们发现主要是由于 stream 模式下 step=20 非常容易打散用例数据中较多使用的 code-block 语法，渲染时 code-block 使用的是FluidMarkdown的原生Component嵌入机制，渲染任务比较重，容易造成渲染拥堵，频繁提交的渲染任务单帧无法及时响应。这类情况比较难处理，实际线上生产环境中，流式输出时，还是希望能够尽量降低待解析内容的提交频度，这样用户的使用体验会好一些。用例数据中 step 调整为 100，效果也会好一点。

欢迎您继续更新体验 =)

[GithubGaoYang]

感谢您的及时响应，目前 1.0.5 版本 Normal 模式已经可以正常渲染内容了。 我将持续关注并期待您发布新版本，修复流式输出的多次渲染和渲染不全问题。 再次感谢！

鸿蒙的1.0.7版本对解析模块添加了队列机制，来解决渲染回溯的问题，可以更新试试 =) 如果发现仍然有疑似“多次渲染”的问题，可以确认下是否有targets length less than fragments length, unexpected unintended refresh相关的日志，如果没有，应该只是解析后更新的预期内现象。

感谢。
使用 #59 (comment) 所述的修改，测试发现 1.0.7 版本仍然存在渲染异常问题，但表现发生了一些变化，具体如下（录屏）： 1、如 图一，在录屏第 17 秒时，出现了内容重叠 2、如 图二，在录屏第 42 秒时，底部“渲染效果”四个字，出现了丢字现象
另外，新版本中，发现一些 表格/代码块 渲染时，存在“等待”的现象，比如录屏第 45 秒，能看到表格内容是在等了一小会后才一起渲染出来的
PS: 测试全程未发现打印 targets length less than fragments length, unexpected unintended refresh 相关日志
以上，辛苦您抽时间继续看一下，期待下一个版本。
感恩。

使用您提供的用例数据#59 (comment)，我们发现在AST解析过程中异步提取高亮代码块的环节还有可能引入渲染回溯问题，最新发布的1.0.8版本已经对这里进行了修复。

另外，您提到的“丢字现象”、“内容重叠”问题，我们发现主要是由于 stream 模式下 step=20 非常容易打散用例数据中较多使用的 code-block 语法，渲染时 code-block 使用的是FluidMarkdown的原生Component嵌入机制，渲染任务比较重，容易造成渲染拥堵，频繁提交的渲染任务单帧无法及时响应。这类情况比较难处理，实际线上生产环境中，流式输出时，还是希望能够尽量降低待解析内容的提交频度，这样用户的使用体验会好一些。用例数据中 step 调整为 100，效果也会好一点。

欢迎您继续更新体验 =)

1.0.8版本稳定性确实提升了不少，感谢您的付出，我们后期会择期正式接入。
在这之前，还有个与该issue关联不大的问题，即：部分格式不会渲染，如

// html 标签
<h1>一级标题</h1>
<div>一级标题</div>

// 公式
$$E = mc^2$$

理解现在不是所有标签都支持，但希望可以支持将无法渲染的格式按纯文本样式原样输出，以免内容丢失。

此问题回复后就可以关闭该issue了，后续实际接入时如果遇到新的问题再新开issue向您请教。

同时也期待该库的持续优化。

辛苦了。感谢。

[jiayou-tss]

理解现在不是所有标签都支持，但希望可以支持将无法渲染的格式按纯文本样式原样输出，以免内容丢失。

FluidMarkdown对未支持的能力，默认为不展示，ios、android、harmony三端一致。

鸿蒙平台可以通过plugin来改变这个默认的策略：

• 针对html标签，最新的1.0.9版本开放了标识内置html tag的EHtmlTag枚举类型，可以判断FluidMarkdown是否内置处理，同时，ast service开放toHtml()接口，可以将 Node 节点转换为 html 格式的文本

• 针对数学公式，当前版本尚未支持渲染，但后续版本中将提供支持，如果需要展示原文，也可以进行拦截定制

import { 
  Markdown, BaseEngine,
  RenderServicePlugin, IRenderPluginStyledBuilding, ERenderPlugin, 
  ENode, HtmlTag, ELayout, Math, EHtmlTag,
} from 'fluid-markdown'

class MyPlugin extends RenderServicePlugin<IRenderPluginStyledBuilding> {
  readonly type: ERenderPlugin = ERenderPlugin.StyledBuilding;
  readonly handler: IRenderPluginStyledBuilding = {
    should: (styled, buildOption) => {
      if (styled.node?.is(ENode.HtmlTag)) {
        const html = styled.node as HtmlTag;
        if (Object.values<string>(EHtmlTag).indexOf(html?.tagName || '') === -1) {
          return true;
        }
      }
      if (styled.node?.is(ENode.Math)) {
        return true;
      }
      return false;
    },
    building: (styled, buildOption) => {
      if (styled.node?.is(ENode.HtmlTag)) {
        const html = styled.node as HtmlTag;
        if (Object.values<string>(EHtmlTag).indexOf(html?.tagName || '') === -1) {
          const htmlString = buildOption.engine.ast?.toHtml(html);
          //  do something
        }
      }
      if (styled.node?.is(ENode.Math)) {
        const math = styled.node as Math;
        const mathString = math.content;
        //  do something
      }
    },
  };
}

ComponentV2
struct MyComponent {
  private engine = new BaseEngine();
  aboutToAppear() {
    this.engine.render!.add(new MyPlugin());
  }
  build() {
    ...
    Markdown({
      engine: this.engine,
      ...
    })
    ...
  }
}

[jiayou-tss]

building: (styled, buildOption) => {
if (styled.node?.is(ENode.HtmlTag)) {
const html = styled.node as HtmlTag;
if (Object.values(EHtmlTag).indexOf(html?.tagName || '') === -1) {
const htmlString = buildOption.engine.ast?.toHtml(html);
// do something
}
}
if (styled.node?.is(ENode.Math)) {
const math = styled.node as Math;
const mathString = math.content;
// do something
}
},

补充下，纯文本的渲染比较简单，可以直接参考 render 模块内置的 TextStyled 的实现

[GithubGaoYang]

理解现在不是所有标签都支持，但希望可以支持将无法渲染的格式按纯文本样式原样输出，以免内容丢失。

FluidMarkdown对未支持的能力，默认为不展示，ios、android、harmony三端一致。

鸿蒙平台可以通过plugin来改变这个默认的策略：

• 针对html标签，最新的1.0.9版本开放了标识内置html tag的EHtmlTag枚举类型，可以判断FluidMarkdown是否内置处理，同时，ast service开放toHtml()接口，可以将 Node 节点转换为 html 格式的文本
• 针对数学公式，当前版本尚未支持渲染，但后续版本中将提供支持，如果需要展示原文，也可以进行拦截定制

import {
Markdown, BaseEngine,
RenderServicePlugin, IRenderPluginStyledBuilding, ERenderPlugin,
ENode, HtmlTag, ELayout, Math, EHtmlTag,
} from 'fluid-markdown'

class MyPlugin extends RenderServicePlugin {
readonly type: ERenderPlugin = ERenderPlugin.StyledBuilding;
readonly handler: IRenderPluginStyledBuilding = {
should: (styled, buildOption) => {
if (styled.node?.is(ENode.HtmlTag)) {
const html = styled.node as HtmlTag;
if (Object.values(EHtmlTag).indexOf(html?.tagName || '') === -1) {
return true;
}
}
if (styled.node?.is(ENode.Math)) {
return true;
}
return false;
},
building: (styled, buildOption) => {
if (styled.node?.is(ENode.HtmlTag)) {
const html = styled.node as HtmlTag;
if (Object.values(EHtmlTag).indexOf(html?.tagName || '') === -1) {
const htmlString = buildOption.engine.ast?.toHtml(html);
// do something
}
}
if (styled.node?.is(ENode.Math)) {
const math = styled.node as Math;
const mathString = math.content;
// do something
}
},
};
}

ComponentV2
struct MyComponent {
private engine = new BaseEngine();
aboutToAppear() {
this.engine.render!.add(new MyPlugin());
}
build() {
...
Markdown({
engine: this.engine,
...
})
...
}
}

感谢。

测试过程中又发现个新问题，希望后面有时间可以迭代处理下。
1、EventService 的 onLongPress 不回调；
2、渲染过程中存在较为明显的UI卡顿问题，复现方式如图，修改代码后运行程序，进入Normal模式，可以看到 LoadingProgress 动画卡顿，使用用例数据#59 (comment) 会更明显

[GithubGaoYang]

顺便问一下，该库是否已支持（或计划支持）通过 ohpm install 而非引入源码使用？

[GithubGaoYang]

理解现在不是所有标签都支持，但希望可以支持将无法渲染的格式按纯文本样式原样输出，以免内容丢失。

FluidMarkdown对未支持的能力，默认为不展示，ios、android、harmony三端一致。
鸿蒙平台可以通过plugin来改变这个默认的策略：

• 针对html标签，最新的1.0.9版本开放了标识内置html tag的EHtmlTag枚举类型，可以判断FluidMarkdown是否内置处理，同时，ast service开放toHtml()接口，可以将 Node 节点转换为 html 格式的文本
• 针对数学公式，当前版本尚未支持渲染，但后续版本中将提供支持，如果需要展示原文，也可以进行拦截定制

import {
Markdown, BaseEngine,
RenderServicePlugin, IRenderPluginStyledBuilding, ERenderPlugin,
ENode, HtmlTag, ELayout, Math, EHtmlTag,
} from 'fluid-markdown'
class MyPlugin extends RenderServicePlugin {
readonly type: ERenderPlugin = ERenderPlugin.StyledBuilding;
readonly handler: IRenderPluginStyledBuilding = {
should: (styled, buildOption) => {
if (styled.node?.is(ENode.HtmlTag)) {
const html = styled.node as HtmlTag;
if (Object.values(EHtmlTag).indexOf(html?.tagName || '') === -1) {
return true;
}
}
if (styled.node?.is(ENode.Math)) {
return true;
}
return false;
},
building: (styled, buildOption) => {
if (styled.node?.is(ENode.HtmlTag)) {
const html = styled.node as HtmlTag;
if (Object.values(EHtmlTag).indexOf(html?.tagName || '') === -1) {
const htmlString = buildOption.engine.ast?.toHtml(html);
// do something
}
}
if (styled.node?.is(ENode.Math)) {
const math = styled.node as Math;
const mathString = math.content;
// do something
}
},
};
}
ComponentV2
struct MyComponent {
private engine = new BaseEngine();
aboutToAppear() {
this.engine.render!.add(new MyPlugin());
}
build() {
...
Markdown({
engine: this.engine,
...
})
...
}
}

感谢。

测试过程中又发现个新问题，希望后面有时间可以迭代处理下。 1、EventService 的 onLongPress 不回调； 2、渲染过程中存在较为明显的UI卡顿问题，复现方式如图，修改代码后运行程序，进入Normal模式，可以看到 LoadingProgress 动画卡顿，使用用例数据#59 (comment) 会更明显

补充一下，关于第一点，本意是想实现类似 iOS 端，灵光 或蚂蚁阿福 APP 长按选择整段文字的功能。如果后期会支持类似功能的话，希望可以提供示例代码，谢谢。

[GithubGaoYang]

TL;DR: 可以忽略之前的多个回复，总结如下：

1、EventService 的 onLongPress 不回调；

关于该问题，本意是想实现类似 灵光 或 蚂蚁阿福 iOS 端 长按选择整段文字的功能。

经排查，要实现该功能，可能需要做以下修改：
1、LongPressGesture().onAction 方法中需调用 TextComponentController 的 selectGesture 方法
2、getGlyphPositionAtCoordinate 方法的参数，需要单位转换（vp2px）
3、nearbyParagraph 方法的返回值，end参数的值需要+1

以上，仅供参考，希望对您的排查有用

排查后发现，实现长按选择整段功能可能无需使用onLongPress回调

2、渲染过程中存在较为明显的UI卡顿问题，复现方式如图，修改代码后运行程序，进入Normal模式，可以看到 LoadingProgress 动画卡顿，使用用例数据#59 (comment) 会更明显

3、想咨询一下，该库是否已支持（或计划支持）通过 ohpm install 而非引入源码使用？

[jiayou-tss]

TL;DR: 可以忽略之前的多个回复，总结如下：

1、EventService 的 onLongPress 不回调；

关于该问题，本意是想实现类似 灵光 或 蚂蚁阿福 iOS 端 长按选择整段文字的功能。
经排查，要实现该功能，可能需要做以下修改：
1、LongPressGesture().onAction 方法中需调用 TextComponentController 的 selectGesture 方法
2、getGlyphPositionAtCoordinate 方法的参数，需要单位转换（vp2px）
3、nearbyParagraph 方法的返回值，end参数的值需要+1
以上，仅供参考，希望对您的排查有用

排查后发现，实现长按选择整段功能可能无需使用onLongPress回调

2、渲染过程中存在较为明显的UI卡顿问题，复现方式如图，修改代码后运行程序，进入Normal模式，可以看到 LoadingProgress 动画卡顿，使用用例数据#59 (comment) 会更明显

3、想咨询一下，该库是否已支持（或计划支持）通过 ohpm install 而非引入源码使用？

1. 是的，目前FluidMarkdown回调的Event主要是内部节点可能产生的事件，比如点击。其他的交互功能可以在外部场景中实现。
2. markdown的解析和富文本处理目前都在主线程，还无法与其他主线程UI动效并存，可以尝试使用静态的提示方式
3. 暂时还没有计划