Can I get help with new BuildOp.inline? I cannot actually get it to render anything inline...

[mark8044]

Hi, the new changes to BuildOp look pretty cool and interesting. I used the migration guide and got most things successfully working except for inline elements.

Right now I have some text that get interrupted by a user avatar icon image that looks like this (O) right in the middle of the text.

So for example:

Hi Jon (Avatar picture) how are you!

With the old way it was working perfectly with this bit of code:

      meta.register(BuildOp(
        onTree: (_, tree) {
              WidgetBit.inline(tree.parent!, UserAvatar(username:meta.element.text, userid:int.parse(meta.element.attributes['userid'].toString()))).insertBefore(tree);
          tree.detach();
        },
      ));

Now migrating to the new way I first did:

       meta.register(BuildOp(
           onParsed: (tree) {
             final newTree = tree.parent.sub();
      
               newTree.append(WidgetBit.inline(tree, UserAvatar(username:meta.element.text, userid:int.parse(meta.element.attributes['userid'].toString())) ));
             return newTree;
           }
       ));

But the result comes out as:

Hi Jon 
(Avatar picture) 
how are you!

So I tried BuildOp.inline for this purpose:

      meta.register(BuildOp.inline(
          onRenderInlineBlock: (tree, widget) {
              widget = MentionChip(username:meta.element.text, userid:int.parse(meta.element.attributes['userid'].toString()));
            return widget;
          }
      ));

But it is the same problem with output of:

Hi Jon 
(Avatar picture) 
how are you!

Even if I just make it do

      meta.register(BuildOp.inline(

          onRenderInlineBlock: (tree, widget) {
            return Text('Test!');
          }

      ));

It will still break it up into 3 lines

Any idea or help on how to correct this?

[mark8044]

Ok never mind. It looks like the new version much more accurately renders html/css, as this was all inside a div its placing it into a new line (never did that before, but it is properly doing that). I just added a stylesheet and made my div render as an display:inline-block and its all solved now.

Awesome!!

[daohoangson]

I'm glad to hear that 🔥