svelte-rtf-editor 0.1.0

package/dist/components/InkEditor.svelte.d.ts

@@ -0,0 +1,36 @@
+interface ChangePayload {
+    html: string;
+    text: string;
+    wordCount: number;
+    charCount: number;
+}
+interface Props {
+    content?: string;
+    placeholder?: string;
+    autosave?: boolean;
+    storageKey?: string;
+    showToolbar?: boolean;
+    showStatusBar?: boolean;
+    minHeight?: string;
+    readonly?: boolean;
+    onchange?: (payload: ChangePayload) => void;
+    onsave?: (payload: {
+        html: string;
+    }) => void;
+    onimport?: (payload: {
+        html: string;
+    }) => void;
+}
+declare const InkEditor: import("svelte").Component<Props, {
+    getHTML: () => string;
+    getText: () => string;
+    setHTML: (html: string) => void;
+    getMarkdown: () => string;
+    getRTF: () => string;
+    clear: () => void;
+    focus: () => void;
+    exportFile: (format?: string) => void;
+    importRtf: () => void;
+}, "">;
+type InkEditor = ReturnType<typeof InkEditor>;
+export default InkEditor;

package/dist/components/Modal.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		open?: boolean;
+		title?: string;
+		onclose?: () => void;
+		children: Snippet;
+		actions?: Snippet;
+	}
+
+	let { open = false, title = '', onclose, children, actions }: Props = $props();
+
+	function handleOverlayClick(e: MouseEvent) {
+		if (e.target === e.currentTarget) onclose?.();
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') onclose?.();
+	}
+</script>
+
+<svelte:window onkeydown={open ? handleKeydown : undefined} />
+
+{#if open}
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class="modal-overlay" onclick={handleOverlayClick}>
+		<div class="modal">
+			<h3>{title}</h3>
+			{@render children()}
+			{#if actions}
+				<div class="modal-actions">
+					{@render actions()}
+				</div>
+			{/if}
+		</div>
+	</div>
+{/if}
+
+<style>
+	.modal-overlay {
+		position: fixed;
+		inset: 0;
+		background: rgba(44, 37, 32, 0.3);
+		backdrop-filter: blur(4px);
+		z-index: 200;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		animation: fadeOverlay 0.15s ease-out;
+	}
+
+	@keyframes fadeOverlay {
+		from { opacity: 0; }
+		to { opacity: 1; }
+	}
+
+	.modal {
+		background: white;
+		border-radius: var(--radius);
+		padding: 28px;
+		width: 420px;
+		max-width: 90vw;
+		box-shadow: var(--shadow-lg);
+		animation: slideUp 0.2s ease-out;
+	}
+
+	@keyframes slideUp {
+		from { opacity: 0; transform: translateY(12px); }
+		to { opacity: 1; transform: translateY(0); }
+	}
+
+	.modal h3 {
+		font-family: 'Instrument Serif', serif;
+		font-size: 22px;
+		margin-bottom: 16px;
+		color: var(--ink);
+	}
+
+	.modal :global(input[type='text']),
+	.modal :global(input[type='url']) {
+		width: 100%;
+		padding: 10px 14px;
+		border: 1px solid var(--border);
+		border-radius: var(--radius-sm);
+		font-family: 'DM Sans', sans-serif;
+		font-size: 14px;
+		margin-bottom: 12px;
+		outline: none;
+		transition: border-color var(--transition);
+	}
+
+	.modal :global(input:focus) {
+		border-color: var(--accent);
+	}
+
+	.modal-actions {
+		display: flex;
+		gap: 8px;
+		justify-content: flex-end;
+		margin-top: 8px;
+	}
+</style>

package/dist/components/Modal.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    open?: boolean;
+    title?: string;
+    onclose?: () => void;
+    children: Snippet;
+    actions?: Snippet;
+}
+declare const Modal: import("svelte").Component<Props, {}, "">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

package/dist/components/Toolbar.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+	import ToolbarButton from './ToolbarButton.svelte';
+	import ColorPicker from './ColorPicker.svelte';
+
+	interface Props {
+		formatState?: Record<string, boolean>;
+		blockType?: string;
+		onexec?: (cmd: string, value?: string | null) => void;
+		onblock?: (tag: string) => void;
+		oninsertlink?: () => void;
+		oninsertimage?: () => void;
+	}
+
+	let {
+		formatState = {},
+		blockType = 'p',
+		onexec,
+		onblock,
+		oninsertlink,
+		oninsertimage
+	}: Props = $props();
+
+	function exec(cmd: string, value: string | null = null) {
+		onexec?.(cmd, value);
+	}
+</script>
+
+<div class="toolbar">
+	<!-- Block type -->
+	<div class="toolbar-group">
+		<select
+			class="tb-select"
+			value={blockType}
+			onchange={(e) => onblock?.((e.target as HTMLSelectElement).value)}
+		>
+			<option value="p">Paragraph</option>
+			<option value="h1">Heading 1</option>
+			<option value="h2">Heading 2</option>
+			<option value="h3">Heading 3</option>
+			<option value="blockquote">Quote</option>
+			<option value="pre">Code Block</option>
+		</select>
+	</div>
+
+	<div class="toolbar-divider"></div>
+
+	<!-- Inline formatting -->
+	<div class="toolbar-group">
+		<ToolbarButton active={formatState.bold} title="Bold (Ctrl+B)" onclick={() => exec('bold')}>
+			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/><path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/></svg>
+		</ToolbarButton>
+		<ToolbarButton active={formatState.italic} title="Italic (Ctrl+I)" onclick={() => exec('italic')}>
+			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/><line x1="15" y1="4" x2="9" y2="20"/></svg>
+		</ToolbarButton>
+		<ToolbarButton active={formatState.underline} title="Underline (Ctrl+U)" onclick={() => exec('underline')}>
+			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3"/><line x1="4" y1="21" x2="20" y2="21"/></svg>
+		</ToolbarButton>
+		<ToolbarButton active={formatState.strikeThrough} title="Strikethrough" onclick={() => exec('strikeThrough')}>
+			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M16 4c-.5-1.5-2.5-3-5-3-3 0-5 2-5 4.5 0 2 1 3.5 5 5"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M8 20c.5 1.5 2.5 3 5 3 3 0 5-2 5-4.5 0-1.5-.5-2.5-2-3.5"/></svg>
+		</ToolbarButton>
+	</div>
+
+	<div class="toolbar-divider"></div>
+
+	<!-- Colors -->
+	<div class="toolbar-group">
+		<ColorPicker value="#2C2520" title="Text color" onchange={(c) => exec('foreColor', c)} />
+		<ColorPicker value="#FFFBCC" title="Highlight" onchange={(c) => exec('hiliteColor', c)} />
+	</div>
+
+	<div class="toolbar-divider"></div>
+
+	<!-- Lists -->
+	<div class="toolbar-group">
+		<ToolbarButton title="Bullet list" onclick={() => exec('insertUnorderedList')}>
+			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="9" y1="6" x2="20" y2="6"/><line x1="9" y1="12" x2="20" y2="12"/><line x1="9" y1="18" x2="20" y2="18"/><circle cx="5" cy="6" r="1.5" fill="currentColor"/><circle cx="5" cy="12" r="1.5" fill="currentColor"/><circle cx="5" cy="18" r="1.5" fill="currentColor"/></svg>
+		</ToolbarButton>
+		<ToolbarButton title="Numbered list" onclick={() => exec('insertOrderedList')}>
+			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="10" y1="6" x2="20" y2="6"/><line x1="10" y1="12" x2="20" y2="12"/><line x1="10" y1="18" x2="20" y2="18"/><text x="3" y="8" font-size="8" fill="currentColor" stroke="none" font-family="sans-serif">1</text><text x="3" y="14" font-size="8" fill="currentColor" stroke="none" font-family="sans-serif">2</text><text x="3" y="20" font-size="8" fill="currentColor" stroke="none" font-family="sans-serif">3</text></svg>
+		</ToolbarButton>
+	</div>
+
+	<div class="toolbar-divider"></div>
+
+	<!-- Alignment -->
+	<div class="toolbar-group">
+		<ToolbarButton title="Align left" onclick={() => exec('justifyLeft')}>
+			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="15" y2="12"/><line x1="3" y1="18" x2="18" y2="18"/></svg>
+		</ToolbarButton>
+		<ToolbarButton title="Align center" onclick={() => exec('justifyCenter')}>
+			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="6" y1="12" x2="18" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/></svg>
+		</ToolbarButton>
+		<ToolbarButton title="Align right" onclick={() => exec('justifyRight')}>
+			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="9" y1="12" x2="21" y2="12"/><line x1="6" y1="18" x2="21" y2="18"/></svg>
+		</ToolbarButton>
+	</div>
+
+	<div class="toolbar-divider"></div>
+
+	<!-- Insert -->
+	<div class="toolbar-group">
+		<ToolbarButton title="Insert link (Ctrl+K)" onclick={oninsertlink}>
+			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
+		</ToolbarButton>
+		<ToolbarButton title="Insert image" onclick={oninsertimage}>
+			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
+		</ToolbarButton>
+		<ToolbarButton title="Horizontal rule" onclick={() => exec('insertHorizontalRule')}>
+			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="12" x2="21" y2="12"/></svg>
+		</ToolbarButton>
+	</div>
+
+	<div class="toolbar-divider"></div>
+
+	<!-- History -->
+	<div class="toolbar-group">
+		<ToolbarButton title="Undo (Ctrl+Z)" onclick={() => exec('undo')}>
+			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 7v6h6"/><path d="M3 13c0 0 2.03-7 9-7a9 9 0 0 1 9 9 9 9 0 0 1-9 9c-3.5 0-6-1.5-7.5-4"/></svg>
+		</ToolbarButton>
+		<ToolbarButton title="Redo" onclick={() => exec('redo')}>
+			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M21 7v6h-6"/><path d="M21 13c0 0-2.03-7-9-7a9 9 0 0 0-9 9 9 9 0 0 0 9 9c3.5 0 6-1.5 7.5-4"/></svg>
+		</ToolbarButton>
+		<ToolbarButton title="Clear formatting" onclick={() => exec('removeFormat')}>
+			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7V4h16v3"/><path d="M9 20h6"/><path d="M12 4v16"/><line x1="18" y1="4" x2="4" y2="20" stroke="var(--accent)" stroke-width="2"/></svg>
+		</ToolbarButton>
+	</div>
+</div>
+
+<style>
+	.toolbar {
+		position: static;
+		background: var(--bg-toolbar);
+		border: 1px solid var(--border);
+		border-radius: var(--radius);
+		padding: 6px 8px;
+		margin: 24px 0 16px;
+		display: flex;
+		align-items: center;
+		gap: 2px;
+		flex-wrap: wrap;
+		box-shadow: var(--shadow-sm);
+	}
+
+	.toolbar-group {
+		display: flex;
+		align-items: center;
+		gap: 2px;
+	}
+
+	.toolbar-divider {
+		width: 1px;
+		height: 24px;
+		background: var(--border);
+		margin: 0 6px;
+		flex-shrink: 0;
+	}
+
+	.tb-select {
+		height: 34px;
+		padding: 0 10px;
+		border: none;
+		background: transparent;
+		border-radius: var(--radius-sm);
+		font-family: 'DM Sans', sans-serif;
+		font-size: 13px;
+		font-weight: 500;
+		color: var(--text-muted);
+		cursor: pointer;
+		transition: all var(--transition);
+		appearance: none;
+		-webkit-appearance: none;
+		padding-right: 22px;
+		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A7E72' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+		background-repeat: no-repeat;
+		background-position: right 6px center;
+	}
+
+	.tb-select:hover {
+		background: var(--surface);
+		color: var(--text);
+	}
+</style>

package/dist/components/Toolbar.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    formatState?: Record<string, boolean>;
+    blockType?: string;
+    onexec?: (cmd: string, value?: string | null) => void;
+    onblock?: (tag: string) => void;
+    oninsertlink?: () => void;
+    oninsertimage?: () => void;
+}
+declare const Toolbar: import("svelte").Component<Props, {}, "">;
+type Toolbar = ReturnType<typeof Toolbar>;
+export default Toolbar;

