@rigel-cms/rigel 0.1.4-beta.1 → 1.0.0-rc.1

package/src/editor/lib/BlockEditor.svelte

@@ -7,7 +7,10 @@
   import * as Links from "@lexical/link";
   import * as Tables from "@lexical/table";
   import { ImageNode, type ImageData } from "../blocks/image";
+  import { VideoNode, type VideoData } from "../blocks/video";
+  import { EmbedNode, type EmbedData } from "../blocks/embed";
   import ImagePicker from "./ImagePicker.svelte";
+  import MediaPicker from "./MediaPicker.svelte";
   import type { StockResult } from "./images";
   import { safePreviewUrl } from "../../preview-urls";
   import { blockTypes, blockNodes } from "../blocks";
@@ -58,7 +61,12 @@
   let linkPosition = $state("");
   let editorHost: HTMLDivElement;
   let imageJob: { key: string; replace: boolean } | null = null;
+  let mediaJob: { key: string; replace: boolean } | null = null;
+  let mediaPicker: MediaPicker;
   let imageData = $state<ImageData | null>(null);
+  let embedData = $state<EmbedData | null>(null);
+  let videoData = $state<VideoData | null>(null);
+  const selectedVideo = $derived(embedData ?? videoData);
   let altOpen = $state(false);
   let altText = $state("");
   let altKey = "";
@@ -81,7 +89,8 @@
   let tableRows = $state(0);
   let tableColumns = $state(0);
   let tableHeader = $state(false);
-  const choices = $derived(blockTypes.filter(block => block.label.toLowerCase().includes((slash ?? "").toLowerCase())));
+  const mediaTypes = [{ value: "video", label: "Video" }, { value: "youtube", label: "YouTube" }, { value: "vimeo", label: "Vimeo" }] as const;
+  const choices = $derived([...blockTypes, ...mediaTypes].filter(block => block.label.toLowerCase().includes((slash ?? "").toLowerCase())));
   const textBlocks = blockTypes.filter(block => !["image", "table", "bullet", "number"].includes(block.value));
   const activeBlock = $derived(blockTypes.find(block => block.value === blockType));
 
