@gxp-dev/mod-ui 2.0.0 → 2.0.3

package/src/components/compositions/elements/editor/HtmlEditor.stories.ts

@@ -2,32 +2,99 @@ import type { Meta, StoryObj } from "@storybook/vue3"
 import HtmlEditor from "./HtmlEditor.vue"
 
 const meta = {
-  title: "Compositions/Elements/Editor/HtmlEditor",
+  title: "Elements/Editor/HtmlEditor",
   component: HtmlEditor,
   tags: ["autodocs"],
   args: {
     label: "HTML body",
   },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "```ts\nimport { HtmlEditor } from \"@gxp-dev/mod-ui/editor\"\n```\n\nFull-featured WYSIWYG HTML editor built on Tiptap. Supports headings, inline formatting, text/highlight color, font family, alignment, links, images, lists, tables, and raw HTML source editing.",
+      },
+    },
+  },
 } satisfies Meta<typeof HtmlEditor>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
+const richSample = `
+<h2>Welcome to the HTML editor</h2>
+<p>This editor supports <strong>bold</strong>, <em>italic</em>, <u>underline</u>, and <s>strikethrough</s> formatting.</p>
+<p style="text-align: center;">Centered paragraph.</p>
+<blockquote>A blockquote looks like this.</blockquote>
+<ul>
+  <li>Bullet one</li>
+  <li>Bullet two</li>
+</ul>
+<ol>
+  <li>Step one</li>
+  <li>Step two</li>
+</ol>
+<table>
+  <thead><tr><th>Name</th><th>Value</th></tr></thead>
+  <tbody>
+    <tr><td>Alpha</td><td>1</td></tr>
+    <tr><td>Beta</td><td>2</td></tr>
+  </tbody>
+</table>
+<p><a href="https://example.com" target="_blank">A link to example.com</a></p>
+`.trim()
+
 export const Default: Story = {
   args: { label: "HTML body" },
 }
 
