I discovered something new today that I’ve never seen before. Knowing me it’s been there forever, but I doubt it lol. One thing that I’ve seen some people ask for, including myself, is a way to wrap tags around selected text instead of having to drag the tags to the Preview window and then move the text into it etc.
So today I see that now we can do just that!
Click a text element in either the Overview tree or the Preview window to select it. Now right click and choose “Change To” in the dialog that pops up and see what options you now have! I’ve so far discovered you can change P to H, H to P, and some P’s can be wrapped with Sub, Sup, Span, Bold, Italics, and Code.
I haven’t figured out the criteria for which ones can be wrapped and which can’t so experiment a bit and see what you find out. Share if you figure out the criteria please.
Hi Jo-r Not sure if I’m on the right track here but you can drag quite a few things into text elements in the preview panel. The image below has been dragged from the components panel into the list item text also a span after the image with a class color-1. Whatever you drag in could be given a class and styled as required.
I think I may not have clarified what I was saying well lol, go figure LOL. I’m aware of the drag and drop components and have used them quite often, but … until today I did not know you could select a text component in the preview pane or in the overview pane and apply some of those components automatically which will wrap around what you have selected. This is something I’ve been hoping they would do with a lot of things. Basically right clicking the text element (P or H or Small, I’m sure others too but I haven’t tried them all) and then choose Change To and you’ll get a list of what that element can be changed to.
Now, what I am not sure of is how to know which ones will allow all the Style changes and which ones only allow text Type changing, such as a P to an H and vs. vs. I can’t find any pattern or anything showing criteria. Seems almost random.
Maybe @martin or @gabby will enlighten us further on this?
The “Change to” option was added back in 5.0.0 last year. Technically it doesn’t wrap your component, it changes the tag. We made it so similar components can be changed into one another.
Textual components like span, bold, italic, sub, sup can be interchanged, but you can’t change a span to a div because one holds text directly and the other does not. Additionally you can’t turn a span into a paragraph because the first is inline and the second block level.
Overall the idea is that we allow components to be changed only to similar ones so that the constraints of which component can be dropped where are maintained.
Ok ya that all makes sense, but I’m confused on when the span, bold, italic, code, sub, sup show up in the little menu popup. I tried adding a paragraph and right clicking that component only gives me the ability to change it to a Heading, and Headings only gave me the ability to change them to a Paragraph.
I right clicked on a “small” element and that one gave me the options for span, bold, italic, code, sub, sup.
Are there special criteria for the span, bold, italic, code, sub, sup to show up in that menu? Seems that they should show up always for any text elements, that’s the part that has me baffled.
Basically, the main question is why is the Small element the only one that seems to allow the style changes?
Small, span, bold, italic, code, sub, sup are all inline elements – wherever one can be placed, the rest can be too. You can drop a span in a paragraph and change it to a bold - it is still perfectly valid.
Whereas if we allowed spans to change into headings and paragraphs, you would be able to place a span in a paragraph, and change it to a heading, so you would have a heading inside a paragraph, which isn’t allowed.
OHHHH ok now I get it sheesh a little blonde here some days I guess lol.
I totally did not understand how it worked, but now I do and it’s still a cool thing sort of, not sure how often I would use it since most of the time I’m not trying to “change” say a Bolded item to Italics etc., usually I’m trying to “add” those as extra styles so swapping them for me doesn’t make a whole lot of sense.
To me it would be a whole lot more useful if we could select a text element (any type) and the right click menu would have Add/Remove Styles or something and instead of “changing” the tags it would wrap the selected text within the tags in the style tags such as it does when you add Bold to a paragraph:
Paragraph and so on and so forth for parts not applied Bold.
</p
Then if a style is already applied it would have “Remove Bold” in the popup since it’s already there.
Then we could also apply other styles as well such as:
Bold, Code, Sup, Sub, Span, Italic, Small, Lower Case, Upper Case, Capitalization and so on.
Working that way would be closer to what many editors do and would be a whole lot more useful.
