@lightworkai.official/debug-capture-angular 0.6.0

package/src/components/rich-reply-editor.component.ts

@@ -0,0 +1,287 @@
+/**
+ * The reporter's reply box — TipTap, the same editor the original gives them.
+ *
+ * TipTap ships no Angular binding, so this drives `@tiptap/core` directly:
+ * create the editor onto an element ref, destroy it on teardown, and ask it for
+ * state when Angular renders. That is a dozen lines, and it is still far less
+ * than re-implementing selection handling, list nesting and paste sanitising by
+ * hand — which is what this was before, and what it should never have been.
+ */
+import {
+  ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, ViewChild,
+  type AfterViewInit, type OnDestroy,
+} from "@angular/core";
+import { NgFor, NgIf } from "@angular/common";
+import { Editor } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
+import Image from "@tiptap/extension-image";
+import Placeholder from "@tiptap/extension-placeholder";
+import { cleanHtml, htmlIsEmpty } from "@lightworkai.official/debug-capture";
+import { IconComponent } from "./icon.component";
+import { ImageAnnotatorDialogComponent } from "./image-annotator-dialog.component";
+import { ICONS } from "./icons";
+
+/**
+ * The toolbar's words.
+ *
+ * An open map because the toolbar is configurable — a host asking for `strike`
+ * needs a label for it, and enumerating every control here would mean editing
+ * this type every time one is added.
+ */
+export type EditorLabels = Record<string, string>;
+
+interface Tool {
+  key: keyof EditorLabels;
+  icon: string;
+  mark: string;
+  run: () => void;
+  separatorBefore?: boolean;
+}
+
+@Component({
+  selector: "lw-rich-reply-editor",
+  standalone: true,
+  imports: [NgFor, NgIf, IconComponent, ImageAnnotatorDialogComponent],
+  template: `
+    <div class="lw-editor" [class.lw-editor--disabled]="disabled">
+      <div class="lw-editor__tools">
+        <ng-container *ngFor="let tool of tools">
+          <span *ngIf="tool.separatorBefore" class="lw-editor__sep"></span>
+          <button
+            type="button"
+            class="lw-tool"
+            [class.lw-tool--on]="isActive(tool.mark)"
+            [title]="labels[tool.key]"
+            [attr.aria-label]="labels[tool.key]"
+            [attr.aria-pressed]="isActive(tool.mark)"
+            [disabled]="disabled"
+            (mousedown)="press($event, tool)"
+          >
+            <lw-icon [svg]="tool.icon" />
+          </button>
+        </ng-container>
+      </div>
+      <div #mount class="lw-editor__content"></div>
+      <input #file type="file" accept="image/*" hidden (change)="onFile($event)" />
+
+      <lw-image-annotator-dialog
+        *ngIf="pending"
+        [src]="pending"
+        [filename]="pendingName"
+        [locale]="locale"
+        (confirmed)="commitImage($event)"
+        (cancelled)="pending = null"
+      />
+    </div>
+  `,
+})
+export class RichReplyEditorComponent implements AfterViewInit, OnDestroy {
+  @Input({ required: true }) placeholder = "";
+  /** Support host origin — the sanitiser resolves inline image URLs against it. */
+  @Input({ required: true }) host = "";
+  @Input({ required: true }) labels!: EditorLabels;
+  @Input({ required: true }) uploadImage!: (file: File) => Promise<string>;
+  @Input() set disabledState(value: boolean) {
+    this.disabled = value;
+    this.editor?.setEditable(!value);
+  }
+  /** UI language, for the annotator's own labels. */
+  @Input() locale?: "th" | "en";
+  /** Content to start from — editing an existing message rather than writing one. */
+  @Input() initial?: string;
+  @Output() errored = new EventEmitter<string>();
+
+  /**
+   * The image waiting to be drawn on, as a same-origin data URI. Non-null means
+   * the annotator is open.
+   *
+   * Every route in — the picker, a paste, a drop — lands here first. The
+   * original does the same: pointing at the problem is most of what a
+   * screenshot is for, and annotating BEFORE upload keeps the canvas
+   * same-origin, so `toDataURL` is not tainted by a presigned URL.
+   */
+  protected pending: string | null = null;
+  protected pendingName = "screenshot.png";
+
+  protected disabled = false;
+  private editor: Editor | null = null;
+
+  @ViewChild("mount", { static: true }) private mount!: ElementRef<HTMLElement>;
+  @ViewChild("file", { static: true }) private file!: ElementRef<HTMLInputElement>;
+
+  protected readonly tools: Tool[] = [
+    { key: "bold", icon: ICONS.bold, mark: "bold", run: () => this.editor?.chain().focus().toggleBold().run() },
+    { key: "italic", icon: ICONS.italic, mark: "italic", run: () => this.editor?.chain().focus().toggleItalic().run() },
+    { key: "underline", icon: ICONS.underline, mark: "underline", run: () => this.editor?.chain().focus().toggleUnderline().run() },
+    { key: "bulletList", icon: ICONS.bulletList, mark: "bulletList", separatorBefore: true, run: () => this.editor?.chain().focus().toggleBulletList().run() },
+    { key: "orderedList", icon: ICONS.orderedList, mark: "orderedList", run: () => this.editor?.chain().focus().toggleOrderedList().run() },
+    { key: "link", icon: ICONS.link, mark: "link", run: () => this.toggleLink() },
+    { key: "attachImage", icon: ICONS.image, mark: "", separatorBefore: true, run: () => this.file.nativeElement.click() },
+  ];
+
+  constructor(private readonly cdr: ChangeDetectorRef) {}
+
+  ngAfterViewInit(): void {
+    this.editor = new Editor({
+      element: this.mount.nativeElement,
+      // StarterKit v3 already carries Underline and Link, so the toolbar the
+      // original defines needs only two extensions beyond it.
+      content: this.initial ?? "",
+      extensions: [
+        StarterKit,
+        Image.configure({ inline: false, allowBase64: false }),
+        Placeholder.configure({ placeholder: this.placeholder }),
+      ],
+      editorProps: {
+        attributes: { class: "lw-editor-body" },
+        /**
+         * A pasted screenshot is the normal case — Cmd+Shift+4, Cmd+V — and
+         * without this the only route is save-to-disk, find-the-file, pick-it.
+         */
+        handlePaste: (_view, event) => {
+          const image = Array.from(event.clipboardData?.files ?? []).find((f) => f.type.startsWith("image/"));
+          if (!image) return false;
+          event.preventDefault();
+          void this.addImage(image);
+          return true;
+        },
+        handleDrop: (_view, event) => {
+          const dropped = event as DragEvent;
+          const image = Array.from(dropped.dataTransfer?.files ?? []).find((f) => f.type.startsWith("image/"));
+          if (!image) return false;
+          dropped.preventDefault();
+          void this.addImage(image);
+          return true;
+        },
+      },
+      // TipTap mutates outside Angular's knowledge, so the toolbar's pressed
+      // state has to be asked for again whenever the selection moves.
+      onSelectionUpdate: () => this.cdr.markForCheck(),
+      onUpdate: () => this.cdr.markForCheck(),
+    });
+    this.editor.setEditable(!this.disabled);
+  }
+
+  ngOnDestroy(): void {
+    this.editor?.destroy();
+    this.editor = null;
+  }
+
+  /**
+   * Fired on `mousedown` with the default prevented, not on `click`: a toolbar
+   * button taking focus collapses the editor's selection, so by the time
+   * `click` fires the command has nothing to apply to.
+   */
+  protected press(event: MouseEvent, tool: Tool): void {
+    event.preventDefault();
+    if (this.disabled) return;
+    tool.run();
+  }
+
+  protected isActive(mark: string): boolean {
+    return Boolean(mark) && (this.editor?.isActive(mark) ?? false);
+  }
+
+  protected onFile(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    const chosen = input.files?.[0];
+    // Cleared so choosing the same file twice still fires `change`.
+    input.value = "";
+    if (chosen) void this.addImage(chosen);
+  }
+
+  /**
+   * Open the annotator on a picked image rather than inserting it straight away.
+   *
+   * One dialog, everywhere. There was briefly a config hook letting a host swap
+   * in its own — which solved the symptom (two dialogs that looked different)
+   * by blessing the cause (two dialogs).
+   */
+  private async addImage(file: File): Promise<void> {
+    if (this.pending) return;
+    try {
+      this.pendingName = file.name || "screenshot.png";
+      this.pending = await readDataUri(file);
+      this.cdr.markForCheck();
+    } catch (e) {
+      this.errored.emit(e instanceof Error ? e.message : "unreadable file");
+    }
+  }
+
+  /** The annotated image comes back as a data URI; upload THAT and insert it. */
+  protected async commitImage(dataUri: string): Promise<void> {
+    this.pending = null;
+    try {
+      const src = await this.uploadImage(dataUriToFile(dataUri, this.pendingName));
+      this.editor?.chain().focus().setImage({ src }).run();
+    } catch (e) {
+      this.errored.emit(e instanceof Error ? e.message : "upload failed");
+    } finally {
+      this.cdr.markForCheck();
+    }
+  }
+
+  private toggleLink(): void {
+    if (!this.editor) return;
+    if (this.editor.getAttributes("link")["href"]) {
+      this.editor.chain().focus().unsetLink().run();
+      return;
+    }
+    const href = window.prompt(this.labels.linkPrompt, "https://");
+    if (!href) return;
+    // Only ordinary destinations. The outgoing sanitiser would drop a
+    // `javascript:` URL anyway, so allowing it here just shows the writer a
+    // link that silently vanishes when they send.
+    if (!/^https?:\/\//i.test(href)) {
+      this.errored.emit(`${this.labels.link}: http(s) only`);
+      return;
+    }
+    this.editor.chain().focus().extendMarkRange("link").setLink({ href }).run();
+  }
+
+  /**
+   * Sanitised HTML, or "" when there is nothing worth sending.
+   *
+   * `cleanHtml` is not belt-and-braces over TipTap's schema. The schema drops
+   * an `onclick`, but the Image extension takes any `src` it is given — so a
+   * screenshot pasted from a web page arrives with that page's remote image
+   * intact, and posting it would store a tracking pixel in the thread aimed at
+   * every future reader.
+   */
+  value(): string {
+    const html = cleanHtml(this.editor?.getHTML() ?? "", this.host);
+    return htmlIsEmpty(html) ? "" : html;
+  }
+
+  clear(): void {
+    this.editor?.commands.clearContent(true);
+  }
+}
+
+function readDataUri(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.addEventListener("load", () =>
+      typeof reader.result === "string" ? resolve(reader.result) : reject(new Error("unreadable file")),
+    );
+    reader.addEventListener("error", () => reject(new Error("unreadable file")));
+    reader.readAsDataURL(file);
+  });
+}
+
+/**
+ * Back to a File, because `uploadImage` takes one.
+ *
+ * The annotator hands back a data URI — it draws on a canvas, and a canvas
+ * exports one. Rebuilding a File keeps the upload contract identical for an
+ * annotated image and an untouched one, so the caller never has to care which
+ * it got.
+ */
+function dataUriToFile(dataUri: string, name: string): File {
+  const [header, encoded] = dataUri.split(",");
+  const type = /data:([^;]+)/.exec(header ?? "")?.[1] ?? "image/png";
+  const binary = atob(encoded ?? "");
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i);
+  return new File([bytes], name, { type });
+}

