@lightworkai.official/debug-capture-vue 0.6.0 → 0.7.0

package/src/components/MyTicketsPanel.vue

@@ -1,312 +0,0 @@
-<script setup lang="ts">
-/**
- * "ปัญหาที่แจ้ง" — the reports this person filed, and what became of them.
- *
- * Drop it on a route of your own — the reporter-facing counterpart to the
- * agent's ticket list. It needs `identity` in the config, because the widget's
- * realm key is public and can authorise filing a report but never reading one
- * back — see the core README.
- *
- * This component owns fetching and view state and nothing else: the columns,
- * the sorting, the sanitising and the dates all live in the core, shared with
- * the React and Angular packages.
- */
-import { computed, onMounted, ref, watch } from "vue";
-import {
-  NoIdentityError,
-  fetchRealmConfig,
-  getAttachmentUrl,
-  getConfig,
-  getMyTicket,
-  getMyTicketHistory,
-  listMyTickets,
-  reopenMyTicket,
-  replyToTicket,
-  statusMaps,
-  ticketStrings,
-  uploadInlineImage,
-  type MyTicketDetail,
-  type MyTicketListItem,
-  type RealmConfig,
-  type SortKey,
-  type StatusEvent,
-} from "@lightworkai.official/debug-capture";
-import TicketTable from "./TicketTable.vue";
-import TicketDetail from "./TicketDetail.vue";
-import { AlertIcon, SearchIcon } from "./icons";
-
-const props = defineProps<{
-  /** Change it to re-read the list — after filing a report, say. */
-  refreshKey?: string | number;
-  /** Hide the panel's own heading when the host page already has one. */
-  hideTitle?: boolean;
-}>();
-
-const emit = defineEmits<{
-  (e: "replied", ticket: MyTicketDetail): void;
-  (e: "reopened", ticket: MyTicketDetail): void;
-  (e: "error", message: string): void;
-}>();
-
-const locale = computed(() => {
-  try {
-    return getConfig().locale;
-  } catch {
-    return undefined;
-  }
-});
-const host = computed(() => {
-  try {
-    return getConfig().host;
-  } catch {
-    return "";
-  }
-});
-const t = computed(() => ticketStrings(locale.value));
-
-const items = ref<MyTicketListItem[]>([]);
-const config = ref<RealmConfig | null>(null);
-const loading = ref(true);
-const error = ref<string | null>(null);
-const noIdentity = ref(false);
-
-const keyword = ref("");
-const applied = ref("");
-const statusFilter = ref("");
-const sort = ref<{ key: SortKey; direction: "asc" | "desc" }>({ key: "createdAt", direction: "desc" });
-const page = ref(1);
-
-const detail = ref<MyTicketDetail | null>(null);
-const history = ref<StatusEvent[]>([]);
-const detailError = ref<string | null>(null);
-const detailLoading = ref(false);
-const sending = ref(false);
-const reopening = ref(false);
-
-const maps = computed(() => statusMaps(config.value?.statusColumns ?? [], t.value.allStatuses));
-const table = ref<InstanceType<typeof TicketTable> | null>(null);
-const shownCount = computed(() => table.value?.count ?? 0);
-
-// Debounced like the original: re-filtering per keystroke resets the page under
-// the reader's hands.
-let debounce: ReturnType<typeof setTimeout> | null = null;
-watch(keyword, (next) => {
-  if (debounce) clearTimeout(debounce);
-  debounce = setTimeout(() => {
-    applied.value = next;
-    page.value = 1;
-  }, 300);
-});
-watch(statusFilter, () => (page.value = 1));
-watch(() => props.refreshKey, () => void load());
-
-onMounted(load);
-
-async function load(): Promise<void> {
-  loading.value = true;
-  error.value = null;
-  noIdentity.value = false;
-  try {
-    // Config and list together: the labels are useless without the rows and the
-    // rows unreadable without the labels.
-    const [realm, list] = await Promise.all([fetchRealmConfig(), listMyTickets()]);
-    config.value = realm;
-    items.value = list;
-  } catch (e) {
-    if (e instanceof NoIdentityError) noIdentity.value = true;
-    else error.value = e instanceof Error ? e.message : t.value.listFailed;
-  } finally {
-    loading.value = false;
-  }
-}
-
-/** Open a DIFFERENT ticket: tear the view down, because nothing on screen is its. */
-async function open(id: string): Promise<void> {
-  detail.value = null;
-  history.value = [];
-  detailError.value = null;
-  detailLoading.value = true;
-  try {
-    await reload(id);
-  } finally {
-    detailLoading.value = false;
-  }
-}
-
-/**
- * Re-read the ticket we are already looking at, in place.
- *
- * Deliberately NOT `open()`. That nulls the detail and raises the loading flag,
- * which unmounts the whole view and remounts it — so sending a reply threw the
- * reader back to the top of the page, away from the conversation they were in
- * the middle of. It reads as the page reloading, because visually that is what
- * happens.
- *
- * Updating the refs instead lets Vue patch what changed: the new message
- * appears, the timeline updates, and everything else stays exactly where it was.
- */
-async function reload(id: string): Promise<void> {
-  try {
-    const [found, events] = await Promise.all([
-      getMyTicket(id),
-      // The timeline is a nicety, not the page: a ticket whose history fails to
-      // load should still show its conversation.
-      getMyTicketHistory(id).catch(() => [] as StatusEvent[]),
-    ]);
-    detail.value = found;
-    history.value = events;
-  } catch (e) {
-    detailError.value = e instanceof Error ? e.message : t.value.detailFailed;
-  }
-}
-
-function back(): void {
-  detail.value = null;
-  // Counts and badges move when a reply lands, so the list is re-read rather
-  // than restored from what it said before the detail opened.
-  void load();
-}
-
-function toggleSort(key: SortKey): void {
-  sort.value =
-    sort.value.key === key
-      ? { key, direction: sort.value.direction === "asc" ? "desc" : "asc" }
-      : // Dates open newest-first, text A→Z: the useful first click differs by
-        // what the column holds.
-        { key, direction: key === "createdAt" || key === "updatedAt" ? "desc" : "asc" };
-}
-
-async function send(body: string): Promise<void> {
-  const ticket = detail.value;
-  if (!ticket || sending.value) return;
-  sending.value = true;
-  try {
-    await replyToTicket(ticket.id, body);
-    await reload(ticket.id);
-    if (detail.value) emit("replied", detail.value);
-  } catch (e) {
-    emit("error", e instanceof Error ? e.message : t.value.sendFailed);
-  } finally {
-    sending.value = false;
-  }
-}
-
-async function reopen(note: string): Promise<void> {
-  const ticket = detail.value;
-  if (!ticket || reopening.value) return;
-  reopening.value = true;
-  try {
-    await reopenMyTicket(ticket.id, note);
-    await reload(ticket.id);
-    if (detail.value) emit("reopened", detail.value);
-  } catch (e) {
-    emit("error", e instanceof Error ? e.message : t.value.reopenFailed);
-  } finally {
-    reopening.value = false;
-  }
-}
-
-function uploadImage(file: File): Promise<string> {
-  const ticket = detail.value;
-  if (!ticket) return Promise.reject(new Error("no ticket"));
-  return readDataUri(file).then((dataUri) =>
-    uploadInlineImage(ticket.id, dataUri, file.name).then((stored) => stored.url),
-  );
-}
-
-function attachmentUrl(id: string): Promise<string> {
-  return getAttachmentUrl(id).then((found) => found.url);
-}
-
-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);
-  });
-}
-</script>
-
-<template>
-  <div class="lw-panel">
-    <template v-if="!detail && !detailLoading">
-      <h2 v-if="!hideTitle" class="lw-panel__title">{{ t.title }}</h2>
-      <p class="lw-panel__intro">{{ t.intro }}</p>
-
-      <div class="lw-controls">
-        <div class="lw-search">
-          <SearchIcon class="lw-search__icon" />
-          <input
-            v-model="keyword"
-            type="search"
-            class="lw-input lw-search__field"
-            :placeholder="t.searchPlaceholder"
-            :aria-label="t.searchLabel"
-          />
-        </div>
-        <select v-model="statusFilter" class="lw-input">
-          <option v-for="option in maps.options" :key="option.value" :value="option.value">
-            {{ option.label }}
-          </option>
-        </select>
-        <span class="lw-count">{{ t.count(shownCount) }}</span>
-      </div>
-
-      <p v-if="noIdentity" class="lw-state">{{ t.signedOut }}</p>
-      <div v-else-if="loading" class="lw-skeletons">
-        <div v-for="n in 4" :key="n" class="lw-skeleton" />
-      </div>
-      <p v-else-if="error" class="lw-state lw-state--error">
-        <AlertIcon /> {{ error }}
-        <button type="button" class="lw-retry" @click="load">{{ t.retry }}</button>
-      </p>
-      <TicketTable
-        v-else
-        ref="table"
-        :items="items"
-        :maps="maps"
-        :t="t"
-        :slug="config?.realm.slug"
-        :timezone="config?.timezone ?? 'Asia/Bangkok'"
-        :locale="locale"
-        :keyword="applied"
-        :status-filter="statusFilter"
-        :sort="sort"
-        :page="page"
-        @open="open"
-        @sort="toggleSort"
-        @page="page = $event"
-      />
-    </template>
-
-    <div v-else-if="detailLoading" class="lw-skeletons">
-      <div class="lw-skeleton" />
-      <div class="lw-skeleton" />
-    </div>
-
-    <p v-else-if="detailError" class="lw-state lw-state--error">{{ detailError }}</p>
-
-    <TicketDetail
-      v-else-if="detail && config"
-      :ticket="detail"
-      :history="history"
-      :config="config"
-      :maps="maps"
-      :t="t"
-      :host="host"
-      :locale="locale"
-      :sending="sending"
-      :reopening="reopening"
-      :upload-image="uploadImage"
-      :attachment-url="attachmentUrl"
-      @back="back"
-      @edited="detail && reload(detail.id)"
-      @send="send"
-      @reopen="reopen"
-      @error="emit('error', $event)"
-    />
-  </div>
-</template>

