@x33025/sveltely 0.1.9 → 0.1.11

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

@@ -0,0 +1,114 @@
+<script lang="ts">
+	import TextEditor from '../TextEditor';
+	import type { BlockDraft } from './types.js';
+
+	let {
+		block,
+		onUpdateItem,
+		onInsertItemAfter,
+		onMergeListItemWithPrevious,
+		onCreateParagraphAfter,
+		onRemoveListItem,
+		focusItemIndex,
+		focusPosition,
+		onFocused
+	} = $props<{
+		block: BlockDraft;
+		onUpdateItem: (blockID: string, index: number, value: string) => void;
+		onInsertItemAfter?: (
+			blockID: string,
+			index: number,
+			text?: string,
+			currentText?: string | null
+		) => void;
+		onMergeListItemWithPrevious?: (blockID: string, index: number) => void;
+		onCreateParagraphAfter?: (id: string, text?: string, currentText?: string | null) => void;
+		onRemoveListItem?: (blockID: string, index: number) => void;
+		focusItemIndex?: number | null;
+		focusPosition?: number | null;
+		onFocused?: () => void;
+	}>();
+
+	const handleItemKeyDown = (event: KeyboardEvent, index: number) => {
+		const textarea = event.currentTarget as HTMLTextAreaElement;
+
+		if (event.key === 'Enter' && !event.shiftKey) {
+			event.preventDefault();
+			const text = textarea.value;
+			const before = text.slice(0, textarea.selectionStart);
+			const after = text.slice(textarea.selectionEnd);
+			if (!text.trim()) {
+				onRemoveListItem?.(block.id, index);
+				return;
+			}
+			onInsertItemAfter?.(block.id, index, after, before);
+		}
+
+		if (
+			event.key === 'Backspace' &&
+			!event.shiftKey &&
+			!event.metaKey &&
+			!event.ctrlKey &&
+			!event.altKey &&
+			textarea.selectionStart === 0 &&
+			textarea.selectionEnd === 0
+		) {
+			event.preventDefault();
+			onMergeListItemWithPrevious?.(block.id, index);
+		}
+	};
+</script>
+
+{#if block.type === 'numbered_list'}
+	<ol
+		class="article-editor-list list-decimal space-y-1 py-1 pl-6 marker:text-[15px] marker:leading-7 marker:font-medium marker:text-zinc-500 marker:tabular-nums"
+	>
+		{#each block.items ?? [] as item, index}
+			<li class="article-editor-list-item pl-2">
+				<TextEditor
+					autosize
+					rows={1}
+					value={item}
+					onInput={(event) =>
+						onUpdateItem(block.id, index, (event.currentTarget as HTMLTextAreaElement).value)}
+					onKeyDown={(event) => handleItemKeyDown(event, index)}
+					shouldFocus={focusItemIndex === index}
+					focusPosition={focusItemIndex === index ? focusPosition : null}
+					{onFocused}
+					className="text-[17px] leading-7 text-zinc-700 placeholder:text-zinc-300"
+					placeholder="List item"
+				/>
+			</li>
+		{/each}
+	</ol>
+{:else}
+	<ul
+		class="article-editor-list list-disc space-y-1 py-1 pl-6 marker:text-[15px] marker:leading-7 marker:text-zinc-500"
+	>
+		{#each block.items ?? [] as item, index}
+			<li class="article-editor-list-item pl-2">
+				<TextEditor
+					autosize
+					rows={1}
+					value={item}
+					onInput={(event) =>
+						onUpdateItem(block.id, index, (event.currentTarget as HTMLTextAreaElement).value)}
+					onKeyDown={(event) => handleItemKeyDown(event, index)}
+					shouldFocus={focusItemIndex === index}
+					focusPosition={focusItemIndex === index ? focusPosition : null}
+					{onFocused}
+					className="text-[17px] leading-7 text-zinc-700 placeholder:text-zinc-300"
+					placeholder="List item"
+				/>
+			</li>
+		{/each}
+	</ul>
+{/if}
+
+<style>
+	.article-editor-list-item :global(textarea) {
+		display: inline-block;
+		width: 100%;
+		vertical-align: top;
+	}
+</style>

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

@@ -0,0 +1,15 @@
+import type { BlockDraft } from './types.js';
+type $$ComponentProps = {
+    block: BlockDraft;
+    onUpdateItem: (blockID: string, index: number, value: string) => void;
+    onInsertItemAfter?: (blockID: string, index: number, text?: string, currentText?: string | null) => void;
+    onMergeListItemWithPrevious?: (blockID: string, index: number) => void;
+    onCreateParagraphAfter?: (id: string, text?: string, currentText?: string | null) => void;
+    onRemoveListItem?: (blockID: string, index: number) => void;
+    focusItemIndex?: number | null;
+    focusPosition?: number | null;
+    onFocused?: () => void;
+};
+declare const ArticleBlockList: import("svelte").Component<$$ComponentProps, {}, "">;
+type ArticleBlockList = ReturnType<typeof ArticleBlockList>;
+export default ArticleBlockList;

package/dist/components/Library/ArticleEditor/ArticleBlockParagraph.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-[17px] leading-8 text-zinc-700 placeholder:text-zinc-300"
+	placeholder="Type something thoughtful..."
+/>

package/dist/components/Library/ArticleEditor/ArticleBlockParagraph.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 ArticleBlockParagraph: import("svelte").Component<$$ComponentProps, {}, "">;
+type ArticleBlockParagraph = ReturnType<typeof ArticleBlockParagraph>;
+export default ArticleBlockParagraph;

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

@@ -0,0 +1,127 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { BlockInsertKind, BlockTextFormat } from './articleEditor.svelte.js';
+	import ArticleBlockDragControl from './ArticleBlockDragControl.svelte';
+	import ArticleBlockInsertControl from './ArticleBlockInsertControl.svelte';
+	import type { BlockDraft } from './types.js';
+
+	let {
+		block,
+		draggedBlockID,
+		dropPlacement,
+		textFormat,
+		canChangeTextFormat,
+		onSelect,
+		onChangeTextFormat,
+		onInsertBlockAfter,
+		onDragOver,
+		onDragLeave,
+		onDrop,
+		onDragStart,
+		onDragEnd,
+		children
+	} = $props<{
+		block: BlockDraft;
+		draggedBlockID: string | null;
+		dropPlacement: 'before' | 'after' | null;
+		textFormat: BlockTextFormat | null;
+		canChangeTextFormat: boolean;
+		onSelect: (id: string) => void;
+		onChangeTextFormat: (id: string, format: BlockTextFormat) => void;
+		onInsertBlockAfter: (id: string, kind: BlockInsertKind) => void;
+		onDragOver: (event: DragEvent, id: string) => void;
+		onDragLeave: (event: DragEvent) => void;
+		onDrop: (event: DragEvent, id: string) => void;
+		onDragStart: (event: DragEvent, id: string) => void;
+		onDragEnd: () => void;
+		children?: Snippet;
+	}>();
+
+	const shouldHandleBlockKey = (event: KeyboardEvent) => event.currentTarget === event.target;
+</script>
+
+<div
+	data-block-row={block.id}
+	role="button"
+	tabindex="0"
+	class="article-block-shell"
+	class:article-block-shell-dragging={draggedBlockID === block.id}
+	class:article-block-shell-drop-before={dropPlacement === 'before'}
+	class:article-block-shell-drop-after={dropPlacement === 'after'}
+	onclick={() => onSelect(block.id)}
+	onkeydown={(event: KeyboardEvent) => {
+		if (!shouldHandleBlockKey(event)) return;
+		if (event.key === 'Enter' || event.key === ' ') {
+			event.preventDefault();
+			onSelect(block.id);
+		}
+	}}
+	ondragover={(event: DragEvent) => onDragOver(event, block.id)}
+	ondragleave={onDragLeave}
+	ondrop={(event: DragEvent) => onDrop(event, block.id)}
+>
+	<div class="article-block-shell-grid">
+		<div class="article-block-shell-handle">
+			<ArticleBlockInsertControl blockID={block.id} {onSelect} {onInsertBlockAfter} />
+			<ArticleBlockDragControl
+				{block}
+				{textFormat}
+				{canChangeTextFormat}
+				{onSelect}
+				{onChangeTextFormat}
+				{onDragStart}
+				{onDragEnd}
+			/>
+		</div>
+
+		<div class="article-block-shell-content">
+			{#if children}
+				{@render children()}
+			{/if}
+		</div>
+	</div>
+</div>
+
+<style>
+	.article-block-shell {
+		border-block: 2px solid transparent;
+		transition: opacity 150ms;
+	}
+
+	.article-block-shell-dragging {
+		opacity: 0.45;
+	}
+
+	.article-block-shell-drop-before {
+		border-top-color: #18181b;
+	}
+
+	.article-block-shell-drop-after {
+		border-bottom-color: #18181b;
+	}
+
+	.article-block-shell-grid {
+		display: grid;
+		grid-template-columns: 72px minmax(0, 1fr);
+		padding: 0.25rem;
+	}
+
+	.article-block-shell-handle {
+		display: flex;
+		justify-content: center;
+		gap: 0.25rem;
+		padding-block: 0.75rem;
+		opacity: 0;
+		transition: opacity 150ms;
+	}
+
+	.article-block-shell:hover .article-block-shell-handle,
+	.article-block-shell:focus-within .article-block-shell-handle {
+		opacity: 1;
+	}
+
+	.article-block-shell-content {
+		min-width: 0;
+		padding: 0.75rem 1rem;
+	}
+</style>

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

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+import type { BlockInsertKind, BlockTextFormat } from './articleEditor.svelte.js';
+import type { BlockDraft } from './types.js';
+type $$ComponentProps = {
+    block: BlockDraft;
+    draggedBlockID: string | null;
+    dropPlacement: 'before' | 'after' | null;
+    textFormat: BlockTextFormat | null;
+    canChangeTextFormat: boolean;
+    onSelect: (id: string) => void;
+    onChangeTextFormat: (id: string, format: BlockTextFormat) => void;
+    onInsertBlockAfter: (id: string, kind: BlockInsertKind) => void;
+    onDragOver: (event: DragEvent, id: string) => void;
+    onDragLeave: (event: DragEvent) => void;
+    onDrop: (event: DragEvent, id: string) => void;
+    onDragStart: (event: DragEvent, id: string) => void;
+    onDragEnd: () => void;
+    children?: Snippet;
+};
+declare const ArticleBlockShell: import("svelte").Component<$$ComponentProps, {}, "">;
+type ArticleBlockShell = ReturnType<typeof ArticleBlockShell>;
+export default ArticleBlockShell;

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

@@ -0,0 +1,274 @@
+<script lang="ts">
+	import { Plus, Trash2 } from '@lucide/svelte';
+	import type { BlockDraft } from './types.js';
+
+	let { block, onUpdateHeader, onUpdateCell, onAddColumn, onAddRow, onRemoveColumn, onRemoveRow } =
+		$props<{
+			block: BlockDraft;
+			onUpdateHeader: (blockID: string, cellIndex: number, value: string) => void;
+			onUpdateCell: (blockID: string, rowIndex: number, cellIndex: number, value: string) => void;
+			onAddColumn: (blockID: string) => void;
+			onAddRow: (blockID: string) => void;
+			onRemoveColumn: (blockID: string, columnIndex: number) => void;
+			onRemoveRow: (blockID: string, rowIndex: number) => void;
+		}>();
+
+	const columnCount = $derived(
+		Math.max((block.columns ?? []).length, block.rows?.[0]?.length ?? 0, 1)
+	);
+	const rowCount = $derived(Math.max((block.rows ?? []).length, 1));
+
+	const columnHasContent = (columnIndex: number) =>
+		Boolean(block.columns?.[columnIndex]?.trim()) ||
+		Boolean(block.rows?.some((row: string[]) => row[columnIndex]?.trim()));
+
+	const rowHasContent = (rowIndex: number) =>
+		Boolean(block.rows?.[rowIndex]?.some((cell: string) => cell.trim()));
+
+	const confirmDestructiveChange = (message: string) =>
+		typeof window === 'undefined' || window.confirm(message);
+
+	const removeColumn = (columnIndex: number) => {
+		if (columnCount <= 1) return;
+		if (
+			columnHasContent(columnIndex) &&
+			!confirmDestructiveChange('Remove this column and its content?')
+		) {
+			return;
+		}
+		onRemoveColumn(block.id, columnIndex);
+	};
+
+	const removeRow = (rowIndex: number) => {
+		if (rowCount <= 1) return;
+		if (rowHasContent(rowIndex) && !confirmDestructiveChange('Remove this row and its content?')) {
+			return;
+		}
+		onRemoveRow(block.id, rowIndex);
+	};
+</script>
+
+<div class="article-block-table-shell">
+	<div class="article-block-table-scroll">
+		<table class="article-block-table">
+			{#if (block.columns ?? []).length > 0}
+				<thead class="article-block-table-head">
+					<tr>
+						{#each block.columns ?? [] as column, columnIndex}
+							<th class="article-block-table-header">
+								<input
+									class="article-block-table-header-input"
+									value={column}
+									oninput={(event) =>
+										onUpdateHeader(
+											block.id,
+											columnIndex,
+											(event.currentTarget as HTMLInputElement).value
+										)}
+								/>
+								<button
+									type="button"
+									aria-label="Remove column"
+									disabled={columnCount <= 1}
+									class="article-block-table-remove-column"
+									onclick={() => removeColumn(columnIndex)}
+								>
+									<Trash2 size={14} />
+								</button>
+							</th>
+						{/each}
+					</tr>
+				</thead>
+			{/if}
+			<tbody>
+				{#each block.rows ?? [] as row, rowIndex}
+					<tr class="article-block-table-row">
+						{#each row as cell, cellIndex}
+							<td class="article-block-table-cell">
+								<textarea
+									rows="2"
+									class="article-block-table-cell-input"
+									value={cell}
+									oninput={(event) =>
+										onUpdateCell(
+											block.id,
+											rowIndex,
+											cellIndex,
+											(event.currentTarget as HTMLTextAreaElement).value
+										)}
+								></textarea>
+							</td>
+						{/each}
+						<td class="article-block-table-row-control">
+							<button
+								type="button"
+								aria-label="Remove row"
+								disabled={rowCount <= 1}
+								class="article-block-table-remove-row"
+								onclick={() => removeRow(rowIndex)}
+							>
+								<Trash2 size={14} />
+							</button>
+						</td>
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+	</div>
+	<button
+		type="button"
+		aria-label="Add column"
+		class="article-block-table-add-column"
+		onclick={() => onAddColumn(block.id)}
+	>
+		<Plus size={16} />
+	</button>
+	<button
+		type="button"
+		aria-label="Add row"
+		class="article-block-table-add-row"
+		onclick={() => onAddRow(block.id)}
+	>
+		<Plus size={16} />
+	</button>
+	<div class="article-block-table-corner"></div>
+</div>
+
+<style>
+	.article-block-table-shell {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) 2.25rem;
+		grid-template-rows: auto 2.25rem;
+	}
+
+	.article-block-table-scroll {
+		overflow-x: auto;
+		border: 1px solid rgba(0, 0, 0, 0.08);
+	}
+
+	.article-block-table {
+		min-width: 100%;
+		border-collapse: collapse;
+		text-align: left;
+		font-size: 0.875rem;
+	}
+
+	.article-block-table-head {
+		background: #fafaf9;
+	}
+
+	.article-block-table-header {
+		position: relative;
+		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+		padding: 0.75rem;
+	}
+
+	.article-block-table-header-input {
+		width: 100%;
+		border: 0;
+		background: transparent;
+		padding-right: 2rem;
+		font-weight: 600;
+		outline: none;
+	}
+
+	.article-block-table-row {
+		border-top: 1px solid rgba(0, 0, 0, 0.08);
+	}
+
+	.article-block-table-cell {
+		padding: 0.75rem;
+		vertical-align: top;
+	}
+
+	.article-block-table-cell-input {
+		width: 100%;
+		resize: none;
+		border: 0;
+		background: transparent;
+		outline: none;
+	}
+
+	.article-block-table-row-control {
+		width: 2.25rem;
+		padding: 0.5rem 0.25rem;
+		vertical-align: middle;
+	}
+
+	.article-block-table-remove-column,
+	.article-block-table-remove-row,
+	.article-block-table-add-column,
+	.article-block-table-add-row {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: 0;
+		background: transparent;
+		color: #a1a1aa;
+		transition:
+			background-color 150ms,
+			color 150ms,
+			opacity 150ms;
+	}
+
+	.article-block-table-remove-column {
+		position: absolute;
+		top: 50%;
+		right: 0.5rem;
+		width: 1.5rem;
+		height: 1.5rem;
+		transform: translateY(-50%);
+		opacity: 0;
+	}
+
+	.article-block-table-remove-row {
+		width: 1.75rem;
+		height: 1.75rem;
+		opacity: 0;
+	}
+
+	.article-block-table-header:hover .article-block-table-remove-column,
+	.article-block-table-remove-column:focus,
+	.article-block-table-row:hover .article-block-table-remove-row,
+	.article-block-table-remove-row:focus {
+		opacity: 1;
+	}
+
+	.article-block-table-remove-column:hover,
+	.article-block-table-remove-row:hover {
+		background: #fef2f2;
+		color: #dc2626;
+	}
+
+	.article-block-table-remove-column:disabled,
+	.article-block-table-remove-row:disabled {
+		pointer-events: none;
+		opacity: 0;
+	}
+
+	.article-block-table-add-column,
+	.article-block-table-add-row {
+		border-color: rgba(0, 0, 0, 0.08);
+		border-style: solid;
+	}
+
+	.article-block-table-add-column {
+		border-width: 1px 1px 1px 0;
+	}
+
+	.article-block-table-add-row {
+		border-width: 0 1px 1px 1px;
+	}
+
+	.article-block-table-add-column:hover,
+	.article-block-table-add-row:hover {
+		background: #f5f5f4;
+		color: #3f3f46;
+	}
+
+	.article-block-table-corner {
+		border-right: 1px solid rgba(0, 0, 0, 0.08);
+		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+		background: rgba(250, 250, 249, 0.5);
+	}
+</style>

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

@@ -0,0 +1,13 @@
+import type { BlockDraft } from './types.js';
+type $$ComponentProps = {
+    block: BlockDraft;
+    onUpdateHeader: (blockID: string, cellIndex: number, value: string) => void;
+    onUpdateCell: (blockID: string, rowIndex: number, cellIndex: number, value: string) => void;
+    onAddColumn: (blockID: string) => void;
+    onAddRow: (blockID: string) => void;
+    onRemoveColumn: (blockID: string, columnIndex: number) => void;
+    onRemoveRow: (blockID: string, rowIndex: number) => void;
+};
+declare const ArticleBlockTable: import("svelte").Component<$$ComponentProps, {}, "">;
+type ArticleBlockTable = ReturnType<typeof ArticleBlockTable>;
+export default ArticleBlockTable;