question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Uncaught RangeError after setContent in onFocus function

See original GitHub issue

Describe 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();
  }
};
Screenshot 2019-05-09 at 19 42 48

Environment

  • OS: macOs Mojave 10.14.4
  • Browser: Chrome
  • Version: Version 74.0.3729.131 (Official Build) (64-bit)
  • Desktop

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
philippkuehncommented, May 17, 2019

Can you please test it again with the latest version?

1reaction
philippkuehncommented, May 9, 2019

you can use this.editor.clearContent() instead of this.editor.setContent('')

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found