@codeauradev/ngx-wind-editor 0.0.0-stage → 1.0.0

package/dist/types/codeauradev-ngx-wind-editor.d.ts

@@ -0,0 +1,270 @@
+import * as Y from "yjs";
+import * as i0 from "@angular/core";
+declare const BLOCK_TYPES: readonly ["paragraph", "heading", "blockquote", "code", "bullet", "ordered", "rule", "image"];
+type BlockType = (typeof BLOCK_TYPES)[number];
+declare const MARKS: readonly ["bold", "italic", "underline", "strike", "code"];
+type MarkName = (typeof MARKS)[number];
+interface TextAttrs {
+  bold?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+  strike?: boolean;
+  code?: boolean;
+  href?: string;
+}
+interface DeltaOp {
+  insert: string;
+  attributes?: TextAttrs;
+}
+type Delta = DeltaOp[];
+interface BlockData {
+  id: string;
+  type: BlockType;
+  level: number;
+  src: string;
+  alt: string;
+  delta: Delta;
+}
+interface Point {
+  blockId: string;
+  offset: number;
+}
+interface Selection {
+  anchor: Point;
+  head: Point;
+}
+interface EditorSnapshot {
+  html: string;
+  text: string;
+  words: number;
+  characters: number;
+  blockType: BlockType;
+  level: number;
+  marks: TextAttrs;
+  href: string | null;
+  canUndo: boolean;
+  canRedo: boolean;
+  slash: string | null;
+}
+declare function isBlockType(value: unknown): value is BlockType;
+interface LocatedBlock {
+  map: Y.Map<unknown>;
+  index: number;
+  id: string;
+  type: BlockType;
+  level: number;
+  text: Y.Text | null;
+}
+type SlashChoice = 'paragraph' | 'h1' | 'h2' | 'h3' | 'bullet' | 'ordered' | 'quote' | 'code' | 'rule' | 'image';
+declare function blocksOf(doc: Y.Doc): Y.Array<Y.Map<unknown>>;
+declare function makeBlock(type: BlockType, fields?: {
+  level?: number;
+  src?: string;
+  alt?: string;
+  delta?: Delta;
+}): Y.Map<unknown>;
+declare function readDelta(text: Y.Text): Delta;
+export declare function readBlocks(doc: Y.Doc): BlockData[];
+interface SessionSnapshot {
+  blockType: BlockType;
+  level: number;
+  marks: TextAttrs;
+  href: string | null;
+  slash: string | null;
+  canUndo: boolean;
+  canRedo: boolean;
+}
+export declare class WindSession {
+  readonly doc: Y.Doc;
+  readonly origin: object;
+  selection: Selection;
+  private stored;
+  private pendingBefore;
+  private readonly undoManager;
+  private readonly listeners;
+  constructor(doc: Y.Doc);
+  onChange(listener: (structural: boolean) => void): () => void;
+  get html(): string;
+  get text(): string;
+  get words(): number;
+  get canUndo(): boolean;
+  get canRedo(): boolean;
+  undo(): void;
+  redo(): void;
+  select(selection: Selection): void;
+  focusPoint(blockId: string, offset: number): void;
+  insertText(value: string): void;
+  deleteBackward(): void;
+  deleteForward(): void;
+  split(mode: 'enter' | 'hard' | 'exit'): void;
+  toggleMark(mark: MarkName): void;
+  setLink(href: string | null): void;
+  clearMarks(): void;
+  setBlockType(type: BlockType, level?: number): void;
+  insertDivider(): void;
+  insertImage(src: string, alt?: string): void;
+  applySlash(choice: SlashChoice): 'image' | 'applied';
+  paste(html: string | null, plain: string | null): void;
+  replaceHtml(html: string): void;
+  reconcileText(blockId: string, next: string): void;
+  snapshot(): SessionSnapshot;
+  dismissSlash(): void;
+  private slashQuery;
+  private consumeSlash;
+  private typingAttrs;
+  private effectiveMarks;
+  private toolbarMarks;
+  private rangeHas;
+  private formatRange;
+  private iterRange;
+  private deleteRange;
+  private insertParsed;
+  private selectedBlocks;
+  private ensureText;
+  private ensureBlock;
+  private current;
+  private clampSelection;
+  private transact;
+  private emit;
+}
+export declare function loadHtml(doc: Y.Doc, html: string, origin?: unknown): void;
+interface SlashItem {
+  id: SlashChoice;
+  label: string;
+  hint: string;
+  keys: string;
+}
+export declare const SLASH_ITEMS: readonly SlashItem[];
+export declare function filterSlash(query: string): SlashItem[];
+export declare const WIND_TOOLS: readonly ["paragraph", "h1", "h2", "bold", "italic", "underline", "strike", "code", "link", "bullet", "ordered", "quote", "codeblock", "rule", "image", "clear", "undo", "redo", "source"];
+type WindTool = (typeof WIND_TOOLS)[number];
+type WindToolbarPreset = 'full' | 'writing' | 'basic' | 'minimal';
+export declare const WIND_TOOLBAR_PRESETS: Record<WindToolbarPreset, readonly WindTool[]>;
+export declare function isWindTool(value: string): value is WindTool;
+export declare function isToolbarPreset(value: string): value is WindToolbarPreset;
+/** A preset name, or an explicit list. Unknown ids are dropped. List order is the button order. */
+export declare function resolveToolbar(value?: WindToolbarPreset | readonly string[] | null): WindTool[];
+interface SlashPoint {
+  top: number;
+  left: number;
+}
+interface SurfaceChange extends EditorSnapshot {
+  slashRect: SlashPoint | null;
+}
+type WindCommand = {
+  type: 'mark';
+  mark: MarkName;
+} | {
+  type: 'link';
+  href: string | null;
+} | {
+  type: 'clear';
+} | {
+  type: 'block';
+  block: BlockType;
+  level?: number;
+} | {
+  type: 'divider';
+} | {
+  type: 'image';
+  src: string;
+  alt?: string;
+} | {
+  type: 'undo';
+} | {
+  type: 'redo';
+} | {
+  type: 'slash';
+  choice: SlashChoice;
+};
+interface WindMount {
+  destroy(): void;
+  focus(): void;
+  exec(command: WindCommand): void;
+  setReadonly(readonly: boolean): void;
+  setPlaceholder(value: string): void;
+  setHtml(html: string): void;
+  getHtml(): string;
+  session: WindSession;
+}
+interface SurfaceOptions {
+  html?: string;
+  placeholder?: string;
+  readonly?: boolean;
+  onChange?: (change: SurfaceChange) => void;
+  /** Return true to swallow the key (slash menu, for example). */
+  interceptKey?: (event: KeyboardEvent) => boolean;
+  onLink?: () => void;
+}
+declare function mountWindSurface(host: HTMLElement, options: SurfaceOptions): WindMount;
+interface Tool {
+  id: WindTool;
+  label: string;
+  icon: string;
+}
+export declare class WindEditor {
+  readonly html: import("@angular/core").ModelSignal<string>;
+  readonly placeholder: import("@angular/core").InputSignal<string>;
+  readonly readOnly: import("@angular/core").InputSignal<boolean>;
+  readonly showToolbar: import("@angular/core").InputSignal<boolean>;
+  /** Preset name, or the buttons to show, in order. */
+  readonly toolbar: import("@angular/core").InputSignal<readonly ("paragraph" | "code" | "bullet" | "ordered" | "rule" | "image" | "bold" | "italic" | "underline" | "strike" | "link" | "source" | "h1" | "h2" | "quote" | "undo" | "redo" | "codeblock" | "clear")[] | WindToolbarPreset>;
+  protected readonly tools: import("@angular/core").Signal<Tool[]>;
+  protected readonly change: import("@angular/core").WritableSignal<SurfaceChange | null>;
+  protected readonly linkOpen: import("@angular/core").WritableSignal<boolean>;
+  protected readonly linkDraft: import("@angular/core").WritableSignal<string>;
+  protected readonly imageOpen: import("@angular/core").WritableSignal<boolean>;
+  protected readonly imageSrc: import("@angular/core").WritableSignal<string>;
+  protected readonly imageAlt: import("@angular/core").WritableSignal<string>;
+  protected readonly sourceOpen: import("@angular/core").WritableSignal<boolean>;
+  protected readonly sourceDraft: import("@angular/core").WritableSignal<string>;
+  protected readonly slashIndex: import("@angular/core").WritableSignal<number>;
+  protected readonly slashItems: import("@angular/core").Signal<SlashItem[]>;
+  private readonly surfaceRef;
+  private readonly destroyRef;
+  private handle;
+  private echo;
+  constructor();
+  protected pressed(id: string): boolean;
+  protected disabled(id: string): boolean;
+  protected run(id: string): void;
+  protected pickSlash(item: SlashItem): void;
+  protected applyLink(event: Event): void;
+  protected clearLink(): void;
+  protected applyImage(event: Event): void;
+  protected applySource(): void;
+  protected onDraft(event: Event, field: 'link' | 'src' | 'alt' | 'source'): void;
+  private attach;
+  private onKey;
+  static ɵfac: i0.ɵɵFactoryDeclaration<WindEditor, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<WindEditor, "wind-editor", never, {
+    "html": {
+      "alias": "html";
+      "required": false;
+      "isSignal": true;
+    };
+    "placeholder": {
+      "alias": "placeholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "readOnly": {
+      "alias": "readonly";
+      "required": false;
+      "isSignal": true;
+    };
+    "showToolbar": {
+      "alias": "showToolbar";
+      "required": false;
+      "isSignal": true;
+    };
+    "toolbar": {
+      "alias": "toolbar";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "html": "htmlChange";
+  }, never, never, true, never>;
+}
+export type { BlockData, BlockType, EditorSnapshot, MarkName, Selection, SlashChoice, SlashItem, TextAttrs, WindTool, WindToolbarPreset };

package/ng-package.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "./dist",
+  "allowedNonPeerDependencies": ["yjs"],
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "assets": [
+    {
+      "input": "src/styles",
+      "glob": "**/*.css",
+      "output": "."
+    }
+  ]
+}

