How to remove tags or classes from the HTML inside a factory

[DFelten]

We are currently building in a collapsible widget factory. However, the current problem is that the initial state can also be hidden. This is solved on the web via display:none. We get the tag inline in the html, which of course is not currently parsed.

Is there any way with a factory to remove certain classes or tags? We would like to get to the class, read whether the content should be displayed, and then remove the display none from the tree.

Our current widget factory:

mixin TMXCollapseFactory on WidgetFactory {
  @override
  void parse(BuildMetadata meta) {
    if (meta.element.classes.contains('accordion-section')) {
      Widget? header;

      meta.register(
        BuildOp(
          onChild: (collapseMeta) {
            // ignore grand children etc.
            if (collapseMeta.element.parent != meta.element) {
              return;
            }

            if (collapseMeta.element.classes.contains('accordion-header')) {
              collapseMeta.register(
                BuildOp(
                  onWidgets: (_, widgets) {
                    header = AbsorbPointer(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: widgets.toList(),
                      ),
                    );

                    return [];
                  },
                ),
              );
            }
          },
          onWidgets: (_, widgets) => [
            TMXCollapsible(
              header: header ?? const SizedBox.shrink(),
              hideCollapseIcon: true,
              initialCollapsed: true,
              children: widgets.toList(),
            ),
          ],
        ),
      );
    }

    return super.parse(meta);
  }
}

Example html:

<div class="accordion">
    <li class="accordion-section">
        <div class="accordion-header">
            <a target="_self" class="btn">Show or hide content</a>
        </div>
        <div class="accordion-content" style="display: none;">
            <p>Content</p>
        </div>
    </li>
</ul>

Current result

Without display none

[daohoangson]

You should be able to override display: block to render the element as usual. Then hide it in your custom widget later.

[DFelten]

How to override the display none dynamically? Via Style Factory this isn't possible since it's an inline style as far as I know. The important flag is missing for this.

[daohoangson]

Or switch to use DETAILS tag. It has built-in support for this kind of collapsible contents.

[DFelten]

We have no way to influence the html and therefore must be able to work with display none.

The idea I had was to replace the html before via regex with non-working styles. But we have more often the need to customize something. Therefore I had hoped that something like this is also possible with the help of a factory.

In general it would be good if we could say in a factory to ignore or replace certain html elements or styles.

How would I overwrite display none as suggested?

[DFelten]

Okay, that was a silly question. I can simply remove the attributes from the map.

For example:

collapseMeta.element.attributes['style'] = styles.replaceAll('display:none;', '');