HTML

The html extension renders block-level HTML from the document, such as <div>, <details>, or <table>, and hides HTML comments.

SetupCopy Anchor Link

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

import { Editor } from "@inksane/core";
import { HtmlExtension } from "@inksane/core/extensions/html";

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

BaseKit includes HTML rendering. Use BaseKit({ html: false }) to leave document HTML as source text.

What it addsCopy Anchor Link

• Replaces an HTMLBlock with a block widget that contains the cleaned markup. The wrapper gets .inksane-html-block and, like every htmlWidget, the inksane-html class.
• Hides the source of the block while the selection is outside it.
• Hides HTML comments entirely.
• Adds the htmlBlock state query, so editor.isActive("htmlBlock") reports whether the selection is inside a block.

Clicking a rendered block moves the cursor into its source so it can be edited. Because a block is a single widget, the up and down arrow keys would normally skip over it, so the extension binds ArrowUp and ArrowDown to move into an adjacent HTML block when there is one.

StylingCopy Anchor Link

[data-inksane-editor-content] {
  .inksane-html-block {
    padding-block: 16px;
  }

  .inksane-html-block table {
    width: 100%;
    border-collapse: collapse;
  }

  .inksane-html-block th,
  .inksane-html-block td {
    border: 1px solid #ddd;
    padding: 6px 12px;
    text-align: left;
  }
}

sanitizeHtml and escapeHtml are exported from @inksane/core if you build your own HTML rendering. See write your own extension.