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

⏸ [0.7] Customize Placeholder visibility #3379

Merged
merged 5 commits into from
Dec 7, 2022
Merged

Conversation

zurfyx
Copy link
Member

@zurfyx zurfyx commented Nov 18, 2022

Edit:
Revisited the whole PR based on @trueadm and @thegreatercurve's comments. Now it's a 0.7 breaking change and the placeholder makes it possible to pass a callback functio with an editable param to allow customization.


Provi @ Discord

Is there a way to show the placeholder when isEditable is false? I want to disable an input and show in placeholder that it is disabled
looks like it's intentionally disabled

That's a valid concern. The reason why I removed it in #3030 was to promote the use Lexical for long-content form read-only views where the placeholder wouldn't make much sense. However, it still makes sense on shorter form content, and in fact, the <input disabled> and <textarea disabled> shows the placeholder when disabled, which makes me reconsider whether that was a good solution in the first place.

Unfortunately, I can't just change the current behavior without causing a breaking change which would be undesirable but we can still provide the option to customize the non-editable placeholder via a new {Plain/Rich}TextPlugin property (placeholderNonEditable) while preserving the original behavior.

That said, this is likely to change in the not so distant future. We are reconsidering how we package RichText and PlainText to provide further flexibility while making it easier for newcomers to bootstrap a rich text editor quickly.

@facebook-github-bot facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Nov 18, 2022
@vercel
Copy link

vercel bot commented Nov 18, 2022

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
lexical ✅ Ready (Inspect) Visit Preview Nov 24, 2022 at 3:47AM (UTC)
lexical-playground ✅ Ready (Inspect) Visit Preview Nov 24, 2022 at 3:47AM (UTC)

@thegreatercurve
Copy link
Contributor

thegreatercurve commented Nov 21, 2022

Unfortunately, I can't just change the current behavior without causing a breaking change which would be undesirable but we can still provide the option to customize the non-editable placeholder via a new {Plain/Rich}TextPlugin property (placeholderNonEditable) while preserving the original behavior.

@zurfyx By adding another new property, we're just creating 2 breaking changes we need to fix. I'd say just make placeholder always visible in a disabled state, regardless of the length of text, like it is on native textareas and inputs, and then do a 0.7 release.

@zurfyx
Copy link
Member Author

zurfyx commented Nov 24, 2022

Revisited the whole PR based on @trueadm and @thegreatercurve's comments. Now it's a 0.7 breaking change and the placeholder makes it possible to pass a callback functio with an editable param to allow customization.

@zurfyx zurfyx changed the title Non-editable placeholder [0.7] Non-editable placeholder Nov 24, 2022
@zurfyx zurfyx changed the title [0.7] Non-editable placeholder [0.7] Customize Placeholder visibility Nov 24, 2022
@thegreatercurve thegreatercurve changed the title [0.7] Customize Placeholder visibility ⏸ [0.7] Customize Placeholder visibility Nov 25, 2022
@@ -171,7 +171,7 @@ export default function Editor(): JSX.Element {
contentEditable={
<ContentEditable className="TableNode__contentEditable" />
}
placeholder={''}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should still work, right?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not just placeholder={null} instead?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Strings should be allowed too.

@thegreatercurve
Copy link
Contributor

Closes #3349

@trueadm trueadm merged commit b8925d4 into main Dec 7, 2022
@trueadm trueadm deleted the placeholder-non-editable branch December 7, 2022 19:35
@trueadm trueadm mentioned this pull request Dec 9, 2022
abelsj60 pushed a commit to abelsj60/lexical that referenced this pull request Jan 5, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants