rimecms 0.22.0

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

@@ -0,0 +1,280 @@
+<script lang="ts">
+	import { env } from '$env/dynamic/public';
+	import { apiUrl } from '../../../../../../core/api';
+	import { t__ } from '../../../../../../core/i18n/index.js';
+	import IconButton from '../../../../component/bubble-menu/icon-button/icon-button.svelte';
+	import Button from '../../../../../../panel/components/ui/button/button.svelte';
+	import * as Command from '../../../../../../panel/components/ui/command/index.js';
+	import Input from '../../../../../../panel/components/ui/input/input.svelte';
+	import { API_PROXY, getAPIProxyContext, type Resource } from '../../../../../../panel/context/api-proxy.svelte';
+	import { getLocaleContext } from '../../../../../../panel/context/locale.svelte';
+	import validate from '../../../../../../util/validate.js';
+	import { CornerDownLeft, ExternalLink, Link2, Newspaper, Trash } from '@lucide/svelte';
+	import type { Editor } from '@tiptap/core';
+	import { watch } from 'runed';
+	import type { LinkFeatureOptions } from '..';
+	import type { RichTextContext } from '../../../types';
+	import './link-selector.css';
+
+	type Props = { options?: LinkFeatureOptions; editor: Editor; context: RichTextContext; active: boolean };
+	type LinkResource = { title: string; url: string };
+	let { options, editor, context, active }: Props = $props();
+
+	let value = $state((editor && editor.getAttributes('link').href) || '');
+	let error = $state(false);
+	let open = $state(false);
+	let resourceDialogOpen = $state(false);
+	let isTargetBlank = $state((editor && editor.getAttributes('link').target === '_blank') || false);
+
+	/**
+	 * Logic to get internal resources e.g., collections, areas
+	 */
+	const APIProxy = getAPIProxyContext(API_PROXY.DOCUMENT);
+	const locale = getLocaleContext();
+	let resources = $state<Resource<LinkResource[]>[]>([]);
+	let resourcesFlatMap = $state<LinkResource[]>();
+	$effect(() => {
+		if (Array.isArray(options?.resources) && !resources.length) {
+			resources = options.resources.map((resourceOption) => {
+				let params = resourceOption.query ? `?${resourceOption.query}&select=title,url` : '?select=title,url';
+				params = locale.code ? `${params}&locale=${locale.code}` : params;
+				const url = `${apiUrl(resourceOption.slug)}${params}`;
+				return APIProxy.getRessource<LinkResource[]>(url, {
+					transformData: (data) => {
+						return 'docs' in data ? data.docs : 'doc' in data ? [data.doc] : data;
+					}
+				});
+			});
+		}
+	});
+
+	/** Create a flat map of all resources */
+	$effect(() => {
+		const notNull = (d: LinkResource[] | null): d is LinkResource[] => d !== null;
+		resourcesFlatMap = resources
+			.map((r) => r.data)
+			.filter(notNull)
+			.flatMap((r) => r)
+			.filter((r) => !!r.url);
+	});
+
+	/**
+	 * Whenever the url input opened and the selection is active
+	 * get initial values
+	 */
+	$effect(() => {
+		if (open) {
+			value = (editor && editor.getAttributes('link').href) || '';
+			isTargetBlank = (editor && editor.getAttributes('link').target === '_blank') || false;
+		}
+	});
+
+	/**
+	 * Whenver the bubble-menu is closed,
+	 *	close the linnk input
+	 */
+	$effect(() => {
+		if (!context.bubbleOpen) {
+			open = false;
+		}
+	});
+
+	/**
+	 * Validate url whenever value changes
+	 */
+	let urlState = $derived.by(() => {
+		let transformedUrl = value;
+		let isValid = false;
+
+		if (!value) {
+			return { url: '', isValid: false };
+		}
+
+		// Handle different URL types
+		// mailto
+		if (value.startsWith('mailto:')) {
+			const email = value.replace('mailto:', '');
+			isValid = validate.email(email) === true;
+			transformedUrl = value;
+		}
+		// tel
+		else if (value.startsWith('tel:')) {
+			const phone = value.replace('tel:', '');
+			isValid = validate.tel(phone) === true;
+			transformedUrl = value;
+		}
+		// Anchor link
+		else if (value.startsWith('#')) {
+			const anchor = value.slice(1);
+			isValid = validate.slug(anchor) === true;
+			transformedUrl = value;
+		}
+		// relative url
+		else if (value.startsWith('/')) {
+			transformedUrl = `${env.PUBLIC_RIME_URL}${value}`;
+			isValid = validate.url(transformedUrl) === true;
+		}
+		// Only validate if it already has a protocol
+		else {
+			isValid = value.includes('://') ? validate.url(value) === true : false;
+			transformedUrl = value;
+		}
+
+		return {
+			url: value,
+			isValid
+		};
+	});
+
+	function onSubmit(event?: SubmitEvent) {
+		event && event.preventDefault();
+		if (!urlState.isValid) return (error = true);
+		editor
+			.chain()
+			.focus()
+			.setLink({ href: urlState.url, target: isTargetBlank ? '_blank' : '_self' })
+			.run();
+		open = false;
+	}
+
+	/** Whenever the target change, update editor content */
+	watch(
+		() => isTargetBlank,
+		(current, previous) => {
+			if (current !== previous && urlState.isValid) {
+				editor
+					.chain()
+					.focus()
+					.setLink({ href: urlState.url, target: isTargetBlank ? '_blank' : '_self' })
+					.run();
+			}
+		}
+	);
+
+	function onDelete() {
+		editor.chain().focus().unsetLink().run();
+		value = '';
+		open = false;
+	}
+
+	function handleEscape(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			open = false;
+			resourceDialogOpen = false;
+		}
+	}
+
+	$effect(() => {
+		if (open) {
+			addEventListener('keydown', handleEscape);
+		}
+		return () => removeEventListener('keydown', handleEscape);
+	});
+</script>
+
+<div class="rz-link-selector">
+	<IconButton icon={Link2} {active} onclick={() => (open = !open)} />
+
+	{#if open}
+		<form onsubmit={onSubmit} class="rz-link-selector__form">
+			<Input
+				oninput={() => {
+					if (error && urlState.isValid) error = false;
+				}}
+				data-error={error || null}
+				placeholder="https://"
+				bind:value
+			/>
+
+			<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))'}
+						onclick={() => (isTargetBlank = !isTargetBlank)}
+						variant="ghost"
+						size="icon-sm"
+						icon={ExternalLink}
+					/>
+					<Button size="icon-sm" variant="ghost" icon={Trash} onclick={onDelete} />
+				{:else}
+					{#if options?.resources?.length}
+						<Button onclick={() => (resourceDialogOpen = true)} size="icon-sm" icon={Newspaper} variant="ghost" />
+					{/if}
+					<Button type="submit" variant="ghost" size="icon-sm" icon={CornerDownLeft}></Button>
+				{/if}
+			</div>
+		</form>
+	{/if}
+</div>
+
+<Command.Dialog bind:open={resourceDialogOpen}>
+	<Command.Input placeholder={t__('common.search')} />
+
+	<Command.List>
+		<Command.Empty>No results found.</Command.Empty>
+
+		{#if Array.isArray(resourcesFlatMap)}
+			{#each resourcesFlatMap as item, index (index)}
+				{#if item}
+					<Command.Item
+						onSelect={() => {
+							value = item.url.replace(env.PUBLIC_RIME_URL, '');
+							resourceDialogOpen = false;
+							onSubmit();
+						}}
+						value={item.title}
+					>
+						<div>
+							<p>
+								{item.title}
+							</p>
+						</div>
+					</Command.Item>
+				{/if}
+			{/each}
+		{/if}
+	</Command.List>
+</Command.Dialog>
+
+<style>
+	.rz-link-selector {
+		position: relative;
+
+		:global(.rz-input) {
+			font-size: var(--rz-text-sm);
+			border-radius: var(--rz-radius-lg);
+			padding-right: var(--rz-size-24);
+		}
+
+		:global(.rz-link-selector__button) {
+			position: absolute;
+			right: var(--rz-size-1);
+			top: var(--rz-size-1-5);
+			display: flex;
+			align-items: center;
+		}
+	}
+
+	.rz-link-selector__form {
+		position: absolute;
+		top: 110%;
+		z-index: 100;
+		margin-top: var(--rz-size-1);
+		display: flex;
+		width: 18rem;
+		box-shadow: var(--rz-shadow-xl);
+		animation: fadeInSlideFromTop 0.2s ease-out;
+		border-radius: var(--rz-radius-lg);
+	}
+
+	@keyframes fadeInSlideFromTop {
+		from {
+			opacity: 0;
+			transform: translateY(-0.25rem);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+</style>

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

@@ -0,0 +1,13 @@
+import type { Editor } from '@tiptap/core';
+import type { LinkFeatureOptions } from '..';
+import type { RichTextContext } from '../../../types';
+import './link-selector.css';
+type Props = {
+    options?: LinkFeatureOptions;
+    editor: Editor;
+    context: RichTextContext;
+    active: boolean;
+};
+declare const LinkSelector: import("svelte").Component<Props, {}, "">;
+type LinkSelector = ReturnType<typeof LinkSelector>;
+export default LinkSelector;

package/dist/fields/rich-text/core/features/link/index.d.ts

@@ -0,0 +1,10 @@
+import type { PrototypeSlug } from '../../../../../types.js';
+import { type LinkOptions } from '@tiptap/extension-link';
+import type { RichTextFeature } from '../../types.js';
+export type LinkFeatureOptions = LinkOptions & {
+    resources?: Array<{
+        slug: PrototypeSlug;
+        query?: string;
+    }>;
+};
+export declare const LinkFeature: (options?: Partial<LinkFeatureOptions>) => RichTextFeature;

package/dist/fields/rich-text/core/features/link/index.js

@@ -0,0 +1,37 @@
+import { LinkIcon } from '@lucide/svelte';
+import Link, {} from '@tiptap/extension-link';
+import LinkSelector from './component/link-selector.svelte';
+// Create the link extension
+const linkExtension = import.meta.env.SSR
+    ? undefined
+    : Link.extend({
+        addOptions() {
+            return {
+                // @ts-expect-error @tiptap error
+                ...this.parent?.(),
+                types: []
+            };
+        },
+        openOnClick: false,
+        HTMLAttributes: { class: 'rz-rich-text-link' }
+    });
+// Create link feature item
+const linkItem = {
+    label: 'Link',
+    icon: LinkIcon,
+    isActive: ({ editor }) => editor.isActive('link'),
+    bubbleMenu: {
+        component: LinkSelector
+    }
+};
+export const LinkFeature = (options) => ({
+    extension: linkExtension
+        ? linkExtension.configure({
+            openOnClick: false,
+            autolink: false,
+            protocols: ['mailto', 'tel', 'http', 'https'],
+            ...options
+        })
+        : undefined,
+    marks: [linkItem]
+});

package/dist/fields/rich-text/core/features/ordered-list.d.ts

@@ -0,0 +1,2 @@
+import type { RichTextFeature } from '../types.js';
+export declare const OrderedListFeature: RichTextFeature;

package/dist/fields/rich-text/core/features/ordered-list.js

@@ -0,0 +1,17 @@
+import { ListOrdered } from '@lucide/svelte';
+import { OrderedList } from '@tiptap/extension-list';
+const orderedListFeatureNode = {
+    label: 'Ordered list',
+    icon: ListOrdered,
+    isActive: ({ editor }) => editor.isActive('orderedList'),
+    bubbleMenu: {
+        command: ({ editor }) => editor.chain().focus().toggleOrderedList().run()
+    },
+    suggestion: {
+        command: ({ editor }) => editor.chain().focus().toggleOrderedList().run()
+    }
+};
+export const OrderedListFeature = {
+    extension: OrderedList,
+    nodes: [orderedListFeatureNode]
+};

package/dist/fields/rich-text/core/features/paragraph.d.ts

@@ -0,0 +1,2 @@
+import type { RichTextFeature } from '../types.js';
+export declare const ParagraphFeature: RichTextFeature;

package/dist/fields/rich-text/core/features/paragraph.js

@@ -0,0 +1,15 @@
+// /Users/ai/Dev/rime/src/lib/fields/rich-text/core/features/bold.ts
+import { Text } from '@lucide/svelte';
+import Paragraph from '@tiptap/extension-paragraph';
+const paragraphFeatureNode = {
+    label: 'Paragraph',
+    icon: Text,
+    isActive: ({ editor }) => editor.isActive('paragraph'),
+    nodeSelector: {
+        command: ({ editor }) => editor.chain().focus().setNode('paragraph').run()
+    }
+};
+export const ParagraphFeature = {
+    extension: Paragraph.configure(),
+    nodes: [paragraphFeatureNode]
+};

package/dist/fields/rich-text/core/features/resource/index.d.ts

@@ -0,0 +1,6 @@
+import type { PrototypeSlug } from '../../../../../types.js';
+import type { RichTextFeature } from '../../types.js';
+export declare const ResourceFeature: (args: {
+    query?: string;
+    slug: PrototypeSlug;
+}) => RichTextFeature;

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

@@ -0,0 +1,15 @@
+import { Images } from '@lucide/svelte';
+import { Resource } from './resource-extension.js';
+const resourceFeatureNode = {
+    label: 'Resource',
+    icon: Images,
+    isActive: ({ editor }) => editor.isActive('richt-text-resource'),
+    suggestion: {
+        //@ts-expect-error annoying
+        command: ({ editor }) => editor.chain().focus().insertResource().run()
+    }
+};
+export const ResourceFeature = (args) => ({
+    extension: Resource.configure(args),
+    nodes: [resourceFeatureNode]
+});

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

@@ -0,0 +1,10 @@
+import type { Dic } from '../../../../../util/types.js';
+import { Node } from '@tiptap/core';
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        resource: {
+            insertResource: (attributes: Dic) => ReturnType;
+        };
+    }
+}
+export declare const Resource: Node<any, any>;

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

@@ -0,0 +1,41 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+import SvelteNodeViewRenderer from '../../svelte/node-view-renderer.svelte';
+import ResourceComponent from './resource.svelte';
+export const Resource = Node.create({
+    name: 'resource',
+    group: 'block',
+    atom: true,
+    draggable: true, // Optional: to make the node draggable
+    inline: false,
+    addOptions() {
+        return {
+            query: null,
+            _type: null
+        };
+    },
+    addAttributes() {
+        return ['id', 'title', '_type', '_thumbnail'].reduce((acc, key) => {
+            acc[key] = { default: null };
+            return acc;
+        }, {});
+    },
+    addCommands() {
+        return {
+            insertResource: (attributes = {}) => ({ commands }) => {
+                return commands.insertContent({
+                    type: this.name,
+                    attrs: attributes
+                });
+            }
+        };
+    },
+    parseHTML() {
+        return [{ tag: 'richt-text-resource' }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ['richt-text-resource', mergeAttributes(HTMLAttributes)];
+    },
+    addNodeView() {
+        return SvelteNodeViewRenderer(ResourceComponent);
+    }
+});

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

@@ -0,0 +1,147 @@
+<script lang="ts">
+	import { apiUrl } from '../../../../../core/api';
+	import type { GenericDoc } from '../../../../../core/types/doc.js';
+	import Button from '../../../../../panel/components/ui/button/button.svelte';
+	import CardResource from '../../../../../panel/components/ui/card-resource/card-resource.svelte';
+	import * as Command from '../../../../../panel/components/ui/command/index.js';
+	import { API_PROXY, setAPIProxyContext } from '../../../../../panel/context/api-proxy.svelte';
+	import type { NodeViewProps } from '@tiptap/core';
+	import { onMount } from 'svelte';
+	import NodeViewWrapper from '../../svelte/node-view-wrapper.svelte';
+	import type { RichTextResource } from './types';
+
+	type RequiredNodeAttributes = {
+		id: string;
+		title: string;
+		_type: string;
+	};
+
+	let { node, updateAttributes, extension }: NodeViewProps = $props();
+	let isDialogOpen = $state(false);
+	let selected = $state<RichTextResource | null>();
+
+	const handleClick = () => {
+		isDialogOpen = true;
+	};
+
+	onMount(() => {
+		if (node.attrs.id) {
+			selected = {
+				id: node.attrs.id,
+				title: node.attrs.title,
+				_type: node.attrs._type,
+				_thumbnail: node.attrs._thumbnail
+			};
+		} else {
+			selected = null;
+		}
+	});
+
+	// Need to set a local APIProxy because the app one is not
+	// available from inside tiptap rendered components
+	// TODO try to pass it as a prop somehow
+	const APIProxy = setAPIProxyContext(API_PROXY.TIPTAP);
+	const url = extension.options.query
+		? apiUrl(extension.options.slug, extension.options.query)
+		: apiUrl(extension.options.slug);
+	const ressource = APIProxy.getRessource<{ docs: GenericDoc[] }>(url);
+	let docs = $state<GenericDoc[]>([]);
+
+	$effect(() => {
+		if (ressource.data) {
+			docs = ressource.data.docs;
+			// Update atttributes if document title has changed
+			if (node.attrs.id) {
+				selected = docs.find((doc) => doc.id === node.attrs.id);
+			}
+		}
+	});
+
+	// Handle dialog selection
+	function handleResourceSelection(doc: GenericDoc) {
+		// Close the dialog
+		isDialogOpen = false;
+
+		// Update the selected resource
+		selected = doc;
+
+		// Update node attributes
+		updateNodeAttributes();
+	}
+
+	// Handle removing resource
+	function removeResource() {
+		selected = null;
+
+		// Update node attributes with empty values
+		updateAttributes({
+			id: null,
+			title: null,
+			slug: null,
+			_thumbnail: null
+		});
+	}
+
+	// Update node attributes based on current state
+	function updateNodeAttributes() {
+		if (!selected) return;
+
+		updateAttributes({
+			id: selected.id,
+			title: selected.title,
+			_type: extension.options.slug,
+			_thumbnail: selected._thumbnail
+		});
+	}
+</script>
+
+<NodeViewWrapper>
+	<div
+		data-drag-handle
+		class="rz-richtext-resource"
+		class:rz-richtext-resource--selected={!!selected}
+	>
+		{#if !selected}
+			<Button class="rz-richtext-resource__add" variant="outline" size="sm" onclick={handleClick}
+				>Add a resource</Button
+			>
+		{:else}
+			<CardResource resource={selected as RequiredNodeAttributes} onCloseClick={removeResource} />
+		{/if}
+	</div>
+</NodeViewWrapper>
+
+<Command.Dialog bind:open={isDialogOpen} onOpenChange={(val) => (isDialogOpen = val)}>
+	<Command.Input placeholder="Select a resource" />
+
+	<Command.List>
+		<Command.Empty>No results found.</Command.Empty>
+		{#each docs as doc, index (index)}
+			<Command.Item
+				value={doc.filename}
+				onSelect={() => {
+					handleResourceSelection(doc);
+				}}
+			>
+				{doc.title}
+			</Command.Item>
+		{/each}
+	</Command.List>
+</Command.Dialog>
+
+<style>
+	: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));
+		}
+	}
+	.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)));
+	}
+</style>

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

