@particle-academy/fancy-code 0.6.0 → 0.7.0

package/dist/index.cjs

@@ -1346,6 +1346,19 @@ function highlightCode(source, tokens, colors) {
   return parts.join("");
 }
 
+// src/engine/position.ts
+function lineColumnToOffset(text, line, column = 1) {
+  const lines = text.split("\n");
+  const targetLine = Math.max(1, Math.min(Math.trunc(line) || 1, lines.length));
+  let offset = 0;
+  for (let i = 0; i < targetLine - 1; i++) {
+    offset += lines[i].length + 1;
+  }
+  const lineText = lines[targetLine - 1] ?? "";
+  const col = Math.max(1, Math.min(Math.trunc(column) || 1, lineText.length + 1));
+  return offset + (col - 1);
+}
+
 // src/hooks/use-editor-engine.ts
 var DEFAULT_COLORS = {
   background: "#18181b",
@@ -1460,6 +1473,28 @@ function useEditorEngine({
     setScrollTop(ta.scrollTop);
     setScrollLeft(ta.scrollLeft);
   }, []);
+  const revealLine = react.useCallback(
+    (line, column = 1, opts) => {
+      const ta = textareaRef.current;
+      if (!ta) return;
+      const offset = lineColumnToOffset(ta.value, line, column);
+      if (opts?.focus) ta.focus();
+      ta.selectionStart = ta.selectionEnd = offset;
+      updateCursorInfo();
+      const panel = ta.closest("[data-fancy-code-panel]");
+      if (!panel) return;
+      const cs = getComputedStyle(ta);
+      const lineHeight = parseFloat(cs.lineHeight) || 19.5;
+      const paddingTop = parseFloat(cs.paddingTop) || 0;
+      const lineIndex = (ta.value.slice(0, offset).match(/\n/g) || []).length;
+      const textareaTopInPanel = ta.getBoundingClientRect().top - panel.getBoundingClientRect().top + panel.scrollTop;
+      const lineTop = textareaTopInPanel + paddingTop + lineIndex * lineHeight;
+      const target = lineTop - panel.clientHeight / 2 + lineHeight / 2;
+      const maxScroll = panel.scrollHeight - panel.clientHeight;
+      panel.scrollTop = Math.max(0, Math.min(target, maxScroll));
+    },
+    [updateCursorInfo]
+  );
   const handleKeyDown = react.useCallback(
     (e) => {
       if (readOnly) {
@@ -1546,6 +1581,7 @@ function useEditorEngine({
     handleInput,
     handleScroll,
     handleSelect,
+    revealLine,
     scrollTop,
     scrollLeft
   };
@@ -1579,7 +1615,9 @@ function CodeEditorRoot({
   tabSize: tabSizeProp = 2,
   placeholder,
   minHeight,
-  maxHeight
+  maxHeight,
+  cursorLine,
+  cursorColumn
 }) {
   const [currentValue, setCurrentValue] = reactFancy.useControllableState(valueProp, defaultValue, onChange);
   const isDark = useDarkMode();
@@ -1615,6 +1653,11 @@ function CodeEditorRoot({
       setSelectionLength(sel);
     }
   });
+  const { revealLine: revealLineImpl } = engineReturn;
+  react.useEffect(() => {
+    if (cursorLine == null) return;
+    revealLineImpl(cursorLine, cursorColumn ?? 1, { focus: false });
+  }, [cursorLine, cursorColumn, revealLineImpl]);
   const contextValue = react.useMemo(
     () => ({
       getValue: () => engineReturn.textareaRef.current?.value ?? currentValue,
@@ -1636,6 +1679,8 @@ function CodeEditorRoot({
         setCurrentValue(ta.value);
       },
       focus: () => engineReturn.textareaRef.current?.focus(),
+      revealLine: (line, column) => engineReturn.revealLine(line, column ?? 1, { focus: true }),
+      setCursor: ({ line, column }) => engineReturn.revealLine(line, column ?? 1, { focus: true }),
       language: currentLanguage,
       setLanguage,
       theme: resolvedTheme,