@gxp-dev/mod-ui 2.0.0 → 2.0.1

package/src/components/compositions/elements/editor/CodeEditor.vue

@@ -1,16 +1,30 @@
 <script setup lang="ts">
-/**
- * Props-driven code editor composition. Monospace `<textarea>` with a
- * "syntax highlighting coming soon" hint. Composes `FieldFrame` chrome
- * (label + helpText + errors).
- *
- * Self-contained — usable directly in any Vue app:
- *
- *   <CodeEditor v-model="source" language="typescript" />
- */
-import { Code2 } from "lucide-vue-next"
-import { Badge } from "@/components/ui/badge"
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue"
+import { useDark } from "@vueuse/core"
+import { basicSetup, EditorView } from "codemirror"
+import { Compartment, EditorState } from "@codemirror/state"
+import { oneDark } from "@codemirror/theme-one-dark"
+import { javascript } from "@codemirror/lang-javascript"
+import { html } from "@codemirror/lang-html"
+import { css } from "@codemirror/lang-css"
+import { json } from "@codemirror/lang-json"
+import { python } from "@codemirror/lang-python"
+import { sql } from "@codemirror/lang-sql"
+import { php } from "@codemirror/lang-php"
+import {
+  AlignLeft,
+  ChevronDown,
+  FileCode2,
+} from "lucide-vue-next"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Button } from "@/components/ui/button"
 import { FieldFrame } from "@/components/ui/field-frame"
