@x33025/sveltely 0.1.10 → 0.1.11

package/dist/components/Library/ArticleEditor/ArticleImagePreview.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { ImageIcon } from '@lucide/svelte';
+
+	let {
+		src,
+		alt,
+		aspectRatio = '4 / 3'
+	} = $props<{
+		src?: string | null;
+		alt: string;
+		aspectRatio?: string;
+	}>();
+
+	let imageLoaded = $state(false);
+	let imageFailed = $state(false);
+
+	$effect(() => {
+		src;
+		imageLoaded = false;
+		imageFailed = false;
+	});
+</script>
+
+<div class="article-image-preview" style={`aspect-ratio: ${aspectRatio};`}>
+	{#if src && !imageFailed}
+		<img
+			{src}
+			{alt}
+			class="article-image-preview-media"
+			class:article-image-preview-media-loaded={imageLoaded}
+			onload={() => (imageLoaded = true)}
+			onerror={() => (imageFailed = true)}
+		/>
+	{/if}
+	{#if !src || !imageLoaded || imageFailed}
+		<div class="article-image-preview-placeholder" aria-hidden="true">
+			<ImageIcon size={32} strokeWidth={1.75} />
+		</div>
+	{/if}
+</div>
+
+<style>
+	.article-image-preview {
+		position: relative;
+		display: grid;
+		place-items: center;
+		overflow: hidden;
+		background: #f4f4f5;
+	}
+
+	.article-image-preview-media {
+		display: block;
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		opacity: 0;
+		transition: opacity 120ms ease;
+	}
+
+	.article-image-preview-media-loaded {
+		opacity: 1;
+	}
+
+	.article-image-preview-placeholder {
+		position: absolute;
+		inset: 0;
+		display: grid;
+		place-items: center;
+		color: #a1a1aa;
+	}
+</style>

package/dist/components/Library/ArticleEditor/ArticleImagePreview.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    src?: string | null;
+    alt: string;
+    aspectRatio?: string;
+};
+declare const ArticleImagePreview: import("svelte").Component<$$ComponentProps, {}, "">;
+type ArticleImagePreview = ReturnType<typeof ArticleImagePreview>;
+export default ArticleImagePreview;

package/dist/components/Library/ArticleEditor/articleEditor.svelte.js

@@ -0,0 +1,532 @@
+const cloneBlocks = (blocks) => blocks
+    .slice()
+    .sort((a, b) => a.order - b.order)
+    .map((block) => ({
+    ...block,
+    items: block.items ? [...block.items] : null,
+    listItems: block.listItems ? block.listItems.map((item) => ({ ...item })) : null,
+    faqItems: block.faqItems ? block.faqItems.map((item) => ({ ...item })) : null,
+    columns: block.columns ? [...block.columns] : null,
+    rows: block.rows ? block.rows.map((row) => [...row]) : null
+}));
+const reindexBlocks = (blocks) => blocks.map((block, index) => ({
+    ...block,
+    order: index
+}));
+const makeParagraphBlock = (order, text = '') => ({
+    id: crypto.randomUUID(),
+    order,
+    type: 'paragraph',
+    sectionID: null,
+    level: null,
+    text,
+    textHTML: null,
+    ordered: null,
+    items: null,
+    listItems: null,
+    faqItems: null,
+    columns: null,
+    rows: null,
+    language: null,
+    code: null,
+    imageURL: null,
+    imageAlt: null
+});
+const makeInsertedBlock = (order, kind) => {
+    const baseBlock = makeParagraphBlock(order);
+    if (kind === 'image') {
+        return {
+            ...baseBlock,
+            type: 'image',
+            text: null,
+            imageURL: null,
+            imageAlt: ''
+        };
+    }
+    if (kind === 'table') {
+        return {
+            ...baseBlock,
+            type: 'table',
+            text: null,
+            columns: ['Column 1', 'Column 2'],
+            rows: [
+                ['', ''],
+                ['', '']
+            ]
+        };
+    }
+    if (kind === 'bullet_list' || kind === 'numbered_list') {
+        return {
+            ...baseBlock,
+            type: kind,
+            text: null,
+            ordered: kind === 'numbered_list',
+            items: ['']
+        };
+    }
+    return baseBlock;
+};
+const canMergeText = (block) => block?.type === 'paragraph' || block?.type === 'heading';
+const canFormatText = (block) => block?.type === 'paragraph' ||
+    block?.type === 'heading' ||
+    block?.type === 'bullet_list' ||
+    block?.type === 'list' ||
+    block?.type === 'numbered_list' ||
+    block?.type === 'code';
+const textFromBlock = (block) => {
+    if (block.items?.length)
+        return block.items.join('\n');
+    return block.text ?? '';
+};
+export const articleBlockLabel = (block) => {
+    if (block.type === 'heading') {
+        const level = Math.min(3, Math.max(1, Number(block.level ?? 2)));
+        return level === 1 ? 'Heading 1' : level === 2 ? 'Heading 2' : 'Heading 3';
+    }
+    if (block.type === 'numbered_list')
+        return 'Numbered list';
+    if (block.type === 'bullet_list' || block.type === 'list')
+        return 'Bulleted list';
+    if (block.type === 'image')
+        return 'Image';
+    if (block.type === 'table')
+        return 'Table';
+    if (block.type === 'faq')
+        return 'FAQ';
+    if (block.type === 'code')
+        return 'Code';
+    return 'Text';
+};
+export function createArticleEditor(article) {
+    const initialDraftBlocks = cloneBlocks(article.articleBlocks ?? []);
+    let draftTitle = $state(article.title);
+    let draftImageAltText = $state(article.imageAltText ?? '');
+    let draftBlocks = $state(initialDraftBlocks);
+    let selectedBlockID = $state(initialDraftBlocks[0]?.id ?? null);
+    let focusTarget = $state(null);
+    let focusPosition = $state(null);
+    let undoStack = $state([]);
+    let redoStack = $state([]);
+    const sortedDraftBlocks = $derived(draftBlocks.slice().sort((a, b) => a.order - b.order));
+    const selectedBlock = $derived(sortedDraftBlocks.find((block) => block.id === selectedBlockID) ?? sortedDraftBlocks[0] ?? null);
+    const takeSnapshot = () => ({
+        draftTitle,
+        draftImageAltText,
+        draftBlocks: cloneBlocks(draftBlocks),
+        selectedBlockID
+    });
+    const restoreSnapshot = (snapshot) => {
+        draftTitle = snapshot.draftTitle;
+        draftImageAltText = snapshot.draftImageAltText;
+        draftBlocks = cloneBlocks(snapshot.draftBlocks);
+        selectedBlockID = snapshot.selectedBlockID;
+        focusTarget = snapshot.selectedBlockID;
+        focusPosition = null;
+    };
+    const pushUndoSnapshot = () => {
+        undoStack = [...undoStack, takeSnapshot()].slice(-100);
+        redoStack = [];
+    };
+    return {
+        get draftTitle() {
+            return draftTitle;
+        },
+        get draftImageAltText() {
+            return draftImageAltText;
+        },
+        get blocks() {
+            return sortedDraftBlocks;
+        },
+        get selectedBlockID() {
+            return selectedBlockID;
+        },
+        get selectedBlock() {
+            return selectedBlock;
+        },
+        get focusTarget() {
+            return focusTarget;
+        },
+        get focusPosition() {
+            return focusPosition;
+        },
+        get canUndo() {
+            return undoStack.length > 0;
+        },
+        get canRedo() {
+            return redoStack.length > 0;
+        },
+        setTitle(value) {
+            if (draftTitle === value)
+                return;
+            pushUndoSnapshot();
+            draftTitle = value;
+        },
+        setImageAltText(value) {
+            if (draftImageAltText === value)
+                return;
+            pushUndoSnapshot();
+            draftImageAltText = value;
+        },
+        selectBlock(id) {
+            selectedBlockID = id;
+        },
+        updateBlock(id, patch) {
+            pushUndoSnapshot();
+            draftBlocks = draftBlocks.map((block) => (block.id === id ? { ...block, ...patch } : block));
+        },
+        changeBlockTextFormat(id, format) {
+            const block = sortedDraftBlocks.find((candidate) => candidate.id === id);
+            if (!canFormatText(block))
+                return;
+            const text = textFromBlock(block);
+            const listItems = block.items?.length
+                ? [...block.items]
+                : text
+                    .split('\n')
+                    .map((item) => item.trim())
+                    .filter(Boolean);
+            pushUndoSnapshot();
+            draftBlocks = draftBlocks.map((candidate) => {
+                if (candidate.id !== id)
+                    return candidate;
+                if (format === 'bullet_list' || format === 'numbered_list') {
+                    return {
+                        ...candidate,
+                        type: format,
+                        level: null,
+                        text: null,
+                        textHTML: null,
+                        ordered: format === 'numbered_list',
+                        items: listItems.length ? listItems : [''],
+                        listItems: null,
+                        faqItems: null,
+                        columns: null,
+                        rows: null,
+                        language: null,
+                        code: null,
+                        imageURL: null,
+                        imageAlt: null
+                    };
+                }
+                const level = format === 'paragraph' ? null : Number(format.replace('heading-', ''));
+                return {
+                    ...candidate,
+                    type: format === 'paragraph' ? 'paragraph' : 'heading',
+                    level,
+                    text,
+                    textHTML: null,
+                    ordered: null,
+                    items: null,
+                    listItems: null,
+                    faqItems: null,
+                    columns: null,
+                    rows: null,
+                    language: null,
+                    code: null,
+                    imageURL: null,
+                    imageAlt: null
+                };
+            });
+            selectedBlockID = id;
+            focusTarget = id;
+            focusPosition = null;
+        },
+        insertBlockAfter(id, kind) {
+            const index = sortedDraftBlocks.findIndex((block) => block.id === id);
+            if (index === -1)
+                return;
+            pushUndoSnapshot();
+            const nextBlocks = [...sortedDraftBlocks];
+            const newBlock = makeInsertedBlock(index + 1, kind);
+            nextBlocks.splice(index + 1, 0, newBlock);
+            draftBlocks = reindexBlocks(nextBlocks);
+            selectedBlockID = newBlock.id;
+            focusTarget =
+                kind === 'bullet_list' || kind === 'numbered_list' ? `${newBlock.id}:0` : newBlock.id;
+            focusPosition = null;
+        },
+        updateListItem(blockID, index, value) {
+            pushUndoSnapshot();
+            draftBlocks = draftBlocks.map((block) => {
+                if (block.id !== blockID)
+                    return block;
+                const items = [...(block.items ?? [])];
+                items[index] = value;
+                return { ...block, items };
+            });
+        },
+        updateFAQItem(blockID, index, field, value) {
+            pushUndoSnapshot();
+            draftBlocks = draftBlocks.map((block) => {
+                if (block.id !== blockID)
+                    return block;
+                const faqItems = [...(block.faqItems ?? [])];
+                faqItems[index] = { ...faqItems[index], [field]: value };
+                return { ...block, faqItems };
+            });
+        },
+        updateTableCell(blockID, rowIndex, cellIndex, value) {
+            pushUndoSnapshot();
+            draftBlocks = draftBlocks.map((block) => {
+                if (block.id !== blockID)
+                    return block;
+                const rows = (block.rows ?? []).map((row) => [...row]);
+                rows[rowIndex][cellIndex] = value;
+                return { ...block, rows };
+            });
+        },
+        updateTableHeader(blockID, cellIndex, value) {
+            pushUndoSnapshot();
+            draftBlocks = draftBlocks.map((block) => {
+                if (block.id !== blockID)
+                    return block;
+                const columns = [...(block.columns ?? [])];
+                columns[cellIndex] = value;
+                return { ...block, columns };
+            });
+        },
+        addTableColumn(blockID) {
+            pushUndoSnapshot();
+            draftBlocks = draftBlocks.map((block) => {
+                if (block.id !== blockID)
+                    return block;
+                const columns = [...(block.columns ?? [])];
+                const rows = (block.rows ?? []).map((row) => [...row]);
+                columns.push('');
+                return {
+                    ...block,
+                    columns,
+                    rows: rows.map((row) => [...row, ''])
+                };
+            });
+        },
+        removeTableColumn(blockID, columnIndex) {
+            const block = draftBlocks.find((candidate) => candidate.id === blockID);
+            const columns = [...(block?.columns ?? [])];
+            const rows = (block?.rows ?? []).map((row) => [...row]);
+            const columnCount = Math.max(columns.length, rows[0]?.length ?? 0);
+            if (!block || columnCount <= 1 || columnIndex < 0 || columnIndex >= columnCount)
+                return;
+            pushUndoSnapshot();
+            draftBlocks = draftBlocks.map((candidate) => {
+                if (candidate.id !== blockID)
+                    return candidate;
+                return {
+                    ...candidate,
+                    columns: columns.filter((_, index) => index !== columnIndex),
+                    rows: rows.map((row) => row.filter((_, index) => index !== columnIndex))
+                };
+            });
+        },
+        addTableRow(blockID) {
+            pushUndoSnapshot();
+            draftBlocks = draftBlocks.map((block) => {
+                if (block.id !== blockID)
+                    return block;
+                const columns = [...(block.columns ?? [])];
+                const rows = (block.rows ?? []).map((row) => [...row]);
+                const columnCount = Math.max(columns.length, rows[0]?.length ?? 0, 1);
+                return {
+                    ...block,
+                    columns: columns.length > 0 ? columns : Array.from({ length: columnCount }, () => ''),
+                    rows: [...rows, Array.from({ length: columnCount }, () => '')]
+                };
+            });
+        },
+        removeTableRow(blockID, rowIndex) {
+            const block = draftBlocks.find((candidate) => candidate.id === blockID);
+            const rows = (block?.rows ?? []).map((row) => [...row]);
+            if (!block || rows.length <= 1 || rowIndex < 0 || rowIndex >= rows.length)
+                return;
+            pushUndoSnapshot();
+            draftBlocks = draftBlocks.map((candidate) => {
+                if (candidate.id !== blockID)
+                    return candidate;
+                return {
+                    ...candidate,
+                    rows: rows.filter((_, index) => index !== rowIndex)
+                };
+            });
+        },
+        reorderBlock(draggedID, targetID, placement) {
+            if (draggedID === targetID)
+                return;
+            const draggedBlock = sortedDraftBlocks.find((block) => block.id === draggedID);
+            if (!draggedBlock)
+                return;
+            const nextBlocks = sortedDraftBlocks.filter((block) => block.id !== draggedID);
+            const targetIndex = nextBlocks.findIndex((block) => block.id === targetID);
+            if (targetIndex === -1)
+                return;
+            pushUndoSnapshot();
+            nextBlocks.splice(placement === 'after' ? targetIndex + 1 : targetIndex, 0, draggedBlock);
+            draftBlocks = reindexBlocks(nextBlocks);
+            selectedBlockID = draggedID;
+            focusTarget = null;
+            focusPosition = null;
+        },
+        createParagraphAfter(id, text = '', currentText = null) {
+            const index = draftBlocks.findIndex((block) => block.id === id);
+            if (index === -1)
+                return;
+            pushUndoSnapshot();
+            const nextBlocks = [...draftBlocks];
+            if (currentText !== null) {
+                nextBlocks[index] = {
+                    ...nextBlocks[index],
+                    text: currentText,
+                    textHTML: null
+                };
+            }
+            const newBlock = makeParagraphBlock(index + 1, text);
+            nextBlocks.splice(index + 1, 0, newBlock);
+            draftBlocks = reindexBlocks(nextBlocks);
+            selectedBlockID = newBlock.id;
+            focusTarget = newBlock.id;
+            focusPosition = currentText !== null ? 0 : null;
+        },
+        mergeBlockWithPrevious(id) {
+            const blocks = sortedDraftBlocks;
+            const index = blocks.findIndex((block) => block.id === id);
+            const currentBlock = blocks[index];
+            const previousBlock = blocks[index - 1];
+            if (!currentBlock || !canMergeText(currentBlock) || !canMergeText(previousBlock))
+                return;
+            const previousText = previousBlock.text ?? '';
+            const currentText = currentBlock.text ?? '';
+            pushUndoSnapshot();
+            draftBlocks = reindexBlocks(blocks
+                .filter((block) => block.id !== id)
+                .map((block) => block.id === previousBlock.id
+                ? {
+                    ...block,
+                    text: `${previousText}${currentText}`,
+                    textHTML: null
+                }
+                : block));
+            selectedBlockID = previousBlock.id;
+            focusTarget = previousBlock.id;
+            focusPosition = previousText.length;
+        },
+        insertListItemAfter(blockID, index, text = '', currentText = null) {
+            pushUndoSnapshot();
+            draftBlocks = draftBlocks.map((block) => {
+                if (block.id !== blockID)
+                    return block;
+                const items = [...(block.items ?? [])];
+                if (currentText !== null) {
+                    items[index] = currentText;
+                }
+                items.splice(index + 1, 0, text);
+                return { ...block, items };
+            });
+            selectedBlockID = blockID;
+            focusTarget = `${blockID}:${index + 1}`;
+            focusPosition = currentText !== null ? 0 : null;
+        },
+        mergeListItemWithPrevious(blockID, index) {
+            const block = draftBlocks.find((candidate) => candidate.id === blockID);
+            const items = [...(block?.items ?? [])];
+            if (!block || index <= 0 || index >= items.length)
+                return;
+            const previousText = items[index - 1] ?? '';
+            const currentText = items[index] ?? '';
+            pushUndoSnapshot();
+            items[index - 1] = `${previousText}${currentText}`;
+            items.splice(index, 1);
+            draftBlocks = draftBlocks.map((candidate) => candidate.id === blockID ? { ...candidate, items } : candidate);
+            selectedBlockID = blockID;
+            focusTarget = `${blockID}:${index - 1}`;
+            focusPosition = previousText.length;
+        },
+        removeBlock(id) {
+            const index = draftBlocks.findIndex((block) => block.id === id);
+            if (index === -1)
+                return;
+            const nextFocus = draftBlocks[index - 1]?.id ?? draftBlocks[index + 1]?.id ?? null;
+            pushUndoSnapshot();
+            draftBlocks = reindexBlocks(draftBlocks.filter((block) => block.id !== id));
+            selectedBlockID = nextFocus;
+            focusTarget = nextFocus;
+            focusPosition = null;
+        },
+        removeListItem(blockID, index) {
+            const block = draftBlocks.find((candidate) => candidate.id === blockID);
+            const items = [...(block?.items ?? [])];
+            if (!block || index < 0 || index >= items.length)
+                return;
+            if (items.length === 1) {
+                pushUndoSnapshot();
+                draftBlocks = draftBlocks.map((candidate) => {
+                    if (candidate.id !== blockID)
+                        return candidate;
+                    return {
+                        ...candidate,
+                        type: 'paragraph',
+                        text: '',
+                        textHTML: null,
+                        ordered: null,
+                        items: null,
+                        listItems: null
+                    };
+                });
+                selectedBlockID = blockID;
+                focusTarget = blockID;
+                focusPosition = null;
+                return;
+            }
+            pushUndoSnapshot();
+            items.splice(index, 1);
+            draftBlocks = draftBlocks.map((candidate) => candidate.id === blockID ? { ...candidate, items } : candidate);
+            selectedBlockID = blockID;
+            focusTarget = `${blockID}:${Math.max(0, index - 1)}`;
+            focusPosition = null;
+        },
+        convertToList(id, kind) {
+            pushUndoSnapshot();
+            draftBlocks = draftBlocks.map((block) => {
+                if (block.id !== id)
+                    return block;
+                return {
+                    ...block,
+                    type: kind,
+                    text: null,
+                    textHTML: null,
+                    ordered: kind === 'numbered_list',
+                    items: [''],
+                    listItems: null,
+                    faqItems: null,
+                    columns: null,
+                    rows: null,
+                    language: null,
+                    code: null,
+                    imageURL: null,
+                    imageAlt: null
+                };
+            });
+            selectedBlockID = id;
+            focusTarget = `${id}:0`;
+            focusPosition = null;
+        },
+        handleFocus() {
+            focusTarget = null;
+            focusPosition = null;
+        },
+        undo() {
+            const snapshot = undoStack.at(-1);
+            if (!snapshot)
+                return;
+            undoStack = undoStack.slice(0, -1);
+            redoStack = [...redoStack, takeSnapshot()].slice(-100);
+            restoreSnapshot(snapshot);
+        },
+        redo() {
+            const snapshot = redoStack.at(-1);
+            if (!snapshot)
+                return;
+            redoStack = redoStack.slice(0, -1);
+            undoStack = [...undoStack, takeSnapshot()].slice(-100);
+            restoreSnapshot(snapshot);
+        }
+    };
+}

package/dist/components/Library/ArticleEditor/index.d.ts

@@ -0,0 +1,18 @@
+export { default as ArticleEditor } from './ArticleEditor.svelte';
+export { default as ArticleEditorBody } from './ArticleEditorBody.svelte';
+export { default as ArticleBlockCode } from './ArticleBlockCode.svelte';
+export { default as ArticleBlockFAQ } from './ArticleBlockFAQ.svelte';
+export { default as ArticleBlockFallback } from './ArticleBlockFallback.svelte';
+export { default as ArticleBlockHeading } from './ArticleBlockHeading.svelte';
+export { default as ArticleBlockImage } from './ArticleBlockImage.svelte';
+export { default as ArticleBlockInsertControl } from './ArticleBlockInsertControl.svelte';
+export { default as ArticleBlockDragControl } from './ArticleBlockDragControl.svelte';
+export { default as ArticleBlockList } from './ArticleBlockList.svelte';
+export { default as ArticleBlockParagraph } from './ArticleBlockParagraph.svelte';
+export { default as ArticleBlockShell } from './ArticleBlockShell.svelte';
+export { default as ArticleBlockTable } from './ArticleBlockTable.svelte';
+export { default as ArticleEditorHeader } from './ArticleEditorHeader.svelte';
+export { default as ArticleImagePreview } from './ArticleImagePreview.svelte';
+export { articleBlockLabel, createArticleEditor } from './articleEditor.svelte.js';
+export type { BlockInsertKind, BlockTextFormat } from './articleEditor.svelte.js';
+export type { ArticleBlock, ArticleEditorArticle, BlockDraft } from './types.js';

package/dist/components/Library/ArticleEditor/index.js

@@ -0,0 +1,16 @@
+export { default as ArticleEditor } from './ArticleEditor.svelte';
+export { default as ArticleEditorBody } from './ArticleEditorBody.svelte';
+export { default as ArticleBlockCode } from './ArticleBlockCode.svelte';
+export { default as ArticleBlockFAQ } from './ArticleBlockFAQ.svelte';
+export { default as ArticleBlockFallback } from './ArticleBlockFallback.svelte';
+export { default as ArticleBlockHeading } from './ArticleBlockHeading.svelte';
+export { default as ArticleBlockImage } from './ArticleBlockImage.svelte';
+export { default as ArticleBlockInsertControl } from './ArticleBlockInsertControl.svelte';
+export { default as ArticleBlockDragControl } from './ArticleBlockDragControl.svelte';
+export { default as ArticleBlockList } from './ArticleBlockList.svelte';
+export { default as ArticleBlockParagraph } from './ArticleBlockParagraph.svelte';
+export { default as ArticleBlockShell } from './ArticleBlockShell.svelte';
+export { default as ArticleBlockTable } from './ArticleBlockTable.svelte';
+export { default as ArticleEditorHeader } from './ArticleEditorHeader.svelte';
+export { default as ArticleImagePreview } from './ArticleImagePreview.svelte';
+export { articleBlockLabel, createArticleEditor } from './articleEditor.svelte.js';

package/dist/components/Library/ArticleEditor/types.d.ts

@@ -0,0 +1,37 @@
+export type ArticleBlock = {
+    id: string;
+    order: number;
+    type: string;
+    sectionID?: string | null;
+    level?: number | null;
+    text?: string | null;
+    textHTML?: string | null;
+    ordered?: boolean | null;
+    items?: string[] | null;
+    listItems?: {
+        lead?: string | null;
+        body: string;
+        bodyHTML?: string | null;
+    }[] | null;
+    faqItems?: {
+        question: string;
+        answer: string;
+    }[] | null;
+    columns?: string[] | null;
+    rows?: string[][] | null;
+    imageURL?: string | null;
+    imageAlt?: string | null;
+    caption?: string | null;
+    language?: string | null;
+    code?: string | null;
+};
+export type BlockDraft = ArticleBlock & {
+    id: string;
+};
+export type ArticleEditorArticle = {
+    id?: string;
+    title: string;
+    imageURL?: string | null;
+    imageAltText?: string | null;
+    articleBlocks?: ArticleBlock[] | null;
+};

package/dist/components/Library/ArticleEditor/types.js

@@ -0,0 +1 @@
+export {};