Display Message Action Source Code Editor Redesign

I often use the Display Message on a web page. However, the source code editor located under File > Source code is terrible. I can’t tell you how many times I cursed the living existence out of that editor because of how convoluted it displays the HTML code.

I suggest simply having a new color-coded editor with line numbers, word wrap and retaining the line indents in the code (this one is super important).

Current Tape source code editor

Suggested source code editor

Additionally, please remove this automatic comment that generates when you create tables. It adds way too many unnecessary lines to the source code.

This is also a HUGE pain point of mine. It’s from the editor itself, TinyMCE if I remember correctly. This has been a known issue for many years unfortunately. It’s also the same foundation used by other platforms -an industry standard if you would.

As a workaround, I write all my HTML in Notepad++ and then place it in a calc field. I then call my calc field as needed.

I have definitely stress tested this and have not run into any meaningful issues.

3 Likes

If Tape uses TinyMCE then there appears to be a plugin called Advanced source code editing. At least with that plugin activated it will make editing the source code much easier.

As for using the calc field to put the HTML how exactly do you do that? It appear copy/pasting pure HTML code doesn’t work like if I put it on the source code of display message action.

Maybe the team can look into adding that plugin :raised_hands:

I’m on my phone, so this won’t be ideal but…

Let name = @token;
Let location = @token2;

Let html = `<p>hello my name is ${name} and I am from <strong>${location}</strong>.</p>`;

html;

You can use template literals

Wrap your html in ``
Call variables with ${foo}

This is a lot cleaner than “something”+ @token +“else”

2 Likes

I’d say it was rather good for on a phone :slight_smile:

1 Like