rimecms 0.26.6 → 0.26.8

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

@@ -1,17 +1,17 @@
 .rz-bubble-menu {
-	z-index: 110;
-	display: flex;
-	width: -moz-fit-content;
-	width: fit-content;
-	gap: var(--rz-size-1);
-	border-radius: var(--rz-radius-lg);
-	border: var(--rz-border);
-	background-color: hsl(var(--rz-color-bg));
-	padding: var(--rz-size-1);
-	box-shadow: var(--rz-shadow-xl);
-	visibility: hidden;
-	position: absolute;
-	left: -9999px;
-	top: -9999px;
-	height: var(--rz-input-height);
+  z-index: 110;
+  display: flex;
+  width: -moz-fit-content;
+  width: fit-content;
+  gap: var(--rz-size-1);
+  border-radius: var(--rz-radius-lg);
+  border: var(--rz-border);
+  background-color: hsl(var(--rz-color-bg));
+  padding: var(--rz-size-1);
+  box-shadow: var(--rz-shadow-xl);
+  visibility: hidden;
+  position: absolute;
+  left: -9999px;
+  top: -9999px;
+  height: var(--rz-input-height);
 }

package/dist/fields/rich-text/component/bubble-menu/bubble-menu.svelte

@@ -1,157 +1,157 @@
 <script lang="ts">
