svelte-rtf-editor 0.1.0

package/README.md

@@ -0,0 +1,224 @@
+# svelte-rtf-editor
+
+RTF viewer and rich-text editor components for **Svelte 5**.
+
+[![npm](https://img.shields.io/npm/v/svelte-rtf-editor)](https://www.npmjs.com/package/svelte-rtf-editor)
+[![license](https://img.shields.io/npm/l/svelte-rtf-editor)](./LICENSE)
+
+---
+
+## Features
+
+- **`RtfViewer`** — Renders an RTF string as formatted HTML with a one-click "Copy RTF" button
+- **`InkEditor`** — Full rich-text editor that reads and writes RTF, built on `contenteditable`
+  - Formatting toolbar: bold, italic, underline, strikethrough, font colour
+  - Block-level controls: headings (H1–H3), paragraph, blockquote, code block
+  - Import an RTF file from disk; export as RTF, HTML, or Markdown
+  - Optional auto-save to `localStorage`
+  - Word count and character count status bar
+  - Keyboard shortcuts (`Ctrl+S` to save, `Ctrl+B/I/U` for formatting)
+- **Utility functions** — `rtfToHtml`, `htmlToRtf`, `readRtfFile`, `htmlToMarkdown`, `downloadFile`
+- Zero runtime dependencies — just Svelte 5 as a peer dependency
+
+---
+
+## Installation
+
+```bash
+npm install svelte-rtf-editor
+```
+
+---
+
+## Usage
+
+### Read-only RTF viewer
+
+```svelte
+<script>
+  import { RtfViewer } from 'svelte-rtf-editor';
+
+  const rtf = String.raw`{\rtf1\ansi {\b Hello}, {\i world}!}`;
+</script>
+
+<RtfViewer content={rtf} />
+```
+
+The viewer renders the RTF as HTML and places a **Copy RTF** button in the top-right corner.
+
+---
+
+### Rich-text editor
+
+```svelte
+<script>
+  import { InkEditor } from 'svelte-rtf-editor';
+
+  let html = '';
+</script>
+
+<InkEditor
+  placeholder="Start writing…"
+  onchange={({ html: h }) => (html = h)}
+/>
+```
+
+#### Getting RTF out of the editor
+
+Bind a reference to the component with `bind:this` and call `getRTF()`:
+
+```svelte
+<script>
+  import { InkEditor } from 'svelte-rtf-editor';
+
+  let editor;
+
+  function save() {
+    const rtf = editor.getRTF();
+    console.log(rtf); // {\rtf1\ansi ...}
+  }
+</script>
+
+<InkEditor bind:this={editor} />
+<button onclick={save}>Save</button>
+```
+
+#### Pre-loading content
+
+Pass an HTML string as `content`. If the content is already RTF, convert it first:
+
+```svelte
+<script>
+  import { InkEditor, rtfToHtml } from 'svelte-rtf-editor';
+
+  const rtfFromServer = String.raw`{\rtf1\ansi {\b Hello}}`;
+  const html = rtfToHtml(rtfFromServer);
+</script>
+
+<InkEditor content={html} autosave={false} />
+```
+
+---
+
+## API
+
+### `<RtfViewer>`
+
+| Prop      | Type     | Default | Description                              |
+|-----------|----------|---------|------------------------------------------|
+| `content` | `string` | —       | Raw RTF string to parse and display      |
+
+---
+
+### `<InkEditor>`
+
+#### Props
+
+| Prop            | Type       | Default                      | Description                                               |
+|-----------------|------------|------------------------------|-----------------------------------------------------------|
+| `content`       | `string`   | `'<p></p>'`                  | Initial HTML content                                      |
+| `placeholder`   | `string`   | `'Start writing something beautiful...'` | Placeholder text when editor is empty     |
+| `autosave`      | `boolean`  | `true`                       | Save content to `localStorage` on change                  |
+| `storageKey`    | `string`   | `'ink-editor-content'`       | `localStorage` key used for auto-save                     |
+| `showToolbar`   | `boolean`  | `true`                       | Show the formatting toolbar                               |
+| `showStatusBar` | `boolean`  | `true`                       | Show the word/character count bar                         |
+| `minHeight`     | `string`   | `'40vh'`                     | CSS `min-height` of the editing area                      |
+| `readonly`      | `boolean`  | `false`                      | Disable editing                                           |
+
+#### Callback props
+
+| Prop       | Payload                                      | Description                                 |
+|------------|----------------------------------------------|---------------------------------------------|
+| `onchange` | `{ html, text, wordCount, charCount }`       | Fired on every content change               |
+| `onsave`   | `{ html }`                                   | Fired on auto-save or `Ctrl+S`              |
+| `onimport` | `{ html }`                                   | Fired after a successful RTF file import    |
+
+#### Methods (via `bind:this`)
+
+```ts
+editor.getHTML()          // → string  — current editor HTML
+editor.getText()          // → string  — plain text (no tags)
+editor.setHTML(html)      // → void    — replace content programmatically
+editor.getMarkdown()      // → string  — Markdown conversion of content
+editor.getRTF()           // → string  — RTF conversion of content
+editor.clear()            // → void    — clear the editor
+editor.focus()            // → void    — focus the editor
+editor.exportFile(format) // → void    — download as 'html' | 'md' | 'rtf'
+editor.importRtf()        // → void    — open the file picker to import .rtf
+```
+
+---
+
+## Utility functions
+
+```ts
+import { rtfToHtml, htmlToRtf, readRtfFile, htmlToMarkdown, downloadFile } from 'svelte-rtf-editor';
+```
+
+| Function                              | Description                                        |
+|---------------------------------------|----------------------------------------------------|
+| `rtfToHtml(rtf: string): string`      | Parse an RTF string and return an HTML string      |
+| `htmlToRtf(html: string): string`     | Convert an HTML string to RTF                      |
+| `readRtfFile(file: File): Promise<string>` | Read a `.rtf` File object and return HTML     |
+| `htmlToMarkdown(el: HTMLElement): string` | Convert a DOM element's content to Markdown   |
+| `downloadFile(name, content, mime): void` | Trigger a file download in the browser        |
+
+---
+
+## Theming
+
+The components use CSS custom properties with sensible fallbacks, so they work out of the box but are easy to customise. Override these in your own CSS:
+
+```css
+:root {
+  --text:        #2c2520;
+  --text-muted:  #8a7e72;
+  --surface:     #f2f0ec;
+  --border:      #e5e2dc;
+  --ink:         #1a1714;
+  --accent:      #6e56cf;
+  --accent-soft: #ede9fe;
+  --radius-sm:   5px;
+  --transition:  150ms ease;
+}
+```
+
+---
+
+## Keyboard shortcuts
+
+| Shortcut   | Action            |
+|------------|-------------------|
+| `Ctrl+B`   | Bold              |
+| `Ctrl+I`   | Italic            |
+| `Ctrl+U`   | Underline         |
+| `Ctrl+S`   | Save (fires `onsave`) |
+
+---
+
+## Local development
+
+Clone this repo and link it to your project for instant iteration without publishing:
+
+```bash
+# In svelte-rtf-editor/
+npm run prepack   # builds dist/
+npm link
+
+# In your project/
+npm link svelte-rtf-editor
+```
+
+Re-run `npm run prepack` in this repo after any change. When done:
+
+```bash
+# In your project/
+npm unlink svelte-rtf-editor
+npm install svelte-rtf-editor
+```
+
+---
+
+## License
+
+MIT

package/dist/RtfViewer.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+    import { rtfToHtml } from "./rtf-parser.js";
+
+    let { content }: { content: string } = $props();
+
+    const htmlContent = $derived(rtfToHtml(content));
+
+    let copied = $state(false);
+
+    async function copyRtf() {
+        await navigator.clipboard.writeText(content);
+        copied = true;
+        setTimeout(() => (copied = false), 2000);
+    }
+</script>
+
+<div class="rtf-viewer-wrap">
+    <button class="copy-btn" onclick={copyRtf} title="Copy raw RTF">
+        {#if copied}
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+            Copied
+        {:else}
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+            Copy RTF
+        {/if}
+    </button>
+    <div class="rtf-viewer">
+        {@html htmlContent}
+    </div>
+</div>
+
+<style>
+    .rtf-viewer-wrap {
+        position: relative;
+    }
+
+    .copy-btn {
+        position: absolute;
+        top: 0;
+        right: 0;
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        padding: 4px 10px;
+        font-size: 12px;
+        font-weight: 500;
+        border: 1px solid var(--border, #e5e2dc);
+        border-radius: var(--radius-sm, 5px);
+        background: var(--surface, #f2f0ec);
+        color: var(--text-muted, #8a7e72);
+        cursor: pointer;
+        transition: all 150ms ease;
+    }
+
+    .copy-btn:hover {
+        background: var(--border, #e5e2dc);
+        color: var(--text, #2c2520);
+    }
+
+    .copy-btn svg {
+        width: 13px;
+        height: 13px;
+        flex-shrink: 0;
+    }
+
+    .rtf-viewer {
+        line-height: 1.4;
+        white-space: normal;
+        word-wrap: break-word;
+    }
+
+    .rtf-viewer :global(br) {
+        display: inline;
+    }
+
+    .rtf-viewer :global(strong) {
+        font-weight: 600;
+    }
+
+    .rtf-viewer :global(em) {
+        font-style: italic;
+    }
+
+    .rtf-viewer :global(u) {
+        text-decoration: underline;
+    }
+
+    .rtf-viewer :global(p) {
+        margin: 0 0 0.2em;
+    }
+
+    .rtf-viewer :global(p:last-child) {
+        margin-bottom: 0;
+    }
+</style>

package/dist/RtfViewer.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    content: string;
+};
+declare const RtfViewer: import("svelte").Component<$$ComponentProps, {}, "">;
+type RtfViewer = ReturnType<typeof RtfViewer>;
+export default RtfViewer;

package/dist/components/ColorPicker.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	interface Props {
+		value?: string;
+		title?: string;
+		onchange?: (color: string) => void;
+	}
+
+	let { value = '#2C2520', title = 'Color', onchange }: Props = $props();
+
+	let currentColor = $state(value);
+
+	function handleChange(e: Event) {
+		currentColor = (e.target as HTMLInputElement).value;
+		onchange?.(currentColor);
+	}
+</script>
+
+<div class="color-picker-wrap">
+	<button class="color-swatch" {title} type="button">
+		<div class="color-swatch-inner" style="background: {currentColor};"></div>
+	</button>
+	<input
+		type="color"
+		class="color-input"
+		value={currentColor}
+		onchange={handleChange}
+		{title}
+	/>
+</div>
+
+<style>
+	.color-picker-wrap {
+		position: relative;
+		display: flex;
+		align-items: center;
+	}
+
+	.color-swatch {
+		width: 34px;
+		height: 34px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: none;
+		background: transparent;
+		border-radius: var(--radius-sm);
+		cursor: pointer;
+		transition: all var(--transition);
+	}
+
+	.color-swatch:hover {
+		background: var(--surface);
+	}
+
+	.color-swatch-inner {
+		width: 18px;
+		height: 18px;
+		border-radius: 4px;
+		border: 2px solid var(--border);
+		transition: all var(--transition);
+	}
+
+	.color-input {
+		position: absolute;
+		width: 34px;
+		height: 34px;
+		opacity: 0;
+		cursor: pointer;
+		top: 0;
+		left: 0;
+	}
+</style>

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

@@ -0,0 +1,8 @@
+interface Props {
+    value?: string;
+    title?: string;
+    onchange?: (color: string) => void;
+}
+declare const ColorPicker: import("svelte").Component<Props, {}, "">;
+type ColorPicker = ReturnType<typeof ColorPicker>;
+export default ColorPicker;