rimecms 0.33.0 → 1.0.1

package/dist/fields/rich-text/component/bubble-menu/node-selector/node-selector.css

@@ -8,15 +8,10 @@
   padding: var(--rz-size-2);
   font-size: var(--rz-text-sm);
   font-variation-settings: 'wght' 500;
-  color: hsl(var(--rz-color-fg) / 0.6);
+  color: var(--rz-fg-subtle);
 }
 
-/* .rz-node-selector__trigger:hover {
-	background-color: hsl(var(--rz-gray-5));
-} */
-
 .rz-node-selector__content {
-  /* background-color: hsl(var(--rz-gray-6)); */
   margin-top: var(--rz-size-1-5);
   margin-bottom: var(--rz-size-1);
   display: flex;
@@ -27,9 +22,11 @@
   overflow-y: auto;
   transform: translateX(calc(-1 * var(--rz-size-1)));
   /* border-radius: var(--rz-radius-xl); */
-  border: var(--rz-border);
+  background-color: var(--rz-bg-float);
+  box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-float);
   padding: var(--rz-size-1);
-  box-shadow: var(--rz-shadow-xl);
 }
 
 .rz-node-selector__node {
@@ -42,7 +39,7 @@
 }
 
 .rz-node-selector__node:hover {
-  background-color: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-3)));
+  background-color: var(--rz-bg-hover);
 }
 
 .rz-node-selector__node-content {
@@ -53,6 +50,6 @@
 
 .rz-node-selector__node-icon {
   border-radius: var(--rz-radius-sm);
-  border: var(--rz-border);
+  border: 1px solid var(--rz-border);
   padding: var(--rz-size-1);
 }

package/dist/fields/rich-text/component/drag-handle/drag-handle.css

@@ -4,10 +4,8 @@
   display: none;
   align-items: center;
   border-radius: 0.25rem;
-  margin-top: 0.8rem;
   cursor: grab;
   display: flex;
-  height: 1.5rem;
   justify-content: center;
   width: 1.5rem;
 }

package/dist/fields/rich-text/component/styles/editor.css

@@ -0,0 +1,111 @@
+/** What every editor draws, in a field or in place: the states, the placeholder, the text. */
+.rz-rich-text__editor {
+  position: relative;
+
+  .ProseMirror-trailingBreak {
+    content: ' ';
+    display: inline-block;
+  }
+
+  .ProseMirror-focused {
+    outline: none;
+  }
+
+  .ProseMirror .is-empty:not(table)::before {
+    content: attr(data-placeholder);
+    color: var(--rz-fg-subtle);
+    float: left;
+    pointer-events: none;
+    height: 0;
+  }
+}
+
+.rz-rich-text__editor > [contenteditable='false'] {
+  color: var(--rz-fg-subtle);
+  cursor: no-drop;
+  & * {
+    pointer-events: none;
+    opacity: 0.9;
+  }
+}
+
+/**
+ * The text: a variable behind each choice, the panel's default after it. Each element reads its
+ * own, so a value set on the editor reaches every element, one set on an element stays there.
+ *
+ *   .site-paragraph { --font-text: Georgia; --font-heading: 'Chivo'; --margin-bottom: 1em; }
+ *   .site-paragraph h1 { --font-size: 3rem; --font-weight: 700; }
+ */
+.rz-rich-text__editor .ProseMirror {
+  font-family: var(--font-text, var(--rz-font-sans));
+  line-height: var(--line-height, 1.5);
+  font-weight: var(--font-weight, 400);
+
+  > * {
+    margin-bottom: var(--margin-bottom, 0.5em);
+  }
+  > *:last-child {
+    margin-bottom: 0;
+  }
+
+  p,
+  li,
+  blockquote {
+    font-size: var(--font-size, inherit);
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-heading, var(--rz-font-sans));
+    line-height: var(--line-height, 1.15);
+    font-weight: var(--font-weight, 600);
+  }
+  h1 {
+    font-size: var(--font-size, var(--rz-text-5xl));
+  }
+  h2 {
+    font-size: var(--font-size, var(--rz-text-4xl));
+  }
+  h3 {
+    font-size: var(--font-size, var(--rz-text-3xl));
+  }
+  h4 {
+    font-size: var(--font-size, var(--rz-text-xl));
+  }
+  h5 {
+    font-size: var(--font-size, var(--rz-text-lg));
+  }
+  h6 {
+    font-size: var(--font-size, 1em);
+  }
+
+  /* The indent on the item, where a field's box padding on the list cannot take it back. */
+  li {
+    margin-left: var(--list-indent, 1.5em);
+  }
+  ol li {
+    list-style-type: decimal;
+  }
+  ul li {
+    list-style-type: disc;
+  }
+  li > p {
+    display: inline;
+    margin: 0;
+  }
+
+  blockquote p {
+    border-left: 3px solid var(--quote-border, var(--rz-border-strong));
+    padding-left: var(--quote-indent, var(--rz-size-4));
+    font-weight: var(--font-weight, 500);
+  }
+
+  a {
+    text-decoration: underline;
+    text-underline-offset: 3px;
+  }
+}

