@trendr/core 0.2.10 → 0.4.0

package/src/text-area.js

@@ -1,7 +1,20 @@
 import { jsx, jsxs } from '../jsx-runtime.js'
 import { createSignal } from './signal.js'
-import { useInput, useLayout, useCursor } from './hooks.js'
+import { useInput, useLayout, useCursor, useTheme } from './hooks.js'
 import { registerHook } from './renderer.js'
+import { charWidth, measureText } from './wrap.js'
+
+function prevBoundary(s, i) {
+  if (i <= 0) return 0
+  const c = s.charCodeAt(i - 1)
+  return c >= 0xdc00 && c <= 0xdfff && i >= 2 ? i - 2 : i - 1
+}
+
+function nextBoundary(s, i) {
+  if (i >= s.length) return s.length
+  const c = s.charCodeAt(i)
+  return c >= 0xd800 && c <= 0xdbff && i + 1 < s.length ? i + 2 : i + 1
+}
 
 export function wrapForEditor(text, width) {
   if (width <= 0) return [{ start: 0, end: 0, hard: true }]
@@ -25,21 +38,32 @@ export function wrapForEditor(text, width) {
     while (segStart < segment.length) {
       const remaining = segment.slice(segStart)
 
-      if (remaining.length <= width) {
+      if (measureText(remaining) <= width) {
         lines.push({ start: pos + segStart, end: pos + segStart + remaining.length, hard: true })
         segStart += remaining.length
         break
       }
 
-      const chunk = remaining.slice(0, width)
+      let fit = 0
+      let col = 0
+      while (fit < remaining.length) {
+        const cp = remaining.codePointAt(fit)
+        const cw = charWidth(cp)
+        if (col + cw > width) break
+        col += cw
+        fit += cp > 0xffff ? 2 : 1
+      }
+      if (fit === 0) fit = nextBoundary(remaining, 0)
+
+      const chunk = remaining.slice(0, fit)
       const lastSpace = chunk.lastIndexOf(' ')
 
       if (lastSpace > 0) {
         lines.push({ start: pos + segStart, end: pos + segStart + lastSpace, hard: false })
         segStart += lastSpace + 1
       } else {
-        lines.push({ start: pos + segStart, end: pos + segStart + width, hard: false })
-        segStart += width
+        lines.push({ start: pos + segStart, end: pos + segStart + fit, hard: false })
+        segStart += fit
       }
     }
 
@@ -57,26 +81,39 @@ export function wrapForEditor(text, width) {
   return lines
 }
 
-export function cursorToDisplay(cursor, lineMap) {
+export function cursorToDisplay(cursor, lineMap, text) {
   for (let row = 0; row < lineMap.length; row++) {
     const line = lineMap[row]
     if (cursor >= line.start && cursor <= line.end) {
       if (cursor === line.end && !line.hard && row + 1 < lineMap.length) {
         return { row: row + 1, col: 0 }
       }
-      return { row, col: cursor - line.start }
+      const col = text != null ? measureText(text.slice(line.start, cursor)) : cursor - line.start
+      return { row, col }
     }
   }
   const last = lineMap[lineMap.length - 1]
-  return { row: lineMap.length - 1, col: last.end - last.start }
+  const col = text != null ? measureText(text.slice(last.start, last.end)) : last.end - last.start
+  return { row: lineMap.length - 1, col }
 }
 
-export function displayToCursor(row, col, lineMap) {
+export function displayToCursor(row, col, lineMap, text) {
   const r = Math.max(0, Math.min(row, lineMap.length - 1))
   const line = lineMap[r]
-  const maxCol = line.end - line.start
-  const c = Math.max(0, Math.min(col, maxCol))
-  return line.start + c
+  if (text == null) {
+    const maxCol = line.end - line.start
+    return line.start + Math.max(0, Math.min(col, maxCol))
+  }
+  let i = line.start
+  let c = 0
+  while (i < line.end && c < col) {
+    const cp = text.codePointAt(i)
+    const w = charWidth(cp)
+    if (c + w > col) break
+    c += w
+    i += cp > 0xffff ? 2 : 1
+  }
+  return i
 }
 
 function ensureVisible(cursorRow, scroll, height, totalLines) {
@@ -92,9 +129,10 @@ export function TextArea({ onSubmit, onCancel, onChange, onKeyDown, placeholder,
   const [cursor, setCursor] = createSignal(0)
   if (valueProp !== undefined && valueProp !== value()) {
     setValue(valueProp)
-    setCursor(c => Math.min(c, valueProp.length))
+    setCursor(valueProp.length)
   }
   const ref = registerHook(() => ({ scroll: 0, goalCol: null }))
+  const { muted = 'gray' } = useTheme()
   const layout = useLayout()
   const { cursorStyle, reset: resetBlink } = useCursor(cursorProp, focused)
 
@@ -111,6 +149,7 @@ export function TextArea({ onSubmit, onCancel, onChange, onKeyDown, placeholder,
 
     if (onKeyDown) {
       event.value = value()
+      event.cursor = cursor()
       if (onKeyDown(event)) {
         event.stopPropagation()
         return
@@ -132,9 +171,9 @@ export function TextArea({ onSubmit, onCancel, onChange, onKeyDown, placeholder,
 
     const isSubmitKey = submitOnEnter
       ? (key === 'return' && !meta && !shift)
-      : (meta && key === '\r')
+      : (meta && key === 'return')
     const isNewlineKey = submitOnEnter
-      ? ((shift && key === 'return') || (meta && key === '\r'))
+      ? ((shift && key === 'return') || (meta && key === 'return'))
       : (key === 'return')
 
     if (isSubmitKey) {
@@ -160,26 +199,29 @@ export function TextArea({ onSubmit, onCancel, onChange, onKeyDown, placeholder,
     }
 
     if (key === 'backspace') {
-      if (c > 0) update(v.slice(0, c - 1) + v.slice(c), c - 1)
+      if (c > 0) {
+        const p = prevBoundary(v, c)
+        update(v.slice(0, p) + v.slice(c), p)
+      }
       event.stopPropagation()
       return
     }
 
     if (key === 'delete') {
-      if (c < v.length) update(v.slice(0, c) + v.slice(c + 1), c)
+      if (c < v.length) update(v.slice(0, c) + v.slice(nextBoundary(v, c)), c)
       event.stopPropagation()
       return
     }
 
     if (key === 'left') {
-      setCursor(Math.max(0, c - 1))
+      setCursor(prevBoundary(v, c))
       ref.goalCol = null
       event.stopPropagation()
       return
     }
 
     if (key === 'right') {
-      setCursor(Math.min(v.length, c + 1))
+      setCursor(nextBoundary(v, c))
       ref.goalCol = null
       event.stopPropagation()
       return
@@ -188,48 +230,59 @@ export function TextArea({ onSubmit, onCancel, onChange, onKeyDown, placeholder,
     if (key === 'up' || key === 'down') {
       const w = layout.width || 80
       const lineMap = wrapForEditor(v, w)
-      const pos = cursorToDisplay(c, lineMap)
+      const pos = cursorToDisplay(c, lineMap, v)
       const goal = ref.goalCol !== null ? ref.goalCol : pos.col
       ref.goalCol = goal
 
       const newRow = key === 'up' ? pos.row - 1 : pos.row + 1
       if (newRow >= 0 && newRow < lineMap.length) {
-        setCursor(displayToCursor(newRow, goal, lineMap))
+        setCursor(displayToCursor(newRow, goal, lineMap, v))
       }
       event.stopPropagation()
       return
     }
 
-    if (key === 'home' || (ctrl && raw === '\x01')) {
+    if (key === 'home' || (ctrl && key === 'a')) {
       const w = layout.width || 80
       const lineMap = wrapForEditor(v, w)
-      const pos = cursorToDisplay(c, lineMap)
+      const pos = cursorToDisplay(c, lineMap, v)
       setCursor(lineMap[pos.row].start)
       ref.goalCol = null
       event.stopPropagation()
       return
     }
 
-    if (key === 'end' || (ctrl && raw === '\x05')) {
+    if (key === 'end' || (ctrl && key === 'e')) {
       const w = layout.width || 80
       const lineMap = wrapForEditor(v, w)
-      const pos = cursorToDisplay(c, lineMap)
+      const pos = cursorToDisplay(c, lineMap, v)
       setCursor(lineMap[pos.row].end)
       ref.goalCol = null
       event.stopPropagation()
       return
     }
 
-    if (ctrl && raw === '\x15') {
-      const before = v.slice(0, c)
-      const nlIdx = before.lastIndexOf('\n')
-      const lineStart = nlIdx + 1
-      update(v.slice(0, lineStart) + v.slice(c), lineStart)
+    if (ctrl && key === 'u') {
+      const lineStart = v.lastIndexOf('\n', c - 1) + 1
+      const rest = v.slice(c)
+      const lineEmptyAfter = rest.length === 0 || rest[0] === '\n'
+      if (c > lineStart && !(lineEmptyAfter && lineStart > 0)) {
+        // delete to start of the current line, staying on it
+        update(v.slice(0, lineStart) + rest, lineStart)
+      } else if (lineStart > 0) {
+        // nothing left to delete on this line (or the line is now empty): remove
+        // the line break above and land at the end of the previous line, so
+        // repeated ctrl+u keeps eating lines upward
+        update(v.slice(0, lineStart - 1) + rest, lineStart - 1)
+      } else if (c > lineStart) {
+        // first line: just clear it
+        update(rest, 0)
+      }
       event.stopPropagation()
       return
     }
 
-    if (ctrl && raw === '\x0b') {
+    if (ctrl && key === 'k') {
       const after = v.slice(c)
       const nlIdx = after.indexOf('\n')
       const deleteEnd = nlIdx === -1 ? v.length : c + nlIdx
@@ -238,7 +291,7 @@ export function TextArea({ onSubmit, onCancel, onChange, onKeyDown, placeholder,
       return
     }
 
-    if (ctrl && raw === '\x17') {
+    if (ctrl && key === 'w') {
       const before = v.slice(0, c)
       const after = v.slice(c)
       const trimmed = before.replace(/\S+\s*$/, '')
@@ -247,7 +300,7 @@ export function TextArea({ onSubmit, onCancel, onChange, onKeyDown, placeholder,
       return
     }
 
-    if (!ctrl && !meta && raw.length === 1 && raw >= ' ') {
+    if (!ctrl && !meta && raw.length >= 1 && raw >= ' ' && !raw.startsWith('\x1b')) {
       update(v.slice(0, c) + raw + v.slice(c), c + raw.length)
       event.stopPropagation()
     }
@@ -259,12 +312,12 @@ export function TextArea({ onSubmit, onCancel, onChange, onKeyDown, placeholder,
   const cs = cursorStyle()
 
   if (!v && placeholder && !focused) {
-    return jsx('text', { style: { color: 'gray', flexGrow: 1 }, children: placeholder })
+    return jsx('text', { style: { color: muted, flexGrow: 1 }, children: placeholder })
   }
 
   const effectiveWidth = w || 80
   const lineMap = wrapForEditor(v, effectiveWidth)
-  const displayPos = cursorToDisplay(c, lineMap)
+  const displayPos = cursorToDisplay(c, lineMap, v)
 
   const displayHeight = Math.max(1, Math.min(lineMap.length, maxHeight))
   ref.scroll = ensureVisible(displayPos.row, ref.scroll, displayHeight, lineMap.length)
@@ -273,13 +326,14 @@ export function TextArea({ onSubmit, onCancel, onChange, onKeyDown, placeholder,
   const visibleLines = lineMap.slice(scroll, scroll + displayHeight)
 
   if (!v && placeholder && focused) {
+    const first = placeholder.slice(0, nextBoundary(placeholder, 0))
     return jsx('box', {
       style: { flexDirection: 'column', height: 1, minHeight: 1, flexGrow: 1 },
       children: jsxs('box', {
         style: { flexDirection: 'row', height: 1 },
         children: [
-          jsx('text', { style: cs ? { ...cs, color: cs.color ?? 'gray' } : { inverse: true, color: 'gray' }, children: placeholder[0] }),
-          placeholder.length > 1 && jsx('text', { style: { color: 'gray' }, children: placeholder.slice(1) }),
+          jsx('text', { style: cs ? { ...cs, color: cs.color ?? muted } : { inverse: true, color: muted }, children: first }),
+          placeholder.length > first.length && jsx('text', { style: { color: muted }, children: placeholder.slice(first.length) }),
         ],
       }),
     })
@@ -294,10 +348,11 @@ export function TextArea({ onSubmit, onCancel, onChange, onKeyDown, placeholder,
       return jsx('text', { key: row, children: content || ' ' })
     }
 
-    const cursorCol = displayPos.col
-    const before = content.slice(0, cursorCol)
-    const cursorChar = content[cursorCol] || ' '
-    const after = content.slice(cursorCol + 1)
+    const cursorIdx = Math.max(line.start, Math.min(c, line.end))
+    const nb = cursorIdx < line.end ? nextBoundary(v, cursorIdx) : cursorIdx
+    const before = v.slice(line.start, cursorIdx)
+    const cursorChar = cursorIdx < line.end ? v.slice(cursorIdx, nb) : ' '
+    const after = v.slice(nb, line.end)
 
     return jsxs('box', {
       key: row,

package/src/text-input.js

@@ -1,13 +1,47 @@
 import { jsx, jsxs } from '../jsx-runtime.js'
 import { createSignal } from './signal.js'
-import { useInput, useLayout, useCursor } from './hooks.js'
+import { useInput, useLayout, useCursor, useTheme } from './hooks.js'
+import { charWidth, measureText } from './wrap.js'
 
 const BOX = { flexDirection: 'row', height: 1, minHeight: 1, flexGrow: 1 }
 
+function prevBoundary(s, i) {
+  if (i <= 0) return 0
+  const c = s.charCodeAt(i - 1)
+  return c >= 0xdc00 && c <= 0xdfff && i >= 2 ? i - 2 : i - 1
+}
+
+function nextBoundary(s, i) {
+  if (i >= s.length) return s.length
+  const c = s.charCodeAt(i)
+  return c >= 0xd800 && c <= 0xdbff && i + 1 < s.length ? i + 2 : i + 1
+}
+
+function sliceByColumns(s, startCol, endCol) {
+  let col = 0
+  let i = 0
+  let out = ''
+  while (i < s.length) {
+    const cp = s.codePointAt(i)
+    const len = cp > 0xffff ? 2 : 1
+    const w = charWidth(cp)
+    if (col + w > endCol) break
+    if (col >= startCol) out += s.slice(i, i + len)
+    col += w
+    i += len
+  }
+  return out
+}
+
+function firstCodePoint(s) {
+  return s.slice(0, nextBoundary(s, 0))
+}
+
 export function TextInput({ onSubmit, onCancel, onChange, placeholder, focused = true, initialValue, clearOnSubmit = false, cursor: cursorProp }) {
   const init = initialValue ?? ''
   const [value, setValue] = createSignal(init)
   const [cursor, setCursor] = createSignal(init.length)
+  const { muted = 'gray' } = useTheme()
   const layout = useLayout()
   const { cursorStyle, reset: resetBlink } = useCursor(cursorProp, focused)
 
@@ -21,10 +55,17 @@ export function TextInput({ onSubmit, onCancel, onChange, placeholder, focused =
     if (!focused) return
     resetBlink()
 
-    const { key, raw, ctrl } = event
+    const { key, raw, ctrl, meta } = event
     const v = value()
     const c = cursor()
 
+    if (key === 'paste') {
+      const pasted = (event.text || '').replace(/^\n+|\n+$/g, '').replace(/\n+/g, ' ')
+      if (pasted) update(v.slice(0, c) + pasted + v.slice(c), c + pasted.length)
+      event.stopPropagation()
+      return
+    }
+
     if (key === 'return') {
       if (onSubmit) {
         onSubmit(v)
@@ -43,27 +84,30 @@ export function TextInput({ onSubmit, onCancel, onChange, placeholder, focused =
     }
 
     if (key === 'backspace') {
-      if (c > 0) update(v.slice(0, c - 1) + v.slice(c), c - 1)
+      if (c > 0) {
+        const p = prevBoundary(v, c)
+        update(v.slice(0, p) + v.slice(c), p)
+      }
       event.stopPropagation()
       return
     }
 
     if (key === 'delete') {
-      if (c < v.length) update(v.slice(0, c) + v.slice(c + 1), c)
+      if (c < v.length) update(v.slice(0, c) + v.slice(nextBoundary(v, c)), c)
       event.stopPropagation()
       return
     }
 
-    if (key === 'left') { setCursor(Math.max(0, c - 1)); event.stopPropagation(); return }
-    if (key === 'right') { setCursor(Math.min(v.length, c + 1)); event.stopPropagation(); return }
+    if (key === 'left') { setCursor(prevBoundary(v, c)); event.stopPropagation(); return }
+    if (key === 'right') { setCursor(nextBoundary(v, c)); event.stopPropagation(); return }
 
-    if (key === 'home' || (ctrl && raw === '\x01')) { setCursor(0); event.stopPropagation(); return }
-    if (key === 'end' || (ctrl && raw === '\x05')) { setCursor(v.length); event.stopPropagation(); return }
+    if (key === 'home' || (ctrl && key === 'a')) { setCursor(0); event.stopPropagation(); return }
+    if (key === 'end' || (ctrl && key === 'e')) { setCursor(v.length); event.stopPropagation(); return }
 
-    if (ctrl && raw === '\x15') { update(v.slice(c), 0); event.stopPropagation(); return }
-    if (ctrl && raw === '\x0b') { update(v.slice(0, c), c); event.stopPropagation(); return }
+    if (ctrl && key === 'u') { update(v.slice(c), 0); event.stopPropagation(); return }
+    if (ctrl && key === 'k') { update(v.slice(0, c), c); event.stopPropagation(); return }
 
-    if (ctrl && raw === '\x17') {
+    if (ctrl && key === 'w') {
       const before = v.slice(0, c)
       const after = v.slice(c)
       const trimmed = before.replace(/\S+\s*$/, '')
@@ -72,7 +116,7 @@ export function TextInput({ onSubmit, onCancel, onChange, placeholder, focused =
       return
     }
 
-    if (!ctrl && raw.length === 1 && raw >= ' ') {
+    if (!ctrl && !meta && raw.length >= 1 && raw >= ' ' && !raw.startsWith('\x1b')) {
       update(v.slice(0, c) + raw + v.slice(c), c + raw.length)
       event.stopPropagation()
     }
@@ -84,44 +128,42 @@ export function TextInput({ onSubmit, onCancel, onChange, placeholder, focused =
   const cs = cursorStyle()
 
   if (!v && placeholder && !focused) {
-    return jsx('text', { style: { color: 'gray', flexGrow: 1 }, children: placeholder })
+    return jsx('text', { style: { color: muted, flexGrow: 1 }, children: placeholder })
   }
 
   if (!v && placeholder && focused) {
+    const first = firstCodePoint(placeholder)
     return jsxs('box', {
       style: BOX,
       children: [
-        jsx('text', { style: cs ? { ...cs, color: cs.color ?? 'gray' } : { inverse: true, color: 'gray' }, children: placeholder[0] }),
-        placeholder.length > 1 && jsx('text', { style: { color: 'gray' }, children: placeholder.slice(1) }),
+        jsx('text', { style: cs ? { ...cs, color: cs.color ?? muted } : { inverse: true, color: muted }, children: first }),
+        placeholder.length > first.length && jsx('text', { style: { color: muted }, children: placeholder.slice(first.length) }),
       ],
     })
   }
 
-  const contentWidth = v.length + 1
+  const cursorCol = measureText(v.slice(0, c))
+  const contentWidth = measureText(v) + 1
   const needsScroll = w > 0 && contentWidth > w
 
+  const cpAtCursor = c < v.length ? v.slice(c, nextBoundary(v, c)) : ''
+  const cursorChar = cpAtCursor || ' '
+  const cursorWidth = cpAtCursor ? measureText(cpAtCursor) : 1
+
   if (!needsScroll) {
-    const cursorChar = v[c] || ' '
     return jsxs('box', {
       style: BOX,
       children: [
         v.slice(0, c) && jsx('text', { children: v.slice(0, c) }),
         jsx('text', { style: cs ?? {}, children: cursorChar }),
-        v.slice(c + 1) && jsx('text', { children: v.slice(c + 1) }),
+        v.slice(nextBoundary(v, c)) && jsx('text', { children: v.slice(nextBoundary(v, c)) }),
       ],
     })
   }
 
-  let scrollStart = 0
-  if (c >= w) {
-    scrollStart = c - w + 1
-  }
-
-  const visible = v.slice(scrollStart, scrollStart + w)
-  const cursorInView = c - scrollStart
-  const before = visible.slice(0, cursorInView)
-  const cursorChar = visible[cursorInView] || ' '
-  const after = visible.slice(cursorInView + 1)
+  const scrollStart = Math.max(0, cursorCol + cursorWidth - w)
+  const before = sliceByColumns(v, scrollStart, cursorCol)
+  const after = sliceByColumns(v, cursorCol + cursorWidth, scrollStart + w)
 
   return jsxs('box', {
     style: BOX,