includio-cms 0.1.3 → 0.5.0

package/dist/admin/components/tiptap/slash-command.js

@@ -0,0 +1,181 @@
+import { Extension } from '@tiptap/core';
+import Suggestion, {} from '@tiptap/suggestion';
+import tippy, {} from 'tippy.js';
+import { mount, unmount } from 'svelte';
+import SlashCommandPopup from './SlashCommandPopup.svelte';
+function getStandardItems(editor) {
+    return [
+        {
+            id: 'heading2',
+            label: 'Nagłówek 2',
+            description: 'Główna sekcja',
+            group: 'Formatowanie',
+            tier: 1,
+            action: () => editor.chain().focus().toggleHeading({ level: 2 }).run()
+        },
+        {
+            id: 'heading3',
+            label: 'Nagłówek 3',
+            description: 'Podsekcja',
+            group: 'Formatowanie',
+            tier: 1,
+            action: () => editor.chain().focus().toggleHeading({ level: 3 }).run()
+        },
+        {
+            id: 'bulletList',
+            label: 'Lista punktowa',
+            description: 'Lista bez numeracji',
+            group: 'Formatowanie',
+            tier: 1,
+            action: () => editor.chain().focus().toggleBulletList().run()
+        },
+        {
+            id: 'orderedList',
+            label: 'Lista numerowana',
+            description: 'Lista numerowana',
+            group: 'Formatowanie',
+            tier: 1,
+            action: () => editor.chain().focus().toggleOrderedList().run()
+        },
+        {
+            id: 'blockquote',
+            label: 'Cytat',
+            description: 'Cytat blokowy',
+            group: 'Formatowanie',
+            tier: 2,
+            action: () => editor.chain().focus().toggleBlockquote().run()
+        },
+        {
+            id: 'codeBlock',
+            label: 'Blok kodu',
+            description: 'Blok kodu',
+            group: 'Formatowanie',
+            tier: 2,
+            action: () => editor.chain().focus().toggleCodeBlock().run()
+        },
+        {
+            id: 'horizontalRule',
+            label: 'Linia pozioma',
+            description: 'Linia oddzielająca',
+            group: 'Formatowanie',
+            tier: 2,
+            action: () => editor.chain().focus().setHorizontalRule().run()
+        }
+    ];
+}
+function getInlineBlockItems(inlineBlocks, editor) {
+    return inlineBlocks.map((block) => ({
+        id: `block-${block.slug}`,
+        label: block.label ? Object.values(block.label)[0] : block.slug,
+        group: 'Bloki',
+        action: () => {
+            editor.commands.insertInlineBlock({ blockType: block.slug });
+        }
+    }));
+}
+export const SlashCommand = Extension.create({
+    name: 'slashCommand',
+    addOptions() {
+        return {
+            inlineBlocks: [],
+            suggestion: {
+                char: '/',
+                startOfLine: true
+            }
+        };
+    },
+    addProseMirrorPlugins() {
+        const { inlineBlocks } = this.options;
+        return [
+            Suggestion({
+                editor: this.editor,
+                char: '/',
+                startOfLine: true,
+                command: ({ editor, range, props: item }) => {
+                    // Delete the "/" + query text, then run the item's action
+                    editor.chain().focus().deleteRange(range).run();
+                    item.action(editor.commands);
+                },
+                items: ({ query }) => {
+                    const allItems = [
+                        ...getInlineBlockItems(inlineBlocks, this.editor),
+                        ...getStandardItems(this.editor)
+                    ];
+                    if (!query)
+                        return allItems;
+                    const q = query.toLowerCase();
+                    return allItems.filter((item) => item.label.toLowerCase().includes(q) ||
+                        item.group.toLowerCase().includes(q));
+                },
+                render: () => {
+                    let popup;
+                    let component;
+                    let container;
+                    return {
+                        onStart: (props) => {
+                            container = document.createElement('div');
+                            component = mount(SlashCommandPopup, {
+                                target: container,
+                                props: {
+                                    items: props.items,
+                                    command: props.command
+                                }
+                            });
+                            popup = tippy(document.body, {
+                                getReferenceClientRect: () => props.clientRect?.(),
+                                appendTo: () => document.body,
+                                content: container,
+                                showOnCreate: true,
+                                interactive: true,
+                                trigger: 'manual',
+                                placement: 'bottom-start',
+                                maxWidth: 320
+                            });
+                        },
+                        onUpdate: (props) => {
+                            if (!component || !container)
+                                return;
+                            // Re-mount with updated props
+                            unmount(component);
+                            component = mount(SlashCommandPopup, {
+                                target: container,
+                                props: {
+                                    items: props.items,
+                                    command: props.command
+                                }
+                            });
+                            popup?.setProps({
+                                getReferenceClientRect: () => props.clientRect?.()
+                            });
+                        },
+                        onKeyDown: (props) => {
+                            if (props.event.key === 'Escape') {
+                                popup?.hide();
+                                return true;
+                            }
+                            // Delegate arrow/enter to the popup via custom event
+                            const el = container?.querySelector('[data-slash-popup]');
+                            if (el) {
+                                const handled = el.dispatchEvent(new CustomEvent('slash-keydown', {
+                                    detail: { key: props.event.key },
+                                    bubbles: false,
+                                    cancelable: true
+                                }));
+                                // If the event wasn't cancelled, the popup handled it
+                                return !handled;
+                            }
+                            return false;
+                        },
+                        onExit: () => {
+                            popup?.destroy();
+                            if (component)
+                                unmount(component);
+                            container = undefined;
+                            component = undefined;
+                        }
+                    };
+                }
+            })
+        ];
+    }
+});

