How To Support Indentation With Tiptap

5 min read Oct 04, 2024

How to Support Indentation with Tiptap

Tiptap is a powerful and flexible WYSIWYG editor built on top of the ProseMirror library. It provides a wide range of features for creating rich text editing experiences, but one common need is to support indentation. Indentation allows users to visually organize their content, making it easier to read and understand. In this article, we'll explore how to effectively support indentation within your Tiptap editor.

Understanding Indentation in Tiptap

In Tiptap, indentation is achieved by utilizing the ProseMirror schema and custom commands. The schema defines the structure and attributes of the content, while commands handle user actions like applying indentation.

Implementing Indentation

Here's a step-by-step guide on how to implement indentation in your Tiptap editor:

Define Indentation in the Schema:

const schema = {
  nodes: {
    paragraph: {
      group: 'block',
      content: 'text*',
      attrs: {
        indent: { default: 0 }, // Add indentation attribute
      },
    },
  },
};

This schema defines a paragraph node with an indent attribute. The indent attribute will store the level of indentation for each paragraph.

Create Custom Commands:

const commands = {
  indent: () => {
    // Increase indentation level
    return (state, dispatch) => {
      const { tr } = state;
      const selection = tr.selection;

      if (selection.isCollapsed) {
        // Only apply indentation if there's a selection
        return false;
      }

      tr.doc.nodesBetween(selection.$from.pos, selection.$to.pos, node => {
        if (node.type.name === 'paragraph') {
          const indent = node.attrs.indent;
          tr.setNodeMarkup(node.pos, node.type, { ...node.attrs, indent: indent + 1 });
        }
      });
      dispatch(tr);
      return true;
    };
  },
  outdent: () => {
    // Decrease indentation level
    return (state, dispatch) => {
      const { tr } = state;
      const selection = tr.selection;

      if (selection.isCollapsed) {
        // Only apply indentation if there's a selection
        return false;
      }

      tr.doc.nodesBetween(selection.$from.pos, selection.$to.pos, node => {
        if (node.type.name === 'paragraph') {
          const indent = node.attrs.indent;
          if (indent > 0) {
            tr.setNodeMarkup(node.pos, node.type, { ...node.attrs, indent: indent - 1 });
          }
        }
      });
      dispatch(tr);
      return true;
    };
  },
};

These commands define indent and outdent functions that increase and decrease the indent attribute of selected paragraphs.

Bind Commands to Keyboard Shortcuts or Buttons:

const editor = new Editor({
  schema,
  commands,
});

// Bind keyboard shortcuts
editor.on('keydown', (e) => {
  if (e.key === 'Tab' && e.shiftKey) {
    editor.commands.outdent();
    e.preventDefault();
  } else if (e.key === 'Tab') {
    editor.commands.indent();
    e.preventDefault();
  }
});

You can either bind these commands to keyboard shortcuts (like Tab and Shift+Tab) or add buttons to your UI for users to manually indent and outdent their content.

Display Indentation Visually:

const NodeView = (node, view, getPos) => {
  const style = { paddingLeft: `${node.attrs.indent * 20}px` }; // Adjust padding for visual indent
  return view.dom.createElement('p', { style }, node.textContent);
};

In your NodeView, you can use CSS to visually style the indentation. In this example, we increase the padding-left for each level of indentation.

Conclusion

By implementing these steps, you can successfully add indentation functionality to your Tiptap editor. This allows users to easily organize their content and create well-structured documents. Remember to customize the indentation level, shortcut keys, and visual styles to match your specific application requirements.

How To Support Indentation With Tiptap