@area8975/ui 0.2.2-dev.46 → 0.2.2-dev.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@area8975/ui",
-  "version": "0.2.2-dev.46",
+  "version": "0.2.2-dev.48",
   "peerDependencies": {
     "@angular/common": "^22.0.0",
     "@angular/core": "^22.0.0",
@@ -8,6 +8,10 @@
     "@ng-icons/core": "^35.0.1",
     "@ng-icons/heroicons": "^35.0.1",
     "@tailwindcss/forms": "^0.5.11",
+    "@tiptap/core": "^3.32.2",
+    "@tiptap/extensions": "^3.32.2",
+    "@tiptap/pm": "^3.32.2",
+    "@tiptap/starter-kit": "^3.32.2",
     "apexcharts": "^4.7.0",
     "preline": "^4.2.0",
     "rxjs": "~7.8.0",

package/types/area8975-ui.d.ts

@@ -1,6 +1,7 @@
 import * as i0 from "@angular/core";
 import { ElementRef, EnvironmentProviders, InjectionToken, OnDestroy, OnInit, Provider, Signal, TemplateRef, WritableSignal } from "@angular/core";
 import ApexCharts$1 from "apexcharts";
+import { ChainedCommands, Editor } from "@tiptap/core";
 import { Placement } from "@floating-ui/dom";
 import { Observable } from "rxjs";
 import { IconType } from "@ng-icons/core";
@@ -1486,6 +1487,156 @@ export declare class UiRadioComponent<ValueType = unknown> {
     "validationState": "validationStateChange";
   }, never, never, true, never>;
 }
