Pre tag does not have any semantics. You can use white-space: pre and monospaced font with the same effect.
The use case is not for visual styling but more for retaining the formatting when the text inside the code element is parsed using JS.
Example use case:
https://copy-to-clipboard.wstd.io/white-space: pre is doing what you need I think
its available from the style panel
In the link above, if you try and use the copy functionality, the text formatting from the code is lost because the <code> element does not preserve all the formatting like line breaks as is. It adds <br> for new line. Additionally it creates separate strings for each new line instead of the whole thing being a single code block.
I think this is added by our editor. There will be same issue with pre tag
I think the problem is that you are trying to copy directly innerHTML of the code block, correct?
the assumption is that it should be just clean code is wrong here, because we will add syntax highlighting in the future too, it will add a bunch of html
you need to copy your string into buffer without using innerHTML from rendering
the rendering and the original content is not the same thing
btw we should probably have that copy button baked into the code component
I updated the example:
https://copy-to-clipboard.wstd.io/. One that uses the Code component as is and another with a custom HTML embed using <pre>. Both have the identical function atached to the copy button.
- When you copy the code from the first one (default), and then paste it in some type of code editor the code formatting is all messed up.
- When you copy the code from the second one (using <pre>), and then paste it in some type of code editor the code formatting is retained as is.
This is what I was trying to achieve esentially
What I think you can do right now:
- put the code into a variable
- bind it as text content of code block
- bind it additionally as data-code attribute
- read data-code attribute from your script
I understood, your assumption about how code componenent should work is wrong, it will not give you clean content you want to copy into buffer.
do you understand what I mean?
I completely understand how it is working and the default way. The request was more along the lines of being able to set the text layer inside the code component from a <span> to a <pre> tag.
Oh Text inside Code Text where Text is a pre tag
shit I think we haven't thought about implications of allowing anything beyond text inside the code text component
I need to think about it, it might have been an oversight
it should not be possible to do that
otherwise we can't add syntax highlighting
Code Text should be a single component with nothing inside but the code itself imho
we really need syntax highlighting for all languages threre and having any random instance in it would prevent us from doing it
right now you can add anything inside it
I was able to add basically any element type inside it. That's how I added the HTML embed block that uses the <pre> tag as well 🙃
Tried other types as well right now, sky is the limit
yes, we didnn't limit it at all and it doesn't make sense, its just an oversight
I just tried using a binding and a variable, it works nicely
code editing experience for typing code in a variable is also nicer
thatn doing it inline in the text editor basically
btw binding inserts your code without html inside, its clean and can be used to copy via js
but i don't recommend doing it because if we add syntax highlighting, it will still be an html that you don't want to copy
this should work well for you
I just read through the docs for <code> tag, and having multiple lines of code is not supposed to be done using <code> tag.
To represent multiple lines of code, wrap the <code> element within a <pre> element. The <code> element by itself only represents a single phrase of code or line of code. Source:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code#notespre is just an alternative to white-space:pre
there is no need to use pre tag
I understand all that. But technically the <code> HTML element is intended to indicate the text is a short fragment of code, even though it is possible to have more than one line of code without any errors.
short doesn't mean 1 line
Just to be clear, I understand that we can achieve the formatting using white-space: pre and we don't need to use <pre> tag. I am just trying to brainstorm if having a huge chuink of code inside <code> is correct in the first place.
I don't think there is anything wrong with that. Pre tag just helps formatting multiline code
Its not like code doesn't want you to have more code in it, its just it doesn't help with formatting
Beside this use case in particular, do you think it would be worth adding other tag options in the list here for Text Blocks in general (not code specific) including but not limited to <pre>?
no, we will have a custom element where you can use any tag
otherwise adding those tags there has no end
you will always find a tag that could be added there
Custom element would be great. That way we don't have to use HTML embed for everything
@TrySound code text component should be probably completely non-editable on canvas and have a code property like html embed
Also why did we call it Code Text instead of just Code 🤣
You renamed it to distinct more from html embed
right, the assumption was that Code sounds like Code you can run on canvas
Does text content edited directly work here?
Yes, maybe we should keep it and just change the type of the input to code editor
so user edits text content using code editor
let me see right now if I can quickly do this
thoughts on property being called "code" vs "text content"?
Maybe just 'code' or 'code content' 🤔
