@drghaliasri/butex 5.5.0 → 5.5.2

package/dist/index.d.mts

@@ -1441,6 +1441,7 @@ type RuntimeButtonElements = {
 };
 type EditorRuntimeOptions = {
     surfaceEl: HTMLElement;
+    inputEl?: HTMLTextAreaElement | null;
     initialSession?: EditorSession;
     defaultSide?: EditorSide;
     uiLocale?: ButexUiLocale;
@@ -1454,6 +1455,7 @@ type EditorRuntimeApi = {
     getSession: () => EditorSession;
     setSession: (next: EditorSession) => void;
     setUiLocale: (locale: ButexUiLocale) => void;
+    focusInput: () => void;
     performUndo: () => void;
     performRedo: () => void;
     performCopy: () => Promise<void>;

package/dist/index.d.ts

@@ -1441,6 +1441,7 @@ type RuntimeButtonElements = {
 };
 type EditorRuntimeOptions = {
     surfaceEl: HTMLElement;
+    inputEl?: HTMLTextAreaElement | null;
     initialSession?: EditorSession;
     defaultSide?: EditorSide;
     uiLocale?: ButexUiLocale;
@@ -1454,6 +1455,7 @@ type EditorRuntimeApi = {
     getSession: () => EditorSession;
     setSession: (next: EditorSession) => void;
     setUiLocale: (locale: ButexUiLocale) => void;
+    focusInput: () => void;
     performUndo: () => void;
     performRedo: () => void;
     performCopy: () => Promise<void>;

package/dist/index.global.js

@@ -2645,7 +2645,8 @@ ${BUTEX_FONT_FACE_CSS}
   transition: box-shadow 0.15s ease, border-color 0.15s ease;
 }
 
-.surface:focus {
+.surface:focus,
+.surface.surface--typing-focus {
   border-color: var(--butex-focus-border, rgba(13, 148, 136, 0.45));
   box-shadow: 0 0 0 3px var(--butex-focus-shadow, rgba(13, 148, 136, 0.12));
 }
@@ -3384,7 +3385,7 @@ ${ATOMIC_OPERATOR_COMMAND_CSS}
       return arabicScripts(node, content, options);
     }
     if (node.kind === "sqrt" && node.radicand) {
-      const content = `\\arabsqrt${optionalRootIndexArabic(node, options)}{${renderChainArabic(node.radicand, options)}}`;
+      const content = `\\arsqrt${optionalRootIndexArabic(node, options)}{${renderChainArabic(node.radicand, options)}}`;
       return arabicScripts(node, content, options);
     }
     if (node.kind === "overset" && node.baseExpr) {
@@ -5792,7 +5793,7 @@ ${ATOMIC_OPERATOR_COMMAND_CSS}
 
   // src/editor/runtime.ts
   function createEditorRuntime(options) {
-    const { surfaceEl } = options;
+    const { surfaceEl, inputEl } = options;
     const buttonElements = options.buttonElements ?? {};
     const outsidePointerIgnoreSelectors = options.outsidePointerIgnoreSelectors ?? [];
     let session = options.initialSession ?? createStarterSession();
@@ -5806,6 +5807,23 @@ ${ATOMIC_OPERATOR_COMMAND_CSS}
     let dragSelecting = false;
     let dragChainId = null;
     let dragChanged = false;
+    let composingInput = false;
+    let pendingCompositionText = null;
+    function resetInputElement() {
+      if (!inputEl) {
+        return;
+      }
+      inputEl.value = "";
+    }
+    function focusInput() {
+      if (!inputEl) {
+        surfaceEl.focus();
+        return;
+      }
+      inputEl.focus({ preventScroll: true });
+      const end = inputEl.value.length;
+      inputEl.setSelectionRange(end, end);
+    }
     function notifySessionChange() {
       options.onSessionChange?.(session);
     }
@@ -6070,7 +6088,7 @@ ${ATOMIC_OPERATOR_COMMAND_CSS}
         event.preventDefault();
         event.stopPropagation();
         startDragSelection(chainId, index);
-        surfaceEl.focus();
+        focusInput();
       });
       slot.addEventListener("click", (event) => {
         if (dragChanged) {
@@ -6080,7 +6098,7 @@ ${ATOMIC_OPERATOR_COMMAND_CSS}
           return;
         }
         applyTransient((prev) => setCaret(prev, chainId, index));
-        surfaceEl.focus();
+        focusInput();
       });
       if (session.caret.chainId === chainId && session.caret.index === index) {
         const caret = document.createElement("span");
@@ -6112,7 +6130,7 @@ ${ATOMIC_OPERATOR_COMMAND_CSS}
         event.preventDefault();
         event.stopPropagation();
         startDragSelection(chainId, indexInChain);
-        surfaceEl.focus();
+        focusInput();
       });
       nodeEl.addEventListener("click", (event) => {
         if (dragChanged) {
@@ -6123,7 +6141,7 @@ ${ATOMIC_OPERATOR_COMMAND_CSS}
         }
         event.stopPropagation();
         applyTransient((prev) => selectNode(prev, node.id));
-        surfaceEl.focus();
+        focusInput();
       });
       const body = document.createElement("span");
       body.className = "node-body";
@@ -6158,7 +6176,7 @@ ${ATOMIC_OPERATOR_COMMAND_CSS}
       const activeTree = session[activeTreeKey(session.activeSide)];
       surfaceEl.appendChild(buildChain(activeTree));
       if (initialKeyboardFocusPending) {
-        requestAnimationFrame(() => surfaceEl.focus());
+        requestAnimationFrame(focusInput);
         initialKeyboardFocusPending = false;
       }
       notifySessionChange();
@@ -6196,7 +6214,7 @@ ${ATOMIC_OPERATOR_COMMAND_CSS}
       }
       session = restored;
       render();
-      surfaceEl.focus();
+      focusInput();
     }
     function performRedo() {
       const restored = restoreRedo(undoRedo, session);
@@ -6205,9 +6223,12 @@ ${ATOMIC_OPERATOR_COMMAND_CSS}
       }
       session = restored;
       render();