package/src/components/ReopenPanel.vue

@@ -1,47 +0,0 @@
-<script setup lang="ts">
-/**
- * "Still a problem?" — a SEPARATE action from the chat, with its own endpoint
- * and its own confirmation, only when the ticket is done and the realm allows it.
- */
-import { ref } from "vue";
-import type { TicketStrings } from "@lightworkai.official/debug-capture";
-import { RotateIcon } from "./icons";
-
-defineProps<{ t: TicketStrings; locale: "th" | "en"; busy?: boolean }>();
-const emit = defineEmits<{ (e: "reopen", note: string): void }>();
-
-const open = ref(false);
-const note = ref("");
-
-function confirm(): void {
-  emit("reopen", note.value.trim());
-}
-</script>
-
-<template>
-  <section class="lw-reopen">
-    <div v-if="!open" class="lw-reopen__row">
-      <span class="lw-reopen__hint">{{ locale === "en" ? "Problem not fixed?" : "ปัญหายังไม่หาย?" }}</span>
-      <button type="button" class="lw-reopen__open" @click="open = true">
-        <RotateIcon /> {{ t.reopen }}
-      </button>
-    </div>
-    <div v-else>
-      <p class="lw-reopen__title">{{ t.reopen }}</p>
-      <textarea
-        v-model="note"
-        rows="2"
-        class="lw-reopen__note"
-        :placeholder="locale === 'en' ? 'Tell us what is still happening (optional)…' : 'บอกเราหน่อยว่ายังพบปัญหาอะไร (ไม่ระบุก็ได้)…'"
-      />
-      <div class="lw-reopen__actions">
-        <button type="button" class="lw-reopen__cancel" @click="open = false; note = ''">
-          {{ locale === "en" ? "Cancel" : "ยกเลิก" }}
-        </button>
-        <button type="button" class="lw-reopen__confirm" :disabled="busy" @click="confirm">
-          <RotateIcon /> {{ busy ? t.reopening : t.reopen }}
-        </button>
-      </div>
-    </div>
-  </section>
-</template>

