The Blog Editor #1 - Text Components

+12

What are Text Components?

Text components are the most useful part of the new editor, in my opinion. They allow for what's called "rich text editing", without the need to learn HTML or any kind!

To get started, simply drag and drop the "Text" component into your blog content, it looks like this:

The icon for the Text Component in Step 2

This will create a new text component which you can type directly into. This also displays text exactly as you'll see it on the blog itself, and we see this in greater effect by looking at the style bar.

The Style Bar

When you begin typing in a text component, a style bar appear above which you can use to style your text instantly and visually. It looks like this:

The style bar directly above every text component

You may be wondering, what do all these things do exactly? Well, they do pretty much what their icon implies:

The B makes text BOLD.

The i makes text italics.

The u makes text underlined.

The S makes text strikethrough.

The upper 2 makes text superscript.

The lower 2 makes text subscript.

Now, I know what some of you are thinking, why don't we just use HTML components, like we used to. Well, there's nothing stopping you if you're really that stubborn, since the HTML component is capable of doing everything the "old editor" was capable of doing so. However I'll give more detailed reasons at the end why Text Components are superior for normal text.

To format text like above, simply select a portion of your text, and click the appropriate button. This will instantly format the text in front of your eyes, making it clear and easy to see what is happening.

Adding Hyperlinks

Now you may have noticed one of the buttons was missed out above. This is the hyperlinks button, what this does is allow you to insert a link to any website, directly into the text itself! Simply place your cursor where you want the link to be inserted, then click the button to see this:

The add hyperlink popup, to add links to websites in your blogs with ease.

To explain what this does, all you need to do is enter the full url of a webpage into the first box, for example:

https://www.jetpunk.com/user-quizzes/176412 /countries-in-hexagons-of-a-world-map

And then in the second box put the text you want it to display as, for example "Hexagons Map". Doing both these will then insert a hyperlink as such:

Hexagons Map

This pretty much concludes the extent of which you can use the Text Components (so far). We may add more functionality in the future!

Reasons to use Text Components or HTML

So there are many reasons to use both Text and HTML components, and I'll highlight a few of them here.

  1. It's easier to use
    By far the most important argument for why you should use text components instead of html components is that they're far easier to use and understand than HTML, especially for those who have no experience with HTML whatsoever. In this way, it works similarly to Word, Reddit or anywhere else with a rich text editor, and so you feel familiarity with it.
  2. It's easier to visualise
    A very strong argument in favour of text components is that it's much easier to see what your blog will look like without having to constantly view it in preview. The fact you can style text then and there means you don't waste time going back and forth to preview making sure things are correct.
  3. It uses less characters
    Another reason to use text components is that the html used to format them is not counted in the character count limit we have on JetPunk Blogs. So if you're writing a really large blog, then everytime you bold, italics or underline, you'll add 7 characters for the html. You add 0 by using the text component.
  4. Greater consistency among JetPunk Blogs
    As a website, we strive to make users feel like they're on our website, and that's easy to do when you have a "House Style". What this means is that, by visiting a page, you can tell that it is a JetPunk page by how it's formatted, our blogs are no different.
  5. Teaching HTML
    This might seem counterintuitive, but since Text Components don't register < and > as HTML, but instead as characters, it means you can more easily teach HTML to people using Text Components since you can type, say, <b> directly, rather than having to type out &lt; and &gt; in the HTML.

Now, I said I would be state reasons for both sides, and as an advocate for transparency and fairness, I'll detail what you can't do with the text component and why you might use HTML still.

  1. Tables and Lists
    Currently you cannot do tables and lists within the Blog Editor itself. This was not deemed as an immediate priority to include within the first version of the new editor. It may come at a later date, but for now it requires use of the HTML component.
  2. Flexibility and Complexity
    If you want to add complex styling to your blog, such as coloured text or larger text, you have to use a HTML component for this. This is purposefully done because of #4 above, since we don't want to encourage excesssive styles that end up making blogs feel too weird. It also stops people abusing the capabilities. We try to strike a balance between preventing abuse and providing flexible options.