-      surfaceEl.focus();
+      focusInput();
     }
     function onKeyDown(event) {
+      if (event.isComposing || event.key === "Process" || event.keyCode === 229) {
+        return;
+      }
       const shortcutMod = event.ctrlKey || event.metaKey;
       const keyLower = typeof event.key === "string" ? event.key.toLowerCase() : "";
       if (shortcutMod && !event.altKey && keyLower === "z") {
@@ -6306,6 +6327,70 @@ ${ATOMIC_OPERATOR_COMMAND_CSS}
         applyStructural((prev) => insertChar(prev, char));
       }
     }
+    function onBeforeInput(event) {
+      if (composingInput || event.isComposing) {
+        return;
+      }
+      if (event.inputType === "deleteContentBackward") {
+        event.preventDefault();
+        applyStructural((prev) => deleteBackward(prev));
+        resetInputElement();
+        return;
+      }
+      if (event.inputType === "deleteContentForward") {
+        event.preventDefault();
+        applyStructural((prev) => deleteForward(prev));
+        resetInputElement();
+      }
+    }
+    function onInput(event) {
+      if (!inputEl || composingInput) {
+        return;
+      }
+      const inputEvent = event;
+      const text = inputEvent.data ?? inputEl.value;
+      resetInputElement();
+      if (pendingCompositionText !== null && (inputEvent.inputType === "insertFromComposition" || text === pendingCompositionText)) {
+        pendingCompositionText = null;
+        return;
+      }
+      pendingCompositionText = null;
+      if (inputEvent.inputType === "deleteContentBackward") {
+        applyStructural((prev) => deleteBackward(prev));
+        return;
+      }
+      if (inputEvent.inputType === "deleteContentForward") {
+        applyStructural((prev) => deleteForward(prev));
+        return;
+      }
+      if (text) {
+        applyStructural((prev) => pasteText(prev, text));
+      }
+    }
+    function onCompositionStart() {
+      composingInput = true;
+    }
+    function onCompositionEnd(event) {
+      if (!inputEl) {
+        return;
+      }
+      composingInput = false;
+      const text = event.data || inputEl.value;
+      resetInputElement();
+      if (text) {
+        applyStructural((prev) => pasteText(prev, text));
+      }
+      pendingCompositionText = text || null;
+      window.setTimeout(() => {
+        pendingCompositionText = null;
+      }, 0);
+    }
+    function onInputFocus() {
+      surfaceEl.classList.add("surface--typing-focus");
+    }
+    function onInputBlur() {
+      surfaceEl.classList.remove("surface--typing-focus");
+    }
     function isShortcutOnlyEvent(event) {
       if (!(event.ctrlKey || event.metaKey) || event.altKey) {
         return false;
@@ -6355,7 +6440,7 @@ ${ATOMIC_OPERATOR_COMMAND_CSS}
       }
       event.preventDefault();
       startDragSelection(resolved.chainId, resolved.slotIndex);
-      surfaceEl.focus();
+      focusInput();
     }
     function onSurfaceClick(event) {
       if (dragChanged) {
@@ -6372,7 +6457,7 @@ ${ATOMIC_OPERATOR_COMMAND_CSS}
       } else {
         clearSelectionAndNodeHighlights();
       }
-      surfaceEl.focus();
+      focusInput();
     }
     function onDocumentPointerDown(event) {
       const target = event.target;
@@ -6388,6 +6473,13 @@ ${ATOMIC_OPERATOR_COMMAND_CSS}
       clearSelectionAndNodeHighlights();
     }
     surfaceEl.addEventListener("keydown", onKeyDown);
