lightnet 3.10.5 → 3.10.6

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # lightnet
 
+## 3.10.6
+
+### Patch Changes
+
+- [#333](https://github.com/LightNetDev/LightNet/pull/333) [`539a377`](https://github.com/LightNetDev/LightNet/commit/539a377702df9213d0869ae63646f569c10b1867) Thanks [@smn-cds](https://github.com/smn-cds)! - Update dependencies
+
 ## 3.10.5
 
 ### Patch Changes

package/__e2e__/admin.spec.ts

@@ -2,9 +2,8 @@ import { readFile } from "node:fs/promises"
 
 import { expect, type Page } from "@playwright/test"
 
-import { lightnetTest } from "./test-utils"
+import { test } from "./basics-fixture"
 
-const test = lightnetTest("./fixtures/basics/")
 const faithfulFreestyleMediaUrl = new URL(
   "./fixtures/basics/src/content/media/faithful-freestyle--en.json",
   import.meta.url,
@@ -13,9 +12,9 @@ const faithfulFreestyleMediaUrl = new URL(
 test.describe("Edit button on details page", () => {
   test("Should not show `Edit` button on details page by default.", async ({
     page,
-    startLightnet,
+    lightnet,
   }) => {
-    await startLightnet()
+    await lightnet()
 
     await page.getByRole("link", { name: "Faithful Freestyle" }).click()
     await expect(
@@ -28,9 +27,9 @@ test.describe("Edit button on details page", () => {
 
   test("Should show `Edit` button on book details page after visiting `/en/admin/` path.", async ({
     page,
-    startLightnet,
+    lightnet,
   }) => {
-    const ln = await startLightnet()
+    const ln = await lightnet()
 
     await page.goto(ln.resolveURL("/en/admin/"))
     await expect(
@@ -52,11 +51,10 @@ test.describe("Edit button on details page", () => {
 
   test("Should show `Edit` button on video details page after visiting `/en/admin/` path.", async ({
     page,
-    startLightnet,
+    lightnet,
   }) => {
-    const ln = await startLightnet()
+    const ln = await lightnet("/en/admin/")
 
-    await page.goto(ln.resolveURL("/en/admin/"))
     await expect(
       page.getByText("Admin features are enabled now.", { exact: true }),
     ).toBeVisible()
@@ -76,11 +74,10 @@ test.describe("Edit button on details page", () => {
 
   test("Should show `Edit` button on audio details page after visiting `/en/admin/` path.", async ({
     page,
-    startLightnet,
+    lightnet,
   }) => {
-    const ln = await startLightnet()
+    const ln = await lightnet("/en/admin/")
 
-    await page.goto(ln.resolveURL("/en/admin/"))
     await expect(
       page.getByText("Admin features are enabled now.", { exact: true }),
     ).toBeVisible()
@@ -100,12 +97,10 @@ test.describe("Edit button on details page", () => {
 
   test("Edit button on details page should navigate to media item edit page", async ({
     page,
-    startLightnet,
+    lightnet,
   }) => {
-    const ln = await startLightnet()
-
-    await page.goto(ln.resolveURL("/en/admin/"))
-    await page.goto(ln.resolveURL("/en/media/faithful-freestyle--en"))
+    const ln = await lightnet("/en/admin/")
+    await ln.goto("/en/media/faithful-freestyle--en")
 
     const editButton = page.locator("#edit-btn")
     await expect(editButton).toBeVisible()
@@ -151,13 +146,10 @@ test.describe("Media item edit page", () => {
       page.getByRole("button", { name: "Published" }).first(),
     ).toBeVisible()
 
-  test("should edit title", async ({ page, startLightnet }) => {
-    const ln = await startLightnet()
-
+  test("should edit title", async ({ page, lightnet }) => {
+    await lightnet("/en/admin/media/faithful-freestyle--en")
     const writeFileRequest = await recordWriteFile(page)
 
-    await page.goto(ln.resolveURL("/en/admin/media/faithful-freestyle--en"))
-
     const updatedTitle = "Faithful Freestyle (Edited)"
     const titleInput = page.getByLabel("Title")
     await expect(titleInput).toHaveValue("Faithful Freestyle")
@@ -182,13 +174,11 @@ test.describe("Media item edit page", () => {
     await expectPublishedMessage(page)
   })
 
-  test("Should update media type", async ({ page, startLightnet }) => {
-    const ln = await startLightnet()
+  test("Should update media type", async ({ page, lightnet }) => {
+    await lightnet("/en/admin/media/faithful-freestyle--en")
     const writeFileRequest = await recordWriteFile(page)
 
-    await page.goto(ln.resolveURL("/en/admin/media/faithful-freestyle--en"))
-
-    const typeSelect = page.getByLabel("Type")
+    const typeSelect = page.getByLabel("Type").first()
     await expect(typeSelect).toHaveValue("book")
     await typeSelect.selectOption("video")
 
@@ -207,12 +197,10 @@ test.describe("Media item edit page", () => {
     await expectPublishedMessage(page)
   })
 
-  test("Should update author name", async ({ page, startLightnet }) => {
-    const ln = await startLightnet()
+  test("Should update author name", async ({ page, lightnet }) => {
+    await lightnet("/en/admin/media/faithful-freestyle--en")
     const writeFileRequest = await recordWriteFile(page)
 
-    await page.goto(ln.resolveURL("/en/admin/media/faithful-freestyle--en"))
-
     const authorsFieldset = page.getByRole("group", { name: "Authors" })
     const firstAuthorInput = authorsFieldset.getByRole("textbox").first()
     const updatedAuthor = "Sk8 Ministries International"
@@ -234,12 +222,10 @@ test.describe("Media item edit page", () => {
     await expectPublishedMessage(page)
   })
 
-  test("Should add author", async ({ page, startLightnet }) => {
-    const ln = await startLightnet()
+  test("Should add author", async ({ page, lightnet }) => {
+    await lightnet("/en/admin/media/faithful-freestyle--en")
     const writeFileRequest = await recordWriteFile(page)
 
-    await page.goto(ln.resolveURL("/en/admin/media/faithful-freestyle--en"))
-
     const authorsFieldset = page.getByRole("group", { name: "Authors" })
     const addAuthorButton = page.getByRole("button", { name: "Add Author" })
     await addAuthorButton.click()
@@ -262,12 +248,10 @@ test.describe("Media item edit page", () => {
     await expectPublishedMessage(page)
   })
 
-  test("Should remove author", async ({ page, startLightnet }) => {
-    const ln = await startLightnet()
+  test("Should remove author", async ({ page, lightnet }) => {
+    await lightnet("/en/admin/media/faithful-freestyle--en")
     const writeFileRequest = await recordWriteFile(page)
 
-    await page.goto(ln.resolveURL("/en/admin/media/faithful-freestyle--en"))
-
     const authorsFieldset = page.getByRole("group", { name: "Authors" })
     const addAuthorButton = page.getByRole("button", { name: "Add Author" })
     const replacementAuthor = "Skate Evangelists"
@@ -297,10 +281,9 @@ test.describe("Media item edit page", () => {
 
   test("should show error message if common id is set empty", async ({
     page,
-    startLightnet,
+    lightnet,
   }) => {
-    const ln = await startLightnet()
-    await page.goto(ln.resolveURL("/en/admin/media/faithful-freestyle--en"))
+    await lightnet("/en/admin/media/faithful-freestyle--en")
 
     const commonIdInput = page.getByLabel("Common ID")
     await expect(commonIdInput).toHaveValue("faithful-freestyle")
@@ -317,10 +300,9 @@ test.describe("Media item edit page", () => {
 
   test("should focus invalid field when submitting invalid form data", async ({
     page,
-    startLightnet,
+    lightnet,
   }) => {
-    const ln = await startLightnet()
-    await page.goto(ln.resolveURL("/en/admin/media/faithful-freestyle--en"))
+    await lightnet("/en/admin/media/faithful-freestyle--en")
 
     const categoriesFieldset = page.getByRole("group", { name: "Categories" })
     await page.getByRole("button", { name: "Add Category" }).click()
@@ -341,10 +323,9 @@ test.describe("Media item edit page", () => {
 
   test("should not allow assigning duplicate categories", async ({
     page,
-    startLightnet,
+    lightnet,
   }) => {
-    const ln = await startLightnet()
-    await page.goto(ln.resolveURL("/en/admin/media/faithful-freestyle--en"))
+    await lightnet("/en/admin/media/faithful-freestyle--en")
 
     const categoriesFieldset = page.getByRole("group", { name: "Categories" })
     await page.getByRole("button", { name: "Add Category" }).click()

package/__e2e__/{test-utils.ts → basics-fixture.ts}

@@ -24,7 +24,6 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
 import { fileURLToPath } from "node:url"
 
 import { type Page, test as baseTest } from "@playwright/test"
@@ -34,30 +33,26 @@ export { expect, type Locator } from "@playwright/test"
 
 process.env.ASTRO_TELEMETRY_DISABLED = "true"
 process.env.ASTRO_DISABLE_UPDATE_CHECK = "true"
-export function lightnetTest(fixturePath: string) {
-  const root = fileURLToPath(new URL(fixturePath, import.meta.url))
-
-  let server: Server | null = null
-  const test = baseTest.extend<{
-    startLightnet: (path?: string) => Promise<LightNetPage>
-  }>({
-    startLightnet: ({ page }, use) =>
-      use(async (path) => {
-        if (!server) {
-          await build({ logLevel: "error", root })
-          server = await preview({ logLevel: "error", root })
-        }
-        const ln = new LightNetPage(server, page)
-        await ln.goto(path ?? "/")
-        return ln
-      }),
-  })
+const root = fileURLToPath(new URL("./fixtures/basics/", import.meta.url))
 
-  test.afterAll(async () => {
-    await server?.stop()
-  })
+let server: Server | null = null
+const test = baseTest.extend<{
+  lightnet: (path?: string) => Promise<LightNetPage>
+}>({
+  lightnet: ({ page }, use) =>
+    use(async (path) => {
+      if (!server) {
+        await build({ logLevel: "error", root })
+        server = await preview({ logLevel: "error", root })
+      }
+      const ln = new LightNetPage(server, page)
+      await ln.goto(path ?? "/")
+      return ln
+    }),
+})
 
-  return test
+const teardown = async () => {
+  await server?.stop()
 }
 
 // A Playwright test fixture accessible from within all tests.
@@ -78,3 +73,5 @@ class LightNetPage {
 }
 
 type Server = Awaited<ReturnType<typeof preview>>
+
+export { teardown, test }

package/__e2e__/fixtures/basics/node_modules/.bin/astro

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.15.5_@types+node@24.10.1_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.2_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.15.5_@types+node@24.10.1_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.2_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.15.8_@types+node@24.10.1_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.2_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.15.8_@types+node@24.10.1_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.2_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.15.5_@types+node@24.10.1_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.2_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.15.5_@types+node@24.10.1_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.2_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.15.8_@types+node@24.10.1_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.2_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.15.8_@types+node@24.10.1_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.2_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../astro/astro.js" "$@"

package/__e2e__/fixtures/basics/package.json

@@ -7,8 +7,8 @@
     "@astrojs/react": "^4.4.2",
     "@astrojs/tailwind": "^6.0.2",
     "@lightnet/decap-admin": "^3.1.4",
-    "astro": "^5.15.5",
-    "lightnet": "^3.10.4",
+    "astro": "^5.15.8",
+    "lightnet": "^3.10.5",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "sharp": "^0.34.5",

package/__e2e__/fixtures/basics/src/content/media/faithful-freestyle--en.json

@@ -9,5 +9,5 @@
   "language": "en",
   "categories": ["christian-living"],
   "collections": [{ "collection": "how-to-articles" }],
-  "description": "*How to: Faithful Freestyle* empowers you to express your Christianity through the unique and creative outlet of skateboarding. This book includes:\n\n- **Creative ways to incorporate faith** into your skating routines\n- **Stories of freestyle skaters** who honor God through their sport\n- **Practical advice on witnessing** to others in the skateboarding scene\n- **Inspirational devotions** designed for skaters\n\nEmbrace a faithful freestyle and let every trick and turn reflect your devotion to Christ."
+  "description": "*How to: Faithful Freestyle* empowers you to express your Christianity through the unique and creative outlet of skateboarding. This book includes:\n\n* **Creative ways to incorporate faith** into your skating routines\n* **Stories of freestyle skaters** who honor God through their sport\n* **Practical advice on witnessing** to others in the skateboarding scene\n* **Inspirational devotions** designed for skaters\n\nEmbrace a faithful freestyle and let every trick and turn reflect your devotion to Christ."
 }

package/__e2e__/fixtures/basics/src/content/media/skate-sounds--en.json

@@ -11,5 +11,5 @@
   "image": "./images/cover.jpg",
   "language": "en",
   "categories": ["christian-living"],
-  "description": "A vibrant collection of authentic skate park sounds to energize your projects and playlists.\n\n**Highlights:**\n- Real-world skating ambience\n- Perfect for creative mixes\n- Inspiring background audio for worship gatherings"
+  "description": "A vibrant collection of authentic skate park sounds to energize your projects and playlists.\n\n**Highlights:**\n* Real-world skating ambience\n* Perfect for creative mixes\n* Inspiring background audio for worship gatherings"
 }

package/__e2e__/global.teardown.ts

@@ -0,0 +1,5 @@
+import { teardown } from "./basics-fixture"
+
+export default async function globalTeardown() {
+  await teardown()
+}

package/__e2e__/homepage.spec.ts

@@ -1,34 +1,32 @@
 import { expect } from "@playwright/test"
 
-import { lightnetTest } from "./test-utils"
+import { test } from "./basics-fixture"
 
-const test = lightnetTest("./fixtures/basics/")
-
-test("Should have title set", async ({ page, startLightnet }) => {
-  await startLightnet()
+test("Should have title set", async ({ page, lightnet }) => {
+  await lightnet()
   await expect(page).toHaveTitle("Basic Test")
 })
 
 test("Should have header title that navigates to home page", async ({
   page,
-  startLightnet,
+  lightnet,
 }) => {
-  const ln = await startLightnet()
+  const ln = await lightnet()
   await page.getByRole("link", { name: "Basic Test" }).click()
 
   await expect(page).toHaveURL(ln.resolveURL("/en/"))
 })
 
-test("Should have item section", async ({ page, startLightnet }) => {
-  await startLightnet()
+test("Should have item section", async ({ page, lightnet }) => {
+  await lightnet()
   await expect(page.getByRole("heading", { name: "All items" })).toBeVisible()
 })
 
 test("Should navigate to search page from main menu", async ({
   page,
-  startLightnet,
+  lightnet,
 }) => {
-  const ln = await startLightnet()
+  const ln = await lightnet()
   await expect(
     page.getByRole("button", { name: "Open Main Menu" }),
   ).toBeVisible()
@@ -42,8 +40,8 @@ test("Should navigate to search page from main menu", async ({
   await expect(page.getByRole("heading", { name: "Search" })).toBeVisible()
 })
 
-test("Should switch languages", async ({ page, startLightnet }) => {
-  const ln = await startLightnet()
+test("Should switch languages", async ({ page, lightnet }) => {
+  const ln = await lightnet()
 
   await page.getByLabel("Select language").click()
   await page.getByRole("link", { name: "Deutsch" }).click()
@@ -57,9 +55,9 @@ test("Should switch languages", async ({ page, startLightnet }) => {
 
 test("Should verify EN Detail media page url and title", async ({
   page,
-  startLightnet,
+  lightnet,
 }) => {
-  const ln = await startLightnet()
+  const ln = await lightnet()
 
   await page.getByRole("link", { name: "Faithful Freestyle" }).click()
   await expect(
@@ -80,9 +78,9 @@ test("Should verify EN Detail media page url and title", async ({
 
 test("Should verify DE Detail media page url and title", async ({
   page,
-  startLightnet,
+  lightnet,
 }) => {
-  const ln = await startLightnet()
+  const ln = await lightnet()
 
   await page.getByLabel("Select language").click()
   await page.getByRole("link", { name: "Deutsch" }).click()
@@ -105,9 +103,9 @@ test("Should verify DE Detail media page url and title", async ({
 
 test("Should show `Powered by LightNet` in footer", async ({
   page,
-  startLightnet,
+  lightnet,
 }) => {
-  await startLightnet()
+  await lightnet()
 
   const footerLink = page
     .getByRole("contentinfo")

package/__e2e__/search.spec.ts

@@ -1,14 +1,12 @@
 import { expect } from "@playwright/test"
 
-import { lightnetTest } from "./test-utils"
-
-const test = lightnetTest("./fixtures/basics/")
+import { test } from "./basics-fixture"
 
 test("Search should have heading section and URL", async ({
   page,
-  startLightnet,
+  lightnet,
 }) => {
-  const ln = await startLightnet()
+  const ln = await lightnet()
 
   await page.getByLabel("Search").click()
   await expect(page.getByRole("heading", { name: "Search" })).toBeVisible()

package/package.json

@@ -3,7 +3,7 @@
   "description": "LightNet makes it easy to run your own digital media library.",
   "type": "module",
   "license": "MIT",
-  "version": "3.10.5",
+  "version": "3.10.6",
   "repository": {
     "type": "git",
     "url": "https://github.com/LightNetDev/lightnet",
@@ -50,6 +50,7 @@
     "@hookform/resolvers": "^5.2.2",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify/tailwind": "^1.2.0",
+    "@mdxeditor/editor": "^3.49.1",
     "@tailwindcss/typography": "^0.5.19",
     "@tanstack/react-virtual": "^3.13.12",
     "daisyui": "^4.12.24",
@@ -64,9 +65,9 @@
   "devDependencies": {
     "@playwright/test": "^1.56.1",
     "@types/node": "^22.19.1",
-    "@types/react": "^19.2.4",
+    "@types/react": "^19.2.5",
     "typescript": "^5.9.3",
-    "vitest": "^4.0.8"
+    "vitest": "^4.0.9"
   },
   "engines": {
     "node": ">=22"

package/playwright.config.ts

@@ -5,6 +5,7 @@ import { defineConfig, devices } from "@playwright/test"
  */
 export default defineConfig({
   testDir: "./__e2e__",
+  globalTeardown: "./__e2e__/global.teardown.ts",
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
   /* Retry on CI only */

package/src/admin/components/form/Input.tsx

@@ -8,12 +8,14 @@ import { useFieldError } from "./hooks/use-field-error"
 export default function Input<TFieldValues extends FieldValues>({
   name,
   label,
+  defaultValue,
   hint,
   control,
   type = "text",
 }: {
   name: Path<TFieldValues>
   label: string
+  defaultValue?: string
   hint?: string
   control: Control<TFieldValues>
   type?: "text" | "date"
@@ -26,6 +28,7 @@ export default function Input<TFieldValues extends FieldValues>({
         className={`dy-input dy-input-bordered shadow-inner ${errorMessage ? "dy-input-error" : ""}`}
         type={type}
         id={name}
+        defaultValue={defaultValue}
         aria-invalid={!!errorMessage}
         {...control.register(name)}
       />

package/src/admin/components/form/LazyLoadedMarkdownEditor.tsx

@@ -0,0 +1,78 @@
+import "@mdxeditor/editor/style.css"
+
+import {
+  BlockTypeSelect,
+  BoldItalicUnderlineToggles,
+  CreateLink,
+  diffSourcePlugin,
+  DiffSourceToggleWrapper,
+  headingsPlugin,
+  linkDialogPlugin,
+  linkPlugin,
+  listsPlugin,
+  ListsToggle,
+  MDXEditor,
+  quotePlugin,
+  toolbarPlugin,
+  UndoRedo,
+} from "@mdxeditor/editor"
+import {
+  type Control,
+  Controller,
+  type FieldValues,
+  type Path,
+} from "react-hook-form"
+
+/**
+ * IMPORTANT: Do not import this component directly. It is
+ * very big. Use it with React lazy loading.
+ */
+export default function LazyLoadedMarkdownEditor<
+  TFieldValues extends FieldValues,
+>({
+  control,
+  defaultValue,
+  name,
+}: {
+  name: Path<TFieldValues>
+  control: Control<TFieldValues>
+  defaultValue?: string
+}) {
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field: { onBlur, onChange, value, ref } }) => (
+        <MDXEditor
+          markdown={value ?? ""}
+          onBlur={onBlur}
+          onChange={onChange}
+          contentEditableClassName="prose bg-gray-50 h-80 w-full max-w-full overflow-y-auto"
+          ref={ref}
+          plugins={[
+            headingsPlugin(),
+            listsPlugin(),
+            linkPlugin(),
+            linkDialogPlugin(),
+            diffSourcePlugin({
+              viewMode: "rich-text",
+              diffMarkdown: defaultValue,
+            }),
+            quotePlugin(),
+            toolbarPlugin({
+              toolbarContents: () => (
+                <DiffSourceToggleWrapper>
+                  <UndoRedo />
+                  <BoldItalicUnderlineToggles />
+                  <BlockTypeSelect />
+                  <ListsToggle options={["bullet", "number"]} />
+                  <CreateLink />
+                </DiffSourceToggleWrapper>
+              ),
+            }),
+          ]}
+        />
+      )}
+    />
+  )
+}

package/src/admin/components/form/MarkdownEditor.tsx

@@ -0,0 +1,52 @@
+import { lazy, Suspense } from "react"
+import { type Control, type FieldValues, type Path } from "react-hook-form"
+
+import ErrorMessage from "./atoms/ErrorMessage"
+import Hint from "./atoms/Hint"
+import Legend from "./atoms/Legend"
+import { useFieldError } from "./hooks/use-field-error"
+
+const LazyLoadedMarkdownEditor = lazy(
+  () => import("./LazyLoadedMarkdownEditor"),
+)
+
+export default function MarkdownEditor<TFieldValues extends FieldValues>({
+  control,
+  defaultValue,
+  name,
+  label,
+  hint,
+}: {
+  name: Path<TFieldValues>
+  label: string
+  hint?: string
+  control: Control<TFieldValues>
+  defaultValue?: string
+}) {
+  const errorMessage = useFieldError({ control, name })
+
+  return (
+    <fieldset key={name}>
+      <Legend label={label} />
+      <div
+        className={`overflow-hidden rounded-lg border border-gray-300 shadow-sm ${errorMessage ? "border-rose-800" : ""}`}
+      >
+        <Suspense
+          fallback={
+            <div className="h-[22.75rem] w-full bg-gray-50">
+              <div className="h-10 bg-gray-100"></div>
+            </div>
+          }
+        >
+          <LazyLoadedMarkdownEditor
+            control={control as Control<any>}
+            name={name}
+            defaultValue={defaultValue}
+          />
+        </Suspense>
+      </div>
+      <ErrorMessage message={errorMessage} />
+      <Hint label={hint} />
+    </fieldset>
+  )
+}

package/src/admin/components/form/Select.tsx

@@ -9,12 +9,14 @@ export default function Select<TFieldValues extends FieldValues>({
   name,
   label,
   control,
+  defaultValue,
   hint,
   options,
 }: {
   name: Path<TFieldValues>
   label: string
   hint?: string
+  defaultValue?: string
   control: Control<TFieldValues>
   options: { id: string; labelText?: string }[]
 }) {
@@ -26,6 +28,7 @@ export default function Select<TFieldValues extends FieldValues>({
         {...control.register(name)}
         id={name}
         aria-invalid={!!errorMessage}
+        defaultValue={defaultValue}
         className={`dy-select dy-select-bordered text-base shadow-sm ${errorMessage ? "dy-select-error" : ""}`}
       >
         {options.map(({ id, labelText }) => (

package/src/admin/components/form/atoms/Label.tsx

@@ -15,7 +15,7 @@ export default function Label({
   return (
     <label
       htmlFor={htmlFor}
-      className={`font-bold uppercase text-gray-500 ${size === "sm" ? "pb-2 text-sm" : "pb-1 text-xs"} ${className}`}
+      className={`font-bold uppercase text-gray-600 ${size === "sm" ? "pb-2 text-sm" : "pb-1 text-xs"} ${className}`}
     >
       {t(label)}
     </label>

package/src/admin/components/form/atoms/Legend.tsx

@@ -12,7 +12,7 @@ export default function Legend({
   const { t } = useI18n()
   return (
     <legend
-      className={`pb-2 font-bold uppercase text-gray-500 ${size === "sm" ? "text-sm" : "text-xs"} ${className}`}
+      className={`pb-2 font-bold uppercase text-gray-600 ${size === "sm" ? "text-sm" : "text-xs"} ${className}`}
     >
       {t(label)}
     </legend>

package/src/admin/i18n/translations/en.yml

@@ -16,6 +16,7 @@ ln.admin.back-to-details-page: Back to details page
 ln.admin.title: Title
 ln.admin.common-id: Common ID
 ln.admin.authors: Authors
+ln.admin.description: Description
 ln.admin.created-on: Created on
 ln.admin.created-on-hint: When has this item been created on this library?
 ln.admin.common-id-hint: The English title, all lowercase, words separated with hyphens.

package/src/admin/pages/media/EditForm.tsx

@@ -7,6 +7,7 @@ import {
   I18nContext,
 } from "../../../i18n/react/i18n-context"
 import Input from "../../components/form/Input"
+import MarkdownEditor from "../../components/form/MarkdownEditor"
 import Select from "../../components/form/Select"
 import SubmitButton from "../../components/form/SubmitButton"
 import { type MediaItem, mediaItemSchema } from "../../types/media-item"
@@ -35,6 +36,8 @@ export default function EditForm({
   collections: SelectOption[]
 }) {
   const { handleSubmit, control } = useForm({
+    // Provide per-input defaults so SSG prerender matches, but keep a full
+    // defaultValues object here because useFieldArray does not accept default values.
     defaultValues: mediaItem,
     mode: "onTouched",
     shouldFocusError: true,
@@ -52,35 +55,58 @@ export default function EditForm({
           <SubmitButton control={control} />
         </div>
 
-        <Input name="title" label="ln.admin.title" control={control} />
+        <Input
+          name="title"
+          label="ln.admin.title"
+          control={control}
+          defaultValue={mediaItem.title}
+        />
         <Input
           name="commonId"
           label="ln.admin.common-id"
           hint="ln.admin.common-id-hint"
           control={control}
+          defaultValue={mediaItem.commonId}
         />
         <Select
           name="type"
           label="ln.type"
           options={mediaTypes}
           control={control}
+          defaultValue={mediaItem.type}
         />
         <Select
           name="language"
           label="ln.language"
+          defaultValue={mediaItem.language}
           options={languages}
           control={control}
         />
-        <Authors control={control} />
+        <Authors control={control} defaultValue={mediaItem.authors} />
         <Input
           name="dateCreated"
           label="ln.admin.created-on"
           hint="ln.admin.created-on-hint"
           type="date"
+          defaultValue={mediaItem.dateCreated}
+          control={control}
+        />
+        <Categories
+          categories={categories}
+          control={control}
+          defaultValue={mediaItem.categories}
+        />
+        <Collections
+          collections={collections}
+          control={control}
+          defaultValue={mediaItem.collections}
+        />
+        <MarkdownEditor
           control={control}
+          name="description"
+          label="ln.admin.description"
+          defaultValue={mediaItem.description}
         />
-        <Categories categories={categories} control={control} />
-        <Collections collections={collections} control={control} />
 
         <SubmitButton className="self-end" control={control} />
       </form>

package/src/admin/pages/media/EditRoute.astro

@@ -61,8 +61,8 @@ const languages = config.languages.map(({ code, label }) => ({
 <Page mainClass="bg-slate-500">
   <div class="mx-auto block max-w-screen-md px-4 md:px-8">
     <a
-      class="block py-4 text-gray-200 underline"
-      href=`/${Astro.currentLocale}/media/faithful-freestyle--en`
+      class="block pb-4 pt-8 text-gray-200 underline"
+      href=`/${Astro.currentLocale}/media/${mediaId}`
       >{t("ln.admin.back-to-details-page")}</a
     >
   </div>

package/src/admin/pages/media/fields/Authors.tsx

@@ -5,13 +5,25 @@ import DynamicArray from "../../../components/form/DynamicArray"
 import { useFieldError } from "../../../components/form/hooks/use-field-error"
 import type { MediaItem } from "../../../types/media-item"
 
-export default function Authors({ control }: { control: Control<MediaItem> }) {
+export default function Authors({
+  control,
+  defaultValue,
+}: {
+  control: Control<MediaItem>
+  defaultValue: MediaItem["authors"]
+}) {
   return (
     <DynamicArray
       control={control}
       name="authors"
       label="ln.admin.authors"
-      renderElement={(index) => <AuthorInput index={index} control={control} />}
+      renderElement={(index) => (
+        <AuthorInput
+          index={index}
+          control={control}
+          defaultValue={defaultValue[index]?.value}
+        />
+      )}
       addButton={{
         label: "ln.admin.add-author",
         onClick: (append, index) =>
@@ -24,9 +36,11 @@ export default function Authors({ control }: { control: Control<MediaItem> }) {
 function AuthorInput({
   index,
   control,
+  defaultValue,
 }: {
   index: number
   control: Control<MediaItem>
+  defaultValue?: string
 }) {
   const name = `authors.${index}.value` as const
   const errorMessage = useFieldError({ name, control })
@@ -35,6 +49,7 @@ function AuthorInput({
       <input
         className={`dy-input dy-input-bordered shadow-inner ${errorMessage ? "dy-input-error" : ""}`}
         aria-invalid={!!errorMessage}
+        defaultValue={defaultValue}
         {...control.register(name)}
       />
       <ErrorMessage message={errorMessage} />

package/src/admin/pages/media/fields/Categories.tsx

@@ -8,8 +8,10 @@ import type { MediaItem } from "../../../types/media-item"
 export default function Categories({
   control,
   categories,
+  defaultValue,
 }: {
   control: Control<MediaItem>
+  defaultValue: MediaItem["categories"]
   categories: { id: string; labelText: string }[]
 }) {
   return (
@@ -22,6 +24,7 @@ export default function Categories({
           categories={categories}
           control={control}
           index={index}
+          defaultValue={defaultValue[index]?.value}
         />
       )}
       addButton={{
@@ -36,10 +39,12 @@ export default function Categories({
 function CategorySelect({
   control,
   categories,
+  defaultValue,
   index,
 }: {
   control: Control<MediaItem>
   categories: { id: string; labelText: string }[]
+  defaultValue?: string
   index: number
 }) {
   const name = `categories.${index}.value` as const
@@ -49,6 +54,7 @@ function CategorySelect({
       <select
         {...control.register(name)}
         id={name}
+        defaultValue={defaultValue}
         aria-invalid={!!errorMessage}
         className={`dy-select dy-select-bordered text-base shadow-sm ${errorMessage ? "dy-select-error" : ""}`}
       >

package/src/admin/pages/media/fields/Collections.tsx

@@ -9,9 +9,11 @@ import type { MediaItem } from "../../../types/media-item"
 export default function Collections({
   control,
   collections,
+  defaultValue,
 }: {
   control: Control<MediaItem>
   collections: { id: string; labelText: string }[]
+  defaultValue: MediaItem["collections"]
 }) {
   return (
     <DynamicArray
@@ -24,8 +26,13 @@ export default function Collections({
             collections={collections}
             control={control}
             index={index}
+            defaultValue={defaultValue[index]?.collection}
+          />
+          <CollectionIndex
+            control={control}
+            index={index}
+            defaultValue={defaultValue[index]?.index}
           />
-          <CollectionIndex control={control} index={index} />
         </div>
       )}
       addButton={{
@@ -44,9 +51,11 @@ function CollectionSelect({
   control,
   collections,
   index,
+  defaultValue,
 }: {
   control: Control<MediaItem>
   collections: { id: string; labelText: string }[]
+  defaultValue?: string
   index: number
 }) {
   const name = `collections.${index}.collection` as const
@@ -57,6 +66,7 @@ function CollectionSelect({
       <select
         {...control.register(name)}
         id={name}
+        defaultValue={defaultValue}
         aria-invalid={!!errorMessage}
         className={`dy-select dy-select-bordered text-base shadow-sm ${errorMessage ? "dy-select-error" : ""}`}
       >
@@ -74,9 +84,11 @@ function CollectionSelect({
 function CollectionIndex({
   control,
   index,
+  defaultValue,
 }: {
   control: Control<MediaItem>
   index: number
+  defaultValue?: number
 }) {
   const name = `collections.${index}.index` as const
   const errorMessage = useFieldError({ name, control })
@@ -92,6 +104,8 @@ function CollectionIndex({
         className={`dy-input dy-input-bordered shadow-inner ${errorMessage ? "dy-input-error" : ""}`}
         aria-invalid={!!errorMessage}
         type="number"
+        id={name}
+        defaultValue={defaultValue}
         step={1}
         {...control.register(name, {
           setValueAs: (value) => (value === "" ? undefined : Number(value)),

package/src/admin/types/media-item.ts

@@ -46,6 +46,7 @@ export const mediaItemSchema = z.object({
     .array()
     .superRefine(unique("collection")),
   dateCreated: z.string().date(INVALID_DATE),
+  description: z.string().optional(),
 })
 
 export type MediaItem = z.input<typeof mediaItemSchema>