@rigel-cms/rigel 1.4.0-rc.2 → 1.4.0-rc.3

package/src/editor/lib/SchemaPanel.svelte

@@ -23,7 +23,7 @@
   import { slugify } from "../../slugs";
 
   let {
-    schema, docType, values, docId, selected, creating, pending, documents, focusToken, devMode, onchange, onselect, oneditdocument,
+    schema, docType, values, docId, selected, creating, pending, documents, focusToken, devMode, inlineFields = [], oneditfield = () => {}, onchange, onselect, oneditdocument,
   }: {
     schema: Schema;
     docType: DocumentDef;
@@ -35,6 +35,8 @@
     documents: ContentDocument[];
     focusToken: number;
     devMode: boolean;
+    inlineFields?: string[];
+    oneditfield?: (path: string) => void;
     onchange: (next: Record<string, unknown>) => void;
     onselect: (next: SelectedField | null) => void;
     oneditdocument: (id: string) => void;
@@ -176,7 +178,7 @@
     {/if}
     {#each docFields.filter(field => docType.shared || !isSeoField(field.key)) as field (field.key)}
       <div data-schema-path={field.key}>
-        <SchemaField {schema} {documents} {devMode} {field} base={field.key} value={values[field.key]} onvalue={(next) => onchange(replaceAt(values, field.key, next))} />
+        <SchemaField {schema} {documents} {devMode} {inlineFields} {oneditfield} {field} base={field.key} value={values[field.key]} onvalue={(next) => onchange(replaceAt(values, field.key, next))} />
       </div>
     {/each}
   </section>
@@ -223,6 +225,8 @@
             {schema}
             {documents}
             {devMode}
+            {inlineFields}
+            {oneditfield}
             {field}
             base={`sections.${selected.sectionKey}.${field.key}`}
             value={sections.find((section) => section._key === selected?.sectionKey)?.[field.key]}
@@ -239,6 +243,8 @@
         {schema}
         {documents}
         {devMode}
+        {inlineFields}
+        {oneditfield}
         field={selectedField}
         base={selected.path}
         value={selectedValue}
@@ -255,7 +261,7 @@
       <h3>{$t("fields.seo")}</h3>
       {#each seoFields as field (field.key)}
         <div data-schema-path={field.key}>
-          <SchemaField {schema} {documents} {devMode} {field} base={field.key} value={values[field.key]} onvalue={(next) => onchange(replaceAt(values, field.key, next))} />
+          <SchemaField {schema} {documents} {devMode} {inlineFields} {oneditfield} {field} base={field.key} value={values[field.key]} onvalue={(next) => onchange(replaceAt(values, field.key, next))} />
           <SeoGuidance field={field.key} value={values[field.key]} />
         </div>
       {/each}

package/src/editor/lib/VisualEditor.svelte

@@ -3,6 +3,8 @@
   import { mount, unmount, onDestroy, tick, type Snippet } from "svelte";
   import BlockEditor from "./BlockEditor.svelte";
   import MarkdownEditor from "./MarkdownEditor.svelte";
+  import { markdownToBody } from "./markdown-blocks";
+  import { articleMarkdown } from "../../article-render";
   import { tooltipRoot } from "./tooltip";
   import editorStyles from "../styles.css?inline";
   import type { ArticleBody } from "../../article-body";
@@ -27,7 +29,7 @@
     previewPath: string | null;
     websitePath?: string | null;
     body?: "" | import("../../article-body").ArticleBody;
-    properties?: Snippet<[SelectedField | null, number, boolean, () => void, boolean]>;
+    properties?: Snippet<[SelectedField | null, number, boolean, () => void, boolean, string[], (path: string) => void]>;
     bodyInline?: boolean;
     onbody?: (body: ArticleBody) => void;
     creating: boolean;
@@ -65,6 +67,7 @@
   let highlighted: HTMLElement | null = null;
   let hovered: HTMLElement | null = null;
   let structureSignature = "";
+  let richtextPaths = $state<string[]>([]);
   let inline = $state<{ path: string; value: string; original: string; left: number; top: number; width: number; height: number; fontSize: string } | null>(null);
   let inlineInput: HTMLInputElement | undefined = $state();
   const documentList = $derived(Object.entries(documents).map(([id, data]) => ({
@@ -164,6 +167,21 @@
       applyStructure();
     }
     applySelection();
+    syncInlineRichText();
+  }
+
+  function inlineMarkdownPath(path: string) {
+    const def = schema && docType ? fieldForPath(schema, docType, values, path) : null;
+    return def?.type === "markdown" && !def.sidebarOnly;
+  }
+
+  function syncInlineRichText() {
+    const doc = docElement();
+    const paths = !bodyInline || !doc || !schema || !docType || mode !== "edit" ? [] : [...new Set([...doc.querySelectorAll<HTMLElement>("[data-rigel-richtext]")]
+      .filter(element => (element.getAttribute("data-rigel-doc") ?? docId) === docId)
+      .map(element => element.getAttribute("data-rigel-richtext")!)
+      .filter(path => path !== "$body" && inlineMarkdownPath(path)))];
+    if (paths.length !== richtextPaths.length || paths.some((path, index) => path !== richtextPaths[index])) richtextPaths = paths;
   }
 
   function fieldPathFrom(element: HTMLElement): { path: string; doc: string } | null {
@@ -201,6 +219,7 @@
     editingBody = null; bodyContents = [];
     patch();
   }
+  const regionAttributes = ["class", "style", "role", "aria-label", "aria-multiline", "aria-keyshortcuts", "contenteditable", "data-lexical-editor", "spellcheck", "tabindex", "translate"];
   async function startBodyEdit(element: HTMLElement, event?: MouseEvent) {
     if (!body) return;
     if (bodyEditor) { element.focus(); return; }
@@ -217,7 +236,7 @@
     if (editorStyle.textContent !== editorStyles) editorStyle.textContent = editorStyles;
     clearHover(); clearHighlight();
     editingBody = element; bodyContents = [...element.childNodes];
-    bodyAttributes = ["class", "style", "role", "aria-label", "aria-multiline", "aria-keyshortcuts", "contenteditable", "data-lexical-editor", "spellcheck"].map(name => [name, element.getAttribute(name)]);
+    bodyAttributes = regionAttributes.map(name => [name, element.getAttribute(name)]);
     const pre = doc.createElement("pre"), code = doc.createElement("code");
     pre.append(code); pre.style.cssText = "position:absolute;visibility:hidden"; element.append(pre);
     for (const [sample, properties] of [[pre, ["background-color", "padding", "margin", "border", "border-radius"]], [code, ["color", "font-family", "font-size", "font-weight", "line-height", "letter-spacing"]]] as const) {
@@ -251,9 +270,9 @@
   }
   function startMarkdownEdit(element: HTMLElement) {
     const field = fieldPathFrom(element);
-    if (!field || field.doc !== docId || !schema || !docType) return false;
+    if (!bodyInline || !field || field.doc !== docId || !schema || !docType) return false;
     const def = fieldForPath(schema, docType, values, field.path);
-    if (def?.type !== "markdown") return false;
+    if (def?.type !== "markdown" || def.sidebarOnly) return false;
     stopBodyEdit();
     const doc = element.ownerDocument;
     let editorStyle = doc.querySelector<HTMLStyleElement>('style[data-rigel-editor-styles]');
@@ -262,29 +281,59 @@
     clearHover(); clearHighlight();
     editingBody = element; bodyContents = [...element.childNodes];
     const scope = doc.createElement("div");
-    bodyAttributes = ["class", "style", "role", "aria-label", "aria-multiline", "contenteditable", "tabindex", "translate"].map(name => [name, element.getAttribute(name)]);
+    bodyAttributes = regionAttributes.map(name => [name, element.getAttribute(name)]);
     const syncTheme = () => { scope.dataset.theme = document.documentElement.dataset.theme; scope.dataset.contrast = document.documentElement.dataset.contrast; };
     syncTheme();
     const host = doc.createElement("div"); host.className = "rigel rigel-inline";
     scope.append(host); doc.body.append(scope); bodyScope = scope;
     removeTooltips = tooltipRoot(host).destroy;
-    bodyEditor = mount(MarkdownEditor, { target: host, props: {
-      editableRoot: element,
-      label: def.labelKey ? $t(def.labelKey) : def.label,
-      get value() { return String(anchorValue(values, field.path).value ?? ""); },
-      oninput: (next: string) => onchange(replaceAt(values, field.path, next)),
-    } });
+    const label = def.labelKey ? $t(def.labelKey) : def.label;
+    const source = String(anchorValue(values, field.path).value ?? "");
+    const blocks = markdownToBody(source);
+    if (blocks) {
+      const editor = { body: blocks, markdown: source };
+      bodyEditor = mount(BlockEditor, { target: host, props: {
+        editableRoot: element,
+        label,
+        get value() { return editor.body as ArticleBody; },
+        oninput: (next: ArticleBody) => {
+          editor.body = next;
+          const markdown = articleMarkdown(next);
+          if (markdown === editor.markdown) return;
+          editor.markdown = markdown;
+          onchange(replaceAt(values, field.path, markdown));
+        },
+      } });
+    } else {
+      bodyEditor = mount(MarkdownEditor, { target: host, props: {
+        editableRoot: element,
+        label,
+        get value() { return String(anchorValue(values, field.path).value ?? ""); },
+        oninput: (next: string) => onchange(replaceAt(values, field.path, next)),
+      } });
+    }
     bodyThemeObserver = new MutationObserver(syncTheme);
     bodyThemeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme", "data-contrast"] });
     void tick().then(() => (element.isContentEditable ? element : host.querySelector<HTMLTextAreaElement>("textarea"))?.focus());
     return true;
   }
 
+  function editField(path: string) {
+    const doc = docElement();
+    if (!doc) return;
+    const element = [...doc.querySelectorAll<HTMLElement>(anchorSelector(path))]
+      .find(node => (node.getAttribute("data-rigel-doc") ?? docId) === docId && node.hasAttribute("data-rigel-richtext"));
+    if (!element) return;
+    element.scrollIntoView({ block: "center" });
+    if (editingBody === element) { element.focus(); return; }
+    startMarkdownEdit(element);
+  }
+
   function focusBody() {
     const target = docElement()?.querySelector<HTMLElement>('[data-rigel-richtext="$body"]');
     if (inlineBodyEnabled && target) { target.scrollIntoView({ block: "center" }); void startBodyEdit(target); }
   }
-  $effect(() => { if ((!schema && !inlineBodyEnabled) || mode !== "edit") stopBodyEdit(); });
+  $effect(() => { if (!bodyInline || (!schema && !inlineBodyEnabled) || mode !== "edit") stopBodyEdit(); });
   onDestroy(stopBodyEdit);
 
   function onClick(event: MouseEvent) {
@@ -516,7 +565,7 @@
     <div class="properties-divider" role="separator" tabindex="0" aria-label={$t("richtext.propertiesPanelWidth")} aria-orientation="vertical" aria-valuemin="280" aria-valuemax={panelMax} aria-valuenow={panelWidth} aria-valuetext={$t("richtext.panelPixels", { width: Math.round(panelWidth) })} onpointerdown={startResize} onpointermove={moveResize} onpointerup={endResize} onpointercancel={endResize} onlostpointercapture={endResize} onkeydown={keyResize}></div>
   {/if}
   {#if panelOpen && properties}
-    {@render properties(selected, focusToken, inlineBodyEnabled || inlineBodyLoading, focusBody, inlineBodyLoading)}
+    {@render properties(selected, focusToken, inlineBodyEnabled || inlineBodyLoading, focusBody, inlineBodyLoading, richtextPaths, editField)}
   {:else if panelOpen && schema && docType}
     <SchemaPanel
       {schema}
@@ -529,6 +578,8 @@
       {focusToken}
       {devMode}
       documents={documentList}
+      inlineFields={richtextPaths}
+      oneditfield={editField}
       onchange={onchange}
       {oneditdocument}
       onselect={async (next) => { selected = next; focusToken++; await tick(); if (selected?.docId === next?.docId && selected?.sectionKey === next?.sectionKey) applySelection(true); }}

package/src/editor/lib/markdown-blocks.ts

@@ -0,0 +1,69 @@
+import MarkdownIt from "markdown-it";
+import type { Mark, Node as MarkdownNode } from "prosemirror-model";
+import { parseVisualMarkdown } from "./rich-markdown";
+import { articleMarkdown } from "../../article-render";
+import { validateBody, type ArticleBody, type ArticleNode } from "../../article-body";
+
+const renderer = new MarkdownIt({ html: true });
+
+const FORMATS: Record<string, number> = { strong: 1, em: 2, code: 16 };
+
+function textFormat(marks: readonly Mark[]): number {
+  return marks.reduce((bits, mark) => bits | (FORMATS[mark.type.name] ?? 0), 0);
+}
+
+function linkHref(marks: readonly Mark[]): string | null {
+  const link = marks.find(mark => mark.type.name === "link");
+  return link && typeof link.attrs.href === "string" ? link.attrs.href : null;
+}
+
+function textNode(text: string, format: number): ArticleNode {
+  return { type: "text", version: 1, text, format, detail: 0, mode: "normal", style: "" };
+}
+
+function inline(nodes: readonly MarkdownNode[]): ArticleNode[] {
+  const result: ArticleNode[] = [];
+  const parts = nodes.map(node => ({ node, href: node.type.name === "text" ? linkHref(node.marks) : null }));
+  for (let index = 0; index < parts.length; index++) {
+    const { node, href } = parts[index];
+    if (node.type.name === "hard_break") { result.push({ type: "linebreak", version: 1 }); continue; }
+    if (node.type.name !== "text") return [];
+    const children = [textNode(node.text!, textFormat(node.marks))];
+    while (index + 1 < parts.length && parts[index + 1].href === href && parts[index + 1].node.type.name === "text") {
+      index++;
+      children.push(textNode(parts[index].node.text!, textFormat(parts[index].node.marks)));
+    }
+    if (href) result.push({ type: "link", version: 1, url: href, children });
+    else result.push(...children);
+  }
+  return result;
+}
+
+function block(node: MarkdownNode): ArticleNode | null {
+  const children = () => [...node.content.content].map(block).filter((child): child is ArticleNode => !!child);
+  const inlineChildren = () => inline([...node.content.content]);
+  if (node.type.name === "paragraph") return { type: "paragraph", version: 1, children: inlineChildren(), direction: null, format: "", indent: 0, textFormat: 0, textStyle: "" };
+  if (node.type.name === "heading") return { type: "heading", version: 1, tag: `h${node.attrs.level}`, children: inlineChildren(), direction: null, format: "", indent: 0 };
+  if (node.type.name === "blockquote") return { type: "quote", version: 1, children: children() };
+  if (node.type.name === "bullet_list") return { type: "list", version: 1, listType: "bullet", tag: "ul", start: 1, children: children() };
+  if (node.type.name === "ordered_list") return { type: "list", version: 1, listType: "number", tag: "ol", start: Number(node.attrs.order) || 1, children: children() };
+  if (node.type.name === "list_item") return { type: "listitem", version: 1, value: 1, children: children() };
+  if (node.type.name === "code_block") return { type: "code", version: 1, language: null, children: node.textContent ? [textNode(node.textContent, 0)] : [] };
+  if (node.type.name === "horizontal_rule") return { type: "divider", version: 1 };
+  if (node.type.name === "image") return { type: "image", version: 1, src: String(node.attrs.src ?? ""), alt: String(node.attrs.alt ?? "") };
+  return null;
+}
+
+export function markdownToBody(source: string): ArticleBody | null {
+  const doc = parseVisualMarkdown(source);
+  if (!doc) return null;
+  const blocks = [...doc.content.content].map(block);
+  if (blocks.some(item => !item)) return null;
+  const body = { root: { type: "root", version: 1, children: blocks as ArticleNode[], direction: null, format: "", indent: 0 } } as ArticleBody;
+  try {
+    validateBody(body);
+  } catch {
+    return null;
+  }
+  return renderer.render(source).trimEnd() === renderer.render(articleMarkdown(body)).trimEnd() ? body : null;
+}

package/src/editor/lib/media-library.ts

@@ -33,7 +33,8 @@ export function modifiedMonth(value?: string): string {
 
 const CURATED = new Set(['Images', 'Audio', 'Video', 'Documents', 'Spreadsheets', 'Archives']);
 export function filterMedia(assets: MediaAsset[], search: string, type: string, month: string): MediaAsset[] {
-  return assets.filter(asset => asset.name.toLowerCase().includes(search.trim().toLowerCase())
+  const query = search.trim().toLowerCase();
+  return assets.filter(asset => [asset.name, assetFile(asset.url), asset.title, asset.description, asset.alt].some(value => value?.toLowerCase().includes(query))
     && (!type || asset.type === type || assetCategory(asset) === type) && (!month || modifiedMonth(asset.modified) === month));
 }
 function assetCategory(asset: MediaAsset): string {

package/src/editor/styles.css

@@ -1171,6 +1171,7 @@
 .rigel .visual-error { margin: 1.5rem; font-size: 0.875rem; color: var(--text-2); max-width: 44ch; }
 .rigel .schema-panel { border-left: 1px solid var(--border); overflow-y: auto; min-height: 0; padding: 1rem; background: var(--panel); }
 .rigel .schema-panel section { border: 0; padding: 0 0 1rem; }
+.rigel .schema-panel :is([data-schema-path], [data-collection-field]) + :is([data-schema-path], [data-collection-field]) { margin-top: 1rem; }
 .rigel .custom-select { min-width: 0; max-width: 100%; }
 .rigel .content-language { position: relative; margin: -0.75rem 0.75rem 1.5rem; flex-shrink: 0; }
 .rigel .content-language .select-label { margin-top: 0; }
@@ -1193,7 +1194,12 @@
 .rigel.rigel-inline .markdown-link, .rigel .block-editor .markdown-link { position: fixed; inset: auto; width: 340px; max-width: calc(100vw - 16px); z-index: 121; }
 .rigel.rigel-inline .block-markdown-view { position: fixed; inset: 12px; max-height: calc(100vh - 24px); overflow: auto; padding: 0.5rem; border: 1px solid var(--border-control); background: var(--panel); }
 .rigel-article-content:focus { outline: 0; }
+.rigel-markdown-content:focus { outline: 0; }
 .rigel.rigel-inline .markdown-inline { position: fixed; top: 8px; left: 8px; width: max-content; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow: auto; background: var(--panel); border: 1px solid var(--border-control); box-shadow: var(--shadow-lg); pointer-events: auto; }
+.rigel.rigel-inline .markdown-inline.markdown-floating { position: fixed; inset: auto; width: auto; max-width: none; max-height: none; margin: 0; padding: 0; overflow: visible; background: transparent; border: 0; box-shadow: none; pointer-events: none; }
+.rigel.rigel-inline .markdown-inline.markdown-floating .body-toolbar { position: fixed; inset: auto; width: max-content; max-width: calc(100vw - 16px); margin: 0; padding: 0.25rem; gap: 0.25rem; border: 1px solid var(--border-control); box-shadow: var(--shadow-lg); z-index: 120; pointer-events: auto; }
+.rigel.rigel-inline .markdown-inline.markdown-floating .body-toolbar > .markdown-toggle { width: auto; padding: 0 0.5rem; font-size: 0.75rem; }
+.rigel.rigel-inline .markdown-inline.markdown-floating .markdown-link { position: fixed; inset: auto; z-index: 121; pointer-events: auto; }
 .rigel .markdown-editor [hidden] { display: none !important; }
 .rigel-markdown-content { white-space: pre-wrap; overflow-wrap: anywhere; }
 :is(.rigel .block-content, .rigel-article-content)::highlight(rigel-link-selection), :is(.rigel .block-content, .rigel-article-content) ::highlight(rigel-link-selection) { background-color: Highlight; color: HighlightText; }
@@ -1303,7 +1309,7 @@
 .rigel .add-section .custom-select { flex: 1; }
 @media (max-width: 767px) { .rigel .select-option { min-height: 2.75rem; } }
 .rigel .schema-panel:has(> .panel-tabs) { scroll-padding-top: 4rem; }
-.rigel .schema-panel .block-editor > .body-toolbar:not(.image-toolbar) { position: static; }
+.rigel .schema-panel .block-editor > .body-toolbar:not(.image-toolbar), .rigel .schema-panel .markdown-editor:not(.markdown-inline) .formatting-toolbar { position: sticky; top: var(--properties-tabs-height, 0px); z-index: 3; }
 .rigel .schema-panel > .panel-tabs { position: sticky; top: 0; z-index: 10; padding-top: 0.5rem; margin-top: -0.5rem; background: var(--panel); }
 .rigel .schema-panel > .panel-tabs::before { content: ""; position: absolute; inset: -1rem -1rem 0; z-index: -1; background: var(--panel); }
 .rigel .panel-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border-control); }

package/src/schema/types.ts

@@ -13,6 +13,7 @@ export interface FieldDef {
   placeholder?: string;
   accept?: string;
   required?: boolean;
+  sidebarOnly?: boolean;
   initialValue?: unknown;
   fields?: FieldDef[];
   of?: string;

package/src/schema/validate.ts

@@ -91,6 +91,7 @@ function validateFieldsShape(schema: Schema, fields: FieldDef[], scope: string)
     keys.add(field.key);
     if (typeof field.label !== "string" || !field.label.trim()) throw new SchemaError(`${scope}.${field.key}: label required`);
     if (field.accept !== undefined && (field.type !== "file" || typeof field.accept !== "string" || !field.accept.split(",").every(token => /^(?:\.[a-z0-9]+|[a-z0-9!#$&^_.+-]+\/(?:[a-z0-9!#$&^_.+-]+|\*))$/i.test(token.trim())))) throw new SchemaError(`${scope}.${field.key}: accept must contain file extensions or MIME types`);
+    if (field.sidebarOnly !== undefined && (field.type !== "markdown" || typeof field.sidebarOnly !== "boolean")) throw new SchemaError(`${scope}.${field.key}: sidebarOnly applies to markdown fields`);
     if (![...SCALARS, "object", "array", "reference"].includes(field.type)) throw new SchemaError(`${scope}.${field.key}: unknown field type ${field.type}`);
     if (field.type === "object") {
       if (field.of) objectDef(schema, field.of);