package/dist/components/ToolbarButton.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		active?: boolean;
+		title?: string;
+		onclick?: () => void;
+		children: Snippet;
+	}
+
+	let { active = false, title = '', onclick, children }: Props = $props();
+</script>
+
+<button
+	class="tb"
+	class:active
+	{title}
+	onclick={onclick}
+	onmousedown={(e) => e.preventDefault()}
+	type="button"
+>
+	{@render children()}
+</button>
+
+<style>
+	.tb {
+		width: 34px;
+		height: 34px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: none;
+		background: transparent;
+		border-radius: var(--radius-sm);
+		cursor: pointer;
+		color: var(--text-muted);
+		transition: all var(--transition);
+		position: relative;
+	}
+
+	.tb:hover {
+		background: var(--surface);
+		color: var(--text);
+	}
+
+	.tb.active {
+		background: var(--accent-soft);
+		color: var(--accent);
+	}
+
+	.tb :global(svg) {
+		width: 18px;
+		height: 18px;
+	}
+
+	.tb:hover::after {
+		content: attr(title);
+		position: absolute;
+		bottom: -30px;
+		left: 50%;
+		transform: translateX(-50%);
+		background: var(--ink);
+		color: #e8e2da;
+		font-size: 11px;
+		padding: 4px 8px;
+		border-radius: 4px;
+		white-space: nowrap;
+		pointer-events: none;
+		z-index: 10;
+	}
+</style>