package/package.json

@@ -1,6 +1,61 @@
 {
   "name": "@codeauradev/ngx-wind-editor",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0",
+  "description": "WYSIWYG HTML editor for Angular 22, styled with Tailwind CSS v4.",
+  "keywords": [
+    "angular",
+    "angular22",
+    "wysiwyg",
+    "rich-text",
+    "editor",
+    "tailwindcss",
+    "ngx"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "*.css",
+    "styles.css"
+  ],
+  "type": "module",
+  "main": "./src/public-api.ts",
+  "module": "./src/public-api.ts",
+  "types": "./src/public-api.ts",
+  "typings": "./src/public-api.ts",
+  "exports": {
+    ".": {
+      "types": "./src/public-api.ts",
+      "default": "./src/public-api.ts"
+    },
+    "./styles.css": "./src/styles/ngx-wind-editor.css"
+  },
+  "peerDependencies": {
+    "@angular/core": "^22.0.0",
+    "tailwindcss": "^4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "tslib": "^2.8.1",
+    "yjs": "^13.6.27"
+  },
+  "devDependencies": {
+    "@angular/compiler": "22.2.3",
+    "@angular/compiler-cli": "22.2.3",
+    "@angular/core": "22.2.3",
+    "ng-packagr": "22.2.3",
+    "rxjs": "7.8.2",
+    "tsx": "^4.20.5",
+    "typescript": "6.0.3",
+    "yjs": "13.6.27"
+  },
+  "scripts": {
+    "build": "ng-packagr -p ng-package.json -c tsconfig.json && node scripts/patch-dist.mjs",
+    "test": "tsx --test test/*.test.ts"
+  }
+}