+import { cn } from "@/lib/utils"
 
 export interface CodeEditorProps {
   modelValue?: string | null
@@ -24,20 +38,202 @@ export interface CodeEditorProps {
   disabled?: boolean
   helpText?: string
   errors?: string[]
+  /** Language for syntax highlighting. Defaults to "javascript". */
   language?: string
-  rows?: number
+  /** Fixed height for the editor area. If unset, min/max-height applies. */
+  height?: string
+  minHeight?: string
+  maxHeight?: string
 }
 
-withDefaults(defineProps<CodeEditorProps>(), {
+const props = withDefaults(defineProps<CodeEditorProps>(), {
   errors: () => [],
-  rows: 12,
+  language: "javascript",
+  minHeight: "12rem",
+  maxHeight: "40rem",
 })
 
-const model = defineModel<string | null>("modelValue")
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string): void
+}>()
 
-function onInput(event: Event): void {
-  const target = event.target as HTMLTextAreaElement | null
-  model.value = target?.value ?? ""
+// ---------------------------------------------------------------------------
+// Language registry
+// ---------------------------------------------------------------------------
+
+interface LangOption {
+  label: string
+  value: string
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ext: () => any
+}
+
+const LANGUAGES: LangOption[] = [
+  { label: "JavaScript", value: "javascript", ext: () => javascript() },
+  { label: "TypeScript", value: "typescript", ext: () => javascript({ typescript: true }) },
+  { label: "JSX", value: "jsx", ext: () => javascript({ jsx: true }) },
+  { label: "TSX", value: "tsx", ext: () => javascript({ jsx: true, typescript: true }) },
+  { label: "HTML", value: "html", ext: () => html() },
+  { label: "CSS", value: "css", ext: () => css() },
+  { label: "JSON", value: "json", ext: () => json() },
+  { label: "Python", value: "python", ext: () => python() },
+  { label: "SQL", value: "sql", ext: () => sql() },
+  { label: "PHP", value: "php", ext: () => php() },
+]
+
+function getLangExtension(lang: string) {
+  return LANGUAGES.find((l) => l.value === lang)?.ext() ?? javascript()
+}
+
+// ---------------------------------------------------------------------------
+// State
+// ---------------------------------------------------------------------------
+
+const editorEl = ref<HTMLElement | null>(null)
+let view: EditorView | null = null
+
+const isDark = useDark()
+const isInert = computed(() => Boolean(props.disabled || props.readonly))
+const hasErrors = computed(() => props.errors.length > 0)
+
+const activeLanguage = ref(props.language ?? "javascript")
+
+// CodeMirror Compartments allow hot-swapping extensions
+const langCompartment = new Compartment()
+const themeCompartment = new Compartment()
+const editableCompartment = new Compartment()
+const readonlyCompartment = new Compartment()
+
+// Prevent re-emitting when we programmatically set content
+let suppressEmit = false
+
+function buildTheme() {
+  return isDark.value ? oneDark : []
+}
+
+// ---------------------------------------------------------------------------
+// Mount / unmount
+// ---------------------------------------------------------------------------
+
+onMounted(() => {
+  if (!editorEl.value) return
+
+  const startDoc = props.modelValue ?? ""
+
+  const state = EditorState.create({
+    doc: startDoc,
+    extensions: [
+      basicSetup,
+      langCompartment.of(getLangExtension(activeLanguage.value)),
+      themeCompartment.of(buildTheme()),
+      editableCompartment.of(EditorView.editable.of(!isInert.value)),
+      readonlyCompartment.of(EditorState.readOnly.of(isInert.value)),
+      EditorView.updateListener.of((update) => {
+        if (update.docChanged && !suppressEmit) {
+          emit("update:modelValue", update.state.doc.toString())
+        }
+      }),
+      EditorView.theme({
+        "&": { fontSize: "0.8125rem" },
+        ".cm-scroller": {
+          fontFamily: "'ui-monospace', 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, Consolas, monospace",
+          overflow: "auto",
+          ...(props.height
+            ? { height: props.height }
+            : { minHeight: props.minHeight ?? "12rem", maxHeight: props.maxHeight ?? "40rem" }),
+        } as unknown as Record<string, string>,
+        ".cm-focused": { outline: "none" },
+      }),
+    ],
+  })
+
+  view = new EditorView({ state, parent: editorEl.value })
+})
+
+onBeforeUnmount(() => {
+  view?.destroy()
+  view = null
+})
+
+// ---------------------------------------------------------------------------
+// Reactivity
+// ---------------------------------------------------------------------------
+
+// External modelValue → editor
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (!view) return
+    const current = view.state.doc.toString()
+    const next = value ?? ""
+    if (current === next) return
+    suppressEmit = true
+    view.dispatch({
+      changes: { from: 0, to: view.state.doc.length, insert: next },
+    })
+    suppressEmit = false
+  },
+)
+
+// Dark mode toggle
+watch(isDark, () => {
+  view?.dispatch({ effects: themeCompartment.reconfigure(buildTheme()) })
+})
+
+// disabled/readonly
+watch(isInert, (v) => {
+  view?.dispatch({
+    effects: [
+      editableCompartment.reconfigure(EditorView.editable.of(!v)),
+      readonlyCompartment.reconfigure(EditorState.readOnly.of(v)),
+    ],
+  })
+})
+
+// Language change (programmatic)
+watch(activeLanguage, (lang) => {
+  view?.dispatch({ effects: langCompartment.reconfigure(getLangExtension(lang)) })
+})
+
+// language prop → activeLanguage (consumer controls)
+watch(
+  () => props.language,
+  (lang) => {
+    if (lang && lang !== activeLanguage.value) {
+      activeLanguage.value = lang
+    }
+  },
+)
+
+// ---------------------------------------------------------------------------
+// Actions
+// ---------------------------------------------------------------------------
+
+const activeLangLabel = computed(
+  () => LANGUAGES.find((l) => l.value === activeLanguage.value)?.label ?? activeLanguage.value,
+)
+
+const canFormatJson = computed(() => activeLanguage.value === "json")
+
+function setLanguage(lang: string): void {
+  activeLanguage.value = lang
+}
+
+function formatJson(): void {
+  if (!view) return
+  try {
+    const raw = view.state.doc.toString()
+    const formatted = JSON.stringify(JSON.parse(raw), null, 2)
+    if (formatted === raw) return
+    suppressEmit = true
+    view.dispatch({
+      changes: { from: 0, to: view.state.doc.length, insert: formatted },
+    })
+    suppressEmit = false
+    emit("update:modelValue", formatted)
+  } catch {
+    // Invalid JSON — ignore
+  }
 }
 </script>
 
