1
import { describe, expect, it } from "vitest";
2
import { getSchema } from "@tiptap/core";
3
import { DOMParser, DOMSerializer } from "@tiptap/pm/model";
4
import { createHeadlessEditorExtensions } from "@/shared/editor/schema";
5
 
6
const schema = getSchema(createHeadlessEditorExtensions());
7
 
8
describe("image brightness HTML round-trip", () => {
9
  it("preserves brightness, source, and caption through HTML", () => {
10
    const image = schema.nodes.image!.create({ src: "/uploads/screenshot", alt: "Screenshot", brightness: 75 });
11
    const container = document.createElement("div");
12
    container.append(DOMSerializer.fromSchema(schema).serializeNode(image));
13
    const rendered = container.querySelector("img")!;
14
 
15
    expect(rendered.dataset.brightness).toBe("75");
16
    expect(rendered.style.filter).toBe("brightness(0.75)");
17
    expect(DOMParser.fromSchema(schema).parse(container).firstChild?.attrs).toMatchObject({
18
      src: "/uploads/screenshot",
19
      alt: "Screenshot",
20
      brightness: 75,
21
    });
22
  });
23
 
24
  it("keeps older images at normal brightness and bounds imported values", () => {
25
    for (const [attribute, brightness] of [
26
      ["", 100],
27
      ['data-brightness="bad"', 100],
28
      ['data-brightness="0"', 25],
29
      ['data-brightness="200"', 100],
30
    ] as const) {
31
      const container = document.createElement("div");
32
      container.innerHTML = `<img src="/uploads/screenshot" ${attribute}>`;
33
      expect(DOMParser.fromSchema(schema).parse(container).firstChild?.attrs.brightness).toBe(brightness);
34
    }
35
    const container = document.createElement("div");
36
    container.append(
37
      DOMSerializer.fromSchema(schema).serializeNode(schema.nodes.image!.create({ src: "/uploads/old" })),
38
    );
39
    expect(container.querySelector("img")?.style.filter).toBe("");
40
    expect(container.querySelector("img")?.hasAttribute("data-brightness")).toBe(false);
41
  });
42
});