package/scripts/patch-dist.mjs

@@ -0,0 +1,11 @@
+import { readFileSync, writeFileSync } from 'node:fs';
+
+const file = 'dist/package.json';
+const pkg = JSON.parse(readFileSync(file, 'utf8'));
+delete pkg.main;
+delete pkg.types;
+pkg.exports = {
+  ...pkg.exports,
+  './styles.css': './ngx-wind-editor.css',
+};
+writeFileSync(file, JSON.stringify(pkg, null, 2) + '\n');

package/src/catalog.ts

@@ -0,0 +1,27 @@
+import type { SlashChoice } from './session';
+
+export interface SlashItem {
+  id: SlashChoice;
+  label: string;
+  hint: string;
+  keys: string;
+}
+
+export const SLASH_ITEMS: readonly SlashItem[] = [
+  { id: 'paragraph', label: 'Text', hint: 'Plain paragraph', keys: 'p text paragraph' },
+  { id: 'h1', label: 'Heading 1', hint: 'Large title', keys: 'h1 heading title' },
+  { id: 'h2', label: 'Heading 2', hint: 'Section', keys: 'h2 heading' },
+  { id: 'h3', label: 'Heading 3', hint: 'Subsection', keys: 'h3 heading' },
+  { id: 'bullet', label: 'Bullet list', hint: 'Unordered', keys: 'ul list bullet' },
+  { id: 'ordered', label: 'Numbered list', hint: 'Ordered', keys: 'ol list number' },
+  { id: 'quote', label: 'Quote', hint: 'Blockquote', keys: 'quote blockquote' },
+  { id: 'code', label: 'Code', hint: 'Monospace block', keys: 'code pre' },
+  { id: 'rule', label: 'Divider', hint: 'Horizontal rule', keys: 'hr rule divider line' },
+  { id: 'image', label: 'Image', hint: 'From a URL', keys: 'img image picture' },
+];
+
+export function filterSlash(query: string): SlashItem[] {
+  const needle = query.trim().toLowerCase();
+  if (!needle) return [...SLASH_ITEMS];
+  return SLASH_ITEMS.filter((item) => `${item.label} ${item.keys}`.toLowerCase().includes(needle));
+}

