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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

display placeholder for rich-text-widget #3888

Merged
merged 6 commits into from Sep 28, 2022

Conversation

ETLaurent
Copy link
Contributor

@ETLaurent ETLaurent commented Sep 22, 2022

Depends on #3882
Closes PRO-3146

Summary

Set a default placeholder value for rich text widget:

image

The placeholder disappears as soon as we start typing in.
It's overridable on project side, so if it's overridden with a falsy value, it will display the normal/previous behaviour.

What are the specific steps to test this change?

On testbed:

// in a project's modules/@apostrophecms/rich-text-widget/index.js
options: {
    placeholderText: 'Start typing here!!!'
  },

馃憞

image


// in a project's modules/@apostrophecms/rich-text-widget/index.js
options: {
    placeholderText: false // or any falsy value
  },

馃憞

image

What kind of change does this PR introduce?

(Check at least one)

  • Bug fix
  • New feature
  • Refactor
  • Documentation
  • Build-related changes
  • Other

Make sure the PR fulfills these requirements:

  • It includes a) the existing issue ID being resolved, b) a convincing reason for adding this feature, or c) a clear description of the bug it resolves
  • The changelog is updated
  • Related documentation has been updated
  • Related tests have been updated

If adding a new feature without an already open issue, it's best to open a feature request issue first and wait for approval before working on it.

Other information:

@@ -35,6 +35,7 @@
"@opentelemetry/semantic-conventions": "^1.0.1",
"@tiptap/extension-highlight": "^2.0.0-beta.33",
"@tiptap/extension-link": "^2.0.0-beta.38",
"@tiptap/extension-placeholder": "^2.0.0-beta.196",
Copy link
Contributor Author

@ETLaurent ETLaurent Sep 22, 2022

Choose a reason for hiding this comment

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

鈩癸笍 just this one added, the rest is re-ordering

Comment on lines 357 to 399
.apos-rich-text-editor__editor ::v-deep .ProseMirror p.is-empty:first-child::before {
content: attr(data-placeholder);
float: left;
color: #adb5bd;
pointer-events: none;
height: 0;
margin-left: 5px;
}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

@@ -9,6 +9,7 @@ module.exports = {
icon: 'format-text-icon',
label: 'apostrophe:richText',
contextual: true,
placeholderText: 'apostrophe:richTextPlaceholder',
Copy link
Contributor Author

@ETLaurent ETLaurent Sep 23, 2022

Choose a reason for hiding this comment

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

@stuartromanek this sets a default placeholder value, and it looks like this:

image

It is overridable on project side, so if a project sets placeholderText: false or any falsy value, it'll go back to the previous behavior:

image

Do you want to keep that default value? Or would you prefer not to have one, and only add the placeholder on project side?

Copy link
Member

Choose a reason for hiding this comment

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

I think we should keep a default in core.

'Start typing here...' is fine

@ETLaurent ETLaurent marked this pull request as ready for review September 23, 2022 14:20
Copy link
Member

@stuartromanek stuartromanek left a comment

Choose a reason for hiding this comment

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

Two things standing out to me:

  • A rich text widget should be able to override the module defaults and provide its own placeholder text via the RT options object. placeholder is probably a fine key
  • The placeholder text should only be displayed when the widget is active and focused. This would happen when first adding the RT widget to the area or clicking in to focus an existing, empty RT widget. When the RT widget is empty and unfocused it should return to the previous A3 empty state.

Copy link
Member

@boutell boutell left a comment

Choose a reason for hiding this comment

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

Very minor notes

Underline,

// For this contextual widget, no need to check `widget.aposPlaceholder` value
// since `placeholderText` option is enough to decide whether to display it ot not.
Copy link
Member

Choose a reason for hiding this comment

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

ot not -> or not

// - after it, once the page is loaded and we interact with the editors
// To solve this issue, use another `this.showPlaceholder` variable
// and toggle it after the placeholder configuration function is called,
// thanks to textTick.
Copy link
Member

Choose a reason for hiding this comment

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

nextTick

Base automatically changed from pro-3131-placeholder-wrapper to feature-widget-placeholders September 28, 2022 13:03
@ETLaurent ETLaurent merged commit 0502b8c into feature-widget-placeholders Sep 28, 2022
@ETLaurent ETLaurent deleted the 3146-placeholder-tiptap branch September 28, 2022 13:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants