supamde 0.0.0-stage → 0.1.0

package/dist/ui/actions.d.ts

@@ -0,0 +1,51 @@
+import type { EditorState } from '@codemirror/state';
+import type { SupaCommand } from '../commands/types';
+import type { EditorMode } from '../livepreview';
+/** Plattformabhängiges Anzeige-Kürzel (unverändert). */
+type Shortcut = string | {
+    default: string;
+    mac: string;
+};
+/** Strukturelles Minimal-Interface der SupaMDE-Instanz für view-Aktionen. */
+export interface SupaLike {
+    toggleSideBySide(): void;
+    toggleFullScreen(): void;
+    isSideBySideActive(): boolean;
+    isFullscreenActive(): boolean;
+    togglePreviewFullScreen(): void;
+    isPreviewFullScreenActive(): boolean;
+    toggleEditorMode(): void;
+    getEditorMode(): EditorMode;
+    /** Startet den Upload für die übergebenen Dateien (M5). */
+    uploadImages(files: FileList | File[]): void;
+    /** Öffnet die Dateiauswahl (M5). */
+    openBrowseFileWindow(): void;
+}
+/** Ein Built-in-Toolbar-Eintrag: entweder CM6-Command oder Instanz-Aktion. */
+export type ToolbarAction = {
+    kind: 'command';
+    command: SupaCommand;
+    query?: (state: EditorState) => boolean;
+    icon: string;
+    /**
+     * Anzeige-Kürzel für den Toolbar-Button-Title. Normalfall: einheitlicher
+     * String für alle Plattformen. Für Fälle, in denen macOS eine abweichende
+     * Bindung hat (z.B. redo via CM6-`historyKeymap`: `Mod-y` non-Mac,
+     * `Mod-Shift-z` auf Mac), ein `{ default, mac }`-Objekt verwenden.
+     */
+    shortcut?: Shortcut;
+} | {
+    kind: 'view';
+    run: (editor: SupaLike) => void;
+    active?: (editor: SupaLike) => boolean;
+    icon: string;
+    shortcut?: Shortcut;
+};
+/**
+ * Registry: Built-in-Name → ToolbarAction. Die Anzeigetitel stehen NICHT hier,
+ * sondern als `toolbar.${name}` in den Locales (`src/i18n/`).
+ */
+export declare const BUILTIN_ACTIONS: Record<string, ToolbarAction>;
+/** Liefert die Action zu einem Built-in-Namen, oder undefined. */
+export declare function getAction(name: string): ToolbarAction | undefined;
+export {};

package/dist/ui/fullscreen.d.ts

@@ -0,0 +1,16 @@
+export interface FullscreenOptions {
+    onToggleFullScreen?: (active: boolean) => void;
+}
+export interface Fullscreen {
+    toggle(): void;
+    /** Schaltet gezielt auf `next`. Idempotent — gleicher Wert ändert nichts. */
+    set(next: boolean): void;
+    isActive(): boolean;
+    destroy(): void;
+}
+/**
+ * Fullscreen-Toggle: reines CSS über die Klasse `supamde-fullscreen` auf dem
+ * Container. Sperrt zusätzlich body-Scroll und lässt Escape den Modus
+ * verlassen. Unabhängig von Side-by-Side (keine Zwangskopplung).
+ */
+export declare function createFullscreen(container: HTMLElement, opts?: FullscreenOptions): Fullscreen;

package/dist/ui/icons.d.ts

@@ -0,0 +1,4 @@
+/** Ob ein Icon-Name bekannt ist. */
+export declare function hasIcon(name: string): boolean;
+/** Liefert ein fertiges Lucide-SVGElement für `name`; wirft bei unbekanntem Namen. */
+export declare function renderIcon(name: string): SVGElement;

package/dist/ui/inject-styles.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Fügt die SupaMDE-Styles EINMALIG als `<style>`-Tag in den Head ein.
+ *
+ * Im Library-Build extrahiert Vite `import './x.css'` in eine separate Datei
+ * (`dist/supamde.css`), die ein blosses `import SupaMDE from 'supamde'` NICHT
+ * mitlädt — die Toolbar käme ungestylt an. Deshalb liegt das CSS zusätzlich
+ * per `?inline` als String im Bundle und wird hier zur Laufzeit gesetzt.
+ *
+ * Das Tag landet als ERSTES Kind im Head, damit Host-Stylesheets bei gleicher
+ * Spezifität gewinnen (spätere Regel schlägt frühere) und Overrides ohne
+ * `!important` möglich bleiben.
+ */
+export declare function injectStyles(doc?: Document): void;

package/dist/ui/preview.d.ts

@@ -0,0 +1,27 @@
+import type { EditorView } from '@codemirror/view';
+import type { EditorState } from '@codemirror/state';
+export interface SideBySideOptions {
+    /** Markdown→HTML-Funktion (aus markdown/parse.ts, mit Optionen gebunden). */
+    render: (text: string) => string;
+    /** Zusätzliche CSS-Klassen aufs Panel. */
+    previewClass?: string | string[];
+    /** Bidirektionaler Scroll-Sync (Default true). */
+    syncScroll?: boolean;
+}
+export interface SideBySide {
+    dom: HTMLElement;
+    /** Schaltet gezielt auf `next`. Idempotent — gleicher Wert ändert nichts. */
+    set(next: boolean): void;
+    toggle(): void;
+    isActive(): boolean;
+    update(state: EditorState): void;
+    destroy(): void;
+}
+/**
+ * Side-by-Side-Vorschau: baut ein Panel neben `view.dom`. Das Layout-Toggle
+ * (Flexbox 50/50) übernimmt CSS über die Klasse `supamde-sided` auf dem
+ * Container (in index.ts gesetzt); dieses Modul verwaltet Panel-Inhalt,
+ * Sichtbarkeit und Scroll-Sync. Live-Update erfolgt über `update()`, das der
+ * zentrale updateListener-Sink ruft.
+ */
+export declare function createSideBySide(view: EditorView, opts: SideBySideOptions): SideBySide;

package/dist/ui/shortcut-label.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Plattformabhängiges Shortcut-Kürzel: `default` gilt für alle Plattformen außer Mac,
+ * `mac` überschreibt die Anzeige (und ggf. Bindung) auf macOS. Nötig für Fälle wie
+ * redo, wo CM6s `historyKeymap` auf Mac `Mod-Shift-z` statt `Mod-y` bindet.
+ */
+export interface PlatformShortcut {
+    default: string;
+    mac: string;
+}
+/**
+ * Formatiert einen CM6-Shortcut-String lesbar für die UI.
+ *
+ * Eingabeformat: CM6-kompatible Strings wie 'Mod-b', 'Shift-Mod-h', 'Mod-Alt-c', etc.
+ * Segmente sind mit `-` getrennt; alle außer dem letzten sind Modifier.
+ *
+ * Alternativ akzeptiert die Funktion ein plattformabhängiges Kürzel-Objekt
+ * `{ default, mac }` — auf Mac wird dann `mac` formatiert, sonst `default`.
+ *
+ * @param shortcut Der zu formatierende Shortcut-String (z.B. 'Mod-b') oder ein
+ *   plattformabhängiges Kürzel-Objekt (z.B. `{ default: 'Mod-y', mac: 'Mod-Shift-z' }`)
+ * @param isMac Optionales Flag, um Plattform zu überschreiben (Default: auto-erkannt)
+ * @returns Formatierter Shortcut (z.B. '⌘B' auf Mac, 'Ctrl+B' sonst)
+ */
+export declare function formatShortcut(shortcut: string | PlatformShortcut, isMac?: boolean): string;

package/dist/ui/statusbar.d.ts

