Dev Diary Ep41 - New Text Editor Update

Elements Dev Diary
21

Currently this shows for all inline text editing areas.

22

Great question… we’re in the process of adding a font and size picker, these will be linked to what you have setup in the Theme sStudio. We’re also keen to ensure novice users will be able to do the basics without resorting to Tailwind Classes.

23

To sort of illustrate how a little AI help might be useful with Tailwind classes I present the follow very quick and dirty example. This is not the well tuned AI suggestion I recommend, but maybe it will help someone.

Sure thing! Here’s the reformatted version in Markdown for easy readability on a website forum:

Scott:

You are a web developer specializing in UI development. In the Tailwind CSS library, what classes allow me to modify text?

ChatGPT:

In Tailwind CSS, there are various classes available for modifying text. These classes allow you to change the appearance, alignment, color, and other properties of text. Below is a breakdown of the key categories of text-related classes:

1. Font Size

  • Modify the size of the text.

    text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, text-3xl, text-4xl, text-5xl, text-6xl, text-7xl, text-8xl, text-9xl

2. Font Weight

  • Control the thickness of the text.

    font-thin, font-extralight, font-light, font-normal, font-medium, font-semibold, font-bold, font-extrabold, font-black

3. Font Family

  • Set different font families.

    font-sans, font-serif, font-mono

4. Text Alignment

  • Align the text within its container.

    text-left, text-center, text-right, text-justify

5. Text Color

  • Change the color of the text (e.g., using default color palette).

    text-white, text-black, text-gray-500, text-red-600, text-blue-500, etc.

6. Text Opacity

  • Adjust the opacity of the text.

    text-opacity-0, text-opacity-25, text-opacity-50, text-opacity-75, text-opacity-100

7. Text Decoration

  • Add text decoration such as underline or line-through.

    underline, line-through, no-underline

8. Text Transform

  • Modify text case.

    uppercase, lowercase, capitalize, normal-case

9. Letter Spacing

  • Adjust the spacing between letters.

    tracking-tighter, tracking-tight, tracking-normal, tracking-wide, tracking-wider, tracking-widest

10. Line Height

  • Control the line height (leading).

    leading-none, leading-tight, leading-snug, leading-normal, leading-relaxed, leading-loose

11. Text Overflow

  • Handle text overflow with truncation or ellipsis.

    truncate, overflow-ellipsis, overflow-clip

12. Word Break

  • Define how to break long words.

    break-normal, break-words, break-all

13. Font Style

  • Change the style of the text.

    italic, not-italic

14. Whitespace

  • Control the handling of white spaces in text.

    whitespace-normal, whitespace-no-wrap, whitespace-pre, whitespace-pre-line, whitespace-pre-wrap

15. Text Indent

  • Add indentation to the text.

    indent-0, indent-1, indent-2, indent-4, indent-8

These classes can be combined to apply multiple text modifications in a single element. For example:

<p class="text-xl font-semibold text-gray-800 underline tracking-wide">This is a modified text</p>

This would create a large, semi-bold, underlined, wide-tracked text in gray.

Scott:

Using Tailwind, how could I make a single word with the following attributes:

  • color it red
  • use a very easy to read and impactful, bold statement
  • slightly larger than the rest of the text in the heading
  • seem to “throb”
  • pop out when the cursor hovers over it?

ChatGPT:

To achieve the effect you’re aiming for using Tailwind CSS, here’s a breakdown of the classes you would use:

  1. Color it red: Use text-red-600 (or a similar shade of red).
  2. Easy to read and impactful, bold statement: Use font-bold for a bold font weight.
  3. Slightly larger than the rest of the text: Use text-lg (or any larger size class, depending on your base text size).
  4. Throb effect: You can create a “throb” effect using animation with Tailwind’s animate-pulse class.
  5. Pop out when hovered: Use hover:scale-110 for a slight scale-up effect and hover:text-red-800 for changing the shade of red when hovered.

Here’s the complete HTML code:

<h1 class="text-xl">
  This is a <span class="text-red-600 font-bold text-lg animate-pulse hover:scale-110 hover:text-red-800 transition-transform duration-200 ease-in-out">bold statement</span> in a heading.
</h1>

