Migration help when moving from onWidgets to onRenderBlock?

[mark8044]

I've gotten almost everything successfully and cleanly migrated to the new style, but this is one I just can't beat, was hoping for some help....

OLD:

      meta.register(BuildOp(
        onWidgets: (meta, widgets) => listOrNull(
          buildColumnPlaceholder(meta, widgets)?.wrapWith(
                  (_, child) {

                if (meta.element.parent == null)
                {
                  return _TextPadding(MyWidget(child: child), textPadding); 
                }
                else
                {
                  return MyWidget(child: child);  
                }

              }
          ),
        ),
      ));

I tried this and failed because nothing returns from buildColumnPlaceholder:

      meta.register(BuildOp(
        onRenderBlock: (tree, placeholder)
          {
          buildColumnPlaceholder(meta, [placeholder])?.wrapWith(
                  (_, child) {

                if (meta.element.parent == null)
                {
                  return _TextPadding(MyWidget(child: child), textPadding); 
                }
                else
                {
                  return MyWidget(child: child);
                }
                }

          )}
      ));

I tried to do something like this, but I can't get it to work because child doesn't exist:

      meta.register(BuildOp(
        onRenderBlock: (meta, widgets) 
          {
            
                if (meta.element.parent == null)
                {
                  return _TextPadding(MyWidget(child: child), textPadding);
                }
                else
                {
                  return MyWidget(child: child); 
                }

            }
          ),
        );

[mark8044]

Ok so I came up with this and I think it works....

Is this the proper migration in your opinion?

      meta.register(BuildOp(
        onRenderBlock: (tree, placeholder)
          {
          buildColumnPlaceholder(meta, [placeholder])?.wrapWith(
                  (_, child) {

                if (meta.element.parent == null)
                {
                  return _TextPadding(MyWidget(child: child), textPadding);   // first quote
                }
                else
                {
                  return MyWidget(child: child); 
                }
                }

          );
          return placeholder;
          }
      ));

[daohoangson]

What are you trying to do? Reading the existing code, you want to add a text padding to the outer most element?

[mark8044]

I have an html element which I am parsing so I can display my own widget MyWidget in the place of the<email>.

The textPadding part is not that important, it just adds some padding to the element if its not surrounding by other text (meta.element.parent == null)

[daohoangson]

I think this should work

    meta.register(
      BuildOp(onRenderBlock: (tree, placeholder) {
        return placeholder.wrapWith((_, child) {
          if (tree.element.parent == null) {
            return _TextPadding(MyWidget(child: child), textPadding);
          } else {
            return MyWidget(child: child);
          }
        });
      }),
    );

[mark8044]

@daohoangson That also works really well, question for you, which do you think would be most performant? Your version or this one:

      meta.register(BuildOp(
        onRenderBlock: (tree, placeholder)
          {
          buildColumnPlaceholder(meta, [placeholder])?.wrapWith(
                  (_, child) {

                if (meta.element.parent == null)
                {
                  return _TextPadding(MyWidget(child: child), textPadding);   // first quote
                }
                else
                {
                  return MyWidget(child: child); 
                }
                }

          );
          return placeholder;
          }
      ));

Thanks!!

[daohoangson]

Basically the same. Because buildColumnPlaceholder will return the same placeholder because the children list has exactly one child.

[ArvidNy]

How would you do this if you want the widget to be inline? I have a running text where I want to add a custom popup to a tag. Something like this:

<p>This is a text with a <i>word</i> that I want to add a popup to.</p>

With this approach...

meta.register(BuildOp(
      onRenderBlock: (tree, placeholder) {
        return placeholder.wrapWith((_, child) {
          return InfoPopupWidget(
             customContent: () => MyWidget()
             child: child,
            );
        });
    }));

...this is rendered:

This is a text with a 
word
 that I want to add a popup to.

I can get closer to what I want with this, but then I don't know how to get the text style from the CSS that I need:

 onParsed: (tree) {
        final newTree = tree.parent.sub();
        newTree.append(WidgetBit.inline(
            tree.parent,
            InfoPopupWidget(
              customContent: () => MyWidget()
              child: Text(tree.element.text,
                      style: /* How do I get the style that I need here? */),
            )));
        return newTree;
      },