@cloudvoyant/helical-svelte 0.19.0

package/dist/editor/FontColorPicker.svelte

@@ -0,0 +1,102 @@
+<!-- libs/helical-svelte/src/editor/FontColorPicker.svelte -->
+<script lang="ts">
+  import type { Editor } from '@tiptap/core';
+
+  let {
+    editor,
+    visible = $bindable(false),
+    mode = 'color',
+  }: {
+    editor: Editor;
+    visible?: boolean;
+    mode?: 'color' | 'highlight';
+  } = $props();
+
+  // Reading-friendly color palette with preview colors
+  const textColors = [
+    { id: 'red', preview: '#dc2626', name: 'Red' },
+    { id: 'orange', preview: '#ea580c', name: 'Orange' },
+    { id: 'yellow', preview: '#ca8a04', name: 'Yellow' },
+    { id: 'green', preview: '#16a34a', name: 'Green' },
+    { id: 'cyan', preview: '#0891b2', name: 'Cyan' },
+    { id: 'blue', preview: '#2563eb', name: 'Blue' },
+    { id: 'violet', preview: '#7c3aed', name: 'Violet' },
+    { id: 'fuchsia', preview: '#c026d3', name: 'Fuchsia' },
+    { id: 'slate', preview: '#64748b', name: 'Slate' },
+  ];
+
+  const highlightColors = [
+    { id: 'yellow', preview: '#fef9c3', name: 'Yellow' },
+    { id: 'blue', preview: '#dbeafe', name: 'Blue' },
+    { id: 'green', preview: '#d1fae5', name: 'Green' },
+    { id: 'red', preview: '#fee2e2', name: 'Red' },
+    { id: 'fuchsia', preview: '#fae8ff', name: 'Fuchsia' },
+    { id: 'orange', preview: '#ffedd5', name: 'Orange' },
+    { id: 'violet', preview: '#ede9fe', name: 'Violet' },
+    { id: 'cyan', preview: '#cffafe', name: 'Cyan' },
+    { id: 'slate', preview: '#f1f5f9', name: 'Slate' },
+  ];
+
+  function selectColor(colorId: string) {
+    if (mode === 'highlight') {
+      // Highlight serializes this as an inline `background-color`, so use the actual preview
+      // color rather than a bare CSS keyword such as `yellow`.
+      const entry = highlightColors.find((color) => color.id === colorId);
+      editor.chain().focus().toggleHighlight({ color: entry?.preview ?? colorId }).run();
+    } else {
+      // @tiptap/extension-color writes an inline `style`, so it needs a real CSS colour.
+      // Passing the palette id ('slate') produces invalid CSS and silently does nothing.
+      const entry = textColors.find((c) => c.id === colorId);
+      editor
+        .chain()
+        .focus()
+        .setColor(entry?.preview ?? colorId)
+        .run();
+    }
+    visible = false;
+  }
+
+  function clearColor() {
+    if (mode === 'highlight') {
+      editor.chain().focus().unsetHighlight().run();
+    } else {
+      editor.chain().focus().unsetColor().run();
+    }
+    visible = false;
+  }
+</script>
+
+{#if visible}
+  <div class="absolute z-50 mt-2 w-48 rounded-lg border bg-background text-foreground p-1 shadow-lg">
+    <div class="text-xs font-medium text-muted-foreground px-3 py-2">
+      {mode === 'highlight' ? 'Highlight' : 'Color'}
+    </div>
+    <div class="flex flex-col">
+      <!-- None/Clear option -->
+      <button
+        type="button"
+        class="flex items-center gap-2 rounded px-3 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground transition-colors text-left"
+        onclick={clearColor}
+      >
+        <div class="h-5 w-5 rounded border border-border flex-shrink-0 flex items-center justify-center">
+          <span class="text-xs text-muted-foreground">×</span>
+        </div>
+        <span>None</span>
+      </button>
+      <!-- Color options -->
+      {#each mode === 'highlight' ? highlightColors : textColors as color}
+        <button
+          type="button"
+          class="flex items-center gap-2 rounded px-3 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground transition-colors text-left"
+          onclick={() => selectColor(color.id)}
+        >
+          <div
+            class="h-5 w-5 rounded border border-border flex-shrink-0"
+            style="background-color: {color.preview}"
+          ></div>
+          <span>{color.name}</span>
+        </button>
+      {/each}
+    </div>
+  </div>
+{/if}

package/dist/editor/FontColorPicker.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Editor } from '@tiptap/core';
+type $$ComponentProps = {
+    editor: Editor;
+    visible?: boolean;
+    mode?: 'color' | 'highlight';
+};
+declare const FontColorPicker: import("svelte").Component<$$ComponentProps, {}, "visible">;
+type FontColorPicker = ReturnType<typeof FontColorPicker>;
+export default FontColorPicker;

package/dist/editor/ImageFileUpload.svelte

@@ -0,0 +1,70 @@
+<!-- libs/helical-svelte/src/editor/ImageFileUpload.svelte -->
+<!-- Ark UI FileUpload dropzone used by ImageInput. Selection and upload remain separate so -->
+<!-- Cancel/Upload can share one footer and the parent can display upload progress. -->
+<script lang="ts">
+  import {
+    FileUploadRoot,
+    FileUploadDropzone,
+    FileUploadTrigger,
+    FileUploadHiddenInput,
+    FileUploadItemGroup,
+    FileUploadItem,
+    FileUploadItemPreview,
+    FileUploadItemPreviewImage,
+    FileUploadItemName,
+    FileUploadItemSizeText,
+    FileUploadItemDeleteTrigger,
+    type FileUploadFileChangeDetails,
+  } from '@ark-ui/svelte/file-upload';
+  import { ImagePlus, Trash2, Upload } from 'lucide-svelte';
+
+  interface Props {
+    file: File | null;
+    onFileChange: (file: File | null) => void;
+    disabled?: boolean;
+  }
+
+  let { file, onFileChange, disabled = false }: Props = $props();
+</script>
+
+<FileUploadRoot
+  accept="image/*"
+  maxFiles={1}
+  acceptedFiles={file ? [file] : []}
+  {disabled}
+  onFileChange={(details: FileUploadFileChangeDetails) => onFileChange(details.acceptedFiles[0] ?? null)}
+>
+  <FileUploadDropzone
+    class="flex min-h-32 cursor-pointer flex-col items-center justify-center gap-2 rounded-md border border-dashed border-border bg-muted/30 px-4 py-5 text-center transition-colors data-[dragging]:border-primary data-[dragging]:bg-primary/5"
+  >
+    <ImagePlus size={24} class="text-muted-foreground" aria-hidden="true" />
+    <div class="text-sm font-medium">Drop an image here</div>
+    <div class="text-xs text-muted-foreground">or</div>
+    <FileUploadTrigger
+      class="inline-flex items-center gap-2 rounded-md border border-input bg-background px-3 py-1.5 text-sm hover:bg-accent"
+    >
+      <Upload size={16} aria-hidden="true" />
+      Choose image
+    </FileUploadTrigger>
+  </FileUploadDropzone>
+  <FileUploadItemGroup class="mt-2">
+    {#if file}
+      <FileUploadItem {file} class="flex items-center gap-3 rounded-md border border-border bg-background p-2">
+        <FileUploadItemPreview type="image/*" class="size-12 shrink-0 overflow-hidden rounded">
+          <FileUploadItemPreviewImage class="size-full object-cover" />
+        </FileUploadItemPreview>
+        <div class="min-w-0 flex-1">
+          <FileUploadItemName class="truncate text-sm font-medium" />
+          <FileUploadItemSizeText class="text-xs text-muted-foreground" />
+        </div>
+        <FileUploadItemDeleteTrigger
+          class="rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
+          aria-label="Remove image"
+        >
+          <Trash2 size={16} />
+        </FileUploadItemDeleteTrigger>
+      </FileUploadItem>
+    {/if}
+  </FileUploadItemGroup>
+  <FileUploadHiddenInput />
+</FileUploadRoot>

package/dist/editor/ImageFileUpload.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    file: File | null;
+    onFileChange: (file: File | null) => void;
+    disabled?: boolean;
+}
+declare const ImageFileUpload: import("svelte").Component<Props, {}, "">;
+type ImageFileUpload = ReturnType<typeof ImageFileUpload>;
+export default ImageFileUpload;

package/dist/editor/ImageInput.svelte

@@ -0,0 +1,189 @@
+<script lang="ts">
+  import type { Editor } from '@tiptap/core';
+  import type { ImageUploadResult } from '@cloudvoyant/helical-ui';
+  import { X } from 'lucide-svelte';
+  import ImageFileUpload from './ImageFileUpload.svelte';
+
+  interface Props {
+    editor: Editor;
+    position: number;
+    onClose: () => void;
+    onUpload?: (file: File) => Promise<ImageUploadResult>;
+  }
+
+  let { editor, position, onClose, onUpload }: Props = $props();
+
+  let activeTab = $state<'upload' | 'url'>('upload');
+  let urlValue = $state('');
+  let urlError = $state('');
+  let urlInputEl: HTMLInputElement | undefined = $state();
+  let selectedFile = $state<File | null>(null);
+  let uploading = $state(false);
+  let uploadError = $state('');
+
+  $effect(() => {
+    if (activeTab === 'url') {
+      urlInputEl?.focus();
+    }
+  });
+
+  function insertImage(src: string, srcset?: string) {
+    editor.chain().focus().setTextSelection(position).insertImage({ src, srcset, alt: '', caption: '' }).run();
+    onClose();
+  }
+
+  function fileToDataUrl(file: File): Promise<string> {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () =>
+        typeof reader.result === 'string' ? resolve(reader.result) : reject(new Error('No image data'));
+      reader.onerror = () => reject(reader.error ?? new Error('Could not read image'));
+      reader.readAsDataURL(file);
+    });
+  }
+
+  async function handleUpload() {
+    if (!selectedFile) {
+      uploadError = 'Choose an image first.';
+      return;
+    }
+
+    uploading = true;
+    uploadError = '';
+    try {
+      const result: ImageUploadResult = onUpload
+        ? await onUpload(selectedFile)
+        : { src: await fileToDataUrl(selectedFile) };
+      insertImage(result.src, result.srcset);
+    } catch {
+      uploadError = 'Upload failed. Please try again.';
+    } finally {
+      uploading = false;
+    }
+  }
+
+  function handleUrlSubmit() {
+    const trimmed = urlValue.trim();
+    if (!trimmed) {
+      urlError = 'Please enter a URL';
+      return;
+    }
+    try {
+      new URL(trimmed);
+    } catch {
+      urlError = 'Please enter a valid URL';
+      return;
+    }
+    insertImage(trimmed);
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') onClose();
+  }
+
+  function handleUrlKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter') handleUrlSubmit();
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<div
+  class="max-h-[calc(100vh-2rem)] w-80 overflow-y-auto rounded-lg border border-border bg-popover p-3 text-popover-foreground shadow-xl"
+  role="dialog"
+  aria-label="Insert image"
+  tabindex="-1"
+  onkeydown={handleKeydown}
+>
+  <div class="space-y-3">
+    <div class="flex items-center justify-between">
+      <p class="text-sm font-semibold">Insert Image</p>
+      <button
+        type="button"
+        onclick={onClose}
+        class="rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
+        aria-label="Close image dialog"
+      >
+        <X size={16} />
+      </button>
+    </div>
+
+    <!-- Tabs -->
+    <div class="flex gap-1 rounded-md bg-muted p-1">
+      <button
+        type="button"
+        onclick={() => {
+          activeTab = 'upload';
+          urlError = '';
+        }}
+        class="flex-1 rounded px-3 py-1 text-xs font-medium transition-colors {activeTab === 'upload'
+          ? 'bg-background shadow-sm'
+          : 'text-muted-foreground hover:text-foreground'}"
+      >
+        Upload
+      </button>
+      <button
+        type="button"
+        onclick={() => {
+          activeTab = 'url';
+          urlError = '';
+        }}
+        class="flex-1 rounded px-3 py-1 text-xs font-medium transition-colors {activeTab === 'url'
+          ? 'bg-background shadow-sm'
+          : 'text-muted-foreground hover:text-foreground'}"
+      >
+        URL
+      </button>
+    </div>
+
+    {#if activeTab === 'upload'}
+      <div class="space-y-1">
+        <ImageFileUpload
+          file={selectedFile}
+          disabled={uploading}
+          onFileChange={(file) => {
+            selectedFile = file;
+            uploadError = '';
+          }}
+        />
+        {#if uploading}
+          <p class="text-xs text-muted-foreground">Uploading…</p>
+        {/if}
+        {#if uploadError}
+          <div role="alert" class="text-xs leading-tight text-destructive">{uploadError}</div>
+        {/if}
+      </div>
+    {:else}
+      <div class="space-y-1">
+        <input
+          type="url"
+          bind:this={urlInputEl}
+          bind:value={urlValue}
+          onkeydown={handleUrlKeydown}
+          oninput={() => {
+            urlError = '';
+          }}
+          placeholder="https://example.com/image.jpg"
+          aria-invalid={Boolean(urlError)}
+          class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+        />
+        {#if urlError}
+          <div role="alert" class="text-xs leading-tight text-destructive">{urlError}</div>
+        {/if}
+      </div>
+    {/if}
+
+    <div class="flex justify-end gap-2">
+      <button type="button" onclick={onClose} class="rounded-md px-3 py-1.5 text-sm transition-colors hover:bg-muted">
+        Cancel
+      </button>
+      <button
+        type="button"
+        onclick={activeTab === 'upload' ? handleUpload : handleUrlSubmit}
+        disabled={uploading || (activeTab === 'upload' && !selectedFile)}
+        class="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        {activeTab === 'upload' ? (uploading ? 'Uploading…' : 'Upload') : 'Insert'}
+      </button>
+    </div>
+  </div>
+</div>

package/dist/editor/ImageInput.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Editor } from '@tiptap/core';
+import type { ImageUploadResult } from '@cloudvoyant/helical-ui';
+interface Props {
+    editor: Editor;
+    position: number;
+    onClose: () => void;
+    onUpload?: (file: File) => Promise<ImageUploadResult>;
+}
+declare const ImageInput: import("svelte").Component<Props, {}, "">;
+type ImageInput = ReturnType<typeof ImageInput>;
+export default ImageInput;

package/dist/editor/ImageNodeView.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+  import type { NodeViewProps } from '@tiptap/core';
+  import { NodeViewWrapper } from 'svelte-tiptap';
+
+  let { node, deleteNode, updateAttributes, editor, getPos }: NodeViewProps = $props();
+
+  const { src, srcset, alt } = $derived(node.attrs);
+  let caption = $derived(node.attrs.caption || '');
+  let captionFocused = $state(false);
+
+  function handleCaptionBlur() {
+    captionFocused = false;
+    updateAttributes({ caption });
+  }
+
+  function handleCaptionKeydown(event: KeyboardEvent) {
+    if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      updateAttributes({ caption });
+      const pos = (getPos as () => number)();
+      editor
+        .chain()
+        .focus()
+        .setTextSelection(Math.max(pos - 1, 0))
+        .run();
+    } else if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      updateAttributes({ caption });
+      const posAfter = (getPos as () => number)() + node.nodeSize;
+      editor.chain().focus().setTextSelection(posAfter).run();
+    } else if (event.key === 'Enter') {
+      event.preventDefault();
+      const input = event.currentTarget as HTMLInputElement;
+      const cursorIdx = input.selectionStart ?? caption.length;
+      const leftText = caption.slice(0, cursorIdx);
+      const rightText = caption.slice(cursorIdx);
+
+      caption = leftText;
+      updateAttributes({ caption: leftText });
+
+      const posAfter = (getPos as () => number)() + node.nodeSize;
+      editor
+        .chain()
+        .focus()
+        .insertContentAt(posAfter, {
+          type: 'paragraph',
+          content: rightText ? [{ type: 'text', text: rightText }] : [],
+        })
+        .setTextSelection(posAfter + 1)
+        .run();
+    }
+  }
+</script>
+
+<NodeViewWrapper class="image-node-view relative my-6 group" contenteditable={false}>
+  <figure class="m-0">
+    <img
+      {src}
+      {srcset}
+      sizes="(max-width: 768px) 100vw, 720px"
+      alt={alt || ''}
+      class="w-full object-cover"
+      draggable="false"
+    />
+    <figcaption class="mt-2">
+      <input
+        type="text"
+        bind:value={caption}
+        onfocus={() => {
+          captionFocused = true;
+        }}
+        onblur={handleCaptionBlur}
+        onkeydown={handleCaptionKeydown}
+        placeholder={captionFocused ? '' : 'Add a caption…'}
+        style="background: transparent; box-shadow: none; outline: none;"
+        class="caption-input w-full border-0 p-0 text-sm italic text-muted-foreground text-center placeholder:italic appearance-none"
+      />
+    </figcaption>
+  </figure>
+
+  <button
+    type="button"
+    class="absolute top-2 right-2 w-7 h-7 rounded-full bg-background border border-border shadow-sm flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer z-10"
+    onclick={deleteNode}
+    aria-label="Remove image"
+  >
+    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+    </svg>
+  </button>
+</NodeViewWrapper>
+
+<style>
+  .caption-input:focus,
+  .caption-input:focus-visible {
+    outline: none !important;
+    box-shadow: none !important;
+    border-width: 0 !important;
+    border-color: transparent !important;
+    background-color: transparent !important;
+  }
+
+  /* Backspace-to-delete highlight — applied via ProseMirror decoration.
+     The class lands on renderer.dom (div.node-imageNode), not on NodeViewWrapper.
+     ::after overlay mimics browser text-selection highlight. */
+  :global(.node-imageNode.image-node-pending-delete [data-node-view-wrapper])::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 120, 215, 0.25); /* fallback */
+    background: color-mix(in srgb, Highlight 30%, transparent);
+    border-radius: 0;
+    pointer-events: none;
+    z-index: 1;
+  }
+</style>

