includio-cms 0.1.3 → 0.5.0

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

@@ -0,0 +1,230 @@
+<script lang="ts">
+	import type { Editor as EditorType } from '@tiptap/core';
+	import ToolbarButton from './toolbar-button.svelte';
+	import * as Tooltip from '../../../components/ui/tooltip/index.js';
+	import Separator from '../../../components/ui/separator/separator.svelte';
+
+	// Icons
+	import H_2 from '@tabler/icons-svelte/icons/h-2';
+	import H_3 from '@tabler/icons-svelte/icons/h-3';
+	import LetterP from '@tabler/icons-svelte/icons/letter-p';
+	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 AlignLeft from '@tabler/icons-svelte/icons/align-left';
+	import AlignCenter from '@tabler/icons-svelte/icons/align-center';
+	import AlignRight from '@tabler/icons-svelte/icons/align-right';
+	import AlignJustified from '@tabler/icons-svelte/icons/align-justified';
+	import List from '@tabler/icons-svelte/icons/list';
+	import ListNumbers from '@tabler/icons-svelte/icons/list-numbers';
+	import Quote from '@tabler/icons-svelte/icons/quote';
+	import LinkIcon from '@tabler/icons-svelte/icons/link';
+	import Photo from '@tabler/icons-svelte/icons/photo';
+	import VideoIcon from '@tabler/icons-svelte/icons/video';
+	import Table from '@tabler/icons-svelte/icons/table';
+	import Code from '@tabler/icons-svelte/icons/code';
+	import FileCode from '@tabler/icons-svelte/icons/file-code';
+	import SourceCode from '@tabler/icons-svelte/icons/source-code';
+	import Plus from '@tabler/icons-svelte/icons/plus';
+
+	type Props = {
+		editor: EditorType;
+		onLinkDialog: () => void;
+		onImageDialog: () => void;
+		onVideoDialog: () => void;
+		onTableDialog: () => void;
+		showCodeView?: boolean;
+		isCodeViewActive?: boolean;
+		onToggleCodeView?: () => void;
+		showInsertBlock?: boolean;
+		onInsertBlock?: () => void;
+	};
+
+	let {
+		editor: ed,
+		onLinkDialog,
+		onImageDialog,
+		onVideoDialog,
+		onTableDialog,
+		showCodeView = true,
+		isCodeViewActive = false,
+		onToggleCodeView,
+		showInsertBlock = false,
+		onInsertBlock
+	}: Props = $props();
+</script>
+
+<Tooltip.Provider>
+	<div class="flex flex-wrap items-center gap-0.5 border-b p-1 sticky top-0 z-10 bg-background">
+		<!-- Headings -->
+		<ToolbarButton
+			label="Nagłówek 2"
+			active={ed.isActive('heading', { level: 2 })}
+			onclick={() => ed.chain().focus().toggleHeading({ level: 2 }).run()}
+		>
+			<H_2 class="h-4 w-4" />
+		</ToolbarButton>
+		<ToolbarButton
+			label="Nagłówek 3"
+			active={ed.isActive('heading', { level: 3 })}
+			onclick={() => ed.chain().focus().toggleHeading({ level: 3 }).run()}
+		>
+			<H_3 class="h-4 w-4" />
+		</ToolbarButton>
+		<ToolbarButton
+			label="Paragraf"
+			active={ed.isActive('paragraph') && !ed.isActive('heading')}
+			onclick={() => ed.chain().focus().setParagraph().run()}
+		>
+			<LetterP class="h-4 w-4" />
+		</ToolbarButton>
+
+		<Separator orientation="vertical" class="mx-1 h-6" />
+
+		<!-- Text formatting -->
+		<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" />
+
+		<!-- Alignment -->
+		<ToolbarButton
+			label="Do lewej"
+			active={ed.isActive({ textAlign: 'left' })}
+			onclick={() => ed.chain().focus().setTextAlign('left').run()}
+		>
+			<AlignLeft class="h-4 w-4" />
+		</ToolbarButton>
+		<ToolbarButton
+			label="Wyśrodkuj"
+			active={ed.isActive({ textAlign: 'center' })}
+			onclick={() => ed.chain().focus().setTextAlign('center').run()}
+		>
+			<AlignCenter class="h-4 w-4" />
+		</ToolbarButton>
+		<ToolbarButton
+			label="Do prawej"
+			active={ed.isActive({ textAlign: 'right' })}
+			onclick={() => ed.chain().focus().setTextAlign('right').run()}
+		>
+			<AlignRight class="h-4 w-4" />
+		</ToolbarButton>
+		<ToolbarButton
+			label="Wyjustuj"
+			active={ed.isActive({ textAlign: 'justify' })}
+			onclick={() => ed.chain().focus().setTextAlign('justify').run()}
+		>
+			<AlignJustified class="h-4 w-4" />
+		</ToolbarButton>
+
+		<Separator orientation="vertical" class="mx-1 h-6" />
+
+		<!-- Lists & Quote -->
+		<ToolbarButton
+			label="Lista punktowa"
+			active={ed.isActive('bulletList')}
+			onclick={() => ed.chain().focus().toggleBulletList().run()}
+		>
+			<List class="h-4 w-4" />
+		</ToolbarButton>
+		<ToolbarButton
+			label="Lista numerowana"
+			active={ed.isActive('orderedList')}
+			onclick={() => ed.chain().focus().toggleOrderedList().run()}
+		>
+			<ListNumbers class="h-4 w-4" />
+		</ToolbarButton>
+		<ToolbarButton
+			label="Cytat"
+			active={ed.isActive('blockquote')}
+			onclick={() => ed.chain().focus().toggleBlockquote().run()}
+		>
+			<Quote class="h-4 w-4" />
+		</ToolbarButton>
+
+		<Separator orientation="vertical" class="mx-1 h-6" />
+
+		<!-- Link, Image, Table -->
+		<ToolbarButton label="Link" active={ed.isActive('link')} onclick={onLinkDialog}>
+			<LinkIcon class="h-4 w-4" />
+		</ToolbarButton>
+		<ToolbarButton label="Obrazek" active={false} onclick={onImageDialog}>
+			<Photo class="h-4 w-4" />
+		</ToolbarButton>
+		<ToolbarButton label="Wideo" active={false} onclick={onVideoDialog}>
+			<VideoIcon class="h-4 w-4" />
+		</ToolbarButton>
+		<ToolbarButton label="Tabela" active={false} onclick={onTableDialog}>
+			<Table class="h-4 w-4" />
+		</ToolbarButton>
+
+		<Separator orientation="vertical" class="mx-1 h-6" />
+
+		<!-- Code -->
+		<ToolbarButton
+			label="Kod inline"
+			active={ed.isActive('code')}
+			onclick={() => ed.chain().focus().toggleCode().run()}
+		>
+			<Code class="h-4 w-4" />
+		</ToolbarButton>
+		<ToolbarButton
+			label="Blok kodu"
+			active={ed.isActive('codeBlock')}
+			onclick={() => ed.chain().focus().toggleCodeBlock().run()}
+		>
+			<FileCode class="h-4 w-4" />
+		</ToolbarButton>
+
+		{#if showInsertBlock && onInsertBlock}
+			<Separator orientation="vertical" class="mx-1 h-6" />
+			<ToolbarButton label="Wstaw blok" active={false} onclick={onInsertBlock}>
+				<Plus class="h-4 w-4" />
+			</ToolbarButton>
+		{/if}
+
+		{#if showCodeView && onToggleCodeView}
+			<Separator orientation="vertical" class="mx-1 h-6" />
+
+			<!-- HTML View -->
+			<ToolbarButton label="Widok HTML" active={isCodeViewActive} onclick={onToggleCodeView}>
+				<SourceCode class="h-4 w-4" />
+			</ToolbarButton>
+		{/if}
+	</div>
+</Tooltip.Provider>

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

@@ -0,0 +1,16 @@
+import type { Editor as EditorType } from '@tiptap/core';
+type Props = {
+    editor: EditorType;
+    onLinkDialog: () => void;
+    onImageDialog: () => void;
+    onVideoDialog: () => void;
+    onTableDialog: () => void;
+    showCodeView?: boolean;
+    isCodeViewActive?: boolean;
+    onToggleCodeView?: () => void;
+    showInsertBlock?: boolean;
+    onInsertBlock?: () => void;
+};
+declare const EditorToolbar: import("svelte").Component<Props, {}, "">;
+type EditorToolbar = ReturnType<typeof EditorToolbar>;
+export default EditorToolbar;

package/dist/admin/components/tiptap/heading-a11y-plugin.d.ts

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

package/dist/admin/components/tiptap/heading-a11y-plugin.js

@@ -0,0 +1,67 @@
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { Decoration, DecorationSet } from '@tiptap/pm/view';
+const pluginKey = new PluginKey('headingA11y');
+function findHeadingIssues(doc) {
+    const issues = [];
+    let seenH2 = false;
+    doc.forEach((node, offset) => {
+        if (node.type.name === 'heading') {
+            const level = node.attrs.level;
+            if (level === 2) {
+                seenH2 = true;
+            }
+            else if (level === 3 && !seenH2) {
+                issues.push({ pos: offset + node.nodeSize, message: 'Dodaj H2 przed tą podsekcją' });
+            }
+            else if (level > 3 && !seenH2) {
+                issues.push({ pos: offset + node.nodeSize, message: 'Pierwszy nagłówek powinien być H2' });
+            }
+        }
+    });
+    return issues;
+}
+function createWarningWidget(message) {
+    const el = document.createElement('div');
+    el.className = 'heading-a11y-warning';
+    el.setAttribute('role', 'status');
+    el.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 9v4"/><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z"/><path d="M12 16h.01"/></svg><span>${message}</span>`;
+    return el;
+}
+function buildDecorations(doc) {
+    const issues = findHeadingIssues(doc);
+    if (issues.length === 0)
+        return DecorationSet.empty;
+    const decorations = issues.map((issue) => Decoration.widget(issue.pos, () => createWarningWidget(issue.message), {
+        side: -1,
+        key: `heading-a11y-${issue.pos}`
+    }));
+    return DecorationSet.create(doc, decorations);
+}
+export const HeadingA11yPlugin = Extension.create({
+    name: 'headingA11y',
+    addProseMirrorPlugins() {
+        return [
+            new Plugin({
+                key: pluginKey,
+                state: {
+                    init(_, state) {
+                        return buildDecorations(state.doc);
+                    },
+                    apply(tr, oldDecos, _oldState, newState) {
+                        // Always rebuild on doc change — mapping empty sets stays empty
+                        if (tr.docChanged) {
+                            return buildDecorations(newState.doc);
+                        }
+                        return oldDecos;
+                    }
+                },
+                props: {
+                    decorations(state) {
+                        return pluginKey.getState(state);
+                    }
+                }
+            })
+        ];
+    }
+});

package/dist/admin/components/tiptap/image-dialog.svelte

@@ -3,6 +3,7 @@
 	import MediaSelector from '../media/media-selector.svelte';
 	import { getRemotes } from '../../context/remotes.js';
 	import type { Editor } from '@tiptap/core';
+	import AlertTriangle from '@tabler/icons-svelte/icons/alert-triangle';
 
 	type Props = {
 		open: boolean;
@@ -15,6 +16,12 @@
 	const remotes = getRemotes();
 	let selected = $state<string>('');
 
+	// Alt dialog state (separate from media selector dialog)
+	let altOpen = $state(false);
+	let altText = $state('');
+	let fileUrl = $state('');
+	let fileId = $state('');
+
 	$effect(() => {
 		if (!open) {
 			selected = '';
@@ -27,25 +34,47 @@
 		try {
 			const file = await remotes.getFileById(selected);
 			if (file?.url) {
-				editor
-					.chain()
-					.focus()
-					.setFigure({
-						src: file.url,
-						alt: file.alt || '',
-						'data-media-id': file.id
-					})
-					.run();
+				fileUrl = file.url;
+				fileId = file.id;
+				altText = file.alt || '';
+				// Close media selector, open alt dialog
+				open = false;
+				onOpenChange?.(false);
+				altOpen = true;
 			}
 		} catch (e) {
 			console.error('Failed to get media file:', e);
 		}
+	}
+
+	function insertImage(alt: string) {
+		if (!editor || !fileUrl) return;
+		editor
+			.chain()
+			.focus()
+			.setFigure({
+				src: fileUrl,
+				alt,
+				'data-media-id': fileId
+			})
+			.run();
+		altOpen = false;
+	}
+
+	function handleAltKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			insertImage(altText.trim());
+		}
+	}
 
-		open = false;
-		onOpenChange?.(false);
+	function handleAltCancel() {
+		// Insert without alt
+		insertImage('');
 	}
 </script>
 
+<!-- Dialog 1: Media selector -->
 <Dialog.Root bind:open {onOpenChange}>
 	<Dialog.Content class="max-w-5xl! sm:max-w-5xl!">
 		<Dialog.Header>
@@ -54,3 +83,135 @@
 		<MediaSelector bind:selected accept="image/*" onConfirm={handleConfirm} />
 	</Dialog.Content>
 </Dialog.Root>
+
+<!-- Dialog 2: Alt text prompt -->
+<Dialog.Root bind:open={altOpen}>
+	<Dialog.Content class="max-w-lg! sm:max-w-lg!">
+		<Dialog.Header>
+			<Dialog.Title>Opis zdjęcia</Dialog.Title>
+		</Dialog.Header>
+		<div class="image-alt-prompt">
+			{#if !altText.trim()}
+				<div class="image-alt-banner">
+					<AlertTriangle class="size-4 shrink-0" />
+					<span>Dodaj opis zdjęcia, żeby każdy mógł je zrozumieć</span>
+				</div>
+			{/if}
+			<div class="image-alt-preview">
+				<img src={fileUrl} alt="" class="image-alt-thumb" />
+			</div>
+			<label class="image-alt-label" for="image-alt-input">Opis alternatywny (alt text)</label>
+			<input
+				id="image-alt-input"
+				type="text"
+				class="image-alt-input"
+				bind:value={altText}
+				onkeydown={handleAltKeydown}
+				placeholder="Np. Zdjęcie zespołu na konferencji..."
+			/>
+			<div class="image-alt-actions">
+				<button
+					type="button"
+					class="image-alt-btn-primary"
+					onclick={() => insertImage(altText.trim())}
+				>
+					Dodaj i wstaw
+				</button>
+				<button
+					type="button"
+					class="image-alt-btn-ghost"
+					onclick={handleAltCancel}
+				>
+					Pomiń
+				</button>
+			</div>
+		</div>
+	</Dialog.Content>
+</Dialog.Root>
+
+<style>
+	.image-alt-prompt {
+		padding: 8px 0;
+	}
+	.image-alt-banner {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		padding: 10px 14px;
+		border-radius: 8px;
+		background: var(--warning-bg);
+		color: #7a5520;
+		font-size: 13px;
+		font-weight: 500;
+		margin-bottom: 16px;
+	}
+	.image-alt-preview {
+		display: flex;
+		justify-content: center;
+		margin-bottom: 16px;
+	}
+	.image-alt-thumb {
+		max-height: 200px;
+		max-width: 100%;
+		border-radius: 8px;
+		object-fit: contain;
+	}
+	.image-alt-label {
+		display: block;
+		font-size: 13px;
+		font-weight: 600;
+		color: var(--foreground);
+		margin-bottom: 6px;
+	}
+	.image-alt-input {
+		width: 100%;
+		padding: 8px 12px;
+		font-family: inherit;
+		font-size: 14px;
+		border: 1px solid var(--border);
+		border-radius: 8px;
+		background: var(--background);
+		color: var(--foreground);
+		outline: none;
+		transition: border-color 0.2s;
+	}
+	.image-alt-input:focus {
+		border-color: var(--primary);
+	}
+	.image-alt-actions {
+		display: flex;
+		gap: 8px;
+		margin-top: 16px;
+		justify-content: flex-end;
+	}
+	.image-alt-btn-primary {
+		padding: 8px 20px;
+		font-family: inherit;
+		font-size: 13px;
+		font-weight: 600;
+		color: var(--primary-foreground);
+		background: var(--primary);
+		border: none;
+		border-radius: 8px;
+		cursor: pointer;
+		transition: opacity 0.2s;
+	}
+	.image-alt-btn-primary:hover {
+		opacity: 0.9;
+	}
+	.image-alt-btn-ghost {
+		padding: 8px 16px;
+		font-family: inherit;
+		font-size: 13px;
+		font-weight: 500;
+		color: var(--muted-foreground);
+		background: transparent;
+		border: none;
+		border-radius: 8px;
+		cursor: pointer;
+		transition: background-color 0.2s;
+	}
+	.image-alt-btn-ghost:hover {
+		background: var(--muted);
+	}
+</style>

package/dist/admin/components/tiptap/inline-block-node.d.ts

@@ -0,0 +1,19 @@
+import { Node } from '@tiptap/core';
+import type { ObjectField } from '../../../types/fields.js';
+export interface InlineBlockOptions {
+    HTMLAttributes: Record<string, string>;
+    inlineBlocks: ObjectField[];
+}
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        inlineBlock: {
+            insertInlineBlock: (options: {
+                blockType: string;
+                blockData?: Record<string, unknown>;
+            }) => ReturnType;
+        };
+    }
+}
+/** Build default data for an inline block from its field definitions. */
+export declare function buildDefaultData(blockType: string, inlineBlocks: ObjectField[]): Record<string, unknown>;
+export declare const InlineBlockNode: Node<InlineBlockOptions, any>;

package/dist/admin/components/tiptap/inline-block-node.js

@@ -0,0 +1,98 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+import { SvelteNodeViewRenderer } from 'svelte-tiptap';
+import InlineBlockNodeView from './InlineBlockNodeView.svelte';
+/** Build default data for an inline block from its field definitions. */
+export function buildDefaultData(blockType, inlineBlocks) {
+    const def = inlineBlocks.find((b) => b.slug === blockType);
+    if (!def)
+        return {};
+    const data = {};
+    for (const field of def.fields) {
+        data[field.slug] = getFieldDefault(field);
+    }
+    return data;
+}
+function getFieldDefault(field) {
+    if (field.defaultValue !== undefined)
+        return field.defaultValue;
+    switch (field.type) {
+        case 'text':
+            return '';
+        case 'number':
+            return 0;
+        case 'boolean':
+            return false;
+        case 'select':
+        case 'radio':
+            return field.options[0]?.value ?? '';
+        case 'url':
+            return { url: '' };
+        default:
+            return '';
+    }
+}
+export const InlineBlockNode = Node.create({
+    name: 'inlineBlock',
+    group: 'block',
+    atom: true,
+    draggable: true,
+    isolating: true,
+    addOptions() {
+        return {
+            HTMLAttributes: {},
+            inlineBlocks: []
+        };
+    },
+    addAttributes() {
+        return {
+            blockType: { default: '' },
+            blockData: { default: '{}' },
+            blockId: { default: '' }
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: 'div[data-inline-block]',
+                getAttrs: (node) => {
+                    const el = node;
+                    return {
+                        blockType: el.getAttribute('data-block-type') || '',
+                        blockData: el.getAttribute('data-block-data') || '{}',
+                        blockId: el.getAttribute('data-block-id') || ''
+                    };
+                }
+            }
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return [
+            'div',
+            mergeAttributes(this.options.HTMLAttributes, {
+                'data-inline-block': '',
+                'data-block-type': HTMLAttributes.blockType,
+                'data-block-data': HTMLAttributes.blockData,
+                'data-block-id': HTMLAttributes.blockId
+            }),
+            `[${HTMLAttributes.blockType}]`
+        ];
+    },
+    addCommands() {
+        return {
+            insertInlineBlock: ({ blockType, blockData }) => ({ commands }) => {
+                const data = blockData ?? buildDefaultData(blockType, this.options.inlineBlocks);
+                return commands.insertContent({
+                    type: this.name,
+                    attrs: {
+                        blockType,
+                        blockData: JSON.stringify(data),
+                        blockId: crypto.randomUUID()
+                    }
+                });
+            }
+        };
+    },
+    addNodeView() {
+        return SvelteNodeViewRenderer(InlineBlockNodeView);
+    }
+});

package/dist/admin/components/tiptap/link-dialog.svelte

@@ -96,10 +96,15 @@
 			return;
 		}
 		searchTimeout = setTimeout(async () => {
-			const results = (await remotes.getEntries({
-				dataLike: { seo: { slug: url } }
-			})) as EntryWithSeo[];
-			suggestions = results.slice(0, 5);
+			const [slugResults, titleResults] = await Promise.all([
+				remotes.getEntries({ dataLike: { seo: { slug: url } } }),
+				remotes.getEntries({ dataLike: { seo: { title: url } } })
+			]) as [EntryWithSeo[], EntryWithSeo[]];
+			const combined = [...slugResults, ...titleResults];
+			const deduped = combined.filter(
+				(entry, index, self) => index === self.findIndex((e) => e.id === entry.id)
+			);
+			suggestions = deduped.slice(0, 5);
 		}, 300);
 	}
 

package/dist/admin/components/tiptap/slash-command.d.ts

@@ -0,0 +1,17 @@
+import { Extension } from '@tiptap/core';
+import { type SuggestionOptions } from '@tiptap/suggestion';
+import type { ObjectField } from '../../../types/fields.js';
+export interface SlashCommandItem {
+    id: string;
+    label: string;
+    description?: string;
+    group: string;
+    tier?: 1 | 2;
+    icon?: string;
+    action: (editor: ReturnType<SuggestionOptions['editor']>['commands']) => void;
+}
+export interface SlashCommandOptions {
+    inlineBlocks: ObjectField[];
+    suggestion: Partial<SuggestionOptions<SlashCommandItem>>;
+}
+export declare const SlashCommand: Extension<SlashCommandOptions, any>;