Ask Your Question
0

How to create an indent in tiptap 2?

asked 2023-07-02 07:29:16 +0000

nofretete gravatar image

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted
2

answered 2023-07-02 07:51:02 +0000

bukephalos gravatar image

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.

edit flag offensive delete link more

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss

Add Answer


Question Tools

Stats

Asked: 2023-07-02 07:29:16 +0000

Seen: 7 times

Last updated: Jul 02 '23