@@ -0,0 +1,28 @@
+import type { EditorState } from '@codemirror/state';
+import { type Translator } from '../i18n/translator';
+/** Ein Custom-Statusbar-Item (easyMDE-kompatibel). */
+export interface CustomStatusItem {
+    className: string;
+    defaultValue?: string;
+    onUpdate?(el: HTMLElement): void;
+    onActivity?(el: HTMLElement): void;
+}
+/** Die `status`-Option: false, oder Liste aus Built-in-Namen/Custom-Items. */
+export type StatusOption = false | Array<string | CustomStatusItem>;
+/** Default-Statusbar-Items. */
+export declare const DEFAULT_STATUS: string[];
+/** Ein gerendertes Statusbar-Widget. */
+export interface Statusbar {
+    dom: HTMLElement;
+    update(state: EditorState, opts: {
+        docChanged: boolean;
+        selectionSet: boolean;
+    }): void;
+    setItem(name: string, content: string): void;
+    destroy(): void;
+}
+/**
+ * Erzeugt die Statusbar aus der `status`-Option. `null` bei `false`.
+ * `translator` liefert die Texte der Built-ins; ohne Angabe englisch.
+ */
+export declare function createStatusbar(option: StatusOption | undefined, translator?: Translator): Statusbar | null;

package/dist/ui/toolbar-config.d.ts

@@ -0,0 +1,36 @@
+import { type ToolbarAction } from './actions';
+/** Ein Custom-Toolbar-Button (easyMDE-kompatibel): eigenes action(editor). */
+export interface CustomToolbarButton {
+    name: string;
+    action: (editor: unknown) => void;
+    className?: string;
+    title?: string;
+}
+/** Die `toolbar`-Option: false, oder Liste aus Built-in-Namen/Custom-Buttons. */
+export type ToolbarOption = false | Array<string | CustomToolbarButton>;
+/**
+ * Default-Toolbar. `'|'` ist ein Separator.
+ *
+ * Ansicht: der Default zeigt den kombinierten `'preview-fullscreen'`-Button
+ * (Vorschau + Vollbild in einem Schritt). Die Einzel-Buttons `'side-by-side'`
+ * und `'fullscreen'` bleiben registriert und lassen sich über die
+ * `toolbar`-Option weiterhin einzeln einsetzen.
+ */
+export declare const DEFAULT_TOOLBAR: string[];
+/** Aufgelöster Toolbar-Eintrag. */
+export type ResolvedToolbarItem = {
+    kind: 'separator';
+} | {
+    kind: 'builtin';
+    name: string;
+    action: ToolbarAction;
+} | {
+    kind: 'custom';
+    button: CustomToolbarButton;
+};
+/**
+ * Normalisiert die `toolbar`-Option zu einer aufgelösten Item-Liste.
+ * `false` → null (keine Toolbar). `undefined` → DEFAULT_TOOLBAR.
+ * Unbekannte Built-in-Strings werden mit Warnung übersprungen.
+ */
+export declare function resolveToolbar(option: ToolbarOption | undefined): ResolvedToolbarItem[] | null;

package/dist/ui/toolbar.d.ts

@@ -0,0 +1,16 @@
+import type { EditorView } from '@codemirror/view';
+import type { EditorState } from '@codemirror/state';
+import { type ToolbarOption } from './toolbar-config';
+import { type Translator } from '../i18n/translator';
+/** Ein gerendertes Toolbar-Widget mit reaktivem Aktiv-Zustand. */
+export interface Toolbar {
+    dom: HTMLElement;
+    update(state: EditorState): void;
+    destroy(): void;
+}
+/**
+ * Erzeugt die Toolbar aus der `toolbar`-Option. `null` bei `false`.
+ * `editor` ist die SupaMDE-Instanz, die Custom-Buttons als action-Argument bekommen.
+ * `translator` liefert die Titel der Built-in-Buttons; ohne Angabe englisch.
+ */
+export declare function createToolbar(view: EditorView, option: ToolbarOption | undefined, editor: unknown, translator?: Translator): Toolbar | null;

