ueberdosis / tiptap

The headless rich text editor framework for web artisans.
https://tiptap.dev
MIT License
27.73k stars 2.3k forks source link

Custom node with different input behavior #2336

Closed dm-de closed 2 years ago

dm-de commented 2 years ago

What’s the bug you are facing?

I extend paragraph to add custom annotation.

Input behavior is different to normal paragraph.

How can we reproduce the bug on our side?

Open CodeSandbox

Click at the end of annotation text. Delete annotation text letter by letter with backspace - but do not delete last letter. Now delete last letter, and you should see, that not only letter is removed, this remove also the annotation itself.

Now do the same with paragraph, to see the difference.


note 1: same happen, if you use del instead backspace

note 2: if you select complete annotation text, and hit backspace, this do not remove annotation - this is correct

Can you provide a CodeSandbox?

https://codesandbox.io/s/great-fire-6oih0?file=/src/App.js:0-973

import React from "react";
import { useEditor, EditorContent } from "@tiptap/react";
import { mergeAttributes } from "@tiptap/core";
import "./styles.css";

import Document from "@tiptap/extension-document";
import Text from "@tiptap/extension-text";
import Paragraph from "@tiptap/extension-paragraph";

const Annotation = Paragraph.extend({
  name: "annotation",
  parseHTML() {
    return [
      {
        tag: "annotation"
      }
    ];
  },
  renderHTML({ HTMLAttributes }) {
    return [
      "annotation",
      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
      0
    ];
  }
});

export default () => {
  const editor = useEditor({
    extensions: [Document, Text, Paragraph, Annotation],
    content: `
    <p>paragraph 1</p>
    <p>paragraph 2</p>
    <annotation>
      annotation 1
    </annotation>
    <annotation>
      annotation 2
    </annotation>
    `
  });

  return (
    <>
      <EditorContent editor={editor} />
    </>
  );
};

What did you expect to happen?

Should not reomove annotation

Anything to add? (optional)

No response

Did you update your dependencies?

Are you sponsoring us?

philippkuehn commented 2 years ago

This seems to be a browser issue with Firefox when using custom tags. Try rendering something like <div data-type="annotation"> instead.