valtech-components 4.0.972 → 4.0.974

package/fesm2022/valtech-components.mjs

@@ -70,7 +70,7 @@ import fixWebmDuration from 'fix-webm-duration';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '4.0.972';
+const VERSION = '4.0.974';
 
 function evaluateValtechAccess(rule, context, features = {}, visitedFeatures = new Set()) {
     if (rule == null)
@@ -5702,15 +5702,20 @@ class StorageService {
      * Elimina un archivo.
      *
      * @param path - Ruta del archivo a eliminar
+     * @param options.skipPrefix - Si es true, no aplica el prefix de appId (para
+     *   borrar un archivo subido con `uploadAndGetUrl(path, file, { skipPrefix:
+     *   true })` hay que pasar el mismo flag, o el path queda mal armado y el
+     *   delete falla contra un objeto que no existe).
      *
      * @example
      * ```typescript
      * await storage.delete('images/old-photo.jpg');
+     * await storage.delete('apps/merotz/orgs/x/public/images/parts/y/z.png', { skipPrefix: true });
      * ```
      */
-    async delete(path) {
+    async delete(path, options) {
         try {
-            const prefixedPath = this.prefixStoragePath(path);
+            const prefixedPath = this.prefixStoragePath(path, options?.skipPrefix);
             const storageRef = ref(this.storage, prefixedPath);
             await deleteObject(storageRef);
         }
@@ -39420,6 +39425,7 @@ const RICH_EDITOR_I18N = {
         orderedList: 'Lista numerada',
         quote: 'Cita',
         separator: 'Separador',
+        image: 'Insertar imagen',
     },
     en: {
         bold: 'Bold',
@@ -39430,6 +39436,7 @@ const RICH_EDITOR_I18N = {
         orderedList: 'Numbered list',
         quote: 'Quote',
         separator: 'Separator',
+        image: 'Insert image',
     },
 };
 
@@ -39682,7 +39689,7 @@ function articleToTiptapDoc(article) {
 // Íconos de la toolbar. B/I/H2/H3 no tienen ícono Ionicons dedicado — se
 // renderizan como texto ("B", "I", "H2", "H3") directo en el botón, mismo
 // criterio que un editor de texto rico convencional (Google Docs, Notion).
-addIcons({ listOutline, chatboxOutline, removeOutline });
+addIcons({ listOutline, chatboxOutline, removeOutline, imageOutline });
 /**
  * val-rich-editor
  *
@@ -39708,11 +39715,13 @@ class RichEditorComponent {
         this.props = {};
         this.articleChange = new EventEmitter();
         this.i18n = inject(I18nService);
+        this.injector = inject(Injector);
         /** Se recalcula en cada `onUpdate`/`onSelectionUpdate` para reflejar el
          * mark/nodo activo bajo el cursor (ej. el botón "B" resaltado si el
          * cursor está dentro de texto en negrita). */
         this._toolbarTick = signal(0);
         this.toolbarButtons = signal([]);
+        this.uploadingImage = signal(false);
         this.i18n.registerDefaults('RichEditor', RICH_EDITOR_I18N);
     }
     t(key) {
@@ -39843,6 +39852,36 @@ class RichEditorComponent {
         }
         this.refreshToolbar();
     }
+    /**
+     * Sube la imagen elegida vía `StorageService` (Regla #12 — nunca URL pegada
+     * a mano, siempre vía Storage) y la inserta en el punto del cursor.
+     * `StorageService` se resuelve perezosamente (vía `Injector`, no como
+     * campo de la clase): si la app consumer no configuró
+     * `provideValtechFirebase`, el editor sigue funcionando normal para todo
+     * lo demás — solo el botón de imagen queda sin efecto, con log de error en
+     * vez de romper el resto del componente.
+     */
+    async onImageSelected(event) {
+        const input = event.target;
+        const file = input.files?.[0];
+        input.value = ''; // permite re-seleccionar el mismo archivo después
+        if (!file || !this.editor)
+            return;
+        this.uploadingImage.set(true);
+        try {
+            const storage = this.injector.get(StorageService);
+            const path = `rich-editor/${Date.now()}-${file.name}`;
+            const result = await storage.uploadAndGetUrl(path, file);
+            this.editor.chain().focus().setImage({ src: result.downloadUrl, alt: file.name }).run();
+            this.emitArticle(this.editor.getJSON());
+        }
+        catch (err) {
+            console.error('[val-rich-editor] No se pudo subir la imagen — ¿la app configuró provideValtechFirebase?', err);
+        }
+        finally {
+            this.uploadingImage.set(false);
+        }
+    }
     ngOnDestroy() {
         this.editor?.destroy();
     }
@@ -39889,15 +39928,30 @@ class RichEditorComponent {
               }
             </ion-button>
           }
+          <!-- Label trick (mismo patrón que val-attachment-uploader): el
+               <label> nativo reenvía el clic al input como gesto confiable,
+               ion-button + input.click() programático falla en iOS PWA. -->
+          <label
+            class="rich-editor__image-btn"
+            [class.rich-editor__image-btn--disabled]="uploadingImage()"
+            [attr.aria-label]="t('image')"
+          >
+            @if (uploadingImage()) {
+              <ion-spinner name="dots" />
+            } @else {
+              <ion-icon name="image-outline" />
+            }
+            <input type="file" accept="image/*" [disabled]="uploadingImage()" (change)="onImageSelected($event)" />
+          </label>
         </div>
       }
       <div #editorHost class="rich-editor__surface"></div>
     </div>
-  `, isInline: true, styles: [".rich-editor{display:flex;flex-direction:column;gap:8px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:8px;overflow:hidden}.rich-editor--disabled{opacity:.7}.rich-editor__toolbar{display:flex;flex-wrap:wrap;gap:2px;padding:6px 8px;border-bottom:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-color-light, #f4f5f8)}.rich-editor__toolbar ion-button{--padding-start: 8px;--padding-end: 8px;margin:0;font-size:.8125rem;min-width:32px}.rich-editor__btn--active{--background: rgba(var(--ion-color-primary-rgb), .14);--color: var(--ion-color-primary);border-radius:6px}.rich-editor__surface{padding:12px 16px;min-height:160px}.rich-editor__surface ::ng-deep .ProseMirror{outline:none;min-height:140px;color:var(--ion-text-color, #000);font-size:.9375rem;line-height:1.5}.rich-editor__surface ::ng-deep .ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:var(--ion-color-medium, #92949c);float:left;height:0;pointer-events:none}.rich-editor__surface ::ng-deep .ProseMirror p{margin:0 0 .75em}.rich-editor__surface ::ng-deep .ProseMirror h1,.rich-editor__surface ::ng-deep .ProseMirror h2,.rich-editor__surface ::ng-deep .ProseMirror h3{margin:0 0 .5em;color:var(--ion-text-color, #000)}.rich-editor__surface ::ng-deep .ProseMirror blockquote{margin:0 0 .75em;padding-left:12px;border-left:3px solid var(--ion-color-primary, #3880ff);color:var(--ion-color-medium, #92949c)}.rich-editor__surface ::ng-deep .ProseMirror ul,.rich-editor__surface ::ng-deep .ProseMirror ol{margin:0 0 .75em;padding-left:24px}.rich-editor__surface ::ng-deep .ProseMirror img{max-width:100%;border-radius:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+  `, isInline: true, styles: [".rich-editor{display:flex;flex-direction:column;gap:8px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:8px;overflow:hidden}.rich-editor--disabled{opacity:.7}.rich-editor__toolbar{display:flex;flex-wrap:wrap;gap:2px;padding:6px 8px;border-bottom:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-color-light, #f4f5f8)}.rich-editor__toolbar ion-button{--padding-start: 8px;--padding-end: 8px;margin:0;font-size:.8125rem;min-width:32px}.rich-editor__btn--active{--background: rgba(var(--ion-color-primary-rgb), .14);--color: var(--ion-color-primary);border-radius:6px}.rich-editor__image-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin:0 0 0 4px;border-radius:6px;color:var(--ion-color-dark, #232323);font-size:1.125rem;cursor:pointer}.rich-editor__image-btn:hover{background:#0000000f}.rich-editor__image-btn--disabled{opacity:.5;pointer-events:none}.rich-editor__image-btn input[type=file]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.rich-editor__surface{padding:12px 16px;min-height:160px}.rich-editor__surface ::ng-deep .ProseMirror{outline:none;min-height:140px;color:var(--ion-text-color, #000);font-size:.9375rem;line-height:1.5}.rich-editor__surface ::ng-deep .ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:var(--ion-color-medium, #92949c);float:left;height:0;pointer-events:none}.rich-editor__surface ::ng-deep .ProseMirror p{margin:0 0 .75em}.rich-editor__surface ::ng-deep .ProseMirror h1,.rich-editor__surface ::ng-deep .ProseMirror h2,.rich-editor__surface ::ng-deep .ProseMirror h3{margin:0 0 .5em;color:var(--ion-text-color, #000)}.rich-editor__surface ::ng-deep .ProseMirror blockquote{margin:0 0 .75em;padding-left:12px;border-left:3px solid var(--ion-color-primary, #3880ff);color:var(--ion-color-medium, #92949c)}.rich-editor__surface ::ng-deep .ProseMirror ul,.rich-editor__surface ::ng-deep .ProseMirror ol{margin:0 0 .75em;padding-left:24px}.rich-editor__surface ::ng-deep .ProseMirror img{max-width:100%;border-radius:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RichEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-rich-editor', standalone: true, imports: [CommonModule, IonButton, IonIcon], template: `
+            args: [{ selector: 'val-rich-editor', standalone: true, imports: [CommonModule, IonButton, IonIcon, IonSpinner], template: `
     <div class="rich-editor" [class.rich-editor--disabled]="props.disabled">
       @if (!props.disabled) {
         <div class="rich-editor__toolbar" role="toolbar">
@@ -39939,11 +39993,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               }
             </ion-button>
           }
+          <!-- Label trick (mismo patrón que val-attachment-uploader): el
+               <label> nativo reenvía el clic al input como gesto confiable,
+               ion-button + input.click() programático falla en iOS PWA. -->
+          <label
+            class="rich-editor__image-btn"
+            [class.rich-editor__image-btn--disabled]="uploadingImage()"
+            [attr.aria-label]="t('image')"
+          >
+            @if (uploadingImage()) {
+              <ion-spinner name="dots" />
+            } @else {
+              <ion-icon name="image-outline" />
+            }
+            <input type="file" accept="image/*" [disabled]="uploadingImage()" (change)="onImageSelected($event)" />
+          </label>
         </div>
       }
       <div #editorHost class="rich-editor__surface"></div>
     </div>
-  `, styles: [".rich-editor{display:flex;flex-direction:column;gap:8px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:8px;overflow:hidden}.rich-editor--disabled{opacity:.7}.rich-editor__toolbar{display:flex;flex-wrap:wrap;gap:2px;padding:6px 8px;border-bottom:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-color-light, #f4f5f8)}.rich-editor__toolbar ion-button{--padding-start: 8px;--padding-end: 8px;margin:0;font-size:.8125rem;min-width:32px}.rich-editor__btn--active{--background: rgba(var(--ion-color-primary-rgb), .14);--color: var(--ion-color-primary);border-radius:6px}.rich-editor__surface{padding:12px 16px;min-height:160px}.rich-editor__surface ::ng-deep .ProseMirror{outline:none;min-height:140px;color:var(--ion-text-color, #000);font-size:.9375rem;line-height:1.5}.rich-editor__surface ::ng-deep .ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:var(--ion-color-medium, #92949c);float:left;height:0;pointer-events:none}.rich-editor__surface ::ng-deep .ProseMirror p{margin:0 0 .75em}.rich-editor__surface ::ng-deep .ProseMirror h1,.rich-editor__surface ::ng-deep .ProseMirror h2,.rich-editor__surface ::ng-deep .ProseMirror h3{margin:0 0 .5em;color:var(--ion-text-color, #000)}.rich-editor__surface ::ng-deep .ProseMirror blockquote{margin:0 0 .75em;padding-left:12px;border-left:3px solid var(--ion-color-primary, #3880ff);color:var(--ion-color-medium, #92949c)}.rich-editor__surface ::ng-deep .ProseMirror ul,.rich-editor__surface ::ng-deep .ProseMirror ol{margin:0 0 .75em;padding-left:24px}.rich-editor__surface ::ng-deep .ProseMirror img{max-width:100%;border-radius:8px}\n"] }]
+  `, styles: [".rich-editor{display:flex;flex-direction:column;gap:8px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:8px;overflow:hidden}.rich-editor--disabled{opacity:.7}.rich-editor__toolbar{display:flex;flex-wrap:wrap;gap:2px;padding:6px 8px;border-bottom:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-color-light, #f4f5f8)}.rich-editor__toolbar ion-button{--padding-start: 8px;--padding-end: 8px;margin:0;font-size:.8125rem;min-width:32px}.rich-editor__btn--active{--background: rgba(var(--ion-color-primary-rgb), .14);--color: var(--ion-color-primary);border-radius:6px}.rich-editor__image-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin:0 0 0 4px;border-radius:6px;color:var(--ion-color-dark, #232323);font-size:1.125rem;cursor:pointer}.rich-editor__image-btn:hover{background:#0000000f}.rich-editor__image-btn--disabled{opacity:.5;pointer-events:none}.rich-editor__image-btn input[type=file]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.rich-editor__surface{padding:12px 16px;min-height:160px}.rich-editor__surface ::ng-deep .ProseMirror{outline:none;min-height:140px;color:var(--ion-text-color, #000);font-size:.9375rem;line-height:1.5}.rich-editor__surface ::ng-deep .ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:var(--ion-color-medium, #92949c);float:left;height:0;pointer-events:none}.rich-editor__surface ::ng-deep .ProseMirror p{margin:0 0 .75em}.rich-editor__surface ::ng-deep .ProseMirror h1,.rich-editor__surface ::ng-deep .ProseMirror h2,.rich-editor__surface ::ng-deep .ProseMirror h3{margin:0 0 .5em;color:var(--ion-text-color, #000)}.rich-editor__surface ::ng-deep .ProseMirror blockquote{margin:0 0 .75em;padding-left:12px;border-left:3px solid var(--ion-color-primary, #3880ff);color:var(--ion-color-medium, #92949c)}.rich-editor__surface ::ng-deep .ProseMirror ul,.rich-editor__surface ::ng-deep .ProseMirror ol{margin:0 0 .75em;padding-left:24px}.rich-editor__surface ::ng-deep .ProseMirror img{max-width:100%;border-radius:8px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input
             }], articleChange: [{