add markdown field

Author: preaction

lib/Yancy/Editor/src/edit-form.svelte

@@ -4,6 +4,7 @@
     JSONSchema7TypeName,
   } from "json-schema";
   import type { HTMLFormAttributes } from "svelte/elements";
+  import MarkdownField from "./markdown-field.svelte";
 
   function isNumberType(schema: JSONSchema): boolean {
     const typeName =
@@ -99,6 +100,9 @@
           value={value[col.field]}
           disabled={col.schema.readOnly}
         />
+      {:else if col.schema.type == "string" && col.schema.format == "markdown"}
+        <MarkdownField id="field-{col.field}" bind:value={value[col.field]}
+        ></MarkdownField>
       {:else if col.schema.type == "string" && col.schema.format == "date"}
         <input
           type="date"

lib/Yancy/Editor/src/markdown-field.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { marked } from "marked";
+  let { id, value = $bindable("") }: { id: string; value: string } = $props();
+  let showHtml: boolean = $state(false);
+</script>
+
+<div>
+  <div>
+    <button
+      onclick={() => {
+        showHtml = !showHtml;
+      }}>Preview</button
+    >
+  </div>
+  <div>
+    <textarea
+      bind:value
+      {id}
+      class={showHtml ? "hidden" : ""}
+      placeholder="Markdown content"
+    ></textarea>
+    <div data-testid="markdown-preview" class={!showHtml ? "hidden" : ""}>
+      {@html marked(value)}
+    </div>
+  </div>
+</div>
+
+<style>
+  .hidden {
+    display: none;
+  }
+</style>

package-lock.json

@@ -17,6 +17,7 @@
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/svelte": "^5.3.1",
+    "@testing-library/user-event": "^14.6.1",
     "@tsconfig/svelte": "^5.0.5",
     "@types/json-schema": "^7.0.15",
     "@types/node": "^24.10.0",

package.json

@@ -37,6 +37,18 @@ describe("EditForm", () => {
         },
       },
 
+      {
+        title: "shows correct input for markdown string",
+        schema: { type: "string", format: "markdown" },
+        value: "stringValue",
+        check: async (testCase: TestCase): Promise<void> => {
+          const field = screen.getByLabelText("fieldName");
+          expect(field).toBeVisible();
+          expect(field).toBeInstanceOf(HTMLTextAreaElement);
+          expect(field).toHaveValue(testCase.value);
+        },
+      },
+
       {
         title: "shows correct input for string enum",
         schema: { type: "string", enum: ["enumOne", "enumTwo"] },

t/editor/edit-form.spec.ts

@@ -0,0 +1,40 @@
+import { render, screen } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { expect, test, describe } from "vitest";
+
+import MarkdownField from "../../lib/Yancy/Editor/src/markdown-field.svelte";
+
+describe("MarkdownField", () => {
+  test("shows markdown field", async () => {
+    render(MarkdownField, { id: "mdfield", value: "# heading\n" });
+    const field = screen.getByPlaceholderText("Markdown content");
+    expect(field).toBeInstanceOf(HTMLTextAreaElement);
+    expect(field).toHaveValue("# heading\n");
+
+    const button = screen.getByText("Preview");
+    expect(button).toBeVisible();
+  });
+  test("preview button shows rendered markdown", async () => {
+    render(MarkdownField, { id: "mdfield", value: "# heading\n\nbody" });
+    screen.getByText("Preview").click();
+    const preview = screen.getByTestId("markdown-preview");
+    expect(preview).toBeVisible();
+    expect(preview).toContainHTML("<h1>heading</h1>");
+  });
+  test("value is updated", async () => {
+    const user = userEvent.setup();
+    let value = "# heading\n\nbody";
+    render(MarkdownField, {
+      id: "mdfield",
+      get value() {
+        return value;
+      },
+      set value(nextValue) {
+        value = nextValue;
+      },
+    });
+    const field = screen.getByPlaceholderText("Markdown content");
+    await user.type(field, "\n\n## second heading\n");
+    expect(value).toMatch(/## second heading/);
+  });
+});