-	import type { Editor } from '@tiptap/core';
-	import { BubbleMenuPlugin } from '@tiptap/extension-bubble-menu';
-	import { onDestroy, onMount } from 'svelte';
-	import type {
-		RichTextFeature,
-		RichTextFeatureMark,
-		RichTextFeatureNode
-	} from '../../core/types.js';
-	import { getRichTextContext } from '../context.svelte';
-	import './bubble-menu.css';
-	import IconButton from './icon-button/icon-button.svelte';
-	import NodeSelector, { type NodeSelectorItem } from './node-selector/node-selector.svelte';
-
-	type BubbleMenuItem = (RichTextFeatureMark | RichTextFeatureNode) & {
-		name: string;
-		options?: any;
-	};
-
-	type Props = {
-		editor: Editor;
-		features: RichTextFeature[];
-		path: string;
-	};
-
-	const { editor, path, features = [] }: Props = $props();
-
-	let element: HTMLElement;
-	let isOpen = $state(false);
-
-	// Get all node selector items from features
-	const getNodeItems = (nodes: any[], feature: any): NodeSelectorItem[] =>
-		nodes
-			.map((node) => ({
-				...node,
-				name: node.label,
-				options: feature.extension?.options
-			}))
-			.filter((node) => !!node.nodeSelector);
-
-	const nodeItems = $derived(
-		features.flatMap((feature) => getNodeItems(feature.nodes || [], feature))
-	);
-
-	// Get all items with bubble menu components (both nodes and marks)
-	const getBubbleMenuItems = (items: any[], feature: any): BubbleMenuItem[] =>
-		items
-			.map((item) => ({
-				...item,
-				name: item.label,
-				options: feature.extension?.options
-			}))
-			.filter((item) => !!item.name)
-			.filter((item) => !!item.bubbleMenu);
-
-	const bubbleMenuItems = $derived([
-		...features.flatMap((feature) => getBubbleMenuItems(feature.marks || [], feature)),
-		...features.flatMap((feature) => getBubbleMenuItems(feature.nodes || [], feature))
-	]);
-
-	const pluginKey = $derived(path);
-	const updateDelay = 250;
-	const richTextContext = $derived(getRichTextContext(path));
-
-	const shouldShow = ({ editor }: { editor: Editor }) => {
-		return (
-			editor.view.state.selection.$head.depth > 0 && editor.view.state.selection.content().size > 0
-		);
-	};
-
-	function setActiveItems() {
-		activeItems = bubbleMenuItems.reduce(
-			(acc, item) => {
-				acc[item.name] = item.isActive?.({ editor }) || false;
-				return acc;
-			},
-			{} as Record<string, boolean>
-		);
-	}
-
-	onMount(() => {
-		const plugin = BubbleMenuPlugin({
-			pluginKey,
-			editor,
-			element,
-			shouldShow,
-			updateDelay,
-			options: {
-				onShow() {
-					richTextContext.bubbleOpen = true;
-					isOpen = true;
-				},
-				onHide() {
-					richTextContext.bubbleOpen = false;
-					isOpen = false;
-				}
-			}
-		});
-
-		editor.registerPlugin(plugin);
-		editor.on('selectionUpdate', setActiveItems);
-		setActiveItems();
-	});
-
-	onDestroy(() => {
-		editor.off('selectionUpdate', setActiveItems);
-		editor.unregisterPlugin(pluginKey);
-	});
-
-	let activeItems = $state<Record<string, boolean>>({});
+  import type { Editor } from '@tiptap/core';
+  import { BubbleMenuPlugin } from '@tiptap/extension-bubble-menu';
+  import { onDestroy, onMount } from 'svelte';
+  import type {
+    RichTextFeature,
+    RichTextFeatureMark,
+    RichTextFeatureNode
+  } from '../../core/types.js';
+  import { getRichTextContext } from '../context.svelte';
+  import './bubble-menu.css';
+  import IconButton from './icon-button/icon-button.svelte';
+  import NodeSelector, { type NodeSelectorItem } from './node-selector/node-selector.svelte';
+
+  type BubbleMenuItem = (RichTextFeatureMark | RichTextFeatureNode) & {
+    name: string;
+    options?: any;
+  };
+
+  type Props = {
+    editor: Editor;
+    features: RichTextFeature[];
+    path: string;
+  };
+
+  const { editor, path, features = [] }: Props = $props();
+
+  let element: HTMLElement;
+  let isOpen = $state(false);
+
+  // Get all node selector items from features
+  const getNodeItems = (nodes: any[], feature: any): NodeSelectorItem[] =>
+    nodes
+      .map((node) => ({
+        ...node,
+        name: node.label,
+        options: feature.extension?.options
+      }))
+      .filter((node) => !!node.nodeSelector);
+
+  const nodeItems = $derived(
+    features.flatMap((feature) => getNodeItems(feature.nodes || [], feature))
+  );
+
+  // Get all items with bubble menu components (both nodes and marks)
+  const getBubbleMenuItems = (items: any[], feature: any): BubbleMenuItem[] =>
+    items
+      .map((item) => ({
+        ...item,
+        name: item.label,
+        options: feature.extension?.options
+      }))
+      .filter((item) => !!item.name)
+      .filter((item) => !!item.bubbleMenu);
+
+  const bubbleMenuItems = $derived([
+    ...features.flatMap((feature) => getBubbleMenuItems(feature.marks || [], feature)),
+    ...features.flatMap((feature) => getBubbleMenuItems(feature.nodes || [], feature))
+  ]);
+
+  const pluginKey = $derived(path);
+  const updateDelay = 250;
+  const richTextContext = $derived(getRichTextContext(path));
+
+  const shouldShow = ({ editor }: { editor: Editor }) => {
+    return (
+      editor.view.state.selection.$head.depth > 0 && editor.view.state.selection.content().size > 0
+    );
+  };
+
+  function setActiveItems() {
+    activeItems = bubbleMenuItems.reduce(
+      (acc, item) => {
+        acc[item.name] = item.isActive?.({ editor }) || false;
+        return acc;
+      },
+      {} as Record<string, boolean>
+    );
+  }
+
+  onMount(() => {
+    const plugin = BubbleMenuPlugin({
+      pluginKey,
+      editor,
+      element,
+      shouldShow,
+      updateDelay,
+      options: {
+        onShow() {
+          richTextContext.bubbleOpen = true;
+          isOpen = true;
+        },
+        onHide() {
+          richTextContext.bubbleOpen = false;
+          isOpen = false;
+        }
+      }
+    });
+
+    editor.registerPlugin(plugin);
+    editor.on('selectionUpdate', setActiveItems);
+    setActiveItems();
+  });
+
+  onDestroy(() => {
+    editor.off('selectionUpdate', setActiveItems);
+    editor.unregisterPlugin(pluginKey);
+  });
+
+  let activeItems = $state<Record<string, boolean>>({});
 </script>
 
 <div
-	id={pluginKey}
-	bind:this={element}
-	class="rz-bubble-menu {isOpen ? 'rz-bubble-menu--open' : ''}"
+  id={pluginKey}
+  bind:this={element}
+  class="rz-bubble-menu {isOpen ? 'rz-bubble-menu--open' : ''}"
 >