package/dist/admin/components/tiptap/structured-content-utils.d.ts

@@ -0,0 +1,21 @@
+import type { SCNode, SCMark, StructuredContentDoc } from '../../../types/structured-content.js';
+/** Generic tree walker — visits every node depth-first. */
+export declare function walkNodes(nodes: SCNode[] | undefined, visitor: (node: SCNode) => void): void;
+/** Extract all `data-entry-id` values from link marks in a StructuredContentDoc. */
+export declare function extractEntryIds(doc: StructuredContentDoc): string[];
+/** Extract all `data-media-id` values from figure/video/image nodes and inlineBlock blockData. */
+export declare function extractMediaIds(doc: StructuredContentDoc): string[];
+/** Validate & type-narrow unknown JSON to StructuredContentDoc. Throws on invalid input.
+ *  Parses inlineBlock blockData from JSON string → object. */
+export declare function tiptapDocToStructured(json: unknown): StructuredContentDoc;
+/** Convert StructuredContentDoc to TipTap-compatible JSON.
+ *  Stringifies inlineBlock blockData object → JSON string for PM attr safety. */
+export declare function structuredToTiptapDoc(doc: StructuredContentDoc): Record<string, unknown>;
+/** Deep clone a StructuredContentDoc. */
+export declare function cloneDoc(doc: StructuredContentDoc): StructuredContentDoc;
+/** Walk link marks in a doc, calling replacer for each. Mutates the doc in place. */
+export declare function walkLinkMarks(doc: StructuredContentDoc, replacer: (mark: SCMark) => void): void;
+/** Walk inlineBlock nodes in a doc, calling replacer for each. Mutates in place. */
+export declare function walkInlineBlockNodes(doc: StructuredContentDoc, replacer: (node: SCNode) => void): void;
+/** Walk media nodes (figure/video/image) in a doc, calling replacer for each. Mutates in place. */
+export declare function walkMediaNodes(doc: StructuredContentDoc, replacer: (node: SCNode) => void): void;

package/dist/admin/components/tiptap/structured-content-utils.js

