Tiptap: Support for placeholders?

[codepotato]

Me again! Is there any way to support placeholder text within the editor that clears when the editor is focused?

[philippkuehn]

Hey, great idea!
I've added a PlaceholderExtension. There is also an example.

[codepotato]

You're a dude @philippkuehn . 🕶 👍

[christophermiles]

Thanks for this library, it's made developing a rich text box so much easier for the application I'm working on.

Unfortunately I'm have a bit of an issue with setting the placeholder text for a multi-locale site. Because the PlaceholderExtension depends upon setting the placeholder text within a CSS pseudo-element content property, I'm unable to derive the placeholder text from my translations file (I'm using the Vue i18n plugin), as I can't access the translation file from CSS.

I tried to programmatically change the content property of the pseudo-element with JavaScript but this is not possible as :before elements are not part of the DOM. I also tried [supplying the placeholder text via a data attribute] (https://stackoverflow.com/a/42000085) which the CSS pseudo-element can read, but couldn't figure out how to apply a data attribute to the relevant DOM element of the Tiptap editor.

@philippkuehn Is there any likelihood that we would be able to pass the placeholder text as an option to the Placeholder extension instead of setting it via CSS?

[philippkuehn]

@christophermiles You are right. You can follow the progress for this feature at #114

[mattwr18]

hey @christophermiles, @philippkuehn were you able to get this worked out? I followed the conversation to https://github.com/scrumpy/tiptap/issues/114 as you suggested @philippkuehn and it says it was fixed by https://github.com/scrumpy/tiptap/issues/114, and I have seen that the examples have been updated https://github.com/scrumpy/tiptap/blob/master/examples/Components/Routes/Placeholder/index.vue, but I can't seem to get it to work with my Vue i18n plugin)

I have seen how it works with an input field that allows a user to dynamically change the placeholder, but of course I want the user to be able to click on their localisation and it to dynamically change.

this is my relevant code, I believe

<editor-content class="editor__content" ref="editor" :editor="editor"/>

new Placeholder({
  emptyNodeClass: 'is-empty',
  emptyNodeText: this.$t('editor.placeholder'),
  showOnlyWhenEditable: true
})

.editor p.is-empty:first-child::before {
  content: attr(data-empty-text);
  float: left;
  color: $text-color-disabled;
  padding-left: $space-xx-small;
  pointer-events: none;
  height: 0;
}

and here is a link to the open-source code for our Editor component
https://github.com/Human-Connection/Human-Connection/blob/master/webapp/components/Editor/index.vue

we are currently using "tiptap": "1.20.1",

Thanks for the great editor, and appreciate any feedback on what I am doing incorrectly.

[Chrissi2812]

@mattwr18 Plugin options are not reactive.

You have to somehow set this.editor.extensions.options.placeholder.emptyNodeText to the value you want, after the language is selected. Thats what I've done in the example.

[mattwr18]

I understood that, I was just unclear what the best way to do that, in our context.
I got it working by emitting an event from our LocaleSwitch component like so this.$root.$emit('changeLanguage'), and then listening in our Editor component

mounted() {
  this.$root.$on('changeLanguage', () => {
    this.changePlaceHolderText()
  })
},

methods: {
  changePlaceHolderText() {
    this.editor.extensions.options.placeholder.emptyNodeText = this.$t('editor.placeholder')
  },
}

any thoughts, good or bad, on this approach @Chrissi2812?

[Chrissi2812]

@mattwr18 That should be fine. Would have done that in a similar way.

I should mention that this won't work in IE 11 without polyfill for Proxys