Revision history [back]

To create an indent in tiptap 2, you can use the built-in indent extension. Here's an example of how to use it:

1. First, import the indentation extension:

import Indent from '@tiptap/extension-indent'

1. Then, add the extension to your editor's extensions:

const editor = new Editor({
  extensions: [
    // other extensions...
    Indent,
  ],
})

1. Finally, add a button to your editor's toolbar to allow users to indent text. Here's an example of creating a button that indents the selected text:

const IndentButton = ({ editor }) => {
  const indent = () => editor.chain().focus().indent().run()

  return (
    <button onClick={indent}>Indent</button>
  )
}

// add the button to your toolbar
const editor = new Editor({
  // other config...
  content: '<p>Sample text</p>',
  editorProps: {
    // add a toolbar with the indent button
    renderToolbar: (props, editor) => {
      return (
        <Toolbar>
          <IndentButton editor={editor} />
        </Toolbar>
      )
    },
  },
})

Now when you click the "Indent" button in the editor's toolbar, the selected text will be indented by one level.