tiptap icon indicating copy to clipboard operation
tiptap copied to clipboard

Cursor does not follow new line / paragraph when configured with a node view

Open mylesj opened this issue 2 years ago • 2 comments

What’s the bug you are facing?

Following the documentation, I've tried to extend the paragraph extension with a custom node-view. When pressing the Enter key a new node is created, however the cursor remains in the initial paragraph.

Which browser was this experienced in? Are any special extensions installed?

Desktop / Linux / MacOS / Chrome & Firefox (no extensions)

How can we reproduce the bug on our side?

Minimal Example Code
import * as React from 'react';

import {
  EditorContent,
  useEditor,
  NodeViewWrapper,
  NodeViewContent,
  ReactNodeViewRenderer,
} from '@tiptap/react';

import { Document } from '@tiptap/extension-document';
import { Text } from '@tiptap/extension-text';
import { Paragraph } from '@tiptap/extension-paragraph';

const NodeView = () => {
  return (
    <NodeViewWrapper>
      <div>
        <NodeViewContent />
      </div>
    </NodeViewWrapper>
  );
};

const CustomParagraph = Paragraph.extend({
  addNodeView() {
    return ReactNodeViewRenderer(NodeView);
  },
});

export default function App() {
  const editor = useEditor({
    extensions: [Document, CustomParagraph, Text],
    content: '...',
  });
  return (
    <div>
      <EditorContent editor={editor} />
    </div>
  );
}
  • Start typing
  • Press Enter
  • Keep typing

Can you provide a CodeSandbox?

https://stackblitz.com/edit/react-ts-gth2ze?file=App.tsx

What did you expect to happen?

I expected the cursor to always jump to the new paragraph.

Anything to add? (optional)

I would also note that sometimes the cursor will jump into the new node if there is a trailing space before pressing Enter.

https://user-images.githubusercontent.com/2750352/190435761-3c79273f-4916-4967-8483-fdde76611849.mov

Did you update your dependencies?

  • [X] Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

  • [ ] Yes, I’m a sponsor. 💖

mylesj avatar Sep 15 '22 15:09 mylesj

Just reading through your backlog, this issue sounds similar to #2534

mylesj avatar Sep 15 '22 15:09 mylesj

I'm experiencing same issue after I upgraded to beta-194 (on 194 works ok). From what I can see issue is with queueMicrotask introduced with: https://github.com/ueberdosis/tiptap/pull/3188/files

If I comment that it starts working again.

vgrbr avatar Sep 22 '22 12:09 vgrbr

Why is this closed? This is clearly not fixed

wasular avatar Aug 25 '23 17:08 wasular