package/dist/fields/rich-text/component/styles/field.css

@@ -0,0 +1,71 @@
+/**
+ * The field's look: one box per node, room for the drag handle on the left, a text size that
+ * follows the page. The text is `editor.css`; the boxes touch, so no gap between them.
+ */
+.rz-field-rich-text {
+  --margin-bottom: 0;
+  @container rz-document (min-width:620px) {
+    --text-size: var(--rz-text-lg);
+  }
+  @container rz-document (min-width:960px) {
+    --text-size: var(--rz-text-xl);
+  }
+
+  .rz-rich-text__editor {
+    --left-spacing: var(--rz-size-12);
+    min-height: var(--rz-size-11);
+    width: calc(100% + var(--left-spacing));
+    margin-left: calc(-1 * var(--left-spacing));
+
+    .ProseMirror {
+      height: 100%;
+    }
+  }
+
+  /** All editor > node: one well with its edge, a divider between two nodes, the edge darker on hover. */
+  .ProseMirror > *:not(.ProseMirror-gapcursor) {
+    background-color: var(--rz-bg-well);
+    padding: var(--rz-size-3) var(--rz-size-3);
+    margin-left: var(--left-spacing);
+    width: calc(100% - var(--left-spacing));
+    min-height: var(--rz-size-11);
+    border-top: 1px solid var(--rz-border);
+    border-left: 1px solid var(--rz-border);
+    border-right: 1px solid var(--rz-border);
+    &:first-child {
+      border-top-left-radius: var(--rz-radius-md);
+      border-top-right-radius: var(--rz-radius-md);
+    }
+    &:last-child {
+      border-bottom-left-radius: var(--rz-radius-md);
+      border-bottom-right-radius: var(--rz-radius-md);
+      border-bottom: 1px solid var(--rz-border);
+    }
+  }
+
+  .rz-rich-text__editor:hover .ProseMirror > *:not(.ProseMirror-gapcursor) {
+    border-left-color: var(--rz-border-strong);
+    border-right-color: var(--rz-border-strong);
+    &:first-child {
+      border-top-color: var(--rz-border-strong);
+    }
+    &:last-child {
+      border-bottom-color: var(--rz-border-strong);
+    }
+  }
+
+  .rz-rich-text__editor[data-error]:has(.ProseMirror-focused) {
+    border-color: var(--rz-danger);
+  }
+
+  .ProseMirror ul.is-empty::before,
+  .ProseMirror ol.is-empty::before,
+  .ProseMirror blockquote.is-empty::before {
+    margin-left: var(--rz-size-6);
+  }
+
+  /** Fix gap cursor position */
+  .ProseMirror-gapcursor:after {
+    left: calc(var(--left-spacing) + var(--rz-size-4));
+  }
+}

package/dist/fields/rich-text/component/suggestion/suggestion.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   import { t__ } from '../../../../core/i18n/index.js';
-  import * as Command from '../../../../panel/components/ui/command/index.js';
+  import { getCommandsContext, useCommands } from '../../../../panel/context/commands.svelte.js';
+  import * as random from '../../../../util/random.js';
   import { capitalize } from '../../../../util/string.js';
   import type { Editor } from '@tiptap/core';
