Heading

The heading extension renders ATX headings, # through ######, and adds commands to set, toggle, and remove them.

SetupCopy Anchor Link

Import HeadingExtension and pass it through the editor’s extensions option. Create the mount element before this code runs:

import { Editor } from "@inksane/core";
import { HeadingExtension } from "@inksane/core/extensions/heading";

const editor = new Editor({
  element: document.getElementById("editor")!,
  extensions: [HeadingExtension],
});

BaseKit includes headings. Use BaseKit({ heading: false }) to disable them.

What it addsCopy Anchor Link

• Decorates the ATXHeading1 to ATXHeading6 nodes with .inksane-mark-heading and .inksane-heading-1 to .inksane-heading-6.
• Hides the # markers and the whitespace after them while the selection is outside the heading.
• Converts pasted <h1> to <h6> elements to # text lines.

CommandsCopy Anchor Link

The commands work on the whole line that contains the position, not just the selected range.

editor.commands.toggleHeading({ level: 2 });

Invalid levels, so anything outside 1 to 6, make the command return false.

There is no default keybinding for headings. Bind your own with addKeybinds.

StylingCopy Anchor Link

[data-inksane-editor-content] {
  .inksane-mark-heading {
    font-weight: bold;
  }

  .inksane-heading-1 {
    font-size: 40px;
  }

  .inksane-heading-2 {
    font-size: 32px;
  }

  .inksane-heading-3 {
    font-size: 28px;
  }

  .inksane-heading-4 {
    font-size: 24px;
  }

  .inksane-heading-5 {
    font-size: 20px;
  }

  .inksane-heading-6 {
    font-size: 16px;
  }
}