@drghaliasri/butex 5.5.0 → 5.5.1

package/dist/react-document2.js

@@ -6435,7 +6435,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));
 }
@@ -6637,7 +6638,7 @@ function injectBuTeXEditorStyles(doc) {
 
 // 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();
@@ -6651,6 +6652,23 @@ function createEditorRuntime(options) {
   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);
   }
@@ -6915,7 +6933,7 @@ function createEditorRuntime(options) {
       event.preventDefault();
       event.stopPropagation();
       startDragSelection(chainId, index);
-      surfaceEl.focus();
+      focusInput();
     });
     slot.addEventListener("click", (event) => {
       if (dragChanged) {
@@ -6925,7 +6943,7 @@ function createEditorRuntime(options) {
         return;
       }
       applyTransient((prev) => setCaret(prev, chainId, index));
-      surfaceEl.focus();
+      focusInput();
     });
     if (session.caret.chainId === chainId && session.caret.index === index) {
       const caret = document.createElement("span");
@@ -6957,7 +6975,7 @@ function createEditorRuntime(options) {
       event.preventDefault();
       event.stopPropagation();
       startDragSelection(chainId, indexInChain);
-      surfaceEl.focus();
+      focusInput();
     });
     nodeEl.addEventListener("click", (event) => {
       if (dragChanged) {
@@ -6968,7 +6986,7 @@ function createEditorRuntime(options) {
       }
       event.stopPropagation();
       applyTransient((prev) => selectNode(prev, node.id));
-      surfaceEl.focus();
+      focusInput();
     });
     const body = document.createElement("span");
     body.className = "node-body";
@@ -7003,7 +7021,7 @@ function createEditorRuntime(options) {
     const activeTree = session[activeTreeKey(session.activeSide)];
     surfaceEl.appendChild(buildChain(activeTree));
     if (initialKeyboardFocusPending) {
-      requestAnimationFrame(() => surfaceEl.focus());
+      requestAnimationFrame(focusInput);
       initialKeyboardFocusPending = false;
     }
     notifySessionChange();
@@ -7041,7 +7059,7 @@ function createEditorRuntime(options) {
     }
     session = restored;
     render();
-    surfaceEl.focus();
+    focusInput();
   }
   function performRedo() {
     const restored = restoreRedo(undoRedo, session);
@@ -7050,9 +7068,12 @@ function createEditorRuntime(options) {
     }
     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") {
@@ -7151,6 +7172,70 @@ function createEditorRuntime(options) {
       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;
@@ -7200,7 +7285,7 @@ function createEditorRuntime(options) {
     }
     event.preventDefault();
     startDragSelection(resolved.chainId, resolved.slotIndex);
-    surfaceEl.focus();
+    focusInput();
   }
   function onSurfaceClick(event) {
     if (dragChanged) {
@@ -7217,7 +7302,7 @@ function createEditorRuntime(options) {
     } else {
       clearSelectionAndNodeHighlights();
     }
-    surfaceEl.focus();
+    focusInput();
   }
   function onDocumentPointerDown(event) {
     const target = event.target;
@@ -7233,6 +7318,13 @@ function createEditorRuntime(options) {
     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);
@@ -7244,6 +7336,13 @@ function createEditorRuntime(options) {
     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);
@@ -7264,6 +7363,7 @@ function createEditorRuntime(options) {
       uiLocale = locale;
       render();
     },
+    focusInput,
     performUndo,
     performRedo,
     performCopy,
@@ -7271,27 +7371,27 @@ function createEditorRuntime(options) {
     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") {
@@ -7301,79 +7401,79 @@ function createEditorRuntime(options) {
       } 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));
@@ -7395,7 +7495,7 @@ function createEditorRuntime(options) {
     },
     deleteStructure: () => {
       applyStructural((prev) => deleteStructure(prev));
-      surfaceEl.focus();
+      focusInput();
     }
   };
   render();
@@ -8793,7 +8893,7 @@ function arabicXeLatexPreamblePkg(twocolumn = false) {
 \usepackage{bidi}
 \usepackage{multirow}
 \usepackage{booktabs}
-\usepackage{graphicx} % For \butexreflect
+\usepackage{graphicx} % For \reflectbox
 \usepackage{xcolor}
 \usepackage{tikz}
 \usepackage{tcolorbox}  % For tcolorbox environment
@@ -8862,10 +8962,8 @@ function arabicXeLatexPreambleCmd() {
 \newcommand{\horzbar}{\rule[.5ex]{2.5ex}{0.5pt}}
 
 
-\newcommand{\butexreflect}[1]{\tikz[baseline=(n.base)]{\node[inner sep=0pt,outer sep=0pt,xscale=-1](n){#1};}}
-
-\newcommand{\arabsqrt}[2]{\butexreflect{\(\sqrt[\butexreflect{\(#1\)}]{\butexreflect{\(#2\)}}\)}}
-\newcommand{\arabvec}[1]{\butexreflect{$\vec{\butexreflect{$#1$}}$}}
+\newcommand{\arabsqrt}[2]{\reflectbox{\(\sqrt[\reflectbox{\(#1\)}]{\reflectbox{\(#2\)}}\)}}
+\newcommand{\arabvec}[1]{\reflectbox{$\vec{\reflectbox{$#1$}}$}}
 
 \newcommand{\arabexp}[1]{{}^{#1}\!\raisebox{-4.5pt}{\text{\diwani{ه}}}}
 \newcommand{\arablog}[2]{\left(\text{#2}\right)\!\prescript{}{\text{#1}}{\text{\diwani{لو}}}}
@@ -8913,9 +9011,9 @@ function arabicXeLatexPreambleCmd() {
 \newcommand{\araboddde}[2][-5pt]{\stackrel{\raisebox{#1}{$\vcenter{\hbox{$\cdot\!\cdot\!\cdot$}}$}}{\text{#2}}}
 \newcommand{\arabpde}[1]{\prescript{}{#1\!\!}{\nabla}} % arabic partial differential equation (PDE)
 
-\newcommand{\arabprime}[0]{\butexreflect{$\prime$}\!} % arabic prime notation
-\newcommand{\arabpprime}[0]{\butexreflect{$\prime$}\butexreflect{$\prime$}\!} % arabic prime notation
-\newcommand{\arabppprime}[0]{\butexreflect{$\prime$}\butexreflect{$\prime$}\butexreflect{$\prime$}\!} % arabic prime notation
+\newcommand{\arabprime}[0]{\reflectbox{$\prime$}\!} % arabic prime notation
+\newcommand{\arabpprime}[0]{\reflectbox{$\prime$}\reflectbox{$\prime$}\!} % arabic prime notation
+\newcommand{\arabppprime}[0]{\reflectbox{$\prime$}\reflectbox{$\prime$}\reflectbox{$\prime$}\!} % arabic prime notation
 
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
@@ -8935,7 +9033,7 @@ function arabicXeLatexPreambleCmd() {
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 
 
-\newcommand{\arsqrt}[2][]{\butexreflect{\(\sqrt[\butexreflect{\(#1\)}]{\butexreflect{\(#2\)}}\)}}
+\newcommand{\arsqrt}[2][]{\reflectbox{\(\sqrt[\reflectbox{\(#1\)}]{\reflectbox{\(#2\)}}\)}}
 \newcommand{\arexp}[0]{\!\raisebox{-4.5pt}{\text{\diwani{ه}}}}
 \newcommand{\arlog}[0]{\!\!\text{\diwani{لو}}}
 \newcommand{\arln}[0]{\!\!\prescript{}{\text{\diwani{ه}}}{\text{\diwani{لو}}}}
@@ -12118,6 +12216,22 @@ var WIDGET_CHROME_CSS = `
   padding: 10px 12px;
 }
 
+.butex-widget .butex-editor-input-bridge {
+  border: 0;
+  font-size: 16px;
+  height: 1px;
+  margin: 0;
+  max-height: 1px;
+  min-height: 1px;
+  opacity: 0;
+  overflow: hidden;
+  padding: 0;
+  pointer-events: none;
+  position: absolute;
+  resize: none;
+  width: 1px;
+}
+
 .butex-widget .toolbar {
   display: flex;
   flex-wrap: wrap;
@@ -13119,6 +13233,7 @@ var ButexEditor = (0, import_react8.forwardRef)(
     const messages = equationEditorMessages(uiLocale);
     const wrapperRef = (0, import_react8.useRef)(null);
     const surfaceRef = (0, import_react8.useRef)(null);
+    const inputRef = (0, import_react8.useRef)(null);
     const mathOutputRef = (0, import_react8.useRef)(null);
     const renderErrorRef = (0, import_react8.useRef)(null);
     const latexLinesRef = (0, import_react8.useRef)(null);
@@ -13230,6 +13345,7 @@ ${arabic || currentMessages.empty}`;
       }
       const runtime = createEditorRuntime({
         surfaceEl,
+        inputEl: inputRef.current,
         initialSession,
         defaultSide,
         uiLocale,
@@ -13271,7 +13387,7 @@ ${arabic || currentMessages.empty}`;
       } else {
         runtime.render();
       }
-      surfaceEl.focus();
+      runtime.focusInput();
       return () => {
         runtime.destroy();
         runtimeRef.current = null;
@@ -13285,7 +13401,7 @@ ${arabic || currentMessages.empty}`;
       }
     }, [uiLocale]);
     function focusSurface() {
-      surfaceRef.current?.focus();
+      runtimeRef.current?.focusInput();
     }
     function insertSelectedEnvironment(rows, columns) {
       if (envPaletteMode === "array") {
@@ -14363,6 +14479,20 @@ ${arabic || currentMessages.empty}`;
                 "aria-label": messages.equationEditor
               }
             ),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              "textarea",
+              {
+                ref: inputRef,
+                className: "butex-editor-input-bridge",
+                "aria-label": messages.equationEditor,
+                autoCapitalize: "none",
+                autoComplete: "off",
+                autoCorrect: "off",
+                inputMode: "text",
+                spellCheck: false,
+                tabIndex: -1
+              }
+            ),
             /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref: renderErrorRef, className: "error", hidden: true })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("section", { className: "panel panel-preview", "aria-label": messages.renderPreview, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref: mathOutputRef, className: "preview-box" }) }),