Hi, any possible interface to add a very simple WidgetSpan to markdown widget?

[lucasjinreal]

Am using this markdown_widget lib, its extremly powerful and useful.

markdown works like a charm. but now, I have a very very tiny simple demand.

I want detect a certrain parttern, and shows only parts of text as a WidgetSpan.

For exmaple:

this is actually markdown widget,

But I want detect this partten, and shows 英翻中 as this:

is there a way to do it?

[asjqkkkk]

Hi @lucasjinreal , there is already a sample for custom html tag:

https://github.com/asjqkkkk/markdown_widget/blob/master/example/lib/markdown_custom/video.dart

In your case, you need create SpanNodeGeneratorWithTag with cmd tag, then use textGenerator with CustomTextNode

the sample code for cmdGeneratorWithTag

import 'package:flutter/material.dart';
import 'package:markdown_widget/markdown_widget.dart';

class CMDNode extends ElementNode {
  @override
  InlineSpan build() {
    return WidgetSpan(
        child: Container(
      padding: EdgeInsets.all(8),
      decoration: BoxDecoration(
          color: Colors.yellow,
          borderRadius: BorderRadius.all(Radius.circular(4))),
      child: Text.rich(childrenSpan),
    ));
  }
}

SpanNodeGeneratorWithTag cmdGeneratorWithTag = SpanNodeGeneratorWithTag(
    tag: _cmdTag, generator: (e, config, visitor) => CMDNode());

const _cmdTag = 'cmd';

[lucasjinreal]

@asjqkkkk hi, seems not work:

 linesMargin: const EdgeInsets.symmetric(horizontal: 4),
                generators: [
                  videoGeneratorWithTag,
                  latexGenerator,
                  cmdGeneratorWithTag,
                ],
                inlineSyntaxList: [LatexSyntax()],
              ).buildWidgets(
                message.text,
                config: isDark
                    ? MarkdownConfig.darkConfig.copy(
                        configs: _getMarkdownConfigs(
                          isDark,
                          bodyTextStyle,
                          codeWrapper,
                        ),
                      )
                    : MarkdownConfig.defaultConfig.copy(
                        configs: _getMarkdownConfigs(
                          isDark,
                          bodyTextStyle,
                          codeWrapper,
                        ),
                      ),

[asjqkkkk]

@lucasjinreal you need use textGenerator with CustomTextNode to enable html parser

textGenerator: (node, config, visitor) =>
                          CustomTextNode(node.textContent, config, visitor)

https://github.com/asjqkkkk/markdown_widget/blob/master/example/lib/markdown_custom/custom_node.dart

[lucasjinreal]

I just need will html effect other nodes?

MarkdownGenerator(
                linesMargin: const EdgeInsets.symmetric(horizontal: 4),
                generators: [
                  videoGeneratorWithTag,
                  latexGenerator,
                  cmdGeneratorWithTag,
                ],
                inlineSyntaxList: [LatexSyntax()],
                textGenerator: (node, config, visitor) => CMDNode(),
              ).buildWidgets(
                message.text,
                config: isDark
                    ? MarkdownConfig.darkConfig.copy(
                        configs: _getMarkdownConfigs(
                          isDark,
                          bodyTextStyle,
                          codeWrapper,
                        ),
                      )
                    : MarkdownConfig.defaultConfig.copy(
                        configs: _getMarkdownConfigs(
                          isDark,
                          bodyTextStyle,
                          codeWrapper,
                        ),
                      ),
              ),
            ),

[asjqkkkk]

@lucasjinreal CustomTextNode is used to parsing html tags, you should not replace it as CMDNode

[lucasjinreal]

@asjqkkkk hi, the <cmd></cmd> is just I designed for parse a certain pattern, how to make it work without effecting other html parse? On my side, I don't know how to reveal your effect.

[asjqkkkk]

There is the example code:

MarkdownWidget(
                  data: data,
                  markdownGenerator: MarkdownGenerator(
                      generators: [videoGeneratorWithTag, latexGenerator, cmdGeneratorWithTag],
                      inlineSyntaxList: [LatexSyntax()],
                      textGenerator: (node, config, visitor) =>
                          CustomTextNode(node.textContent, config, visitor)),
                )

class CMDNode extends ElementNode {
  @override
  InlineSpan build() {
    return WidgetSpan(
        child: Container(
      padding: EdgeInsets.all(8),
      decoration: BoxDecoration(
          color: Colors.yellow,
          borderRadius: BorderRadius.all(Radius.circular(4))),
      child: Text.rich(childrenSpan),
    ));
  }
}

SpanNodeGeneratorWithTag cmdGeneratorWithTag = SpanNodeGeneratorWithTag(
    tag: _cmdTag, generator: (e, config, visitor) => CMDNode());

const _cmdTag = 'cmd';