includio-cms 0.1.4 → 0.5.0

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

@@ -4,6 +4,7 @@
 	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 AlertTriangle from '@tabler/icons-svelte/icons/alert-triangle';
 
 	let { node, updateAttributes, selected }: NodeViewProps = $props();
 
@@ -11,12 +12,34 @@
 	let captionInput = $state(node.attrs.caption || '');
 	let captionInputEl = $state<HTMLInputElement | null>(null);
 
+	let editingAlt = $state(false);
+	let altInput = $state(node.attrs.alt || '');
+	let altInputEl = $state<HTMLInputElement | null>(null);
+	let figureEl = $state<HTMLDivElement | null>(null);
+	let toolbarFlipped = $state(false);
+
+	const hasAlt = $derived(!!(node.attrs.alt && (node.attrs.alt as string).trim()));
+
 	$effect(() => {
 		if (editing && captionInputEl) {
 			captionInputEl.focus();
 		}
 	});
 
+	$effect(() => {
+		if (editingAlt && altInputEl) {
+			altInputEl.focus();
+		}
+	});
+
+	// Flip toolbar to bottom when too close to viewport top
+	$effect(() => {
+		if (selected && figureEl) {
+			const rect = figureEl.getBoundingClientRect();
+			toolbarFlipped = rect.top < 56;
+		}
+	});
+
 	function setAlign(align: 'left' | 'center' | 'right') {
 		updateAttributes({ align });
 	}
@@ -26,6 +49,11 @@
 		editing = false;
 	}
 
+	function saveAlt() {
+		updateAttributes({ alt: altInput.trim() });
+		editingAlt = false;
+	}
+
 	function handleKeydown(e: KeyboardEvent) {
 		if (e.key === 'Enter') {
 			e.preventDefault();
@@ -36,17 +64,34 @@
 			editing = false;
 		}
 	}
+
+	function handleAltKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			saveAlt();
+		}
+		if (e.key === 'Escape') {
+			altInput = node.attrs.alt || '';
+			editingAlt = false;
+		}
+	}
+
+	function startEditAlt() {
+		altInput = node.attrs.alt || '';
+		editingAlt = true;
+	}
 </script>
 
 <NodeViewWrapper class="tiptap-figure align-{node.attrs.align || 'center'}" data-drag-handle>