@@ -0,0 +1,4 @@
+import type { NodeViewProps } from '@tiptap/core';
+declare const Resource: import("svelte").Component<NodeViewProps, {}, "">;
+type Resource = ReturnType<typeof Resource>;
+export default Resource;

package/dist/fields/rich-text/core/features/resource/types.d.ts

@@ -0,0 +1,11 @@
+export type RichTextResource = {
+    id: string;
+    title: string;
+    _type: string;
+    _thumbnail?: string;
+} | {
+    id: null;
+    title: null;
+    _type: null;
+    _thumbnail: null;
+};

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

@@ -0,0 +1 @@
+export {};

package/dist/fields/rich-text/core/features/upload/index.d.ts

@@ -0,0 +1,6 @@
+import type { CollectionSlug } from '../../../../../types.js';
+import type { RichTextFeature } from '../../types.js';
+export declare const UploadFeature: (args: {
+    slug: CollectionSlug;
+    query?: string;
+}) => RichTextFeature;

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

@@ -0,0 +1,15 @@
+import { Images } from '@lucide/svelte';
+import { Upload } from './upload-extension.js';
+const uploadFeatureNode = {
+    label: 'Media',
+    icon: Images,
+    isActive: ({ editor }) => editor.isActive('richt-text-media'),
+    suggestion: {
+        //@ts-expect-error insertMedia is defined by the extension
+        command: ({ editor }) => editor.chain().focus().insertMedia().run()
+    }
+};
+export const UploadFeature = (args) => ({
+    extension: Upload.configure(args),
+    nodes: [uploadFeatureNode]
+});

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

@@ -0,0 +1,2 @@
+import { Node } from '@tiptap/core';
+export declare const Upload: Node<any, any>;