valtech-components 4.0.971 → 4.0.973

package/lib/components/organisms/rich-editor/article-to-tiptap.d.ts

@@ -0,0 +1,3 @@
+import { ArticleMetadata } from '../article/types';
+import { TiptapDoc } from './tiptap-to-article';
+export declare function articleToTiptapDoc(article: ArticleMetadata): TiptapDoc;

package/lib/components/organisms/rich-editor/rich-editor.component.d.ts

@@ -0,0 +1,58 @@
+import { AfterViewInit, ElementRef, EventEmitter, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { ArticleMetadata } from '../article/types';
+import { RichEditorMetadata, RichEditorToolbarButton } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-rich-editor
+ *
+ * Organism: editor WYSIWYG reusable para toda la plataforma, sobre TipTap.
+ * Emite `ArticleMetadata` — el mismo contrato que `val-article` renderiza,
+ * que también producen Markdown (`parseMarkdownArticle`) y (a futuro) el
+ * page builder. El consumer nunca toca TipTap directamente.
+ *
+ * Cobertura de la toolbar v1: negrita, cursiva, título (H2), subtítulo (H3),
+ * lista con/sin viñetas, cita, separador, imagen. Ver `tiptap-to-article.ts`
+ * para qué tipos de `ArticleElement` puede producir el editor hoy.
+ *
+ * @example
+ * ```html
+ * <val-rich-editor
+ *   [props]="{ initialValue: recipe.descriptionArticle, placeholder: 'Escribe la preparación...' }"
+ *   (articleChange)="onArticleChange($event)"
+ * />
+ * ```
+ */
+export declare class RichEditorComponent implements AfterViewInit, OnChanges, OnDestroy {
+    props: RichEditorMetadata;
+    articleChange: EventEmitter<ArticleMetadata>;
+    editorHost: ElementRef<HTMLElement>;
+    private i18n;
+    private injector;
+    private editor?;
+    /** 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). */
+    private readonly _toolbarTick;
+    readonly toolbarButtons: import("@angular/core").WritableSignal<RichEditorToolbarButton[]>;
+    readonly uploadingImage: import("@angular/core").WritableSignal<boolean>;
+    constructor();
+    t(key: string): string;
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private emitArticle;
+    private refreshToolbar;
+    runCommand(token: string): void;
+    /**
+     * 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.
+     */
+    onImageSelected(event: Event): Promise<void>;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RichEditorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RichEditorComponent, "val-rich-editor", never, { "props": { "alias": "props"; "required": false; }; }, { "articleChange": "articleChange"; }, never, never, true, never>;
+}

package/lib/components/organisms/rich-editor/rich-editor.i18n.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Defaults i18n (es/en) del `val-rich-editor`. Auto-registrados en el
+ * constructor (namespace `RichEditor`) — el consumer nunca los registra.
+ */
+export declare const RICH_EDITOR_I18N: {
+    readonly es: {
+        readonly bold: "Negrita";
+        readonly italic: "Cursiva";
+        readonly heading2: "Título";
+        readonly heading3: "Subtítulo";
+        readonly bulletList: "Lista con viñetas";
+        readonly orderedList: "Lista numerada";
+        readonly quote: "Cita";
+        readonly separator: "Separador";
+        readonly image: "Insertar imagen";
+    };
+    readonly en: {
+        readonly bold: "Bold";
+        readonly italic: "Italic";
+        readonly heading2: "Heading";
+        readonly heading3: "Subheading";
+        readonly bulletList: "Bullet list";
+        readonly orderedList: "Numbered list";
+        readonly quote: "Quote";
+        readonly separator: "Separator";
+        readonly image: "Insert image";
+    };
+};

package/lib/components/organisms/rich-editor/tiptap-to-article.d.ts

@@ -0,0 +1,38 @@
+import { ArticleElement, ArticleMetadata } from '../article/types';
+/**
+ * Convierte el documento JSON de TipTap (ProseMirror) a `ArticleElement[]`
+ * sin pasar por HTML intermedio — es la mitad "guardar" de `val-rich-editor`,
+ * que alimenta el mismo `val-article` que ya usan Markdown
+ * (`parseMarkdownArticle`) y las instrucciones de receta de Okhelia. Ver
+ * `article-to-tiptap.ts` para la conversión inversa (hidratar el editor con
+ * contenido existente).
+ *
+ * Cobertura: los nodos que trae `@tiptap/starter-kit` por default (doc,
+ * paragraph, heading, bulletList/orderedList/listItem, blockquote, codeBlock,
+ * horizontalRule) + marks inline (bold, italic vía <strong>/<em>, igual
+ * criterio que `allowPartialBold` de ArticleTextElement/ArticleNoteElement).
+ * NO cubre todavía: tablas, ni extensiones custom para `note`/`diagram`/
+ * `command` (esos requerirían nodos TipTap propios — factible, pendiente de
+ * decidir si vale la pena). `image` sí está cubierto (ver case 'image').
+ */
+export interface TiptapNode {
+    type: string;
+    attrs?: Record<string, unknown>;
+    content?: TiptapNode[];
+    text?: string;
+    marks?: Array<{
+        type: string;
+        attrs?: Record<string, unknown>;
+    }>;
+}
+export interface TiptapDoc {
+    type: 'doc';
+    content: TiptapNode[];
+}
+/**
+ * Convierte un doc de TipTap a `ArticleElement[]`. Función pura — sin
+ * Angular DI, usable también desde Node (mismo criterio que
+ * `parseMarkdownArticle`).
+ */
+export declare function tiptapDocToArticleElements(doc: TiptapDoc): ArticleElement[];
+export declare function tiptapDocToArticle(doc: TiptapDoc, config?: Partial<ArticleMetadata>): ArticleMetadata;

package/lib/components/organisms/rich-editor/types.d.ts

@@ -0,0 +1,21 @@
+import { ArticleMetadata } from '../article/types';
+/**
+ * Props de `val-rich-editor` (object-first, como el resto de la lib).
+ */
+export interface RichEditorMetadata {
+    /** Contenido inicial — pasar el `ArticleMetadata` ya guardado para editar
+     * algo existente. Vacío/undefined = editor en blanco. */
+    initialValue?: ArticleMetadata;
+    /** Texto de placeholder cuando el editor está vacío. */
+    placeholder?: string;
+    /** Deshabilita la edición (solo lectura, sin toolbar interactiva). */
+    disabled?: boolean;
+}
+/** Un botón de la toolbar — identifica el comando TipTap y su estado activo. */
+export interface RichEditorToolbarButton {
+    token: string;
+    icon: string;
+    label: string;
+    isActive: boolean;
+    disabled: boolean;
+}

package/lib/version.d.ts

@@ -2,4 +2,4 @@
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-export declare const VERSION = "4.0.971";
+export declare const VERSION = "4.0.973";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valtech-components",
-  "version": "4.0.971",
+  "version": "4.0.973",
   "private": false,
   "bin": {
     "valtech-firebase-config": "./src/lib/services/firebase/scripts/generate-sw-config.js"
@@ -48,6 +48,10 @@
     "@dicebear/initials": "^9.4.2",
     "@dicebear/pixel-art": "^9.4.2",
     "@dicebear/shapes": "^9.4.2",
+    "@tiptap/core": "^2.27.2",
+    "@tiptap/extension-image": "^2.27.2",
+    "@tiptap/pm": "^2.27.2",
+    "@tiptap/starter-kit": "^2.27.2",
     "@zxing/browser": "^0.2.0",
     "@zxing/library": "^0.22.0",
     "compressorjs": "^1.3.0",

package/public-api.d.ts

@@ -247,6 +247,10 @@ export * from './lib/components/organisms/attachment-uploader/attachment-uploade
 export * from './lib/components/organisms/attachment-uploader/types';
 export * from './lib/components/organisms/article/article.component';
 export * from './lib/components/organisms/article/types';
+export * from './lib/components/organisms/rich-editor/rich-editor.component';
+export * from './lib/components/organisms/rich-editor/types';
+export * from './lib/components/organisms/rich-editor/tiptap-to-article';
+export * from './lib/components/organisms/rich-editor/article-to-tiptap';
 export * from './lib/components/organisms/banner/banner.component';
 export * from './lib/components/organisms/banner/types';
 export * from './lib/components/organisms/change-password-modal/change-password-modal.component';