【HarmonyOS】鸿蒙怎么拓展自定义语法

[GGboyGGboy]

后端给的文本流中插入了特地的卡片对象信息，希望可以根据这些信息渲染一个卡片列表，如正则匹配到 <<<! 时需要自己解析后面的数据 。有没有开放的接口可以定义解析规则与定制UI？

[jiayou-tss]

FluidMarkdown在渲染环节提供了非侵入式的plugin拦截能力，针对定制的诉求，有两种解决方案：

• 将待定制内容转换为 html-inline 标准格式，比如

<my-tag-name>{ "key": "value" }</my-tag-name>

• 将待定制内容转换为 code-block 标准格式，比如

\`\`\` my-block
{"key": "value"}
\`\`\`

在 render 的 plugin 中可以对待渲染节点进行拦截：

import { 
  Markdown, BaseEngine,
  RenderServicePlugin, IRenderPluginStyledBuilding, ERenderPlugin, 
  ENode, HtmlTag, ELayout, Code,
} 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 (html.tagName === 'my-tag-name') {
          return true;
        }
      }
      if (styled.node?.is(ENode.Code) && styled.node?.layout === ELayout.Block) {
        const code = styled.node as Code;
        if (code.language === 'my-block') {
          return true;
        }
      }
      return false;
    },
    building: (styled, buildOption) => {
      //	do something
    },
  };
}

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

推荐使用 code-block 的定制方式，对待解析的内容格式比较友好

[GGboyGGboy]

这个拓展是不是只能通过像build-in的方式自己draw？不支持传入Component组件么？

[jiayou-tss]

这个拓展是不是只能通过像build-in的方式自己draw？不支持传入Component组件么？

通过plugin拦截渲染入口后，如果希望使用自定义的component组件，需要修改源码中的组件嵌入流程，类似块级语法高亮节点CodeStyled 的实现：

• 在 component builder 内注册自定义的component，同时更新对应的 EStyledEmbedBuilder 枚举值
• 通过StyledEmbed节点模型，在渲染阶段绑定builder内注册的component，具体可以参考 CodeStyled.buildingBlock的实现

[GGboyGGboy]

我使用Code来做我的自定义组件，但是会有个空白的间距是我不需要的，且没找到可以控制的参数。
如存入参数 ：
@Local message: string = 'Hello World + \njava\n我是谁\n\n你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是' +
'谁你是谁你是谁你是谁你是谁你是谁你是谁+\njava\n我是谁\n\n谁你是谁你是谁你是谁你是谁你是谁\njava\n我是谁\n\njava\n我是谁\n\n你是谁';
效果图如：

自定义出来的也是带有一个这么大的间距

[jiayou-tss]

code-block 在fluid-markdown中是一类嵌入的组件，布局时在垂直方向会有块间的偏移，可以试试设置 theme 内 document 的 blockSpace 来调整这个偏移值，默认是12vp，主题配置可以参考这里

[GGboyGGboy]

我尝试修改blockSpace的值为0，但是效果只是文本更加贴近上面的组件了，对组件的位置并没有影响，如果是两个组件相连，中间没有文本，间距还是一样大。

[GGboyGGboy]

注释这个就解决了//letterSpacing: { spacing: MDLength.vp(0.5) },

[GGboyGGboy]

每次修改输入参数都会闪一下。
代码如：
@entry
@ComponentV2
struct Index {
@Local message: string = 'Hello World + \njava\n我是谁\n\n你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是' +
'谁你是谁你是谁你是谁你是谁你是谁你是谁+\njava\n我是谁\n\n谁你是谁你是谁你是谁你是谁你是谁\njava\n我是谁\n\njava\n我是谁\n\n你是谁';

// @Local message: string = 'Hello World 你是谁';

aboutToAppear(): void {
setInterval(() => {
this.message = this.message + '增加字符串';
},1000)
}

build() {
RelativeContainer() {
Markdown({
content: this.message
})
.width('100%')
.height('100%')
}
.height('100%')
.width('100%')
}
}

如果message包含code类型数据，后续增加内容都会闪一下，如果messagez只是普通字符串// @Local message: string = 'Hello World 你是谁';就不会有这个问题。

[jiayou-tss]

每次修改输入参数都会闪一下。 代码如： @entry @ComponentV2 struct Index { @Local message: string = 'Hello World + \njava\n我是谁\n\n你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是' + '谁你是谁你是谁你是谁你是谁你是谁你是谁+\njava\n我是谁\n\n谁你是谁你是谁你是谁你是谁你是谁\njava\n我是谁\n\njava\n我是谁\n\n你是谁';

// @Local message: string = 'Hello World 你是谁';

aboutToAppear(): void { setInterval(() => { this.message = this.message + '增加字符串'; },1000) }

build() { RelativeContainer() { Markdown({ content: this.message }) .width('100%') .height('100%') } .height('100%') .width('100%') } }

如果message包含code类型数据，后续增加内容都会闪一下，如果messagez只是普通字符串// @Local message: string = 'Hello World 你是谁';就不会有这个问题。

如果内容会不断变化，类似AI智能会话类的应用场景，可以通过 Typing 模式更新 fluid-markdown。Normal 模式每次content内容变更时，会清理历史内容，code-block 类的节点会被先移除，再重新创建，会有“闪”的现象；如果是 Typing 模式，内部会有缓存复用机制，可以维持code-block节点不清理，仅更新。

[GGboyGGboy]

我使用code-block拓展了一个卡片类型
@builder
export function buildComponent(builder: StyledEmbed) {
if (builder.embedOption.builderType === EStyledEmbedBuilder.Table) {
TableComponent({
styledEmbed: builder,
})
} else if (builder.embedOption.builderType === EStyledEmbedBuilder.Code) {
CodeComponent({
styledEmbed: builder,
})
} else if (builder.embedOption.builderType === EStyledEmbedBuilder.ImageGallery) {
ImageGalleryComponent({
styledEmbed: builder,
})
} else if (builder.embedOption.builderType === EStyledEmbedBuilder.MyCard) {
MyCardComponent({
styledEmbed: builder,
})
}
}

readonly handler: IRenderPluginStyledBuilding = {
should: (styled: Styled, buildOption: IStyledBuild): boolean => {
if (styled.node?.is(ENode.Code) && styled.node?.layout === ELayout.Block) {
const code = styled.node as Code;
if (code.language === 'my-card') {
return true;
}
}
return false;
},
building: (styled: Styled, buildOption: IStyledBuild): void => {
let data = styled?.node?.content ?? '';
const jsonContent: PolymorphicModel = JSON.parse(data) as PolymorphicModel;
const group = StyledObject.group({ styled: styled }, [
new StyledLetterSpacingValue({
spacing: MDLength.vp(0)
}),
]);
buildOption.didCreateStyled(group);
group.attach(new StyledEmbed(
{ styled: styled },
{
initMetrics: { width: group.blockArea?.width?.value ?? 0 },
builderType: EStyledEmbedBuilder.MyCard,
embedController: new StyledEmbedController(),
theme: buildOption.theme,
buildComponent: this.buildCardByType(jsonContent),
buildData: this.messageModel
},
));
}

在Typing 模式下不显示， Normal模式下显示正常，就是每次新增内容后都会触发刷新。