@velastack/cms 0.1.0

package/dist/components/cms/cms-rich-text-editable.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	import { onMount, onDestroy, untrack } from 'svelte';
+	import { Editor } from '@tiptap/core';
+	import StarterKit from '@tiptap/starter-kit';
+	import { cmsStore, type CmsScopeRef } from './cms-store.svelte.js';
+	import CssRoot from '../admin-bar/css-root.svelte';
+	import Toolbar from './cms-rich-text-toolbar.svelte';
+
+	type Props = {
+		scope: CmsScopeRef;
+		name: string;
+		initial: string;
+	};
+	let { scope, name, initial }: Props = $props();
+
+	let host = $state<HTMLDivElement>();
+	let wrap = $state<HTMLDivElement>();
+	let editor = $state<Editor>();
+	let focused = $state(false);
+	let tick = $state(0);
+
+	const current = $derived.by(() => {
+		const draft = cmsStore.getValue(scope, name);
+		return typeof draft === 'string' ? draft : initial;
+	});
+
+	onMount(() => {
+		editor = new Editor({
+			element: host,
+			extensions: [StarterKit.configure({ heading: { levels: [2, 3] } })],
+			content: current,
+			editorProps: {
+				attributes: {
+					class: 'cms-rich-text-editable-pm',
+					'data-cms-name': name
+				}
+			},
+			onUpdate: ({ editor }) => {
+				cmsStore.setValue(scope, name, editor.getHTML());
+			},
+			onTransaction: () => {
+				tick++;
+			}
+		});
+	});
+
+	onDestroy(() => editor?.destroy());
+
+	$effect(() => {
+		if (!editor || focused) return;
+		const next = current;
+		untrack(() => {
+			if (!editor) return;
+			if (editor.getHTML() !== next) {
+				editor.commands.setContent(next, { emitUpdate: false });
+			}
+		});
+	});
+</script>
+
+<CssRoot>
+	<div
+		class="cms-rich-text-editable-wrap"
+		class:focused
+		bind:this={wrap}
+		onfocusin={() => (focused = true)}
+		onfocusout={(e) => {
+			const next = e.relatedTarget as Node | null;
+			if (next && wrap?.contains(next)) return;
+			focused = false;
+		}}
+	>
+		{#if editor && focused}
+			<Toolbar {editor} {tick} />
+		{/if}
+		<div bind:this={host}></div>
+	</div>
+</CssRoot>
+
+<style>
+	.cms-rich-text-editable-wrap {
+		position: relative;
+		border-radius: 0.25rem;
+		outline: 1px dashed rgba(127, 127, 127, 0.6);
+		outline-offset: 2px;
+	}
+	.cms-rich-text-editable-wrap.focused {
+		outline: 2px solid var(--cms-accent, #534ab7);
+		outline-offset: 2px;
+	}
+	.cms-rich-text-editable-wrap :global(.cms-rich-text-editable-pm) {
+		outline: none;
+		min-height: 1.5em;
+	}
+	.cms-rich-text-editable-wrap :global(.cms-rich-text-editable-pm p:first-child) {
+		margin-top: 0;
+	}
+	.cms-rich-text-editable-wrap :global(.cms-rich-text-editable-pm p:last-child) {
+		margin-bottom: 0;
+	}
+</style>

package/dist/components/cms/cms-rich-text-editable.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type CmsScopeRef } from './cms-store.svelte.js';
+type Props = {
+    scope: CmsScopeRef;
+    name: string;
+    initial: string;
+};
+declare const CmsRichTextEditable: import("svelte").Component<Props, {}, "">;
+type CmsRichTextEditable = ReturnType<typeof CmsRichTextEditable>;
+export default CmsRichTextEditable;

package/dist/components/cms/cms-rich-text-toolbar.svelte

@@ -0,0 +1,246 @@
+<script lang="ts">
+	import type { Editor } from '@tiptap/core';
+	import { tick as svelteTick } from 'svelte';
+	import { Button } from '../admin-bar/ui/button/index.js';
+	import { Input } from '../admin-bar/ui/input/index.js';
+	import BoldIcon from '../admin-bar/icons/bold.svelte';
+	import ItalicIcon from '../admin-bar/icons/italic.svelte';
+	import LinkIcon from '../admin-bar/icons/link.svelte';
+	import UnlinkIcon from '../admin-bar/icons/link-2-off.svelte';
+	import H2Icon from '../admin-bar/icons/heading-2.svelte';
+	import H3Icon from '../admin-bar/icons/heading-3.svelte';
+	import ListIcon from '../admin-bar/icons/list.svelte';
+	import ListOrderedIcon from '../admin-bar/icons/list-ordered.svelte';
+	import QuoteIcon from '../admin-bar/icons/quote.svelte';
+	import CodeIcon from '../admin-bar/icons/code.svelte';
+	import UndoIcon from '../admin-bar/icons/undo-2.svelte';
+	import CheckIcon from '../admin-bar/icons/check.svelte';
+	import XIcon from '../admin-bar/icons/x.svelte';
+
+	type Props = {
+		editor: Editor;
+		/** Bumped on every editor transaction so derived state re-runs. */
+		tick: number;
+	};
+	let { editor, tick }: Props = $props();
+
+	const active = $derived.by(() => {
+		void tick;
+		return {
+			bold: editor.isActive('bold'),
+			italic: editor.isActive('italic'),
+			h2: editor.isActive('heading', { level: 2 }),
+			h3: editor.isActive('heading', { level: 3 }),
+			bullet: editor.isActive('bulletList'),
+			ordered: editor.isActive('orderedList'),
+			quote: editor.isActive('blockquote'),
+			code: editor.isActive('code'),
+			link: editor.isActive('link')
+		};
+	});
+
+	let mode: 'normal' | 'link' = $state('normal');
+	let linkUrl = $state('');
+	let linkInputEl: HTMLInputElement | null = $state(null);
+
+	const stop = (e: Event) => e.preventDefault();
+
+	const run = (fn: () => void) => (e: MouseEvent) => {
+		e.preventDefault();
+		fn();
+	};
+
+	const openLink = async (e: MouseEvent) => {
+		e.preventDefault();
+		linkUrl = (editor.getAttributes('link').href as string | undefined) ?? '';
+		mode = 'link';
+		await svelteTick();
+		linkInputEl?.focus();
+		linkInputEl?.select();
+	};
+
+	const applyLink = () => {
+		const href = linkUrl.trim();
+		if (href) {
+			editor.chain().focus().extendMarkRange('link').setLink({ href }).run();
+		} else {
+			editor.chain().focus().extendMarkRange('link').unsetLink().run();
+		}
+		mode = 'normal';
+	};
+
+	const removeLink = (e: MouseEvent) => {
+		e.preventDefault();
+		editor.chain().focus().extendMarkRange('link').unsetLink().run();
+		mode = 'normal';
+	};
+
+	const cancelLink = () => {
+		mode = 'normal';
+		editor.chain().focus().run();
+	};
+
+	const onLinkKey = (e: KeyboardEvent) => {
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			applyLink();
+		} else if (e.key === 'Escape') {
+			e.preventDefault();
+			cancelLink();
+		}
+	};
+</script>
+
+<div class="cms-rt-toolbar" role="toolbar" tabindex="-1" aria-label="Formatting" onmousedown={stop}>
+	{#if mode === 'normal'}
+		<Button
+			size="icon"
+			variant="ghost"
+			aria-label="Bold"
+			data-active={active.bold}
+			onmousedown={run(() => editor.chain().focus().toggleBold().run())}
+		>
+			<BoldIcon class="vela:size-4" />
+		</Button>
+		<Button
+			size="icon"
+			variant="ghost"
+			aria-label="Italic"
+			data-active={active.italic}
+			onmousedown={run(() => editor.chain().focus().toggleItalic().run())}
+		>
+			<ItalicIcon class="vela:size-4" />
+		</Button>
+		<Button
+			size="icon"
+			variant="ghost"
+			aria-label="Inline code"
+			data-active={active.code}
+			onmousedown={run(() => editor.chain().focus().toggleCode().run())}
+		>
+			<CodeIcon class="vela:size-4" />
+		</Button>
+
+		<span class="cms-rt-divider" aria-hidden="true"></span>
+
+		<Button
+			size="icon"
+			variant="ghost"
+			aria-label="Heading 2"
+			data-active={active.h2}
+			onmousedown={run(() => editor.chain().focus().toggleHeading({ level: 2 }).run())}
+		>
+			<H2Icon class="vela:size-4" />
+		</Button>
+		<Button
+			size="icon"
+			variant="ghost"
+			aria-label="Heading 3"
+			data-active={active.h3}
+			onmousedown={run(() => editor.chain().focus().toggleHeading({ level: 3 }).run())}
+		>
+			<H3Icon class="vela:size-4" />
+		</Button>
+		<Button
+			size="icon"
+			variant="ghost"
+			aria-label="Bullet list"
+			data-active={active.bullet}
+			onmousedown={run(() => editor.chain().focus().toggleBulletList().run())}
+		>
+			<ListIcon class="vela:size-4" />
+		</Button>
+		<Button
+			size="icon"
+			variant="ghost"
+			aria-label="Ordered list"
+			data-active={active.ordered}
+			onmousedown={run(() => editor.chain().focus().toggleOrderedList().run())}
+		>
+			<ListOrderedIcon class="vela:size-4" />
+		</Button>
+		<Button
+			size="icon"
+			variant="ghost"
+			aria-label="Blockquote"
+			data-active={active.quote}
+			onmousedown={run(() => editor.chain().focus().toggleBlockquote().run())}
+		>
+			<QuoteIcon class="vela:size-4" />
+		</Button>
+
+		<span class="cms-rt-divider" aria-hidden="true"></span>
+
+		<Button
+			size="icon"
+			variant="ghost"
+			aria-label="Link"
+			data-active={active.link}
+			onmousedown={openLink}
+		>
+			<LinkIcon class="vela:size-4" />
+		</Button>
+
+		<span class="cms-rt-divider" aria-hidden="true"></span>
+
+		<Button
+			size="icon"
+			variant="ghost"
+			aria-label="Undo"
+			onmousedown={run(() => editor.chain().focus().undo().run())}
+		>
+			<UndoIcon class="vela:size-4" />
+		</Button>
+	{:else}
+		<Input
+			bind:ref={linkInputEl}
+			bind:value={linkUrl}
+			type="url"
+			placeholder="https://example.com"
+			onkeydown={onLinkKey}
+			class="vela:h-7 vela:w-64 vela:text-xs"
+		/>
+		<Button size="icon" variant="ghost" aria-label="Apply link" onmousedown={run(applyLink)}>
+			<CheckIcon class="vela:size-4" />
+		</Button>
+		{#if active.link}
+			<Button size="icon" variant="ghost" aria-label="Remove link" onmousedown={removeLink}>
+				<UnlinkIcon class="vela:size-4" />
+			</Button>
+		{/if}
+		<Button size="icon" variant="ghost" aria-label="Cancel" onmousedown={run(cancelLink)}>
+			<XIcon class="vela:size-4" />
+		</Button>
+	{/if}
+</div>
+
+<style>
+	.cms-rt-toolbar {
+		position: absolute;
+		left: 0;
+		top: 0;
+		transform: translateY(calc(-100% - 0.5rem));
+		display: inline-flex;
+		align-items: center;
+		gap: 0.125rem;
+		padding: 0.25rem;
+		background: var(--cms-bar-bg, #1f1f1f);
+		border: 1px solid var(--cms-bar-divider, #3a3a3a);
+		border-radius: 0.375rem;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+		color: var(--cms-bar-text, #f5f5f5);
+		z-index: 50;
+		white-space: nowrap;
+	}
+	.cms-rt-divider {
+		display: inline-block;
+		width: 1px;
+		align-self: stretch;
+		margin: 0.125rem 0.25rem;
+		background: var(--cms-bar-divider, #3a3a3a);
+	}
+	.cms-rt-toolbar :global([data-active='true']) {
+		background: var(--cms-bar-bg-hover, #2e2e2e);
+		color: var(--cms-bar-text, #f5f5f5);
+	}
+</style>

package/dist/components/cms/cms-rich-text-toolbar.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Editor } from '@tiptap/core';
+type Props = {
+    editor: Editor;
+    /** Bumped on every editor transaction so derived state re-runs. */
+    tick: number;
+};
+declare const CmsRichTextToolbar: import("svelte").Component<Props, {}, "">;
+type CmsRichTextToolbar = ReturnType<typeof CmsRichTextToolbar>;
+export default CmsRichTextToolbar;

package/dist/components/cms/cms-rich-text.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { getCmsScope } from './scope.js';
+	import { cmsStore, type CmsScopeRef } from './cms-store.svelte.js';
+
+	type Props = {
+		name: string;
+		fallback?: string;
+		value?: unknown;
+		children?: Snippet;
+	};
+
+	let { name, fallback, value, children }: Props = $props();
+
+	const scope = getCmsScope();
+	const ref = $derived<CmsScopeRef | null>(
+		scope ? { scopeId: scope.scopeId, routeId: scope.routeId, params: scope.params } : null
+	);
+
+	const resolved = $derived.by(() => {
+		if (value !== undefined) return value;
+		return ref ? cmsStore.getValue(ref, name) : undefined;
+	});
+
+	const html = $derived(typeof resolved === 'string' ? resolved : (fallback ?? ''));
+	const editable = $derived(cmsStore.isEditing && value === undefined && !!ref);
+
+	let childrenEl = $state<HTMLDivElement>();
+	let initialFromChildren = $state<string | undefined>(undefined);
+
+	$effect.pre(() => {
+		if (editable && childrenEl && initialFromChildren === undefined) {
+			const inner = childrenEl.innerHTML.trim();
+			initialFromChildren = inner || undefined;
+		}
+	});
+
+	const editInitial = $derived.by(() => {
+		if (typeof resolved === 'string') return resolved;
+		if (fallback !== undefined) return fallback;
+		return initialFromChildren ?? '';
+	});
+</script>
+
+{#if editable && ref}
+	{#await import('./cms-rich-text-editable.svelte') then { default: Editable }}
+		<Editable scope={ref} {name} initial={editInitial} />
+	{/await}
+{:else if html}
+	<div class="cms-rich-text">{@html html}</div>
+{:else if children}
+	<div bind:this={childrenEl} class="cms-rich-text-children">{@render children()}</div>
+{:else}
+	<div class="cms-missing" data-cms-name={name} data-cms-scope={scope?.scopeId ?? '?'}>
+		{name}
+	</div>
+{/if}
+
+<style>
+	.cms-rich-text {
+		display: contents;
+	}
+	.cms-rich-text-children {
+		display: contents;
+	}
+	.cms-missing {
+		padding: 0.25rem 0.5rem;
+		border: 1px dashed rgba(127, 127, 127, 0.6);
+		border-radius: 0.25rem;
+		font-family: ui-monospace, monospace;
+		font-size: 0.85em;
+		color: rgba(127, 127, 127, 0.9);
+	}
+</style>

package/dist/components/cms/cms-rich-text.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    name: string;
+    fallback?: string;
+    value?: unknown;
+    children?: Snippet;
+};
+declare const CmsRichText: import("svelte").Component<Props, {}, "">;
+type CmsRichText = ReturnType<typeof CmsRichText>;
+export default CmsRichText;