@@ -0,0 +1,150 @@
+/** Generic tree walker — visits every node depth-first. */
+export function walkNodes(nodes, visitor) {
+    if (!nodes)
+        return;
+    for (const node of nodes) {
+        visitor(node);
+        if (node.content) {
+            walkNodes(node.content, visitor);
+        }
+    }
+}
+/** Extract relation/entry IDs from inlineBlock blockData values. */
+function extractIdsFromBlockData(blockData, key) {
+    const ids = [];
+    for (const val of Object.values(blockData)) {
+        if (typeof val === 'string' && val.length === 36 && key === 'relation') {
+            ids.push(val);
+        }
+        else if (Array.isArray(val)) {
+            for (const item of val) {
+                if (typeof item === 'string' && item.length === 36)
+                    ids.push(item);
+            }
+        }
+    }
+    return ids;
+}
+/** Extract all `data-entry-id` values from link marks in a StructuredContentDoc. */
+export function extractEntryIds(doc) {
+    const ids = [];
+    walkNodes(doc.content, (node) => {
+        if (!node.marks)
+            return;
+        for (const mark of node.marks) {
+            if (mark.type === 'link' && mark.attrs?.['data-entry-id']) {
+                ids.push(mark.attrs['data-entry-id']);
+            }
+        }
+    });
+    return ids;
+}
+/** Extract all `data-media-id` values from figure/video/image nodes and inlineBlock blockData. */
+export function extractMediaIds(doc) {
+    const ids = [];
+    walkNodes(doc.content, (node) => {
+        if (['figure', 'video', 'image'].includes(node.type) && node.attrs?.['data-media-id']) {
+            ids.push(node.attrs['data-media-id']);
+        }
+        if (node.type === 'inlineBlock' && node.attrs?.blockData && typeof node.attrs.blockData === 'object') {
+            const data = node.attrs.blockData;
+            for (const val of Object.values(data)) {
+                // media/image fields store UUID strings
+                if (typeof val === 'string' && val.length === 36)
+                    ids.push(val);
+                if (Array.isArray(val)) {
+                    for (const item of val) {
+                        if (typeof item === 'string' && item.length === 36)
+                            ids.push(item);
+                    }
+                }
+            }
+        }
+    });
+    return ids;
+}
+/** Parse inlineBlock blockData from JSON string → object (deep, in-place). */
+function parseInlineBlockData(nodes) {
+    if (!nodes)
+        return;
+    for (const node of nodes) {
+        if (node.type === 'inlineBlock' && node.attrs?.blockData && typeof node.attrs.blockData === 'string') {
+            try {
+                node.attrs.blockData = JSON.parse(node.attrs.blockData);
+            }
+            catch {
+                // keep string on parse failure
+            }
+        }
+        if (node.content)
+            parseInlineBlockData(node.content);
+    }
+}
+/** Stringify inlineBlock blockData from object → JSON string (deep, in-place). */
+function stringifyInlineBlockData(nodes) {
+    if (!nodes)
+        return;
+    for (const node of nodes) {
+        if (node.type === 'inlineBlock' && node.attrs?.blockData && typeof node.attrs.blockData === 'object') {
+            node.attrs.blockData = JSON.stringify(node.attrs.blockData);
+        }
+        if (node.content)
+            stringifyInlineBlockData(node.content);
+    }
+}
+/** Validate & type-narrow unknown JSON to StructuredContentDoc. Throws on invalid input.
+ *  Parses inlineBlock blockData from JSON string → object. */
+export function tiptapDocToStructured(json) {
+    if (!json || typeof json !== 'object') {
+        throw new Error('Invalid structured content: expected object');
+    }
+    const obj = json;
+    if (obj.type !== 'doc') {
+        throw new Error(`Invalid structured content: root type must be "doc", got "${obj.type}"`);
+    }
+    if (!Array.isArray(obj.content)) {
+        throw new Error('Invalid structured content: "content" must be an array');
+    }
+    const doc = JSON.parse(JSON.stringify(json));
+    parseInlineBlockData(doc.content);
+    return doc;
+}
+/** Convert StructuredContentDoc to TipTap-compatible JSON.
+ *  Stringifies inlineBlock blockData object → JSON string for PM attr safety. */
+export function structuredToTiptapDoc(doc) {
+    const cloned = JSON.parse(JSON.stringify(doc));
+    stringifyInlineBlockData(cloned.content);
+    return cloned;
+}
+/** Deep clone a StructuredContentDoc. */
+export function cloneDoc(doc) {
+    return JSON.parse(JSON.stringify(doc));
+}
+/** Walk link marks in a doc, calling replacer for each. Mutates the doc in place. */
+export function walkLinkMarks(doc, replacer) {
+    walkNodes(doc.content, (node) => {
+        if (!node.marks)
+            return;
+        for (const mark of node.marks) {
+            if (mark.type === 'link') {
+                replacer(mark);
+            }
+        }
+    });
+}
+/** Walk inlineBlock nodes in a doc, calling replacer for each. Mutates in place. */
+export function walkInlineBlockNodes(doc, replacer) {
+    walkNodes(doc.content, (node) => {
+        if (node.type === 'inlineBlock') {
+            replacer(node);
+        }
+    });
+}
+/** Walk media nodes (figure/video/image) in a doc, calling replacer for each. Mutates in place. */
+export function walkMediaNodes(doc, replacer) {
+    walkNodes(doc.content, (node) => {
+        if (['figure', 'video', 'image'].includes(node.type)) {
+            replacer(node);
+        }
+    });
+}

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

