@richscripts/richtexteditor 2.4.0

package/angular/component.ts

@@ -0,0 +1,284 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Output,
+  SimpleChanges,
+  ViewChild
+} from "@angular/core";
+import type {
+  RichTextEditorAccessibilityResult,
+  RichTextEditorAiToolkit,
+  RichTextEditorCollab,
+  RichTextEditorComments,
+  RichTextEditorDictation,
+  RichTextEditorDocumentMetrics,
+  RichTextEditorDocumentOutlineItem,
+  RichTextEditorFootnoteItem,
+  RichTextEditorInstance,
+  RichTextEditorMentions,
+  RichTextEditorPageSetup,
+  RichTextEditorReviewLedger,
+  RichTextEditorRevisionHistory,
+  RichTextEditorSlashCommands,
+  RichTextEditorStructuredDocument,
+  RichTextEditorStructuredInput,
+  RichTextEditorTableOfContentsItem,
+  RichTextEditorTableOfContentsOptions,
+  RichTextEditorTextStatistics,
+  RichTextEditorValueFormat
+} from "../index";
+import * as shared from "../integrations/shared";
+
+export interface RichTextEditorAngularChangeEvent {
+  editor: RichTextEditorInstance;
+  value: string | RichTextEditorStructuredDocument;
+}
+
+@Component({
+  selector: "rich-text-editor",
+  standalone: true,
+  template: '<div #host class="rte-angular-host"></div>',
+  styles: [`
+    :host {
+      display: block;
+      min-height: 360px;
+    }
+
+    .rte-angular-host {
+      min-height: 360px;
+    }
+  `]
+})
+export class RichTextEditorAngularComponent implements AfterViewInit, OnChanges, OnDestroy {
+  @Input() assetBasePath = "/richtexteditor";
+  @Input() autoload = true;
+  @Input() config: Record<string, unknown> = {};
+  @Input() value?: RichTextEditorStructuredInput;
+  @Input() valueFormat: RichTextEditorValueFormat = "html";
+
+  @Output() change = new EventEmitter<RichTextEditorAngularChangeEvent>();
+  @Output() error = new EventEmitter<Error>();
+  @Output() ready = new EventEmitter<RichTextEditorInstance>();
+
+  @ViewChild("host", { static: true }) hostRef!: ElementRef<HTMLDivElement>;
+
+  private changeHandler: (() => void) | null = null;
+  private editor: RichTextEditorInstance | null = null;
+
+  async ngAfterViewInit(): Promise<void> {
+    try {
+      if (this.autoload === false) {
+        shared.installStructuredContentBridge();
+      } else {
+        await shared.loadRichTextEditorAssets({ basePath: this.assetBasePath });
+      }
+
+      this.editor = shared.createEditor(this.hostRef.nativeElement, this.config || {});
+
+      if (this.value !== undefined) {
+        this.syncEditor(this.value);
+      }
+
+      this.changeHandler = () => {
+        if (!this.editor) {
+          return;
+        }
+
+        this.change.emit({
+          editor: this.editor,
+          value: shared.getEditorValue(this.editor, this.valueFormat)
+        });
+      };
+
+      this.editor.attachEvent("change", this.changeHandler);
+      this.ready.emit(this.editor);
+    } catch (loadError) {
+      this.error.emit(loadError as Error);
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (!this.editor) {
+      return;
+    }
+
+    if (changes["value"] || changes["valueFormat"]) {
+      this.syncEditor(this.value);
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.editor) {
+      if (this.changeHandler && typeof this.editor.detachEvent === "function") {
+        this.editor.detachEvent("change", this.changeHandler);
+      }
+      // Tear down instance-level global listeners so unmounting doesn't leak.
+      if (typeof this.editor.destroy === "function") {
+        try { this.editor.destroy(); } catch (e) { /* ignore */ }
+      }
+    }
+
+    this.hostRef.nativeElement.innerHTML = "";
+    this.editor = null;
+    this.changeHandler = null;
+  }
+
+  focus(): void {
+    if (this.editor) {
+      this.editor.focus();
+    }
+  }
+
+  getEditor(): RichTextEditorInstance | null {
+    return this.editor;
+  }
+
+  getHTMLCode(): string {
+    return this.editor ? this.editor.getHTMLCode() : "";
+  }
+
+  setHTMLCode(value: string): void {
+    if (this.editor) {
+      this.editor.setHTMLCode(value || "");
+    }
+  }
+
+  getJSON(): RichTextEditorStructuredDocument | null {
+    return this.editor ? this.editor.getJSON() : null;
+  }
+
+  setJSON(value: RichTextEditorStructuredInput): void {
+    if (this.editor) {
+      this.editor.setJSON(value);
+    }
+  }
+
+  getTextStatistics(): RichTextEditorTextStatistics | null {
+    if (!this.editor || typeof this.editor.getTextStatistics !== "function") {
+      return null;
+    }
+    return this.editor.getTextStatistics();
+  }
+
+  getSelectionStatistics(): RichTextEditorTextStatistics | null {
+    if (!this.editor || typeof this.editor.getSelectionStatistics !== "function") {
+      return null;
+    }
+    return this.editor.getSelectionStatistics();
+  }
+
+  getDocumentMetrics(): RichTextEditorDocumentMetrics | null {
+    if (!this.editor || typeof this.editor.getDocumentMetrics !== "function") {
+      return null;
+    }
+    return this.editor.getDocumentMetrics();
+  }
+
+  getDocumentPageSetup(): RichTextEditorPageSetup | null {
+    if (!this.editor || typeof this.editor.getDocumentPageSetup !== "function") {
+      return null;
+    }
+    return this.editor.getDocumentPageSetup();
+  }
+
+  setDocumentPageSetup(pageSetup: RichTextEditorPageSetup | null): RichTextEditorAngularComponent | null {
+    if (!this.editor || typeof this.editor.setDocumentPageSetup !== "function") {
+      return null;
+    }
+    this.editor.setDocumentPageSetup(pageSetup);
+    return this;
+  }
+
+  getDocumentOutline(): RichTextEditorDocumentOutlineItem[] {
+    if (!this.editor) {
+      return [];
+    }
+    return shared.getDocumentOutline(this.editor.getJSON());
+  }
+
+  getFootnotes(): RichTextEditorFootnoteItem[] {
+    if (!this.editor) {
+      return [];
+    }
+    return shared.getFootnotes(this.editor.getJSON());
+  }
+
+  getTableOfContents(options?: RichTextEditorTableOfContentsOptions): RichTextEditorTableOfContentsItem[] {
+    if (!this.editor) {
+      return [];
+    }
+    return shared.getTableOfContents(this.editor.getJSON(), options);
+  }
+
+  syncTableOfContents(options?: RichTextEditorTableOfContentsOptions): RichTextEditorStructuredDocument | null {
+    if (!this.editor) {
+      return null;
+    }
+    var documentModel = shared.syncTableOfContents(this.editor.getJSON(), options);
+    this.editor.setJSON(documentModel);
+    return documentModel;
+  }
+
+  auditAccessibility(): RichTextEditorAccessibilityResult | null {
+    if (!this.editor) {
+      return null;
+    }
+    return shared.auditAccessibility(this.editor.getJSON());
+  }
+
+  getAiToolkit(): RichTextEditorAiToolkit | null | undefined {
+    return this.getPluginNamespace("aiToolkit");
+  }
+
+  getDictation(): RichTextEditorDictation | null | undefined {
+    return this.getPluginNamespace("dictation");
+  }
+
+  getRevisionHistory(): RichTextEditorRevisionHistory | null | undefined {
+    return this.getPluginNamespace("revisionHistory");
+  }
+
+  getCollab(): RichTextEditorCollab | null | undefined {
+    return this.getPluginNamespace("collab");
+  }
+
+  getSlashCommands(): RichTextEditorSlashCommands | null | undefined {
+    return this.getPluginNamespace("slashCommands");
+  }
+
+  getMentions(): RichTextEditorMentions | null | undefined {
+    return this.getPluginNamespace("mentions");
+  }
+
+  getComments(): RichTextEditorComments | null | undefined {
+    return this.getPluginNamespace("comments");
+  }
+
+  getReviewLedger(): RichTextEditorReviewLedger | null | undefined {
+    return this.getPluginNamespace("reviewLedger");
+  }
+
+  private getPluginNamespace<T>(name: string): T | null | undefined {
+    if (!this.editor) {
+      return null;
+    }
+
+    return (this.editor as unknown as Record<string, T | undefined>)[name];
+  }
+
+  private syncEditor(nextValue: RichTextEditorStructuredInput | undefined): void {
+    if (!this.editor || nextValue === undefined) {
+      return;
+    }
+
+    var nextHtml = shared.normalizeStructuredContent(nextValue);
+    if (this.editor.getHTMLCode() !== nextHtml) {
+      shared.setEditorValue(this.editor, nextValue, this.valueFormat);
+    }
+  }
+}

package/angular/index.d.ts

@@ -0,0 +1,80 @@
+import type {
+  RichTextEditorAccessibilityResult,
+  RichTextEditorAiToolkit,
+  RichTextEditorCollab,
+  RichTextEditorComments,
+  RichTextEditorDictation,
+  RichTextEditorDocumentMetrics,
+  RichTextEditorDocumentOutlineItem,
+  RichTextEditorFootnoteItem,
+  RichTextEditorInstance,
+  RichTextEditorMentions,
+  RichTextEditorPageSetup,
+  RichTextEditorReviewLedger,
+  RichTextEditorRevisionHistory,
+  RichTextEditorSlashCommands,
+  RichTextEditorStructuredDocument,
+  RichTextEditorStructuredInput,
+  RichTextEditorTableOfContentsItem,
+  RichTextEditorTableOfContentsOptions,
+  RichTextEditorTextStatistics,
+  RichTextEditorValueFormat
+} from "../index";
+
+export interface RichTextEditorAngularChangeEvent {
+  editor: RichTextEditorInstance;
+  value: string | RichTextEditorStructuredDocument;
+}
+
+export declare class RichTextEditorAngularComponent {
+  assetBasePath: string;
+  autoload: boolean;
+  config: Record<string, unknown>;
+  value?: RichTextEditorStructuredInput;
+  valueFormat: RichTextEditorValueFormat;
+
+  focus(): void;
+  getEditor(): RichTextEditorInstance | null;
+  getHTMLCode(): string;
+  setHTMLCode(value: string): void;
+  getJSON(): RichTextEditorStructuredDocument | null;
+  setJSON(value: RichTextEditorStructuredInput): void;
+  getTextStatistics(): RichTextEditorTextStatistics | null;
+  getSelectionStatistics(): RichTextEditorTextStatistics | null;
+  getDocumentMetrics(): RichTextEditorDocumentMetrics | null;
+  getDocumentPageSetup(): RichTextEditorPageSetup | null;
+  setDocumentPageSetup(pageSetup: RichTextEditorPageSetup | null): RichTextEditorAngularComponent | null;
+  getDocumentOutline(): RichTextEditorDocumentOutlineItem[];
+  getFootnotes(): RichTextEditorFootnoteItem[];
+  getTableOfContents(options?: RichTextEditorTableOfContentsOptions): RichTextEditorTableOfContentsItem[];
+  syncTableOfContents(options?: RichTextEditorTableOfContentsOptions): RichTextEditorStructuredDocument | null;
+  auditAccessibility(): RichTextEditorAccessibilityResult | null;
+
+  getAiToolkit(): RichTextEditorAiToolkit | null | undefined;
+  getDictation(): RichTextEditorDictation | null | undefined;
+  getRevisionHistory(): RichTextEditorRevisionHistory | null | undefined;
+  getCollab(): RichTextEditorCollab | null | undefined;
+  getSlashCommands(): RichTextEditorSlashCommands | null | undefined;
+  getMentions(): RichTextEditorMentions | null | undefined;
+  getComments(): RichTextEditorComments | null | undefined;
+  getReviewLedger(): RichTextEditorReviewLedger | null | undefined;
+}
+
+export {
+  auditAccessibility,
+  createStructuredContent,
+  createStructuredDocument,
+  fromMarkdown,
+  getDocumentPageSetup,
+  getDocumentMetrics,
+  getDocumentOutline,
+  getFootnotes,
+  getTableOfContents,
+  getTextStatistics,
+  loadRichTextEditorAssets,
+  renderHTML,
+  setDocumentPageSetup,
+  syncTableOfContents,
+  toMarkdown,
+  validateStructuredContent
+} from "../integrations/shared";

package/angular/index.ts

@@ -0,0 +1,24 @@
+export {
+  RichTextEditorAngularComponent,
+  type RichTextEditorAngularChangeEvent
+} from "./component";
+
+export {
+  auditAccessibility,
+  auditLinks,
+  createStructuredContent,
+  createStructuredDocument,
+  fromMarkdown,
+  getDocumentPageSetup,
+  getDocumentMetrics,
+  getDocumentOutline,
+  getFootnotes,
+  getTableOfContents,
+  getTextStatistics,
+  loadRichTextEditorAssets,
+  renderHTML,
+  setDocumentPageSetup,
+  syncTableOfContents,
+  toMarkdown,
+  validateStructuredContent
+} from "../integrations/shared";

package/headless/index.d.ts

@@ -0,0 +1,65 @@
+// Type definitions for richtexteditor/headless
+
+export interface HeadlessEditorOptions {
+  /** Initial HTML content. */
+  value?: string;
+  /** Partial RichTextEditor config, merged over the default config. */
+  config?: Record<string, any>;
+  /** Keep the word/character status counter (off by default in headless mode). */
+  showStatistics?: boolean;
+  /** Base path used to load rte.js + assets. Defaults to "/richtexteditor". */
+  assetBasePath?: string;
+  /** Skip asset auto-loading (assets already present on the page). */
+  autoload?: boolean;
+}
+
+export type HeadlessFormat =
+  | "bold" | "italic" | "underline" | "strike" | "strikethrough"
+  | "subscript" | "superscript" | "ul" | "ol"
+  | "justifyleft" | "justifycenter" | "justifyright" | "justifyfull"
+  | "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
+  | "p" | "paragraph" | "blockquote" | "pre";
+
+export interface HeadlessState {
+  [key: string]: boolean;
+  canUndo: boolean;
+  canRedo: boolean;
+}
+
+export type HeadlessEventName = "update" | "change" | "selectionchange" | "focus" | "blur";
+
+export interface HeadlessController {
+  /** The underlying RichTextEditor instance (escape hatch). */
+  readonly editor: any;
+  /** Dispatch a command. Block types use run("formatblock", "h1"). Chainable. */
+  run(command: string, value?: string): this;
+  cmd(command: string, value?: string): this;
+  /** Is a format active at the current selection? */
+  isActive(name: HeadlessFormat | string): boolean;
+  /** Is a command currently enabled (e.g. "undo")? */
+  can(command: string): boolean;
+  /** Snapshot of active formatting (+ canUndo/canRedo) for binding a toolbar. */
+  state(keys?: string[]): HeadlessState;
+  on(event: HeadlessEventName, cb: (...args: any[]) => void): this;
+  off(event: HeadlessEventName, cb?: (...args: any[]) => void): this;
+  getHTML(): string;
+  setHTML(html: string): this;
+  getText(): string;
+  setText(text: string): this;
+  getMarkdown(): string;
+  setMarkdown(markdown: string): this;
+  getJSON(): any;
+  getStatistics(): { words: number; characters: number } | null;
+  isEmpty(): boolean;
+  focus(): this;
+  destroy(): this;
+}
+
+/** Load assets, mount a chrome-less editor, and resolve to a controller. */
+export function createHeadlessEditor(
+  element: string | HTMLElement,
+  options?: HeadlessEditorOptions
+): Promise<HeadlessController>;
+
+export const STATE_MAP: Record<string, { kind: "state" | "block"; q: string }>;
+export const DEFAULT_STATE_KEYS: string[];