-  import { onDestroy, onMount } from 'svelte';
+  import { Plugin, PluginKey } from '@tiptap/pm/state';
   import type { RichTextFeature } from '../../core/types.js';
 
   type Props = {
@@ -13,8 +14,6 @@
 
   let { editor, features = [] }: Props = $props();
 
-  let isOpen = $state(false);
-
   const augmentFeatureName = (feature: RichTextFeature): RichTextFeature & { name?: string } => ({
     ...feature,
     name: feature.extension?.name
@@ -38,59 +37,45 @@
   // Combine all suggestion items
   const allSuggestionItems = $derived([...markItems, ...nodeItems]);
 
-  // Cmd+K handling
-  const onFocus = () => {
-    document.addEventListener('keydown', handleKeyDown);
-  };
-  const onBlur = () => {
-    document.removeEventListener('keydown', handleKeyDown);
-  };
-  const handleKeyDown = (event: KeyboardEvent) => {
-    if (event.code === 'KeyK' && event.metaKey) {
-      isOpen = true;
-    }
-  };
+  const group = t__('common.text');
+  const commands = getCommandsContext();
 
-  onMount(() => {
-    editor.on('focus', onFocus);
-    editor.on('blur', onBlur);
+  /**
+   * `/` typed on an empty line opens the palette on these, and is not written. It is the typed
+   * character, not a key, so it works on every keyboard.
+   */
+  $effect(() => {
+    if (!commands) return;
+    const key = new PluginKey(`rz-slash-${random.randomId(8)}`);
+    const plugin = new Plugin({
+      key,
+      props: {
+        handleTextInput(view, _from, _to, text) {
+          const { selection } = view.state;
+          const line = selection.$from.parent;
+          if (text !== '/' || !selection.empty || line.content.size > 0) return false;
+          commands.palette.show({ group });
+          return true;
+        }
+      }
+    });
+    editor.registerPlugin(plugin);
+    return () => editor.unregisterPlugin(key);
   });
 
-  onDestroy(() => {
-    editor.off('focus', onFocus);
-    editor.off('blur', onBlur);
-  });
+  /** The editor's marks and nodes, in the palette while the editor has the focus. */
+  useCommands(() =>
+    allSuggestionItems.map((item) => ({
+      id: `text.${item.name}`,
+      label: item.label || capitalize(item.name || ''),
+      group,
+      icon: item.icon,
+      when: () => editor.isFocused,
+      run: () =>
+        item.suggestion?.command?.({
+          editor,
+          range: { from: editor.state.selection.from, to: editor.state.selection.to }
+        })
+    }))
+  );
 </script>
-
-<Command.Dialog bind:open={isOpen}>
-  <Command.Input placeholder={t__('common.search')} />
-
-  <Command.List>
-    <Command.Empty>No results found.</Command.Empty>
-
-    {#each allSuggestionItems as item, index (index)}
-      {@const ItemIcon = item.icon}
-      <Command.Item
-        value={item.name}
-        onSelect={() => {
-          if (item.suggestion && item.suggestion.command) {
-            item.suggestion.command({
-              editor,
-              range: { from: editor.state.selection.from, to: editor.state.selection.to }
-            });
-          }
-          isOpen = false;
-        }}
-      >
-        <div>
-          <ItemIcon size={17} />
-        </div>
-        <div>
-          <p>
-            {item.label || capitalize(item.name || '')}
-          </p>
-        </div>
-      </Command.Item>
-    {/each}
-  </Command.List>
-</Command.Dialog>

package/dist/fields/rich-text/core/build-editor-config.js

@@ -39,7 +39,7 @@ export function buildEditorConfig(args) {
             Typography,
             Placeholder.configure({
                 emptyEditorClass: 'empty-editor',
-                placeholder: t__('fields.write_something') + (withSuggestion ? ' / ⌘ + K' : '')
+                placeholder: withSuggestion ? t__('fields.write_or_slash') : t__('fields.write_something')
             })
         ]
     };

package/dist/fields/rich-text/core/extensions/drag-handle/drag-handle-plugin.js

@@ -62,10 +62,36 @@ export const DragHandlePlugin = ({ pluginKey = dragHandlePluginDefaultKey, eleme
         element.style.visibility = '';
         element.style.pointerEvents = 'auto';
     }
-    function repositionDragHandle(dom) {
-        const virtualElement = getReferencedVirtualElement?.() || {
-            getBoundingClientRect: () => dom.getBoundingClientRect()
+    /**
+     * The first line of the node: under its top padding, one line high, whatever the node holds.
+     * The handle centres on it, so a paragraph and a media node get it at the same place.
+     */
+    function firstLineOf(dom) {
+        return {
+            getBoundingClientRect: () => {
+                const rect = dom.getBoundingClientRect();
+                const style = getComputedStyle(dom);
+                const paddingTop = parseFloat(style.paddingTop) || 0;
+                const lineHeight = style.lineHeight === 'normal'
+                    ? parseFloat(style.fontSize) * 1.2
+                    : parseFloat(style.lineHeight);
+                const height = Math.min(lineHeight || rect.height, rect.height);
+                const top = rect.top + paddingTop;
+                return {
+                    x: rect.left,
+                    y: top,
+                    top,
+                    left: rect.left,
+                    right: rect.right,
+                    bottom: top + height,
+                    width: rect.width,
+                    height
+                };
+            }
         };
+    }
+    function repositionDragHandle(dom) {
+        const virtualElement = getReferencedVirtualElement?.() || firstLineOf(dom);
         computePosition(virtualElement, element, computePositionConfig).then((val) => {
             Object.assign(element.style, {
                 position: val.strategy,

package/dist/fields/rich-text/core/extensions/drag-handle/drag-handle.d.ts

@@ -1,6 +1,7 @@
 import type { ComputePositionConfig, VirtualElement } from '@floating-ui/dom';
 import { type Editor, Extension } from '@tiptap/core';
 import type { Node } from '@tiptap/pm/model';
+/** Beside the node's first line, centred on it. */
 export declare const defaultComputePositionConfig: ComputePositionConfig;
 export interface DragHandleOptions {
     /**

package/dist/fields/rich-text/core/extensions/drag-handle/drag-handle.js

@@ -1,7 +1,8 @@
 import { Extension } from '@tiptap/core';
 import { DragHandlePlugin } from './drag-handle-plugin.js';
+/** Beside the node's first line, centred on it. */
 export const defaultComputePositionConfig = {
-    placement: 'left-start',
+    placement: 'left',
     strategy: 'absolute'
 };
 export const DragHandle = Extension.create({

package/dist/fields/rich-text/core/features/fields/fields.css

@@ -3,9 +3,8 @@
 }
 
 .ProseMirror-focused .ProseMirror-selectednode .rz-fields-preview__trigger {
-  box-shadow:
-    0 0 0 var(--rz-ring-offset, 0px) hsl(var(--rz-ring-offset-bg, var(--rz-gray-6)) / 1),
-    0 0 0 calc(var(--rz-ring-offset, 0px) + 1px) hsl(var(--rz-color-spot) / var(--rz-ring-opacity, 1));
+  outline: 2px solid var(--rz-accent-border);
+  outline-offset: 2px;
 }
 
 .rz-rich-text-sheet {

package/dist/fields/rich-text/core/features/hr/hr.css

@@ -2,7 +2,7 @@
   margin-top: 0;
   margin-bottom: 0;
   padding-top: 0;
-  background-color: hsl(var(--rz-input-bg));
+  background-color: var(--rz-bg-well);
   padding-bottom: 0;
   /*border-top-color: none;*/
   border-left-color: none;
@@ -10,10 +10,10 @@
   min-height: var(--rz-size-6);
 
   box-shadow:
-    inset 0 0 0px calc(var(--rz-size-3) - 1px) hsl(var(--rz-color-bg)),
-    0 2px 0px 0 hsl(var(--rz-color-bg));
+    inset 0 0 0px calc(var(--rz-size-3) - 1px) var(--rz-bg-page),
+    0 2px 0px 0 var(--rz-bg-page);
 
   &.ProseMirror-selectednode {
-    background-color: hsl(var(--rz-color-spot));
+    background-color: var(--rz-accent);
   }
 }

package/dist/fields/rich-text/core/features/link/component/link-selector.css

@@ -1,4 +0,0 @@
-.rz-rich-text__editor a {
-  text-decoration: underline;
-  text-underline-offset: 3px;
-}

package/dist/fields/rich-text/core/features/link/component/link-selector.svelte

@@ -146,7 +146,7 @@
     open = false;
   }
 
-  /** Whenever the target change, update editor content */
+  /** The target changed: the link takes it. Not on mount, which would focus the editor. */
   watch(
     () => isTargetBlank,
     (current, previous) => {
@@ -157,7 +157,8 @@
           .setLink({ href: urlState.url, target: isTargetBlank ? '_blank' : '_self' })
           .run();
       }
-    }
+    },
+    { lazy: true }
   );
 
   function onDelete() {
@@ -198,9 +199,7 @@
       <div class="rz-link-selector__button">
         {#if editor.getAttributes('link').href}
           <Button
-            --rz-button-ghost-fg={isTargetBlank
-              ? 'hsl(var(--rz-color-spot))'
-              : 'hsl(var(--rz-color-fg))'}
+            --rz-button-ghost-fg={isTargetBlank ? 'var(--rz-accent-text)' : 'var(--rz-fg)'}
             onclick={() => (isTargetBlank = !isTargetBlank)}
             variant="ghost"
             size="icon-sm"
@@ -252,8 +251,22 @@
   </Command.List>
 </Command.Dialog>
 
-<style>
-  .rz-link-selector {
+<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+
+/* A well: an input, a track, a dropzone. Its edge shows on hover. */
+
+/* The hover tint, laid over the element's own fill. */
+
+/* The picked item of a segmented control. */
+
+/* The primary button's face: black on light, white on dark. */
+
+/* Keyboard focus on a button, a tab, a link. */
+
+/* A focused input: an accent edge and a soft halo. */
+
+/* An input with an error. */
+.rz-link-selector {
     position: relative;
 
     :global(.rz-input) {
@@ -278,7 +291,10 @@
     margin-top: var(--rz-size-1);
     display: flex;
     width: 18rem;
-    box-shadow: var(--rz-shadow-xl);
+    background-color: var(--rz-bg-float);
+    box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-float);
     animation: fadeInSlideFromTop 0.2s ease-out;
     border-radius: var(--rz-radius-lg);
   }

package/dist/fields/rich-text/core/features/resource/resource-extension.js

@@ -12,15 +12,15 @@ export const Resource = Node.create({
             acc[key] = { default: null };
             return acc;
         }, 
-        // Fresh attributes allowing to show the dialog immediately after insertion
-        { _fresh: { default: true } });
+        // A node just inserted opens its dialog; one read from stored content does not.
+        { _fresh: { default: false } });
     },
     addCommands() {
         return {
             insertResource: (attributes = {}) => ({ commands }) => {
                 return commands.insertContent({
                     type: this.name,
-                    attrs: attributes
+                    attrs: { _fresh: true, ...attributes }
                 });
             }
         };

package/dist/fields/rich-text/core/features/resource/resource.svelte

@@ -35,8 +35,8 @@
     } else {
       selected = null;
     }
+    // A node just inserted opens its dialog.
     if (node.attrs._fresh) {
-      // If the resource is fresh, we want to open the dialog to select a resource
       isDialogOpen = true;
     }
   });
@@ -127,18 +127,32 @@
   </Command.List>
 </Command.Dialog>
 
-<style>:global(.ProseMirror-focused .ProseMirror-selectednode .rz-richtext-resource) {
+<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+
+/* A well: an input, a track, a dropzone. Its edge shows on hover. */
+
+/* The hover tint, laid over the element's own fill. */
+
+/* The picked item of a segmented control. */
+
+/* The primary button's face: black on light, white on dark. */
+
+/* Keyboard focus on a button, a tab, a link. */
+
+/* A focused input: an accent edge and a soft halo. */
+
+/* An input with an error. */
+:global(.ProseMirror-focused .ProseMirror-selectednode .rz-richtext-resource) {
     :global(.rz-card-resource),
     :global(button.rz-richtext-resource__add) {
-      box-shadow:
-    0 0 0 var(--rz-ring-offset, 0px) hsl(var(--rz-ring-offset-bg, var(--rz-gray-6)) / 1),
-    0 0 0 calc(var(--rz-ring-offset, 0px) + 1px) hsl(var(--rz-color-spot) / var(--rz-ring-opacity, 1));
+      outline: 2px solid var(--rz-accent-border);
+      outline-offset: 2px;
     }
   }
   .rz-richtext-resource {
     position: relative;
     --rz-border-radius: var(--rz-radius-xl);
-    --rz-ressource-card-thumbnail-bg: light-dark(hsl(var(--rz-gray-15)), hsl(var(--rz-gray-3)));
-    --rz-ressource-card-bg: light-dark(hsl(var(--rz-gray-18)), hsl(var(--rz-gray-2)));
+    --rz-ressource-card-thumbnail-bg: var(--rz-bg-well);
+    --rz-ressource-card-bg: var(--rz-bg-raised);
   }
 </style>

package/dist/fields/rich-text/core/features/upload/upload-extension.js

@@ -12,16 +12,15 @@ export const Upload = Node.create({
             acc[key] = { default: null };
             return acc;
         }, 
-        // We use this attribute to determine if the resource is fresh or not.
-        // If it's fresh, we want to open the dialog
-        { _fresh: { default: true } });
+        // A node just inserted opens its dialog; one read from stored content does not.
+        { _fresh: { default: false } });
     },
     addCommands() {
         return {
             insertUpload: (attributes = {}) => ({ commands }) => {
                 return commands.insertContent({
                     type: this.name,
-                    attrs: attributes
+                    attrs: { _fresh: true, ...attributes }
                 });
             }
         };