@cloudvoyant/helical-svelte 0.19.0

package/dist/editor/LinkPreviewCard.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import type { NodeViewProps } from '@tiptap/core';
+  import { NodeViewWrapper } from 'svelte-tiptap';
+  import YouTube from '../YouTube.svelte';
+
+  let { node, deleteNode }: NodeViewProps = $props();
+
+  const { url, title, description, image, favicon, type } = $derived(node.attrs);
+  let imageError = $state(false);
+  let faviconError = $state(false);
+</script>
+
+<NodeViewWrapper class="link-preview relative my-4" data-type={type}>
+  {#if type === 'bookmark'}
+    <a
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+      class="flex overflow-hidden rounded-lg border border-border/70 bg-muted/40 transition-colors hover:bg-muted bookmark-card-edit"
+      style="text-decoration: none !important; color: inherit;"
+    >
+      <div class="flex-1 min-w-0 flex flex-col justify-between px-3 py-2.5">
+        <div>
+          <div class="text-base font-semibold mb-1 line-clamp-1">{title}</div>
+          {#if description}
+            <p class="text-xs text-muted-foreground mb-2 line-clamp-2 leading-snug">
+              {description}
+            </p>
+          {/if}
+        </div>
+        <div class="flex items-center gap-1.5 text-xs text-muted-foreground mt-auto">
+          {#if favicon && !faviconError}
+            <img src={favicon} alt="" class="w-3.5 h-3.5 flex-shrink-0" onerror={() => (faviconError = true)} />
+          {:else}
+            <svg class="w-3 h-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+              <path
+                d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z"
+              />
+            </svg>
+          {/if}
+          <span class="truncate text-xs opacity-80">{new URL(url).hostname}</span>
+        </div>
+      </div>
+      {#if image && !imageError}
+        <div class="flex-shrink-0 w-48 aspect-video bg-muted">
+          <img src={image} alt={title} class="w-full h-full object-cover" onerror={() => (imageError = true)} />
+        </div>
+      {/if}
+    </a>
+  {:else if type === 'embed'}
+    <YouTube {url} {title} />
+  {/if}
+
+  <button
+    type="button"
+    class="absolute top-2 right-2 w-6 h-6 rounded-full bg-muted border-none cursor-pointer text-xl leading-none opacity-0 transition-opacity hover:opacity-100"
+    onclick={deleteNode}
+  >
+    ×
+  </button>
+</NodeViewWrapper>
+
+<style>
+  .line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  :global(.bookmark-card-edit) {
+    background-color: var(--bookmark-bg) !important;
+  }
+
+  :global(.bookmark-card-edit:hover) {
+    background-color: var(--bookmark-bg-hover) !important;
+  }
+
+  :global(.bookmark-card-edit p) {
+    line-height: 1.375 !important;
+  }
+</style>

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

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

package/dist/editor/MentionList.svelte

@@ -0,0 +1,184 @@
+<script lang="ts">
+  import type { MentionItem, MentionListElement } from '@cloudvoyant/helical-ui';
+
+  let {
+    items = [],
+    command,
+    clientRect,
+  }: {
+    items: MentionItem[];
+    command: (item: Partial<MentionItem>) => void;
+    clientRect: (() => DOMRect | null) | null;
+  } = $props();
+
+  let selectedIndex = $state(0);
+  let element: HTMLElement;
+
+  // Expose keyboard handler globally for TipTap
+  $effect(() => {
+    if (element) {
+      (element as MentionListElement).__mentionListKeyDown = onKeyDown;
+    }
+  });
+
+  function onKeyDown(event: KeyboardEvent) {
+    if (event.key === 'ArrowUp') {
+      selectedIndex = Math.max(0, selectedIndex - 1);
+      return true;
+    }
+    if (event.key === 'ArrowDown') {
+      selectedIndex = Math.min(items.length - 1, selectedIndex + 1);
+      return true;
+    }
+    if (event.key === 'Enter') {
+      selectItem(selectedIndex);
+      return true;
+    }
+    return false;
+  }
+
+  function selectItem(index: number) {
+    const item = items[index];
+    if (item) {
+      command({
+        id: item.id,
+        // `label` is the display name; `title` is optional and undefined for user mentions.
+        label: item.label,
+        type: item.type,
+        seriesId: item.seriesId || null,
+      });
+    }
+  }
+
+  // Position dropdown
+  $effect(() => {
+    if (element && clientRect) {
+      const rect = clientRect();
+      if (rect) {
+        element.style.top = `${rect.bottom + window.scrollY}px`;
+        element.style.left = `${rect.left + window.scrollX}px`;
+      }
+    }
+  });
+
+  // Reset selected index when items change
+  $effect(() => {
+    if (items.length > 0 && selectedIndex >= items.length) {
+      selectedIndex = 0;
+    }
+  });
+
+  // Expose onKeyDown for parent
+  export function ref() {
+    return { onKeyDown };
+  }
+</script>
+
+<div bind:this={element} class="mention-list">
+  {#if items.length === 0}
+    <div class="empty">No results</div>
+  {:else}
+    <ul>
+      {#each items as item, index}
+        <li class:selected={index === selectedIndex}>
+          <button type="button" class="mention-item-button" onclick={() => selectItem(index)}>
+            <!-- `label` is the display name (id/label/type/seriesId/title); `title` is an
+                 optional extra and is undefined for plain user mentions. -->
+            <div class="title">{item.label}</div>
+            <div class="type-label">{item.type}</div>
+          </button>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  .mention-list {
+    position: absolute;
+    z-index: 1000;
+    max-height: 300px;
+    overflow-y: auto;
+    background: white;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.375rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    min-width: 280px;
+  }
+
+  :global(.dark) .mention-list {
+    background: #1f2937;
+    border-color: #374151;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0.25rem;
+    margin: 0;
+  }
+
+  li {
+    padding: 0;
+    margin: 0;
+  }
+
+  .mention-item-button {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    padding: 0.375rem 0.5rem;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    color: #111827;
+    transition: background-color 0.1s;
+    background: none;
+    border: none;
+    text-align: left;
+  }
+
+  :global(.dark) .mention-item-button {
+    color: #f9fafb;
+  }
+
+  .mention-item-button:hover,
+  li.selected .mention-item-button {
+    background: #f3f4f6;
+  }
+
+  :global(.dark) li:hover,
+  :global(.dark) li.selected {
+    background: #374151;
+  }
+
+  .title {
+    flex: 1;
+    font-size: 0.875rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .type-label {
+    font-size: 0.75rem;
+    font-style: italic;
+    color: #6b7280;
+    flex-shrink: 0;
+  }
+
+  :global(.dark) .type-label {
+    color: #9ca3af;
+  }
+
+  .empty {
+    padding: 0.75rem;
+    text-align: center;
+    font-size: 0.875rem;
+    color: #9ca3af;
+  }
+
+  :global(.dark) .empty {
+    color: #6b7280;
+  }
+</style>

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

@@ -0,0 +1,13 @@
+import type { MentionItem } from '@cloudvoyant/helical-ui';
+type $$ComponentProps = {
+    items: MentionItem[];
+    command: (item: Partial<MentionItem>) => void;
+    clientRect: (() => DOMRect | null) | null;
+};
+declare const MentionList: import("svelte").Component<$$ComponentProps, {
+    ref: () => {
+        onKeyDown: (event: KeyboardEvent) => boolean;
+    };
+}, "">;
+type MentionList = ReturnType<typeof MentionList>;
+export default MentionList;

package/dist/editor/NoticeNodeView.svelte

@@ -0,0 +1,57 @@
+<!-- libs/helical-svelte/src/editor/NoticeNodeView.svelte -->
+<script lang="ts">
+  import type { NodeViewProps } from '@tiptap/core';
+  import type { NoticeVariants } from '@cloudvoyant/helical-ui';
+  import { NodeViewContent, NodeViewWrapper } from 'svelte-tiptap';
+  import Notice from '../Notice.svelte';
+
+  type NoticeType = Exclude<NoticeVariants['variant'], null | undefined | 'none'>;
+
+  let { node, editor, getPos, updateAttributes }: NodeViewProps = $props();
+  const variant = $derived((node.attrs.variant as NoticeType | undefined) ?? 'info');
+  const title = $derived((node.attrs.title as string | undefined) ?? 'Note');
+  const variants: NoticeType[] = ['info', 'success', 'warning', 'error'];
+
+  function bodyStart(): number | null {
+    const nodePosition = typeof getPos === 'function' ? getPos() : undefined;
+    return typeof nodePosition === 'number' ? nodePosition + 2 : null;
+  }
+
+  function focusBody() {
+    const position = bodyStart();
+    if (position !== null) editor.chain().focus().setTextSelection(position).run();
+  }
+
+  function handleTitleKeydown(event: KeyboardEvent) {
+    if (event.key === 'ArrowDown' || event.key === 'Enter') {
+      event.preventDefault();
+      focusBody();
+    }
+  }
+</script>
+
+<NodeViewWrapper>
+  <Notice {variant} class="editor-notice-node relative my-1 px-2 py-1">
+    <div class="flex items-center gap-2" contenteditable={false}>
+      <input
+        aria-label="Notice title"
+        value={title}
+        oninput={(event) => updateAttributes({ title: event.currentTarget.value })}
+        onkeydown={handleTitleKeydown}
+        class="min-w-0 flex-1 bg-transparent font-semibold tracking-tight outline-none placeholder:text-muted-foreground"
+        placeholder="Notice title"
+      />
+      <select
+        aria-label="Notice type"
+        value={variant}
+        onchange={(event) => updateAttributes({ variant: event.currentTarget.value })}
+        class="rounded border border-input bg-background px-1.5 py-0.5 text-xs"
+      >
+        {#each variants as value}
+          <option {value}>{value}</option>
+        {/each}
+      </select>
+    </div>
+    <NodeViewContent class="[&_p]:m-0" />
+  </Notice>
+</NodeViewWrapper>

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

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

package/dist/editor/Reader.svelte

@@ -0,0 +1,284 @@
+<script lang="ts">
+  import { generateHTML } from '@tiptap/core';
+  import { buildExtensions, type EditorNodeViews } from '@cloudvoyant/helical-ui';
+
+  // The Reader renders static HTML via generateHTML, which only ever calls renderHTML — node
+  // views are never instantiated, so inert factories are correct here.
+  const noopNodeView = () => () => ({}) as never;
+  const inertNodeViews: EditorNodeViews = {
+    image: noopNodeView,
+    urlMention: noopNodeView,
+    linkPreview: noopNodeView,
+    codeBlock: noopNodeView,
+  };
+
+  // Same extension set as the Editor, plus heading ids so headings are anchor-linkable.
+  const extensions = buildExtensions({ headingWithId: true, nodeViews: inertNodeViews });
+
+  let { content, style = '' }: { content: string; style?: string } = $props();
+
+  let html = $derived.by(() => {
+    if (!content) return '';
+    try {
+      const json = JSON.parse(content);
+      // Strip the title node (first H1) — the page renders it separately in the header
+      if (json.content?.[0]?.type === 'heading' && json.content[0].attrs?.level === 1) {
+        json.content = json.content.slice(1);
+      }
+      return generateHTML(json, extensions);
+    } catch {
+      return '';
+    }
+  });
+</script>
+
+<div class="prose prose-lg dark:prose-invert max-w-none reader-content" {style}>
+  {@html html}
+</div>
+
+<style>
+  /* Bookmark links */
+  :global(.reader-content .bookmark-link) {
+    text-decoration: none !important;
+    color: inherit !important;
+    transition: all 0.2s;
+    background-color: var(--bookmark-bg) !important;
+  }
+
+  :global(.reader-content .bookmark-link:hover) {
+    background-color: var(--bookmark-bg-hover) !important;
+    border-color: oklch(var(--border));
+  }
+
+  :global(.reader-content .bookmark-link h3),
+  :global(.reader-content .bookmark-link p),
+  :global(.reader-content .bookmark-link span) {
+    text-decoration: none !important;
+  }
+
+  :global(.reader-content .bookmark-link p) {
+    line-height: 1.375 !important;
+  }
+
+  /* Link preview images */
+  :global(.reader-content .link-preview img) {
+    display: block;
+  }
+
+  :global(.reader-content .link-preview img[src='']),
+  :global(.reader-content .link-preview img:not([src])) {
+    display: none;
+  }
+
+  /* Text alignment */
+  :global(.reader-content [data-text-align='left']) {
+    text-align: left !important;
+  }
+
+  :global(.reader-content [data-text-align='center']) {
+    text-align: center !important;
+  }
+
+  :global(.reader-content [data-text-align='right']) {
+    text-align: right !important;
+  }
+
+  :global(.reader-content [data-text-align='justify']) {
+    text-align: justify !important;
+  }
+
+  /* Code blocks */
+  :global(.reader-content .code-block-wrapper) {
+    position: relative;
+    background-color: var(--code-block-bg);
+    min-height: 80px;
+    margin: 1rem 0;
+  }
+
+  :global(.reader-content .code-block-content) {
+    padding: 2.5rem 1rem 1rem 1rem;
+    overflow-x: auto;
+    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+    font-size: calc(var(--base-font-size, 16px) * 0.875);
+    line-height: var(--line-height, 1.5);
+    margin: 0;
+    background: transparent;
+    color: #24292f;
+    border: none;
+    outline: none;
+    min-height: 60px;
+  }
+
+  :global(.dark .reader-content .code-block-content) {
+    color: #c9d1d9;
+  }
+
+  :global(.reader-content .code-block-content code) {
+    background: none !important;
+    color: inherit !important;
+  }
+
+  :global(.reader-content .code-block-language-label) {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    padding: 0.25rem 0.5rem;
+    background-color: var(--lang-label-bg);
+    color: var(--lang-label-text);
+    letter-spacing: 0.05em;
+    z-index: 10;
+    border: 1px solid var(--lang-label-border);
+    border-radius: 0.25rem;
+  }
+
+  /* Lists */
+  :global(.reader-content ul),
+  :global(.reader-content ol) {
+    list-style-position: outside;
+    padding-left: 1.625rem;
+  }
+
+  :global(.reader-content ul li),
+  :global(.reader-content ol li) {
+    display: list-item !important;
+    margin: 0;
+  }
+
+  :global(.reader-content ul li > p),
+  :global(.reader-content ol li > p) {
+    display: inline;
+    margin: 0;
+  }
+
+  /* Task lists */
+  :global(.reader-content ul[data-type='taskList']) {
+    list-style: none;
+    padding-left: 0;
+  }
+
+  :global(.reader-content ul[data-type='taskList'] li[data-type='taskItem']) {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    margin: 0.25rem 0;
+  }
+
+  :global(.reader-content ul[data-type='taskList'] li[data-type='taskItem'] label) {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    cursor: default;
+  }
+
+  :global(.reader-content ul[data-type='taskList'] li[data-type='taskItem'] input[type='checkbox']) {
+    margin-top: 0.25rem;
+    flex-shrink: 0;
+  }
+
+  /* Indentation */
+  :global(.reader-content .tt-indent-1) {
+    padding-left: 2rem;
+  }
+  :global(.reader-content .tt-indent-2) {
+    padding-left: 4rem;
+  }
+  :global(.reader-content .tt-indent-3) {
+    padding-left: 6rem;
+  }
+  :global(.reader-content .tt-indent-4) {
+    padding-left: 8rem;
+  }
+  :global(.reader-content .tt-indent-5) {
+    padding-left: 10rem;
+  }
+  :global(.reader-content .tt-indent-6) {
+    padding-left: 12rem;
+  }
+  :global(.reader-content .tt-indent-7) {
+    padding-left: 14rem;
+  }
+  :global(.reader-content .tt-indent-8) {
+    padding-left: 16rem;
+  }
+
+  /* URL Mention Pills */
+  :global(.reader-content a.url-mention-pill) {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.125rem 0.375rem;
+    margin: 0 0.125rem -0.125rem 0.125rem;
+    border-radius: 0.375rem;
+    background-color: var(--url-pill-bg);
+    color: inherit;
+    text-decoration: none !important;
+    font-size: 0.875rem;
+    line-height: 1.25;
+    transition: background-color 0.15s;
+    vertical-align: text-bottom;
+  }
+
+  :global(.reader-content a.url-mention-pill:hover) {
+    background-color: #e5e7eb;
+  }
+
+  :global(.dark .reader-content a.url-mention-pill:hover) {
+    background-color: #6b7280;
+  }
+
+  :global(.reader-content a.url-mention-pill svg),
+  :global(.reader-content a.url-mention-pill img) {
+    width: 0.875rem;
+    height: 0.875rem;
+    flex-shrink: 0;
+  }
+
+  /* Internal Mention */
+  :global(.reader-content a.internal-mention) {
+    color: inherit;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+  :global(.reader-content a.internal-mention:hover) {
+    opacity: 0.8;
+  }
+
+  /* Text colors - theme-aware */
+  :global(.reader-content span[data-color='red']) {
+    color: var(--text-red);
+  }
+  :global(.reader-content span[data-color='orange']) {
+    color: var(--text-orange);
+  }
+  :global(.reader-content span[data-color='yellow']) {
+    color: var(--text-yellow);
+  }
+  :global(.reader-content span[data-color='green']) {
+    color: var(--text-green);
+  }
+  :global(.reader-content span[data-color='cyan']) {
+    color: var(--text-cyan);
+  }
+  :global(.reader-content span[data-color='blue']) {
+    color: var(--text-blue);
+  }
+  :global(.reader-content span[data-color='violet']) {
+    color: var(--text-violet);
+  }
+  :global(.reader-content span[data-color='fuchsia']) {
+    color: var(--text-fuchsia);
+  }
+  :global(.reader-content span[data-color='slate']) {
+    color: var(--text-slate);
+  }
+
+  /* Tiptap writes selected highlight colors inline. This non-important default is only the
+     fallback for highlights without an explicit color. */
+  :global(.reader-content mark) {
+    background-color: var(--highlight-yellow);
+    color: inherit !important;
+  }
+</style>

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

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