package/dist/ui/update-listener.d.ts

@@ -0,0 +1,15 @@
+import type { Extension, EditorState } from '@codemirror/state';
+/** Empfänger für Editor-Updates (Toolbar-Aktiv-Zustand, Statusbar …). */
+export interface UpdateSink {
+    onUpdate(update: {
+        state: EditorState;
+        docChanged: boolean;
+        selectionSet: boolean;
+    }): void;
+}
+/**
+ * Der EINE zentrale updateListener: bei jedem relevanten ViewUpdate wird
+ * `sink.onUpdate` mit dem neuen State und den Flags gerufen. Entkoppelt UI ↔
+ * Editor an einer Stelle (CM6-Design §5, „roter Faden").
+ */
+export declare function updateListenerExtension(sink: UpdateSink): Extension;

package/dist/util/text-format.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Ersetzt ALLE Vorkommen von `{schlüssel}`. Benannte Platzhalter statt easyMDEs
+ * `#image_name#`, und bewusst alle Vorkommen: ein Text darf `{name}` mehrfach
+ * verwenden.
+ *
+ * Eingesetzte Werte werden NICHT erneut durchsucht — enthielte ein Wert selbst
+ * `{…}`, hinge das Ergebnis sonst von der Schlüsselreihenfolge ab.
+ */
+export declare function formatText(template: string, values: Record<string, string>): string;
+/** Bytes als lesbare Größe — nur für die Anzeige, keine exakte Rechnung. */
+export declare function formatBytes(bytes: number): string;

package/dist/utils/html.d.ts

@@ -0,0 +1,2 @@
+/** Escaped die fünf HTML-kritischen Zeichen für sichere Text-in-HTML-Einbettung. */
+export declare function escapeHtml(s: string): string;

package/dist/utils/text.d.ts

@@ -0,0 +1,41 @@
+import type { EditorState, Line } from '@codemirror/state';
+import type { EditorView } from '@codemirror/view';
+import type { DocChange } from '../commands/types';
+/**
+ * Dispatcht zeilenweise Präfix-Änderungen und mappt die bestehende Selektion mit
+ * Rechts-Bias (`assoc: 1`) durch die Änderungen. Ohne diesen Bias lässt CM6 den
+ * Cursor an einer Einfügegrenze VOR dem eingefügten Marker stehen — auf einer
+ * leeren Zeile (Cursor == Zeilenanfang == Einfüge-`from`) bliebe er dadurch auf
+ * Spalte 1 statt hinter dem frisch gesetzten Marker.
+ */
+export declare function dispatchLineChanges(view: EditorView, changes: DocChange[]): void;
+/** Der volle Zeilenbereich, den die Hauptselektion berührt. */
+export interface LineRange {
+    /** Doc-Offset am Anfang der ersten berührten Zeile. */
+    from: number;
+    /** Doc-Offset am Ende der letzten berührten Zeile. */
+    to: number;
+    /** 1-basierte Nummer der ersten Zeile. */
+    firstLine: number;
+    /** 1-basierte Nummer der letzten Zeile. */
+    lastLine: number;
+}
+/** Ermittelt den vollständigen Zeilenbereich der Hauptselektion. */
+export declare function selectedLineRange(state: EditorState): LineRange;
+/**
+ * Wendet `build` auf jede von der Hauptselektion berührte Zeile an und dispatcht
+ * die gesammelten Änderungen mit Selektionserhalt (siehe `dispatchLineChanges`).
+ * `build` liefert `null` für Zeilen ohne Änderung. Bleibt jede Zeile unverändert,
+ * wird nicht dispatcht — kein leerer Undo-Schritt. Liefert, ob dispatcht wurde.
+ */
+export declare function mapSelectedLines(view: EditorView, build: (line: Line) => DocChange | null): boolean;
+/**
+ * Toggelt ein Zeilen-Präfix über den Selektions-Zeilenbereich: tragen ALLE
+ * Zeilen das Präfix, wird es entfernt, sonst überall hinzugefügt.
+ */
+export declare function toggleLinePrefix(view: EditorView, prefix: string): boolean;
+/**
+ * Umschließt die Hauptselektion mit `before`/`after`. Bei leerer Selektion
+ * wird ein Marker-Paar eingefügt und der Cursor dazwischen platziert.
+ */
+export declare function wrapSelection(view: EditorView, before: string, after: string): boolean;