package/src/components/RichReplyEditor.vue

@@ -1,321 +0,0 @@
-<script setup lang="ts">
-/**
- * The reporter's reply box — TipTap, the same editor the original gives them.
- *
- * This was hand-rolled on `contenteditable` + `document.execCommand` for one
- * round, on the reasoning that a package should not ship a rich-text editor.
- * That was wrong twice over: TipTap is a PEER dependency, so an app that
- * already has it (both of ours do) pays nothing, and re-implementing selection
- * handling, list nesting and paste sanitising by hand is a maintenance bill
- * with no upside. The original uses TipTap; so do we.
- */
-import { computed, onBeforeUnmount, ref, watch } from "vue";
-import { EditorContent, useEditor } from "@tiptap/vue-3";
-import StarterKit from "@tiptap/starter-kit";
-import Image from "@tiptap/extension-image";
-import Placeholder from "@tiptap/extension-placeholder";
-import { NOTE_TOOLBAR, cleanHtml, htmlIsEmpty, type EditorTool } from "@lightworkai.official/debug-capture";
-import ToolbarButton from "./ToolbarButton.vue";
-import ImageAnnotatorDialog from "./ImageAnnotatorDialog.vue";
-import {
-  BoldIcon, ItalicIcon, UnderlineIcon, StrikeIcon, CodeIcon, BulletListIcon,
-  OrderedListIcon, QuoteIcon, LinkIcon, ImageIcon,
-} from "./icons";
-
-const props = withDefaults(
-  defineProps<{
-    placeholder: string;
-    /** Support host origin — the sanitiser resolves inline image URLs against it. */
-    host: string;
-    disabled?: boolean;
-    /** Which controls to show. Defaults to the original's NOTE_TOOLBAR. */
-    tools?: EditorTool[];
-    /** Hide the toolbar until focused or non-empty. */
-    compact?: boolean;
-    labels: Record<string, string>;
-    /**
-     * Store an image and return the URL to reference it by.
-     *
-     * Optional, and the fallback is not "no images" — it is the annotated data
-     * URI carried in the body for the server to store on arrival. A composer on
-     * a ticket that does not exist yet has nowhere to upload to, and that is a
-     * reason to move the work, not to take the feature away.
-     */
-    uploadImage?: (file: File) => Promise<string>;
-    /** UI language, for the annotator's own labels. */
-    locale?: "th" | "en";
-    /** Content to start from — editing an existing message rather than writing one. */
-    initial?: string;
-  }>(),
-  { tools: () => NOTE_TOOLBAR, compact: false },
-);
-
-/**
- * Two-way binding, for a host that would rather drive this from a ref than call
- * `value()`. Optional: the panel uses the imperative API, the app uses v-model.
- */
-const model = defineModel<string>({ required: false });
-
-const emit = defineEmits<{ (e: "error", message: string): void }>();
-
-const focused = ref(false);
-const uploading = ref(false);
-const fileInput = ref<HTMLInputElement | null>(null);
-/**
- * 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, and for two reasons: 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 cross-origin presigned URL.
- */
-const pending = ref<string | null>(null);
-const pendingName = ref("screenshot.png");
-
-const editor = useEditor({
-  // StarterKit v3 already carries Underline and Link, so the toolbar the
-  // original defines needs only two extensions beyond it.
-  extensions: [
-    StarterKit,
-    Image.configure({ inline: false, allowBase64: false }),
-    Placeholder.configure({ placeholder: () => props.placeholder }),
-  ],
-  content: props.initial ?? model.value ?? "",
-  onUpdate: ({ editor: e }) => {
-    // TipTap's "empty" document is still <p></p>; report it as empty so a send
-    // button bound to the model stays disabled.
-    if (model.value !== undefined || props.compact) model.value = e.isEmpty ? "" : e.getHTML();
-  },
-  onFocus: () => (focused.value = true),
-  onBlur: () => (focused.value = false),
-  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 file = Array.from(event.clipboardData?.files ?? []).find((f) => f.type.startsWith("image/"));
-      if (!file) return false;
-      event.preventDefault();
-      void addImage(file);
-      return true;
-    },
-    handleDrop: (_view, event) => {
-      const dropped = event as DragEvent;
-      const file = Array.from(dropped.dataTransfer?.files ?? []).find((f) => f.type.startsWith("image/"));
-      if (!file) return false;
-      dropped.preventDefault();
-      void addImage(file);
-      return true;
-    },
-  },
-});
-
-watch(
-  () => props.disabled,
-  (off) => editor.value?.setEditable(!off),
-);
-
-// The parent clears the box after a successful send.
-watch(model, (next) => {
-  const current = editor.value;
-  if (!current || current.isDestroyed) return;
-  if (next === "" && !current.isEmpty) current.commands.clearContent();
-});
-
-/**
- * `compact` hides the toolbar until there is something to format.
- *
- * Note what this makes load-bearing: the toolbar UNMOUNTS on blur, so a button
- * that acted on `click` would disappear between mousedown and click and the
- * click would never land. ToolbarButton fires on mousedown for exactly this.
- */
-const showToolbar = computed(() => !props.compact || focused.value || !editor.value?.isEmpty);
-
-interface ToolSpec {
-  name: string;
-  icon: unknown;
-  label: string;
-  run: () => void;
-}
-
-const ALL: Record<EditorTool, () => ToolSpec> = {
-  bold: () => ({ name: "bold", icon: BoldIcon, label: props.labels.bold!, run: () => editor.value?.chain().focus().toggleBold().run() }),
-  italic: () => ({ name: "italic", icon: ItalicIcon, label: props.labels.italic!, run: () => editor.value?.chain().focus().toggleItalic().run() }),
-  underline: () => ({ name: "underline", icon: UnderlineIcon, label: props.labels.underline!, run: () => editor.value?.chain().focus().toggleUnderline().run() }),
-  strike: () => ({ name: "strike", icon: StrikeIcon, label: props.labels.strike!, run: () => editor.value?.chain().focus().toggleStrike().run() }),
-  code: () => ({ name: "code", icon: CodeIcon, label: props.labels.code!, run: () => editor.value?.chain().focus().toggleCode().run() }),
-  bulletList: () => ({ name: "bulletList", icon: BulletListIcon, label: props.labels.bulletList!, run: () => editor.value?.chain().focus().toggleBulletList().run() }),
-  orderedList: () => ({ name: "orderedList", icon: OrderedListIcon, label: props.labels.orderedList!, run: () => editor.value?.chain().focus().toggleOrderedList().run() }),
-  blockquote: () => ({ name: "blockquote", icon: QuoteIcon, label: props.labels.blockquote!, run: () => editor.value?.chain().focus().toggleBlockquote().run() }),
-  link: () => ({ name: "link", icon: LinkIcon, label: props.labels.link!, run: toggleLink }),
-  image: () => ({ name: "image", icon: ImageIcon, label: props.labels.attachImage!, run: pickImage }),
-};
-
-/** The chosen controls, with `image` split off so it can sit after a separator. */
-const marks = computed(() => props.tools.filter((t) => t !== "image").map((t) => ALL[t]()));
-const hasImage = computed(() => props.tools.includes("image"));
-
-onBeforeUnmount(() => editor.value?.destroy());
-
-/**
- * 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). This component IS the one dialog now; the
- * app uses it too.
- */
-async function addImage(file: File): Promise<void> {
-  if (uploading.value || pending.value) return;
-  try {
-    pendingName.value = file.name || "screenshot.png";
-    pending.value = await readDataUri(file);
-  } catch (e) {
-    emit("error", e instanceof Error ? e.message : "unreadable file");
-  }
-}
-
-/** The annotated image comes back as a data URI; upload THAT and insert it. */
-async function commitImage(dataUri: string): Promise<void> {
-  pending.value = null;
-  uploading.value = true;
-  try {
-    /*
-     * No uploader means the host wants the image inline — a composer on a
-     * ticket that does not exist yet, with nowhere to upload to. The data URI
-     * travels with the body and the server swaps it for a stored one once
-     * there is somewhere to put it.
-     */
-    const src = props.uploadImage
-      ? await props.uploadImage(dataUriToFile(dataUri, pendingName.value))
-      : dataUri;
-    editor.value?.chain().focus().setImage({ src, alt: pendingName.value }).run();
-  } catch (e) {
-    emit("error", e instanceof Error ? e.message : "upload failed");
-  } finally {
-    uploading.value = false;
-  }
-}
-
-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 here 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 });
-}
-
-function pickImage(): void {
-  fileInput.value?.click();
-}
-
-function onFile(event: Event): void {
-  const input = event.target as HTMLInputElement;
-  const file = input.files?.[0];
-  // Cleared so choosing the same file twice still fires `change`.
-  input.value = "";
-  if (file) void addImage(file);
-}
-
-function toggleLink(): void {
-  const current = editor.value;
-  if (!current) return;
-  const existing = current.getAttributes("link").href as string | undefined;
-  if (existing) {
-    current.chain().focus().unsetLink().run();
-    return;
-  }
-  const href = window.prompt(props.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)) {
-    emit("error", `${props.labels.link}: http(s) only`);
-    return;
-  }
-  current.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. The allowlist is what narrows an image to our own.
- */
-function value(): string {
-  const html = cleanHtml(editor.value?.getHTML() ?? "", props.host);
-  return htmlIsEmpty(html) ? "" : html;
-}
-
-function clear(): void {
-  editor.value?.commands.clearContent(true);
-}
-
-defineExpose({ value, clear, focus: () => editor.value?.commands.focus() });
-</script>
-
-<template>
-  <div class="lw-editor" :class="{ 'lw-editor--disabled': disabled }">
-    <!-- `compact` unmounts this on blur, which is why every button fires on
-         mousedown: on click it would disappear between the two and never
-         land. -->
-    <div v-if="showToolbar" class="lw-editor__tools">
-      <ToolbarButton
-        v-for="tool in marks"
-        :key="tool.name"
-        :label="tool.label"
-        :active="editor?.isActive(tool.name)"
-        :disabled="disabled"
-        @activate="tool.run()"
-      >
-        <component :is="tool.icon" />
-      </ToolbarButton>
-
-      <template v-if="hasImage">
-        <span class="lw-editor__sep" />
-        <ToolbarButton :label="labels.attachImage ?? ''" :disabled="disabled || uploading" @activate="pickImage">
-          <ImageIcon />
-        </ToolbarButton>
-      </template>
-      <span v-if="uploading" class="lw-editor__uploading">{{ labels.uploading ?? "" }}</span>
-    </div>
-
-    <EditorContent :editor="editor" class="lw-editor__content" />
-    <input ref="fileInput" type="file" accept="image/*" hidden @change="onFile" />
-
-    <ImageAnnotatorDialog
-      :src="pending"
-      :filename="pendingName"
-      :locale="locale"
-      @confirm="commitImage"
-      @cancel="pending = null"
-    />
-  </div>
-</template>