@refraction-ui/astro 0.4.0 → 0.4.4

package/dist/rich-editor/editor.ts

@@ -0,0 +1,342 @@
+/**
+ * Main editor factory — ties together all subsystems into a unified API.
+ */
+
+import type {
+  Document,
+  Mark,
+  MarkType,
+  BlockType,
+} from './model.js'
+import {
+  createDocument,
+  getBlockTextLength,
+} from './model.js'
+import type { Selection } from './selection.js'
+import {
+  selectionAtDocStart,
+} from './selection.js'
+import type { EditorState } from './operations.js'
+import {
+  insertText as opInsertText,
+  deleteBackward as opDeleteBackward,
+  deleteForward as opDeleteForward,
+  splitBlock as opSplitBlock,
+  changeBlockType as opChangeBlockType,
+  indentBlock as opIndentBlock,
+  outdentBlock as opOutdentBlock,
+  toggleMark as opToggleMark,
+  getActiveMarks as opGetActiveMarks,
+} from './operations.js'
+import { processMarkdownShortcut } from './markdown-shortcuts.js'
+import type { SlashCommand, SlashCommandMenu } from './slash-commands.js'
+import { createSlashCommandMenu } from './slash-commands.js'
+import type { MentionOption, MentionMenu } from './mentions.js'
+import { createMentionMenu } from './mentions.js'
+import { toMarkdown, fromMarkdown, toHTML, toPlainText } from './serialization.js'
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface EditorConfig {
+  initialContent?: Document | string
+  placeholder?: string
+  readOnly?: boolean
+  maxLength?: number
+  slashCommands?: SlashCommand[]
+  mentionOptions?: MentionOption[]
+  onUpdate?: (state: EditorState) => void
+}
+
+export interface EditorAPI {
+  // State
+  getState(): EditorState
+  getDoc(): Document
+  getSelection(): Selection
+
+  // Content
+  insertText(text: string): void
+  deleteBackward(): void
+  deleteForward(): void
+  toggleMark(mark: MarkType): void
+  changeBlockType(type: BlockType, meta?: Record<string, unknown>): void
+  splitBlock(): void
+  indentBlock(): void
+  outdentBlock(): void
+
+  // Markdown
+  getMarkdown(): string
+  getHTML(): string
+  getPlainText(): string
+  setContent(markdown: string): void
+
+  // Menus
+  slashMenu: SlashCommandMenu
+  mentionMenu: MentionMenu
+
+  // History
+  undo(): void
+  redo(): void
+  canUndo(): boolean
+  canRedo(): boolean
+
+  // Marks
+  getActiveMarks(): Mark[]
+  isMarkActive(type: MarkType): boolean
+
+  // State queries
+  isEmpty(): boolean
+  getCharCount(): number
+  getWordCount(): number
+
+  // Events
+  subscribe(fn: (state: EditorState) => void): () => void
+  destroy(): void
+}
+
+// ---------------------------------------------------------------------------
+// Factory
+// ---------------------------------------------------------------------------
+
+export function createEditor(config?: EditorConfig): EditorAPI {
+  const {
+    initialContent,
+    placeholder,
+    readOnly = false,
+    maxLength,
+    slashCommands,
+    mentionOptions = [],
+    onUpdate,
+  } = config ?? {}
+
+  // Initialize document
+  let doc: Document = (() => {
+    if (!initialContent) return createDocument()
+    if (typeof initialContent === 'string') return fromMarkdown(initialContent)
+    return JSON.parse(JSON.stringify(initialContent)) as Document
+  })()
+
+  let selection: Selection = selectionAtDocStart(doc)
+  const slashMenu = createSlashCommandMenu(slashCommands)
+  const mentionMenuInstance = createMentionMenu(mentionOptions)
+  const subscribers: Set<(state: EditorState) => void> = new Set()
+
+  // Internal undo/redo stacks (stores pre-edit snapshots)
+  let undoStack: EditorState[] = []
+  let redoStack: EditorState[] = []
+  const MAX_HISTORY = 100
+
+  function cloneState(): EditorState {
+    return JSON.parse(JSON.stringify({ doc, selection })) as EditorState
+  }
+
+  function getState(): EditorState {
+    return { doc, selection }
+  }
+
+  function notify(): void {
+    const state = getState()
+    for (const fn of subscribers) {
+      fn(state)
+    }
+    onUpdate?.(state)
+  }
+
+  function pushHistory(): void {
+    undoStack.push(cloneState())
+    if (undoStack.length > MAX_HISTORY) {
+      undoStack = undoStack.slice(undoStack.length - MAX_HISTORY)
+    }
+    // New edit clears redo
+    redoStack = []
+  }
+
+  function getPlainTextContent(): string {
+    return toPlainText(doc)
+  }
+
+  function checkMaxLength(text: string): boolean {
+    if (maxLength === undefined) return true
+    const currentLen = getPlainTextContent().length
+    return currentLen + text.length <= maxLength
+  }
+
+  // ---------------------------------------------------------------------------
+  // API
+  // ---------------------------------------------------------------------------
+
+  const api: EditorAPI = {
+    getState,
+    getDoc: () => doc,
+    getSelection: () => selection,
+
+    insertText(text: string): void {
+      if (readOnly) return
+      if (!checkMaxLength(text)) return
+
+      pushHistory()
+
+      // Check markdown shortcuts for single character input
+      if (text.length === 1) {
+        const shortcutResult = processMarkdownShortcut(doc, selection, text)
+        if (shortcutResult.consumed) {
+          doc = shortcutResult.doc
+          selection = shortcutResult.sel
+          notify()
+          return
+        }
+      }
+
+      const result = opInsertText(doc, selection, text)
+      doc = result.doc
+      selection = result.selection
+      notify()
+    },
+
+    deleteBackward(): void {
+      if (readOnly) return
+      pushHistory()
+      const result = opDeleteBackward(doc, selection)
+      doc = result.doc
+      selection = result.selection
+      notify()
+    },
+
+    deleteForward(): void {
+      if (readOnly) return
+      pushHistory()
+      const result = opDeleteForward(doc, selection)
+      doc = result.doc
+      selection = result.selection
+      notify()
+    },
+
+    toggleMark(mark: MarkType): void {
+      if (readOnly) return
+      pushHistory()
+      const result = opToggleMark(doc, selection, mark)
+      doc = result.doc
+      selection = result.selection
+      notify()
+    },
+
+    changeBlockType(type: BlockType, meta?: Record<string, unknown>): void {
+      if (readOnly) return
+      pushHistory()
+      const result = opChangeBlockType(doc, selection, type, meta)
+      doc = result.doc
+      selection = result.selection
+      notify()
+    },
+
+    splitBlock(): void {
+      if (readOnly) return
+      pushHistory()
+      const result = opSplitBlock(doc, selection)
+      doc = result.doc
+      selection = result.selection
+      notify()
+    },
+
+    indentBlock(): void {
+      if (readOnly) return
+      pushHistory()
+      const result = opIndentBlock(doc, selection)
+      doc = result.doc
+      selection = result.selection
+      notify()
+    },
+
+    outdentBlock(): void {
+      if (readOnly) return
+      pushHistory()
+      const result = opOutdentBlock(doc, selection)
+      doc = result.doc
+      selection = result.selection
+      notify()
+    },
+
+    getMarkdown: () => toMarkdown(doc),
+    getHTML: () => toHTML(doc),
+    getPlainText: () => toPlainText(doc),
+
+    setContent(markdown: string): void {
+      pushHistory()
+      doc = fromMarkdown(markdown)
+      selection = selectionAtDocStart(doc)
+      notify()
+    },
+
+    slashMenu,
+    mentionMenu: mentionMenuInstance,
+
+    undo(): void {
+      if (undoStack.length === 0) return
+      // Save current state to redo stack
+      redoStack.push(cloneState())
+      // Restore from undo stack
+      const state = undoStack.pop()!
+      doc = state.doc
+      selection = state.selection
+      notify()
+    },
+
+    redo(): void {
+      if (redoStack.length === 0) return
+      // Save current state to undo stack
+      undoStack.push(cloneState())
+      // Restore from redo stack
+      const state = redoStack.pop()!
+      doc = state.doc
+      selection = state.selection
+      notify()
+    },
+
+    canUndo: () => undoStack.length > 0,
+    canRedo: () => redoStack.length > 0,
+
+    getActiveMarks(): Mark[] {
+      return opGetActiveMarks(doc, selection)
+    },
+
+    isMarkActive(type: MarkType): boolean {
+      return opGetActiveMarks(doc, selection).some((m) => m.type === type)
+    },
+
+    isEmpty(): boolean {
+      if (doc.blocks.length === 0) return true
+      if (doc.blocks.length > 1) return false
+      const block = doc.blocks[0]
+      return getBlockTextLength(block) === 0
+    },
+
+    getCharCount(): number {
+      let count = 0
+      for (const block of doc.blocks) {
+        count += getBlockTextLength(block)
+      }
+      return count
+    },
+
+    getWordCount(): number {
+      const text = toPlainText(doc)
+      const trimmed = text.trim()
+      if (trimmed === '') return 0
+      return trimmed.split(/\s+/).length
+    },
+
+    subscribe(fn: (state: EditorState) => void): () => void {
+      subscribers.add(fn)
+      return () => { subscribers.delete(fn) }
+    },
+
+    destroy(): void {
+      subscribers.clear()
+      undoStack = []
+      redoStack = []
+    },
+  }
+
+  return api
+}