-	{#if nodeItems.length > 1}
-		<NodeSelector {editor} items={nodeItems} isMenuOpen={isOpen} />
-	{/if}
-
-	{#if bubbleMenuItems.length > 0}
-		{#each bubbleMenuItems as item, index (index)}
-			{#if item.bubbleMenu && item.bubbleMenu.component}
-				{@const FeatureComponent = item.bubbleMenu.component}
-				<FeatureComponent
-					active={activeItems[item.name]}
-					options={item.options}
-					{editor}
-					{path}
-					context={richTextContext}
-				/>
-			{:else if item.bubbleMenu?.command}
-				<IconButton
-					active={activeItems[item.name]}
-					icon={item.icon}
-					onclick={() => {
-						item.bubbleMenu?.command?.({ editor });
-						// Update active state after command execution
-						activeItems[item.name] = item.isActive?.({ editor }) || false;
-					}}
-				/>
-			{/if}
-		{/each}
-	{/if}
+  {#if nodeItems.length > 1}
+    <NodeSelector {editor} items={nodeItems} isMenuOpen={isOpen} />
+  {/if}
+
+  {#if bubbleMenuItems.length > 0}
+    {#each bubbleMenuItems as item, index (index)}
+      {#if item.bubbleMenu && item.bubbleMenu.component}
+        {@const FeatureComponent = item.bubbleMenu.component}
+        <FeatureComponent
+          active={activeItems[item.name]}
+          options={item.options}
+          {editor}
+          {path}
+          context={richTextContext}
+        />
+      {:else if item.bubbleMenu?.command}
+        <IconButton
+          active={activeItems[item.name]}
+          icon={item.icon}
+          onclick={() => {
+            item.bubbleMenu?.command?.({ editor });
+            // Update active state after command execution
+            activeItems[item.name] = item.isActive?.({ editor }) || false;
+          }}
+        />
+      {/if}
+    {/each}
+  {/if}
 </div>
 
 <style>
-	.rz-bubble-menu {
-		opacity: 0;
-		pointer-events: none;
-		&.rz-bubble-menu--open {
-			opacity: 1;
-			pointer-events: all;
-		}
-	}
+  .rz-bubble-menu {
+    opacity: 0;
+    pointer-events: none;
+    &.rz-bubble-menu--open {
+      opacity: 1;
+      pointer-events: all;
+    }
+  }
 </style>

package/dist/fields/rich-text/component/bubble-menu/icon-button/icon-button.css

@@ -1,15 +1,15 @@
 .rz-icon-button {
-	display: flex;
-	width: var(--rz-size-9);
-	height: var(--rz-size-9);
-	align-items: center;
-	justify-content: center;
-	border-radius: var(--rz-radius-lg);
-	/* padding: var(--rz-size-2); */
-	color: hsl(var(--rz-color-fg));
+  display: flex;
+  width: var(--rz-size-9);
+  height: var(--rz-size-9);
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--rz-radius-lg);
+  /* padding: var(--rz-size-2); */
+  color: hsl(var(--rz-color-fg));
 }
 
 .rz-icon-button__icon--active {
-	color: hsl(var(--rz-color-spot));
-	opacity: 1;
+  color: hsl(var(--rz-color-spot));
+  opacity: 1;
 }

package/dist/fields/rich-text/component/bubble-menu/icon-button/icon-button.svelte

@@ -1,25 +1,31 @@
 <script lang="ts">
-	import Button from '../../../../../panel/components/ui/button/button.svelte';
-	import type { IconProps } from '@lucide/svelte';
-	import { type Component } from 'svelte';
-	import './icon-button.css';
+  import Button from '../../../../../panel/components/ui/button/button.svelte';
+  import type { IconProps } from '@lucide/svelte';
+  import { type Component } from 'svelte';
+  import './icon-button.css';
 
-	type Props = {
-		icon: Component<IconProps>;
-		type?: 'submit' | 'button';
-		active?: boolean;
-		class?: string;
-		[x: string]: any;
-	};
+  type Props = {
+    icon: Component<IconProps>;
+    type?: 'submit' | 'button';
+    active?: boolean;
+    class?: string;
+    [x: string]: any;
+  };
 
-	const { class: className, icon: Icon, active, type = 'button', ...restProps }: Props = $props();
+  const { class: className, icon: Icon, active, type = 'button', ...restProps }: Props = $props();
 
-	const buttonActiveClass = $derived(active ? 'rz-icon-button--active' : '');
-	const iconActiveClass = $derived(active ? 'rz-icon-button__icon--active' : '');
+  const buttonActiveClass = $derived(active ? 'rz-icon-button--active' : '');
+  const iconActiveClass = $derived(active ? 'rz-icon-button__icon--active' : '');
 </script>
 
 {#key active}
-	<Button size="icon-sm" variant={active ? 'secondary' : 'ghost'} class="rz-icon-button {buttonActiveClass} {className}" {type} {...restProps}>
-		<Icon class="rz-icon-button__icon {iconActiveClass}" size={15} strokeWidth={2} />
-	</Button>
+  <Button
+    size="icon-sm"
+    variant={active ? 'secondary' : 'ghost'}
+    class="rz-icon-button {buttonActiveClass} {className}"
+    {type}
+    {...restProps}
+  >
+    <Icon class="rz-icon-button__icon {iconActiveClass}" size={15} strokeWidth={2} />
+  </Button>
 {/key}

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

@@ -1,14 +1,14 @@
 .rz-node-selector__trigger {
-	display: flex;
-	height: 100%;
-	align-items: center;
-	gap: var(--rz-size-1);
-	white-space: nowrap;
-	border-radius: var(--rz-radius-lg);
-	padding: var(--rz-size-2);
-	font-size: var(--rz-text-sm);
-	font-variation-settings: 'wght' 500;
-	color: hsl(var(--rz-color-fg) / 0.6);
+  display: flex;
+  height: 100%;
+  align-items: center;
+  gap: var(--rz-size-1);
+  white-space: nowrap;
+  border-radius: var(--rz-radius-lg);
+  padding: var(--rz-size-2);
+  font-size: var(--rz-text-sm);
+  font-variation-settings: 'wght' 500;
+  color: hsl(var(--rz-color-fg) / 0.6);
 }
 
 /* .rz-node-selector__trigger:hover {
@@ -16,43 +16,43 @@
 } */
 
 .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;
-	max-height: 20rem;
-	width: 12rem;
-	flex-direction: column;
-	overflow: hidden;
-	overflow-y: auto;
-	transform: translateX(calc( -1 * var(--rz-size-1)));
-	/* border-radius: var(--rz-radius-xl); */
-	border: var(--rz-border);
-	padding: var(--rz-size-1);
-	box-shadow: var(--rz-shadow-xl);
+  /* background-color: hsl(var(--rz-gray-6)); */
+  margin-top: var(--rz-size-1-5);
+  margin-bottom: var(--rz-size-1);
+  display: flex;
+  max-height: 20rem;
+  width: 12rem;
+  flex-direction: column;
+  overflow: hidden;
+  overflow-y: auto;
+  transform: translateX(calc(-1 * var(--rz-size-1)));
+  /* border-radius: var(--rz-radius-xl); */
+  border: var(--rz-border);
+  padding: var(--rz-size-1);
+  box-shadow: var(--rz-shadow-xl);
 }
 
 .rz-node-selector__node {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	border-radius: var(--rz-radius-sm);
-	padding: var(--rz-size-1) var(--rz-size-2);
-	font-size: var(--rz-text-sm);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: var(--rz-radius-sm);
+  padding: var(--rz-size-1) var(--rz-size-2);
+  font-size: var(--rz-text-sm);
 }
 
 .rz-node-selector__node:hover {
-	background-color: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-3)));
+  background-color: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-3)));
 }
 
 .rz-node-selector__node-content {
-	display: flex;
-	align-items: center;
-	gap: var(--rz-size-2);
+  display: flex;
+  align-items: center;
+  gap: var(--rz-size-2);
 }
 
 .rz-node-selector__node-icon {
-	border-radius: var(--rz-radius-sm);
-	border: var(--rz-border);
-	padding: var(--rz-size-1);
+  border-radius: var(--rz-radius-sm);
+  border: var(--rz-border);
+  padding: var(--rz-size-1);
 }