Overview

Overall, I personally don't think using HTML Components as a substitute for Text Components is a good idea at all. The Blog Editor itself was built to make blogging easier, more accessible and to try to prevent the CSS abuse that was happening and causing problems. To anyone who thinks they're "useless", they're just being ignorant and stubborn towards change. I understand that, but you need to open your eyes to the fact so many bloggers still don't know HTML, and refuse to try and learn. Providing better tools for these users to make better blogs is far easier and more efficient than keeping the editor the same while trying to educate every single new user.

So I kindly ask you consider using Text Components where you can, and use HTML where this is not suitable for you. And please, don't complain at others for utilising the new editor just because you refuse to change. Just be nice :)

+2
Level 65
Apr 9, 2021
Great blog!
+2
Level 48
Apr 9, 2021
Patiently waiting for Dodoma's comment
+5
Level 56
Apr 9, 2021
I actually read it this time I swear
+1
Level 43
Apr 9, 2021
This is incredible! I love this update, without lying, from my heart. I’m just having ideas for formatting with it. The part that I liked most is Split View. Very useful. Thanks for making this to our community Stewart! :)
+1
Level 68
Apr 9, 2021
I plan to make one for Split Views for sure, they're definitely the most complex part and I'm sure there's a lot of confusion about what exactly they could do.
+1
Level 43
Apr 9, 2021
I’m just confused (or there is no way) to add a component like image/text in mobile
+1
Level 68
Apr 9, 2021
On mobile, I plan to make a blog specific to that. However, you can add components to the blog by tapping on them to add them to the end, then in the options of each one (accessible by tapping the three dots on the left) you can shift them up and down as needed.

For Split View, the options for each one have two drop down boxes to choose which component you want to move into each side. It's not the best arrangement, but I don't believe we can do much better given the restriction for mobile. (I'll explain this in more detail on the mobile blog coming soon).

+1
Level 43
Apr 9, 2021
Exactly. I'm doing a blog, and I wrote part of it on mobile. I just couldn't find a way to add images or texts other than the components that were already present in the blog's content. But as this update is still recent, we don't need to charge much. Thanks for the effort!
+1
Level 68
Apr 9, 2021
Oh in that case just click the gear icon at the top, then in the "blog components" drop down, simply tap one of the icons to add it to the end of the blog!
+1
Level 43
Apr 9, 2021
Maybe I explained it wrong. I want to add other components, which have not yet been included. For example: I found an image of a city, and added it to the blog. Now, I want to do a Split View, and use the image component in one of the splits. I already understood this part, but I don't know how to put a new image, for example, an image of a rural field. Placing the image component affects the one already used, in our case the image of the city, and changes its position. I don't understand that part.
+4
Level 56
Apr 9, 2021
Very nice! And funny as well
+2
Level 77
Apr 9, 2021
I really enjoy the new text component, since I don't have to type out < a href > every time I have a link. It really is a good edition to the update
+1
Level 59
Apr 9, 2021
I agree for the most part, but it's a pain to find some images specifically on Wikimedia Commons.
+1
Level 68
Apr 9, 2021
This is only the first part about Text Components, when I get to Image Components I have a surprise for everybody :)
+1
Level 43
Apr 9, 2021
Don’t make me more anxious than when you said about The Blog Update! LOL!
+1
Level 68
Apr 10, 2021
it's not a big surprise or a new development, it's just a helpful tip.
+1
Level 43
Apr 10, 2021
Hmm. Still makes me anxious and curious... LOL
+2
Level 65
Apr 9, 2021
Wow! I love the new blog editor! Thanks for explaining!
+2
Level 54
Apr 10, 2021
Nice blog, well explained
+2
Level 54
Apr 10, 2021
Excellent idea, and very good explanations (of course, you created it)!

Congratulations for this excellent blog, and thank you very much for the update and these very interesting advices.

+1
Level 68
Apr 10, 2021
Very informational blog! Thanks Stewart!