@@ -51,26 +247,98 @@ function onInput(event: Event): void {
     :errors="errors"
     data-testid="code-editor"
   >
-    <div class="flex items-center gap-2 text-xs text-muted-foreground">
-      <Code2 class="h-3.5 w-3.5" />
-      <span>Plain code editor</span>
-      <Badge variant="outline" class="font-mono text-[10px]">
-        {{ language ?? "syntax highlighting coming soon" }}
-      </Badge>
-    </div>
-    <textarea
-      :id="id"
-      :name="name ?? undefined"
-      :placeholder="placeholder ?? '// type your code here'"
-      :readonly="readonly"
-      :disabled="disabled"
-      :required="required"
-      :rows="rows"
-      :value="model ?? ''"
+    <div
+      :class="cn(
+        'overflow-hidden rounded-md border border-input shadow-sm',
+        hasErrors ? 'border-destructive ring-1 ring-destructive' : '',
+        isInert ? 'opacity-60' : '',
+      )"
       :data-element-name="name ?? undefined"
-      class="font-mono text-sm rounded-md border border-input bg-background px-3 py-2 shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
-      :class="errors.length ? 'border-destructive ring-destructive' : ''"
-      @input="onInput"
-    />
+    >
+      <!-- Toolbar -->
+      <div
+        class="flex items-center gap-1 border-b border-border/60 bg-muted/40 px-2 py-1"
+        :class="isInert ? 'pointer-events-none' : ''"
+      >
+        <FileCode2 class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+
+        <!-- Language selector -->
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              class="h-6 gap-1 px-2 text-xs font-medium text-muted-foreground hover:text-foreground"
+              data-testid="code-editor-lang-trigger"
+            >
+              {{ activeLangLabel }}
+              <ChevronDown class="h-3 w-3" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" class="w-40">
+            <DropdownMenuItem
+              v-for="lang in LANGUAGES"
+              :key="lang.value"
+              :class="activeLanguage === lang.value ? 'bg-muted font-medium' : ''"
+              @click="setLanguage(lang.value)"
+            >
+              {{ lang.label }}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <!-- Format JSON button -->
+        <Button
+          v-if="canFormatJson"
+          type="button"
+          variant="ghost"
+          size="sm"
+          class="h-6 gap-1 px-2 text-xs text-muted-foreground hover:text-foreground"
+          title="Format JSON"
+          data-testid="code-editor-format"
+          @click="formatJson"
+        >
+          <AlignLeft class="h-3 w-3" />
+          Format
+        </Button>
+      </div>
+
+      <!-- CodeMirror mount point -->
+      <div
+        ref="editorEl"
+        class="code-editor-cm"
+        :data-testid="'code-editor-content'"
+      />
+    </div>
   </FieldFrame>
 </template>
+
+<style scoped>
+/* Scoped overrides — keep CodeMirror inside our border/radius container */
+:deep(.cm-editor) {
+  height: 100%;
+}
+
+:deep(.cm-editor.cm-focused) {
+  outline: none;
+}
+
+:deep(.cm-gutters) {
+  border-right-color: var(--border);
+  background-color: var(--muted);
+}
+
+:deep(.cm-activeLineGutter) {
+  background-color: color-mix(in oklch, var(--muted) 80%, var(--background));
+}
+
+:deep(.cm-selectionBackground),
+:deep(.cm-focused .cm-selectionBackground) {
+  background-color: color-mix(in oklch, var(--primary) 25%, transparent) !important;
+}
+
+:deep(.cm-cursor) {
+  border-left-color: var(--foreground);
+}
+</style>

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)
   })
 })