@svadmin/editor 0.1.0

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@svadmin/editor",
+  "version": "0.1.0",
+  "description": "Modern Tiptap-based rich text editor for Svelte 5 — headless, modular, production-ready",
+  "type": "module",
+  "files": [
+    "src/**/*"
+  ],
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./components/*": "./src/components/*",
+    "./editor.css": "./src/styles/editor.css"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0",
+    "@svadmin/core": "^0.5.14"
+  },
+  "devDependencies": {
+    "@svadmin/core": "^0.5.14"
+  },
+  "dependencies": {
+    "@tiptap/core": "^2.12.0",
+    "@tiptap/pm": "^2.12.0",
+    "@tiptap/starter-kit": "^2.12.0",
+    "@tiptap/extension-bubble-menu": "^2.12.0",
+    "@tiptap/extension-character-count": "^2.12.0",
+    "@tiptap/extension-code-block-lowlight": "^2.12.0",
+    "@tiptap/extension-color": "^2.12.0",
+    "@tiptap/extension-floating-menu": "^2.12.0",
+    "@tiptap/extension-highlight": "^2.12.0",
+    "@tiptap/extension-image": "^2.12.0",
+    "@tiptap/extension-link": "^2.12.0",
+    "@tiptap/extension-placeholder": "^2.12.0",
+    "@tiptap/extension-subscript": "^2.12.0",
+    "@tiptap/extension-superscript": "^2.12.0",
+    "@tiptap/extension-table": "^2.12.0",
+    "@tiptap/extension-table-cell": "^2.12.0",
+    "@tiptap/extension-table-header": "^2.12.0",
+    "@tiptap/extension-table-row": "^2.12.0",
+    "@tiptap/extension-task-item": "^2.12.0",
+    "@tiptap/extension-task-list": "^2.12.0",
+    "@tiptap/extension-text-align": "^2.12.0",
+    "@tiptap/extension-text-style": "^2.12.0",
+    "@tiptap/extension-typography": "^2.12.0",
+    "@tiptap/extension-underline": "^2.12.0",
+    "@tiptap/suggestion": "^2.12.0",
+    "lowlight": "^3.3.0",
+    "lucide-svelte": "^0.577.0"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "author": "zuohuadong",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/zuohuadong/svadmin.git",
+    "directory": "packages/editor"
+  }
+}

package/src/components/BubbleMenu.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import type { Editor } from '@tiptap/core';
+  import { BubbleMenu as TiptapBubbleMenu } from '@tiptap/extension-bubble-menu';
+  import ToolbarButton from './ToolbarButton.svelte';
+  import {
+    Bold, Italic, Underline as UnderlineIcon, Strikethrough,
+    Code, Link as LinkIcon, Highlighter,
+  } from 'lucide-svelte';
+  import { t } from '@svadmin/core';
+
+  let { editor } = $props<{
+    editor: Editor;
+  }>();
+
+  let menuElement: HTMLDivElement | undefined = $state();
+
+  let txn = $state(0);
+  $effect(() => {
+    const handler = () => { txn++; };
+    editor.on('transaction', handler);
+    return () => { editor.off('transaction', handler); };
+  });
+
+  const isBold = $derived((void txn, editor.isActive('bold')));
+  const isItalic = $derived((void txn, editor.isActive('italic')));
+  const isUnderline = $derived((void txn, editor.isActive('underline')));
+  const isStrike = $derived((void txn, editor.isActive('strike')));
+  const isCode = $derived((void txn, editor.isActive('code')));
+  const isLink = $derived((void txn, editor.isActive('link')));
+
+  // Register the bubble menu extension
+  $effect(() => {
+    if (!menuElement) return;
+
+    // Check if BubbleMenu is already registered
+    const existing = editor.extensionManager.extensions.find(
+      (e) => e.name === 'bubbleMenu'
+    );
+    if (existing) return;
+
+    // We need to register the extension dynamically
+    // Tiptap handles this through the plugin system
+    const plugin = TiptapBubbleMenu.configure({
+      element: menuElement,
+      tippyOptions: {
+        duration: 150,
+        placement: 'top',
+        animation: 'shift-away',
+      },
+      shouldShow: ({ editor: e, state }) => {
+        const { selection } = state;
+        const { empty } = selection;
+        // Don't show in code blocks or empty selections
+        if (empty || e.isActive('codeBlock')) return false;
+        return true;
+      },
+    });
+
+    editor.registerPlugin(plugin.options.plugin(plugin.options));
+    return () => {
+      // cleanup handled by editor destroy
+    };
+  });
+</script>
+
+<div class="svadmin-bubble-menu" bind:this={menuElement} style="visibility: hidden;">
+  <ToolbarButton title={t('editor.bold')} active={isBold} onclick={() => editor.chain().focus().toggleBold().run()}>
+    <Bold />
+  </ToolbarButton>
+  <ToolbarButton title={t('editor.italic')} active={isItalic} onclick={() => editor.chain().focus().toggleItalic().run()}>
+    <Italic />
+  </ToolbarButton>
+  <ToolbarButton title={t('editor.underline')} active={isUnderline} onclick={() => editor.chain().focus().toggleUnderline().run()}>
+    <UnderlineIcon />
+  </ToolbarButton>
+  <ToolbarButton title={t('editor.strikethrough')} active={isStrike} onclick={() => editor.chain().focus().toggleStrike().run()}>
+    <Strikethrough />
+  </ToolbarButton>
+  <ToolbarButton title={t('editor.code')} active={isCode} onclick={() => editor.chain().focus().toggleCode().run()}>
+    <Code />
+  </ToolbarButton>
+  <ToolbarButton
+    title={t('editor.link')}
+    active={isLink}
+    onclick={() => {
+      if (isLink) {
+        editor.chain().focus().unsetLink().run();
+      } else {
+        const url = window.prompt('Enter URL:');
+        if (url) {
+          editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
+        }
+      }
+    }}
+  >
+    <LinkIcon />
+  </ToolbarButton>
+  <ToolbarButton
+    title="Highlight"
+    onclick={() => editor.chain().focus().toggleHighlight().run()}
+  >
+    <Highlighter />
+  </ToolbarButton>
+</div>

package/src/components/ColorPicker.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  let { onselect, onclose } = $props<{
+    onselect: (color: string) => void;
+    onclose?: () => void;
+  }>();
+
+  const colors = [
+    // Row 1: Reds
+    '#000000', '#434343', '#666666', '#999999',
+    '#b7b7b7', '#cccccc', '#d9d9d9', '#ffffff',
+    // Row 2: Saturated
+    '#e06666', '#f6b26b', '#ffd966', '#93c47d',
+    '#76a5af', '#6fa8dc', '#8e7cc3', '#c27ba0',
+    // Row 3: Deep
+    '#cc0000', '#e69138', '#f1c232', '#6aa84f',
+    '#45818e', '#3d85c6', '#674ea7', '#a64d79',
+    // Row 4: Vivid
+    '#ff0000', '#ff9900', '#ffff00', '#00ff00',
+    '#00ffff', '#0000ff', '#9900ff', '#ff00ff',
+    // Row 5: Dark
+    '#7f0000', '#783f04', '#7f6000', '#274e13',
+    '#0c343d', '#073763', '#20124d', '#4c1130',
+  ];
+
+  let popover: HTMLDivElement | undefined = $state();
+
+  function handleClickOutside(e: MouseEvent) {
+    if (popover && !popover.contains(e.target as Node)) {
+      onclose?.();
+    }
+  }
+
+  $effect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  });
+</script>
+
+<div class="svadmin-color-picker" bind:this={popover}>
+  <div class="svadmin-color-grid">
+    {#each colors as color}
+      <button
+        type="button"
+        class="svadmin-color-swatch"
+        style="background-color: {color}"
+        title={color}
+        onclick={() => onselect(color)}
+        aria-label="Color {color}"
+      ></button>
+    {/each}
+  </div>
+  <div style="margin-top: 6px; display: flex; gap: 4px; align-items: center;">
+    <input
+      type="color"
+      style="width: 28px; height: 28px; border: none; padding: 0; cursor: pointer; border-radius: 4px;"
+      oninput={(e) => onselect((e.target as HTMLInputElement).value)}
+      aria-label="Custom color"
+    />
+    <button
+      type="button"
+      class="svadmin-toolbar-btn"
+      style="font-size: 11px; width: auto; padding: 0 8px;"
+      title="Remove color"
+      onclick={() => onselect('')}
+    >
+      Reset
+    </button>
+  </div>
+</div>

package/src/components/Editor.svelte

@@ -0,0 +1,223 @@
+<script lang="ts">
+  import { Editor } from '@tiptap/core';
+  import { onDestroy } from 'svelte';
+  import { fullPreset, minimalPreset, prosePreset, type EditorPresetOptions } from '../extensions/index.js';
+  import type { AnyExtension } from '@tiptap/core';
+  import Toolbar from './Toolbar.svelte';
+  import BubbleMenuComp from './BubbleMenu.svelte';
+  import FloatingMenuComp from './FloatingMenu.svelte';
+  import { t } from '@svadmin/core';
+  import '../styles/editor.css';
+
+  interface Props {
+    /** HTML string content (bindable) */
+    value?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the editor is editable */
+    editable?: boolean;
+    /** Autofocus on mount */
+    autofocus?: boolean | 'start' | 'end';
+    /** Max character count */
+    maxLength?: number;
+    /** Show toolbar */
+    showToolbar?: boolean;
+    /** Show bubble menu on text selection */
+    showBubbleMenu?: boolean;
+    /** Show floating menu on empty lines */
+    showFloatingMenu?: boolean;
+    /** Show character count in footer */
+    showCharCount?: boolean;
+    /** Extension preset */
+    preset?: 'full' | 'minimal' | 'prose';
+    /** Custom extensions (overrides preset) */
+    extensions?: AnyExtension[];
+    /** Image upload handler */
+    onUpload?: (file: File) => Promise<string>;
+    /** Called on every content change */
+    onchange?: (html: string) => void;
+    /** Additional CSS class for the wrapper */
+    class?: string;
+    /** Min height for the editor content area */
+    minHeight?: string;
+    /** Max height for the editor content area */
+    maxHeight?: string;
+    /** lowlight instance for syntax-highlighted code blocks */
+    lowlight?: unknown;
+  }
+
+  let {
+    value = $bindable(''),
+    placeholder = t('editor.startWriting'),
+    editable = true,
+    autofocus = false,
+    maxLength = 0,
+    showToolbar = true,
+    showBubbleMenu = true,
+    showFloatingMenu = true,
+    showCharCount = true,
+    preset = 'full',
+    extensions: customExtensions,
+    onUpload,
+    onchange,
+    class: className = '',
+    minHeight = '200px',
+    maxHeight = '600px',
+    lowlight,
+  }: Props = $props();
+
+  let editorElement: HTMLDivElement | undefined = $state();
+  let editor: Editor | null = $state(null);
+
+  // Track whether we're updating externally to prevent loops
+  let isUpdatingFromExternal = false;
+  let isUpdatingFromEditor = false;
+
+  // Build extensions based on preset
+  function buildExtensions(): AnyExtension[] {
+    if (customExtensions) return customExtensions;
+
+    const opts: EditorPresetOptions = {
+      placeholder,
+      maxLength,
+      lowlight,
+    };
+
+    switch (preset) {
+      case 'minimal': return minimalPreset(opts);
+      case 'prose': return prosePreset(opts);
+      case 'full':
+      default: return fullPreset(opts);
+    }
+  }
+
+  // Create editor when element is available
+  $effect(() => {
+    if (!editorElement) return;
+
+    const ext = buildExtensions();
+
+    editor = new Editor({
+      element: editorElement,
+      extensions: ext,
+      content: value || '',
+      editable,
+      autofocus,
+      editorProps: {
+        attributes: {
+          class: 'tiptap',
+        },
+        // Handle image drop
+        handleDrop(view, event, slice, moved) {
+          if (!moved && event.dataTransfer?.files?.length && onUpload) {
+            const files = event.dataTransfer.files;
+            for (let i = 0; i < files.length; i++) {
+              const file = files[i];
+              if (file.type.startsWith('image/')) {
+                event.preventDefault();
+                onUpload(file).then((url) => {
+                  if (editor) {
+                    const { schema } = editor.state;
+                    const pos = view.posAtCoords({ left: event.clientX, top: event.clientY });
+                    if (pos) {
+                      const node = schema.nodes.image.create({ src: url, alt: file.name });
+                      const transaction = view.state.tr.insert(pos.pos, node);
+                      view.dispatch(transaction);
+                    }
+                  }
+                });
+                return true;
+              }
+            }
+          }
+          return false;
+        },
+        // Handle image paste
+        handlePaste(view, event) {
+          const items = event.clipboardData?.items;
+          if (items && onUpload) {
+            for (let i = 0; i < items.length; i++) {
+              const item = items[i];
+              if (item.type.startsWith('image/')) {
+                event.preventDefault();
+                const file = item.getAsFile();
+                if (file) {
+                  onUpload(file).then((url) => {
+                    if (editor) {
+                      editor.chain().focus().setImage({ src: url, alt: file.name }).run();
+                    }
+                  });
+                }
+                return true;
+              }
+            }
+          }
+          return false;
+        },
+      },
+      onUpdate({ editor: e }) {
+        if (isUpdatingFromExternal) return;
+        isUpdatingFromEditor = true;
+        const html = e.getHTML();
+        value = html;
+        onchange?.(html);
+        // Defer reset to allow Svelte to process
+        queueMicrotask(() => { isUpdatingFromEditor = false; });
+      },
+    });
+
+    return () => {
+      editor?.destroy();
+      editor = null;
+    };
+  });
+
+  // Sync external value changes into the editor
+  $effect(() => {
+    if (!editor || isUpdatingFromEditor) return;
+    const currentHtml = editor.getHTML();
+    if (value !== currentHtml) {
+      isUpdatingFromExternal = true;
+      editor.commands.setContent(value || '', false);
+      isUpdatingFromExternal = false;
+    }
+  });
+
+  // Sync editable state
+  $effect(() => {
+    if (editor) {
+      editor.setEditable(editable);
+    }
+  });
+
+  // Character count
+  const charCount = $derived(editor?.storage.characterCount?.characters() ?? 0);
+  const wordCount = $derived(editor?.storage.characterCount?.words() ?? 0);
+</script>
+
+<div class="svadmin-editor {className}">
+  {#if showToolbar && editor}
+    <Toolbar {editor} {onUpload} {preset} />
+  {/if}
+
+  <div
+    class="svadmin-editor-content"
+    style="min-height: {minHeight}; max-height: {maxHeight};"
+    bind:this={editorElement}
+  ></div>
+
+  {#if editor && showBubbleMenu && preset !== 'minimal'}
+    <BubbleMenuComp {editor} />
+  {/if}
+
+  {#if editor && showFloatingMenu && preset !== 'minimal'}
+    <FloatingMenuComp {editor} />
+  {/if}
+
+  {#if showCharCount && editor}
+    <div class="svadmin-editor-footer">
+      <span>{wordCount} words</span>
+      <span>{charCount} characters{maxLength ? ` / ${maxLength}` : ''}</span>
+    </div>
+  {/if}
+</div>

package/src/components/FloatingMenu.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import type { Editor } from '@tiptap/core';
+  import { FloatingMenu as TiptapFloatingMenu } from '@tiptap/extension-floating-menu';
+  import ToolbarButton from './ToolbarButton.svelte';
+  import {
+    Heading1, Heading2, Heading3,
+    List, ListOrdered, ListChecks,
+    Quote, Code2, Minus, ImageIcon, TableIcon,
+  } from 'lucide-svelte';
+  import { t } from '@svadmin/core';
+
+  let { editor } = $props<{
+    editor: Editor;
+  }>();
+
+  let menuElement: HTMLDivElement | undefined = $state();
+
+  $effect(() => {
+    if (!menuElement) return;
+
+    const existing = editor.extensionManager.extensions.find(
+      (e) => e.name === 'floatingMenu'
+    );
+    if (existing) return;
+
+    const plugin = TiptapFloatingMenu.configure({
+      element: menuElement,
+      tippyOptions: {
+        duration: 150,
+        placement: 'left-start',
+      },
+      shouldShow: ({ editor: e, state }) => {
+        const { selection } = state;
+        const { $anchor: anchor, empty } = selection;
+        // Show only on empty paragraphs
+        if (!empty) return false;
+        const isRootDepth = anchor.depth === 1;
+        const isEmptyTextBlock = anchor.parent.isTextblock
+          && !anchor.parent.type.spec.code
+          && !anchor.parent.textContent;
+        return isRootDepth && isEmptyTextBlock;
+      },
+    });
+
+    editor.registerPlugin(plugin.options.plugin(plugin.options));
+  });
+</script>
+
+<div class="svadmin-floating-menu" bind:this={menuElement} style="visibility: hidden;">
+  <ToolbarButton title={t('editor.h1')} onclick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}>
+    <Heading1 />
+  </ToolbarButton>
+  <ToolbarButton title={t('editor.h2')} onclick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}>
+    <Heading2 />
+  </ToolbarButton>
+  <ToolbarButton title={t('editor.h3')} onclick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}>
+    <Heading3 />
+  </ToolbarButton>
+  <ToolbarButton title={t('editor.bulletList')} onclick={() => editor.chain().focus().toggleBulletList().run()}>
+    <List />
+  </ToolbarButton>
+  <ToolbarButton title={t('editor.orderedList')} onclick={() => editor.chain().focus().toggleOrderedList().run()}>
+    <ListOrdered />
+  </ToolbarButton>
+  <ToolbarButton title={t('editor.taskList')} onclick={() => editor.chain().focus().toggleTaskList().run()}>
+    <ListChecks />
+  </ToolbarButton>
+  <ToolbarButton title={t('editor.blockquote')} onclick={() => editor.chain().focus().toggleBlockquote().run()}>
+    <Quote />
+  </ToolbarButton>
+  <ToolbarButton title={t('editor.codeBlock')} onclick={() => editor.chain().focus().toggleCodeBlock().run()}>
+    <Code2 />
+  </ToolbarButton>
+  <ToolbarButton title="Divider" onclick={() => editor.chain().focus().setHorizontalRule().run()}>
+    <Minus />
+  </ToolbarButton>
+</div>

package/src/components/ImageUpload.svelte

@@ -0,0 +1,159 @@
+<script lang="ts">
+  import type { Editor } from '@tiptap/core';
+  import { ImageIcon, Upload, Link as LinkIcon, X } from 'lucide-svelte';
+  import { t } from '@svadmin/core';
+
+  let { editor, onUpload, onclose } = $props<{
+    editor: Editor;
+    onUpload?: (file: File) => Promise<string>;
+    onclose?: () => void;
+  }>();
+
+  let mode: 'url' | 'upload' = $state('url');
+  let url = $state('');
+  let alt = $state('');
+  let uploading = $state(false);
+  let dragover = $state(false);
+  let fileInput: HTMLInputElement | undefined = $state();
+
+  function insertByUrl() {
+    if (!url.trim()) return;
+    editor.chain().focus().setImage({ src: url, alt: alt || undefined }).run();
+    url = '';
+    alt = '';
+    onclose?.();
+  }
+
+  async function handleFiles(files: FileList | null) {
+    if (!files?.length || !onUpload) return;
+    uploading = true;
+    try {
+      for (const file of files) {
+        if (!file.type.startsWith('image/')) continue;
+        const uploadedUrl = await onUpload(file);
+        editor.chain().focus().setImage({ src: uploadedUrl, alt: file.name }).run();
+      }
+    } catch (e) {
+      console.error('Image upload failed:', e);
+    } finally {
+      uploading = false;
+      onclose?.();
+    }
+  }
+
+  function handleDrop(e: DragEvent) {
+    e.preventDefault();
+    dragover = false;
+    handleFiles(e.dataTransfer?.files ?? null);
+  }
+
+  function handleDragOver(e: DragEvent) {
+    e.preventDefault();
+    dragover = true;
+  }
+
+  function handleDragLeave() {
+    dragover = false;
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      insertByUrl();
+    }
+    if (e.key === 'Escape') {
+      onclose?.();
+    }
+  }
+</script>
+
+<div class="svadmin-color-picker" style="min-width: 300px;">
+  <div style="display: flex; gap: 2px; margin-bottom: 8px;">
+    <button
+      type="button"
+      class="svadmin-toolbar-btn"
+      style="width: auto; padding: 0 10px; font-size: 12px; gap: 4px; display: flex; align-items: center;"
+      data-active={mode === 'url'}
+      onclick={() => { mode = 'url'; }}
+    >
+      <LinkIcon style="width: 12px; height: 12px;" />
+      URL
+    </button>
+    {#if onUpload}
+      <button
+        type="button"
+        class="svadmin-toolbar-btn"
+        style="width: auto; padding: 0 10px; font-size: 12px; gap: 4px; display: flex; align-items: center;"
+        data-active={mode === 'upload'}
+        onclick={() => { mode = 'upload'; }}
+      >
+        <Upload style="width: 12px; height: 12px;" />
+        Upload
+      </button>
+    {/if}
+  </div>
+
+  {#if mode === 'url'}
+    <div style="display: flex; flex-direction: column; gap: 6px;">
+      <input
+        class="svadmin-link-input"
+        type="url"
+        placeholder={t('editor.image.url')}
+        bind:value={url}
+        onkeydown={handleKeydown}
+        style="width: 100%;"
+      />
+      <input
+        class="svadmin-link-input"
+        type="text"
+        placeholder="Alt (optional)"
+        bind:value={alt}
+        onkeydown={handleKeydown}
+        style="width: 100%;"
+      />
+      <button
+        type="button"
+        class="svadmin-toolbar-btn"
+        style="width: 100%; font-size: 13px; height: 34px; background: hsl(var(--primary) / 0.1); color: var(--editor-primary); font-weight: 500;"
+        onclick={insertByUrl}
+        disabled={!url.trim()}
+      >
+        {t('editor.image.apply') || t('editor.link.apply')}
+      </button>
+    </div>
+  {:else}
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      style="
+        border: 2px dashed {dragover ? 'var(--editor-primary)' : 'var(--editor-border)'};
+        border-radius: 8px;
+        padding: 24px;
+        text-align: center;
+        cursor: pointer;
+        transition: border-color 0.15s ease, background 0.15s ease;
+        background: {dragover ? 'hsl(var(--primary) / 0.05)' : 'transparent'};
+      "
+      ondrop={handleDrop}
+      ondragover={handleDragOver}
+      ondragleave={handleDragLeave}
+      onclick={() => fileInput?.click()}
+    >
+      {#if uploading}
+        <div style="color: var(--editor-muted); font-size: 13px;">{t('editor.image.uploading')}</div>
+      {:else}
+        <ImageIcon style="width: 24px; height: 24px; margin: 0 auto 8px; color: var(--editor-muted);" />
+        <div style="font-size: 13px; color: var(--editor-muted);">
+          {t('editor.image.upload')}
+        </div>
+      {/if}
+    </div>
+    <input
+      bind:this={fileInput}
+      type="file"
+      accept="image/*"
+      multiple
+      style="display: none;"
+      onchange={(e) => handleFiles((e.target as HTMLInputElement).files)}
+    />
+  {/if}
+</div>