package/dist/components/ToolbarButton.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    active?: boolean;
+    title?: string;
+    onclick?: () => void;
+    children: Snippet;
+}
+declare const ToolbarButton: import("svelte").Component<Props, {}, "">;
+type ToolbarButton = ReturnType<typeof ToolbarButton>;
+export default ToolbarButton;

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { default as RtfViewer } from './RtfViewer.svelte';
+export { default as InkEditor } from './components/InkEditor.svelte';
+export { rtfToHtml, readRtfFile } from './rtf-parser.js';
+export { htmlToRtf } from './rtf-writer.js';
+export { htmlToMarkdown, downloadFile } from './utils.js';

package/dist/index.js

@@ -0,0 +1,7 @@
+// Svelte components
+export { default as RtfViewer } from './RtfViewer.svelte';
+export { default as InkEditor } from './components/InkEditor.svelte';
+// RTF utilities
+export { rtfToHtml, readRtfFile } from './rtf-parser.js';
+export { htmlToRtf } from './rtf-writer.js';
+export { htmlToMarkdown, downloadFile } from './utils.js';

package/dist/rtf-parser.d.ts

@@ -0,0 +1,10 @@
+/**
+ * RTF to HTML converter
+ *
+ * Parses RTF control words and groups into an HTML string.
+ * Supports: bold, italic, underline, strikethrough, super/subscript,
+ * font size, foreground color, color table, font table, paragraphs,
+ * bullet/numbered lists, Unicode characters, hex escapes, and nested groups.
+ */
+export declare function rtfToHtml(rtfString: string): string;
+export declare function readRtfFile(file: File): Promise<string>;