Rich text: Allow for multiline = false

[enejb]

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Currently the <RichText /> component allows for for the user to enter multiple lines.
It would be great if there was a way to limit the that.
This would allow for blocks to be build that would allows the user the user to enter rich text but only in a single line.

The current usecase for that is the following Contact Info component that I am building.

I want to be able to let the user bold or italicize part of the address for example.

Describe the solution you'd like
Allow us to pass multiple={false} as a paramter to richtext.

Describe alternatives you've considered
The current solution that doesn't quite work as expected that I got working is to use

<RichText 
    unstableOnSplit={ () => false } 
/>

[azaozz]

Related: #10824.

Makes sense (IMHO). Currently line breaks (<br> tags) can be typed with Shift + Enter and can be pasted (when the pasted content only contains BRs). For a "single-line-only" blocks/areas it will need to convert the BRs to spaces.

[AlchemyUnited]

@azaozz - That thread ends with "looks like it's been fixed". But in the case of multiline the README sez

multiline: Boolean | String
Optional. By default, a line break will be inserted on Enter. If the editable field can contain multiple paragraphs, this property can be set to create new paragraphs on Enter.

I've glanced though the code and null or bool (e.g. false) are overridden by a default of (I believe) div.

Perhaps a quick update of the README while this is sorted out. It cost me at least 60 - 90 minutes trying different things, checking my code, search for other sources for an answer, etc. Me thinks me and @enejb are not alone. That kinda negative scale is "bad for the brand." ;)

[AlchemyUnited]

@enejb - I'm sure you already know but that workaround doesn't work for shift+return. Which in a way maybe it's a bad thing, at least sometimes. But in terms of a couple disable of multiline, it doesn't appear to be a solution with complete coverage.

[AlchemyUnited]

Also, it looks like

unstableOnSplit={ () => null }

unstableOnSplit={ () => true }

are the same as

unstableOnSplit={ () => false }

Not sure if that really helps. Simply noting for completeness :)

[ellatrix]

Why not use <input>? I assume you also don't want to allow formatting?

[AlchemyUnited]

@ellatrix - In my case I do want to allow for formatting. For example, a heading might need a word in bold, or italic. Same for a sub-headline. But I might not want those as multi-line.

[ellatrix]

I don't follow. You're using headings in the form? In the case of headings, it should be ok to allow line breaks, just like the core headings allow it.

[AndreasMaros]

I have the same problem over here. In some contexts, you may wish to give the user RT-style formatting options, but not allow them to insert line breaks.

---

@ellatrix As far as I can see @AlchemyUnited is not building a form. The OP however is, and they stated in the first post that they

want to be able to let the user bold or italicize part of the address for example

---

Personally, my specific use case is a custom block to allow for easy insertion of footnotes. We render those in an aside with each footnote consisting of a paragraph:

<aside>
    <p>
        <sup>1</sup>
        <span>This is the first footnote</span>
    </p>
    <p>
        <sup>2</sup>
        <span>And this is the second footnote</span>
    </p>
</aside>

The spans only exist to easily select the RT content for the editor. I would like to allow for bold or italic formatting and inserting custom links – but you can see how allowing line breaks or multiple <p> elements will lead to issues.

For now I guess we'll change the markup, to the cost of semantics and clarity. It would however be nice to a single-line RT solution... 🙂

[chrisvanpatten]

I'm also interested in this functionality. We have cases where we want to allow controlled input for a single line of text (no line breaks or split paragraphs), with basic formatting — almost like <TextControl> + inline formatting. It'd be great to see that become possible.

Our example is that we have a custom image block, and supports an optional caption. In our system, we don't want to allow multiple paragraphs for a caption — just a single line of text, but it can be formatted (bold/italics/link) within that line of text — so enter or shift+enter should not have any functionality.

[timotheemoulin]

I would also like to use RichText to display the field as it will be rendered in the frontend (Hx title) but I need to avoid any new line to keep the frontend render consistent.

[chris-monahan]

This is marked as closed but I'm not sure what the resolution is? My testing just now shows multiline=false not working and the linked pull says it introduces an Editable component that has formatting disabled but is multiline/has a number of benefits from RichText. I think that my use case is exactly the opposite however; I want to enforce a single line input while still allowing the user to add occasional inline styles. I'm wondering what the resolution of this is for my use case or whether I'm doing something wrong here?

[erdembircan]

Using disableLineBreaks property instead of multiline solved the issue for me.

[ellatrix]

Yes disableLineBreaks is the correct prop.

[bikramchettri]

Using disableLineBreaks property instead of multiline solved the issue for me.

Thanks