@@ -106,6 +115,8 @@
       }
       if (node) {
         imageData = node instanceof ImageNode ? { ...node.__image } : null;
+        embedData = node instanceof EmbedNode ? { ...node.__embed } : null;
+        videoData = node instanceof VideoNode ? { ...node.__video } : null;
         activeKey = node.getKey();
         blockType = Rich.$isHeadingNode(node) ? node.getTag() : Lists.$isListNode(node) ? node.getListType() : node.getType();
         activeMarks = L.$isRangeSelection(selection) ? marks.filter(mark => selection.hasFormat(mark.type)).map(mark => mark.type) : [];
@@ -125,16 +136,17 @@
     positionInsertion();
   }
   function positionFloating() {
-    if (imageJob) return;
+    if (imageJob || mediaJob) return;
     const selection = view.getSelection();
     if (!root.ownerDocument.hasFocus()) { floating = ""; return; }
     if (editorHost.contains(root.ownerDocument.activeElement) && !root.contains(root.ownerDocument.activeElement)) return;
-    if (inline || imageData) {
-      if (imageData ? root.ownerDocument.activeElement !== root : !selection?.rangeCount || !root.contains(selection.anchorNode) || !root.contains(selection.focusNode)) { floating = ""; return; }
+    if (inline || imageData || selectedVideo) {
+      if (imageData || selectedVideo ? root.ownerDocument.activeElement !== root : !selection?.rangeCount || !root.contains(selection.anchorNode) || !root.contains(selection.focusNode)) { floating = ""; return; }
       const block = editor.getElementByKey(activeKey);
       if (!block) { floating = ""; return; }
-      const rect = imageData || selection!.isCollapsed ? block.getBoundingClientRect() : selection!.getRangeAt(0).getBoundingClientRect();
+      const rect = imageData || selectedVideo || selection!.isCollapsed ? block.getBoundingClientRect() : selection!.getRangeAt(0).getBoundingClientRect();
       if (rect.bottom < 0 || rect.top > view.innerHeight) { floating = ""; return; }
+      if (selectedVideo) { floating = ""; return; }
       const toolbarRect = editorHost.querySelector(imageData ? '.image-toolbar' : '.body-toolbar')?.getBoundingClientRect();
       const toolbarHeight = toolbarRect?.height || 42, toolbarWidth = toolbarRect?.width || 330;
       const top = rect.top >= toolbarHeight + 12 ? rect.top - toolbarHeight - 8 : rect.bottom + 8;
@@ -192,7 +204,7 @@
     }, L.COMMAND_PRIORITY_CRITICAL));
     cleanups.push(editor.registerCommand(L.DROP_COMMAND, event => { event.preventDefault(); return true; }, L.COMMAND_PRIORITY_CRITICAL));
     cleanups.push(editor.registerCommand(L.KEY_DOWN_COMMAND, event => {
-      if ((inline || imageData) && event.altKey && event.key === "F10") { event.preventDefault(); editorHost.querySelector<HTMLButtonElement>(imageData ? '.image-toolbar button' : '.body-toolbar button')?.focus(); return true; }
+      if ((inline || imageData || selectedVideo) && event.altKey && event.key === "F10") { event.preventDefault(); (selectedVideo ? editor.getElementByKey(activeKey)?.querySelector<HTMLButtonElement>('[data-rigel-edit-video]') : editorHost.querySelector<HTMLButtonElement>(imageData ? '.image-toolbar button' : '.body-toolbar button'))?.focus(); return true; }
       return slashKeydown(event);
     }, L.COMMAND_PRIORITY_HIGH));
     const updates = editor.registerUpdateListener(({ editorState, dirtyElements, dirtyLeaves }) => {
@@ -209,7 +221,7 @@
     toolbarObserver.observe(root);
     const outside = (event: PointerEvent) => {
       if (linkOpen && !editorHost.querySelector('.markdown-link')?.contains(event.target as Node)) linkOpen = false;
-      if ((inline || imageData) && !root.contains(event.target as Node) && !editorHost.contains(event.target as Node)) { floating = ""; linkOpen = false; altOpen = false; closeMenu(); }
+      if ((inline || imageData || selectedVideo) && !root.contains(event.target as Node) && !editorHost.contains(event.target as Node)) { floating = ""; linkOpen = false; altOpen = false; closeMenu(); }
       if (slash !== null && !slashMenu?.contains(event.target as Node) && !root.contains(event.target as Node) && !(event.target as Element).closest('.block-add')) dismissSlash();
     };
     const escape = (event: KeyboardEvent) => { if (event.key === "Escape") { endDrag(true); closeMenu(); dismissSlash(); if (inline) { floating = ""; editor.focus(); } } };
@@ -271,6 +283,12 @@
     return node.getChildren().flatMap(child => L.$isElementNode(child) && !child.isInline() ? [...inlineNodes(child), L.$createLineBreakNode()] : [child]);
   }
   function changeBlock(type: string, fromSlash = false) {
+    if (type === "video" || type === "youtube" || type === "vimeo") {
+      mediaJob = { key: fromSlash ? slashKey : activeKey, replace: fromSlash && !adding };
+      dismissSlash(); closeMenu();
+      mediaPicker.pick(type);
+      return;
+    }
     const definition = blockTypes.find(block => block.value === type);
     if (!definition) return;
     if (!fromSlash && type === blockType) { dismissSlash(); closeMenu(); return; }
@@ -390,6 +408,45 @@
     });
     imageJob = null; editor.focus();
   }
