@scryb-editor/angular

pnpm add @scryb-editor/angular @scryb-editor/core @scryb-editor/extensions @scryb-editor/themes

The root editor component. Bind content via [(content)] (using ngModel) and pass all configuration through [options].

<scryb-editor
  [(content)]="htmlContent"
  [options]="editorConfig"
  (contentChange)="onContentChange($event)"
  (editorCreated)="onEditorReady($event)"
/>

import type { ScrybEditorConfig } from "@scryb-editor/core";

readonly editorConfig: Partial<ScrybEditorConfig> = {
  locale: "en",
  theme: "light",
  placeholder: "Start writing...",
  toolbar: { show: true },
  bubbleMenu: { show: true },
  sideMenu: { enabled: true },
  slashCommands: { enabled: true },
  characterCount: { show: true },
};

All configuration is passed via [options] as Partial<ScrybEditorConfig>. The type is defined in @scryb-editor/core and shared with the React adapter.

Any field not specified falls back to DEFAULT_EDITOR_CONFIG from @scryb-editor/core.

Toolbar, bubble menu and slash menu are split by what a control acts on, not by what it does. The defaults follow the split; the item keys do not enforce it, so any key can go anywhere you want it.

So undo, redo, image, table and horizontalRule are absent from the bubble menu defaults: the first two walk document history (and Mod-Z reaches them from anywhere), the last three insert at the cursor rather than transform a selection. All five stay valid BubbleMenuItemKeys — list them in config.bubbleMenu.items and they come back:

bubbleMenu: {
  items: [...DEFAULT_BUBBLE_MENU_ITEMS, "separator", "undo", "redo"],
}

An editor running with toolbar: { show: false } still reaches every insertion through the slash menu, which the side menu’s + button also opens.

Every path into the editor honours these: the toolbar panel, the bubble menu, a file dropped on the editor, and an image pasted from the clipboard. Dragging blocks inside the document is unaffected — only drags carrying OS files are intercepted.

Without upload, an image is embedded in the document as a base64 data URL. That keeps the editor self-contained with nothing to configure, and it is fine for a demo or a short note. It is not a storage strategy: a 3 MB photo becomes roughly 4 MB of string inside the document, saved to your database, re-parsed on every load, re-sent on every autosave.

upload takes the file and gives back a URL. Scryb never touches the bytes afterwards and has no opinion on where they go.

config: ScrybEditorConfig = {
  image: {
    upload: async (file, { onProgress, signal }) => {
      const body = new FormData();
      body.append("file", file);

      const response = await fetch("/api/images", { method: "POST", body, signal });
      if (!response.ok) throw new Error("Upload failed");

      onProgress(100);
      const { url } = await response.json();
      return url;
    },
  },
};

Return a string, or { src, width?, height? } when the server resized or converted the file and knows better than the browser did.

onProgress takes 0–100 and drives the placeholder’s progress bar. Leave it uncalled if your transport cannot measure progress — the bar stays indeterminate rather than claiming a number it does not have. signal aborts if the editor is destroyed mid-upload; forward it to fetch or wire it to XMLHttpRequest.abort().

While the handler runs, a placeholder holds the spot in the document. It is a decoration, not a node, so an in-flight upload never reaches getHTML(), an autosave, or your database as a half-finished image. Its position is tracked through every edit, so the image lands where it was promised even if the user typed several paragraphs above it in the meantime. If the handler rejects, the placeholder is removed, nothing is inserted, and the message reaches (imageError).

Several opt-in features ship a standalone component that pairs with its corresponding ScrybEditorConfig key. Each component imports from @scryb-editor/angular.

Live word/character count widget. Auto-rendered in the editor footer when config.wordCount.position === "footer" (default). Import ScrybWordCountComponent if you need to render it manually.

Autosave status widget (idle / dirty / saving / saved / error). Auto-rendered in the footer when config.autosave is configured. Import ScrybSaveStatusComponent if you need to render it manually.

Table-of-Contents sidebar. Import ScrybTocComponent and render alongside the editor:

<scryb-toc [editor]="editor" [callbacks]="tocCallbacks" />

import { ScrybTocComponent } from "@scryb-editor/angular";
import { createTocCallbackStore, type TocCallbacks } from "@scryb-editor/core";

readonly tocCallbacks: TocCallbacks = createTocCallbackStore();

readonly editorConfig: Partial<ScrybEditorConfig> = {
  uniqueId: { types: ["heading"] },
  toc: { enabled: true, callbacks: this.tocCallbacks },
};

Pass the SAME tocCallbacks reference to both <scryb-toc> and the config. The component patches callbacks.onUpdate on mount and restores a noop on cleanup.

The TOC, emoji, and mention features use a callback-store pattern to decouple the Tiptap extension lifecycle from the adapter popup. Create a store once, then pass it to both the config and the popup component.

import {
  createTocCallbackStore,
  createEmojiCallbackStore,
  createMentionCallbackStore,
} from "@scryb-editor/core";

const tocCallbacks = createTocCallbackStore();
const emojiCallbacks = createEmojiCallbackStore();
const mentionCallbacks = createMentionCallbackStore();

Emoji and mention popups are mounted automatically by ScrybEditorComponent when the corresponding config keys are enabled — consumers typically only need to create the store and pass it in.

Root singleton managing UI locale. Built-in: "en", "fr", "pt". setLocale(), getSupportedLocales(), and addTranslations() all accept any LocaleCode (any BCP-47 string), not just the three built-ins — pair with registerLocale() from @scryb-editor/core, or pass config.translations on <scryb-editor> for a per-instance catalog. See the Internationalization guide for the full picture.

import { ScrybI18nService, SupportedLocale } from "@scryb-editor/angular";

private readonly i18n = inject(ScrybI18nService);

setLanguage(locale: SupportedLocale) {
  this.i18n.setLocale(locale);
}

Stateless command facade. All methods take an Editor instance as the first argument.

import { EditorCommands } from "@scryb-editor/core";

const commands = new EditorCommands();
commands.toggleBold(editor);

Instance-scoped service (not root) that tracks which dropdown is open within an editor instance. Prevents multiple dropdowns from opening simultaneously. Provided automatically by ScrybEditorComponent.

Instance-scoped service that handles image upload, compression (canvas-based), and validation.

The package re-exports default configurations from @scryb-editor/core:

import {
  DEFAULT_EDITOR_CONFIG,
  DEFAULT_TOOLBAR_ORDER,
  DEFAULT_BUBBLE_MENU_ITEMS,
  DEFAULT_SLASH_COMMANDS,
  DEFAULT_FONT_SIZES,
  DEFAULT_FONT_FAMILIES,
  DEFAULT_TEXT_COLORS,
} from "@scryb-editor/angular";

import type { ScrybEditorConfig } from "@scryb-editor/core";
import type { ScrybTheme, SupportedLocale, ToolbarItemKey, BubbleMenuItemKey } from "@scryb-editor/core";

• Migrating from angular-tiptap-editor — Upgrade from the legacy package
• Migrating to Unified Config — Upgrade from individual inputs to [options]