-	<div class="figure-wrapper" class:selected>
+	<div class="figure-wrapper" class:selected bind:this={figureEl}>
 		{#if selected}
-			<div class="figure-toolbar">
+			<div class="figure-toolbar" class:figure-toolbar-bottom={toolbarFlipped}>
 				<button
 					type="button"
 					class="toolbar-btn"
 					class:active={node.attrs.align === 'left'}
 					onclick={() => setAlign('left')}
+					aria-label="Wyrównaj do lewej"
 					title="Wyrównaj do lewej"
 				>
 					<AlignLeft size={16} />
@@ -56,6 +101,7 @@
 					class="toolbar-btn"
 					class:active={node.attrs.align === 'center'}
 					onclick={() => setAlign('center')}
+					aria-label="Wyśrodkuj"
 					title="Wyśrodkuj"
 				>
 					<AlignCenter size={16} />
@@ -65,6 +111,7 @@
 					class="toolbar-btn"
 					class:active={node.attrs.align === 'right'}
 					onclick={() => setAlign('right')}
+					aria-label="Wyrównaj do prawej"
 					title="Wyrównaj do prawej"
 				>
 					<AlignRight size={16} />
@@ -74,6 +121,31 @@
 
 		<img src={node.attrs.src} alt={node.attrs.alt || ''} />
 
+		<!-- Alt text field — always visible -->
+		<div class="figure-alt-row" class:figure-alt-warning={!hasAlt}>
+			{#if editingAlt}
+				<input
+					bind:this={altInputEl}
+					type="text"
+					class="figure-alt-input"
+					bind:value={altInput}
+					onblur={saveAlt}
+					onkeydown={handleAltKeydown}
+					placeholder="Opis zdjęcia..."
+				/>
+			{:else if hasAlt}
+				<button type="button" class="figure-alt-display" onclick={startEditAlt}>
+					Alt: {node.attrs.alt}
+				</button>
+			{:else}
+				<button type="button" class="figure-alt-display figure-alt-missing" onclick={startEditAlt}>
+					<AlertTriangle size={14} />
+					<span>Dodaj opis zdjęcia, żeby każdy mógł je zrozumieć</span>
+				</button>
+			{/if}
+		</div>
+
+		<!-- Caption -->
 		{#if editing}
 			<input
 				bind:this={captionInputEl}
@@ -101,7 +173,7 @@
 	}
 
 	.figure-wrapper.selected {
-		outline: 2px solid hsl(var(--primary));
+		outline: 2px solid var(--primary);
 		outline-offset: 4px;
 		border-radius: 0.5rem;
 	}
@@ -120,14 +192,19 @@
 		transform: translateX(-50%);
 		display: flex;
 		gap: 4px;
-		background: hsl(var(--popover));
-		border: 1px solid hsl(var(--border));
+		background: var(--popover);
+		border: 1px solid var(--border);
 		border-radius: 0.5rem;
 		padding: 4px;
 		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 		z-index: 10;
 	}
 
+	.figure-toolbar-bottom {
+		top: auto;
+		bottom: -40px;
+	}
+
 	.toolbar-btn {
 		display: flex;
 		align-items: center;
@@ -138,17 +215,17 @@
 		background: transparent;
 		border-radius: 0.25rem;
 		cursor: pointer;
-		color: hsl(var(--foreground));
+		color: var(--foreground);
 		transition: background-color 0.15s;
 	}
 
 	.toolbar-btn:hover {
-		background: hsl(var(--accent));
+		background: var(--accent);
 	}
 
 	.toolbar-btn.active {
-		background: hsl(var(--primary));
-		color: hsl(var(--primary-foreground));
+		background: var(--primary);
+		color: var(--primary-foreground);
 	}
 
 	.caption-display {
@@ -156,7 +233,7 @@
 		width: 100%;
 		margin-top: 0.5rem;
 		font-size: 0.875rem;
-		color: hsl(var(--muted-foreground));
+		color: var(--muted-foreground);
 		text-align: center;
 		background: none;
 		border: none;
@@ -166,7 +243,7 @@
 	}
 
 	.caption-display:hover {
-		background: hsl(var(--accent) / 0.5);
+		background: color-mix(in oklch, var(--accent) 50%, transparent);
 	}
 
 	.caption-input {
@@ -176,14 +253,66 @@
 		font-size: 0.875rem;
 		text-align: center;
 		padding: 0.25rem 0.5rem;
-		border: 1px solid hsl(var(--border));
+		border: 1px solid var(--border);
 		border-radius: 0.25rem;
-		background: hsl(var(--background));
-		color: hsl(var(--foreground));
+		background: var(--background);
+		color: var(--foreground);
 	}
 
 	.caption-input:focus {
 		outline: none;
-		border-color: hsl(var(--primary));
+		border-color: var(--primary);
+	}
+
+	/* Alt text field */
+	.figure-alt-row {
+		margin-top: 0.375rem;
+		border-radius: 0.375rem;
+		transition: background-color 0.15s;
+	}
+
+	.figure-alt-warning {
+		background: var(--warning-bg);
+	}
+
+	.figure-alt-display {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		width: 100%;
+		padding: 0.25rem 0.5rem;
+		font-size: 0.75rem;
+		color: var(--muted-foreground);
+		text-align: left;
+		background: none;
+		border: none;
+		cursor: pointer;
+		border-radius: 0.375rem;
+		transition: background-color 0.15s;
+	}
+
+	.figure-alt-display:hover {
+		background: color-mix(in oklch, var(--accent) 50%, transparent);
+	}
+
+	.figure-alt-missing {
+		color: #7a5520;
+		font-weight: 500;
+	}
+
+	.figure-alt-input {
+		display: block;
+		width: 100%;
+		padding: 0.25rem 0.5rem;
+		font-size: 0.75rem;
+		border: 1px solid var(--border);
+		border-radius: 0.375rem;
+		background: var(--background);
+		color: var(--foreground);
+	}
+
+	.figure-alt-input:focus {
+		outline: none;
+		border-color: var(--primary);
 	}
 </style>

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

@@ -0,0 +1,254 @@
+<script lang="ts">
+	import { NodeViewWrapper } from 'svelte-tiptap';
+	import type { NodeViewProps } from '@tiptap/core';
+	import StandaloneFieldRenderer from '../fields/standalone-field-renderer.svelte';
+	import type { ObjectField } from '../../../types/fields.js';
+	import GripVertical from '@tabler/icons-svelte/icons/grip-vertical';
+	import ArrowUp from '@tabler/icons-svelte/icons/arrow-up';
+	import ArrowDown from '@tabler/icons-svelte/icons/arrow-down';
+	import Trash from '@tabler/icons-svelte/icons/trash';
+
+	let { node, updateAttributes, editor, getPos, deleteNode, selected }: NodeViewProps = $props();
+
+	const inlineBlocks: ObjectField[] = $derived(
+		(editor.extensionManager.extensions.find((e) => e.name === 'inlineBlock')?.options as { inlineBlocks: ObjectField[] })?.inlineBlocks ?? []
+	);
+
+	const blockDef = $derived(inlineBlocks.find((b) => b.slug === node.attrs.blockType));
+	const blockLabel = $derived(blockDef?.label ? (Object.values(blockDef.label)[0] ?? blockDef.slug) : node.attrs.blockType);
+
+	let blockData = $state<Record<string, unknown>>(parseBlockData(node.attrs.blockData));
+	// Track last JSON we wrote to PM to avoid re-parsing our own writes
+	let lastWrittenJson = '';
+
+	function parseBlockData(raw: unknown): Record<string, unknown> {
+		if (typeof raw === 'string') {
+			try { return JSON.parse(raw); } catch { return {}; }
+		}
+		if (typeof raw === 'object' && raw !== null) return raw as Record<string, unknown>;
+		return {};
+	}
+
+	// Sync external changes (e.g. undo/redo) — skip if it's our own write
+	$effect(() => {
+		const raw = node.attrs.blockData;
+		const rawJson = typeof raw === 'string' ? raw : JSON.stringify(raw);
+		if (rawJson !== lastWrittenJson) {
+			blockData = parseBlockData(raw);
+		}
+	});
+
+	let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+
+	function handleFieldChange(slug: string, value: unknown) {
+		blockData = { ...blockData, [slug]: value };
+		if (debounceTimer) clearTimeout(debounceTimer);
+		debounceTimer = setTimeout(() => {
+			lastWrittenJson = JSON.stringify(blockData);
+			updateAttributes({ blockData: lastWrittenJson });
+		}, 300);
+	}
+
+	function moveUp() {
+		const pos = getPos();
+		if (pos === undefined || pos <= 0) return;
+		const resolvedPos = editor.state.doc.resolve(pos);
+		const index = resolvedPos.index(resolvedPos.depth);
+		if (index <= 0) return;
+
+		const thisNode = editor.state.doc.nodeAt(pos);
+		if (!thisNode) return;
+
+		const prevNode = resolvedPos.parent.child(index - 1);
+		const prevPos = pos - prevNode.nodeSize;
+
+		editor
+			.chain()
+			.focus()
+			.command(({ tr }) => {
+				tr.delete(pos, pos + thisNode.nodeSize);
+				tr.insert(prevPos, thisNode);
+				return true;
+			})
+			.run();
+	}
+
+	function moveDown() {
+		const pos = getPos();
+		if (pos === undefined) return;
+		const resolvedPos = editor.state.doc.resolve(pos);
+		const index = resolvedPos.index(resolvedPos.depth);
+		const parent = resolvedPos.parent;
+		if (index >= parent.childCount - 1) return;
+
+		const thisNode = editor.state.doc.nodeAt(pos);
+		if (!thisNode) return;
+
+		const nextNode = parent.child(index + 1);
+		const insertPos = pos + thisNode.nodeSize + nextNode.nodeSize;
+
+		editor
+			.chain()
+			.focus()
+			.command(({ tr }) => {
+				tr.insert(insertPos, thisNode);
+				tr.delete(pos, pos + thisNode.nodeSize);
+				return true;
+			})
+			.run();
+	}
+
+	function handleDelete() {
+		const pos = getPos();
+		deleteNode();
+		// Focus previous node
+		if (pos !== undefined && pos > 0) {
+			editor.chain().focus(pos - 1).run();
+		}
+	}
+</script>
+
+<NodeViewWrapper class="inline-block-node {selected ? 'selected' : ''}" data-drag-handle>
+	<div class="inline-block-wrapper">
+		<!-- Header -->
+		<div class="inline-block-header">
+			<div class="inline-block-header-left">
+				<button type="button" class="grip-handle" aria-label="Przeciągnij" data-drag-handle>
+					<GripVertical size={16} />
+				</button>
+				<span class="inline-block-label">{blockLabel}</span>
+			</div>
+			<div class="inline-block-header-actions">
+				<button type="button" class="action-btn" onclick={moveUp} aria-label="Przenieś wyżej" title="Przenieś wyżej">
+					<ArrowUp size={16} />
+				</button>
+				<button type="button" class="action-btn" onclick={moveDown} aria-label="Przenieś niżej" title="Przenieś niżej">
+					<ArrowDown size={16} />
+				</button>
+				<button type="button" class="action-btn action-btn-danger" onclick={handleDelete} aria-label="Usuń blok" title="Usuń blok">
+					<Trash size={16} />
+				</button>
+			</div>
+		</div>
+
+		<!-- Body: field renderer -->
+		{#if blockDef}
+			<div class="inline-block-body">
+				<StandaloneFieldRenderer
+					fields={blockDef.fields}
+					data={blockData}
+					onchange={handleFieldChange}
+				/>
+			</div>
+		{:else}
+			<div class="inline-block-body inline-block-unknown">
+				Nieznany typ bloku: {node.attrs.blockType}
+			</div>
+		{/if}
+	</div>
+</NodeViewWrapper>
+
+<style>
+	.inline-block-wrapper {
+		border: 1px solid var(--border);
+		border-radius: 12px;
+		overflow: hidden;
+		margin: 0.5rem 0;
+		background: var(--surface, var(--background));
+	}
+
+	.inline-block-wrapper:hover {
+		border-color: color-mix(in oklch, var(--primary) 50%, transparent);
+	}
+
+	:global(.selected) .inline-block-wrapper {
+		border-color: color-mix(in oklch, var(--primary) 50%, transparent);
+	}
+
+	.inline-block-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0.375rem 0.5rem;
+		background: var(--muted);
+		border-bottom: 1px solid var(--border);
+		min-height: 36px;
+	}
+
+	.inline-block-header-left {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+	}
+
+	.inline-block-label {
+		font-size: 0.8125rem;
+		font-weight: 600;
+		color: var(--foreground);
+	}
+
+	.inline-block-header-actions {
+		display: flex;
+		align-items: center;
+		gap: 2px;
+	}
+
+	.grip-handle {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 24px;
+		height: 24px;
+		border: none;
+		background: transparent;
+		cursor: grab;
+		color: var(--muted-foreground);
+		border-radius: 4px;
+		padding: 0;
+	}
+
+	.grip-handle:hover {
+		background: var(--accent);
+	}
+
+	.action-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 24px;
+		min-height: 24px;
+		border: none;
+		background: transparent;
+		cursor: pointer;
+		color: var(--muted-foreground);
+		border-radius: 4px;
+		padding: 2px;
+		transition: background-color 0.15s, color 0.15s;
+	}
+
+	.action-btn:hover {
+		background: var(--accent);
+		color: var(--foreground);
+	}
+
+	.action-btn:focus-visible {
+		outline: 2px solid var(--ring);
+		outline-offset: 1px;
+	}
+
+	.action-btn-danger:hover {
+		background: color-mix(in oklch, var(--destructive) 10%, transparent);
+		color: var(--destructive);
+	}
+
+	.inline-block-body {
+		padding: 0.75rem;
+	}
+
+	.inline-block-unknown {
+		text-align: center;
+		color: var(--muted-foreground);
+		font-size: 0.8125rem;
+		font-style: italic;
+	}
+</style>

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

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