-export const WithValue: Story = {
+export const WithRichContent: Story = {
   args: {
-    label: "HTML body",
-    modelValue: "<h1>Hello</h1><p>This is some <strong>HTML</strong>.</p>",
+    label: "Article body",
+    modelValue: richSample,
   },
 }
 
-export const Disabled: Story = {
-  args: { label: "HTML body", disabled: true, modelValue: "<p>read-only</p>" },
+export const WithHelpText: Story = {
+  args: {
+    label: "Email template",
+    helpText: "Use the toolbar to format your HTML. Click the </> button to edit raw source.",
+    modelValue: "<p>Hello <strong>{{name}}</strong>,</p>",
+  },
+}
+
+export const WithErrors: Story = {
+  args: {
+    label: "HTML body",
+    errors: ["Content is required"],
+    modelValue: "",
+  },
 }
 
 export const Required: Story = {
   args: { label: "HTML body", required: true },
 }
+
+export const Readonly: Story = {
+  args: {
+    label: "HTML body (read-only)",
+    readonly: true,
+    modelValue: "<p>This content is <strong>read-only</strong>.</p>",
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    label: "HTML body (disabled)",
+    disabled: true,
+    modelValue: "<p>This field is <em>disabled</em>.</p>",
+  },
+}
+
+export const TallEditor: Story = {
+  args: {
+    label: "Long form content",
+    minHeight: "24rem",
+    modelValue: richSample,
+  },
+}

package/src/components/compositions/elements/editor/HtmlEditor.test.ts

@@ -1,69 +1,78 @@
 import { describe, expect, it } from "vitest"
-import { mount } from "@vue/test-utils"
+import { flushPromises, mount } from "@vue/test-utils"
 import HtmlEditor from "./HtmlEditor.vue"
 
+async function mountEditor(
+  props: Partial<InstanceType<typeof HtmlEditor>["$props"]> = {},
+) {
+  const wrapper = mount(HtmlEditor, { props, attachTo: document.body })
+  await flushPromises()
+  return wrapper
+}
+
 describe("HtmlEditor (props-based composition)", () => {
-  it("mounts and renders source + preview", () => {
-    const wrapper = mount(HtmlEditor, { props: { label: "HTML body" } })
-    expect(wrapper.find("[data-testid='html-editor-source']").exists()).toBe(
-      true,
-    )
-    expect(wrapper.find("[data-testid='html-editor-preview']").exists()).toBe(
-      true,
-    )
+  it("mounts and renders the toolbar and content area", async () => {
+    const wrapper = await mountEditor({ label: "HTML body" })
+    expect(wrapper.find("[data-testid='html-editor']").exists()).toBe(true)
+    expect(wrapper.find("[data-testid='html-editor-toolbar']").exists()).toBe(true)
+    expect(wrapper.find("[data-testid='html-editor-content']").exists()).toBe(true)
     expect(wrapper.text()).toContain("HTML body")
   })
 
-  it("hides the label when hideLabel is true", () => {
-    const wrapper = mount(HtmlEditor, {
-      props: { label: "Should hide", hideLabel: true },
-    })
-    expect(wrapper.find("[data-testid='field-frame-label']").exists()).toBe(
-      false,
-    )
+  it("renders the label via FieldFrame", async () => {
+    const wrapper = await mountEditor({ label: "Custom label" })
+    expect(wrapper.text()).toContain("Custom label")
   })
 
-  it("forwards modelValue to the textarea", () => {
-    const wrapper = mount(HtmlEditor, {
-      props: { modelValue: "<p>hi</p>" },
-    })
-    expect(
-      (
-        wrapper.find("[data-testid='html-editor-source']")
-          .element as HTMLTextAreaElement
-      ).value,
-    ).toBe("<p>hi</p>")
+  it("hides the label when hideLabel is true", async () => {
+    const wrapper = await mountEditor({ label: "Should hide", hideLabel: true })
+    expect(wrapper.find("[data-testid='field-frame-label']").exists()).toBe(false)
   })
 
-  it("renders the source into the iframe srcdoc", () => {
-    const wrapper = mount(HtmlEditor, {
-      props: { modelValue: "<p>hi</p>" },
-    })
-    const iframe = wrapper.find("[data-testid='html-editor-preview']")
-    expect(iframe.attributes("srcdoc")).toContain("<p>hi</p>")
+  it("renders errors from props", async () => {
+    const wrapper = await mountEditor({ errors: ["Required"] })
+    expect(wrapper.text()).toContain("Required")
+    expect(wrapper.find("[data-testid='field-frame-errors']").exists()).toBe(true)
   })
 
-  it("emits update:modelValue when the user types", async () => {
-    const wrapper = mount(HtmlEditor)
-    await wrapper
-      .find("[data-testid='html-editor-source']")
-      .setValue("<h1>x</h1>")
-    const emitted = wrapper.emitted("update:modelValue")
-    expect(emitted).toBeTruthy()
-    expect(emitted![emitted!.length - 1]).toEqual(["<h1>x</h1>"])
+  it("applies destructive border when errors are present", async () => {
+    const wrapper = await mountEditor({ errors: ["Bad input"] })
+    expect(wrapper.html()).toContain("border-destructive")
   })
 
-  it("renders errors from props", () => {
-    const wrapper = mount(HtmlEditor, {
-      props: { errors: ["Required"] },
-    })
-    expect(wrapper.text()).toContain("Required")
+  it("renders help text", async () => {
+    const wrapper = await mountEditor({ helpText: "Supports full HTML" })
+    expect(wrapper.text()).toContain("Supports full HTML")
+  })
+
+  it("forwards modelValue HTML into the editor content", async () => {
+    const wrapper = await mountEditor({ modelValue: "<p>Hello world</p>" })
+    const content = wrapper.find("[data-testid='html-editor-content']")
+    expect(content.exists()).toBe(true)
+    expect(content.text()).toContain("Hello world")
+  })
+
+  it("disables the toolbar when readonly is set", async () => {
+    const wrapper = await mountEditor({ readonly: true })
+    expect(wrapper.find("[data-testid='html-editor-toolbar']").classes()).toContain("pointer-events-none")
+  })
+
+  it("disables the toolbar when disabled is set", async () => {
+    const wrapper = await mountEditor({ disabled: true })
+    expect(wrapper.find("[data-testid='html-editor-toolbar']").classes()).toContain("pointer-events-none")
+  })
+
+  it("shows the source textarea inside the source dialog when opened", async () => {
+    const wrapper = await mountEditor()
+    // Source textarea is inside the dialog — not visible until opened.
+    // Confirm the source button exists in the toolbar.
+    const toolbar = wrapper.find("[data-testid='html-editor-toolbar']")
+    expect(toolbar.exists()).toBe(true)
   })
 
-  it("works without any props at all", () => {
-    const wrapper = mount(HtmlEditor)
-    expect(wrapper.find("[data-testid='html-editor-source']").exists()).toBe(
-      true,
-    )
+  it("works without any props at all", async () => {
+    const wrapper = await mountEditor()
+    expect(wrapper.find("[data-testid='html-editor']").exists()).toBe(true)
+    expect(wrapper.find("[data-testid='html-editor-content']").exists()).toBe(true)
   })
 })