+  function editMedia(key: string) {
+    editor.getEditorState().read(() => {
+      const node = L.$getNodeByKey(key);
+      if (!(node instanceof EmbedNode || node instanceof VideoNode)) return;
+      mediaJob = { key, replace: true };
+      mediaPicker.edit(node instanceof EmbedNode ? node.__embed : node.__video);
+    });
+  }
+  export function editVideoAt(index: number) {
+    const key = editor.getEditorState().read(() => L.$getRoot().getChildren()[index]?.getKey());
+    if (key) editMedia(key);
+  }
+  function insertMedia(create: () => L.LexicalNode) {
+    const job = mediaJob ?? { key: activeKey, replace: false };
+    editor.update(() => {
+      const node = create(), previous = L.$getNodeByKey(job.key), paragraph = L.$createParagraphNode();
+      if (job.replace && (previous instanceof EmbedNode || previous instanceof VideoNode)) {
+        if (previous instanceof VideoNode && node instanceof VideoNode) node.__video = { ...previous.__video, ...node.__video };
+        previous.replace(node);
+        const selection = L.$createNodeSelection(); selection.add(node.getKey()); L.$setSelection(selection); hoverKey = "";
+        return;
+      }
+      if (previous && job.replace) previous.replace(node);
+      else if (previous && L.$isRootNode(previous.getParent())) previous.insertAfter(node);
+      else L.$getRoot().append(node);
+      node.insertAfter(paragraph);
+      paragraph.select();
+      hoverKey = "";
+    });
+    mediaJob = null;
+    refocus();
+  }
+  function pickVideo(video: VideoData) {
+    if (!safePreviewUrl(video.src, true)) return;
+    insertMedia(() => new VideoNode(video));
+  }
+  function pickEmbed(embed: EmbedData) {
+    insertMedia(() => new EmbedNode({ ...embed, privacy: embed.privacy !== false }));
+  }
   function closeMenu() { for (const popup of [menu, tableMenu, formatMenu]) if (popup?.matches(":popover-open")) popup.hidePopover(); }
   function openMenu(event?: MouseEvent, popup = menu) {
     if (suppressClick) { suppressClick = false; return; }
@@ -497,6 +554,11 @@
   }
   function contentClick(event: MouseEvent) {
     const element = (event.target as Element).closest<HTMLElement>('figure[data-block-key],hr[data-block-key]');
+    if (element && (event.target as Element).closest('[data-rigel-edit-video]')) {
+      event.preventDefault();
+      if (event.type === "click") editMedia(element.dataset.blockKey!);
+      return;
+    }
     if (event.type === "pointerdown" && !element) {
       editor.update(() => { if (L.$isNodeSelection(L.$getSelection())) L.$setSelection(null); }, { discrete: true });
       return;
@@ -520,23 +582,28 @@
     <button type="button" disabled={!tableCell || tableColumns >= MAX_TABLE_COLUMNS} onpointerdown={event => event.preventDefault()} onclick={() => tableAction("column")}><Icon name="plus" />Add column right</button>
     <button type="button" disabled={!tableCell || tableRows <= 1} onpointerdown={event => event.preventDefault()} onclick={() => tableAction("delete-row")}><Icon name="minus" />Remove row</button>
     <button type="button" disabled={!tableCell || tableColumns <= 1} onpointerdown={event => event.preventDefault()} onclick={() => tableAction("delete-column")}><Icon name="minus" />Remove column</button>
-    <label class="inline"><Icon name="table" /><span>Header row</span><input type="checkbox" role="switch" class="switch" checked={tableHeader} disabled={!tableCell} onchange={event => tableAction("header", event.currentTarget.checked)} /></label>
+    <label class="inline"><input type="checkbox" role="switch" class="switch" checked={tableHeader} disabled={!tableCell} onchange={event => tableAction("header", event.currentTarget.checked)} /><Icon name="table" /><span>Header row</span></label>
   </div>
 {/snippet}
 {#snippet toolbar(image: boolean)}
-  <div class="body-toolbar formatting-toolbar" class:image-toolbar={image} role="group" aria-label={image ? "Image editing" : "Body formatting"} style={inline || image ? floating : undefined} hidden={markdownView || ((inline || image) && !floating) || (image && !imageData)}>
+  <div class="body-toolbar formatting-toolbar" class:image-toolbar={image} role="group" aria-label={image ? "Image editing" : "Body formatting"} style={inline || image ? floating : undefined} hidden={markdownView || ((inline || image) && !floating) || (image && !imageData) || (inline && !!selectedVideo)}>
     {#if image}
       <button type="button" aria-label="Edit alt text" data-tooltip="Edit alt text" onpointerdown={event => event.preventDefault()} onclick={openAlt}><Icon name="textAa" size={18} /></button>
       <button type="button" aria-label={imageData?.url ? "Edit image link" : "Add image link"} data-tooltip={imageData?.url ? "Edit image link" : "Add image link"} onpointerdown={event => event.preventDefault()} onclick={openLink}><Icon name="link" size={18} /></button>
     {:else}
-    <Select ariaLabel="Block type" data-tooltip={activeBlock?.label ?? "Block type"} icon={activeBlock?.icon ?? "paragraph"} value={imageData ? "" : blockType} options={textBlocks} disabled={!!imageData} onchange={next => { hoverKey = ""; changeBlock(String(next)); }} />
-    {#if !inline || !["image", "divider"].includes(blockType)}<span class="toolbar-separator" aria-hidden="true"></span>{@render formatButtons()}<span class="toolbar-separator" aria-hidden="true"></span>{/if}
+    <Select ariaLabel="Block type" data-tooltip={activeBlock?.label ?? "Block type"} icon={activeBlock?.icon ?? "paragraph"} value={imageData || embedData ? "" : blockType} options={textBlocks} disabled={!!imageData} onchange={next => { hoverKey = ""; changeBlock(String(next)); }} />
+    {#if !inline || !["image", "video", "embed", "divider"].includes(blockType)}<span class="toolbar-separator" aria-hidden="true"></span>{@render formatButtons()}<span class="toolbar-separator" aria-hidden="true"></span>{/if}
+    {/if}
+    {#if image}
+      <ImagePicker toolbar value={imageData?.src ?? ""} altText={imageData?.alt ?? ""} triggerLabel="Replace image" onopen={() => { if (!imageJob) imageJob = { key: activeKey, replace: true }; linkOpen = false; altOpen = false; }} onpick={pickImage} onclose={() => { imageJob = null; refocus(); }} />
+    {:else}
+      <button type="button" data-media-trigger aria-label="Insert media" data-tooltip="Insert media" aria-haspopup="menu" onpointerdown={event => event.preventDefault()} onclick={event => mediaPicker.toggleMenu(event.currentTarget)}><Icon name="image" size={18} /></button>
+      <ImagePicker toolbar hiddenTrigger value="" onopen={() => { if (!imageJob) imageJob = { key: activeKey, replace: false }; linkOpen = false; altOpen = false; }} onpick={pickImage} onclose={() => { imageJob = null; refocus(); }} />
     {/if}
-    <ImagePicker toolbar value={image ? imageData?.src ?? "" : ""} altText={image ? imageData?.alt ?? "" : ""} triggerLabel={image ? "Replace image" : "Insert image"} onopen={() => { if (!imageJob) imageJob = { key: activeKey, replace: image }; linkOpen = false; altOpen = false; }} onpick={pickImage} onclose={() => { imageJob = null; refocus(); }} />
     {#if !image}
     <button type="button" aria-label="Table" data-tooltip="Table" aria-pressed={blockType === "table"} popovertarget={`${id}-table`} onpointerdown={event => event.preventDefault()} onclick={event => { event.preventDefault(); tableMenu.matches(':popover-open') ? closeMenu() : openMenu(event, tableMenu); }}><Icon name="table" size={18} /></button>
-    <button type="button" aria-label="Bulleted list" data-tooltip="Bulleted list" aria-pressed={listType === "bullet"} disabled={["image", "divider"].includes(blockType)} onpointerdown={event => event.preventDefault()} onclick={() => toggleList("bullet")}><Icon name="listBullets" size={18} /></button>
-    <button type="button" aria-label="Numbered list" data-tooltip="Numbered list" aria-pressed={listType === "number"} disabled={["image", "divider"].includes(blockType)} onpointerdown={event => event.preventDefault()} onclick={() => toggleList("number")}><Icon name="listNumbers" size={18} /></button>
+    <button type="button" aria-label="Bulleted list" data-tooltip="Bulleted list" aria-pressed={listType === "bullet"} disabled={["image", "video", "embed", "divider"].includes(blockType)} onpointerdown={event => event.preventDefault()} onclick={() => toggleList("bullet")}><Icon name="listBullets" size={18} /></button>
+    <button type="button" aria-label="Numbered list" data-tooltip="Numbered list" aria-pressed={listType === "number"} disabled={["image", "video", "embed", "divider"].includes(blockType)} onpointerdown={event => event.preventDefault()} onclick={() => toggleList("number")}><Icon name="listNumbers" size={18} /></button>
     {#if !inline}
       <button type="button" class="block-history" disabled={!canUndo} onclick={() => editor.dispatchCommand(L.UNDO_COMMAND, undefined)}>Undo</button>
       <button type="button" class="block-history" disabled={!canRedo} onclick={() => editor.dispatchCommand(L.REDO_COMMAND, undefined)}>Redo</button>
@@ -547,9 +614,11 @@
   </div>
 {/snippet}
 <div class="block-editor" bind:this={editorHost}>
+  <MediaPicker bind:this={mediaPicker} hiddenTrigger onopen={() => editor.blur()} onimage={() => { if (!imageJob) imageJob = { key: activeKey, replace: false }; editorHost.querySelector<HTMLButtonElement>('.body-toolbar:not(.image-toolbar) [data-image-trigger]')?.click(); }} onvideo={pickVideo} onembed={pickEmbed} onclose={() => { mediaJob = null; refocus(); }} />
   {#if !inline}<div class="markdown-heading"><div class="field-label">Body</div><div class="markdown-modes"><button type="button" aria-pressed={markdownView} onclick={() => { markdownView = !markdownView; linkOpen = false; closeMenu(); dismissSlash(); }}>View as Markdown</button></div></div>{/if}
   {@render toolbar(inline && !!imageData)}
   {#if !inline}{@render toolbar(true)}{/if}
+
   {#if error}<p role="alert">{error}</p>{/if}
   {#if linkOpen}
     <div class="markdown-link" class:image-form={!!imageData} style={linkPosition} id={`${id}-link`} role="group" aria-label="Edit link" onkeydown={event => { if (event.key === "Escape") { event.stopPropagation(); linkOpen = false; refocus(); } if (event.key === "Enter") { event.preventDefault(); applyLink(); } }}>
@@ -573,7 +642,7 @@
       </div>
     </div>
   {/if}
-  {#if !inline && !imageData && floating && !markdownView}<div class="block-float" style={floating} role="group" aria-label="Selected text formatting">{@render formatButtons()}</div>{/if}
+  {#if !inline && !imageData && !selectedVideo && floating && !markdownView}<div class="block-float" style={floating} role="group" aria-label="Selected text formatting">{@render formatButtons()}</div>{/if}
   {#if markdownView}
     <div class="block-markdown-view">{#if inline}<button type="button" class="outlined" onclick={async () => { markdownView = false; await tick(); editor.focus(); }}>Close Markdown view</button>{/if}<pre class="block-markdown" aria-label="Body as Markdown" tabindex="0">{articleMarkdown(value)}</pre></div>
   {/if}

package/src/editor/lib/CollectionPanel.svelte

@@ -13,12 +13,15 @@
   import { referenceOptions } from "../../manifest/references";
   import { isSeoField } from "../../manifest/seo";
   import type { ContentDocument } from "../../schema/types";
+  import { slugify } from "../../slugs";
 
-  let { fields, values, body, selected, focusToken, devMode, documents = [], bodyInline = false, oneditbody = () => {}, onchange, onbody }: {
+  let { fields, values, storageSlug, body, selected, focusToken, devMode, documents = [], bodyInline = false, bodyLoading = false, oneditbody = () => {}, onchange, onbody }: {
     fields: CollectionField[];
     values: Record<string, unknown>;
+    storageSlug: string;
     body: ArticleBody;
     bodyInline?: boolean;
+    bodyLoading?: boolean;
     oneditbody?: () => void;
     selected: SelectedField | null;
     focusToken: number;
@@ -49,7 +52,9 @@
   <div id="properties-content" role="tabpanel" aria-labelledby="properties-tab-content" hidden={tab !== "content"}>
   <section>
     <h3>Article details</h3>
-    {#each fields.filter(field => !isSeoField(field.key)) as field (field.key)}
+    <label><span>URL slug</span><input type="text" value={String(values.slug ?? storageSlug)} oninput={(event) => onchange("slug", event.currentTarget.value)} onblur={() => { if (Object.hasOwn(values, "slug")) onchange("slug", slugify(String(values.slug))); }} /></label>
+    <p class="hint">Changes the URL, not the content filename. The website route must use the slug metadata.</p>
+    {#each fields.filter(field => field.key !== "slug" && !isSeoField(field.key)) as field (field.key)}
       <div data-collection-field={field.key}>
         {#if field.type === "reference"}
           <ReferenceSelect label={field.label} value={values[field.key]} options={referenceOptions(field, documents)} multiple={field.multiple} onchange={(value) => onchange(field.key, value)} />
@@ -79,8 +84,8 @@
   </section>
   <section data-collection-field="$body">
     {#if bodyInline}
-      <button class="outlined" onclick={oneditbody}>Edit article body in preview</button>
-      <p class="hint">Click the article body in the preview to edit. Content changes require Save.</p>
+      <button class="outlined" disabled={bodyLoading} onclick={oneditbody}>Edit article body in preview</button>
+      <p class="hint">{bodyLoading ? "Loading preview…" : "Click the article body in the preview to edit. Content changes require Save."}</p>
     {:else}<BlockEditor value={body} oninput={onbody} />{/if}
   </section>
   </div>