package/dist/rich-editor/emoji.ts

@@ -0,0 +1,175 @@
+/**
+ * Emoji system — shortcode to unicode mapping and search.
+ */
+
+// ---------------------------------------------------------------------------
+// Emoji map
+// ---------------------------------------------------------------------------
+
+export const EMOJI_MAP: Record<string, string> = {
+  ':smile:': '\u{1F604}',
+  ':laugh:': '\u{1F602}',
+  ':joy:': '\u{1F602}',
+  ':grin:': '\u{1F601}',
+  ':wink:': '\u{1F609}',
+  ':blush:': '\u{1F60A}',
+  ':heart_eyes:': '\u{1F60D}',
+  ':kissing:': '\u{1F617}',
+  ':thinking:': '\u{1F914}',
+  ':neutral:': '\u{1F610}',
+  ':expressionless:': '\u{1F611}',
+  ':unamused:': '\u{1F612}',
+  ':sweat:': '\u{1F613}',
+  ':pensive:': '\u{1F614}',
+  ':confused:': '\u{1F615}',
+  ':disappointed:': '\u{1F61E}',
+  ':worried:': '\u{1F61F}',
+  ':angry:': '\u{1F620}',
+  ':rage:': '\u{1F621}',
+  ':cry:': '\u{1F622}',
+  ':sob:': '\u{1F62D}',
+  ':scream:': '\u{1F631}',
+  ':fearful:': '\u{1F628}',
+  ':cold_sweat:': '\u{1F630}',
+  ':relieved:': '\u{1F60C}',
+  ':sleepy:': '\u{1F62A}',
+  ':sleeping:': '\u{1F634}',
+  ':mask:': '\u{1F637}',
+  ':sunglasses:': '\u{1F60E}',
+  ':nerd:': '\u{1F913}',
+  ':heart:': '\u{2764}\u{FE0F}',
+  ':broken_heart:': '\u{1F494}',
+  ':sparkling_heart:': '\u{1F496}',
+  ':two_hearts:': '\u{1F495}',
+  ':fire:': '\u{1F525}',
+  ':100:': '\u{1F4AF}',
+  ':star:': '\u{2B50}',
+  ':star2:': '\u{1F31F}',
+  ':sparkles:': '\u{2728}',
+  ':thumbsup:': '\u{1F44D}',
+  ':thumbsdown:': '\u{1F44E}',
+  ':wave:': '\u{1F44B}',
+  ':clap:': '\u{1F44F}',
+  ':raised_hands:': '\u{1F64C}',
+  ':pray:': '\u{1F64F}',
+  ':muscle:': '\u{1F4AA}',
+  ':point_up:': '\u{261D}\u{FE0F}',
+  ':point_down:': '\u{1F447}',
+  ':point_left:': '\u{1F448}',
+  ':point_right:': '\u{1F449}',
+  ':ok_hand:': '\u{1F44C}',
+  ':v:': '\u{270C}\u{FE0F}',
+  ':eyes:': '\u{1F440}',
+  ':tongue:': '\u{1F445}',
+  ':lips:': '\u{1F444}',
+  ':rocket:': '\u{1F680}',
+  ':tada:': '\u{1F389}',
+  ':confetti:': '\u{1F38A}',
+  ':balloon:': '\u{1F388}',
+  ':gift:': '\u{1F381}',
+  ':trophy:': '\u{1F3C6}',
+  ':medal:': '\u{1F3C5}',
+  ':crown:': '\u{1F451}',
+  ':gem:': '\u{1F48E}',
+  ':bell:': '\u{1F514}',
+  ':check:': '\u{2705}',
+  ':x:': '\u{274C}',
+  ':warning:': '\u{26A0}\u{FE0F}',
+  ':no_entry:': '\u{26D4}',
+  ':question:': '\u{2753}',
+  ':exclamation:': '\u{2757}',
+  ':bulb:': '\u{1F4A1}',
+  ':book:': '\u{1F4D6}',
+  ':memo:': '\u{1F4DD}',
+  ':pencil:': '\u{270F}\u{FE0F}',
+  ':calendar:': '\u{1F4C5}',
+  ':clock:': '\u{1F550}',
+  ':hourglass:': '\u{231B}',
+  ':lock:': '\u{1F512}',
+  ':key:': '\u{1F511}',
+  ':hammer:': '\u{1F528}',
+  ':wrench:': '\u{1F527}',
+  ':link:': '\u{1F517}',
+  ':paperclip:': '\u{1F4CE}',
+  ':scissors:': '\u{2702}\u{FE0F}',
+  ':package:': '\u{1F4E6}',
+  ':email:': '\u{1F4E7}',
+  ':phone:': '\u{1F4DE}',
+  ':computer:': '\u{1F4BB}',
+  ':house:': '\u{1F3E0}',
+  ':tree:': '\u{1F333}',
+  ':sun:': '\u{2600}\u{FE0F}',
+  ':moon:': '\u{1F319}',
+  ':cloud:': '\u{2601}\u{FE0F}',
+  ':rain:': '\u{1F327}\u{FE0F}',
+  ':snow:': '\u{2744}\u{FE0F}',
+  ':zap:': '\u{26A1}',
+  ':rainbow:': '\u{1F308}',
+  ':pizza:': '\u{1F355}',
+  ':hamburger:': '\u{1F354}',
+  ':coffee:': '\u{2615}',
+  ':beer:': '\u{1F37A}',
+  ':wine:': '\u{1F377}',
+  ':cake:': '\u{1F370}',
+  ':dog:': '\u{1F436}',
+  ':cat:': '\u{1F431}',
+  ':poop:': '\u{1F4A9}',
+  ':ghost:': '\u{1F47B}',
+  ':skull:': '\u{1F480}',
+  ':alien:': '\u{1F47D}',
+  ':robot:': '\u{1F916}',
+  ':handshake:': '\u{1F91D}',
+  ':pray2:': '\u{1F64F}',
+  ':salute:': '\u{1FAE1}',
+}
+
+// ---------------------------------------------------------------------------
+// Detection and search
+// ---------------------------------------------------------------------------
+
+/**
+ * Detect if a text ends with a completed emoji shortcode like `:smile:`.
+ * Returns the shortcode and its unicode value if found, null otherwise.
+ */
+export function detectEmojiShortcode(
+  text: string,
+): { shortcode: string; unicode: string } | null {
+  // Look for a pattern like :word: at the end of text
+  const match = text.match(/:([a-z0-9_]+):$/)
+  if (!match) return null
+
+  const shortcode = `:${match[1]}:`
+  const unicode = EMOJI_MAP[shortcode]
+  if (!unicode) return null
+
+  return { shortcode, unicode }
+}
+
+/**
+ * Search emoji by partial query (matches against shortcode names).
+ */
+export function searchEmoji(
+  query: string,
+): { shortcode: string; unicode: string }[] {
+  const q = query.toLowerCase().replace(/^:/, '').replace(/:$/, '')
+  if (q === '') {
+    return Object.entries(EMOJI_MAP).map(([shortcode, unicode]) => ({ shortcode, unicode }))
+  }
+
+  return Object.entries(EMOJI_MAP)
+    .filter(([shortcode]) => {
+      const name = shortcode.slice(1, -1) // remove colons
+      return name.includes(q)
+    })
+    .map(([shortcode, unicode]) => ({ shortcode, unicode }))
+    .sort((a, b) => {
+      const aName = a.shortcode.slice(1, -1)
+      const bName = b.shortcode.slice(1, -1)
+      // Exact start match first
+      const aStarts = aName.startsWith(q)
+      const bStarts = bName.startsWith(q)
+      if (aStarts && !bStarts) return -1
+      if (!aStarts && bStarts) return 1
+      return aName.localeCompare(bName)
+    })
+}