+    inputEl?.addEventListener("keydown", onKeyDown);
+    inputEl?.addEventListener("beforeinput", onBeforeInput);
+    inputEl?.addEventListener("input", onInput);
+    inputEl?.addEventListener("compositionstart", onCompositionStart);
+    inputEl?.addEventListener("compositionend", onCompositionEnd);
+    inputEl?.addEventListener("focus", onInputFocus);
+    inputEl?.addEventListener("blur", onInputBlur);
     document.addEventListener("keydown", onDocumentKeyDown);
     document.addEventListener("mouseup", endDragSelection);
     document.addEventListener("mouseleave", endDragSelection);
@@ -6399,6 +6491,13 @@ ${ATOMIC_OPERATOR_COMMAND_CSS}
       render,
       destroy: () => {
         surfaceEl.removeEventListener("keydown", onKeyDown);
+        inputEl?.removeEventListener("keydown", onKeyDown);
+        inputEl?.removeEventListener("beforeinput", onBeforeInput);
+        inputEl?.removeEventListener("input", onInput);
+        inputEl?.removeEventListener("compositionstart", onCompositionStart);
+        inputEl?.removeEventListener("compositionend", onCompositionEnd);
+        inputEl?.removeEventListener("focus", onInputFocus);
+        inputEl?.removeEventListener("blur", onInputBlur);
         document.removeEventListener("keydown", onDocumentKeyDown);
         document.removeEventListener("mouseup", endDragSelection);
         document.removeEventListener("mouseleave", endDragSelection);
@@ -6419,6 +6518,7 @@ ${ATOMIC_OPERATOR_COMMAND_CSS}
         uiLocale = locale;
         render();
       },
+      focusInput,
       performUndo,
       performRedo,
       performCopy,