package/dist/editor/ImageNodeView.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NodeViewProps } from '@tiptap/core';
+declare const ImageNodeView: import("svelte").Component<NodeViewProps, {}, "">;
+type ImageNodeView = ReturnType<typeof ImageNodeView>;
+export default ImageNodeView;

package/dist/editor/LinkEditPopover.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import type { Editor } from '@tiptap/core';
+  import { Trash2, Globe, ExternalLink } from 'lucide-svelte';
+
+  interface Props {
+    editor: Editor;
+    initialUrl?: string;
+    onClose: () => void;
+  }
+
+  let { editor, initialUrl = '', onClose }: Props = $props();
+
+  let linkUrl = $derived(initialUrl);
+  let inputElement: HTMLInputElement;
+  let isFocused = $state(false);
+
+  onMount(() => inputElement?.focus());
+
+  function saveAndClose() {
+    if (linkUrl.trim()) {
+      editor.chain().focus().setLink({ href: linkUrl.trim() }).run();
+    } else {
+      // If empty, remove the link
+      editor.chain().focus().unsetLink().run();
+    }
+    onClose();
+  }
+
+  function removeLink() {
+    editor.chain().focus().unsetLink().run();
+    onClose();
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Enter' || event.key === 'Escape') {
+      event.preventDefault();
+      saveAndClose();
+    }
+  }
+
+  function handleBlur() {
+    isFocused = false;
+    // Small delay to allow clicking trash button
+    setTimeout(saveAndClose, 100);
+  }
+</script>
+
+<div
+  data-link-editor
+  role="dialog"
+  aria-label="Edit link"
+  class="absolute start-0 top-full z-50 mt-2 rounded border shadow-lg bg-popover text-popover-foreground"
+  class:border-border={!isFocused}
+  class:border-ring={isFocused}
+  style="width: 280px"
+>
+  <div class="flex items-center gap-2 px-2">
+    <span class="text-foreground/60 flex-shrink-0">
+      <Globe size={16} />
+    </span>
+    <input
+      bind:this={inputElement}
+      type="text"
+      bind:value={linkUrl}
+      placeholder="Enter URL"
+      class="flex-1 px-1.5 my-1 text-sm outline-none border-none rounded"
+      class:bg-muted={!isFocused}
+      class:bg-background={isFocused}
+      style="padding-top: 0.25rem !important; padding-bottom: 0.25rem !important;"
+      onkeydown={handleKeydown}
+      onfocus={() => (isFocused = true)}
+      onblur={handleBlur}
+    />
+    <button
+      type="button"
+      class="rounded p-1 hover:bg-accent hover:text-accent-foreground text-foreground/60 hover:text-foreground flex-shrink-0"
+      onclick={removeLink}
+      title="Remove link"
+    >
+      <Trash2 size={16} />
+    </button>
+    {#if linkUrl}
+      <a
+        href={linkUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        class="rounded p-1 hover:bg-accent hover:text-accent-foreground text-foreground/60 hover:text-foreground flex-shrink-0"
+        title="Open in new tab"
+      >
+        <ExternalLink size={16} />
+      </a>
+    {/if}
+  </div>
+</div>

package/dist/editor/LinkEditPopover.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Editor } from '@tiptap/core';
+interface Props {
+    editor: Editor;
+    initialUrl?: string;
+    onClose: () => void;
+}
+declare const LinkEditPopover: import("svelte").Component<Props, {}, "">;
+type LinkEditPopover = ReturnType<typeof LinkEditPopover>;
+export default LinkEditPopover;