@text Component Mutations

Elements Beta Feedback
1

I noticed when using @text callout in a span a couple of things are happening:
<span>@text("textbefore", default: "Before")</span><span>Other Text</span>

So all the text should be inline by default. When I Preview, w/o touching anything it looks correct, ie. ‘BeforeOther Text’

When I edit the ‘Before’ to ‘B’, then there’s a space added after the edited text and an added break
ie. ‘B<space>
<br>’ which looks like this:
'B
Other Text’
Could you guys please look into this as we can’t have mutated code :wink:

2

@dan I haven’t seen a comment or thumbs up on this and this is going to be a BIG problem. This kind of code mutation was allowed to slip through and remain in Blocs and it has caused HUGE problems for developers. Please - we all need and expect very clean code and text when it’s injected into the dom.

3

@Bill

I copied your code I get this, is this what you mean

when I view the source in safari I see this

CleanShot 2024-11-20 at 18.34.49@2x
CleanShot 2024-11-20 at 18.34.49@2x480×270 19.5 KB

4

modified still does not work dropped in tailwind play no issues

5

Looking at beta v21 Now gives different layout from the very beginning, but still wrong.

Here’s with No Changes, Note: the Before is underneath the ‘HTML’ tag - they should be inline, ie. side by side.

edit_incorrect_linebreak
edit_incorrect_linebreak1406×622 24.6 KB

And in preview can see a space is added to end of text:

preview_incorrect_space
preview_incorrect_space1258×516 11.2 KB

When you make a change to the text in the edit window (not in the control) you get a line break:

edit_incorrect_withedit
edit_incorrect_withedit1258×516 8.55 KB

6

Can you share this project via Elements Cloud so we can take a look?

7

@dan if you copy this into a custom component you will see a space is inserted into the output in safari

If you delete letters in the before text you will see the space still

If you copy into tailwind play you will see no space

Try either of these


span>test</span><span>Other Text</span>

span>@text(“textbefore”, default: “Before”)Other Text

8

Here’s a very simple code mutation example for @text:
File Link

9

had to put in a return but just use span with text this issue appears

10

Yes @upssjw I already pointed all this stuff out. Let’s just give RMS some time to work on fixes.

11

yes but watch this

will leave it now as you just said

12

Thanks @Bill - will take a look tomorrow!

Also, any reason you’re not using Elements Cloud to share the file? :face_with_raised_eyebrow: Would be much easier…

13

Hey @Bill @upssjw, We’ve taken a look at this today and the reason it appears differently in the editor vs Preview is because the Elements Text Editor is in its own div element. We’re going to see if we can fix this today for the next beta… fingers crossed :crossed_fingers: