@refraction-ui/astro 0.4.2 → 0.4.4

package/dist/rich-editor/markdown-shortcuts.ts

@@ -0,0 +1,248 @@
+/**
+ * Markdown shortcuts — auto-convert markdown syntax as the user types.
+ *
+ * Block shortcuts trigger at the start of a block (e.g. "# " -> heading).
+ * Inline shortcuts trigger when a closing marker completes a pair (e.g. "**text**" -> bold).
+ */
+
+import type { Document, Block, Mark, MarkType, BlockType } from './model.js'
+import type { Selection } from './selection.js'
+import type { EditorState } from './operations.js'
+import {
+  findBlockById,
+  getBlockText,
+  createTextSegment,
+  normalizeContent,
+  cloneDocument,
+} from './model.js'
+import { createCollapsedSelection, isCollapsed } from './selection.js'
+import { changeBlockType } from './operations.js'
+
+// ---------------------------------------------------------------------------
+// Block shortcuts
+// ---------------------------------------------------------------------------
+
+interface BlockShortcut {
+  pattern: RegExp
+  type: BlockType
+  meta?: Record<string, unknown>
+}
+
+const BLOCK_SHORTCUTS: BlockShortcut[] = [
+  { pattern: /^### $/, type: 'heading', meta: { level: 3 } },
+  { pattern: /^## $/, type: 'heading', meta: { level: 2 } },
+  { pattern: /^# $/, type: 'heading', meta: { level: 1 } },
+  { pattern: /^- $/, type: 'list-item', meta: { listType: 'bullet' } },
+  { pattern: /^\* $/, type: 'list-item', meta: { listType: 'bullet' } },
+  { pattern: /^1\. $/, type: 'list-item', meta: { listType: 'ordered' } },
+  { pattern: /^> $/, type: 'blockquote' },
+  { pattern: /^```$/, type: 'code-block' },
+  { pattern: /^---$/, type: 'divider' },
+]
+
+function tryBlockShortcut(
+  doc: Document,
+  sel: Selection,
+  char: string,
+): { doc: Document; sel: Selection; consumed: boolean } | null {
+  if (!isCollapsed(sel)) return null
+
+  const block = findBlockById(doc, sel.anchor.blockId)
+  if (!block || block.type !== 'paragraph') return null
+
+  const text = getBlockText(block)
+  const textBeforeCursor = text.slice(0, sel.anchor.offset) + char
+
+  for (const shortcut of BLOCK_SHORTCUTS) {
+    if (shortcut.pattern.test(textBeforeCursor)) {
+      const d = cloneDocument(doc)
+      const b = d.blocks.find((bl) => bl.id === block.id)!
+
+      // Clear the shortcut text
+      b.content = [createTextSegment('')]
+
+      // Special case for code-block — the ``` doesn't need the trailing space
+      // and divider --- is also self-contained
+      b.type = shortcut.type
+      if (shortcut.meta) {
+        b.meta = { ...shortcut.meta }
+      }
+
+      if (shortcut.type === 'divider') {
+        b.content = [createTextSegment('')]
+      }
+
+      return {
+        doc: d,
+        sel: createCollapsedSelection(b.id, 0),
+        consumed: true,
+      }
+    }
+  }
+
+  return null
+}
+
+// ---------------------------------------------------------------------------
+// Inline shortcuts
+// ---------------------------------------------------------------------------
+
+interface InlineShortcut {
+  openMarker: string
+  closeMarker: string
+  markType: MarkType
+}
+
+const INLINE_SHORTCUTS: InlineShortcut[] = [
+  { openMarker: '**', closeMarker: '**', markType: 'bold' },
+  { openMarker: '__', closeMarker: '__', markType: 'bold' },
+  { openMarker: '*', closeMarker: '*', markType: 'italic' },
+  { openMarker: '_', closeMarker: '_', markType: 'italic' },
+  { openMarker: '~~', closeMarker: '~~', markType: 'strikethrough' },
+  { openMarker: '`', closeMarker: '`', markType: 'code' },
+]
+
+/**
+ * Try to match an inline shortcut like **bold** or *italic*.
+ * We look at the text before the cursor + the new char, and see if it
+ * completes a matched pair of markers with content between them.
+ */
+function tryInlineShortcut(
+  doc: Document,
+  sel: Selection,
+  char: string,
+): { doc: Document; sel: Selection; consumed: boolean } | null {
+  if (!isCollapsed(sel)) return null
+
+  const block = findBlockById(doc, sel.anchor.blockId)
+  if (!block) return null
+
+  const text = getBlockText(block)
+  const textWithChar = text.slice(0, sel.anchor.offset) + char
+
+  // Check each inline shortcut — longer markers first (already sorted)
+  for (const shortcut of INLINE_SHORTCUTS) {
+    const { openMarker, closeMarker, markType } = shortcut
+
+    // Check if textWithChar ends with the close marker
+    if (!textWithChar.endsWith(closeMarker)) continue
+
+    // Find the matching open marker before the close marker
+    const beforeClose = textWithChar.slice(0, textWithChar.length - closeMarker.length)
+
+    // For single-char markers like * and _, we need to be careful not to
+    // confuse with the double-char ** and __ markers.
+    // The open marker should not be preceded by the same character (to avoid ** matching as two *).
+    const openIdx = beforeClose.lastIndexOf(openMarker)
+    if (openIdx === -1) continue
+
+    // Make sure there's content between the markers
+    const content = beforeClose.slice(openIdx + openMarker.length)
+    if (content.length === 0) continue
+
+    // For single-char markers, check that the char before the open marker isn't the same
+    // (to avoid **text** being matched by the * shortcut on the inner *)
+    if (openMarker.length === 1 && openIdx > 0 && beforeClose[openIdx - 1] === openMarker) continue
+
+    // We have a valid match! Replace the markers with marked content.
+    const d = cloneDocument(doc)
+    const b = d.blocks.find((bl) => bl.id === block.id)!
+
+    const beforeMarkerText = text.slice(0, openIdx)
+    const afterCursorText = text.slice(sel.anchor.offset)
+
+    const mark: Mark = { type: markType }
+    const segments = [
+      ...(beforeMarkerText ? [createTextSegment(beforeMarkerText)] : []),
+      createTextSegment(content, [mark]),
+      ...(afterCursorText ? [createTextSegment(afterCursorText)] : []),
+    ]
+
+    b.content = normalizeContent(segments)
+
+    const newOffset = openIdx + content.length
+    return {
+      doc: d,
+      sel: createCollapsedSelection(b.id, newOffset),
+      consumed: true,
+    }
+  }
+
+  return null
+}
+
+// ---------------------------------------------------------------------------
+// Link shortcut: [text](url)
+// ---------------------------------------------------------------------------
+function tryLinkShortcut(
+  doc: Document,
+  sel: Selection,
+  char: string,
+): { doc: Document; sel: Selection; consumed: boolean } | null {
+  if (!isCollapsed(sel) || char !== ')') return null
+
+  const block = findBlockById(doc, sel.anchor.blockId)
+  if (!block) return null
+
+  const text = getBlockText(block)
+  const textWithChar = text.slice(0, sel.anchor.offset) + char
+
+  // Look for [text](url) pattern ending at cursor
+  const match = textWithChar.match(/\[([^\]]+)\]\(([^)]+)\)$/)
+  if (!match) return null
+
+  const fullMatch = match[0]
+  const linkText = match[1]
+  const linkUrl = match[2]
+
+  const d = cloneDocument(doc)
+  const b = d.blocks.find((bl) => bl.id === block.id)!
+
+  const matchStart = textWithChar.length - fullMatch.length
+  const beforeText = text.slice(0, matchStart)
+  const afterText = text.slice(sel.anchor.offset)
+
+  const mark: Mark = { type: 'link', attrs: { href: linkUrl } }
+  const segments = [
+    ...(beforeText ? [createTextSegment(beforeText)] : []),
+    createTextSegment(linkText, [mark]),
+    ...(afterText ? [createTextSegment(afterText)] : []),
+  ]
+
+  b.content = normalizeContent(segments)
+
+  const newOffset = matchStart + linkText.length
+  return {
+    doc: d,
+    sel: createCollapsedSelection(b.id, newOffset),
+    consumed: true,
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Main entry point
+// ---------------------------------------------------------------------------
+
+/**
+ * Process a character input and check if it triggers a markdown shortcut.
+ * Returns { consumed: true } if a shortcut was applied, { consumed: false } otherwise.
+ */
+export function processMarkdownShortcut(
+  doc: Document,
+  sel: Selection,
+  char: string,
+): { doc: Document; sel: Selection; consumed: boolean } {
+  // Try block shortcuts first (they require a space or specific ending)
+  const blockResult = tryBlockShortcut(doc, sel, char)
+  if (blockResult) return blockResult
+
+  // Try link shortcut
+  const linkResult = tryLinkShortcut(doc, sel, char)
+  if (linkResult) return linkResult
+
+  // Try inline shortcuts
+  const inlineResult = tryInlineShortcut(doc, sel, char)
+  if (inlineResult) return inlineResult
+
+  return { doc, sel, consumed: false }
+}

package/dist/rich-editor/mentions.ts

@@ -0,0 +1,162 @@
+/**
+ * Mention system — trigger on "@" to show a searchable menu of users/channels/teams.
+ */
+
+import type { Document } from './model.js'
+import type { Selection } from './selection.js'
+import type { MentionSegment } from './model.js'
+import { findBlockById, getBlockText, createMentionSegment } from './model.js'
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface MentionOption {
+  id: string
+  label: string
+  avatar?: string
+  type: 'user' | 'channel' | 'team'
+}
+
+export interface MentionMenu {
+  isOpen: boolean
+  query: string
+  filteredOptions: MentionOption[]
+  selectedIndex: number
+  open(): void
+  close(): void
+  search(query: string): void
+  selectNext(): void
+  selectPrevious(): void
+  select(option: MentionOption): { mention: MentionSegment }
+}
+
+// ---------------------------------------------------------------------------
+// Fuzzy matching
+// ---------------------------------------------------------------------------
+
+function fuzzyMatch(text: string, query: string): boolean {
+  const t = text.toLowerCase()
+  const q = query.toLowerCase()
+  if (q === '') return true
+  if (t.includes(q)) return true
+
+  // Simple fuzzy: all characters of query appear in order in text
+  let qi = 0
+  for (let ti = 0; ti < t.length && qi < q.length; ti++) {
+    if (t[ti] === q[qi]) qi++
+  }
+  return qi === q.length
+}
+
+function matchScore(option: MentionOption, query: string): number {
+  const q = query.toLowerCase()
+  const label = option.label.toLowerCase()
+
+  if (label === q) return 100
+  if (label.startsWith(q)) return 90
+  if (label.includes(q)) return 80
+  // Fuzzy match gets lower score
+  return 50
+}
+
+// ---------------------------------------------------------------------------
+// Menu factory
+// ---------------------------------------------------------------------------
+
+export function createMentionMenu(options: MentionOption[]): MentionMenu {
+  const state = {
+    isOpen: false,
+    query: '',
+    filteredOptions: [] as MentionOption[],
+    selectedIndex: 0,
+  }
+
+  function updateFiltered() {
+    if (state.query === '') {
+      state.filteredOptions = [...options]
+    } else {
+      state.filteredOptions = options
+        .filter((opt) => fuzzyMatch(opt.label, state.query) || fuzzyMatch(opt.id, state.query))
+        .sort((a, b) => matchScore(b, state.query) - matchScore(a, state.query))
+    }
+    if (state.selectedIndex >= state.filteredOptions.length) {
+      state.selectedIndex = Math.max(0, state.filteredOptions.length - 1)
+    }
+  }
+
+  const menu: MentionMenu = {
+    get isOpen() { return state.isOpen },
+    get query() { return state.query },
+    get filteredOptions() { return state.filteredOptions },
+    get selectedIndex() { return state.selectedIndex },
+
+    open() {
+      state.isOpen = true
+      state.query = ''
+      state.selectedIndex = 0
+      updateFiltered()
+    },
+
+    close() {
+      state.isOpen = false
+      state.query = ''
+      state.filteredOptions = []
+      state.selectedIndex = 0
+    },
+
+    search(query: string) {
+      state.query = query
+      updateFiltered()
+    },
+
+    selectNext() {
+      if (state.filteredOptions.length === 0) return
+      state.selectedIndex = (state.selectedIndex + 1) % state.filteredOptions.length
+    },
+
+    selectPrevious() {
+      if (state.filteredOptions.length === 0) return
+      state.selectedIndex =
+        (state.selectedIndex - 1 + state.filteredOptions.length) % state.filteredOptions.length
+    },
+
+    select(option: MentionOption): { mention: MentionSegment } {
+      menu.close()
+      return {
+        mention: createMentionSegment(option.id, `@${option.label}`),
+      }
+    },
+  }
+
+  return menu
+}
+
+/**
+ * Detect whether the user has typed "@" that should trigger the mention menu.
+ */
+export function detectMentionTrigger(
+  doc: Document,
+  sel: Selection,
+): { triggered: boolean; query: string } {
+  const block = findBlockById(doc, sel.anchor.blockId)
+  if (!block) return { triggered: false, query: '' }
+
+  const text = getBlockText(block)
+  const textBeforeCursor = text.slice(0, sel.anchor.offset)
+
+  // Look for "@" preceded by start-of-text or a space
+  const atIdx = textBeforeCursor.lastIndexOf('@')
+  if (atIdx === -1) return { triggered: false, query: '' }
+
+  // The @ must be at position 0 or preceded by a space
+  if (atIdx > 0 && textBeforeCursor[atIdx - 1] !== ' ') {
+    return { triggered: false, query: '' }
+  }
+
+  const query = textBeforeCursor.slice(atIdx + 1)
+  // If query contains spaces, the mention trigger is no longer active
+  if (query.includes(' ')) return { triggered: false, query: '' }
+
+  return { triggered: true, query }
+}

package/dist/rich-editor/model.ts

@@ -0,0 +1,206 @@
+/**
+ * Core data model for the rich text editor.
+ * Document is a tree of blocks, each containing inline content segments.
+ */
+
+// ---------------------------------------------------------------------------
+// Block types
+// ---------------------------------------------------------------------------
+export type BlockType =
+  | 'paragraph'
+  | 'heading'
+  | 'blockquote'
+  | 'code-block'
+  | 'list-item'
+  | 'divider'
+  | 'image'
+
+export type HeadingLevel = 1 | 2 | 3
+
+// ---------------------------------------------------------------------------
+// Inline content
+// ---------------------------------------------------------------------------
+export type MarkType = 'bold' | 'italic' | 'strikethrough' | 'code' | 'underline' | 'link'
+
+export interface Mark {
+  type: MarkType
+  attrs?: Record<string, string>
+}
+
+export interface TextSegment {
+  type: 'text'
+  text: string
+  marks: Mark[]
+}
+
+export interface MentionSegment {
+  type: 'mention'
+  id: string
+  label: string
+}
+
+export interface EmojiSegment {
+  type: 'emoji'
+  shortcode: string
+  unicode: string
+}
+
+export type InlineContent = TextSegment | MentionSegment | EmojiSegment
+
+// ---------------------------------------------------------------------------
+// Block
+// ---------------------------------------------------------------------------
+export interface Block {
+  id: string
+  type: BlockType
+  content: InlineContent[]
+  meta?: Record<string, unknown>
+  indent?: number
+  children?: Block[]
+}
+
+// ---------------------------------------------------------------------------
+// Document
+// ---------------------------------------------------------------------------
+export interface Document {
+  blocks: Block[]
+  version: number
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+let _idCounter = 0
+
+export function generateBlockId(): string {
+  _idCounter++
+  return `block-${_idCounter}`
+}
+
+export function resetBlockIdCounter(): void {
+  _idCounter = 0
+}
+
+export function createTextSegment(text: string, marks: Mark[] = []): TextSegment {
+  return { type: 'text', text, marks }
+}
+
+export function createMentionSegment(id: string, label: string): MentionSegment {
+  return { type: 'mention', id, label }
+}
+
+export function createEmojiSegment(shortcode: string, unicode: string): EmojiSegment {
+  return { type: 'emoji', shortcode, unicode }
+}
+
+export function createBlock(
+  type: BlockType = 'paragraph',
+  content: InlineContent[] = [],
+  meta?: Record<string, unknown>,
+): Block {
+  return {
+    id: generateBlockId(),
+    type,
+    content: content.length === 0 ? [createTextSegment('')] : content,
+    ...(meta ? { meta } : {}),
+  }
+}
+
+export function createDocument(blocks?: Block[]): Document {
+  return {
+    blocks: blocks && blocks.length > 0 ? blocks : [createBlock('paragraph')],
+    version: 1,
+  }
+}
+
+/** Get the full plain text length of a block's inline content. */
+export function getBlockTextLength(block: Block): number {
+  let len = 0
+  for (const seg of block.content) {
+    if (seg.type === 'text') {
+      len += seg.text.length
+    } else if (seg.type === 'mention') {
+      len += seg.label.length
+    } else if (seg.type === 'emoji') {
+      len += seg.unicode.length
+    }
+  }
+  return len
+}
+
+/** Get the full plain text of a block's inline content. */
+export function getBlockText(block: Block): string {
+  let text = ''
+  for (const seg of block.content) {
+    if (seg.type === 'text') {
+      text += seg.text
+    } else if (seg.type === 'mention') {
+      text += seg.label
+    } else if (seg.type === 'emoji') {
+      text += seg.unicode
+    }
+  }
+  return text
+}
+
+/** Find a block by its id. */
+export function findBlockById(doc: Document, blockId: string): Block | undefined {
+  for (const block of doc.blocks) {
+    if (block.id === blockId) return block
+    if (block.children) {
+      for (const child of block.children) {
+        if (child.id === blockId) return child
+      }
+    }
+  }
+  return undefined
+}
+
+/** Find the index of a block by its id. Returns -1 if not found at top level. */
+export function findBlockIndex(doc: Document, blockId: string): number {
+  return doc.blocks.findIndex((b) => b.id === blockId)
+}
+
+/** Deep clone a document. */
+export function cloneDocument(doc: Document): Document {
+  return JSON.parse(JSON.stringify(doc)) as Document
+}
+
+/** Deep clone a block. */
+export function cloneBlock(block: Block): Block {
+  return JSON.parse(JSON.stringify(block)) as Block
+}
+
+/** Check that marks are equal (order-insensitive). */
+export function marksEqual(a: Mark[], b: Mark[]): boolean {
+  if (a.length !== b.length) return false
+  for (const markA of a) {
+    const found = b.find(
+      (markB) =>
+        markB.type === markA.type &&
+        JSON.stringify(markB.attrs ?? {}) === JSON.stringify(markA.attrs ?? {}),
+    )
+    if (!found) return false
+  }
+  return true
+}
+
+/** Normalize a block's inline content — merge adjacent text segments with identical marks. */
+export function normalizeContent(content: InlineContent[]): InlineContent[] {
+  const result: InlineContent[] = []
+  for (const seg of content) {
+    if (seg.type === 'text' && seg.text === '' && content.length > 1) {
+      continue // skip empty text segments unless it's the only one
+    }
+    const last = result[result.length - 1]
+    if (seg.type === 'text' && last && last.type === 'text' && marksEqual(last.marks, seg.marks)) {
+      last.text += seg.text
+    } else {
+      result.push({ ...seg, ...(seg.type === 'text' ? { marks: [...seg.marks] } : {}) })
+    }
+  }
+  if (result.length === 0) {
+    return [createTextSegment('')]
+  }
+  return result
+}