includio-cms 0.1.3 → 0.5.0

package/dist/admin/components/tiptap/SlashCommandPopup.svelte

@@ -0,0 +1,212 @@
+<script lang="ts">
+	import type { SlashCommandItem } from './slash-command.js';
+	import { onMount } from 'svelte';
+
+	type Props = {
+		items: SlashCommandItem[];
+		command: (item: SlashCommandItem) => void;
+	};
+
+	let { items, command }: Props = $props();
+
+	let selectedIndex = $state(0);
+	let listEl = $state<HTMLDivElement | null>(null);
+	let showTier2 = $state(false);
+
+	// When user is searching (items filtered), show all tiers
+	const isFiltered = $derived(items.length > 0 && items.some((i) => i.tier === 2) && items.some((i) => i.tier === 1)
+		? false
+		: true
+	);
+
+	const visibleItems = $derived.by(() => {
+		if (isFiltered || showTier2) return items;
+		return items.filter((i) => !i.tier || i.tier === 1);
+	});
+
+	const hasTier2Hidden = $derived(!isFiltered && !showTier2 && items.some((i) => i.tier === 2));
+
+	// Group items by group name
+	const grouped = $derived(() => {
+		const groups = new Map<string, SlashCommandItem[]>();
+		for (const item of visibleItems) {
+			const existing = groups.get(item.group) ?? [];
+			existing.push(item);
+			groups.set(item.group, existing);
+		}
+		return groups;
+	});
+
+	function selectItem(index: number) {
+		const item = visibleItems[index];
+		if (item) command(item);
+	}
+
+	function handleKeydown(e: CustomEvent<{ key: string }>) {
+		const { key } = e.detail;
+		if (key === 'ArrowDown') {
+			e.preventDefault();
+			selectedIndex = (selectedIndex + 1) % visibleItems.length;
+			scrollToSelected();
+		} else if (key === 'ArrowUp') {
+			e.preventDefault();
+			selectedIndex = (selectedIndex - 1 + visibleItems.length) % visibleItems.length;
+			scrollToSelected();
+		} else if (key === 'Enter') {
+			e.preventDefault();
+			selectItem(selectedIndex);
+		}
+	}
+
+	function scrollToSelected() {
+		const el = listEl?.querySelector(`[data-index="${selectedIndex}"]`);
+		el?.scrollIntoView({ block: 'nearest' });
+	}
+
+	onMount(() => {
+		const el = listEl;
+		if (!el) return;
+
+		const handler = (e: Event) => handleKeydown(e as CustomEvent<{ key: string }>);
+		el.addEventListener('slash-keydown', handler);
+		return () => el.removeEventListener('slash-keydown', handler);
+	});
+
+	// Reset selection when items change
+	$effect(() => {
+		items; // dependency
+		selectedIndex = 0;
+	});
+</script>
+
+<div class="slash-popup" bind:this={listEl} data-slash-popup role="listbox" aria-label="Polecenia">
+	{#if items.length === 0}
+		<div class="slash-empty">Brak wyników</div>
+	{:else}
+		{@const groups = grouped()}
+		{#each [...groups.entries()] as [group, groupItems]}
+			<div class="slash-group-label" role="presentation">{group}</div>
+			{#each groupItems as item}
+				{@const idx = visibleItems.indexOf(item)}
+				<button
+					type="button"
+					class="slash-item"
+					class:selected={idx === selectedIndex}
+					data-index={idx}
+					role="option"
+					aria-selected={idx === selectedIndex}
+					onclick={() => selectItem(idx)}
+					onmouseenter={() => (selectedIndex = idx)}
+				>
+					<div class="slash-item-content">
+						<span class="slash-item-label">{item.label}</span>
+						{#if item.description}
+							<span class="slash-item-desc">{item.description}</span>
+						{/if}
+					</div>
+				</button>
+			{/each}
+		{/each}
+
+		{#if hasTier2Hidden}
+			<button
+				type="button"
+				class="slash-more-btn"
+				onclick={() => (showTier2 = true)}
+			>
+				Więcej...
+			</button>
+		{/if}
+	{/if}
+</div>
+
+<style>
+	.slash-popup {
+		background: var(--popover);
+		color: var(--popover-foreground);
+		border: 1px solid var(--border);
+		border-radius: 8px;
+		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+		overflow-y: auto;
+		max-height: 320px;
+		min-width: 220px;
+		padding: 0.25rem;
+	}
+
+	.slash-group-label {
+		padding: 0.375rem 0.5rem 0.25rem;
+		font-size: 0.6875rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: var(--muted-foreground);
+	}
+
+	.slash-item {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		padding: 0.375rem 0.5rem;
+		border: none;
+		background: transparent;
+		border-radius: 6px;
+		cursor: pointer;
+		font-size: 0.8125rem;
+		color: var(--foreground);
+		text-align: left;
+		min-height: 36px;
+		transition: background-color 0.1s;
+	}
+
+	.slash-item:hover,
+	.slash-item.selected {
+		background: var(--accent);
+	}
+
+	.slash-item:focus-visible {
+		outline: 2px solid var(--ring);
+		outline-offset: -2px;
+	}
+
+	.slash-item-content {
+		display: flex;
+		flex-direction: column;
+		gap: 1px;
+	}
+
+	.slash-item-label {
+		font-weight: 500;
+	}
+
+	.slash-item-desc {
+		font-size: 0.6875rem;
+		color: var(--muted-foreground);
+		line-height: 1.3;
+	}
+
+	.slash-more-btn {
+		display: block;
+		width: 100%;
+		padding: 0.375rem 0.5rem;
+		border: none;
+		background: transparent;
+		border-radius: 6px;
+		cursor: pointer;
+		font-size: 0.75rem;
+		font-weight: 500;
+		color: var(--primary);
+		text-align: left;
+		transition: background-color 0.1s;
+	}
+
+	.slash-more-btn:hover {
+		background: var(--accent);
+	}
+
+	.slash-empty {
+		padding: 1rem;
+		text-align: center;
+		color: var(--muted-foreground);
+		font-size: 0.8125rem;
+	}
+</style>

package/dist/admin/components/tiptap/SlashCommandPopup.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { SlashCommandItem } from './slash-command.js';
+type Props = {
+    items: SlashCommandItem[];
+    command: (item: SlashCommandItem) => void;
+};
+declare const SlashCommandPopup: import("svelte").Component<Props, {}, "">;
+type SlashCommandPopup = ReturnType<typeof SlashCommandPopup>;
+export default SlashCommandPopup;

package/dist/admin/components/tiptap/content-editor.svelte

@@ -0,0 +1,280 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { Editor, type Editor as EditorType } from '@tiptap/core';
+	import BubbleMenu from '@tiptap/extension-bubble-menu';
+	import { extensions } from './extensions.js';
+	import ToolbarButton from './toolbar-button.svelte';
+	import EditorToolbar from './editor-toolbar.svelte';
+	import LinkDialog from './link-dialog.svelte';
+	import ImageDialog from './image-dialog.svelte';
+	import VideoDialog from './video-dialog.svelte';
+	import TableDialog from './table-dialog.svelte';
+	import * as Tooltip from '../../../components/ui/tooltip/index.js';
+	import Separator from '../../../components/ui/separator/separator.svelte';
+	import type { StructuredContentDoc } from '../../../types/structured-content.js';
+	import type { ObjectField } from '../../../types/fields.js';
+	import { tiptapDocToStructured, structuredToTiptapDoc } from './structured-content-utils.js';
+	import { InlineBlockNode } from './inline-block-node.js';
+	import { SlashCommand } from './slash-command.js';
+	import { HeadingA11yPlugin } from './heading-a11y-plugin.js';
+
+	// Icons (bubble menu only)
+	import Bold from '@tabler/icons-svelte/icons/bold';
+	import Italic from '@tabler/icons-svelte/icons/italic';
+	import Underline from '@tabler/icons-svelte/icons/underline';
+	import Strikethrough from '@tabler/icons-svelte/icons/strikethrough';
+	import Highlight from '@tabler/icons-svelte/icons/highlight';
+	import LinkIcon from '@tabler/icons-svelte/icons/link';
+	import RowInsertBottom from '@tabler/icons-svelte/icons/row-insert-bottom';
+	import RowInsertTop from '@tabler/icons-svelte/icons/row-insert-top';
+	import ColumnInsertLeft from '@tabler/icons-svelte/icons/column-insert-left';
+	import ColumnInsertRight from '@tabler/icons-svelte/icons/column-insert-right';
+	import RowRemove from '@tabler/icons-svelte/icons/row-remove';
+	import ColumnRemove from '@tabler/icons-svelte/icons/column-remove';
+	import TableOff from '@tabler/icons-svelte/icons/table-off';
+	import Unlink from '@tabler/icons-svelte/icons/unlink';
+	import Pencil from '@tabler/icons-svelte/icons/pencil';
+	import ExternalLink from '@tabler/icons-svelte/icons/external-link';
+
+	type Props = {
+		value?: StructuredContentDoc;
+		inlineBlocks?: ObjectField[];
+	};
+
+	let { value = $bindable(undefined), inlineBlocks = [] }: Props = $props();
+
+	const hasInlineBlocks = $derived(inlineBlocks.length > 0);
+
+	let element = $state<HTMLDivElement | null>(null);
+	let editorState = $state<{ editor: EditorType | null }>({ editor: null });
+	let bubbleMenu = $state<HTMLDivElement | null>(null);
+
+	// Dialog states
+	let linkDialogOpen = $state(false);
+	let imageDialogOpen = $state(false);
+	let videoDialogOpen = $state(false);
+	let tableDialogOpen = $state(false);
+
+	// Track last structured JSON to avoid circular updates.
+	// Always compare in structured format (blockData as object) to stay consistent.
+	let lastStructuredJson = $state('');
+
+	onMount(() => {
+		const initialContent = value ? structuredToTiptapDoc(value) : '';
+
+		const extraExtensions = hasInlineBlocks
+			? [
+					InlineBlockNode.configure({ inlineBlocks }),
+					SlashCommand.configure({ inlineBlocks })
+				]
+			: [];
+
+		const editor = new Editor({
+			element: element!,
+			extensions: [
+				...extensions,
+				...extraExtensions,
+				HeadingA11yPlugin,
+				BubbleMenu.configure({
+					element: bubbleMenu!
+				})
+			],
+			content: initialContent,
+			onTransaction: ({ editor }) => {
+				const json = editor.getJSON();
+				try {
+					const structured = tiptapDocToStructured(json);
+					const structuredStr = JSON.stringify(structured);
+					if (structuredStr !== lastStructuredJson) {
+						lastStructuredJson = structuredStr;
+						value = structured;
+					}
+				} catch {
+					// Invalid doc shape during editing — skip update
+				}
+				editorState = { editor };
+			}
+		});
+
+		editorState = { editor };
+
+		return () => {
+			editor.destroy();
+		};
+	});
+
+	// Sync incoming value changes (e.g. from form reset)
+	$effect(() => {
+		if (!editorState.editor || !value) return;
+		const incomingJson = JSON.stringify(value);
+		if (incomingJson !== lastStructuredJson) {
+			lastStructuredJson = incomingJson;
+			editorState.editor.commands.setContent(structuredToTiptapDoc(value));
+		}
+	});
+
+	const ed = $derived(editorState.editor);
+</script>
+
+<Tooltip.Provider>
+	<div class="border-input bg-background rounded-lg border">
+		<!-- Toolbar — no code view for content editor -->
+		{#if ed}
+			<EditorToolbar
+				editor={ed}
+				onLinkDialog={() => (linkDialogOpen = true)}
+				onImageDialog={() => (imageDialogOpen = true)}
+				onVideoDialog={() => (videoDialogOpen = true)}
+				onTableDialog={() => (tableDialogOpen = true)}
+				showCodeView={false}
+				showInsertBlock={hasInlineBlocks}
+				onInsertBlock={() => {
+					// Insert "/" at cursor to trigger slash command
+					ed?.chain().focus().insertContent('/').run();
+				}}
+			/>
+		{/if}
+
+		<!-- Bubble Menu -->
+		<div bind:this={bubbleMenu} class="bubble-menu">
+			{#if ed}
+				<div class="bg-popover text-popover-foreground flex items-center gap-0.5 rounded-lg border p-1 shadow-md">
+					{#if ed.isActive('link')}
+						{#if ed.getAttributes('link').target === '_blank'}
+							<span class="text-muted-foreground flex items-center px-1" title="Otwiera w nowej karcie">
+								<ExternalLink class="h-4 w-4" />
+							</span>
+						{/if}
+						<ToolbarButton label="Edytuj link" active={false} onclick={() => (linkDialogOpen = true)}>
+							<Pencil class="h-4 w-4" />
+						</ToolbarButton>
+						<ToolbarButton
+							label="Usuń link"
+							active={false}
+							onclick={() => ed.chain().focus().unsetLink().run()}
+						>
+							<Unlink class="h-4 w-4" />
+						</ToolbarButton>
+					{:else if ed.isActive('table')}
+						<ToolbarButton
+							label="Wiersz powyżej"
+							active={false}
+							onclick={() => ed.chain().focus().addRowBefore().run()}
+						>
+							<RowInsertTop class="h-4 w-4" />
+						</ToolbarButton>
+						<ToolbarButton
+							label="Wiersz poniżej"
+							active={false}
+							onclick={() => ed.chain().focus().addRowAfter().run()}
+						>
+							<RowInsertBottom class="h-4 w-4" />
+						</ToolbarButton>
+						<ToolbarButton
+							label="Kolumna z lewej"
+							active={false}
+							onclick={() => ed.chain().focus().addColumnBefore().run()}
+						>
+							<ColumnInsertLeft class="h-4 w-4" />
+						</ToolbarButton>
+						<ToolbarButton
+							label="Kolumna z prawej"
+							active={false}
+							onclick={() => ed.chain().focus().addColumnAfter().run()}
+						>
+							<ColumnInsertRight class="h-4 w-4" />
+						</ToolbarButton>
+						<Separator orientation="vertical" class="mx-1 h-6" />
+						<ToolbarButton
+							label="Usuń wiersz"
+							active={false}
+							onclick={() => ed.chain().focus().deleteRow().run()}
+						>
+							<RowRemove class="h-4 w-4" />
+						</ToolbarButton>
+						<ToolbarButton
+							label="Usuń kolumnę"
+							active={false}
+							onclick={() => ed.chain().focus().deleteColumn().run()}
+						>
+							<ColumnRemove class="h-4 w-4" />
+						</ToolbarButton>
+						<ToolbarButton
+							label="Usuń tabelę"
+							active={false}
+							onclick={() => ed.chain().focus().deleteTable().run()}
+						>
+							<TableOff class="h-4 w-4" />
+						</ToolbarButton>
+					{:else}
+						<ToolbarButton
+							label="Pogrubienie"
+							active={ed.isActive('bold')}
+							onclick={() => ed.chain().focus().toggleBold().run()}
+						>
+							<Bold class="h-4 w-4" />
+						</ToolbarButton>
+						<ToolbarButton
+							label="Kursywa"
+							active={ed.isActive('italic')}
+							onclick={() => ed.chain().focus().toggleItalic().run()}
+						>
+							<Italic class="h-4 w-4" />
+						</ToolbarButton>
+						<ToolbarButton
+							label="Podkreślenie"
+							active={ed.isActive('underline')}
+							onclick={() => ed.chain().focus().toggleUnderline().run()}
+						>
+							<Underline class="h-4 w-4" />
+						</ToolbarButton>
+						<ToolbarButton
+							label="Przekreślenie"
+							active={ed.isActive('strike')}
+							onclick={() => ed.chain().focus().toggleStrike().run()}
+						>
+							<Strikethrough class="h-4 w-4" />
+						</ToolbarButton>
+						<ToolbarButton
+							label="Wyróżnienie"
+							active={ed.isActive('highlight')}
+							onclick={() => ed.chain().focus().toggleHighlight().run()}
+						>
+							<Highlight class="h-4 w-4" />
+						</ToolbarButton>
+						<Separator orientation="vertical" class="mx-1 h-6" />
+						<ToolbarButton
+							label="Link"
+							active={ed.isActive('link')}
+							onclick={() => (linkDialogOpen = true)}
+						>
+							<LinkIcon class="h-4 w-4" />
+						</ToolbarButton>
+					{/if}
+				</div>
+			{/if}
+		</div>
+
+		<!-- Editor content -->
+		<div
+			bind:this={element}
+			class="prose prose-sm dark:prose-invert max-w-none p-4 focus:outline-none [&_.ProseMirror]:min-h-[200px] [&_.ProseMirror]:outline-none [&_.ProseMirror]:scroll-padding-top-12"
+		></div>
+	</div>
+</Tooltip.Provider>
+
+<!-- Dialogs -->
+<LinkDialog bind:open={linkDialogOpen} editor={ed} />
+<ImageDialog bind:open={imageDialogOpen} editor={ed} />
+<VideoDialog bind:open={videoDialogOpen} editor={ed} />
+<TableDialog bind:open={tableDialogOpen} editor={ed} />
+
+<style>
+	.bubble-menu {
+		visibility: hidden;
+		opacity: 0;
+		transition:
+			visibility 0.1s ease,
+			opacity 0.1s ease;
+	}
+</style>

package/dist/admin/components/tiptap/content-editor.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { StructuredContentDoc } from '../../../types/structured-content.js';
+import type { ObjectField } from '../../../types/fields.js';
+type Props = {
+    value?: StructuredContentDoc;
+    inlineBlocks?: ObjectField[];
+};
+declare const ContentEditor: import("svelte").Component<Props, {}, "value">;
+type ContentEditor = ReturnType<typeof ContentEditor>;
+export default ContentEditor;