@x33025/sveltely 0.1.10 → 0.1.12

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

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import TextEditor from '../TextEditor';
+	import type { BlockDraft } from './types.js';
+
+	let { block, onUpdate } = $props<{
+		block: BlockDraft;
+		onUpdate: (id: string, patch: Partial<BlockDraft>) => void;
+	}>();
+</script>
+
+<TextEditor
+	autosize
+	rows={6}
+	value={block.code ?? ''}
+	onInput={(event) =>
+		onUpdate(block.id, {
+			code: (event.currentTarget as HTMLTextAreaElement).value
+		})}
+	className="bg-zinc-950 px-4 py-4 font-mono text-sm leading-6 text-zinc-100"
+	placeholder="Code block"
+/>

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

@@ -0,0 +1,8 @@
+import type { BlockDraft } from './types.js';
+type $$ComponentProps = {
+    block: BlockDraft;
+    onUpdate: (id: string, patch: Partial<BlockDraft>) => void;
+};
+declare const ArticleBlockCode: import("svelte").Component<$$ComponentProps, {}, "">;
+type ArticleBlockCode = ReturnType<typeof ArticleBlockCode>;
+export default ArticleBlockCode;

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

@@ -0,0 +1,144 @@
+<script lang="ts">
+	import { GripVertical, Heading2, Heading3, List, ListOrdered, Type } from '@lucide/svelte';
+	import Dropdown from '../Dropdown';
+	import { articleBlockLabel, type BlockTextFormat } from './articleEditor.svelte.js';
+	import type { BlockDraft } from './types.js';
+
+	let {
+		block,
+		textFormat,
+		canChangeTextFormat,
+		onSelect,
+		onChangeTextFormat,
+		onDragStart,
+		onDragEnd
+	} = $props<{
+		block: BlockDraft;
+		textFormat: BlockTextFormat | null;
+		canChangeTextFormat: boolean;
+		onSelect: (id: string) => void;
+		onChangeTextFormat: (id: string, format: BlockTextFormat) => void;
+		onDragStart: (event: DragEvent, id: string) => void;
+		onDragEnd: () => void;
+	}>();
+
+	const blockTextFormatLabels: Record<BlockTextFormat, string> = {
+		paragraph: 'Text',
+		'heading-2': 'Heading 2',
+		'heading-3': 'Heading 3',
+		bullet_list: 'Bulleted list',
+		numbered_list: 'Numbered list'
+	};
+
+	const selectedLabel = () =>
+		textFormat ? blockTextFormatLabels[textFormat as BlockTextFormat] : articleBlockLabel(block);
+</script>
+
+<Dropdown
+	value={textFormat}
+	selectedLabel={selectedLabel()}
+	placement="bottom"
+	showCheck={true}
+	onValueChange={(value: BlockTextFormat | null) => {
+		if (typeof value !== 'string') return;
+		onChangeTextFormat(block.id, value);
+	}}
+>
+	{#snippet trigger(triggerState: any)}
+		<button
+			use:triggerState.useTrigger
+			type="button"
+			draggable="true"
+			aria-label="Block options and drag to reorder"
+			aria-expanded={triggerState.open}
+			aria-haspopup="dialog"
+			class="article-block-control-button"
+			onclick={(event: MouseEvent) => {
+				event.stopPropagation();
+				onSelect(block.id);
+				triggerState.toggle();
+			}}
+			onkeydown={(event: KeyboardEvent) => {
+				if (event.key === 'Enter' || event.key === ' ') {
+					event.preventDefault();
+					event.stopPropagation();
+					onSelect(block.id);
+					triggerState.toggle();
+				}
+			}}
+			ondragstart={(event: DragEvent) => onDragStart(event, block.id)}
+			ondragend={onDragEnd}
+		>
+			<GripVertical size={15} />
+		</button>
+	{/snippet}
+
+	<Dropdown.Section label="Text style">
+		<Dropdown.Item value={'paragraph' as BlockTextFormat} disabled={!canChangeTextFormat}>
+			<span class="article-block-control-menu-item">
+				<Type size={14} />
+				<span>Text</span>
+			</span>
+		</Dropdown.Item>
+		<Dropdown.Item value={'heading-2' as BlockTextFormat} disabled={!canChangeTextFormat}>
+			<span class="article-block-control-menu-item">
+				<Heading2 size={14} />
+				<span>Heading 2</span>
+			</span>
+		</Dropdown.Item>
+		<Dropdown.Item value={'heading-3' as BlockTextFormat} disabled={!canChangeTextFormat}>
+			<span class="article-block-control-menu-item">
+				<Heading3 size={14} />
+				<span>Heading 3</span>
+			</span>
+		</Dropdown.Item>
+		<Dropdown.Item value={'bullet_list' as BlockTextFormat} disabled={!canChangeTextFormat}>
+			<span class="article-block-control-menu-item">
+				<List size={14} />
+				<span>Bulleted list</span>
+			</span>
+		</Dropdown.Item>
+		<Dropdown.Item value={'numbered_list' as BlockTextFormat} disabled={!canChangeTextFormat}>
+			<span class="article-block-control-menu-item">
+				<ListOrdered size={14} />
+				<span>Numbered list</span>
+			</span>
+		</Dropdown.Item>
+	</Dropdown.Section>
+</Dropdown>
+
+<style>
+	.article-block-control-button {
+		display: flex;
+		width: 1.75rem;
+		height: 1.75rem;
+		cursor: grab;
+		align-items: center;
+		justify-content: center;
+		border: 0;
+		background: transparent;
+		color: #a1a1aa;
+		transition:
+			background-color 150ms,
+			color 150ms;
+	}
+
+	.article-block-control-button:hover {
+		background: #f5f5f4;
+		color: #3f3f46;
+	}
+
+	.article-block-control-button:active {
+		cursor: grabbing;
+	}
+
+	.article-block-control-menu-item {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.article-block-control-menu-item :global(svg) {
+		flex: 0 0 auto;
+	}
+</style>

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

@@ -0,0 +1,14 @@
+import { type BlockTextFormat } from './articleEditor.svelte.js';
+import type { BlockDraft } from './types.js';
+type $$ComponentProps = {
+    block: BlockDraft;
+    textFormat: BlockTextFormat | null;
+    canChangeTextFormat: boolean;
+    onSelect: (id: string) => void;
+    onChangeTextFormat: (id: string, format: BlockTextFormat) => void;
+    onDragStart: (event: DragEvent, id: string) => void;
+    onDragEnd: () => void;
+};
+declare const ArticleBlockDragControl: import("svelte").Component<$$ComponentProps, {}, "">;
+type ArticleBlockDragControl = ReturnType<typeof ArticleBlockDragControl>;
+export default ArticleBlockDragControl;

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

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import TextEditor from '../TextEditor';
+	import type { BlockDraft } from './types.js';
+
+	let { block, onUpdateItem } = $props<{
+		block: BlockDraft;
+		onUpdateItem: (
+			blockID: string,
+			index: number,
+			field: 'question' | 'answer',
+			value: string
+		) => void;
+	}>();
+</script>
+
+<div class="space-y-4">
+	{#each block.faqItems ?? [] as item, index}
+		<div class="border-b border-zinc-200/70 pb-4 last:border-b-0 last:pb-0">
+			<input
+				class="mb-2 w-full border-0 bg-transparent px-0 text-[17px] leading-7 font-semibold text-zinc-950 outline-none placeholder:text-zinc-300"
+				value={item.question}
+				oninput={(event) =>
+					onUpdateItem(
+						block.id,
+						index,
+						'question',
+						(event.currentTarget as HTMLInputElement).value
+					)}
+				placeholder="Question"
+			/>
+			<TextEditor
+				autosize
+				rows={1}
+				className="text-[15px] leading-7 text-zinc-700 placeholder:text-zinc-300"
+				value={item.answer}
+				onInput={(event) =>
+					onUpdateItem(
+						block.id,
+						index,
+						'answer',
+						(event.currentTarget as HTMLTextAreaElement).value
+					)}
+				placeholder="Answer"
+			/>
+		</div>
+	{/each}
+</div>

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

@@ -0,0 +1,8 @@
+import type { BlockDraft } from './types.js';
+type $$ComponentProps = {
+    block: BlockDraft;
+    onUpdateItem: (blockID: string, index: number, field: 'question' | 'answer', value: string) => void;
+};
+declare const ArticleBlockFAQ: import("svelte").Component<$$ComponentProps, {}, "">;
+type ArticleBlockFAQ = ReturnType<typeof ArticleBlockFAQ>;
+export default ArticleBlockFAQ;

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

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import TextEditor from '../TextEditor';
+	import type { BlockDraft } from './types.js';
+
+	let {
+		block,
+		onUpdate,
+		onCreateParagraphAfter,
+		onMergeBlockWithPrevious,
+		onConvertToList,
+		onRemoveBlock,
+		shouldFocus,
+		focusPosition,
+		onFocused
+	} = $props<{
+		block: BlockDraft;
+		onUpdate: (id: string, patch: Partial<BlockDraft>) => void;
+		onCreateParagraphAfter?: (id: string, text?: string, currentText?: string | null) => void;
+		onMergeBlockWithPrevious?: (id: string) => void;
+		onConvertToList?: (id: string, kind: 'bullet_list' | 'numbered_list') => void;
+		onRemoveBlock?: (id: string) => void;
+		shouldFocus?: boolean;
+		focusPosition?: number | null;
+		onFocused?: () => void;
+	}>();
+</script>
+
+<TextEditor
+	autosize
+	rows={1}
+	value={block.text ?? ''}
+	onInput={(event) =>
+		onUpdate(block.id, {
+			text: (event.currentTarget as HTMLTextAreaElement).value
+		})}
+	onKeyDown={(event) => {
+		const value = (event.currentTarget as HTMLTextAreaElement).value.trim();
+		if (event.key === ' ' && value === '-') {
+			event.preventDefault();
+			onConvertToList?.(block.id, 'bullet_list');
+			return;
+		}
+		if (event.key === ' ' && /^\d+\.$/.test(value)) {
+			event.preventDefault();
+			onConvertToList?.(block.id, 'numbered_list');
+			return;
+		}
+		if (event.key === 'Enter' && !event.shiftKey) {
+			event.preventDefault();
+			const textarea = event.currentTarget as HTMLTextAreaElement;
+			const text = textarea.value;
+			const before = text.slice(0, textarea.selectionStart);
+			const after = text.slice(textarea.selectionEnd);
+			if (!text.trim()) {
+				onRemoveBlock?.(block.id);
+				return;
+			}
+			onCreateParagraphAfter?.(block.id, after, before);
+		}
+		if (
+			event.key === 'Backspace' &&
+			!event.shiftKey &&
+			!event.metaKey &&
+			!event.ctrlKey &&
+			!event.altKey
+		) {
+			const textarea = event.currentTarget as HTMLTextAreaElement;
+			if (textarea.selectionStart === 0 && textarea.selectionEnd === 0) {
+				event.preventDefault();
+				onMergeBlockWithPrevious?.(block.id);
+			}
+		}
+	}}
+	{shouldFocus}
+	{focusPosition}
+	{onFocused}
+	className="text-[16px] leading-7 text-zinc-700 placeholder:text-zinc-300"
+	placeholder="Block content"
+/>

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

@@ -0,0 +1,15 @@
+import type { BlockDraft } from './types.js';
+type $$ComponentProps = {
+    block: BlockDraft;
+    onUpdate: (id: string, patch: Partial<BlockDraft>) => void;
+    onCreateParagraphAfter?: (id: string, text?: string, currentText?: string | null) => void;
+    onMergeBlockWithPrevious?: (id: string) => void;
+    onConvertToList?: (id: string, kind: 'bullet_list' | 'numbered_list') => void;
+    onRemoveBlock?: (id: string) => void;
+    shouldFocus?: boolean;
+    focusPosition?: number | null;
+    onFocused?: () => void;
+};
+declare const ArticleBlockFallback: import("svelte").Component<$$ComponentProps, {}, "">;
+type ArticleBlockFallback = ReturnType<typeof ArticleBlockFallback>;
+export default ArticleBlockFallback;

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

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import TextEditor from '../TextEditor';
+	import type { BlockDraft } from './types.js';
+
+	let {
+		block,
+		onUpdate,
+		onCreateParagraphAfter,
+		onMergeBlockWithPrevious,
+		onRemoveBlock,
+		shouldFocus,
+		focusPosition,
+		onFocused
+	} = $props<{
+		block: BlockDraft;
+		onUpdate: (id: string, patch: Partial<BlockDraft>) => void;
+		onCreateParagraphAfter?: (id: string, text?: string, currentText?: string | null) => void;
+		onMergeBlockWithPrevious?: (id: string) => void;
+		onRemoveBlock?: (id: string) => void;
+		shouldFocus?: boolean;
+		focusPosition?: number | null;
+		onFocused?: () => void;
+	}>();
+</script>
+
+<TextEditor
+	autosize
+	rows={1}
+	value={block.text ?? ''}
+	onInput={(event) =>
+		onUpdate(block.id, {
+			text: (event.currentTarget as HTMLTextAreaElement).value
+		})}
+	onKeyDown={(event) => {
+		const value = (event.currentTarget as HTMLTextAreaElement).value.trim();
+		if (event.key === 'Enter' && !event.shiftKey) {
+			event.preventDefault();
+			const textarea = event.currentTarget as HTMLTextAreaElement;
+			const text = textarea.value;
+			const before = text.slice(0, textarea.selectionStart);
+			const after = text.slice(textarea.selectionEnd);
+			if (!text.trim()) {
+				onRemoveBlock?.(block.id);
+				return;
+			}
+			onCreateParagraphAfter?.(block.id, after, before);
+		}
+		if (
+			event.key === 'Backspace' &&
+			!event.shiftKey &&
+			!event.metaKey &&
+			!event.ctrlKey &&
+			!event.altKey
+		) {
+			const textarea = event.currentTarget as HTMLTextAreaElement;
+			if (textarea.selectionStart === 0 && textarea.selectionEnd === 0) {
+				event.preventDefault();
+				onMergeBlockWithPrevious?.(block.id);
+			}
+		}
+	}}
+	{shouldFocus}
+	{focusPosition}
+	{onFocused}
+	className={`placeholder:text-zinc-300 ${
+		Number(block.level ?? 2) <= 1
+			? 'text-3xl font-semibold tracking-[-0.03em]'
+			: Number(block.level ?? 2) === 2
+				? 'text-2xl font-semibold tracking-[-0.025em]'
+				: 'text-xl font-semibold'
+	}`}
+	placeholder="Heading"
+/>

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

@@ -0,0 +1,14 @@
+import type { BlockDraft } from './types.js';
+type $$ComponentProps = {
+    block: BlockDraft;
+    onUpdate: (id: string, patch: Partial<BlockDraft>) => void;
+    onCreateParagraphAfter?: (id: string, text?: string, currentText?: string | null) => void;
+    onMergeBlockWithPrevious?: (id: string) => void;
+    onRemoveBlock?: (id: string) => void;
+    shouldFocus?: boolean;
+    focusPosition?: number | null;
+    onFocused?: () => void;
+};
+declare const ArticleBlockHeading: import("svelte").Component<$$ComponentProps, {}, "">;
+type ArticleBlockHeading = ReturnType<typeof ArticleBlockHeading>;
+export default ArticleBlockHeading;

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

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import ArticleImagePreview from './ArticleImagePreview.svelte';
+	import TextEditor from '../TextEditor';
+	import type { BlockDraft } from './types.js';
+
+	let { block, titleFallback, onUpdate } = $props<{
+		block: BlockDraft;
+		titleFallback: string;
+		onUpdate: (id: string, patch: Partial<BlockDraft>) => void;
+	}>();
+</script>
+
+<div class="article-block-image">
+	<ArticleImagePreview src={block.imageURL} alt={block.imageAlt ?? titleFallback} />
+	<div>
+		<TextEditor
+			autosize
+			rows={1}
+			className="article-block-image-description"
+			value={block.imageAlt ?? ''}
+			onInput={(event) =>
+				onUpdate(block.id, {
+					imageAlt: (event.currentTarget as HTMLTextAreaElement).value
+				})}
+			placeholder="Alt text"
+		/>
+	</div>
+</div>
+
+<style>
+	.article-block-image {
+		display: grid;
+		gap: 1rem;
+	}
+
+	:global(.article-block-image-description) {
+		border: 0;
+		background: transparent;
+		padding: 0;
+		color: #3f3f46;
+		font-size: 0.875rem;
+		line-height: 1.5rem;
+	}
+
+	:global(.article-block-image-description::placeholder) {
+		color: #d4d4d8;
+	}
+</style>

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

@@ -0,0 +1,9 @@
+import type { BlockDraft } from './types.js';
+type $$ComponentProps = {
+    block: BlockDraft;
+    titleFallback: string;
+    onUpdate: (id: string, patch: Partial<BlockDraft>) => void;
+};
+declare const ArticleBlockImage: import("svelte").Component<$$ComponentProps, {}, "">;
+type ArticleBlockImage = ReturnType<typeof ArticleBlockImage>;
+export default ArticleBlockImage;

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

@@ -0,0 +1,120 @@
+<script lang="ts">
+	import { ImageIcon, List, ListOrdered, Plus, Table2, Type } from '@lucide/svelte';
+	import Dropdown from '../Dropdown';
+	import type { BlockInsertKind } from './articleEditor.svelte.js';
+
+	let { blockID, onSelect, onInsertBlockAfter } = $props<{
+		blockID: string;
+		onSelect: (id: string) => void;
+		onInsertBlockAfter: (id: string, kind: BlockInsertKind) => void;
+	}>();
+
+	const insertBlockLabels: Record<BlockInsertKind, string> = {
+		paragraph: 'Paragraph',
+		image: 'Image',
+		table: 'Table',
+		bullet_list: 'Bulleted list',
+		numbered_list: 'Numbered list'
+	};
+</script>
+
+<Dropdown
+	value={null}
+	selectedLabel="Add block"
+	placement="bottom"
+	showCheck={false}
+	onValueChange={(value: BlockInsertKind | null) => {
+		if (typeof value !== 'string') return;
+		onInsertBlockAfter(blockID, value);
+	}}
+>
+	{#snippet trigger(triggerState: any)}
+		<button
+			use:triggerState.useTrigger
+			type="button"
+			aria-label="Add block after"
+			aria-expanded={triggerState.open}
+			aria-haspopup="dialog"
+			class="article-block-control-button"
+			onclick={(event: MouseEvent) => {
+				event.stopPropagation();
+				onSelect(blockID);
+				triggerState.toggle();
+			}}
+			onkeydown={(event: KeyboardEvent) => {
+				if (event.key === 'Enter' || event.key === ' ') {
+					event.preventDefault();
+					event.stopPropagation();
+					onSelect(blockID);
+					triggerState.toggle();
+				}
+			}}
+		>
+			<Plus size={15} />
+		</button>
+	{/snippet}
+
+	<Dropdown.Section label="Insert block">
+		<Dropdown.Item value={'paragraph' as BlockInsertKind}>
+			<span class="article-block-control-menu-item">
+				<Type size={14} />
+				<span>{insertBlockLabels.paragraph}</span>
+			</span>
+		</Dropdown.Item>
+		<Dropdown.Item value={'image' as BlockInsertKind}>
+			<span class="article-block-control-menu-item">
+				<ImageIcon size={14} />
+				<span>{insertBlockLabels.image}</span>
+			</span>
+		</Dropdown.Item>
+		<Dropdown.Item value={'table' as BlockInsertKind}>
+			<span class="article-block-control-menu-item">
+				<Table2 size={14} />
+				<span>{insertBlockLabels.table}</span>
+			</span>
+		</Dropdown.Item>
+		<Dropdown.Item value={'bullet_list' as BlockInsertKind}>
+			<span class="article-block-control-menu-item">
+				<List size={14} />
+				<span>{insertBlockLabels.bullet_list}</span>
+			</span>
+		</Dropdown.Item>
+		<Dropdown.Item value={'numbered_list' as BlockInsertKind}>
+			<span class="article-block-control-menu-item">
+				<ListOrdered size={14} />
+				<span>{insertBlockLabels.numbered_list}</span>
+			</span>
+		</Dropdown.Item>
+	</Dropdown.Section>
+</Dropdown>
+
+<style>
+	.article-block-control-button {
+		display: flex;
+		width: 1.75rem;
+		height: 1.75rem;
+		align-items: center;
+		justify-content: center;
+		border: 0;
+		background: transparent;
+		color: #a1a1aa;
+		transition:
+			background-color 150ms,
+			color 150ms;
+	}
+
+	.article-block-control-button:hover {
+		background: #f5f5f4;
+		color: #3f3f46;
+	}
+
+	.article-block-control-menu-item {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.article-block-control-menu-item :global(svg) {
+		flex: 0 0 auto;
+	}
+</style>

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

@@ -0,0 +1,9 @@
+import type { BlockInsertKind } from './articleEditor.svelte.js';
+type $$ComponentProps = {
+    blockID: string;
+    onSelect: (id: string) => void;
+    onInsertBlockAfter: (id: string, kind: BlockInsertKind) => void;
+};
+declare const ArticleBlockInsertControl: import("svelte").Component<$$ComponentProps, {}, "">;
+type ArticleBlockInsertControl = ReturnType<typeof ArticleBlockInsertControl>;
+export default ArticleBlockInsertControl;