Create your first editor

After you installed inksane, you can add an editor to a page. The editor is headless, so it needs an element to mount into and a bit of CSS to look like anything.

Mount the editorCopy Anchor Link

Create an element to mount into. Give it a size somewhere in your styles, otherwise the editor has no height.

<div id="editor" class="editor"></div>

.editor {
  border: 1px solid #ddd;
  border-radius: 8px;
  min-height: 240px;
}

Import Editor and BaseKit, then create an instance and pass the element:

import { Editor } from "@inksane/core";
import { BaseKit } from "@inksane/core/extensions/base-kit";

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

BaseKit registers the standard Markdown features, undo and redo, editing shortcuts, and placeholder support. Core does not register feature extensions automatically. See BaseKit to configure the kit or Extensions to choose individual features.

The element gets the inksane-editor class, and the editable area inside it gets inksane-editor-content.

Editor optionsCopy Anchor Link

EditorOptions is the object you pass to new Editor(...):

Reading and writing contentCopy Anchor Link

The document is Markdown. setMarkdown() replaces it and getMarkdown() reads it back. The editor in the example above was created without content, so it starts empty.

editor.setMarkdown("# Hello inksane\n\nHave a lot of **fun**.");

editor.getMarkdown(); // "# Hello inksane\n\nHave a lot of **fun**."

editor.content is the same value, just as a property:

editor.content; // same string as getMarkdown()

editor.content = "# Replaced\n\nNew content.";

Raw CodeMirror linesCopy Anchor Link

If you specifically need CodeMirror’s line array instead of a Markdown string, use textJSON. It returns one string per line and accepts the same shape when writing.

editor.textJSON; // ["# Hello inksane", "", "Have a lot of **fun**."]

editor.textJSON = ["# Replaced", "", "New content."];

Mount laterCopy Anchor Link

Framework bindings create the editor before the DOM node exists. You can do the same: create the editor without element and call mount() once the node is available.

const editor = new Editor({ content: "# Draft", extensions: [BaseKit()] });

editor.isMounted; // false
editor.mount(document.getElementById("editor"));
editor.isMounted; // true

mount() is ignored when the editor is already mounted. editor.view throws until the editor is mounted, so check isMounted first.

Update options at runtimeCopy Anchor Link

setOptions applies the options that can change after creation: content, editable, theme, lineWrapping, and tabSize. Omitted options keep their value.

editor.setOptions({ editable: false });

editor.setOptions({ lineWrapping: false, tabSize: 4 });

Options fixed at creation, such as extensions, element, placeholder, and classNames, are ignored by setOptions.

Destroy the editorCopy Anchor Link

Call destroy() when the element goes away, for example in the cleanup of a component effect. It destroys the CodeMirror view and clears the reference.

editor.destroy();

Pasting HTMLCopy Anchor Link

When you copy content from a web page or another editor, the clipboard usually holds HTML. Paste it into inksane and the HTML is converted to Markdown before it is inserted at your cursor or over your selection.

With BaseKit, headings, paragraphs, emphasis, links, images, lists, blockquotes, and code are converted. The HTML is cleaned first, so scripts and unsafe URLs are dropped. Each registered extension teaches the editor how its own HTML becomes Markdown. Disabling a feature also removes its HTML converter. See the extension pages.

PlaceholderCopy Anchor Link

With BaseKit or PlaceholderExtension registered, pass a placeholder to show example text while the document is empty. It disappears as soon as any content exists:

const editor = new Editor({
  element: mount,
  placeholder: "Write something…",
  extensions: [BaseKit()],
});

The placeholder is not part of the document, so it never appears in getMarkdown() and never moves the cursor. Change how it looks with placeholderTheme, which merges your styles over the defaults:

import { Editor } from "@inksane/core";
import { BaseKit } from "@inksane/core/extensions/base-kit";
import { placeholderTheme } from "@inksane/core/extensions/placeholder";

const editor = new Editor({
  element: mount,
  placeholder: "Write something…",
  theme: placeholderTheme({ color: "#999", fontStyle: "italic" }),
  extensions: [BaseKit()],
});

It styles .inksane-placeholder::before, so you can target that class from CSS too. The empty line also carries a data-inksane-placeholder attribute. The editable area has an aria-placeholder attribute. See Placeholder for individual registration and the theme API.

Next stepsCopy Anchor Link