@@ -4,39 +4,22 @@
 	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 Textarea from '../../../components/ui/textarea/textarea.svelte';
 	import * as Tooltip from '../../../components/ui/tooltip/index.js';
-	import * as DropdownMenu from '../../../components/ui/dropdown-menu/index.js';
-	import Button from '../../../components/ui/button/button.svelte';
 	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';
+	// 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 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 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';
@@ -108,171 +91,16 @@
 	<div class="border-input bg-background rounded-lg border">
 		<!-- Toolbar -->
 		{#if ed}
-			<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={() => (linkDialogOpen = true)}
-				>
-					<LinkIcon class="h-4 w-4" />
-				</ToolbarButton>
-				<ToolbarButton label="Obrazek" active={false} onclick={() => (imageDialogOpen = true)}>
-					<Photo class="h-4 w-4" />
-				</ToolbarButton>
-				<ToolbarButton label="Wideo" active={false} onclick={() => (videoDialogOpen = true)}>
-					<VideoIcon class="h-4 w-4" />
-				</ToolbarButton>
-				<ToolbarButton label="Tabela" active={false} onclick={() => (tableDialogOpen = true)}>
-					<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>
-
-				<Separator orientation="vertical" class="mx-1 h-6" />
-
-				<!-- HTML View -->
-				<ToolbarButton label="Widok HTML" active={isCodeViewActive} onclick={toggleCodeView}>
-					<SourceCode class="h-4 w-4" />
-				</ToolbarButton>
-			</div>
+			<EditorToolbar
+				editor={ed}
+				onLinkDialog={() => (linkDialogOpen = true)}
+				onImageDialog={() => (imageDialogOpen = true)}
+				onVideoDialog={() => (videoDialogOpen = true)}
+				onTableDialog={() => (tableDialogOpen = true)}
+				showCodeView={true}
+				{isCodeViewActive}
+				onToggleCodeView={toggleCodeView}
+			/>
 		{/if}
 
 		<!-- Bubble Menu -->
@@ -444,23 +272,23 @@
 
 	:global(.ProseMirror th),
 	:global(.ProseMirror td) {
-		border: 1px solid hsl(var(--border));
+		border: 1px solid var(--border);
 		padding: 0.5em;
 		text-align: left;
 	}
 
 	:global(.ProseMirror th) {
-		background-color: hsl(var(--muted));
+		background-color: var(--muted);
 		font-weight: 600;
 	}
 
 	:global(.ProseMirror .selectedCell) {
-		background-color: hsl(var(--accent));
+		background-color: var(--accent);
 	}
 
 	/* Code block styles */
 	:global(.ProseMirror pre) {
-		background-color: hsl(var(--muted));
+		background-color: var(--muted);
 		border-radius: 0.5rem;
 		padding: 1rem;
 		overflow-x: auto;
@@ -517,7 +345,7 @@
 
 	:global(.tiptap-figure figcaption) {
 		font-size: 0.875rem;
-		color: hsl(var(--muted-foreground));
+		color: var(--muted-foreground);
 		text-align: center;
 		margin-top: 0.5rem;
 	}
@@ -525,7 +353,7 @@
 	/* Syntax highlighting */
 	:global(.hljs-comment),
 	:global(.hljs-quote) {
-		color: hsl(var(--muted-foreground));
+		color: var(--muted-foreground);
 		font-style: italic;
 	}
 

package/dist/admin/email/invite-template.d.ts

@@ -0,0 +1,8 @@
+export declare function inviteEmailTemplate(params: {
+    inviteUrl: string;
+    role: string;
+    lang?: string;
+}): {
+    subject: string;
+    html: string;
+};