@bsky.app/tapper 0.1.1 → 0.2.0

package/src/core.ts

@@ -1,185 +0,0 @@
-import {useMemo, useSyncExternalStore} from 'react'
-
-import {
-  TapperConfig,
-  TapperFacetConfigMap,
-  TapperNode,
-  TapperActiveFacet,
-  TapperSnapshot,
-} from './types'
-
-import {parseNodesFromText, detectActiveFacet, deriveTriggers} from './util'
-
-export class Tapper {
-  private facetConfig: TapperFacetConfigMap
-  private triggers: Map<string, string>
-
-  // Public state
-  text = ''
-  cursor = 0
-  nodes: TapperNode[] = []
-  activeFacet: TapperActiveFacet | null = null
-
-  // Internal tracking
-  private updating = false
-  private pendingCursor: number | null = null
-
-  // useSyncExternalStore plumbing
-  private storeListeners = new Set<() => void>()
-  private snapshot: TapperSnapshot
-
-  constructor(config: TapperConfig) {
-    this.facetConfig = config.facets
-    this.triggers = deriveTriggers(config.facets)
-    this.snapshot = {
-      text: this.text,
-      cursor: this.cursor,
-      nodes: this.nodes,
-      activeFacet: this.activeFacet,
-    }
-    if (config.initialText) {
-      this.replaceText(config.initialText)
-    }
-  }
-
-  subscribe = (listener: () => void) => {
-    this.storeListeners.add(listener)
-    return () => this.storeListeners.delete(listener)
-  }
-
-  getSnapshot = (): TapperSnapshot => {
-    return this.snapshot
-  }
-
-  private notify() {
-    this.snapshot = {
-      text: this.text,
-      cursor: this.cursor,
-      nodes: this.nodes,
-      activeFacet: this.activeFacet,
-    }
-    this.storeListeners.forEach(l => l())
-  }
-
-  private update(newText: string, cursor: number) {
-    // guard against circular updates when insert is called during an update cycle
-    if (this.updating) return
-    this.updating = true
-
-    const nodes = parseNodesFromText(newText, this.facetConfig, this.nodes)
-    const prev = this.activeFacet
-    const detected = detectActiveFacet(nodes, newText, cursor, this.triggers)
-
-    // When cursor leaves a facet, commit it
-    if (prev && (!detected || detected.facetType !== prev.facetType)) {
-      for (const node of nodes) {
-        if (node.type === prev.facetType && node.value === prev.query) {
-          node.committed = true
-          break
-        }
-      }
-    }
-
-    // Build activeFacet with insert baked in
-    const active: TapperActiveFacet | null = detected
-      ? {...detected, insert: this.insert}
-      : null
-
-    this.text = newText
-    this.cursor = cursor
-    this.nodes = nodes
-    this.activeFacet = active
-
-    this.updating = false
-    this.notify()
-  }
-
-  handleTextChange = (newText: string) => {
-    const diff = newText.length - this.text.length
-    let newCursor = Math.max(this.cursor + diff, 0)
-
-    // Atomic deletion: backspace into a facet from outside
-    if (diff === -1 && newCursor < this.cursor) {
-      for (const node of this.nodes) {
-        if (
-          node.type !== 'text' &&
-          node.committed &&
-          this.cursor === node.end
-        ) {
-          const remnant = node.end - node.start - 1
-          newText =
-            newText.slice(0, node.start) + newText.slice(node.start + remnant)
-          newCursor = node.start
-          this.pendingCursor = newCursor
-          break
-        }
-      }
-    }
-
-    this.update(newText, newCursor)
-  }
-
-  handleSelectionChange = (newCursor: number) => {
-    // After atomic deletion, ignore stale cursor values from the DOM
-    if (this.pendingCursor !== null) {
-      if (newCursor !== this.pendingCursor) {
-        return
-      }
-      this.pendingCursor = null
-    }
-
-    this.cursor = newCursor
-    this.update(this.text, newCursor)
-  }
-
-  replaceText = (text: string, cursor?: number) => {
-    const nodes = parseNodesFromText(text, this.facetConfig)
-    // Mark all non-text nodes as committed (pre-existing facets)
-    for (const node of nodes) {
-      if (node.type !== 'text') {
-        node.committed = true
-      }
-    }
-
-    const pos = cursor ?? text.length
-    const detected = detectActiveFacet(nodes, text, pos, this.triggers)
-    const active: TapperActiveFacet | null = detected
-      ? {...detected, insert: this.insert}
-      : null
-
-    this.text = text
-    this.cursor = pos
-    this.nodes = nodes
-    this.activeFacet = active
-
-    this.notify()
-  }
-
-  private insert = (value: string, options?: {noTrailingSpace?: boolean}) => {
-    const active = this.activeFacet
-    if (!active) return
-
-    const replacement = value + (options?.noTrailingSpace ? '' : ' ')
-    const newText =
-      this.text.slice(0, active.range.start) +
-      replacement +
-      this.text.slice(active.range.end)
-    const newCursor = active.range.start + replacement.length
-
-    this.update(newText, newCursor)
-
-    // Mark the inserted facet as committed
-    for (const node of this.nodes) {
-      if (node.type !== 'text' && node.start === active.range.start) {
-        node.committed = true
-        break
-      }
-    }
-  }
-}
-
-export function useTapperCore(config: TapperConfig) {
-  const store = useMemo(() => new Tapper(config), [config])
-  const snapshot = useSyncExternalStore(store.subscribe, store.getSnapshot)
-  return {...snapshot, store}
-}

package/src/index.web.ts

@@ -1,46 +0,0 @@
-import {useCallback, useLayoutEffect, useRef} from 'react'
-
-import {useTapperCore} from './core'
-import {type TapperConfig} from './types'
-
-export * from './types'
-export * from './core'
-
-export function useTapper(config: TapperConfig) {
-  const tapper = useTapperCore(config)
-  const textareaRef = useRef<HTMLTextAreaElement>(null)
-
-  // After atomic deletion (or insert), restore cursor position in the DOM
-  useLayoutEffect(() => {
-    const ta = textareaRef.current
-    if (ta && ta.selectionStart !== tapper.cursor) {
-      ta.setSelectionRange(tapper.cursor, tapper.cursor)
-    }
-  }, [tapper.cursor, tapper.text])
-
-  const onChange = useCallback(
-    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-      tapper.store.handleTextChange(e.target.value)
-      tapper.store.handleSelectionChange(e.target.selectionStart ?? 0)
-    },
-    [tapper.store],
-  )
-
-  const onSelect = useCallback(
-    (e: React.SyntheticEvent<HTMLTextAreaElement>) => {
-      const target = e.target as HTMLTextAreaElement
-      tapper.store.handleSelectionChange(target.selectionStart ?? 0)
-    },
-    [tapper.store],
-  )
-
-  return {
-    ...tapper,
-    inputProps: {
-      ref: textareaRef,
-      value: tapper.text,
-      onChange,
-      onSelect,
-    },
-  }
-}