Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rich text: Allow for multiline = false #13570

Closed
enejb opened this issue Jan 29, 2019 · 14 comments · Fixed by #18361
Closed

Rich text: Allow for multiline = false #13570

enejb opened this issue Jan 29, 2019 · 14 comments · Fixed by #18361
Labels
[Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable [Type] Enhancement A suggestion for improvement.
Milestone

Comments

@enejb
Copy link
Contributor

enejb commented Jan 29, 2019

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.
screen shot 2018-12-18 at 3 50 48 pm
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 } 
/>
@ellatrix ellatrix added [Type] Enhancement A suggestion for improvement. [Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable labels Jan 29, 2019
@ellatrix ellatrix added this to the Future milestone Jan 29, 2019
@azaozz
Copy link
Contributor

azaozz commented Jan 31, 2019

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
Copy link

@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
Copy link

@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
Copy link

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
Copy link
Member

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

@AlchemyUnited
Copy link

@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
Copy link
Member

ellatrix commented Jun 27, 2019

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
Copy link

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... 🙂

@ellatrix ellatrix mentioned this issue Nov 14, 2019
5 tasks
@chrisvanpatten
Copy link
Contributor

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
Copy link

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
Copy link

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
Copy link

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

@ellatrix
Copy link
Member

Yes disableLineBreaks is the correct prop.

@bikramchettri
Copy link

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

Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

10 participants