@@ -6426,27 +6526,27 @@ ${ATOMIC_OPERATOR_COMMAND_CSS}
       performPaste,
       toggleSide: () => {
         applyTransient((prev) => switchSide(prev));
-        surfaceEl.focus();
+        focusInput();
       },
       toggleSplitLeafTyping: () => {
         applyStructural((prev) => setSplitLeafTyping(prev, !prev.splitLeafTyping));
-        surfaceEl.focus();
+        focusInput();
       },
       toggleArabicReverseNumberTyping: () => {
         applyStructural((prev) => setArabicReverseNumberTyping(prev, !prev.arabicReverseNumberTyping));
-        surfaceEl.focus();
+        focusInput();
       },
       toggleTakweenCharacterFont: () => {
         applyTransient((prev) => toggleTakweenCharacterFont(prev));
-        surfaceEl.focus();
+        focusInput();
       },
       setCurrentCharacterFont: (fontId) => {
         applyTransient((prev) => setCurrentCharacterFont(prev, fontId));
-        surfaceEl.focus();
+        focusInput();
       },
       setCurrentDigitForm: (digitForm) => {
         applyStructural((prev) => setCurrentDigitForm(prev, digitForm));
-        surfaceEl.focus();
+        focusInput();
       },
       insertDelimiterByKind: (kind) => {
         if (kind === "paren") {
@@ -6456,79 +6556,79 @@ ${ATOMIC_OPERATOR_COMMAND_CSS}
         } else {
           applyStructural((prev) => insertDelimiterPair(prev, "\\left\\{", "\\right\\}"));
         }
-        surfaceEl.focus();
+        focusInput();
       },
       insertFraction: () => {
         applyStructural((prev) => insertFraction(prev));
-        surfaceEl.focus();
+        focusInput();
       },
       insertFirstDerivative: () => {
         applyStructural((prev) => insertFirstDerivative(prev));
-        surfaceEl.focus();
+        focusInput();
       },
       insertSecondDerivative: () => {
         applyStructural((prev) => insertSecondDerivative(prev));
-        surfaceEl.focus();
+        focusInput();
       },
       insertMatrixEnv: (style, rows, columns) => {
         applyStructural((prev) => insertMatrixEnv(prev, style, rows, columns));
-        surfaceEl.focus();
+        focusInput();
       },
       insertArrayEnv: (rows, columns) => {
         applyStructural((prev) => insertArrayEnv(prev, rows, columns));
-        surfaceEl.focus();
+        focusInput();
       },
       insertAlignedEnv: (rows, columns) => {
         applyStructural((prev) => insertAlignedEnv(prev, rows, columns));
-        surfaceEl.focus();
+        focusInput();
       },
       insertSqrt: () => {
         applyStructural((prev) => insertSqrt(prev));
-        surfaceEl.focus();
+        focusInput();
       },
       insertOverset: () => {
         applyStructural((prev) => insertOverset(prev));
-        surfaceEl.focus();
+        focusInput();
       },
       insertUnderset: () => {
         applyStructural((prev) => insertUnderset(prev));
-        surfaceEl.focus();
+        focusInput();
       },
       insertLimitsSeriesTemplate: (commandId) => {
         applyStructural((prev) => insertLimitsSeriesTemplate(prev, commandId));
-        surfaceEl.focus();
+        focusInput();
       },
       insertAccentPair: () => {
         applyStructural((prev) => insertAccentPair(prev));
-        surfaceEl.focus();
+        focusInput();
       },
       insertAccent: (accentId) => {
         applyStructural((prev) => insertAccent(prev, accentId));
-        surfaceEl.focus();
+        focusInput();
       },
       insertAtomicCommand: (commandId) => {
         applyStructural((prev) => insertAtomicCommand(prev, commandId));
-        surfaceEl.focus();
+        focusInput();
       },
       insertAtomicOperatorCommand: (commandId) => {
         applyStructural((prev) => insertAtomicOperatorCommand(prev, commandId));
-        surfaceEl.focus();
+        focusInput();
       },
       addSup: () => {
         applyStructural((prev) => addSup(prev));
-        surfaceEl.focus();
+        focusInput();
       },
       addSub: () => {
         applyStructural((prev) => addSub(prev));
-        surfaceEl.focus();
+        focusInput();
       },
       removeSup: () => {
         applyStructural((prev) => removeSup(prev));
-        surfaceEl.focus();
+        focusInput();
       },
       removeSub: () => {
         applyStructural((prev) => removeSub(prev));
-        surfaceEl.focus();
+        focusInput();
       },
       setMatrixEnvStyle: (style) => {
         applyStructural((prev) => setMatrixEnvStyle(prev, style));
@@ -6550,7 +6650,7 @@ ${ATOMIC_OPERATOR_COMMAND_CSS}
       },
       deleteStructure: () => {
         applyStructural((prev) => deleteStructure(prev));
-        surfaceEl.focus();
+        focusInput();
       }
     };
     render();