How can i focus a richtext / block?

[TBenTiCon]

Hey, im currently updating my Editor and just stumbled upon the missing "asyncFocusRichText".
What is the "new" way of focusing an element?

Im creating a new Block like this:

if (event.key === 'Enter' && event.ctrlKey) {
			event.preventDefault();
			this._isFocus = false;
			const noteBlock = this.doc.getBlockByFlavour('affine:note');
			const noteId = noteBlock[0].id;

			const addedBlocks = this.doc.addSiblingBlocks(
				this.model,
				[{ flavour: 'affine:paragraph' }],
				'after'
			);

But i cant figure out, how to focus the newly created block :(

[raintoway]

u want a function to focus a element/block ? if yes, it is strange bacause blocksuite is for writing, so the func of focusing a element/block is same as asyncFocusRichText, and the affine-paragragh is composed with rich-text

[raintoway]

and, u can try this func in selection.ts

/**
 * @deprecated Use `selectionManager.set` instead.
 */
export function focusBlockByModel(
  editorHost: EditorHost,
  model: BlockModel,
  position: SelectionPosition = 'end',
  zoom = 1
) {
  if (matchFlavours(model, ['affine:note', 'affine:page'])) {
    throw new Error("Can't focus note or page!");
  }

  assertExists(model.page.root);
  const pageBlock = editorHost.view.viewFromPath('block', [
    model.page.root.id,
  ]) as DocPageBlockComponent;
  assertExists(pageBlock);

  const element = editorHost.view.viewFromPath('block', buildPath(model));
  assertExists(element);
  const editableContainer = element?.querySelector('[contenteditable]');
  if (editableContainer) {
    focusRichText(editableContainer, position, zoom);
  }
}

[TBenTiCon]

Hi, thanks for the reply :)
I’m trying to focus on a newly created paragraph (and its rich text). Previously I did that with async focus rich text, but that seems to be no longer exported.

I will try your function on monday!

[golok727]

From the code you provided, it seems that you are trying to add a new paragraph after pressing Ctrl + Enter from the current range am I right?

This should set the cursor to the start of the newly added paragraph.
Please take a took at Selecting Blocks

const noteId = // your note-id;

const newParagraphId = this.doc.addBlock(
  "affine:paragraph",
  {},
  noteId
);

const { host } = editor;
host.selection.setGroup('note', [
  host.selection.create("text", {
    from: {
      path: [rootBlockId, noteId, newParagraphId],
      index: 0,
      length: 0,
    },
    to: null
  })
]);

[TBenTiCon]

Hi, thank you for your response =)

What would be the rootBlock in this case?

i tried this:

if (event.key === 'Enter' && event.ctrlKey) {
			event.preventDefault();
			this._isFocus = false;
			const noteBlock = this.doc.getBlockByFlavour('affine:note');
			const noteId = noteBlock[0].id;

			const addedBlocks = this.doc.addSiblingBlocks(
				this.model,
				[{ flavour: 'affine:paragraph' }],
				'after'
			);

			console.log(this.model.id);

			this.host.selection.setGroup('note', [
				this.host.selection.create('text', {
					from: {
						path: [this.model.id, noteId, addedBlocks[0].id],
						index: 0,
						length: 0
					},
					to: null
				})
			]);
		}

But this does not work :(

[TBenTiCon]

already fixed it, thanks, your solution worked!