+/**
+ * Every tool the editor's toolbar can show. Leaving a formatting tool out of
+ * `tools` also turns that formatting off - its shortcut stops working and
+ * pasted content loses it - so the value only ever holds what the toolbar offers.
+ * `undo` and `redo` only control the buttons; history and its shortcuts are always on.
+ */
+export declare const RichTextTools: readonly ["bold", "italic", "underline", "strike", "code", "heading1", "heading2", "heading3", "bulletList", "orderedList", "blockquote", "codeBlock", "horizontalRule", "link", "undo", "redo"];
+/** @see {@link RichTextTools} */
+export type RichTextTool = typeof RichTextTools[number];
+/** The toolbar's groups, in order, with a divider drawn between each. */
+export declare const RichTextToolGroups: readonly (readonly RichTextTool[])[];
+/** true is valid, false is invalid, null is not yet validated. */
+export type RichTextEditorValidation = boolean | null;
+interface ToolDefinition {
+  label: string;
+  icon: string;
+  /** Whether the tool is "on" at the cursor. Tools without it aren't toggles. */
+  active?: (editor: Editor) => boolean;
+  run: (chain: ChainedCommands) => ChainedCommands;
+}
+/**
+ * A WYSIWYG editor whose value is an HTML string, with a toolbar of formatting tools.
+ */
+export declare class UiRichTextEditorComponent {
+  /** The content as HTML. An empty editor is `''`. */
+  readonly value: import("@angular/core").ModelSignal<string>;
+  readonly classes: import("@angular/core").InputSignal<string>;
+  /** Which toolbar tools to show, and so which formatting is allowed. @see {@link RichTextTools} */
+  readonly tools: import("@angular/core").InputSignal<readonly ("blockquote" | "code" | "link" | "strike" | "bold" | "italic" | "underline" | "heading1" | "heading2" | "heading3" | "bulletList" | "orderedList" | "codeBlock" | "horizontalRule" | "undo" | "redo")[]>;
+  readonly id: import("@angular/core").InputSignal<string>;
+  readonly placeholder: import("@angular/core").InputSignal<string>;
+  readonly required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** true/false shows valid/invalid styling. null means not validated yet. */
+  readonly validationState: import("@angular/core").ModelSignal<RichTextEditorValidation>;
+  readonly spellcheck: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  readonly describedBy: import("@angular/core").InputSignal<string>;
+  readonly focused: import("@angular/core").OutputEmitterRef<FocusEvent>;
+  readonly blurred: import("@angular/core").OutputEmitterRef<FocusEvent>;
+  private readonly injector;
+  private readonly host;
+  private readonly content;
+  private readonly editor;
+  /** Bumped on every editor transaction, so toolbar state re-reads the editor. */
+  private readonly revision;
+  /** The HTML the editor last held, to tell our own updates from outside ones. */
+  private lastHtml;
+  protected readonly contentId: string;
+  protected readonly linkInputId: string;
+  protected readonly linkOpen: import("@angular/core").WritableSignal<boolean>;
+  protected readonly linkHref: import("@angular/core").WritableSignal<string>;
+  /** Index of the toolbar button that takes the toolbar's single tab stop. */
+  protected readonly focusIndex: import("@angular/core").WritableSignal<number>;
+  protected readonly editable: import("@angular/core").Signal<boolean>;
+  protected readonly toolGroups: import("@angular/core").Signal<("blockquote" | "code" | "link" | "strike" | "bold" | "italic" | "underline" | "heading1" | "heading2" | "heading3" | "bulletList" | "orderedList" | "codeBlock" | "horizontalRule" | "undo" | "redo")[][]>;
+  protected readonly flatTools: import("@angular/core").Signal<("blockquote" | "code" | "link" | "strike" | "bold" | "italic" | "underline" | "heading1" | "heading2" | "heading3" | "bulletList" | "orderedList" | "codeBlock" | "horizontalRule" | "undo" | "redo")[]>;
+  protected readonly showToolbar: import("@angular/core").Signal<boolean>;
+  /** Per tool: whether it's on at the cursor, and whether it can run right now. */
+  protected readonly toolState: import("@angular/core").Signal<Record<"blockquote" | "code" | "link" | "strike" | "bold" | "italic" | "underline" | "heading1" | "heading2" | "heading3" | "bulletList" | "orderedList" | "codeBlock" | "horizontalRule" | "undo" | "redo", {
+    active: boolean;
+    enabled: boolean;
+  }>>;
+  protected readonly generatedClasses: import("@angular/core").Signal<string>;
+  /** Attributes for the contenteditable element, which Tiptap renders. */
+  private readonly contentAttributes;
+  /** Each tool left out of `tools` switches its extension off. */
+  private readonly extensions;
+  constructor();
+  protected toolDefinition(tool: RichTextTool): ToolDefinition;
+  protected readonly runTool: (tool: RichTextTool) => void;
+  /** Arrow keys move between toolbar buttons, so the toolbar is one tab stop. */
+  protected readonly onToolbarKeydown: (event: KeyboardEvent) => void;
+  protected readonly openLink: () => void;
+  protected readonly applyLink: () => void;
+  protected readonly removeLink: () => void;
+  protected readonly closeLink: () => void;
+  protected readonly onLinkKeydown: (event: KeyboardEvent) => void;
+  private createEditor;
+  private htmlOf;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiRichTextEditorComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiRichTextEditorComponent, "ui-rich-text-editor", never, {
+    "value": {
+      "alias": "value";
+      "required": true;
+      "isSignal": true;
+    };
+    "classes": {
+      "alias": "classes";
+      "required": false;
+      "isSignal": true;
+    };
+    "tools": {
+      "alias": "tools";
+      "required": false;
+      "isSignal": true;
+    };
+    "id": {
+      "alias": "id";
+      "required": false;
+      "isSignal": true;
+    };
+    "placeholder": {
+      "alias": "placeholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "required": {
+      "alias": "required";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "readonly": {
+      "alias": "readonly";
+      "required": false;
+      "isSignal": true;
+    };
+    "validationState": {
+      "alias": "validationState";
+      "required": false;
+      "isSignal": true;
+    };
+    "spellcheck": {
+      "alias": "spellcheck";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "describedBy": {
+      "alias": "describedBy";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+    "validationState": "validationStateChange";
+    "focused": "focused";
+    "blurred": "blurred";
+  }, never, never, true, never>;
+}
 /** Defines if and when a `ui-overlay` should close when the user clicks. */
 export type UiOverlayCloseBehaviour = 'none' | 'whenClickOutside' | 'whenClickAnywhere';
 export interface UiOverlayOptions {
@@ -1966,7 +2117,7 @@ export type AvatarSize = typeof AvatarSizes[number];
 export declare class UiBadgeComponent {
   readonly appearance: import("@angular/core").InputSignal<"solid" | "outline" | "soft">;
   readonly intent: import("@angular/core").InputSignal<"primary" | "secondary" | "success" | "warning" | "danger">;
-  readonly size: import("@angular/core").InputSignal<"xs" | "sm" | "md" | "lg">;
+  readonly size: import("@angular/core").InputSignal<"sm" | "md" | "lg" | "xs">;
   readonly generatedClasses: import("@angular/core").Signal<string>;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiBadgeComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<UiBadgeComponent, "ui-badge", never, {
@@ -2001,7 +2152,7 @@ export declare class UiButtonComponent {
   readonly intent: import("@angular/core").InputSignal<"none" | "primary" | "secondary" | "success" | "warning" | "danger">;
   readonly size: import("@angular/core").InputSignal<"sm" | "md" | "lg">;
   readonly classes: import("@angular/core").InputSignal<string>;
-  readonly type: import("@angular/core").InputSignal<"button" | "reset" | "submit">;
+  readonly type: import("@angular/core").InputSignal<"button" | "submit" | "reset">;
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
   readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   readonly loading: import("@angular/core").InputSignalWithTransform<boolean, unknown>;