Test

Badge

Status: Stable Beta Deprecated New

Aside

Icon

rocket setting puzzle seti:typescript github discord

LinkButton

Code (dynamic)

import { Editor } from '@domternal/core';
const editor = new Editor({ extensions: [] });

Tabs

pnpm add @domternal/core

npm install @domternal/core

yarn add @domternal/core

import { Editor } from '@domternal/core';
const editor = new Editor({ extensions: [] });

Cards

Built on ProseMirror

Reliable document model and battle-tested transaction system.

Ready-to-use UI

Toolbar, bubble menu, floating menu. All optional.

Extension System

13 nodes, 9 marks, 24 extensions. Tree-shakeable.

TypeScript First

Fully typed API, commands, and configs.

LinkCards

Getting Started Set up your first editor

Installation Package installation guide

Steps

Install packages

pnpm add @domternal/core @domternal/theme

Create the editor

import { Editor, StarterKit } from '@domternal/core';

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

Done

Your editor is ready.

FileTree

Directorypackages/
- Directorycore/
  - Directorysrc/
    Directoryextensions/
    …
    Directorynodes/
    …
    Directorymarks/
    …
  - package.json
- Directorytheme/
  - Directorysrc/
    …
  - package.json
- Directoryangular/
  - Directorysrc/
    …
  - package.json
Directoryapps/
- Directorydemo-angular/
  - …
package.json

Code Blocks

Standardni:

const editor = new Editor({ extensions: [StarterKit] });

S naslovom:

import { Editor, StarterKit } from '@domternal/core';

S highlightanim linijama:

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

S diff oznakom:

const editor = new Editor({
  extensions: [
    StarterKit,
    // highlight-next-line
    Placeholder.configure({ placeholder: 'Type here...' }), // [!code ++]
    CodeBlock, // [!code --]
  ],
});