reactjs - How to programmatically set cursor position in Blocknote? - Stack Overflow

admin管理员组

文章数量:1295902

I’m using Blocknote in a Next.js project and trying to programmatically set the text cursor position on the first block. However, setTextCursorPosition doesn’t seem to work.

Here’s what I’ve tried:

Using setTextCursorPosition directly

const toText = useCallback(() => {
if (!editor || !editorRef.current) {
  console.log('Editor atau editorRef belum siap');
  return;
}

// Ambil blok pertama
const firstBlock = editor.document[0];

// Coba set cursor ke blok pertama
editor.setTextCursorPosition(firstBlock);
}, [editor]);

Editor Option

const editor = useCreateBlockNote({
schema: schema,
dropCursor: multiColumnDropCursor,
trailingBlock: true,
dictionary: {
  ...locales.en,
  multi_column: multiColumnLocales.en,
},
initialContent: initialValue
  ? initialValue
  : [
      {
        type: 'heading',
        content: '', // Blok pertama selalu menjadi H1,
      },
      {
        type: 'paragraph',
        content: '', // Area kosong untuk menulis
      },
    ],
 });

Issue: Cursor doesn’t appear in the editor.

Expected Behavior:

• The text cursor should move to the first block.
• The editor should be ready for input after running toText().

Actual Behavior

• The cursor doesn’t appear.
• Clicking manually works, but not programmatically.

Any ideas on how to make setTextCursorPosition work properly in Blocknote?

I’m using Blocknote in a Next.js project and trying to programmatically set the text cursor position on the first block. However, setTextCursorPosition doesn’t seem to work.

Here’s what I’ve tried:

Using setTextCursorPosition directly

const toText = useCallback(() => {
if (!editor || !editorRef.current) {
  console.log('Editor atau editorRef belum siap');
  return;
}

// Ambil blok pertama
const firstBlock = editor.document[0];

// Coba set cursor ke blok pertama
editor.setTextCursorPosition(firstBlock);
}, [editor]);

Editor Option

const editor = useCreateBlockNote({
schema: schema,
dropCursor: multiColumnDropCursor,
trailingBlock: true,
dictionary: {
  ...locales.en,
  multi_column: multiColumnLocales.en,
},
initialContent: initialValue
  ? initialValue
  : [
      {
        type: 'heading',
        content: '', // Blok pertama selalu menjadi H1,
      },
      {
        type: 'paragraph',
        content: '', // Area kosong untuk menulis
      },
    ],
 });

Issue: Cursor doesn’t appear in the editor.

Expected Behavior:

• The text cursor should move to the first block.
• The editor should be ready for input after running toText().

Actual Behavior

• The cursor doesn’t appear.
• Clicking manually works, but not programmatically.

Any ideas on how to make setTextCursorPosition work properly in Blocknote?

• reactjs
• next.js
• blocknote

Share Follow edited Feb 12 at 6:43 DarkBee 15.6k88 gold badges7272 silver badges116116 bronze badges asked Feb 12 at 6:28 Ivan PriyambudiIvan Priyambudi 111 silver badge44 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Finally i have solution with this code

editor.setTextCursorPosition(initialCursor?.targetBlock, initialCursor?.placement);
editor.focus();

本文标签： reactjsHow to programmatically set cursor position in BlocknoteStack Overflow