Block Manager

The Block Manager is the main class for managing blocks in the editor. It is accessible from any part of the application and allows creating, deleting, moving blocks, as well as performing other operations on them.

BlockManager

A class for managing blocks in the editor.

BlockManager Methods

Function	Signature	Description
toasts	toasts(): IToasts	Returns the toast notification service instance.
refreshVirtualSelection	refreshVirtualSelection(): IVirtualSelection | null	Refreshes the virtual selection and returns its instance.
getVirtualSelection	getVirtualSelection(): IVirtualSelection | null	Returns the virtual selection instance or creates it if it doesn't exist.
clearVirtualSelection	clearVirtualSelection(): void	Clears the virtual selection.
destroyVirtualSelection	destroyVirtualSelection(): void	Destroys the virtual selection.
getBlocksContainer	getBlocksContainer(): HTMLElement | null	Returns the blocks container.
focus	focus(index: number, startPos?: number, endPos?: number, itemIndex?: number): BlockElement | null	Sets focus on a block by index.
getBlocks	getBlocks(): BlockElement[]	Returns an array of all blocks.
getBlock	getBlock(index?: number): BlockElement | null	Returns the block by index or the active one.
getContentElement	getContentElement(blockElement?: BlockElement): HTMLElement | null	Returns the content element of a block.
getNextBlockElement	getNextBlockElement(): BlockElement | null	Returns the next block.
getPrevBlockElement	getPrevBlockElement(): BlockElement | null	Returns the previous block.
findParent	findParent(targetElement: EventTarget | BlockElement | HTMLElement): BlockElement | null	Finds the parent block for the given element.
use	use(index: number): void	Sets the current active block by index.
getIndex	getIndex(el?: BlockElement | HTMLElement | EventTarget): number	Returns the index of a block.
count	count(): number	Returns the number of blocks.
isEmpty	isEmpty(index?: number): boolean	Checks if the block at the given index is empty.
detectEmpty	detectEmpty(emptyAttr: boolean = true): void	Detects empty blocks and sets the data-empty attribute.
normalize	normalize(): void	Normalizes the content of all blocks.
getModel	getModel(index?: number): BlockModel | null	Returns the block model by index.
removeBlock	removeBlock(index: number | number[] = -1, skipEvents: boolean = false): number | null	Removes block(s) by index(es).
createDefaultBlock	createDefaultBlock(index: number = -1, options?: BlockCreateSchema): BlockElement | null	Creates a default block.
createBlock	createBlock(name: string, index: number = -1, options?: BlockCreateSchema, skipEvents: boolean = false, scrollIntoView: boolean | ScrollIntoViewOptions = true): BlockElement | null	Creates a new block with the specified name.
rebuild	rebuild(index: number): BlockElement | null	Rebuilds the block at the given index, updating its entire structure.
moveBlock	moveBlock(index: number, targetIndex: number, skipEvents: boolean = false): void	Moves a block to a new position.
merge	merge(index: number, targetIndex: number, focus?: number, useItems?: boolean): void	Merges two editable blocks.
convert	convert(blockElement: BlockElement, targetModel: BlockModel): boolean	Converts a block to another type (if supported).
getModels	getModels(): BlockModel[]	Returns an array of all block models.
getSchemas	getSchemas(): BlockModelSchema[]	Returns an array of block schemas.
cleanupSchemas	cleanupSchemas(): void	Clears the block schema cache.
getSchema	getSchema(name: string): BlockModelSchema | null	Returns the block schema by name.
getRealName	getRealName(name: string): string | null	Returns the real block name by alias.
htmlToData	htmlToData(html: string): Array<BlockSchema | string>	Converts HTML to block data.
parseBlock	parseBlock(blockSchema: BlockSchema, skipDecode: boolean = false): BlockElement | null	Parses a block schema and returns a block element.
parseBlocks	parseBlocks(data: BlockSchema[], skipDecode: boolean = false): BlockElement[]	Parses an array of block schemas and returns block elements.
parseChildren	parseChildren(schema: BlockSchema | BlockChildSchema, skipDecode: boolean = false, returnElement: boolean = false): Node[]	Parses the child elements of a block schema.
destroy	destroy(): void	Destroys the BlockManager instance and cleans up resources.

Example of Using BlockManager

import { BlockModel } from "@/core/models";
import { Paragraph } from "texditor/entities/blocks";
import Texditor from "texditor";

// Example of a custom block and using the block manager inside it (this is for reference only, do not use this in real projects)
class CustomHeader extends BlockModel {
  onMount(evt) {
    const { blockManager } = this.editor;
    const currentBlock = blockManager.getBlock();
    const index = blockManager.getIndex();

    console.log(currentBlock, index)
  }
}

const editor = new Texditor({
  handle: "my-editor",
  blocks: [
    Paragraph,
    CustomHeader.setup({
      name: 'header',
      tagName: 'h2',
    })
  ]
});

// Removing a block by index
editor.blockManager.removeBlock(1);

// Creating a new block
editor.blockManager.createBlock('p', 0);

// Getting the current block
const currentBlock = editor.blockManager.getBlock();

// Focusing on a block
editor.blockManager.focus(2);

// Moving a block
editor.blockManager.moveBlock(0, 3);

// Merging blocks
editor.blockManager.merge(1, 2);