import { expect, test } from "bun:test";
import { Window } from "happy-dom";
import { readBuilderText, mountInlineRichText } from "../src/rich-text.ts";

test("inline rich text extracts only supported semantics", () => {
  const window = new Window();
  const element = window.document.createElement("p");
  element.innerHTML =
    "Hello <strong>bold <em>and italic</em></strong><br><u>line</u><script>bad()</script>";
  expect(readBuilderText(element as unknown as HTMLElement)).toEqual([
    { text: "Hello " },
    { text: "bold ", bold: true },
    { text: "and italic", bold: true, italic: true },
    { text: "\n" },
    { text: "line", underline: true },
  ]);
});

test("rich editor commits semantic input and cleans up on Done", () => {
  const window = new Window();
  const element = window.document.createElement("p");
  window.document.body.append(element);
  const updates: unknown[] = [];
  let finished = 0;
  mountInlineRichText(
    window.document as unknown as Document,
    element as unknown as HTMLElement,
    "hello",
    (text, runs) => updates.push({ text, runs }),
    () => finished++,
  );
  expect(element.contentEditable).toBe("true");
  element.innerHTML = "<strong>bold</strong>";
  element.dispatchEvent(new window.Event("input"));
  expect(updates).toEqual([{ text: "bold", runs: [{ text: "bold", bold: true }] }]);
  (window.document.querySelector('button[aria-label="Done"]') as any).click();
  expect(finished).toBe(1);
  expect(element.contentEditable).toBe("false");
  expect(window.document.querySelector('[role="toolbar"]')).toBeNull();
});