package/dist/rich-editor/history.ts

@@ -0,0 +1,79 @@
+/**
+ * Undo/Redo history manager.
+ * Stores snapshots of editor state for undo/redo operations.
+ */
+
+import type { EditorState } from './operations.js'
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface HistoryManager {
+  push(state: EditorState): void
+  undo(): EditorState | null
+  redo(): EditorState | null
+  canUndo(): boolean
+  canRedo(): boolean
+  clear(): void
+  size(): number
+}
+
+// ---------------------------------------------------------------------------
+// Factory
+// ---------------------------------------------------------------------------
+
+const DEFAULT_MAX_SIZE = 100
+
+export function createHistory(maxSize: number = DEFAULT_MAX_SIZE): HistoryManager {
+  let undoStack: EditorState[] = []
+  let redoStack: EditorState[] = []
+
+  return {
+    push(state: EditorState): void {
+      // Deep clone to prevent mutation
+      const snapshot = JSON.parse(JSON.stringify(state)) as EditorState
+      undoStack.push(snapshot)
+
+      // Enforce max size
+      if (undoStack.length > maxSize) {
+        undoStack = undoStack.slice(undoStack.length - maxSize)
+      }
+
+      // New edit clears the redo stack
+      redoStack = []
+    },
+
+    undo(): EditorState | null {
+      if (undoStack.length === 0) return null
+      const state = undoStack.pop()!
+      redoStack.push(state)
+      if (undoStack.length === 0) return state
+      return JSON.parse(JSON.stringify(undoStack[undoStack.length - 1])) as EditorState
+    },
+
+    redo(): EditorState | null {
+      if (redoStack.length === 0) return null
+      const state = redoStack.pop()!
+      undoStack.push(state)
+      return JSON.parse(JSON.stringify(state)) as EditorState
+    },
+
+    canUndo(): boolean {
+      return undoStack.length > 0
+    },
+
+    canRedo(): boolean {
+      return redoStack.length > 0
+    },
+
+    clear(): void {
+      undoStack = []
+      redoStack = []
+    },
+
+    size(): number {
+      return undoStack.length
+    },
+  }
+}

