@solidev/data 1.1.0 → 1.1.2

package/fesm2022/solidev-data-richedit.mjs

@@ -1,9 +1,10 @@
 import * as i0 from '@angular/core';
-import { input, viewChild, inject, DestroyRef, afterNextRender, Component, signal, computed, EventEmitter, Output, Input, ChangeDetectionStrategy } from '@angular/core';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i2 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule } from '@angular/forms';
+import { input, viewChild, inject, DestroyRef, afterNextRender, Component, signal, computed } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import * as i1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FieldEditorBase, SafeHtmlPipe } from '@solidev/data';
 import { chainCommands, exitCode, toggleMark, baseKeymap, setBlockType, lift, wrapIn } from 'prosemirror-commands';
 import { redo, undo, history } from 'prosemirror-history';
 import { inputRules, wrappingInputRule, textblockTypeInputRule } from 'prosemirror-inputrules';
@@ -12,8 +13,6 @@ import { bulletList, orderedList, listItem, liftListItem, sinkListItem, splitLis
 import { PluginKey, Plugin, EditorState } from 'prosemirror-state';
 import { DecorationSet, Decoration, EditorView } from 'prosemirror-view';
 import { Schema, DOMParser, DOMSerializer } from 'prosemirror-model';
-import { uniqueId, asText, fieldValues } from '@solidev/data';
-import { firstValueFrom } from 'rxjs';
 
 /**
  * The document schema `richedit` stores and edits.
@@ -1114,7 +1113,8 @@ const RichEditToolbars = {
  * Shipped as a separate entry point (`@solidev/data/richedit`) so that the
  * `prosemirror-*` dependencies stay optional for consumers who do not need
  * them. It follows the same `dd` / `inline` / `form` layout convention as
- * `<data-dispedit>`, and can also stand in as the `quill` editor slot.
+ * `<data-dispedit>`, but is used directly rather than through it: `dispedit`
+ * lives in the primary entry point and cannot import a secondary one.
  *
  * The engine used to be `ngx-editor`, which stopped at Angular 19. The
  * replacement lives in `./prose` and speaks the same schema, so stored values
@@ -1131,156 +1131,48 @@ const RichEditToolbars = {
  * <data-richedit [model]="thing" field="description">Description</data-richedit>
  * ```
  */
-class RicheditComponent {
-    /** Model instance holding the field. */
-    /** Id tying the label to the editor. */
-    inputId = uniqueId('data-richedit');
-    model;
-    /** Name of the rich text field to edit. */
-    field;
-    /** Whether {@link toggleEdit} is allowed to enable editing. */
-    editable = true;
-    /** Whether the editor is currently enabled. Defaults to true. */
-    edit = true;
-    /**
-     * Layout, and whether {@link save} persists.
-     *
-     * `dd` renders a `<dt>`/`<dd>` block and is the only mode that saves to the
-     * API; `inline` and `form` render a label plus the editor and leave saving to
-     * the caller.
-     */
-    mode = 'dd';
-    /** Hide label (for inline forms) */
-    hideLabel = false;
-    /**
-     * Hide the built-in save button, for callers driving persistence themselves
-     * from the {@link changed} output.
-     */
-    hideButton = false;
-    /**
-     * Form control backing the editor.
-     *
-     * When supplied, the component uses it as-is and skips its own setup — no
-     * field manager lookup, no seeding from the model, and no {@link changed}
-     * emissions. When absent, one is created and wired up from `[model]` and
-     * `[field]`.
-     */
-    fc;
+class RicheditComponent extends FieldEditorBase {
     /** Toolbar preset name from {@link RichEditToolbars}, or an explicit toolbar. */
-    toolbar = 'default';
-    /** Emits the editor's HTML on every change. Only wired for an internal `fc`. */
-    changed = new EventEmitter();
-    /** Field manager for {@link field}; only resolved when `fc` is created here. */
-    manager;
-    /** Whether the manager declares the field required. */
-    required;
+    toolbar = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toolbar" }] : /* istanbul ignore next */ []));
     /** Underlying editor instance; destroyed with the component. */
     editor;
     /** Unused; kept for backwards compatibility. */
     html = '';
     /** Toolbar actually rendered, resolved from {@link toolbar}. */
-    realToolbar;
+    realToolbar = [];
+    destroyRef = inject(DestroyRef);
     /**
-     * Create the editor, resolve the toolbar, and — unless a `[fc]` was given —
-     * build a control seeded from the model field, enabled per `[edit]`, and
-     * relaying changes to {@link changed}.
+     * Build the engine and resolve the toolbar, then let the base resolve the
+     * control and relay its changes.
      */
     ngOnInit() {
         this.editor = new Editor();
-        if (this.toolbar === 'light' || this.toolbar === 'default') {
-            this.realToolbar = RichEditToolbars[this.toolbar];
-        }
-        else if (this.toolbar === 'none') {
-            // No toolbar at all: leave `realToolbar` undefined.
+        this.destroyRef.onDestroy(() => this.editor.destroy());
+        const toolbar = this.toolbar();
+        if (toolbar === 'none') {
+            this.realToolbar = [];
         }
-        else {
-            this.realToolbar = this.toolbar;
-        }
-        if (!this.fc) {
-            this.fc = new FormControl('');
-            if (this.model && this.field) {
-                this.manager = this.model.FM(this.field);
-                this.required = this.manager?.required || false;
-                this.fc.setValue(asText(fieldValues(this.model)[this.field]), {
-                    emitEvent: false,
-                });
-            }
-            if (this.edit) {
-                this.fc.enable();
-            }
-            else {
-                this.fc.disable();
-            }
-            this.fc.valueChanges.subscribe((v) => this.changed.emit(v));
-        }
-    }
-    /** Destroy the editor instance to release its resources. */
-    ngOnDestroy() {
-        this.editor.destroy();
-    }
-    /**
-     * Switch between read-only and editing by enabling or disabling the control.
-     * Forces read-only when `[editable]` is false.
-     */
-    toggleEdit() {
-        if (this.editable) {
-            if (this.edit) {
-                this.fc.disable();
-                this.edit = false;
-            }
-            else {
-                this.fc.enable();
-                this.edit = true;
-            }
+        else if (typeof toolbar === 'string') {
+            this.realToolbar = RichEditToolbars[toolbar] ?? [];
         }
         else {
-            this.fc.disable();
-            this.edit = false;
+            this.realToolbar = toolbar;
         }
-    }
-    /**
-     * Write the editor content back to the model field, and persist it in `dd`
-     * mode only.
-     *
-     * In `inline` / `form` modes the model is updated in memory but no request is
-     * sent, leaving the save to the surrounding form. Does nothing without both a
-     * `[model]` and a `[field]`.
-     */
-    async save() {
-        if (this.model && this.field) {
-            this.model.setFV(this.field, this.fc.value);
-            if (this.mode === 'dd') {
-                await firstValueFrom(this.model.update([this.field], { updateModel: true }));
-            }
+        super.ngOnInit();
+        if (!this.fc()) {
+            this.control.valueChanges
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe((value) => this.changed.emit(value));
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: RicheditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: RicheditComponent, isStandalone: true, selector: "data-richedit", inputs: { model: "model", field: "field", editable: "editable", edit: "edit", mode: "mode", hideLabel: "hideLabel", hideButton: "hideButton", fc: "fc", toolbar: "toolbar" }, outputs: { changed: "changed" }, ngImport: i0, template: "<ng-template #editorTemplate>\n  <div class=\"data-richedit__wrapper\">\n    @if (edit && toolbar !== \"none\") {\n      <data-richedit-menubar [editor]=\"editor\" [toolbar]=\"realToolbar\"></data-richedit-menubar>\n    }\n    <data-richedit-editor [editor]=\"editor\" [inputId]=\"inputId\" [formControl]=\"fc\"></data-richedit-editor>\n  </div>\n  @if (edit && !hideButton) {\n    <button class=\"btn btn-primary btn-sm w-100 mt-1\" (click)=\"save()\">\n      <i class=\"bi bi-save me-2\"></i>\n      Enregistrer\n    </button>\n  }\n</ng-template>\n<ng-template #titleTpl>\n  <ng-content></ng-content>\n</ng-template>\n<!-- Dd display-->\n@if (mode === \"dd\") {\n  @if (!hideLabel) {\n    <dt [class.required]=\"required\">\n      <span\n        class=\"editable\"\n        (click)=\"toggleEdit()\"\n        role=\"button\"\n        tabindex=\"0\"\n        (keydown.enter)=\"toggleEdit()\"\n        (keydown.space)=\"$event.preventDefault(); toggleEdit()\"\n      >\n        <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n      </span>\n    </dt>\n  }\n  <dd [class.mb-0]=\"hideLabel\">\n    <ng-container *ngTemplateOutlet=\"editorTemplate\"></ng-container>\n  </dd>\n}\n<!-- Inline display-->\n@if (mode === \"inline\") {\n  @if (!hideLabel) {\n    <label [class.required]=\"required\" [attr.for]=\"inputId\">\n      <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n    </label>\n  }\n  <ng-container *ngTemplateOutlet=\"editorTemplate\"></ng-container>\n}\n<!-- Form display-->\n@if (mode === \"form\") {\n  @if (!hideLabel) {\n    <label [class.required]=\"required\" [attr.for]=\"inputId\">\n      <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n    </label>\n  }\n  <ng-container *ngTemplateOutlet=\"editorTemplate\"></ng-container>\n}\n", styles: [".data-richedit__wrapper{border:var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);border-radius:var(--bs-border-radius, .375rem);background:var(--bs-body-bg, #fff);overflow:hidden}.data-richedit__wrapper:focus-within{border-color:var(--bs-primary-border-subtle, #86b7fe);box-shadow:0 0 0 .25rem rgba(var(--bs-primary-rgb, 13, 110, 253),.25)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: RicheditEditorComponent, selector: "data-richedit-editor", inputs: ["editor", "inputId"] }, { kind: "component", type: RicheditMenubarComponent, selector: "data-richedit-menubar", inputs: ["editor", "toolbar"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: RicheditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: RicheditComponent, isStandalone: true, selector: "data-richedit", inputs: { toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<ng-template #editorTemplate>\n  @if (!showEditor()) {\n    <!--\n      Read-only: the stored HTML, injected as trusted markup. See\n      SafeHtmlPipe for why it is not sanitized.\n    -->\n    <div\n      class=\"editable data-richedit__view\"\n      role=\"button\"\n      tabindex=\"0\"\n      (click)=\"toggleEdit()\"\n      (keydown.enter)=\"toggleEdit()\"\n      (keydown.space)=\"$event.preventDefault(); toggleEdit()\"\n      [innerHTML]=\"displayValue() | safeHtml\"\n    ></div>\n  } @else {\n    <div class=\"data-richedit__wrapper\">\n      @if (realToolbar.length) {\n        <data-richedit-menubar [editor]=\"editor\" [toolbar]=\"realToolbar\"></data-richedit-menubar>\n      }\n      <data-richedit-editor [editor]=\"editor\" [inputId]=\"inputId\" [formControl]=\"control\"></data-richedit-editor>\n    </div>\n    @if (!hideButton()) {\n      <button class=\"btn btn-primary btn-sm w-100 mt-1\" (click)=\"save()\">\n        <i class=\"bi bi-save me-2\"></i>\n        Enregistrer\n      </button>\n    }\n  }\n</ng-template>\n<ng-template #titleTpl>\n  <ng-content></ng-content>\n</ng-template>\n<!-- Dd display-->\n@if (mode() === \"dd\") {\n  @if (!hideLabel()) {\n    <dt [class.required]=\"required()\">\n      <span\n        class=\"editable\"\n        [attr.id]=\"labelId\"\n        (click)=\"toggleEdit()\"\n        role=\"button\"\n        tabindex=\"0\"\n        (keydown.enter)=\"toggleEdit()\"\n        (keydown.space)=\"$event.preventDefault(); toggleEdit()\"\n      >\n        <ng-container [ngTemplateOutlet]=\"titleTpl\"></ng-container>\n      </span>\n    </dt>\n  }\n  <dd [class.mb-0]=\"hideLabel()\">\n    <ng-container [ngTemplateOutlet]=\"editorTemplate\"></ng-container>\n  </dd>\n}\n<!-- Inline display-->\n@if (mode() === \"inline\") {\n  @if (!hideLabel()) {\n    <label [class.required]=\"required()\" [attr.id]=\"labelId\" [attr.for]=\"inputId\">\n      <ng-container [ngTemplateOutlet]=\"titleTpl\"></ng-container>\n    </label>\n  }\n  <ng-container [ngTemplateOutlet]=\"editorTemplate\"></ng-container>\n}\n<!-- Form display-->\n@if (mode() === \"form\") {\n  @if (!hideLabel()) {\n    <label [class.required]=\"required()\" [attr.id]=\"labelId\" [attr.for]=\"inputId\">\n      <ng-container [ngTemplateOutlet]=\"titleTpl\"></ng-container>\n    </label>\n  }\n  <ng-container [ngTemplateOutlet]=\"editorTemplate\"></ng-container>\n}\n", styles: [".data-richedit__wrapper{border:var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);border-radius:var(--bs-border-radius, .375rem);background:var(--bs-body-bg, #fff);overflow:hidden}.data-richedit__wrapper:focus-within{border-color:var(--bs-primary-border-subtle, #86b7fe);box-shadow:0 0 0 .25rem rgba(var(--bs-primary-rgb, 13, 110, 253),.25)}.data-richedit__view>*:first-child{margin-top:0}.data-richedit__view>*:last-child{margin-bottom:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: RicheditEditorComponent, selector: "data-richedit-editor", inputs: ["editor", "inputId"] }, { kind: "component", type: RicheditMenubarComponent, selector: "data-richedit-menubar", inputs: ["editor", "toolbar"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: RicheditComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'data-richedit', imports: [CommonModule, ReactiveFormsModule, RicheditEditorComponent, RicheditMenubarComponent], changeDetection: ChangeDetectionStrategy.Eager, template: "<ng-template #editorTemplate>\n  <div class=\"data-richedit__wrapper\">\n    @if (edit && toolbar !== \"none\") {\n      <data-richedit-menubar [editor]=\"editor\" [toolbar]=\"realToolbar\"></data-richedit-menubar>\n    }\n    <data-richedit-editor [editor]=\"editor\" [inputId]=\"inputId\" [formControl]=\"fc\"></data-richedit-editor>\n  </div>\n  @if (edit && !hideButton) {\n    <button class=\"btn btn-primary btn-sm w-100 mt-1\" (click)=\"save()\">\n      <i class=\"bi bi-save me-2\"></i>\n      Enregistrer\n    </button>\n  }\n</ng-template>\n<ng-template #titleTpl>\n  <ng-content></ng-content>\n</ng-template>\n<!-- Dd display-->\n@if (mode === \"dd\") {\n  @if (!hideLabel) {\n    <dt [class.required]=\"required\">\n      <span\n        class=\"editable\"\n        (click)=\"toggleEdit()\"\n        role=\"button\"\n        tabindex=\"0\"\n        (keydown.enter)=\"toggleEdit()\"\n        (keydown.space)=\"$event.preventDefault(); toggleEdit()\"\n      >\n        <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n      </span>\n    </dt>\n  }\n  <dd [class.mb-0]=\"hideLabel\">\n    <ng-container *ngTemplateOutlet=\"editorTemplate\"></ng-container>\n  </dd>\n}\n<!-- Inline display-->\n@if (mode === \"inline\") {\n  @if (!hideLabel) {\n    <label [class.required]=\"required\" [attr.for]=\"inputId\">\n      <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n    </label>\n  }\n  <ng-container *ngTemplateOutlet=\"editorTemplate\"></ng-container>\n}\n<!-- Form display-->\n@if (mode === \"form\") {\n  @if (!hideLabel) {\n    <label [class.required]=\"required\" [attr.for]=\"inputId\">\n      <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n    </label>\n  }\n  <ng-container *ngTemplateOutlet=\"editorTemplate\"></ng-container>\n}\n", styles: [".data-richedit__wrapper{border:var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);border-radius:var(--bs-border-radius, .375rem);background:var(--bs-body-bg, #fff);overflow:hidden}.data-richedit__wrapper:focus-within{border-color:var(--bs-primary-border-subtle, #86b7fe);box-shadow:0 0 0 .25rem rgba(var(--bs-primary-rgb, 13, 110, 253),.25)}\n"] }]
-        }], propDecorators: { model: [{
-                type: Input
-            }], field: [{
-                type: Input
-            }], editable: [{
-                type: Input
-            }], edit: [{
-                type: Input
-            }], mode: [{
-                type: Input
-            }], hideLabel: [{
-                type: Input
-            }], hideButton: [{
-                type: Input
-            }], fc: [{
-                type: Input
-            }], toolbar: [{
-                type: Input
-            }], changed: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'data-richedit', imports: [NgTemplateOutlet, ReactiveFormsModule, RicheditEditorComponent, RicheditMenubarComponent, SafeHtmlPipe], template: "<ng-template #editorTemplate>\n  @if (!showEditor()) {\n    <!--\n      Read-only: the stored HTML, injected as trusted markup. See\n      SafeHtmlPipe for why it is not sanitized.\n    -->\n    <div\n      class=\"editable data-richedit__view\"\n      role=\"button\"\n      tabindex=\"0\"\n      (click)=\"toggleEdit()\"\n      (keydown.enter)=\"toggleEdit()\"\n      (keydown.space)=\"$event.preventDefault(); toggleEdit()\"\n      [innerHTML]=\"displayValue() | safeHtml\"\n    ></div>\n  } @else {\n    <div class=\"data-richedit__wrapper\">\n      @if (realToolbar.length) {\n        <data-richedit-menubar [editor]=\"editor\" [toolbar]=\"realToolbar\"></data-richedit-menubar>\n      }\n      <data-richedit-editor [editor]=\"editor\" [inputId]=\"inputId\" [formControl]=\"control\"></data-richedit-editor>\n    </div>\n    @if (!hideButton()) {\n      <button class=\"btn btn-primary btn-sm w-100 mt-1\" (click)=\"save()\">\n        <i class=\"bi bi-save me-2\"></i>\n        Enregistrer\n      </button>\n    }\n  }\n</ng-template>\n<ng-template #titleTpl>\n  <ng-content></ng-content>\n</ng-template>\n<!-- Dd display-->\n@if (mode() === \"dd\") {\n  @if (!hideLabel()) {\n    <dt [class.required]=\"required()\">\n      <span\n        class=\"editable\"\n        [attr.id]=\"labelId\"\n        (click)=\"toggleEdit()\"\n        role=\"button\"\n        tabindex=\"0\"\n        (keydown.enter)=\"toggleEdit()\"\n        (keydown.space)=\"$event.preventDefault(); toggleEdit()\"\n      >\n        <ng-container [ngTemplateOutlet]=\"titleTpl\"></ng-container>\n      </span>\n    </dt>\n  }\n  <dd [class.mb-0]=\"hideLabel()\">\n    <ng-container [ngTemplateOutlet]=\"editorTemplate\"></ng-container>\n  </dd>\n}\n<!-- Inline display-->\n@if (mode() === \"inline\") {\n  @if (!hideLabel()) {\n    <label [class.required]=\"required()\" [attr.id]=\"labelId\" [attr.for]=\"inputId\">\n      <ng-container [ngTemplateOutlet]=\"titleTpl\"></ng-container>\n    </label>\n  }\n  <ng-container [ngTemplateOutlet]=\"editorTemplate\"></ng-container>\n}\n<!-- Form display-->\n@if (mode() === \"form\") {\n  @if (!hideLabel()) {\n    <label [class.required]=\"required()\" [attr.id]=\"labelId\" [attr.for]=\"inputId\">\n      <ng-container [ngTemplateOutlet]=\"titleTpl\"></ng-container>\n    </label>\n  }\n  <ng-container [ngTemplateOutlet]=\"editorTemplate\"></ng-container>\n}\n", styles: [".data-richedit__wrapper{border:var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);border-radius:var(--bs-border-radius, .375rem);background:var(--bs-body-bg, #fff);overflow:hidden}.data-richedit__wrapper:focus-within{border-color:var(--bs-primary-border-subtle, #86b7fe);box-shadow:0 0 0 .25rem rgba(var(--bs-primary-rgb, 13, 110, 253),.25)}.data-richedit__view>*:first-child{margin-top:0}.data-richedit__view>*:last-child{margin-bottom:0}\n"] }]
+        }], propDecorators: { toolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbar", required: false }] }] } });
 
 /**
  * Toolbar configuration for `<data-richedit>`.