starmark 1.0.2 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "starmark",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Browse and edit markdown content in local Astro sites",
   "keywords": [
     "cms",

package/public/app.js

@@ -29,6 +29,7 @@ const frontmatterEditor = createFrontmatterEditor(frontmatterEditorRoot, {
       saveCurrentFile();
     }
   },
+  getProjectPath: () => currentProjectPath,
 });
 const projectsSection = document.getElementById("projects-section");
 const projectList = document.getElementById("project-list");

package/public/frontmatter-editor.js

@@ -1,4 +1,5 @@
 import { icons } from "./icons.js";
+import { createMediaDialog } from "./media-browser.js";
 import {
   defaultValueForType,
   inferValueType,
@@ -31,7 +32,24 @@ function coerceScalar(type, rawValue) {
   }
 }
 
-export function createFrontmatterEditor(root, { onChange } = {}) {
+function isBannerImageSrcField(fieldPath) {
+  return (
+    fieldPath.length >= 2 &&
+    fieldPath[fieldPath.length - 2] === "bannerImage" &&
+    fieldPath[fieldPath.length - 1] === "src"
+  );
+}
+
+function isDateField(fieldPath) {
+  const key = fieldPath[fieldPath.length - 1];
+  return key === "pubDate" || key === "modDate";
+}
+
+function isIsoDateString(value) {
+  return /^\d{4}-\d{2}-\d{2}$/.test(String(value));
+}
+
+export function createFrontmatterEditor(root, { onChange, getProjectPath } = {}) {
   let data = {};
   let parseError = null;
   let rawFallback = "";
@@ -41,6 +59,32 @@ export function createFrontmatterEditor(root, { onChange } = {}) {
   container.className = "frontmatter-form";
   root.replaceChildren(container);
 
+  let mediaPickerTarget = null;
+
+  const mediaPickerContext = {
+    openMediaPicker: null,
+    setTarget(callback) {
+      mediaPickerTarget = callback;
+    },
+  };
+
+  if (getProjectPath) {
+    const { dialog, openMediaDialog } = createMediaDialog({
+      getProjectPath,
+      title: "Choose image",
+      selectMode: "path",
+      dialogId: "media-dialog-frontmatter",
+      onSelect(image) {
+        mediaPickerTarget?.(image.webPath);
+      },
+      onClose() {
+        mediaPickerTarget = null;
+      },
+    });
+    document.body.append(dialog);
+    mediaPickerContext.openMediaPicker = openMediaDialog;
+  }
+
   function emitChange() {
     if (silent || !onChange) {
       return;
@@ -106,7 +150,7 @@ export function createFrontmatterEditor(root, { onChange } = {}) {
       return;
     }
 
-    container.appendChild(renderObjectEditor(data, refresh, touchData, 0));
+    container.appendChild(renderObjectEditor(data, refresh, touchData, 0, [], mediaPickerContext));
     container.appendChild(renderAddFieldButton(data, refresh));
   }
 
@@ -196,7 +240,7 @@ function renderAddFieldButton(objectValue, onRefresh, label = "Add field") {
   return footer;
 }
 
-function renderObjectEditor(objectValue, onRefresh, onValueChange, depth) {
+function renderObjectEditor(objectValue, onRefresh, onValueChange, depth, fieldPath, mediaPickerContext) {
   const section = document.createElement("div");
   section.className = "frontmatter-node frontmatter-object";
   if (depth > 0) {
@@ -213,13 +257,33 @@ function renderObjectEditor(objectValue, onRefresh, onValueChange, depth) {
   }
 
   for (const [key, value] of entries) {
-    section.appendChild(renderFieldRow(key, value, objectValue, onRefresh, onValueChange, depth));
+    section.appendChild(
+      renderFieldRow(
+        key,
+        value,
+        objectValue,
+        onRefresh,
+        onValueChange,
+        depth,
+        [...fieldPath, key],
+        mediaPickerContext,
+      ),
+    );
   }
 
   return section;
 }
 
-function renderFieldRow(key, value, parentObject, onRefresh, onValueChange, depth) {
+function renderFieldRow(
+  key,
+  value,
+  parentObject,
+  onRefresh,
+  onValueChange,
+  depth,
+  fieldPath,
+  mediaPickerContext,
+) {
   const field = document.createElement("div");
   field.className = "frontmatter-field";
 
@@ -287,7 +351,15 @@ function renderFieldRow(key, value, parentObject, onRefresh, onValueChange, dept
     const valueHost = document.createElement("div");
     valueHost.className = "frontmatter-value-host";
     valueHost.appendChild(
-      renderScalarEditor(value, currentType, parentObject, key, onValueChange),
+      renderScalarEditor(
+        value,
+        currentType,
+        parentObject,
+        key,
+        onValueChange,
+        fieldPath,
+        mediaPickerContext,
+      ),
     );
     row.append(keyInput, typeSelect, valueHost, removeButton);
   }
@@ -298,7 +370,17 @@ function renderFieldRow(key, value, parentObject, onRefresh, onValueChange, dept
     const children = document.createElement("div");
     children.className = "frontmatter-children";
     children.appendChild(
-      renderValueEditor(value, currentType, parentObject, key, onRefresh, onValueChange, depth + 1),
+      renderValueEditor(
+        value,
+        currentType,
+        parentObject,
+        key,
+        onRefresh,
+        onValueChange,
+        depth + 1,
+        fieldPath,
+        mediaPickerContext,
+      ),
     );
     field.appendChild(children);
   }
@@ -314,6 +396,8 @@ function renderValueEditor(
   onRefresh,
   onValueChange,
   depth,
+  fieldPath,
+  mediaPickerContext,
 ) {
   if (type === "array") {
     const arrayValue = Array.isArray(value) ? value : [];
@@ -321,7 +405,14 @@ function renderValueEditor(
       parentContainer[parentKey] = arrayValue;
     }
 
-    return renderArrayEditor(parentContainer[parentKey], onRefresh, onValueChange, depth);
+    return renderArrayEditor(
+      parentContainer[parentKey],
+      onRefresh,
+      onValueChange,
+      depth,
+      fieldPath,
+      mediaPickerContext,
+    );
   }
 
   if (type === "object") {
@@ -335,13 +426,36 @@ function renderValueEditor(
       parentContainer[parentKey] = objectValue;
     }
 
-    return renderNestedObjectEditor(parentContainer[parentKey], onRefresh, onValueChange, depth);
+    return renderNestedObjectEditor(
+      parentContainer[parentKey],
+      onRefresh,
+      onValueChange,
+      depth,
+      fieldPath,
+      mediaPickerContext,
+    );
   }
 
-  return renderScalarEditor(value, type, parentContainer, parentKey, onValueChange);
+  return renderScalarEditor(
+    value,
+    type,
+    parentContainer,
+    parentKey,
+    onValueChange,
+    fieldPath,
+    mediaPickerContext,
+  );
 }
 
-function renderScalarEditor(value, type, parentContainer, parentKey, onValueChange) {
+function renderScalarEditor(
+  value,
+  type,
+  parentContainer,
+  parentKey,
+  onValueChange,
+  fieldPath = [],
+  mediaPickerContext = null,
+) {
   const wrapper = document.createElement("div");
   wrapper.className = "frontmatter-scalar";
 
@@ -363,33 +477,82 @@ function renderScalarEditor(value, type, parentContainer, parentKey, onValueChan
     return wrapper;
   }
 
+  const stringValue =
+    type === "null" ? "" : value === null || value === undefined ? "" : String(value);
+  const useDateInput =
+    type === "string" &&
+    isDateField(fieldPath) &&
+    (stringValue === "" || isIsoDateString(stringValue));
+
   const input = document.createElement("input");
-  input.type = type === "number" ? "number" : "text";
+  input.type = useDateInput ? "date" : type === "number" ? "number" : "text";
   input.className = "frontmatter-value-input";
-  input.value =
-    type === "null" ? "" : value === null || value === undefined ? "" : String(value);
-  input.placeholder = type === "null" ? "null" : "value";
+  input.value = stringValue;
+  input.placeholder = type === "null" ? "null" : useDateInput ? "YYYY-MM-DD" : "value";
   input.spellcheck = false;
 
+  if (useDateInput) {
+    input.setAttribute("aria-label", `${fieldPath[fieldPath.length - 1]} date`);
+  }
+
   input.addEventListener("input", () => {
     parentContainer[parentKey] = coerceScalar(type, input.value);
     onValueChange();
   });
 
   wrapper.appendChild(input);
+
+  if (
+    type === "string" &&
+    isBannerImageSrcField(fieldPath) &&
+    mediaPickerContext?.openMediaPicker
+  ) {
+    const pickButton = document.createElement("button");
+    pickButton.type = "button";
+    pickButton.className = "frontmatter-media-btn";
+    pickButton.innerHTML = icons.image;
+    pickButton.setAttribute("aria-label", "Choose image from media library");
+    pickButton.title = "Choose image";
+    pickButton.addEventListener("click", () => {
+      mediaPickerContext.setTarget((webPath) => {
+        input.value = webPath;
+        parentContainer[parentKey] = webPath;
+        onValueChange();
+      });
+      mediaPickerContext.openMediaPicker();
+    });
+    wrapper.appendChild(pickButton);
+  }
+
   return wrapper;
 }
 
-function renderNestedObjectEditor(objectValue, onRefresh, onValueChange, depth) {
+function renderNestedObjectEditor(
+  objectValue,
+  onRefresh,
+  onValueChange,
+  depth,
+  fieldPath,
+  mediaPickerContext,
+) {
   const wrapper = document.createElement("div");
   wrapper.className = "frontmatter-nested";
 
-  wrapper.appendChild(renderObjectEditor(objectValue, onRefresh, onValueChange, depth));
+  wrapper.appendChild(
+    renderObjectEditor(objectValue, onRefresh, onValueChange, depth, fieldPath, mediaPickerContext),
+  );
   wrapper.appendChild(renderAddFieldButton(objectValue, onRefresh));
   return wrapper;
 }
 
-function renderArrayEditor(arrayValue, onRefresh, onValueChange, depth) {
+function renderArrayEditor(
+  arrayValue,
+  onRefresh,
+  onValueChange,
+  depth,
+  fieldPath,
+  mediaPickerContext,
+) {
   const wrapper = document.createElement("div");
   wrapper.className = "frontmatter-array";
 
@@ -401,7 +564,18 @@ function renderArrayEditor(arrayValue, onRefresh, onValueChange, depth) {
   }
 
   arrayValue.forEach((item, index) => {
-    wrapper.appendChild(renderArrayItemRow(item, index, arrayValue, onRefresh, onValueChange, depth));
+    wrapper.appendChild(
+      renderArrayItemRow(
+        item,
+        index,
+        arrayValue,
+        onRefresh,
+        onValueChange,
+        depth,
+        fieldPath,
+        mediaPickerContext,
+      ),
+    );
   });
 
   const footer = document.createElement("div");
@@ -421,7 +595,16 @@ function renderArrayEditor(arrayValue, onRefresh, onValueChange, depth) {
   return wrapper;
 }
 
-function renderArrayItemRow(item, index, parentArray, onRefresh, onValueChange, depth) {
+function renderArrayItemRow(
+  item,
+  index,
+  parentArray,
+  onRefresh,
+  onValueChange,
+  depth,
+  fieldPath,
+  mediaPickerContext,
+) {
   const entry = document.createElement("div");
   entry.className = "frontmatter-array-entry";
 
@@ -470,7 +653,15 @@ function renderArrayItemRow(item, index, parentArray, onRefresh, onValueChange,
     const valueHost = document.createElement("div");
     valueHost.className = "frontmatter-value-host";
     valueHost.appendChild(
-      renderScalarEditor(item, currentType, parentArray, index, onValueChange),
+      renderScalarEditor(
+        item,
+        currentType,
+        parentArray,
+        index,
+        onValueChange,
+        [...fieldPath, String(index)],
+        mediaPickerContext,
+      ),
     );
     row.append(marker, typeSelect, valueHost, removeButton);
   }
@@ -481,7 +672,17 @@ function renderArrayItemRow(item, index, parentArray, onRefresh, onValueChange,
     const children = document.createElement("div");
     children.className = "frontmatter-children";
     children.appendChild(
-      renderValueEditor(item, currentType, parentArray, index, onRefresh, onValueChange, depth + 1),
+      renderValueEditor(
+        item,
+        currentType,
+        parentArray,
+        index,
+        onRefresh,
+        onValueChange,
+        depth + 1,
+        [...fieldPath, String(index)],
+        mediaPickerContext,
+      ),
     );
     entry.appendChild(children);
   }