Explanation:

  • text-red-600: Applies a red color to the text.
  • font-bold: Makes the text bold and impactful.
  • text-lg: Slightly increases the size of the word compared to the rest of the text in the heading.
  • animate-pulse: Creates a throbbing or “pulsing” effect.
  • hover:scale-110: Slightly increases the size (10% larger) when the cursor hovers over the text.
  • hover:text-red-800: Changes the shade of red on hover for a visual pop.
  • transition-transform duration-200 ease-in-out: Adds a smooth transition effect to the scaling when hovering over the text.

This combination will create the dynamic, attention-grabbing word you’re looking for!

Let me know if you need any further adjustments to this formatting!

1 Like
24

No, I meant Bullet and Numbered
Like this:
• One
• Two
and

  1. One
  2. Two
25

I see the list 1-15 as a perfect outline for what the Text Editor should be. Ask these same questions in regards to paragraphs, columns, list, etc. and your getting to my dream of WYSIWYG.

1 Like
26

While we won’t offer UI controls for all those type settings, the good news is you’ll be able to apply any mixture of those classes and get all of the features you need!

27

Maybe. Simple lists are very doable within the inline text editor. However, it’s when you want to start customizing how those items appear. Size, spacing, indent, the look of the bullets, the list goes on. The UI gets very complex very quickly, and is perhaps not suited to the online text editor.

I think lists are better built as a separate Component (we had this in early demos, we just need to re-build it). That way you can get all the spacing and styling controls you need, plus animation, etc.

28

Hopefully a third party will be able to step up and complete the functionality. Will they have direct access to the UI (preferred)? Or are you envisioning something more like Stack and RW, sort of an app floating in Elements? (Bummer)

29

If you’re styling an entire block of text you’d do that in the Theme Studio. You don’t want to be styling each block of text independently. That would be a nightmare, and quickly becomes unwieldily.

I think this will become much clearer once you start to use the product.

Once you know what classes to use, it’s almost as simple as pressing a UI button — What functionality would you be missing if you can add classes?

1 Like
30

First, I just want to respond to the general way this thread has been going: you’re on the right track as far as I’m concerned. If someone is getting in so deep with text that they’re animating, bouncing, gyrating, pulsing, and all the other things you can do beyond basic font, size, weight, the fact that you can deep end into Tailwind is there for you, as Dan has already shown us. Those of us who remember the early days of the Internet remember all the “every word is a different font/size/weight/color/etc.” designs that were just difficult to read. If you want to make a modern version of that, go for it, but be prepared to dive deeper into Elements instead of having it exposed in ways that complicate Elements.

That said, simple lists that support paragraphing is important. I use this all the time. By paragraphing, I mean the bullet or number is hanging left of the formatted text, which can be multiple lines.

  • I decided to see what this forum software does with a really long bullet text to see if it “hangs” correctly. And it does. We need at least this level of list formatting in the text blocks.
4 Likes
31

Understood, this is why I mentioned earlier the idea of overrides. I utilize different styling in my writing to allow for emphasis. It’s not a deal breaker, Elements is so much more than its text editor. I just hate to see it held back because of a basic tool.

1 Like
32

As long as the third-party support is strong with the ability to create and provide components and themes, that should not be an issue

1 Like
33

I have to admit that I really don’t see where third-part addon developers will fit in…

34

For at least a short while there are people particularly novices that are intimidated by we’re afraid of AI. And at least in the Apple ecosystem people implementing and integrating artificial intelligence in their applications is going very slowly. During this transition. There will be opportunity for third-party developers how long with this transition be no one knows but there’s immediate need now.

1 Like
35

Yes, but my question is more about the place that Realmac reserves for them, if there is one planned, which does not seem at all obvious to me, and if so under what conditions…

1 Like
36

Third-party developers will be able to create native Components, just like the ones that ship with Elements!

37

What is the difference between native and custom components? API access? Sorry for this question maybe obvious but I don’t understand the difference.

2 Likes
38

Oh, I do see where third party developers would fit in. Just look at the history of stacks. Early on, stacks were simple things, the “lego blocks” that Dan keeps referring to. More recently, we’ve gotten much more elaborate constructs, so call them “lego kits,” where you’re giving all the extra parts and instructions on how to put them together. Some kits will come pre-built (components), others will require user assembly.

1 Like
39

Yes but I still don’t get the difference between native and custom components? Will “custom components” have the same development possibilities as the native ones? Some sort of limitation in the possibilities, otherwise I don’t see much of a future for third-party developers. I’m not sure if my question is clear?

40

You’re not the only one.

1 Like