@editu/core

Framework-agnostic core for the Editu block-based Markdown editor built on Tiptap 3.

Installation

npm install @editu/core

Overview

This package provides:

• 30+ Tiptap extensions for block-based editing (headings, lists, tables, code blocks, math, diagrams, embeds, callouts, ...)
• Layout primitives -- group, columns/column, spacer, divider, button with tokenized Tailwind styling
• Token registry for spacing, background, radius, height, divider styles, and button variants
• Markdown import/export with GFM, CommonMark, Obsidian, and Docusaurus flavors
• Slash commands, drag & drop, find & replace, image upload
• Plugin system for registering custom blocks
• Type definitions, CSS styles, i18n, and theme utilities

Layout Primitives

Gutenberg-style layout blocks with token-based attributes:

| Extension | Description | Key Attrs | |-----------|-------------|-----------| | EdituGroup | Wrapper with padding, background, radius | padding, background, radius tokens | | EdituColumns + EdituColumn | Multi-column layout with drag-to-resize | widths (array), gap token | | EdituSpacer | Vertical spacing block | height token (xs--xl) | | EdituDivider | Horizontal rule with style/thickness | style (solid/dashed/dotted), thickness | | EdituButton | CTA button with link | variant, href, target |

Tokens map to Tailwind classes via registries in @editu/core/tokens:

import { EDITU_SPACING_TOKENS, EDITU_BACKGROUND_TOKENS } from "@editu/core";

Exports

| Category | Examples | |----------|---------| | Types | EdituEditorOptions, EdituFeatureOptions, EdituEditorState, EdituSlashCommandItem | | Extensions | createEdituExtensions(), resolveEdituFeatures() | | Layout | EdituGroup, EdituColumns, EdituColumn, EdituSpacer, EdituDivider, EdituButton | | Tokens | EDITU_SPACING_TOKENS, EDITU_BACKGROUND_TOKENS, EDITU_RADIUS_TOKENS, EDITU_HEIGHT_TOKENS | | Utilities | getEdituEditorState(), getEdituMarkdown(), createEdituImageUploader() | | Theme | EDITU_DEFAULT_THEME, resolveEdituTheme() | | Auto-save | createEdituAutoSaveHandlers() | | Collaboration | createEdituCollaborationHandlers() | | Comments | createEdituCommentHandlers() | | Version History | createEdituVersionHistoryHandlers() | | Plugin System | EdituPluginManager, validateEdituPlugin() | | Find & Replace | createEdituFindReplaceExtension(), getEdituFindReplaceState(), edituFindReplacePluginKey | | i18n | EdituLocale, edituEnLocale, createEdituLocale() | | Constants | EDITU_TEXT_COLORS, EDITU_HIGHLIGHT_COLORS, edituDefaultSlashCommands |

CSS Entry Points

| Import | Description | |--------|-------------| | @editu/core/styles.css | Full stylesheet (CSS variables + component styles) | | @editu/core/components.css | Component styles only (for shadcn/ui integration) | | @editu/core/mathematics.css | KaTeX styles for math rendering |

Extensions

All extensions are enabled by default except collaboration, comment, wikiLink, and mention:

| Extension | Description | |-----------|-------------| | Base | Headings (H1-H6), bold, italic, underline, strikethrough, lists, blockquotes | | Superscript | Superscript text formatting | | Subscript | Subscript text formatting | | Typography | Smart quotes, em dashes, and typographic transformations | | SlashCommand | Type / to open command menu | | Table | Table editing with row/column controls | | TableOfContents | Auto-collected heading navigation block | | Link | Autolink and paste URL detection | | Image | Upload, paste, drag-and-drop, resize | | CodeBlock | Syntax highlighting with lowlight (37+ languages) | | CharacterCount | Real-time character and word count | | TextColor | Text color and highlight | | TaskList | Checkbox task lists | | DragHandle | Block drag handle and Alt+Arrow keyboard shortcuts | | Markdown | Import/export with GitHub Flavored Markdown | | Mathematics | LaTeX equations with KaTeX | | Embed | oEmbed/OGP URL embedding | | Details | Collapsible content blocks | | Callout | Info, warning, danger, tip, and note admonition blocks | | Diagram | Mermaid and GraphViz diagrams | | WikiLink | [[page-name]] internal linking (opt-in) | | Mention | @user autocomplete (opt-in) | | Comment | Text annotations for collaborative review (opt-in) |

Markdown Flavor

Editu supports multiple Markdown output flavors via the flavor option. The flavor controls how extensions serialize content (e.g., callout format, wiki link syntax). Input parsing is always tolerant and accepts all formats.

| Flavor | Callout Output | WikiLink Output | Platforms | |--------|---------------|-----------------|-----------| | "commonmark" | Blockquote fallback | [text](wiki://page) | Stack Overflow, Reddit, email | | "gfm" (default) | > [!NOTE] | [text](wiki://page) | GitHub, GitLab, DEV.to | | "obsidian" | > [!note] | [[page]] | Obsidian, Logseq, Foam | | "docusaurus" | :::note | [text](wiki://page) | Docusaurus, VitePress, Zenn, Qiita |

API

import {
  resolveEdituFlavorConfig,
  EDITU_DEFAULT_FLAVOR,
} from '@editu/core';
import type {
  EdituMarkdownFlavor,
  EdituFlavorConfig,
  EdituCalloutMarkdownFormat,
} from '@editu/core';

// Resolve flavor to config
const config = resolveEdituFlavorConfig('obsidian');
// config.calloutFormat === "obsidian-callouts"
// config.wikiLinkSerialize === true

Usage

This package is used as a dependency of the framework adapter @editu/react:

import { createEdituExtensions, createEdituImageUploader } from "@editu/core";
import type { EdituEditorOptions, EdituFeatureOptions } from "@editu/core";

// Import styles
import "@editu/core/styles.css";

// Create extensions with layout primitives enabled by default
const extensions = await createEdituExtensions({
  image: { onUpload: async (file) => uploadImage(file) },
});

Documentation

Full docs: editu.pefen.dev | Repository: github.com/pfncl/editu

License

MIT