@intinyagroup/rich-text 0.1.1-alpha.5

package/dist/components/RichTextEditor.svelte

@@ -0,0 +1,803 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { Editor, Node, mergeAttributes } from '@tiptap/core';
+  import StarterKit from '@tiptap/starter-kit';
+  import Placeholder from '@tiptap/extension-placeholder';
+  import Underline from '@tiptap/extension-underline';
+  import TextAlign from '@tiptap/extension-text-align';
+  import Link from '@tiptap/extension-link';
+  import Image from '@tiptap/extension-image';
+  import Highlight from '@tiptap/extension-highlight';
+  import Table from '@tiptap/extension-table';
+  import TableRow from '@tiptap/extension-table-row';
+  import TableCell from '@tiptap/extension-table-cell';
+  import TableHeader from '@tiptap/extension-table-header';
+  import Typography from '@tiptap/extension-typography';
+  import BubbleMenu from '@tiptap/extension-bubble-menu';
+  import {
+    Bold, Italic, Underline as UnderlineIcon, Strikethrough, Highlighter,
+    AlignLeft, AlignCenter, AlignRight, AlignJustify,
+    List, ListOrdered, Quote, Code, Minus, Link as LinkIcon, Image as ImageIcon,
+    Undo, Redo, Heading1, Heading2, Heading3, TableIcon, Plus, Trash2,
+    Video,
+  } from 'lucide-svelte';
+  import { Button, Separator } from '@intinyagroup/ui';
+  import { cn } from '@intinyagroup/grid-core/utils';
+
+  let {
+    content = '',
+    placeholder = 'Start writing...',
+    editable = true,
+    height = 400,
+    class: className,
+    onUpdate,
+    onImageUpload,
+  }: {
+    content?: string;
+    placeholder?: string;
+    editable?: boolean;
+    height?: number;
+    class?: string;
+    onUpdate?: (html: string) => void;
+    /** Called when paste/drop provides an image file. Return a URL to insert. */
+    onImageUpload?: (file: File) => Promise<string>;
+  } = $props();
+
+  let editorEl: HTMLDivElement | null = null;
+  let bubbleMenuEl: HTMLDivElement | null = null;
+  let editor: Editor | null = null;
+  let isActive = $state<Record<string, boolean>>({});
+  let uploadingCount = $state(0);
+
+  // ---------------------------------------------------------------------------
+  // Custom Extensions
+  // ---------------------------------------------------------------------------
+
+  /** Image with href/alt/title attributes — renders as <a><img></a> when href set */
+  const CustomImage = Image.extend({
+    addAttributes() {
+      return {
+        ...this.parent?.(),
+        href: { default: null },
+        alt: { default: '' },
+        title: { default: '' },
+        target: { default: '_blank' },
+      };
+    },
+    renderHTML({ HTMLAttributes }) {
+      const { href, target, alt, title, ...rest } = HTMLAttributes;
+      const img = ['img', mergeAttributes(this.options.HTMLAttributes, rest, { alt, title })];
+      if (href) {
+        return ['a', { href, target, class: 'image-link' }, img];
+      }
+      return img;
+    },
+  });
+
+  /** YouTube iframe embed node */
+  const CustomYoutube = Node.create({
+    name: 'youtube',
+    group: 'block',
+    atom: true,
+    addAttributes() {
+      return { src: { default: null } };
+    },
+    parseHTML() {
+      return [
+        { tag: "iframe[src*='youtube.com']" },
+        { tag: "iframe[src*='youtu.be']" },
+      ];
+    },
+    renderHTML({ HTMLAttributes }) {
+      return [
+        'div',
+        { class: 'video-wrapper' },
+        [
+          'iframe',
+          mergeAttributes(HTMLAttributes, {
+            width: '100%',
+            height: '315',
+            allowfullscreen: 'true',
+          }),
+        ],
+      ];
+    },
+  });
+
+  // ---------------------------------------------------------------------------
+  // Image Compression
+  // ---------------------------------------------------------------------------
+
+  async function compressImage(file: File): Promise<File> {
+    if (file.size < 100 * 1024) return file;
+
+    return new Promise((resolve) => {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const img = new Image();
+        img.onload = () => {
+          const canvas = document.createElement('canvas');
+          const ctx = canvas.getContext('2d');
+          if (!ctx) {
+            resolve(file);
+            return;
+          }
+
+          let { width, height } = img;
+          const maxDim = 2048;
+
+          if (width > maxDim || height > maxDim) {
+            if (width > height) {
+              height = (height / width) * maxDim;
+              width = maxDim;
+            } else {
+              width = (width / height) * maxDim;
+              height = maxDim;
+            }
+          }
+
+          canvas.width = width;
+          canvas.height = height;
+          ctx.drawImage(img, 0, 0, width, height);
+
+          canvas.toBlob(
+            (blob) => {
+              if (blob) {
+                resolve(new File([blob], file.name, { type: 'image/jpeg' }));
+              } else {
+                resolve(file);
+              }
+            },
+            'image/jpeg',
+            0.85
+          );
+        };
+        img.src = e.target?.result as string;
+      };
+      reader.readAsDataURL(file);
+    });
+  }
+
+  // ---------------------------------------------------------------------------
+  // Image Upload (paste / drop)
+  // ---------------------------------------------------------------------------
+
+  async function uploadAndInsertImage(file: File) {
+    if (!editor) return;
+    uploadingCount++;
+    try {
+      let src: string;
+      if (onImageUpload) {
+        const compressed = await compressImage(file);
+        src = await onImageUpload(compressed);
+      } else {
+        // Fallback: inline data URL (no server upload)
+        src = await new Promise<string>((resolve) => {
+          const reader = new FileReader();
+          reader.onload = (ev) => resolve(ev.target?.result as string);
+          reader.readAsDataURL(file);
+        });
+      }
+      editor.chain().focus().setImage({ src }).run();
+    } catch (err) {
+      console.error('Failed to upload image:', err);
+    } finally {
+      uploadingCount--;
+    }
+  }
+
+  async function handleFiles(files: File[]) {
+    const images = Array.from(files).filter((f) => f.type.startsWith('image/'));
+    await Promise.all(images.map(uploadAndInsertImage));
+  }
+
+  // ---------------------------------------------------------------------------
+  // YouTube Embed
+  // ---------------------------------------------------------------------------
+
+  function addYoutube() {
+    const url = window.prompt('Enter YouTube URL:');
+    if (!url || !editor) return;
+    const match = url.match(
+      /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=|shorts\/)([^#&?]*).*/
+    );
+    const id = match && match[2].length === 11 ? match[2] : null;
+    if (id) {
+      editor
+        .chain()
+        .focus()
+        .insertContent({
+          type: 'youtube',
+          attrs: { src: `https://www.youtube.com/embed/${id}` },
+        })
+        .run();
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Toolbar Helpers
+  // ---------------------------------------------------------------------------
+
+  function getActiveStates(e: Editor): Record<string, boolean> {
+    return {
+      bold: e.isActive('bold'),
+      italic: e.isActive('italic'),
+      underline: e.isActive('underline'),
+      strike: e.isActive('strike'),
+      highlight: e.isActive('highlight'),
+      h1: e.isActive('heading', { level: 1 }),
+      h2: e.isActive('heading', { level: 2 }),
+      h3: e.isActive('heading', { level: 3 }),
+      bulletList: e.isActive('bulletList'),
+      orderedList: e.isActive('orderedList'),
+      blockquote: e.isActive('blockquote'),
+      codeBlock: e.isActive('codeBlock'),
+      alignLeft: e.isActive({ textAlign: 'left' }),
+      alignCenter: e.isActive({ textAlign: 'center' }),
+      alignRight: e.isActive({ textAlign: 'right' }),
+      alignJustify: e.isActive({ textAlign: 'justify' }),
+      link: e.isActive('link'),
+    };
+  }
+
+  function toggleBold() { editor?.chain().focus().toggleBold().run(); }
+  function toggleItalic() { editor?.chain().focus().toggleItalic().run(); }
+  function toggleUnderline() { editor?.chain().focus().toggleUnderline().run(); }
+  function toggleStrike() { editor?.chain().focus().toggleStrike().run(); }
+  function setHeading(level: 1 | 2 | 3) { editor?.chain().focus().toggleHeading({ level }).run(); }
+  function toggleBulletList() { editor?.chain().focus().toggleBulletList().run(); }
+  function toggleOrderedList() { editor?.chain().focus().toggleOrderedList().run(); }
+  function toggleBlockquote() { editor?.chain().focus().toggleBlockquote().run(); }
+  function toggleCodeBlock() { editor?.chain().focus().toggleCodeBlock().run(); }
+  function setAlign(align: 'left' | 'center' | 'right' | 'justify') {
+    editor?.chain().focus().setTextAlign(align).run();
+  }
+  function setLink() {
+    const url = window.prompt('Enter URL:');
+    if (url) editor?.chain().focus().setLink({ href: url }).run();
+  }
+  function setImage() {
+    const url = window.prompt('Enter image URL:');
+    if (url) editor?.chain().focus().setImage({ src: url }).run();
+  }
+  function insertHorizontalRule() { editor?.chain().focus().setHorizontalRule().run(); }
+  function insertTable() {
+    editor?.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
+  }
+  function toggleHighlight(color?: string) {
+    if (color) {
+      editor?.chain().focus().toggleHighlight({ color }).run();
+    } else {
+      editor?.chain().focus().toggleHighlight().run();
+    }
+  }
+  function addColumnBefore() { editor?.chain().focus().addColumnBefore().run(); }
+  function addColumnAfter() { editor?.chain().focus().addColumnAfter().run(); }
+  function deleteColumn() { editor?.chain().focus().deleteColumn().run(); }
+  function addRowBefore() { editor?.chain().focus().addRowBefore().run(); }
+  function addRowAfter() { editor?.chain().focus().addRowAfter().run(); }
+  function deleteRow() { editor?.chain().focus().deleteRow().run(); }
+  function deleteTable() { editor?.chain().focus().deleteTable().run(); }
+  function undo() { editor?.chain().focus().undo().run(); }
+  function redo() { editor?.chain().focus().redo().run(); }
+
+  // ---------------------------------------------------------------------------
+  // Lifecycle
+  // ---------------------------------------------------------------------------
+
+  onMount(() => {
+    if (!editorEl) return;
+
+    editor = new Editor({
+      element: editorEl,
+      extensions: [
+        StarterKit,
+        Placeholder.configure({ placeholder }),
+        Underline,
+        TextAlign.configure({ types: ['heading', 'paragraph'] }),
+        Link.configure({ openOnClick: false }),
+        CustomImage.configure({
+          inline: false,
+          HTMLAttributes: {
+            class: 'rounded-lg mx-auto block max-w-full h-auto cursor-pointer',
+          },
+        }),
+        Highlight.configure({ multicolor: true }),
+        Typography,
+        Table.configure({ resizable: true }),
+        TableRow,
+        TableCell,
+        TableHeader,
+        BubbleMenu.configure({
+          element: bubbleMenuEl!,
+          pluginKey: 'bubbleMenu',
+          shouldShow: ({ editor: e }) =>
+            e.isEditable &&
+            !e.isActive('table') &&
+            e.view.state.selection.content().size > 0,
+        }),
+        CustomYoutube,
+      ],
+      content,
+      editable,
+      onUpdate: ({ editor: e }) => {
+        const html = e.getHTML();
+        isActive = getActiveStates(e);
+        onUpdate?.(html);
+      },
+      onSelectionUpdate: ({ editor: e }) => {
+        isActive = getActiveStates(e);
+      },
+      editorProps: {
+        attributes: {
+          class: 'prose prose-sm max-w-none focus:outline-none',
+        },
+        handleDOMEvents: {
+          paste: (_view, event) => {
+            const items = event.clipboardData?.items;
+            if (!items) return false;
+            const imageFiles: File[] = [];
+            for (let i = 0; i < items.length; i++) {
+              if (items[i].type.startsWith('image/')) {
+                const file = items[i].getAsFile();
+                if (file) imageFiles.push(file);
+              }
+            }
+            if (imageFiles.length) {
+              event.preventDefault();
+              handleFiles(imageFiles);
+              return true;
+            }
+            return false;
+          },
+          drop: (_view, event) => {
+            const files = event.dataTransfer?.files;
+            if (!files?.length) return false;
+            const imageFiles = Array.from(files).filter((f) =>
+              f.type.startsWith('image/')
+            );
+            if (imageFiles.length) {
+              event.preventDefault();
+              handleFiles(imageFiles);
+              return true;
+            }
+            return false;
+          },
+        },
+      },
+    });
+  });
+
+  onDestroy(() => {
+    if (editor) editor.destroy();
+  });
+</script>
+
+<div
+  class={cn(
+    'rounded-xl border border-[var(--ui-border)] bg-[var(--ui-card)] overflow-hidden',
+    className
+  )}
+>
+  <!-- Toolbar -->
+  {#if editable}
+    <div
+      class="flex flex-wrap items-center gap-0.5 px-2 py-1.5 border-b border-[var(--ui-border)] bg-[var(--ui-secondary)]/30"
+    >
+      <Button variant="ghost" size="sm" class="size-8 p-0" onclick={undo}>
+        <Undo class="size-4" />
+      </Button>
+      <Button variant="ghost" size="sm" class="size-8 p-0" onclick={redo}>
+        <Redo class="size-4" />
+      </Button>
+
+      <Separator orientation="vertical" class="h-6 mx-1" />
+
+      <Button
+        variant="ghost"
+        size="sm"
+        class={cn('size-8 p-0', isActive.h1 && 'bg-[var(--ui-primary)]/10')}
+        onclick={() => setHeading(1)}
+      >
+        <Heading1 class="size-4" />
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        class={cn('size-8 p-0', isActive.h2 && 'bg-[var(--ui-primary)]/10')}
+        onclick={() => setHeading(2)}
+      >
+        <Heading2 class="size-4" />
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        class={cn('size-8 p-0', isActive.h3 && 'bg-[var(--ui-primary)]/10')}
+        onclick={() => setHeading(3)}
+      >
+        <Heading3 class="size-4" />
+      </Button>
+
+      <Separator orientation="vertical" class="h-6 mx-1" />
+
+      <Button
+        variant="ghost"
+        size="sm"
+        class={cn('size-8 p-0', isActive.bold && 'bg-[var(--ui-primary)]/10')}
+        onclick={toggleBold}
+      >
+        <Bold class="size-4" />
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        class={cn('size-8 p-0', isActive.italic && 'bg-[var(--ui-primary)]/10')}
+        onclick={toggleItalic}
+      >
+        <Italic class="size-4" />
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        class={cn('size-8 p-0', isActive.underline && 'bg-[var(--ui-primary)]/10')}
+        onclick={toggleUnderline}
+      >
+        <UnderlineIcon class="size-4" />
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        class={cn('size-8 p-0', isActive.strike && 'bg-[var(--ui-primary)]/10')}
+        onclick={toggleStrike}
+      >
+        <Strikethrough class="size-4" />
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        class={cn(
+          'size-8 p-0',
+          isActive.highlight && 'bg-[var(--ui-primary)]/10'
+        )}
+        onclick={() => toggleHighlight('#fef08a')}
+      >
+        <Highlighter class="size-4" />
+      </Button>
+
+      <Separator orientation="vertical" class="h-6 mx-1" />
+
+      <Button
+        variant="ghost"
+        size="sm"
+        class={cn(
+          'size-8 p-0',
+          isActive.bulletList && 'bg-[var(--ui-primary)]/10'
+        )}
+        onclick={toggleBulletList}
+      >
+        <List class="size-4" />
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        class={cn(
+          'size-8 p-0',
+          isActive.orderedList && 'bg-[var(--ui-primary)]/10'
+        )}
+        onclick={toggleOrderedList}
+      >
+        <ListOrdered class="size-4" />
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        class={cn(
+          'size-8 p-0',
+          isActive.blockquote && 'bg-[var(--ui-primary)]/10'
+        )}
+        onclick={toggleBlockquote}
+      >
+        <Quote class="size-4" />
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        class={cn(
+          'size-8 p-0',
+          isActive.codeBlock && 'bg-[var(--ui-primary)]/10'
+        )}
+        onclick={toggleCodeBlock}
+      >
+        <Code class="size-4" />
+      </Button>
+
+      <Separator orientation="vertical" class="h-6 mx-1" />
+
+      <Button
+        variant="ghost"
+        size="sm"
+        class={cn(
+          'size-8 p-0',
+          isActive.alignLeft && 'bg-[var(--ui-primary)]/10'
+        )}
+        onclick={() => setAlign('left')}
+      >
+        <AlignLeft class="size-4" />
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        class={cn(
+          'size-8 p-0',
+          isActive.alignCenter && 'bg-[var(--ui-primary)]/10'
+        )}
+        onclick={() => setAlign('center')}
+      >
+        <AlignCenter class="size-4" />
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        class={cn(
+          'size-8 p-0',
+          isActive.alignRight && 'bg-[var(--ui-primary)]/10'
+        )}
+        onclick={() => setAlign('right')}
+      >
+        <AlignRight class="size-4" />
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        class={cn(
+          'size-8 p-0',
+          isActive.alignJustify && 'bg-[var(--ui-primary)]/10'
+        )}
+        onclick={() => setAlign('justify')}
+      >
+        <AlignJustify class="size-4" />
+      </Button>
+
+      <Separator orientation="vertical" class="h-6 mx-1" />
+
+      <Button
+        variant="ghost"
+        size="sm"
+        class={cn('size-8 p-0', isActive.link && 'bg-[var(--ui-primary)]/10')}
+        onclick={setLink}
+      >
+        <LinkIcon class="size-4" />
+      </Button>
+      <Button variant="ghost" size="sm" class="size-8 p-0" onclick={setImage}>
+        <ImageIcon class="size-4" />
+      </Button>
+      <Button variant="ghost" size="sm" class="size-8 p-0" onclick={insertTable}>
+        <TableIcon class="size-4" />
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        class="size-8 p-0"
+        onclick={addYoutube}
+        title="Embed YouTube video"
+      >
+        <Video class="size-4" />
+      </Button>
+      <Button variant="ghost" size="sm" class="size-8 p-0" onclick={insertHorizontalRule}>
+        <Minus class="size-4" />
+      </Button>
+
+      {#if uploadingCount > 0}
+        <span class="ml-auto text-xs text-[var(--ui-muted-foreground)]">
+          Uploading {uploadingCount} image{uploadingCount > 1 ? 's' : ''}...
+        </span>
+      {/if}
+    </div>
+  {/if}
+
+  <!-- Editor -->
+  <div
+    bind:this={editorEl}
+    class="prose prose-sm max-w-none p-4 focus:outline-none"
+    style="min-height: {height}px;"
+  ></div>
+
+  <!-- BubbleMenu: floating toolbar on text selection (element bound for TipTap) -->
+  <div
+    bind:this={bubbleMenuEl}
+    class="flex items-center gap-0.5 rounded-xl border border-[var(--ui-border)] bg-[var(--ui-card)] p-1 shadow-lg backdrop-blur-sm"
+  >
+    {#if editor}
+      <Button
+        variant="ghost"
+        size="sm"
+        class={cn('size-7 p-0', editor.isActive('bold') && 'bg-[var(--ui-primary)]/10')}
+        onclick={toggleBold}
+      >
+        <Bold class="size-3.5" />
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        class={cn('size-7 p-0', editor.isActive('italic') && 'bg-[var(--ui-primary)]/10')}
+        onclick={toggleItalic}
+      >
+        <Italic class="size-3.5" />
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        class={cn('size-7 p-0', editor.isActive('underline') && 'bg-[var(--ui-primary)]/10')}
+        onclick={toggleUnderline}
+      >
+        <UnderlineIcon class="size-3.5" />
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        class={cn('size-7 p-0', editor.isActive('strike') && 'bg-[var(--ui-primary)]/10')}
+        onclick={toggleStrike}
+      >
+        <Strikethrough class="size-3.5" />
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        class={cn(
+          'size-7 p-0',
+          editor.isActive('highlight') && 'bg-[var(--ui-primary)]/10'
+        )}
+        onclick={() => toggleHighlight('#fef08a')}
+      >
+        <Highlighter class="size-3.5" />
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        class={cn('size-7 p-0', editor.isActive('link') && 'bg-[var(--ui-primary)]/10')}
+        onclick={setLink}
+      >
+        <LinkIcon class="size-3.5" />
+      </Button>
+    {/if}
+  </div>
+</div>
+
+<style>
+  :global(.tiptap) {
+    outline: none;
+  }
+  :global(.tiptap p.is-editor-empty:first-child::before) {
+    content: attr(data-placeholder);
+    float: left;
+    color: var(--ui-muted-foreground);
+    pointer-events: none;
+    height: 0;
+  }
+  :global(.tiptap h1) {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin: 0.5rem 0;
+  }
+  :global(.tiptap h2) {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin: 0.5rem 0;
+  }
+  :global(.tiptap h3) {
+    font-size: 1.125rem;
+    font-weight: 600;
+    margin: 0.5rem 0;
+  }
+  :global(.tiptap ul) {
+    list-style-type: disc;
+    padding-left: 1.5rem;
+  }
+  :global(.tiptap ol) {
+    list-style-type: decimal;
+    padding-left: 1.5rem;
+  }
+  :global(.tiptap blockquote) {
+    border-left: 3px solid var(--ui-primary);
+    padding-left: 1rem;
+    margin-left: 0;
+    color: var(--ui-muted-foreground);
+  }
+  :global(.tiptap pre) {
+    background: var(--ui-secondary);
+    border-radius: 0.5rem;
+    padding: 0.75rem 1rem;
+    font-family: monospace;
+    font-size: 0.875rem;
+  }
+  :global(.tiptap code) {
+    background: var(--ui-secondary);
+    border-radius: 0.25rem;
+    padding: 0.125rem 0.25rem;
+    font-size: 0.875em;
+  }
+  :global(.tiptap pre code) {
+    background: none;
+    padding: 0;
+  }
+  :global(.tiptap img) {
+    max-width: 100%;
+    border-radius: 0.5rem;
+  }
+  :global(.tiptap a.image-link) {
+    display: block;
+    text-align: center;
+  }
+  :global(.tiptap a.image-link img) {
+    display: block;
+    margin: 0 auto;
+  }
+  :global(.tiptap hr) {
+    border: none;
+    border-top: 1px solid var(--ui-border);
+    margin: 1rem 0;
+  }
+  :global(.tiptap table) {
+    border-collapse: collapse;
+    width: 100%;
+    margin: 1em 0;
+    overflow: hidden;
+  }
+  :global(.tiptap th),
+  :global(.tiptap td) {
+    border: 1px solid var(--ui-border);
+    padding: 0.5rem 0.75rem;
+    text-align: left;
+    position: relative;
+    min-width: 80px;
+  }
+  :global(.tiptap th) {
+    background: var(--ui-secondary);
+    font-weight: 600;
+  }
+  :global(.tiptap td.selectedCell) {
+    background: color-mix(in srgb, var(--ui-primary) 10%, transparent);
+  }
+  :global(.tiptap .selectedCell::after) {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.05);
+    pointer-events: none;
+  }
+  :global(.tiptap .column-resize-handle) {
+    position: absolute;
+    right: -2px;
+    top: 0;
+    bottom: 0;
+    width: 4px;
+    background: var(--ui-primary);
+    cursor: col-resize;
+  }
+
+  /* YouTube / Video embed */
+  :global(.tiptap .video-wrapper) {
+    position: relative;
+    padding-bottom: 56.25%;
+    height: 0;
+    overflow: hidden;
+    margin: 1.5rem 0;
+    border-radius: 0.75rem;
+    background: var(--ui-secondary);
+  }
+  :global(.tiptap .video-wrapper iframe) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
+
+  /* Typography smart-quotes styling (cosmetic, TipTap handles conversion) */
+  :global(.tiptap mark) {
+    background-color: #fef08a;
+    padding: 0.1em 0.2em;
+    border-radius: 2px;
+  }
+</style>

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

@@ -0,0 +1,13 @@
+type $$ComponentProps = {
+    content?: string;
+    placeholder?: string;
+    editable?: boolean;
+    height?: number;
+    class?: string;
+    onUpdate?: (html: string) => void;
+    /** Called when paste/drop provides an image file. Return a URL to insert. */
+    onImageUpload?: (file: File) => Promise<string>;
+};
+declare const RichTextEditor: import("svelte").Component<$$ComponentProps, {}, "">;
+type RichTextEditor = ReturnType<typeof RichTextEditor>;
+export default RichTextEditor;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { default as RichTextEditor } from './components/RichTextEditor.svelte';

package/dist/index.js

@@ -0,0 +1 @@
+export { default as RichTextEditor } from './components/RichTextEditor.svelte';

package/dist/tracked-changes.d.ts

@@ -0,0 +1,31 @@
+export type TrackedChange = {
+    id: string;
+    type: 'insertion' | 'deletion';
+    userId: string;
+    userName: string;
+    timestamp: string;
+    content: string;
+    accepted: boolean;
+};
+export type TrackedChangeState = {
+    enabled: boolean;
+    changes: TrackedChange[];
+    currentUserId: string;
+    currentUserName: string;
+};
+export declare function createTrackedChangeState(userId: string, userName: string): TrackedChangeState;
+export declare function addTrackedChange(state: TrackedChangeState, type: 'insertion' | 'deletion', content: string): TrackedChange;
+export declare function acceptChange(state: TrackedChangeState, changeId: string): TrackedChangeState;
+export declare function rejectChange(state: TrackedChangeState, changeId: string): TrackedChangeState;
+export declare function acceptAllChanges(state: TrackedChangeState): TrackedChangeState;
+export declare function rejectAllChanges(state: TrackedChangeState): TrackedChangeState;
+export declare function getPendingChangesCount(state: TrackedChangeState): number;
+export declare function getChangesByUser(state: TrackedChangeState, userId: string): TrackedChange[];
+/**
+ * Render tracked changes as HTML with colored marks
+ */
+export declare function renderTrackedChanges(html: string, changes: TrackedChange[]): string;
+/**
+ * Extract tracked changes from HTML
+ */
+export declare function extractTrackedChanges(html: string): TrackedChange[];

package/dist/tracked-changes.js

@@ -0,0 +1,106 @@
+// ============================================
+// Tracked Changes utilities — track insertions/deletions
+// ============================================
+export function createTrackedChangeState(userId, userName) {
+    return {
+        enabled: false,
+        changes: [],
+        currentUserId: userId,
+        currentUserName: userName,
+    };
+}
+export function addTrackedChange(state, type, content) {
+    const change = {
+        id: `tc-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
+        type,
+        userId: state.currentUserId,
+        userName: state.currentUserName,
+        timestamp: new Date().toISOString(),
+        content,
+        accepted: false,
+    };
+    return change;
+}
+export function acceptChange(state, changeId) {
+    return {
+        ...state,
+        changes: state.changes.map((c) => c.id === changeId ? { ...c, accepted: true } : c),
+    };
+}
+export function rejectChange(state, changeId) {
+    return {
+        ...state,
+        changes: state.changes.filter((c) => c.id !== changeId),
+    };
+}
+export function acceptAllChanges(state) {
+    return {
+        ...state,
+        changes: state.changes.map((c) => ({ ...c, accepted: true })),
+    };
+}
+export function rejectAllChanges(state) {
+    return {
+        ...state,
+        changes: [],
+    };
+}
+export function getPendingChangesCount(state) {
+    return state.changes.filter((c) => !c.accepted).length;
+}
+export function getChangesByUser(state, userId) {
+    return state.changes.filter((c) => c.userId === userId);
+}
+/**
+ * Render tracked changes as HTML with colored marks
+ */
+export function renderTrackedChanges(html, changes) {
+    let result = html;
+    for (const change of changes) {
+        if (change.accepted)
+            continue;
+        if (change.type === 'insertion') {
+            // Mark insertions with green background
+            result = result.replace(change.content, `<span class="tracked-insertion" data-change-id="${change.id}" style="background: #dcfce7; text-decoration: none;">${change.content}</span>`);
+        }
+        else if (change.type === 'deletion') {
+            // Mark deletions with red strikethrough
+            result = result.replace(change.content, `<span class="tracked-deletion" data-change-id="${change.id}" style="background: #fee2e2; text-decoration: line-through; color: #991b1b;">${change.content}</span>`);
+        }
+    }
+    return result;
+}
+/**
+ * Extract tracked changes from HTML
+ */
+export function extractTrackedChanges(html) {
+    const changes = [];
+    // Extract insertions
+    const insertionRegex = /<span[^>]*class="tracked-insertion"[^>]*data-change-id="([^"]*)"[^>]*>(.*?)<\/span>/gi;
+    let match;
+    while ((match = insertionRegex.exec(html)) !== null) {
+        changes.push({
+            id: match[1],
+            type: 'insertion',
+            userId: 'unknown',
+            userName: 'Unknown',
+            timestamp: new Date().toISOString(),
+            content: match[2],
+            accepted: false,
+        });
+    }
+    // Extract deletions
+    const deletionRegex = /<span[^>]*class="tracked-deletion"[^>]*data-change-id="([^"]*)"[^>]*>(.*?)<\/span>/gi;
+    while ((match = deletionRegex.exec(html)) !== null) {
+        changes.push({
+            id: match[1],
+            type: 'deletion',
+            userId: 'unknown',
+            userName: 'Unknown',
+            timestamp: new Date().toISOString(),
+            content: match[2],
+            accepted: false,
+        });
+    }
+    return changes;
+}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@intinyagroup/rich-text",
+  "version": "0.1.1-alpha.5",
+  "description": "Rich text editor component powered by TipTap",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "svelte-package -o dist",
+    "check": "echo 'no check'",
+    "dev": "svelte-package -o dist -w"
+  },
+  "dependencies": {
+    "@intinyagroup/ui": "0.1.1-alpha.5",
+    "@intinyagroup/grid-core": "0.1.1-alpha.5",
+    "@tiptap/core": "^3.22.5",
+    "@tiptap/starter-kit": "^3.22.5",
+    "@tiptap/extension-placeholder": "^3.22.5",
+    "@tiptap/extension-underline": "^3.22.5",
+    "@tiptap/extension-text-align": "^3.22.5",
+    "@tiptap/extension-link": "^3.22.5",
+    "@tiptap/extension-image": "^3.22.5",
+    "@tiptap/extension-code-block-lowlight": "^3.22.5",
+    "@tiptap/pm": "^3.22.5"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.5.8",
+    "svelte": "^5.55.2",
+    "typescript": "^6.0.2",
+    "@sveltejs/vite-plugin-svelte": "^5.1.1"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/intinyagroup/ui.git",
+    "directory": "packages/rich-text"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}