@umbraco-cms/backoffice
    Preparing search index...

    Interface Commands<ReturnType>

    interface Commands<ReturnType = any> {
        backgroundColor: {
            setBackgroundColor: (backgroundColor: string) => ReturnType;
            unsetBackgroundColor: () => ReturnType;
        };
        blockQuote: {
            setBlockquote: () => ReturnType;
            toggleBlockquote: () => ReturnType;
            unsetBlockquote: () => ReturnType;
        };
        blur: { blur: () => ReturnType };
        bold: {
            setBold: () => ReturnType;
            toggleBold: () => ReturnType;
            unsetBold: () => ReturnType;
        };
        bulletList: { toggleBulletList: () => ReturnType };
        clearContent: { clearContent: (emitUpdate?: boolean) => ReturnType };
        clearNodes: { clearNodes: () => ReturnType };
        code: {
            setCode: () => ReturnType;
            toggleCode: () => ReturnType;
            unsetCode: () => ReturnType;
        };
        codeBlock: {
            setCodeBlock: (attributes?: { language: string }) => ReturnType;
            toggleCodeBlock: (attributes?: { language: string }) => ReturnType;
        };
        color: {
            setColor: (color: string) => ReturnType;
            unsetColor: () => ReturnType;
        };
        command: { command: (fn: (props: CommandProps) => boolean) => ReturnType };
        createParagraphNear: { createParagraphNear: () => ReturnType };
        cut: {
            cut: (
                range: { from: number; to: number },
                targetPos: number,
            ) => ReturnType;
        };
        deleteCurrentNode: { deleteCurrentNode: () => ReturnType };
        deleteNode: { deleteNode: (typeOrName: string | NodeType) => ReturnType };
        deleteRange: { deleteRange: (range: Range) => ReturnType };
        deleteSelection: { deleteSelection: () => ReturnType };
        enter: { enter: () => ReturnType };
        exitCode: { exitCode: () => ReturnType };
        extendMarkRange: {
            extendMarkRange: (
                typeOrName: string | MarkType,
                attributes?: Record<string, any>,
            ) => ReturnType;
        };
        first: {
            first: (
                commands: Command[] | ((props: CommandProps) => Command[]),
            ) => ReturnType;
        };
        focus: {
            focus: (
                position?: FocusPosition,
                options?: { scrollIntoView?: boolean },
            ) => ReturnType;
        };
        fontFamily: {
            setFontFamily: (fontFamily: string) => ReturnType;
            unsetFontFamily: () => ReturnType;
        };
        fontSize: {
            setFontSize: (fontSize: string) => ReturnType;
            unsetFontSize: () => ReturnType;
        };
        forEach: {
            forEach: <T>(
                items: T[],
                fn: (item: T, props: CommandProps & { index: number }) => boolean,
            ) => ReturnType;
        };
        hardBreak: { setHardBreak: () => ReturnType };
        heading: {
            setHeading: (attributes: { level: Level }) => ReturnType;
            toggleHeading: (attributes: { level: Level }) => ReturnType;
        };
        horizontalRule: { setHorizontalRule: () => ReturnType };
        htmlClassAttribute: {
            setClassName: (className?: string, type?: string) => ReturnType;
            toggleClassName: (className?: string, type?: string) => ReturnType;
            unsetClassName: (type?: string) => ReturnType;
        };
        htmlDatasetAttributes: {
            setId: (id?: string, type?: string) => ReturnType;
            toggleId: (id?: string, type?: string) => ReturnType;
            unsetId: (type?: string) => ReturnType;
        };
        htmlIdAttribute: {
            setId: (id?: string, type?: string) => ReturnType;
            toggleId: (id?: string, type?: string) => ReturnType;
            unsetId: (type?: string) => ReturnType;
        };
        htmlStyleAttribute: {
            setStyles: (style?: string, type?: string) => ReturnType;
            toggleStyles: (style?: string, type?: string) => ReturnType;
            unsetStyles: (type?: string) => ReturnType;
        };
        image: { setImage: (options: SetImageOptions) => ReturnType };
        insertContent: {
            insertContent: (
                value: ProseMirrorNode | Content | Fragment,
                options?: InsertContentOptions,
            ) => ReturnType;
        };
        insertContentAt: {
            insertContentAt: (
                position: number | Range,
                value: ProseMirrorNode | Content | Fragment,
                options?: InsertContentAtOptions,
            ) => ReturnType;
        };
        italic: {
            setItalic: () => ReturnType;
            toggleItalic: () => ReturnType;
            unsetItalic: () => ReturnType;
        };
        joinBackward: { joinBackward: () => ReturnType };
        joinDown: { joinDown: () => ReturnType };
        joinForward: { joinForward: () => ReturnType };
        joinItemBackward: { joinItemBackward: () => ReturnType };
        joinItemForward: { joinItemForward: () => ReturnType };
        joinTextblockBackward: { joinTextblockBackward: () => ReturnType };
        joinTextblockForward: { joinTextblockForward: () => ReturnType };
        joinUp: { joinUp: () => ReturnType };
        keyboardShortcut: { keyboardShortcut: (name: string) => ReturnType };
        lift: {
            lift: (
                typeOrName: string | NodeType,
                attributes?: Record<string, any>,
            ) => ReturnType;
        };
        liftEmptyBlock: { liftEmptyBlock: () => ReturnType };
        liftListItem: {
            liftListItem: (typeOrName: string | NodeType) => ReturnType;
        };
        lineHeight: {
            setLineHeight: (lineHeight: string) => ReturnType;
            unsetLineHeight: () => ReturnType;
        };
        link: {
            setLink: (
                attributes: {
                    class?: null | string;
                    href: string;
                    rel?: null | string;
                    target?: null | string;
                },
            ) => ReturnType;
            toggleLink: (
                attributes?: {
                    class?: null | string;
                    href: string;
                    rel?: null | string;
                    target?: null | string;
                },
            ) => ReturnType;
            unsetLink: () => ReturnType;
        };
        newlineInCode: { newlineInCode: () => ReturnType };
        orderedList: { toggleOrderedList: () => ReturnType };
        paragraph: { setParagraph: () => ReturnType };
        resetAttributes: {
            resetAttributes: (
                typeOrName: string | NodeType | MarkType,
                attributes: string | string[],
            ) => ReturnType;
        };
        scrollIntoView: { scrollIntoView: () => ReturnType };
        selectAll: { selectAll: () => ReturnType };
        selectNodeBackward: { selectNodeBackward: () => ReturnType };
        selectNodeForward: { selectNodeForward: () => ReturnType };
        selectParentNode: { selectParentNode: () => ReturnType };
        selectTextblockEnd: { selectTextblockEnd: () => ReturnType };
        selectTextblockStart: { selectTextblockStart: () => ReturnType };
        setContent: {
            setContent: (
                content: ProseMirrorNode | Content | Fragment,
                options?: SetContentOptions,
            ) => ReturnType;
        };
        setMark: {
            setMark: (
                typeOrName: string | MarkType,
                attributes?: Record<string, any>,
            ) => ReturnType;
        };
        setMeta: {
            setMeta: (
                key: string | Plugin<any> | PluginKey<any>,
                value: any,
            ) => ReturnType;
        };
        setNode: {
            setNode: (
                typeOrName: string | NodeType,
                attributes?: Record<string, any>,
            ) => ReturnType;
        };
        setNodeSelection: { setNodeSelection: (position: number) => ReturnType };
        setTextDirection: {
            setTextDirection: (
                direction: "rtl" | "ltr" | "auto",
                position?: number | Range,
            ) => ReturnType;
        };
        setTextSelection: {
            setTextSelection: (position: number | Range) => ReturnType;
        };
        sinkListItem: {
            sinkListItem: (typeOrName: string | NodeType) => ReturnType;
        };
        span: {
            setSpanStyle: (styles?: string) => ReturnType;
            toggleSpanStyle: (styles?: string) => ReturnType;
            unsetSpanStyle: (styles?: string) => ReturnType;
        };
        splitBlock: {
            splitBlock: (options?: { keepMarks?: boolean }) => ReturnType;
        };
        splitListItem: {
            splitListItem: (
                typeOrName: string | NodeType,
                overrideAttrs?: Record<string, any>,
            ) => ReturnType;
        };
        strike: {
            setStrike: () => ReturnType;
            toggleStrike: () => ReturnType;
            unsetStrike: () => ReturnType;
        };
        subscript: {
            setSubscript: () => ReturnType;
            toggleSubscript: () => ReturnType;
            unsetSubscript: () => ReturnType;
        };
        superscript: {
            setSuperscript: () => ReturnType;
            toggleSuperscript: () => ReturnType;
            unsetSuperscript: () => ReturnType;
        };
        table: {
            addColumnAfter: () => ReturnType;
            addColumnBefore: () => ReturnType;
            addRowAfter: () => ReturnType;
            addRowBefore: () => ReturnType;
            deleteColumn: () => ReturnType;
            deleteRow: () => ReturnType;
            deleteTable: () => ReturnType;
            fixTables: () => ReturnType;
            goToNextCell: () => ReturnType;
            goToPreviousCell: () => ReturnType;
            insertTable: (
                options?: { cols?: number; rows?: number; withHeaderRow?: boolean },
            ) => ReturnType;
            mergeCells: () => ReturnType;
            mergeOrSplit: () => ReturnType;
            setCellAttribute: (name: string, value: any) => ReturnType;
            setCellSelection: (
                position: { anchorCell: number; headCell?: number },
            ) => ReturnType;
            splitCell: () => ReturnType;
            toggleHeaderCell: () => ReturnType;
            toggleHeaderColumn: () => ReturnType;
            toggleHeaderRow: () => ReturnType;
        };
        taskList: { toggleTaskList: () => ReturnType };
        textAlign: {
            setTextAlign: (alignment: string) => ReturnType;
            toggleTextAlign: (alignment: string) => ReturnType;
            unsetTextAlign: () => ReturnType;
        };
        textIndent: { textIndent: () => ReturnType; textOutdent: () => ReturnType };
        textStyle: {
            removeEmptyTextStyle: () => ReturnType;
            toggleTextStyle: (attributes?: TextStyleAttributes) => ReturnType;
        };
        toggleList: {
            toggleList: (
                listTypeOrName: string | NodeType,
                itemTypeOrName: string | NodeType,
                keepMarks?: boolean,
                attributes?: Record<string, any>,
            ) => ReturnType;
        };
        toggleMark: {
            toggleMark: (
                typeOrName: string | MarkType,
                attributes?: Record<string, any>,
                options?: { extendEmptyMarkRange?: boolean },
            ) => ReturnType;
        };
        toggleNode: {
            toggleNode: (
                typeOrName: string | NodeType,
                toggleTypeOrName: string | NodeType,
                attributes?: Record<string, any>,
            ) => ReturnType;
        };
        toggleWrap: {
            toggleWrap: (
                typeOrName: string | NodeType,
                attributes?: Record<string, any>,
            ) => ReturnType;
        };
        umbEmbeddedMedia: {
            setEmbeddedMedia: (
                options: {
                    constrain?: boolean;
                    height?: string;
                    markup: string;
                    url: string;
                    width?: string;
                },
            ) => ReturnType;
        };
        umbImage: { setImage: (options: UmbImageAttributes) => ReturnType };
        umbLink: {
            ensureUmbLink: (
                attributes: {
                    "data-anchor"?: null | string;
                    href: string;
                    target?: null | string;
                    title?: null | string;
                    type: string;
                },
            ) => ReturnType;
            setUmbLink: (
                attributes: {
                    "data-anchor"?: null | string;
                    href: string;
                    target?: null | string;
                    title?: null | string;
                    type: string;
                },
            ) => ReturnType;
            unsetUmbLink: () => ReturnType;
        };
        umbRteBlock: { setBlock: (options: { contentKey: string }) => ReturnType };
        umbRteBlockInline: {
            setBlockInline: (options: { contentKey: string }) => ReturnType;
        };
        underline: {
            setUnderline: () => ReturnType;
            toggleUnderline: () => ReturnType;
            unsetUnderline: () => ReturnType;
        };
        undoInputRule: { undoInputRule: () => ReturnType };
        undoRedo: { redo: () => ReturnType; undo: () => ReturnType };
        unsetAllMarks: { unsetAllMarks: () => ReturnType };
        unsetMark: {
            unsetMark: (
                typeOrName: string | MarkType,
                options?: { extendEmptyMarkRange?: boolean },
            ) => ReturnType;
        };
        unsetTextDirection: {
            unsetTextDirection: (position?: number | Range) => ReturnType;
        };
        updateAttributes: {
            updateAttributes: (
                typeOrName: string | NodeType | MarkType,
                attributes: Record<string, any>,
            ) => ReturnType;
        };
        wrapIn: {
            wrapIn: (
                typeOrName: string | NodeType,
                attributes?: Record<string, any>,
            ) => ReturnType;
        };
        wrapInList: {
            wrapInList: (
                typeOrName: string | NodeType,
                attributes?: Record<string, any>,
            ) => ReturnType;
        };
    }

    Type Parameters

    • ReturnType = any
    Index

    Properties

    backgroundColor blockQuote blur bold bulletList clearContent clearNodes code codeBlock color command createParagraphNear cut deleteCurrentNode deleteNode deleteRange deleteSelection enter exitCode extendMarkRange first focus fontFamily fontSize forEach hardBreak heading horizontalRule htmlClassAttribute htmlDatasetAttributes htmlIdAttribute htmlStyleAttribute image insertContent insertContentAt italic joinBackward joinDown joinForward joinItemBackward joinItemForward joinTextblockBackward joinTextblockForward joinUp keyboardShortcut lift liftEmptyBlock liftListItem lineHeight link newlineInCode orderedList paragraph resetAttributes scrollIntoView selectAll selectNodeBackward selectNodeForward selectParentNode selectTextblockEnd selectTextblockStart setContent setMark setMeta setNode setNodeSelection setTextDirection setTextSelection sinkListItem span splitBlock splitListItem strike subscript superscript table taskList textAlign textIndent textStyle toggleList toggleMark toggleNode toggleWrap umbEmbeddedMedia umbImage umbLink umbRteBlock umbRteBlockInline underline undoInputRule undoRedo unsetAllMarks unsetMark unsetTextDirection updateAttributes wrapIn wrapInList

    Properties

    backgroundColor: {
        setBackgroundColor: (backgroundColor: string) => ReturnType;
        unsetBackgroundColor: () => ReturnType;
    }

    Type Declaration

    • setBackgroundColor: (backgroundColor: string) => ReturnType

      Set the text color

      editor.commands.setColor('red')
    • unsetBackgroundColor: () => ReturnType

      Unset the text backgroundColor

      editor.commands.unsetBackgroundColor()
    blockQuote: {
        setBlockquote: () => ReturnType;
        toggleBlockquote: () => ReturnType;
        unsetBlockquote: () => ReturnType;
    }

    Type Declaration

    • setBlockquote: () => ReturnType

      Set a blockquote node

    • toggleBlockquote: () => ReturnType

      Toggle a blockquote node

    • unsetBlockquote: () => ReturnType

      Unset a blockquote node

    blur: { blur: () => ReturnType }

    Type Declaration

    • blur: () => ReturnType

      Removes focus from the editor.

      editor.commands.blur()
    bold: {
        setBold: () => ReturnType;
        toggleBold: () => ReturnType;
        unsetBold: () => ReturnType;
    }

    Type Declaration

    • setBold: () => ReturnType

      Set a bold mark

    • toggleBold: () => ReturnType

      Toggle a bold mark

    • unsetBold: () => ReturnType

      Unset a bold mark

    bulletList: { toggleBulletList: () => ReturnType }

    Type Declaration

    • toggleBulletList: () => ReturnType

      Toggle a bullet list

    clearContent: { clearContent: (emitUpdate?: boolean) => ReturnType }

    Type Declaration

    • clearContent: (emitUpdate?: boolean) => ReturnType

      Clear the whole document.

      editor.commands.clearContent()
    clearNodes: { clearNodes: () => ReturnType }

    Type Declaration

    • clearNodes: () => ReturnType

      Normalize nodes to a simple paragraph.

      editor.commands.clearNodes()
    code: {
        setCode: () => ReturnType;
        toggleCode: () => ReturnType;
        unsetCode: () => ReturnType;
    }

    Type Declaration

    • setCode: () => ReturnType

      Set a code mark

    • toggleCode: () => ReturnType

      Toggle inline code

    • unsetCode: () => ReturnType

      Unset a code mark

    codeBlock: {
        setCodeBlock: (attributes?: { language: string }) => ReturnType;
        toggleCodeBlock: (attributes?: { language: string }) => ReturnType;
    }

    Type Declaration

    • setCodeBlock: (attributes?: { language: string }) => ReturnType

      Set a code block

      editor.commands.setCodeBlock({ language: 'javascript' })
    • toggleCodeBlock: (attributes?: { language: string }) => ReturnType

      Toggle a code block

      editor.commands.toggleCodeBlock({ language: 'javascript' })
    color: { setColor: (color: string) => ReturnType; unsetColor: () => ReturnType }

    Type Declaration

    • setColor: (color: string) => ReturnType

      Set the text color

      editor.commands.setColor('red')
    • unsetColor: () => ReturnType

      Unset the text color

      editor.commands.unsetColor()
    command: { command: (fn: (props: CommandProps) => boolean) => ReturnType }

    Type Declaration

    • command: (fn: (props: CommandProps) => boolean) => ReturnType

      Define a command inline.

      editor.commands.command(({ tr, state }) => {
        ...
        return true
      })
    createParagraphNear: { createParagraphNear: () => ReturnType }

    Type Declaration

    • createParagraphNear: () => ReturnType

      Create a paragraph nearby.

      editor.commands.createParagraphNear()
    cut: {
        cut: (
            range: { from: number; to: number },
            targetPos: number,
        ) => ReturnType;
    }

    Type Declaration

    • cut: (range: { from: number; to: number }, targetPos: number) => ReturnType

      Cuts content from a range and inserts it at a given position.

      editor.commands.cut({ from: 1, to: 3 }, 5)
    deleteCurrentNode: { deleteCurrentNode: () => ReturnType }

    Type Declaration

    • deleteCurrentNode: () => ReturnType

      Delete the node that currently has the selection anchor.

      editor.commands.deleteCurrentNode()
    deleteNode: { deleteNode: (typeOrName: string | NodeType) => ReturnType }

    Type Declaration

    • deleteNode: (typeOrName: string | NodeType) => ReturnType

      Delete a node with a given type or name.

      editor.commands.deleteNode('paragraph')
    deleteRange: { deleteRange: (range: Range) => ReturnType }

    Type Declaration

    • deleteRange: (range: Range) => ReturnType

      Delete a given range.

      editor.commands.deleteRange({ from: 1, to: 3 })
    deleteSelection: { deleteSelection: () => ReturnType }

    Type Declaration

    • deleteSelection: () => ReturnType

      Delete the selection, if there is one.

      editor.commands.deleteSelection()
    enter: { enter: () => ReturnType }

    Type Declaration

    • enter: () => ReturnType

      Trigger enter.

      editor.commands.enter()
    exitCode: { exitCode: () => ReturnType }

    Type Declaration

    • exitCode: () => ReturnType

      Exit from a code block.

      editor.commands.exitCode()
    extendMarkRange: {
        extendMarkRange: (
            typeOrName: string | MarkType,
            attributes?: Record<string, any>,
        ) => ReturnType;
    }

    Type Declaration

    • extendMarkRange: (typeOrName: string | MarkType, attributes?: Record<string, any>) => ReturnType

      Extends the text selection to the current mark by type or name.

      editor.commands.extendMarkRange('bold')

      editor.commands.extendMarkRange('mention', { userId: "1" })
    first: {
        first: (
            commands: Command[] | ((props: CommandProps) => Command[]),
        ) => ReturnType;
    }

    Type Declaration

    • first: (commands: Command[] | ((props: CommandProps) => Command[])) => ReturnType

      Runs one command after the other and stops at the first which returns true.

      editor.commands.first([command1, command2])
    focus: {
        focus: (
            position?: FocusPosition,
            options?: { scrollIntoView?: boolean },
        ) => ReturnType;
    }

    Type Declaration

    • focus: (position?: FocusPosition, options?: { scrollIntoView?: boolean }) => ReturnType

      Focus the editor at the given position.

      editor.commands.focus()

      editor.commands.focus(32, { scrollIntoView: false })
    fontFamily: {
        setFontFamily: (fontFamily: string) => ReturnType;
        unsetFontFamily: () => ReturnType;
    }

    Type Declaration

    • setFontFamily: (fontFamily: string) => ReturnType

      Set the font family

      editor.commands.setFontFamily('Arial')
    • unsetFontFamily: () => ReturnType

      Unset the font family

      editor.commands.unsetFontFamily()
    fontSize: {
        setFontSize: (fontSize: string) => ReturnType;
        unsetFontSize: () => ReturnType;
    }

    Type Declaration

    • setFontSize: (fontSize: string) => ReturnType

      Set the font size

      editor.commands.setFontSize('16px')
    • unsetFontSize: () => ReturnType

      Unset the font size

      editor.commands.unsetFontSize()
    forEach: {
        forEach: <T>(
            items: T[],
            fn: (item: T, props: CommandProps & { index: number }) => boolean,
        ) => ReturnType;
    }

    Type Declaration

    • forEach: <T>(
          items: T[],
          fn: (item: T, props: CommandProps & { index: number }) => boolean,
      ) => ReturnType

      Loop through an array of items.

    hardBreak: { setHardBreak: () => ReturnType }

    Type Declaration

    • setHardBreak: () => ReturnType

      Add a hard break

      editor.commands.setHardBreak()
    heading: {
        setHeading: (attributes: { level: Level }) => ReturnType;
        toggleHeading: (attributes: { level: Level }) => ReturnType;
    }

    Type Declaration

    • setHeading: (attributes: { level: Level }) => ReturnType

      Set a heading node

      editor.commands.setHeading({ level: 1 })
    • toggleHeading: (attributes: { level: Level }) => ReturnType

      Toggle a heading node

      editor.commands.toggleHeading({ level: 1 })
    horizontalRule: { setHorizontalRule: () => ReturnType }

    Type Declaration

    • setHorizontalRule: () => ReturnType

      Add a horizontal rule

      editor.commands.setHorizontalRule()
    htmlClassAttribute: {
        setClassName: (className?: string, type?: string) => ReturnType;
        toggleClassName: (className?: string, type?: string) => ReturnType;
        unsetClassName: (type?: string) => ReturnType;
    }
    htmlDatasetAttributes: {
        setId: (id?: string, type?: string) => ReturnType;
        toggleId: (id?: string, type?: string) => ReturnType;
        unsetId: (type?: string) => ReturnType;
    }
    htmlIdAttribute: {
        setId: (id?: string, type?: string) => ReturnType;
        toggleId: (id?: string, type?: string) => ReturnType;
        unsetId: (type?: string) => ReturnType;
    }
    htmlStyleAttribute: {
        setStyles: (style?: string, type?: string) => ReturnType;
        toggleStyles: (style?: string, type?: string) => ReturnType;
        unsetStyles: (type?: string) => ReturnType;
    }
    image: { setImage: (options: SetImageOptions) => ReturnType }

    Type Declaration

    • setImage: (options: SetImageOptions) => ReturnType

      Add an image

      editor
        .commands
        .setImage({ src: 'https://tiptap.dev/logo.png', alt: 'tiptap', title: 'tiptap logo' })
    insertContent: {
        insertContent: (
            value: ProseMirrorNode | Content | Fragment,
            options?: InsertContentOptions,
        ) => ReturnType;
    }

    Type Declaration

    • insertContent: (
          value: ProseMirrorNode | Content | Fragment,
          options?: InsertContentOptions,
      ) => ReturnType

      Insert a node or string of HTML at the current position.

      editor.commands.insertContent('<h1>Example</h1>')

      editor.commands.insertContent('<h1>Example</h1>', { updateSelection: false })
    insertContentAt: {
        insertContentAt: (
            position: number | Range,
            value: ProseMirrorNode | Content | Fragment,
            options?: InsertContentAtOptions,
        ) => ReturnType;
    }

    Type Declaration

    • insertContentAt: (
          position: number | Range,
          value: ProseMirrorNode | Content | Fragment,
          options?: InsertContentAtOptions,
      ) => ReturnType

      Insert a node or string of HTML at a specific position.

      editor.commands.insertContentAt(0, '<h1>Example</h1>')
    italic: {
        setItalic: () => ReturnType;
        toggleItalic: () => ReturnType;
        unsetItalic: () => ReturnType;
    }

    Type Declaration

    • setItalic: () => ReturnType

      Set an italic mark

      editor.commands.setItalic()
    • toggleItalic: () => ReturnType

      Toggle an italic mark

      editor.commands.toggleItalic()
    • unsetItalic: () => ReturnType

      Unset an italic mark

      editor.commands.unsetItalic()
    joinBackward: { joinBackward: () => ReturnType }

    Type Declaration

    • joinBackward: () => ReturnType

      If the selection is empty and at the start of a textblock, try to reduce the distance between that block and the one before it—if there's a block directly before it that can be joined, join them. If not, try to move the selected block closer to the next one in the document structure by lifting it out of its parent or moving it into a parent of the previous block. Will use the view for accurate (bidi-aware) start-of-textblock detection if given.

      editor.commands.joinBackward()
    joinDown: { joinDown: () => ReturnType }

    Type Declaration

    • joinDown: () => ReturnType

      Join the selected block, or the closest ancestor of the selection that can be joined, with the sibling after it.

      editor.commands.joinDown()
    joinForward: { joinForward: () => ReturnType }

    Type Declaration

    • joinForward: () => ReturnType

      If the selection is empty and the cursor is at the end of a textblock, try to reduce or remove the boundary between that block and the one after it, either by joining them or by moving the other block closer to this one in the tree structure. Will use the view for accurate start-of-textblock detection if given.

      editor.commands.joinForward()
    joinItemBackward: { joinItemBackward: () => ReturnType }

    Type Declaration

    • joinItemBackward: () => ReturnType

      Join two items backward.

      editor.commands.joinItemBackward()
    joinItemForward: { joinItemForward: () => ReturnType }

    Type Declaration

    • joinItemForward: () => ReturnType

      Join two items Forwards.

      editor.commands.joinItemForward()
    joinTextblockBackward: { joinTextblockBackward: () => ReturnType }

    Type Declaration

    • joinTextblockBackward: () => ReturnType

      A more limited form of joinBackward that only tries to join the current textblock to the one before it, if the cursor is at the start of a textblock.

    joinTextblockForward: { joinTextblockForward: () => ReturnType }

    Type Declaration

    • joinTextblockForward: () => ReturnType

      A more limited form of joinForward that only tries to join the current textblock to the one after it, if the cursor is at the end of a textblock.

    joinUp: { joinUp: () => ReturnType }

    Type Declaration

    • joinUp: () => ReturnType

      Join the selected block or, if there is a text selection, the closest ancestor block of the selection that can be joined, with the sibling above it.

      editor.commands.joinUp()
    keyboardShortcut: { keyboardShortcut: (name: string) => ReturnType }

    Type Declaration

    • keyboardShortcut: (name: string) => ReturnType

      Trigger a keyboard shortcut.

      editor.commands.keyboardShortcut('Mod-b')
    lift: {
        lift: (
            typeOrName: string | NodeType,
            attributes?: Record<string, any>,
        ) => ReturnType;
    }

    Type Declaration

    • lift: (typeOrName: string | NodeType, attributes?: Record<string, any>) => ReturnType

      Removes an existing wrap if possible lifting the node out of it

      editor.commands.lift('paragraph')

      editor.commands.lift('heading', { level: 1 })
    liftEmptyBlock: { liftEmptyBlock: () => ReturnType }

    Type Declaration

    • liftEmptyBlock: () => ReturnType

      If the cursor is in an empty textblock that can be lifted, lift the block.

      editor.commands.liftEmptyBlock()
    liftListItem: { liftListItem: (typeOrName: string | NodeType) => ReturnType }

    Type Declaration

    • liftListItem: (typeOrName: string | NodeType) => ReturnType

      Create a command to lift the list item around the selection up into a wrapping list.

      editor.commands.liftListItem('listItem')
    lineHeight: {
        setLineHeight: (lineHeight: string) => ReturnType;
        unsetLineHeight: () => ReturnType;
    }

    Type Declaration

    • setLineHeight: (lineHeight: string) => ReturnType

      Set the line height

      editor.commands.setLineHeight('1.5')
    • unsetLineHeight: () => ReturnType

      Unset the line height

      editor.commands.unsetLineHeight()
    link: {
        setLink: (
            attributes: {
                class?: null | string;
                href: string;
                rel?: null | string;
                target?: null | string;
            },
        ) => ReturnType;
        toggleLink: (
            attributes?: {
                class?: null | string;
                href: string;
                rel?: null | string;
                target?: null | string;
            },
        ) => ReturnType;
        unsetLink: () => ReturnType;
    }

    Type Declaration

    • setLink: (
          attributes: {
              class?: null | string;
              href: string;
              rel?: null | string;
              target?: null | string;
          },
      ) => ReturnType

      Set a link mark

      editor.commands.setLink({ href: 'https://tiptap.dev' })
    • toggleLink: (
          attributes?: {
              class?: null | string;
              href: string;
              rel?: null | string;
              target?: null | string;
          },
      ) => ReturnType

      Toggle a link mark

      editor.commands.toggleLink({ href: 'https://tiptap.dev' })
    • unsetLink: () => ReturnType

      Unset a link mark

      editor.commands.unsetLink()
    newlineInCode: { newlineInCode: () => ReturnType }

    Type Declaration

    • newlineInCode: () => ReturnType

      Add a newline character in code.

      editor.commands.newlineInCode()
    orderedList: { toggleOrderedList: () => ReturnType }

    Type Declaration

    • toggleOrderedList: () => ReturnType

      Toggle an ordered list

      editor.commands.toggleOrderedList()
    paragraph: { setParagraph: () => ReturnType }

    Type Declaration

    • setParagraph: () => ReturnType

      Toggle a paragraph

      editor.commands.toggleParagraph()
    resetAttributes: {
        resetAttributes: (
            typeOrName: string | NodeType | MarkType,
            attributes: string | string[],
        ) => ReturnType;
    }

    Type Declaration

    • resetAttributes: (
          typeOrName: string | NodeType | MarkType,
          attributes: string | string[],
      ) => ReturnType

      Resets some node attributes to the default value.

      editor.commands.resetAttributes('heading', 'level')
    scrollIntoView: { scrollIntoView: () => ReturnType }

    Type Declaration

    • scrollIntoView: () => ReturnType

      Scroll the selection into view.

      editor.commands.scrollIntoView()
    selectAll: { selectAll: () => ReturnType }

    Type Declaration

    • selectAll: () => ReturnType

      Select the whole document.

      editor.commands.selectAll()
    selectNodeBackward: { selectNodeBackward: () => ReturnType }

    Type Declaration

    • selectNodeBackward: () => ReturnType

      Select a node backward.

      editor.commands.selectNodeBackward()
    selectNodeForward: { selectNodeForward: () => ReturnType }

    Type Declaration

    • selectNodeForward: () => ReturnType

      Select a node forward.

      editor.commands.selectNodeForward()
    selectParentNode: { selectParentNode: () => ReturnType }

    Type Declaration

    • selectParentNode: () => ReturnType

      Select the parent node.

      editor.commands.selectParentNode()
    selectTextblockEnd: { selectTextblockEnd: () => ReturnType }

    Type Declaration

    • selectTextblockEnd: () => ReturnType

      Moves the cursor to the end of current text block.

      editor.commands.selectTextblockEnd()
    selectTextblockStart: { selectTextblockStart: () => ReturnType }

    Type Declaration

    • selectTextblockStart: () => ReturnType

      Moves the cursor to the start of current text block.

      editor.commands.selectTextblockStart()
    setContent: {
        setContent: (
            content: ProseMirrorNode | Content | Fragment,
            options?: SetContentOptions,
        ) => ReturnType;
    }

    Type Declaration

    • setContent: (
          content: ProseMirrorNode | Content | Fragment,
          options?: SetContentOptions,
      ) => ReturnType

      Replace the whole document with new content.

      editor.commands.setContent('<p>Example text</p>')
    setMark: {
        setMark: (
            typeOrName: string | MarkType,
            attributes?: Record<string, any>,
        ) => ReturnType;
    }

    Type Declaration

    • setMark: (typeOrName: string | MarkType, attributes?: Record<string, any>) => ReturnType

      Add a mark with new attributes.

      editor.commands.setMark('bold', { level: 1 })
    setMeta: {
        setMeta: (
            key: string | Plugin<any> | PluginKey<any>,
            value: any,
        ) => ReturnType;
    }

    Type Declaration

    • setMeta: (key: string | Plugin<any> | PluginKey<any>, value: any) => ReturnType

      Store a metadata property in the current transaction.

      editor.commands.setMeta('foo', 'bar')
    setNode: {
        setNode: (
            typeOrName: string | NodeType,
            attributes?: Record<string, any>,
        ) => ReturnType;
    }

    Type Declaration

    • setNode: (typeOrName: string | NodeType, attributes?: Record<string, any>) => ReturnType

      Replace a given range with a node.

      editor.commands.setNode('paragraph')
    setNodeSelection: { setNodeSelection: (position: number) => ReturnType }

    Type Declaration

    • setNodeSelection: (position: number) => ReturnType

      Creates a NodeSelection.

      editor.commands.setNodeSelection(10)
    setTextDirection: {
        setTextDirection: (
            direction: "rtl" | "ltr" | "auto",
            position?: number | Range,
        ) => ReturnType;
    }

    Type Declaration

    • setTextDirection: (direction: "rtl" | "ltr" | "auto", position?: number | Range) => ReturnType

      Set the text direction for nodes. If no position is provided, it will use the current selection.

      editor.commands.setTextDirection('rtl')

      editor.commands.setTextDirection('ltr', { from: 0, to: 10 })
    setTextSelection: { setTextSelection: (position: number | Range) => ReturnType }

    Type Declaration

    • setTextSelection: (position: number | Range) => ReturnType

      Creates a TextSelection.

      editor.commands.setTextSelection(10)
    sinkListItem: { sinkListItem: (typeOrName: string | NodeType) => ReturnType }

    Type Declaration

    • sinkListItem: (typeOrName: string | NodeType) => ReturnType

      Sink the list item down into an inner list.

      editor.commands.sinkListItem('listItem')
    span: {
        setSpanStyle: (styles?: string) => ReturnType;
        toggleSpanStyle: (styles?: string) => ReturnType;
        unsetSpanStyle: (styles?: string) => ReturnType;
    }
    splitBlock: { splitBlock: (options?: { keepMarks?: boolean }) => ReturnType }

    Type Declaration

    • splitBlock: (options?: { keepMarks?: boolean }) => ReturnType

      Forks a new node from an existing node.

      editor.commands.splitBlock()

      editor.commands.splitBlock({ keepMarks: true })
    splitListItem: {
        splitListItem: (
            typeOrName: string | NodeType,
            overrideAttrs?: Record<string, any>,
        ) => ReturnType;
    }

    Type Declaration

    • splitListItem: (
          typeOrName: string | NodeType,
          overrideAttrs?: Record<string, any>,
      ) => ReturnType

      Splits one list item into two list items.

      editor.commands.splitListItem('listItem')
    strike: {
        setStrike: () => ReturnType;
        toggleStrike: () => ReturnType;
        unsetStrike: () => ReturnType;
    }

    Type Declaration

    • setStrike: () => ReturnType

      Set a strike mark

      editor.commands.setStrike()
    • toggleStrike: () => ReturnType

      Toggle a strike mark

      editor.commands.toggleStrike()
    • unsetStrike: () => ReturnType

      Unset a strike mark

      editor.commands.unsetStrike()
    subscript: {
        setSubscript: () => ReturnType;
        toggleSubscript: () => ReturnType;
        unsetSubscript: () => ReturnType;
    }

    Type Declaration

    • setSubscript: () => ReturnType

      Set a subscript mark

      editor.commands.setSubscript()
    • toggleSubscript: () => ReturnType

      Toggle a subscript mark

      editor.commands.toggleSubscript()
    • unsetSubscript: () => ReturnType

      Unset a subscript mark

      editor.commands.unsetSubscript()
    superscript: {
        setSuperscript: () => ReturnType;
        toggleSuperscript: () => ReturnType;
        unsetSuperscript: () => ReturnType;
    }

    Type Declaration

    • setSuperscript: () => ReturnType

      Set a superscript mark

      editor.commands.setSuperscript()
    • toggleSuperscript: () => ReturnType

      Toggle a superscript mark

      editor.commands.toggleSuperscript()
    • unsetSuperscript: () => ReturnType

      Unset a superscript mark

      editor.commands.unsetSuperscript()
    table: {
        addColumnAfter: () => ReturnType;
        addColumnBefore: () => ReturnType;
        addRowAfter: () => ReturnType;
        addRowBefore: () => ReturnType;
        deleteColumn: () => ReturnType;
        deleteRow: () => ReturnType;
        deleteTable: () => ReturnType;
        fixTables: () => ReturnType;
        goToNextCell: () => ReturnType;
        goToPreviousCell: () => ReturnType;
        insertTable: (
            options?: { cols?: number; rows?: number; withHeaderRow?: boolean },
        ) => ReturnType;
        mergeCells: () => ReturnType;
        mergeOrSplit: () => ReturnType;
        setCellAttribute: (name: string, value: any) => ReturnType;
        setCellSelection: (
            position: { anchorCell: number; headCell?: number },
        ) => ReturnType;
        splitCell: () => ReturnType;
        toggleHeaderCell: () => ReturnType;
        toggleHeaderColumn: () => ReturnType;
        toggleHeaderRow: () => ReturnType;
    }

    Type Declaration

    • addColumnAfter: () => ReturnType

      Add a column after the current column

      editor.commands.addColumnAfter()
    • addColumnBefore: () => ReturnType

      Add a column before the current column

      editor.commands.addColumnBefore()
    • addRowAfter: () => ReturnType

      Add a row after the current row

      editor.commands.addRowAfter()
    • addRowBefore: () => ReturnType

      Add a row before the current row

      editor.commands.addRowBefore()
    • deleteColumn: () => ReturnType

      Delete the current column

      editor.commands.deleteColumn()
    • deleteRow: () => ReturnType

      Delete the current row

      editor.commands.deleteRow()
    • deleteTable: () => ReturnType

      Delete the current table

      editor.commands.deleteTable()
    • fixTables: () => ReturnType

      Try to fix the table structure if necessary

      editor.commands.fixTables()
    • goToNextCell: () => ReturnType

      Moves the selection to the next cell

      editor.commands.goToNextCell()
    • goToPreviousCell: () => ReturnType

      Moves the selection to the previous cell

      editor.commands.goToPreviousCell()
    • insertTable: (
          options?: { cols?: number; rows?: number; withHeaderRow?: boolean },
      ) => ReturnType

      Insert a table

      editor.commands.insertTable({ rows: 3, cols: 3, withHeaderRow: true })
    • mergeCells: () => ReturnType

      Merge the currently selected cells

      editor.commands.mergeCells()
    • mergeOrSplit: () => ReturnType

      Merge or split the currently selected cells

      editor.commands.mergeOrSplit()
    • setCellAttribute: (name: string, value: any) => ReturnType

      Set a cell attribute

      editor.commands.setCellAttribute('align', 'right')
    • setCellSelection: (position: { anchorCell: number; headCell?: number }) => ReturnType

      Set a cell selection inside the current table

      editor.commands.setCellSelection({ anchorCell: 1, headCell: 2 })
    • splitCell: () => ReturnType

      Split the currently selected cell

      editor.commands.splitCell()
    • toggleHeaderCell: () => ReturnType

      Toggle the header cell

      editor.commands.toggleHeaderCell()
    • toggleHeaderColumn: () => ReturnType

      Toggle the header column

      editor.commands.toggleHeaderColumn()
    • toggleHeaderRow: () => ReturnType

      Toggle the header row

      editor.commands.toggleHeaderRow()
    taskList: { toggleTaskList: () => ReturnType }

    Type Declaration

    • toggleTaskList: () => ReturnType

      Toggle a task list

      editor.commands.toggleTaskList()
    textAlign: {
        setTextAlign: (alignment: string) => ReturnType;
        toggleTextAlign: (alignment: string) => ReturnType;
        unsetTextAlign: () => ReturnType;
    }

    Type Declaration

    • setTextAlign: (alignment: string) => ReturnType

      Set the text align attribute

      editor.commands.setTextAlign('left')
    • toggleTextAlign: (alignment: string) => ReturnType

      Toggle the text align attribute

      editor.commands.toggleTextAlign('right')
    • unsetTextAlign: () => ReturnType

      Unset the text align attribute

      editor.commands.unsetTextAlign()
    textIndent: { textIndent: () => ReturnType; textOutdent: () => ReturnType }
    textStyle: {
        removeEmptyTextStyle: () => ReturnType;
        toggleTextStyle: (attributes?: TextStyleAttributes) => ReturnType;
    }

    Type Declaration

    • removeEmptyTextStyle: () => ReturnType

      Remove spans without inline style attributes.

      editor.commands.removeEmptyTextStyle()
    • toggleTextStyle: (attributes?: TextStyleAttributes) => ReturnType

      Toggle a text style

      editor.commands.toggleTextStyle({ fontWeight: 'bold' })
    toggleList: {
        toggleList: (
            listTypeOrName: string | NodeType,
            itemTypeOrName: string | NodeType,
            keepMarks?: boolean,
            attributes?: Record<string, any>,
        ) => ReturnType;
    }

    Type Declaration

    • toggleList: (
          listTypeOrName: string | NodeType,
          itemTypeOrName: string | NodeType,
          keepMarks?: boolean,
          attributes?: Record<string, any>,
      ) => ReturnType

      Toggle between different list types.

      editor.commands.toggleList('bulletList', 'listItem')
    toggleMark: {
        toggleMark: (
            typeOrName: string | MarkType,
            attributes?: Record<string, any>,
            options?: { extendEmptyMarkRange?: boolean },
        ) => ReturnType;
    }

    Type Declaration

    • toggleMark: (
          typeOrName: string | MarkType,
          attributes?: Record<string, any>,
          options?: { extendEmptyMarkRange?: boolean },
      ) => ReturnType

      Toggle a mark on and off.

      editor.commands.toggleMark('bold')
    toggleNode: {
        toggleNode: (
            typeOrName: string | NodeType,
            toggleTypeOrName: string | NodeType,
            attributes?: Record<string, any>,
        ) => ReturnType;
    }

    Type Declaration

    • toggleNode: (
          typeOrName: string | NodeType,
          toggleTypeOrName: string | NodeType,
          attributes?: Record<string, any>,
      ) => ReturnType

      Toggle a node with another node.

      editor.commands.toggleNode('heading', 'paragraph')
    toggleWrap: {
        toggleWrap: (
            typeOrName: string | NodeType,
            attributes?: Record<string, any>,
        ) => ReturnType;
    }

    Type Declaration

    • toggleWrap: (typeOrName: string | NodeType, attributes?: Record<string, any>) => ReturnType

      Wraps nodes in another node, or removes an existing wrap.

      editor.commands.toggleWrap('blockquote')
    umbEmbeddedMedia: {
        setEmbeddedMedia: (
            options: {
                constrain?: boolean;
                height?: string;
                markup: string;
                url: string;
                width?: string;
            },
        ) => ReturnType;
    }
    umbImage: { setImage: (options: UmbImageAttributes) => ReturnType }

    Type Declaration

    • setImage: (options: UmbImageAttributes) => ReturnType

      Add an image

      editor
        .commands
        .setImage({ src: 'https://tiptap.dev/logo.png', alt: 'tiptap', title: 'tiptap logo' })
    umbLink: {
        ensureUmbLink: (
            attributes: {
                "data-anchor"?: null | string;
                href: string;
                target?: null | string;
                title?: null | string;
                type: string;
            },
        ) => ReturnType;
        setUmbLink: (
            attributes: {
                "data-anchor"?: null | string;
                href: string;
                target?: null | string;
                title?: null | string;
                type: string;
            },
        ) => ReturnType;
        unsetUmbLink: () => ReturnType;
    }
    umbRteBlock: { setBlock: (options: { contentKey: string }) => ReturnType }
    umbRteBlockInline: {
        setBlockInline: (options: { contentKey: string }) => ReturnType;
    }
    underline: {
        setUnderline: () => ReturnType;
        toggleUnderline: () => ReturnType;
        unsetUnderline: () => ReturnType;
    }

    Type Declaration

    • setUnderline: () => ReturnType

      Set an underline mark

      editor.commands.setUnderline()
    • toggleUnderline: () => ReturnType

      Toggle an underline mark

      editor.commands.toggleUnderline()
    • unsetUnderline: () => ReturnType

      Unset an underline mark

      editor.commands.unsetUnderline()
    undoInputRule: { undoInputRule: () => ReturnType }

    Type Declaration

    • undoInputRule: () => ReturnType

      Undo an input rule.

      editor.commands.undoInputRule()
    undoRedo: { redo: () => ReturnType; undo: () => ReturnType }

    Type Declaration

    • redo: () => ReturnType

      Reapply reverted changes

      editor.commands.redo()
    • undo: () => ReturnType

      Undo recent changes

      editor.commands.undo()
    unsetAllMarks: { unsetAllMarks: () => ReturnType }

    Type Declaration

    • unsetAllMarks: () => ReturnType

      Remove all marks in the current selection.

      editor.commands.unsetAllMarks()
    unsetMark: {
        unsetMark: (
            typeOrName: string | MarkType,
            options?: { extendEmptyMarkRange?: boolean },
        ) => ReturnType;
    }

    Type Declaration

    • unsetMark: (
          typeOrName: string | MarkType,
          options?: { extendEmptyMarkRange?: boolean },
      ) => ReturnType

      Remove all marks in the current selection.

      editor.commands.unsetMark('bold')
    unsetTextDirection: {
        unsetTextDirection: (position?: number | Range) => ReturnType;
    }

    Type Declaration

    • unsetTextDirection: (position?: number | Range) => ReturnType

      Remove the text direction attribute from nodes. If no position is provided, it will use the current selection.

      editor.commands.unsetTextDirection()

      editor.commands.unsetTextDirection({ from: 0, to: 10 })
    updateAttributes: {
        updateAttributes: (
            typeOrName: string | NodeType | MarkType,
            attributes: Record<string, any>,
        ) => ReturnType;
    }

    Type Declaration

    • updateAttributes: (
          typeOrName: string | NodeType | MarkType,
          attributes: Record<string, any>,
      ) => ReturnType

      Update attributes of a node or mark.

      editor.commands.updateAttributes('mention', { userId: "2" })
    wrapIn: {
        wrapIn: (
            typeOrName: string | NodeType,
            attributes?: Record<string, any>,
        ) => ReturnType;
    }

    Type Declaration

    • wrapIn: (typeOrName: string | NodeType, attributes?: Record<string, any>) => ReturnType

      Wraps nodes in another node.

      editor.commands.wrapIn('blockquote')
    wrapInList: {
        wrapInList: (
            typeOrName: string | NodeType,
            attributes?: Record<string, any>,
        ) => ReturnType;
    }

    Type Declaration

    • wrapInList: (typeOrName: string | NodeType, attributes?: Record<string, any>) => ReturnType

      Wrap a node in a list.

      editor.commands.wrapInList('bulletList')

    Settings

    Member Visibility

    On This Page

    Properties
    backgroundColorblockQuoteblurboldbulletListclearContentclearNodescodecodeBlockcolorcommandcreateParagraphNearcutdeleteCurrentNodedeleteNodedeleteRangedeleteSelectionenterexitCodeextendMarkRangefirstfocusfontFamilyfontSizeforEachhardBreakheadinghorizontalRulehtmlClassAttributehtmlDatasetAttributeshtmlIdAttributehtmlStyleAttributeimageinsertContentinsertContentAtitalicjoinBackwardjoinDownjoinForwardjoinItemBackwardjoinItemForwardjoinTextblockBackwardjoinTextblockForwardjoinUpkeyboardShortcutliftliftEmptyBlockliftListItemlineHeightlinknewlineInCodeorderedListparagraphresetAttributesscrollIntoViewselectAllselectNodeBackwardselectNodeForwardselectParentNodeselectTextblockEndselectTextblockStartsetContentsetMarksetMetasetNodesetNodeSelectionsetTextDirectionsetTextSelectionsinkListItemspansplitBlocksplitListItemstrikesubscriptsuperscripttabletaskListtextAligntextIndenttextStyletoggleListtoggleMarktoggleNodetoggleWrapumbEmbeddedMediaumbImageumbLinkumbRteBlockumbRteBlockInlineunderlineundoInputRuleundoRedounsetAllMarksunsetMarkunsetTextDirectionupdateAttributeswrapInwrapInList