TypixEditor provides a clean, fluent API for all editor operations. Every method that modifies the editor returns this, enabling chaining.

const editor = useTypixEditor();

editor
  .toggleBold()
  .alignCenter()
  .setFontSize(18);

Accessing the editor

import { useTypixEditor } from '@typix-editor/react';

function MyComponent() {
  const editor = useTypixEditor();
  // ...
}

Lexical access

Access the underlying Lexical editor for advanced operations:

const lexical = editor.lexical;

Text formatting

Method	Description
`toggleFormat(format)`	Toggle any `TextFormatType`
`toggleBold()`	Toggle bold
`toggleItalic()`	Toggle italic
`toggleUnderline()`	Toggle underline
`toggleStrikethrough()`	Toggle strikethrough
`toggleCode()`	Toggle inline code
`toggleSubscript()`	Toggle subscript
`toggleSuperscript()`	Toggle superscript
`toggleHighlight()`	Toggle highlight
`toggleLink(url)`	Toggle a link with the given URL
`clearFormatting()`	Remove all formatting from selection

editor.toggleBold();
editor.toggleFormat('italic');
editor.toggleLink('https://example.com');
editor.clearFormatting();

Block formatting

Method	Description
`toggleHeading({ level })`	Toggle heading (1–6)
`setParagraph()`	Convert to paragraph
`toggleBulletList()`	Toggle unordered list
`toggleOrderedList()`	Toggle ordered list
`toggleCheckList()`	Toggle check list
`toggleQuote()`	Toggle block quote
`toggleCodeBlock(language?)`	Toggle code block with optional language

editor.toggleHeading({ level: 2 });
editor.toggleBulletList();
editor.toggleCodeBlock('typescript');

Alignment

Method	Description
`formatAlign(alignment)`	Set any `ElementAlignment`
`alignLeft()`	Align left
`alignCenter()`	Align center
`alignRight()`	Align right
`alignJustify()`	Justify
`alignStart()`	Align start (RTL-aware)
`alignEnd()`	Align end (RTL-aware)

editor.alignCenter();
editor.formatAlign('justify');

State queries

Method	Returns	Description
`isActive(format)`	`boolean`	Check if a text format is active
`getActiveFormats()`	`Set<TextFormatType>`	Get all active text formats
`isBlockActive(blockType)`	`boolean`	Check if a block type is active
`getBlockType()`	`BlockType \| null`	Get the current block type

if (editor.isActive('bold')) {
  console.log('Bold is active');
}

const blockType = editor.getBlockType(); // 'paragraph', 'h1', 'bullet', etc.

BlockType values

"paragraph" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "bullet" | "number" | "check" | "quote" | "code"

Content export

Method	Returns	Description
`getJSON()`	`SerializedEditorState`	Export as Lexical JSON
`getHTML()`	`string`	Export as HTML string
`getMarkdown()`	`string`	Export as Markdown string
`getText()`	`string`	Export as plain text

const json = editor.getJSON();
const html = editor.getHTML();
const markdown = editor.getMarkdown();
const text = editor.getText();

Content import

Method	Description
`setJSON(json)`	Replace content from Lexical JSON
`setHTML(html)`	Replace content from HTML string
`setMarkdown(markdown)`	Replace content from Markdown string
`clearContent()`	Clear all content

editor.setHTML('<p>Hello <strong>world</strong></p>');
editor.setMarkdown('# Hello\n\nParagraph text');
editor.clearContent();

History

Method	Description
`undo()`	Undo the last change
`redo()`	Redo the last undone change

editor.undo();
editor.redo();

Editor control

Method	Description
`focus()`	Focus the editor
`blur()`	Blur the editor
`isEditable()`	Check if the editor is editable
`setEditable(editable)`	Enable or disable editing

editor.focus();
editor.setEditable(false); // read-only mode

Advanced operations

read

Execute a synchronous read operation on the editor state:

const result = editor.read(() => {
  const selection = $getSelection();
  return selection?.getTextContent();
});

update

Execute a write operation on the editor:

editor.update(() => {
  const root = $getRoot();
  root.clear();
});

onUpdate

const unsubscribe = editor.onUpdate(({ editorState }) => {
  editorState.read(() => {
    console.log('Editor updated');
  });
});

// Later: clean up
unsubscribe();

Method	Description
`setFontSize(size)`	Set font size in pixels
`getFontSize()`	Get current font size
`incrementFontSize(step?)`	Increase font size (default step: 1)
`decrementFontSize(step?)`	Decrease font size (default step: 1)

TypixEditor