package/src/components/ticket-body.component.ts

@@ -0,0 +1,53 @@
+import { Component, ElementRef, Input, ViewChild, type OnChanges } from "@angular/core";
+import { NgIf } from "@angular/common";
+import { renderBody } from "@lightworkai.official/debug-capture";
+
+/**
+ * A message or description body, rendered safely.
+ *
+ * Deliberately NOT `[innerHTML]`, even though Angular sanitises that: bodies
+ * are HTML written by other people, and the core's walker is the one place all
+ * three framework packages agree on what an inline image may point at. Angular
+ * would keep a remote `<img>`, which is how a ticket becomes a tracking pixel
+ * aimed at whoever opens it.
+ */
+@Component({
+  selector: "lw-ticket-body",
+  standalone: true,
+  imports: [NgIf],
+  template: `
+    <!-- Delegated rather than bound per image: this is sanitised HTML we inject,
+         not elements we built, so there is nothing to attach to. -->
+    <div #target class="lw-body" (click)="onClick($event)"></div>
+
+    <div *ngIf="zoomed" class="lw-zoom" role="dialog" aria-modal="true" (click)="zoomed = null">
+      <button type="button" class="lw-zoom__close" aria-label="close">✕</button>
+      <img [src]="zoomed" alt="" />
+    </div>
+  `,
+})
+export class TicketBodyComponent implements OnChanges {
+  @Input({ required: true }) html = "";
+  @Input({ required: true }) host = "";
+  @ViewChild("target", { static: true }) private target!: ElementRef<HTMLElement>;
+
+  /**
+   * The image being viewed full size, if any.
+   *
+   * Bodies are capped to a thumbnail so one screenshot cannot push a whole
+   * conversation off the screen — which is only reasonable if the full size is
+   * a click away.
+   */
+  protected zoomed: string | null = null;
+
+  protected onClick(event: MouseEvent): void {
+    const node = event.target as HTMLElement | null;
+    if (!node || node.tagName !== "IMG") return;
+    const src = node.getAttribute("src");
+    if (src) this.zoomed = src;
+  }
+
+  ngOnChanges(): void {
+    if (this.target) renderBody(this.target.nativeElement, this.html, this.host);
+  }
+}