prosemirror-plugin-outline

A keyboard-accessible web component for displaying the structure of a ProseMirror document as a tree. It allows selection of a node from outside of the document.

Table of Contents

• prosemirror-plugin-outline
  • Table of Contents
  • Installation
  • Usage
    • Styling
  • Documentation
    • Exports
      • OutlineView
      • outlinePlugin()
      • outlinePluginKey
      • ProseMirrorOutline
      • styles/outline.css

Installation

npm i prosemirror-plugin-outline

Usage

Import the outlinePlugin() function with all of your other ProseMirror code:

import { EditorState } from "prosemirror-state";
import { EditorView } from "prosemirror-view";
import { outlinePlugin } from "prosemirror-plugin-outline";

const schema = new Schema(
  // SchemaSpec goes here
);

new EditorView(document.querySelector("#editor"), {
  state: EditorState.create({
    schema: schema,
    plugins: [
      // load other plugins
      outlinePlugin({
        // see function documentation for configuration
      }),
    ],
  }),
});

Styling

An example stylesheet that uses shadow parts to provide hover, focus, and active styles with system colors can be imported for bundler use via prosemirror-plugin-outline/styles/outline.css.

Documentation

This module exports a function, view, and plugin key for attaching an outline to a ProseMirror editor. Type declarations for the exported items are generated from JSDoc annotations in the code.

A quick reference is below; refer to the documentation comments in the code and its corresponding type declarations for a more thorough breakdown.

Exports

OutlineView

The class for creating and updating the outline.

outlinePlugin()

A function that returns a plugin you can pass to the editor state. You may optionally pass an object with the following properties:

• element: Where the outline should be adjacently inserted
• where: The InsertPosition indicating where to insert the element relative to the element key
• toggle(isVisible): A function that runs when the visible property of the plugin's state changes; it receives a boolean value indicating whether or not the outline should be visible
• state: An object representing the initial state of the outline plugin
  • visible: A boolean value indicating whether or not the outline is visible

outlinePluginKey

The key of the plugin created by outlinePlugin().

ProseMirrorOutline

The class for the custom element that contains the outline. The custom element uses shadow DOM, and it exposes elements for styling via the part attribute. It is built to be keyboard accessible according to the WAI-ARIA treegrid pattern.

styles/outline.css

An example of how one could style the outline's shadow DOM via the ::part() pseudo-element. It provides hover, focus, and active styles.