Uncaught RangeError after setContent in onFocus function
See original GitHub issueDescribe the bug
I try to implement a placeholder-like feature in my tiptap component.
I get a placeholder and a content parameter from the parent component, and if the content parameter is empty, I put the placeholder parameter as the default text inside the tiptap-editor.
On the onFocus
method, i want to make the placeholder disappear on the first focus. But when i try to use the setContent
method, i get a Uncaught RangeError error in the console (see screenshot)
Here is my code component:
export default {
name: 'quick-editor',
components: {
EditorContent,
EditorMenuBar
},
props: ['parentContent', 'blur', 'placeholder'],
data() {
return {
editorContent: this.parentContent,
isFocus: false,
editor: new Editor({
extensions: [
new Blockquote(),
new BulletList(),
new CodeBlock(),
new HardBreak(),
new Heading({ levels: [1, 2, 3] }),
new HorizontalRule(),
new ListItem(),
new OrderedList(),
new TodoItem(),
new TodoList(),
new Link(),
new Bold(),
new Italic(),
new Strike(),
new Underline(),
new History()
],
content: this.parentContent || '<i>' + this.placeholder + '</i>',
onFocus: () => {
if (!this.parentContent && !this.hasBeenUpdated) {
this.editor.setContent(''); // here i get the uncaught rangeError
}
this.isFocus = true;
},
onBlur: () => {
this.isFocus = false;
this.blur(this.editorContent);
},
onUpdate: (e) => {
if (!this.hasBeenUpdated) this.hasBeenUpdated = true;
this.editorContent = e.getJSON().content[0].content ? e.getHTML() : '';
}
})
};
},
beforeDestroy() {
this.editor.destroy();
}
};

Environment
- OS: macOs Mojave 10.14.4
- Browser: Chrome
- Version: Version 74.0.3729.131 (Official Build) (64-bit)
- Desktop
Issue Analytics
- State:
- Created 4 years ago
- Comments:8 (4 by maintainers)
Top Results From Across the Web
Uncaught RangeError after setContent in onFocus function #307
I try to implement a placeholder-like feature in my tiptap component. I get a placeholder and a content parameter from the parent component,...
Read more >onFocus exhibits weird behavior - javascript - Stack Overflow
I'm a little confused by the behavior of the onFocus event. I have a form with several textareas and I want them to...
Read more >Schema – Tiptap Editor
Unlike many other editors, Tiptap is based on a schema that defines how your content is structured. That enables you to define the...
Read more >.focus() | jQuery API Documentation
Therefore, scripts that rely on event delegation with the focus event will not work consistently across browsers. As of version 1.4.2, however, jQuery...
Read more >onfocus Event - W3Schools
Example. Execute a JavaScript when an input field gets focus: · input type="text" onfocus ; In HTML: · element onfocus ; Example. Using...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Can you please test it again with the latest version?
you can use
this.editor.clearContent()
instead ofthis.editor.setContent('')