package/dist/rich-editor/index.ts

@@ -0,0 +1,106 @@
+// Model
+export type {
+  BlockType,
+  HeadingLevel,
+  MarkType,
+  Mark,
+  TextSegment,
+  MentionSegment,
+  EmojiSegment,
+  InlineContent,
+  Block,
+  Document,
+} from './model.js'
+
+export {
+  generateBlockId,
+  resetBlockIdCounter,
+  createTextSegment,
+  createMentionSegment,
+  createEmojiSegment,
+  createBlock,
+  createDocument,
+  getBlockTextLength,
+  getBlockText,
+  findBlockById,
+  findBlockIndex,
+  cloneDocument,
+  cloneBlock,
+  marksEqual,
+  normalizeContent,
+} from './model.js'
+
+// Selection
+export type { Position, Selection } from './selection.js'
+
+export {
+  createPosition,
+  createSelection,
+  createCollapsedSelection,
+  isCollapsed,
+  isForward,
+  getSelectionStart,
+  getSelectionEnd,
+  getSelectedText,
+  getSelectedBlocks,
+  clampSelection,
+  selectionAtDocStart,
+  selectionAtDocEnd,
+  selectAll,
+} from './selection.js'
+
+// Operations
+export type { EditorState } from './operations.js'
+
+export {
+  insertText,
+  deleteBackward,
+  deleteForward,
+  deleteSelection,
+  insertBlock,
+  splitBlock,
+  mergeBlockBackward,
+  mergeBlockForward,
+  changeBlockType,
+  indentBlock,
+  outdentBlock,
+  getActiveMarks,
+  toggleMark,
+  addMark,
+  removeMark,
+  moveLeft,
+  moveRight,
+  moveUp,
+  moveDown,
+  moveToStartOfBlock,
+  moveToEndOfBlock,
+  moveToStartOfDocument,
+  moveToEndOfDocument,
+  expandSelectionWord,
+  insertInlineContent,
+} from './operations.js'
+
+// Markdown shortcuts
+export { processMarkdownShortcut } from './markdown-shortcuts.js'
+
+// Slash commands
+export type { SlashCommand, SlashCommandMenu } from './slash-commands.js'
+export { BUILT_IN_COMMANDS, createSlashCommandMenu, detectSlashTrigger } from './slash-commands.js'
+
+// Mentions
+export type { MentionOption, MentionMenu } from './mentions.js'
+export { createMentionMenu, detectMentionTrigger } from './mentions.js'
+
+// Emoji
+export { EMOJI_MAP, detectEmojiShortcode, searchEmoji } from './emoji.js'
+
+// History
+export type { HistoryManager } from './history.js'
+export { createHistory } from './history.js'
+
+// Serialization
+export { toMarkdown, fromMarkdown, toHTML, fromHTML, toPlainText } from './serialization.js'
+
+// Editor
+export type { EditorConfig, EditorAPI } from './editor.js'
+export { createEditor } from './editor.js'