package/src/delta.ts

@@ -0,0 +1,115 @@
+import type { Delta, DeltaOp, TextAttrs } from './types';
+
+const MARK_KEYS = ['bold', 'italic', 'underline', 'strike', 'code', 'href'] as const;
+
+export function packAttrs(attrs: TextAttrs | null | undefined): TextAttrs | undefined {
+  if (!attrs) return undefined;
+  const out: TextAttrs = {};
+  if (attrs.bold) out.bold = true;
+  if (attrs.italic) out.italic = true;
+  if (attrs.underline) out.underline = true;
+  if (attrs.strike) out.strike = true;
+  if (attrs.code) out.code = true;
+  if (typeof attrs.href === 'string' && attrs.href.length > 0) out.href = attrs.href;
+  return Object.keys(out).length > 0 ? out : undefined;
+}
+
+export function attrsEqual(a: TextAttrs | undefined, b: TextAttrs | undefined): boolean {
+  const left = packAttrs(a) ?? {};
+  const right = packAttrs(b) ?? {};
+  return MARK_KEYS.every((key) => left[key] === right[key]);
+}
+
+export function mergeDelta(delta: Delta): Delta {
+  const out: Delta = [];
+  for (const op of delta) {
+    if (!op.insert) continue;
+    const prev = out[out.length - 1];
+    if (prev && attrsEqual(prev.attributes, op.attributes)) prev.insert += op.insert;
+    else out.push({ insert: op.insert, attributes: packAttrs(op.attributes) });
+  }
+  return out;
+}
+
+export function deltaLength(delta: Delta): number {
+  return delta.reduce((sum, op) => sum + op.insert.length, 0);
+}
+
+export function deltaToText(delta: Delta): string {
+  return delta.map((op) => op.insert).join('');
+}
+
+export function sliceDelta(delta: Delta, start: number, end: number): Delta {
+  const out: DeltaOp[] = [];
+  let pos = 0;
+  for (const op of delta) {
+    const len = op.insert.length;
+    const from = Math.max(start, pos);
+    const to = Math.min(end, pos + len);
+    if (to > from) {
+      out.push({ insert: op.insert.slice(from - pos, to - pos), attributes: packAttrs(op.attributes) });
+    }
+    pos += len;
+  }
+  return out;
+}
+
+/** Attributes that apply to a caret sitting at `index` (the character before it). */
+export function attrsAt(delta: Delta, index: number): TextAttrs {
+  if (index <= 0 || delta.length === 0) return {};
+  let pos = 0;
+  for (const op of delta) {
+    const len = op.insert.length;
+    if (index <= pos + len) return { ...(packAttrs(op.attributes) ?? {}) };
+    pos += len;
+  }
+  return { ...(packAttrs(delta[delta.length - 1]?.attributes) ?? {}) };
+}
+
+export function commonEdges(prev: string, next: string): { start: number; prevEnd: number; nextEnd: number } {
+  let start = 0;
+  const limit = Math.min(prev.length, next.length);
+  while (start < limit && prev[start] === next[start]) start += 1;
+  let prevEnd = prev.length;
+  let nextEnd = next.length;
+  while (prevEnd > start && nextEnd > start && prev[prevEnd - 1] === next[nextEnd - 1]) {
+    prevEnd -= 1;
+    nextEnd -= 1;
+  }
+  return { start, prevEnd, nextEnd };
+}
+
+interface GraphemePart {
+  index: number;
+  segment: string;
+}
+
+interface GraphemeSegmenter {
+  segment(input: string): Iterable<GraphemePart>;
+}
+
+/** Local shape so the build does not depend on the ES2022 Intl lib. */
+function graphemeSegmenter(): GraphemeSegmenter | null {
+  const intl = Intl as typeof Intl & {
+    Segmenter?: new (locales?: string, options?: { granularity?: 'grapheme' }) => GraphemeSegmenter;
+  };
+  if (typeof intl.Segmenter !== 'function') return null;
+  return new intl.Segmenter(undefined, { granularity: 'grapheme' });
+}
+
+export function graphemeBefore(text: string, offset: number): number {
+  if (offset <= 0) return 0;
+  const segmenter = graphemeSegmenter();
+  if (!segmenter) return offset - 1;
+  let last = 0;
+  for (const part of segmenter.segment(text.slice(0, offset))) last = part.index;
+  return last;
+}
+
+export function graphemeAfter(text: string, offset: number): number {
+  if (offset >= text.length) return text.length;
+  const segmenter = graphemeSegmenter();
+  if (!segmenter) return offset + 1;
+  const part = segmenter.segment(text.slice(offset))[Symbol.iterator]().next().value;
+  return offset + (part?.segment.length ?? 1);
+}