package/dist/version.d.ts

@@ -0,0 +1,2 @@
+/** Aktuelle SupaMDE-Version (wird beim Release synchron zur package.json gehalten). */
+export declare const VERSION = "0.1.0";

package/package.json

@@ -1,6 +1,98 @@
 {
   "name": "supamde",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "A modern, embeddable Markdown editor built on CodeMirror 6 — a modernized rewrite of easyMDE.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Sven Deginther",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/svenho/SupaMDE.git"
+  },
+  "homepage": "https://github.com/svenho/SupaMDE#readme",
+  "bugs": {
+    "url": "https://github.com/svenho/SupaMDE/issues"
+  },
+  "engines": {
+    "node": "^22.13.0 || >=24"
+  },
+  "module": "./dist/supamde.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/supamde.mjs"
+    },
+    "./style.css": "./dist/supamde.css",
+    "./dist/supamde.css": "./dist/supamde.css"
+  },
+  "files": [
+    "dist/**/*"
+  ],
+  "keywords": [
+    "markdown",
+    "editor",
+    "codemirror",
+    "codemirror6",
+    "wysiwyg",
+    "easymde"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build:demo": "vite build --config vite.config.demo.ts",
+    "build": "vite build && tsc --project tsconfig.build.json --emitDeclarationOnly",
+    "typecheck": "tsc --project tsconfig.test.json --noEmit",
+    "test": "vitest --project unit",
+    "test:run": "vitest run --project unit",
+    "test:browser": "vitest run --project browser",
+    "test:all": "vitest run",
+    "lint": "eslint .",
+    "format": "prettier --write .",
+    "prepare": "npm run build",
+    "prepublishOnly": "npm run lint && npm run typecheck && npm run test:all"
+  },
+  "devDependencies": {
+    "@codemirror/commands": "^6.10.4",
+    "@codemirror/lang-markdown": "^6.5.1",
+    "@codemirror/language": "^6.12.4",
+    "@codemirror/state": "^6.7.1",
+    "@codemirror/view": "^6.43.6",
+    "@eslint/js": "^10.0.1",
+    "@lezer/common": "^1.2.3",
+    "@lezer/highlight": "^1.2.3",
+    "@lezer/markdown": "^1.7.2",
+    "@types/node": "^22.20.1",
+    "@vitest/browser": "5.0.3",
+    "@vitest/browser-playwright": "5.0.3",
+    "@vitest/coverage-v8": "5.0.3",
+    "eslint": "^10.7.0",
+    "jsdom": "^29.1.1",
+    "katex": "^0.19.0",
+    "lucide": "^1.25.0",
+    "playwright": "^1.63.0",
+    "prettier": "^3.9.5",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.64.0",
+    "vite": "^8.1.5",
+    "vitest": "5.0.3"
+  },
+  "peerDependencies": {
+    "@codemirror/commands": "^6.10.4",
+    "@codemirror/lang-markdown": "^6.5.1",
+    "@codemirror/language": "^6.12.4",
+    "@codemirror/state": "^6.7.1",
+    "@codemirror/view": "^6.43.6",
+    "@lezer/common": "^1.2.3",
+    "@lezer/highlight": "^1.2.3",
+    "@lezer/markdown": "^1.7.2",
+    "katex": "^0.18.0 || ^0.19.0"
+  },
+  "peerDependenciesMeta": {
+    "katex": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "marked": "^18.0.7"
+  }
+}