[flutter_markdown] please allow custom block elements

[sma]

Is there an existing issue for this?

• I have searched the existing issues
• I have read the guide to filing a bug

Use case

I tried to add my own custom block element using a blockSyntaxes: const [NoteSyntax()], declaration in the Markdown widget. My NoteSyntax creates an Element('note', children) which then eventually gets passed to the visitor that creates widgets.

I tried to add my own builder using builders: {'note': NoteBuilder()}, in the Markdown widget, but this is never called because MarkdownBuilder.visitElementBefore uses a private function _isBlockTag to determine whether the provided Element is a block element by comparing its tag to a hardcoded list of tags.

Therefore, it incorrectly thinks my Element is an inline element and crashes ¹ because _addParentInlineIfNeeded wants add an inline element that requires a tag but the parent of my block node is the document which has no tag.

Proposal

I'd suggest to dispatch the isBlock call to the element itself – or let me extend that list.

Footnotes

1. See line 632 of builder.dart, style: styleSheet.styles[tag!],. ↩

[dam-ease]

Hi @sma. Thanks for filing this!

I tried to add my own builder using builders: {'note': NoteBuilder()}, in the Markdown widget, but this is never called because MarkdownBuilder.visitElementBefore uses a private function _isBlockTag to determine whether the provided Element is a block element by comparing its tag to a hardcoded list of tags.

Can you share a completed and minimal reproducible code sample that we can use to reproduce this.
Also, this might be similar to #127425, can you check it out??

[sma]

#127425 has the same reason: An Element tagged section isn't detected as a block element. It's probably this one.

If I add 'section' to the _kBlockTags, it works:

Regarding my problem, here's a minimal example that work if I add 'note' to _kBlockTags and which fails otherwise. Hence my suggestion to allow for custom block elements instead of hardcoding them.

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

// ignore: depend_on_referenced_packages
import 'package:markdown/markdown.dart' as md;

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Markdown(
          data: '# Hallo Welt\n[!NOTE] Dies ist eine wichtige Nachricht.',
          // data: 'Foo[^1] bar.\n\n[^1]: Baz.',
          blockSyntaxes: const [NoteSyntax()],
          builders: {'note': NoteBuilder()},
        ),
      ),
    );
  }
}

class NoteBuilder extends MarkdownElementBuilder {
  // super class forgot to declare a const constructor
  // const NoteBuilder();

  @override
  Widget? visitText(md.Text text, TextStyle? preferredStyle) {
    return Container(color: Colors.red, child: Text(text.text, style: preferredStyle));
  }
}

class NoteSyntax extends md.BlockSyntax {
  const NoteSyntax();

  @override
  md.Node? parse(md.BlockParser parser) {
    final line = parser.current;
    parser.advance();
    return md.Element('note', [md.Text(line.content.substring(8))]);
  }

  @override
  RegExp get pattern => RegExp(r'^\[!NOTE] ');
}

[dawidope]

Hi, you are right about section tag. It was the main issue in #127425.

Element object doesn't know if it's a block. I don't see any way to make a connection between BlockSyntax and MarkdownElementBuilder right now. I mean that the MarkdownBuilder has to receive the information about the type from the developer. I can propose two solutions:

1. Add to MarkdownElementBuilder's constructor isBlock parameter.
2. Split builders into inLineBuilders and blockBuilders.

I can create PR when we find out the best solution.

[stuartmorgan]

/cc @tarrinneal

[Balin-P]

Any update on this? Trying to build a custom list block that can use different bullet points per level, but this doesn't seem possible with the way the code is currently structured. Getting the same error where it thinks my custom block element is an inline one.

[Balin-P]

Managed to fix this issue for myself by adding an extra parameter to MarkdownBuilder which is a List of Strings that gets added to kBlockTags when _isBlockTag (which I also moved into the class) gets called.

Also had to add a call to check the builders for my custom tag in the visitElementAfter method of MarkdownBuilder as there didn't seem to be any way of it doing that on its own.