@drghaliasri/butex 5.4.6 → 5.5.1

package/dist/react-document2.js

@@ -1168,7 +1168,7 @@ function parseReferences(json) {
   }
   return references;
 }
-function createInlineField2(value = "", mathObjects = [], options = {}, path = "$", diagnostics = []) {
+function createInlineField2(value = "", mathObjects = [], options = {}, path = "$", diagnostics = [], formats = []) {
   const mode = options.mode ?? "english";
   const spans = detectInlineSpans2(value);
   const mathSpans = spans.filter((span) => span.kind === "math");
@@ -1180,7 +1180,7 @@ function createInlineField2(value = "", mathObjects = [], options = {}, path = "
   }
   for (const span of spans) {
     if (span.start > index) {
-      tokens.push({ id: document2Id("text"), kind: "text", text: value.slice(index, span.start) });
+      pushFormattedTextTokens(tokens, value.slice(index, span.start), index, formats);
     }
     if (span.kind === "cite") {
       tokens.push({
@@ -1236,9 +1236,81 @@ function createInlineField2(value = "", mathObjects = [], options = {}, path = "
     index = span.end;
   }
   if (index < value.length || tokens.length === 0) {
-    tokens.push({ id: document2Id("text"), kind: "text", text: value.slice(index) });
+    pushFormattedTextTokens(tokens, value.slice(index), index, formats);
+  }
+  return { id: document2Id("field"), tokens: compactTextTokens(tokens) };
+}
+function styleFromFormat(format) {
+  const style = {};
+  if (format.bold === true) {
+    style.bold = true;
+  }
+  if (format.italic === true) {
+    style.italic = true;
+  }
+  if (format.underline === true) {
+    style.underline = true;
+  }
+  return style.bold || style.italic || style.underline ? style : null;
+}
+function mergeTextStyle(base, added) {
+  return {
+    ...base?.bold ? { bold: true } : {},
+    ...base?.italic ? { italic: true } : {},
+    ...base?.underline ? { underline: true } : {},
+    ...added.bold ? { bold: true } : {},
+    ...added.italic ? { italic: true } : {},
+    ...added.underline ? { underline: true } : {}
+  };
+}
+function textStylesEqual(a, b) {
+  return Boolean(a?.bold) === Boolean(b?.bold) && Boolean(a?.italic) === Boolean(b?.italic) && Boolean(a?.underline) === Boolean(b?.underline);
+}
+function compactTextTokens(tokens) {
+  const compacted = [];
+  for (const token of tokens) {
+    const previous = compacted[compacted.length - 1];
+    if (previous?.kind === "text" && token.kind === "text" && textStylesEqual(previous.style, token.style)) {
+      previous.text += token.text;
+    } else {
+      compacted.push(token);
+    }
+  }
+  return compacted;
+}
+function styleKey(style) {
+  return `${style?.bold ? "b" : ""}${style?.italic ? "i" : ""}${style?.underline ? "u" : ""}`;
+}
+function pushFormattedTextTokens(tokens, text, sourceStart, formats) {
+  if (text.length === 0) {
+    tokens.push({ id: document2Id("text"), kind: "text", text });
+    return;
+  }
+  const styles = Array.from({ length: text.length });
+  for (const format of formats) {
+    const style = styleFromFormat(format);
+    if (!style || !Number.isFinite(format.start) || !Number.isFinite(format.end)) {
+      continue;
+    }
+    const start = Math.max(0, Math.min(text.length, Math.trunc(format.start) - sourceStart));
+    const end = Math.max(0, Math.min(text.length, Math.trunc(format.end) - sourceStart));
+    if (end <= start) {
+      continue;
+    }
+    for (let index = start; index < end; index += 1) {
+      styles[index] = mergeTextStyle(styles[index], style);
+    }
+  }
+  let chunkStart = 0;
+  for (let index = 1; index <= text.length; index += 1) {
+    if (index < text.length && styleKey(styles[index]) === styleKey(styles[chunkStart])) {
+      continue;
+    }
+    const chunk = text.slice(chunkStart, index);
+    const style = styles[chunkStart];
+    tokens.push({ id: document2Id("text"), kind: "text", text: chunk, ...style ? { style } : {} });
+    chunkStart = index;
   }
-  return { id: document2Id("field"), tokens };
 }
 function closingForList(command) {
   return command === "\\begin{itemize}" ? "\\end{itemize}" : "\\end{enumerate}";
@@ -1249,7 +1321,7 @@ function parseTextBlock(json, options, path, diagnostics) {
     id: document2Id("block"),
     kind: "textBlock",
     command: json.command,
-    field: createInlineField2(value, json.math_objects ?? [], options, `${path}.value`, diagnostics),
+    field: createInlineField2(value, json.math_objects ?? [], options, `${path}.value`, diagnostics, json.command === "\\paragraph" ? json.formats ?? [] : []),
     ...json.centered === true ? { centered: true } : {}
   };
 }
@@ -1258,7 +1330,7 @@ function parseListItem(json, options, path, diagnostics) {
   const blocksJson = Array.isArray(json.blocks) ? json.blocks : [];
   return {
     id: document2Id("item"),
-    field: createInlineField2(value, json.math_objects ?? [], options, `${path}.value`, diagnostics),
+    field: createInlineField2(value, json.math_objects ?? [], options, `${path}.value`, diagnostics, json.formats ?? []),
     blocks: blocksJson.map((block, index) => parseBlock(asBlockJson(block), options, `${path}.blocks[${String(index)}]`, diagnostics))
   };
 }
@@ -1291,7 +1363,8 @@ function parseTableBlock(json, options, path, diagnostics) {
       const spanCount = detectMathSpans2(value).length;
       const cellMathObjects = mathObjects.slice(mathObjectIndex, mathObjectIndex + spanCount);
       mathObjectIndex += spanCount;
-      return createInlineField2(value, cellMathObjects, options, `${path}.rows[${String(rowIndex)}][${String(columnIndex)}]`, diagnostics);
+      const cellFormats = json.cell_formats?.[rowIndex]?.[columnIndex] ?? [];
+      return createInlineField2(value, cellMathObjects, options, `${path}.rows[${String(rowIndex)}][${String(columnIndex)}]`, diagnostics, cellFormats);
     });
   });
   if (mathObjects.length > 0 && mathObjects.length !== mathObjectIndex) {
@@ -6362,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));
 }
@@ -6564,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();
@@ -6578,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);
   }
@@ -6842,7 +6933,7 @@ function createEditorRuntime(options) {
       event.preventDefault();
       event.stopPropagation();
       startDragSelection(chainId, index);
-      surfaceEl.focus();
+      focusInput();
     });
     slot.addEventListener("click", (event) => {
       if (dragChanged) {
@@ -6852,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");
@@ -6884,7 +6975,7 @@ function createEditorRuntime(options) {
       event.preventDefault();
       event.stopPropagation();
       startDragSelection(chainId, indexInChain);
-      surfaceEl.focus();
+      focusInput();
     });
     nodeEl.addEventListener("click", (event) => {
       if (dragChanged) {
@@ -6895,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";
@@ -6930,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();
@@ -6968,7 +7059,7 @@ function createEditorRuntime(options) {
     }
     session = restored;
     render();
-    surfaceEl.focus();
+    focusInput();
   }
   function performRedo() {
     const restored = restoreRedo(undoRedo, session);
@@ -6977,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") {
@@ -7078,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;
@@ -7127,7 +7285,7 @@ function createEditorRuntime(options) {
     }
     event.preventDefault();
     startDragSelection(resolved.chainId, resolved.slotIndex);
-    surfaceEl.focus();
+    focusInput();
   }
   function onSurfaceClick(event) {
     if (dragChanged) {
@@ -7144,7 +7302,7 @@ function createEditorRuntime(options) {
     } else {
       clearSelectionAndNodeHighlights();
     }
-    surfaceEl.focus();
+    focusInput();
   }
   function onDocumentPointerDown(event) {
     const target = event.target;
@@ -7160,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);
@@ -7171,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);
@@ -7191,6 +7363,7 @@ function createEditorRuntime(options) {
       uiLocale = locale;
       render();
     },
+    focusInput,
     performUndo,
     performRedo,
     performCopy,
@@ -7198,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") {
@@ -7228,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));
@@ -7322,7 +7495,7 @@ function createEditorRuntime(options) {
     },
     deleteStructure: () => {
       applyStructural((prev) => deleteStructure(prev));
-      surfaceEl.focus();
+      focusInput();
     }
   };
   render();
@@ -8116,6 +8289,79 @@ function normalizeFieldTokens(tokens) {
   }
   return tokens;
 }
+function textStylesEqual2(a, b) {
+  return Boolean(a?.bold) === Boolean(b?.bold) && Boolean(a?.italic) === Boolean(b?.italic) && Boolean(a?.underline) === Boolean(b?.underline);
+}
+function compactAdjacentTextTokens(tokens) {
+  const compacted = [];
+  for (const token of tokens) {
+    const previous = compacted[compacted.length - 1];
+    if (previous?.kind === "text" && token.kind === "text" && textStylesEqual2(previous.style, token.style)) {
+      previous.text += token.text;
+    } else {
+      compacted.push(token);
+    }
+  }
+  return normalizeFieldTokens(compacted);
+}
+function withoutEmptyStyle(style) {
+  const next = {};
+  if (style.bold) {
+    next.bold = true;
+  }
+  if (style.italic) {
+    next.italic = true;
+  }
+  if (style.underline) {
+    next.underline = true;
+  }
+  return next.bold || next.italic || next.underline ? next : void 0;
+}
+function textTokenPart(text, style, id = document2Id("text")) {
+  return { id, kind: "text", text, ...style ? { style } : {} };
+}
+function toggleTextTokenStyle(document2, fieldId, tokenId, selectionStart, selectionEnd, styleName) {
+  if (selectionEnd <= selectionStart) {
+    return document2;
+  }
+  const next = cloneDocument(document2);
+  visitFields(next.blocks, (field) => {
+    if (field.id !== fieldId) {
+      return false;
+    }
+    const tokenIndex = field.tokens.findIndex((entry) => entry.id === tokenId && entry.kind === "text");
+    if (tokenIndex < 0) {
+      return true;
+    }
+    const token = field.tokens[tokenIndex];
+    const start = Math.max(0, Math.min(token.text.length, selectionStart));
+    const end = Math.max(0, Math.min(token.text.length, selectionEnd));
+    if (end <= start) {
+      return true;
+    }
+    const selectedStyle = token.style ?? {};
+    const enabled = selectedStyle[styleName] === true;
+    const nextStyle = withoutEmptyStyle({ ...selectedStyle, [styleName]: enabled ? void 0 : true });
+    const parts = [];
+    const before = token.text.slice(0, start);
+    const selected = token.text.slice(start, end);
+    const after = token.text.slice(end);
+    if (before.length > 0) {
+      parts.push(textTokenPart(before, token.style, token.id));
+    }
+    parts.push(textTokenPart(selected, nextStyle, before.length > 0 ? document2Id("text") : token.id));
+    if (after.length > 0) {
+      parts.push(textTokenPart(after, token.style));
+    }
+    field.tokens = compactAdjacentTextTokens([
+      ...field.tokens.slice(0, tokenIndex),
+      ...parts,
+      ...field.tokens.slice(tokenIndex + 1)
+    ]);
+    return true;
+  });
+  return next;
+}
 function stitchTextAroundRemovedToken(tokens, index) {
   const before = tokens[index - 1];
   const after = tokens[index + 1];
@@ -8143,8 +8389,8 @@ function removeMathTokenById(document2, tokenId) {
 function splitTextTokenAt(token, offset) {
   const safeOffset = Math.max(0, Math.min(offset, token.text.length));
   return [
-    { id: token.id, kind: "text", text: token.text.slice(0, safeOffset) },
-    { id: document2Id("text"), kind: "text", text: token.text.slice(safeOffset) }
+    { id: token.id, kind: "text", text: token.text.slice(0, safeOffset), ...token.style ? { style: token.style } : {} },
+    { id: document2Id("text"), kind: "text", text: token.text.slice(safeOffset), ...token.style ? { style: token.style } : {} }
   ];
 }
 function insertMathTokenAtCaret(document2, fieldId, textTokenId, caretOffset, session, opening = "$", closing = "$", side = "arabic") {
@@ -8647,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
@@ -8716,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{لو}}}}
@@ -8767,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
 
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
@@ -8789,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{لو}}}}
@@ -8852,9 +9096,22 @@ function mathBodyLatex(token) {
   const rendered = renderMathNodeLatex(token.math);
   return stripDisplayMathDelimiters(rendered);
 }
+function styledTextLatex(text, style) {
+  let output = text;
+  if (style?.bold) {
+    output = `\\textbf{${output}}`;
+  }
+  if (style?.italic) {
+    output = `\\textit{${output}}`;
+  }
+  if (style?.underline) {
+    output = `\\underline{${output}}`;
+  }
+  return output;
+}
 function tokenLatex(token) {
   if (token.kind === "text") {
-    return token.text;
+    return styledTextLatex(token.text, token.style);
   }
   if (token.kind === "cite") {
     return citeTokenLatex(token.keys);
@@ -8878,7 +9135,9 @@ function inlineFieldLatex(field) {
   return field.tokens.map((token) => tokenLatex(token)).join("");
 }
 function textBlockLatex(block) {
-  const body = `${block.command}{${inlineFieldLatex(block.field)}}`;
+  const content = inlineFieldLatex(block.field);
+  const body = block.command === "\\paragraph" ? `\\par
+${content}` : `${block.command}{${content}}`;
   if (block.command === "\\paragraph" && block.centered) {
     return `\\begin{center}
 ${body}
@@ -9130,7 +9389,7 @@ function mathTex(token, equationSide) {
 function previewInlines(field, islands, output, equationSide, document2, previewOptions) {
   return field.tokens.map((token) => {
     if (token.kind === "text") {
-      return { kind: "text", text: token.text };
+      return { kind: "text", text: token.text, ...token.style ? { style: token.style } : {} };
     }
     if (token.kind === "cite") {
       return {
@@ -9306,6 +9565,10 @@ var DOCUMENT2_MESSAGES = {
     redo: "\u0625\u0639\u0627\u062F\u0629",
     structure: "\u0647\u064A\u0643\u0644",
     content: "\u0645\u062D\u062A\u0648\u0649",
+    textFormatting: "\u062A\u0646\u0633\u064A\u0642 \u0627\u0644\u0646\u0635",
+    bold: "\u063A\u0627\u0645\u0642",
+    italic: "\u0645\u0627\u0626\u0644",
+    underline: "\u062A\u062D\u062A\u0647 \u062E\u0637",
     equations: "\u0645\u0639\u0627\u062F\u0644\u0627\u062A",
     citations: "\u0627\u0642\u062A\u0628\u0627\u0633\u0627\u062A \u0648\u0645\u0631\u0627\u062C\u0639",
     lists: "\u0642\u0648\u0627\u0626\u0645",
@@ -9445,6 +9708,10 @@ var DOCUMENT2_MESSAGES = {
     redo: "Redo",
     structure: "Structure",
     content: "Content",
+    textFormatting: "Text formatting",
+    bold: "Bold",
+    italic: "Italic",
+    underline: "Underline",
     equations: "Equations",
     citations: "Citations and references",
     lists: "Lists",
@@ -10483,7 +10750,9 @@ function rememberCaret(element, blockId, fieldId, tokenId, onFieldFocus) {
   if (!blockId || !onFieldFocus) {
     return;
   }
-  onFieldFocus(blockId, fieldId, tokenId, element.selectionStart ?? element.value.length);
+  const selectionStart = element.selectionStart ?? element.value.length;
+  const selectionEnd = element.selectionEnd ?? selectionStart;
+  onFieldFocus(blockId, fieldId, tokenId, selectionEnd, selectionStart, selectionEnd);
 }
 function fitTextareaHeight(element) {
   if (!element) {
@@ -10617,6 +10886,9 @@ function InlineField({
         {
           className: "butex-document2-widget__inline-text",
           value: token.text,
+          "data-bold": token.style?.bold === true ? "true" : void 0,
+          "data-italic": token.style?.italic === true ? "true" : void 0,
+          "data-underline": token.style?.underline === true ? "true" : void 0,
           dir: documentDirection,
           "aria-label": messages.text,
           rows: 1,
@@ -11413,8 +11685,11 @@ function DocumentInsertToolbar({
   selectionCount = 0,
   canMoveSelectionUp = false,
   canMoveSelectionDown = false,
+  canFormatText = false,
+  activeTextStyles = {},
   onUndo,
   onRedo,
+  onToggleTextStyle,
   onMoveSelectionUp,
   onMoveSelectionDown,
   onDeleteSelection,
@@ -11438,6 +11713,56 @@ function DocumentInsertToolbar({
 }) {
   const messages = document2Messages(uiLocale);
   const [digitMenuOpen, setDigitMenuOpen] = (0, import_react7.useState)(false);
+  const [referencesMenuOpen, setReferencesMenuOpen] = (0, import_react7.useState)(false);
+  const referencesMenuRef = (0, import_react7.useRef)(null);
+  const referencesTriggerRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useEffect)(() => {
+    if (!referencesMenuOpen) {
+      return;
+    }
+    referencesMenuRef.current?.querySelector('[role="menuitem"]')?.focus();
+    const closeOnOutsideClick = (event) => {
+      if (!referencesMenuRef.current?.contains(event.target)) {
+        setReferencesMenuOpen(false);
+      }
+    };
+    const closeOnEscape = (event) => {
+      if (event.key === "Escape") {
+        setReferencesMenuOpen(false);
+        referencesTriggerRef.current?.focus();
+      }
+    };
+    document.addEventListener("mousedown", closeOnOutsideClick);
+    document.addEventListener("keydown", closeOnEscape);
+    return () => {
+      document.removeEventListener("mousedown", closeOnOutsideClick);
+      document.removeEventListener("keydown", closeOnEscape);
+    };
+  }, [referencesMenuOpen]);
+  function runReferenceAction(action) {
+    setReferencesMenuOpen(false);
+    action();
+  }
+  function moveReferenceMenuFocus(event) {
+    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+      return;
+    }
+    const items = Array.from(event.currentTarget.querySelectorAll('[role="menuitem"]'));
+    if (items.length === 0) {
+      return;
+    }
+    event.preventDefault();
+    const currentIndex = items.indexOf(document.activeElement);
+    if (event.key === "Home") {
+      items[0]?.focus();
+    } else if (event.key === "End") {
+      items[items.length - 1]?.focus();
+    } else {
+      const change = event.key === "ArrowDown" ? 1 : -1;
+      const nextIndex = (currentIndex + change + items.length) % items.length;
+      items[nextIndex]?.focus();
+    }
+  }
   function digitTitle(id) {
     if (id === "arabicIndic") {
       return messages.arabicIndicDigits;
@@ -11495,6 +11820,50 @@ function DocumentInsertToolbar({
         messages.selectedBlockCount
       ] }) : null
     ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "butex-document2-widget__toolbar-group", role: "group", "aria-label": messages.textFormatting, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "butex-document2-widget__icon-btn butex-document2-widget__format-btn",
+          title: messages.bold,
+          "aria-label": messages.bold,
+          "aria-pressed": activeTextStyles.bold === true,
+          disabled: !canFormatText,
+          onMouseDown: (event) => event.preventDefault(),
+          onClick: () => onToggleTextStyle?.("bold"),
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "butex-document2-widget__format-icon butex-document2-widget__format-icon--bold", "aria-hidden": "true", children: "\u0646\u0635" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "butex-document2-widget__icon-btn butex-document2-widget__format-btn",
+          title: messages.italic,
+          "aria-label": messages.italic,
+          "aria-pressed": activeTextStyles.italic === true,
+          disabled: !canFormatText,
+          onMouseDown: (event) => event.preventDefault(),
+          onClick: () => onToggleTextStyle?.("italic"),
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "butex-document2-widget__format-icon butex-document2-widget__format-icon--italic", "aria-hidden": "true", children: "\u0646\u0635" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "butex-document2-widget__icon-btn butex-document2-widget__format-btn",
+          title: messages.underline,
+          "aria-label": messages.underline,
+          "aria-pressed": activeTextStyles.underline === true,
+          disabled: !canFormatText,
+          onMouseDown: (event) => event.preventDefault(),
+          onClick: () => onToggleTextStyle?.("underline"),
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "butex-document2-widget__format-icon butex-document2-widget__format-icon--underline", "aria-hidden": "true", children: "\u0646\u0635" })
+        }
+      )
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "butex-document2-widget__toolbar-group", role: "group", "aria-label": messages.structure, children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "button",
@@ -11546,35 +11915,57 @@ function DocumentInsertToolbar({
         )) }) : null
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "butex-document2-widget__toolbar-group", role: "group", "aria-label": messages.citations, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", className: "butex-document2-widget__icon-btn", title: messages.insertCitation, "aria-label": messages.insertCitation, onClick: onInsertCitation, children: "[]" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", className: "butex-document2-widget__icon-btn", title: messages.insertInternalRef, "aria-label": messages.insertInternalRef, onClick: onInsertInternalRef, children: "\xA7" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", className: "butex-document2-widget__icon-btn", title: messages.insertBibliography, "aria-label": messages.insertBibliography, onClick: onInsertBibliography, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "butex-document2-widget__icon-bibliography", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("svg", { viewBox: "0 0 16 16", width: "14", height: "14", focusable: "false", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          "path",
-          {
-            fill: "currentColor",
-            d: "M2.2 2.4h7.2c.9 0 1.6.7 1.6 1.6v9.2c0 .5-.6.8-1 .5l-2.2-1.6H2.2c-.9 0-1.6-.7-1.6-1.6V4c0-.9.7-1.6 1.6-1.6zm0 1.2c-.2 0-.4.2-.4.4v6.5c0 .2.2.4.4.4h6.1l1.5 1.1V4c0-.2-.2-.4-.4-.4H2.2z"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          "path",
-          {
-            fill: "currentColor",
-            d: "M3.4 5.2h5.2v1H3.4zm0 2.1h4.2v1H3.4zm0 2.1h3.4v1H3.4z"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          "path",
-          {
-            fill: "currentColor",
-            d: "M11.4 4.1h2.2c.8 0 1.4.6 1.4 1.4v7.1c0 .4-.5.7-.8.4l-1.7-1.3h-1.1V4.1zm1.2 1.2v5.4l.7.5V5.5c0-.1-.1-.2-.2-.2h-.5z"
-          }
-        )
-      ] }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", className: "butex-document2-widget__icon-btn", title: messages.manageReferences, "aria-label": messages.manageReferences, onClick: onManageReferences, children: "\u2630" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", className: "butex-document2-widget__icon-btn", title: messages.manageLabels, "aria-label": messages.manageLabels, onClick: onManageLabels, children: "\u2317" })
-    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "butex-document2-widget__toolbar-group", role: "group", "aria-label": messages.citations, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "butex-document2-widget__references-menu", ref: referencesMenuRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        "button",
+        {
+          ref: referencesTriggerRef,
+          type: "button",
+          className: "butex-document2-widget__icon-btn butex-document2-widget__references-trigger",
+          title: messages.citations,
+          "aria-label": messages.citations,
+          "aria-haspopup": "menu",
+          "aria-expanded": referencesMenuOpen,
+          onClick: () => setReferencesMenuOpen((open) => !open),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "butex-document2-widget__icon-bibliography", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { viewBox: "0 0 16 16", width: "14", height: "14", focusable: "false", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { fill: "currentColor", d: "M2 2.2h4.2c.7 0 1.3.3 1.8.8.5-.5 1.1-.8 1.8-.8H14v10.6H9.8c-.6 0-1.1.3-1.4.8h-.8c-.3-.5-.8-.8-1.4-.8H2V2.2zm1.2 1.2v8.2h3c.4 0 .8.1 1.2.3V4.6c-.2-.7-.6-1.2-1.2-1.2h-3zm9.6 0h-3c-.6 0-1 .5-1.2 1.2v7.3c.4-.2.8-.3 1.2-.3h3V3.4z" }) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: messages.citations }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "butex-document2-widget__menu-chevron", "aria-hidden": "true", children: "\u2304" })
+          ]
+        }
+      ),
+      referencesMenuOpen ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        "div",
+        {
+          className: "butex-document2-widget__references-menu-options",
+          role: "menu",
+          "aria-label": messages.citations,
+          onKeyDown: moveReferenceMenuFocus,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("button", { type: "button", role: "menuitem", title: messages.insertCitation, onClick: () => runReferenceAction(onInsertCitation), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { "aria-hidden": "true", children: "[]" }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: messages.insertCitation })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("button", { type: "button", role: "menuitem", title: messages.insertInternalRef, onClick: () => runReferenceAction(onInsertInternalRef), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { "aria-hidden": "true", children: "\xA7" }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: messages.insertInternalRef })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("button", { type: "button", role: "menuitem", title: messages.insertBibliography, onClick: () => runReferenceAction(onInsertBibliography), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "butex-document2-widget__icon-bibliography", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { viewBox: "0 0 16 16", width: "14", height: "14", focusable: "false", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { fill: "currentColor", d: "M2.2 2.4h7.2c.9 0 1.6.7 1.6 1.6v9.2c0 .5-.6.8-1 .5l-2.2-1.6H2.2c-.9 0-1.6-.7-1.6-1.6V4c0-.9.7-1.6 1.6-1.6zm0 1.2c-.2 0-.4.2-.4.4v6.5c0 .2.2.4.4.4h6.1l1.5 1.1V4c0-.2-.2-.4-.4-.4H2.2zM3.4 5.2h5.2v1H3.4zm0 2.1h4.2v1H3.4zm0 2.1h3.4v1H3.4zM11.4 4.1h2.2c.8 0 1.4.6 1.4 1.4v7.1c0 .4-.5.7-.8.4l-1.7-1.3h-1.1V4.1zm1.2 1.2v5.4l.7.5V5.5c0-.1-.1-.2-.2-.2h-.5z" }) }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: messages.insertBibliography })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("button", { type: "button", role: "menuitem", title: messages.manageReferences, onClick: () => runReferenceAction(onManageReferences), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { "aria-hidden": "true", children: "\u2630" }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: messages.manageReferences })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("button", { type: "button", role: "menuitem", title: messages.manageLabels, onClick: () => runReferenceAction(onManageLabels), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { "aria-hidden": "true", children: "\u2317" }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: messages.manageLabels })
+            ] })
+          ]
+        }
+      ) : null
+    ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "butex-document2-widget__toolbar-group", role: "group", "aria-label": messages.lists, children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", className: "butex-document2-widget__icon-btn", title: messages.bulletedList, "aria-label": messages.bulletedList, onClick: onAddList, children: "\u2022\u2261" }),
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", className: "butex-document2-widget__icon-btn", title: messages.numberedList, "aria-label": messages.numberedList, onClick: onAddEnumerate, children: "1." })
@@ -11589,7 +11980,17 @@ var import_jsx_runtime11 = require("react/jsx-runtime");
 function PreviewInlines({ inlines, output }) {
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: inlines.map((inline, index) => {
     if (inline.kind === "text") {
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: inline.text }, index);
+      let content = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: inline.text });
+      if (inline.style?.bold) {
+        content = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("strong", { children: content });
+      }
+      if (inline.style?.italic) {
+        content = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("em", { children: content });
+      }
+      if (inline.style?.underline) {
+        content = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "butex-document2-widget__preview-underline", children: content });
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: content }, index);
     }
     if (inline.kind === "cite") {
       return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "butex-document2-widget__preview-cite", children: inline.label }, inline.id);
@@ -11815,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;
@@ -12816,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);
@@ -12927,6 +13345,7 @@ ${arabic || currentMessages.empty}`;
       }
       const runtime = createEditorRuntime({
         surfaceEl,
+        inputEl: inputRef.current,
         initialSession,
         defaultSide,
         uiLocale,
@@ -12968,7 +13387,7 @@ ${arabic || currentMessages.empty}`;
       } else {
         runtime.render();
       }
-      surfaceEl.focus();
+      runtime.focusInput();
       return () => {
         runtime.destroy();
         runtimeRef.current = null;
@@ -12982,7 +13401,7 @@ ${arabic || currentMessages.empty}`;
       }
     }, [uiLocale]);
     function focusSurface() {
-      surfaceRef.current?.focus();
+      runtimeRef.current?.focusInput();
     }
     function insertSelectedEnvironment(rows, columns) {
       if (envPaletteMode === "array") {
@@ -14060,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" }) }),
@@ -14785,7 +15218,7 @@ function RefPickerPopover({
 
 // src/react-document2/editorFocus.ts
 function createEmptyDocument2EditorFocus() {
-  return { blockId: null, fieldId: null, textTokenId: null, caretOffset: 0 };
+  return { blockId: null, fieldId: null, textTokenId: null, caretOffset: 0, selectionStart: 0, selectionEnd: 0 };
 }
 function findBlockIdForField(blocks, fieldId) {
   for (const block of blocks) {
@@ -14993,6 +15426,89 @@ var DOCUMENT2_WIDGET_CSS = `
   display: block;
 }
 
+.butex-document2-widget__format-btn {
+  font-family: "Amiri", "Noto Serif Arabic", Georgia, serif;
+  min-width: 36px;
+}
+
+.butex-document2-widget__format-icon {
+  direction: rtl;
+  display: inline-block;
+  font-size: 0.84rem;
+  font-weight: 500;
+}
+
+.butex-document2-widget__format-icon--bold {
+  font-weight: 900;
+}
+
+.butex-document2-widget__format-icon--italic {
+  font-style: italic;
+  transform: skewX(-7deg);
+}
+
+.butex-document2-widget__format-icon--underline {
+  text-decoration: underline;
+  text-underline-offset: 0.12em;
+}
+
+.butex-document2-widget__format-underline,
+.butex-document2-widget__preview-underline {
+  text-decoration: underline;
+  text-underline-offset: 0.12em;
+}
+
+.butex-document2-widget__references-menu {
+  position: relative;
+}
+
+.butex-document2-widget__references-trigger {
+  gap: 5px;
+  white-space: nowrap;
+}
+
+.butex-document2-widget__menu-chevron {
+  color: var(--butex-document2-muted);
+  font-size: 0.8rem;
+}
+
+.butex-document2-widget__references-menu-options {
+  background: var(--butex-document2-panel);
+  border: 1px solid var(--butex-document2-border);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px color-mix(in srgb, var(--butex-document2-fg) 16%, transparent);
+  display: grid;
+  gap: 2px;
+  inset-inline-start: 0;
+  margin-top: 4px;
+  min-width: max-content;
+  padding: 4px;
+  position: absolute;
+  top: 100%;
+  z-index: 30;
+}
+
+.butex-document2-widget__references-menu-options button {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: 6px;
+  color: var(--butex-document2-fg);
+  cursor: pointer;
+  display: grid;
+  font: inherit;
+  gap: 8px;
+  grid-template-columns: 18px 1fr;
+  padding: 7px 9px;
+  text-align: start;
+}
+
+.butex-document2-widget__references-menu-options button:hover,
+.butex-document2-widget__references-menu-options button:focus-visible {
+  background: var(--butex-document2-accent-bg);
+  outline: none;
+}
+
 .butex-document2-widget__float-meta {
   display: grid;
   gap: 8px;
@@ -15436,6 +15952,19 @@ var DOCUMENT2_WIDGET_CSS = `
   border-color: color-mix(in srgb, var(--butex-document2-text-token-border) 55%, var(--butex-document2-accent));
 }
 
+.butex-document2-widget__inline-text[data-bold="true"] {
+  font-weight: 700;
+}
+
+.butex-document2-widget__inline-text[data-italic="true"] {
+  font-style: italic;
+}
+
+.butex-document2-widget__inline-text[data-underline="true"] {
+  text-decoration: underline;
+  text-underline-offset: 0.12em;
+}
+
 .butex-document2-widget__inline-field input {
   min-width: 12ch;
 }
@@ -16453,6 +16982,50 @@ function topLevelBlockIdForField(document2, fieldId) {
 function topLevelBlockIdForToken(document2, tokenId) {
   return document2.blocks.find((block) => blockHasToken(block, tokenId))?.id ?? null;
 }
+function findFormatTextToken(document2, focus) {
+  if (!focus.fieldId || !focus.textTokenId || focus.selectionEnd <= focus.selectionStart) {
+    return null;
+  }
+  function textTokenFromField(field) {
+    if (field.id !== focus.fieldId) {
+      return null;
+    }
+    const token = field.tokens.find((entry) => entry.id === focus.textTokenId && entry.kind === "text");
+    return token ?? null;
+  }
+  function visit(blocks) {
+    for (const block of blocks) {
+      if (block.kind === "textBlock") {
+        const token = block.command === "\\paragraph" ? textTokenFromField(block.field) : null;
+        if (token) {
+          return token;
+        }
+      } else if (block.kind === "list") {
+        for (const item of block.items) {
+          const itemToken = textTokenFromField(item.field);
+          if (itemToken) {
+            return itemToken;
+          }
+          const nestedToken = visit(item.blocks);
+          if (nestedToken) {
+            return nestedToken;
+          }
+        }
+      } else if (block.kind === "table") {
+        for (const row of block.rows) {
+          for (const cell of row) {
+            const token = textTokenFromField(cell);
+            if (token) {
+              return token;
+            }
+          }
+        }
+      }
+    }
+    return null;
+  }
+  return visit(document2.blocks);
+}
 function formatDocument2Diagnostic(d, messages) {
   if (d.message === "math_objects order mismatch") {
     return `${messages.importOrderMismatch} ${messages.path}: ${d.path}`;
@@ -16571,6 +17144,9 @@ function ButexDocumentEditor2({
   const selectionCount = blockSelection ? blockSelection.to - blockSelection.from + 1 : 0;
   const canMoveSelectionUp = Boolean(blockSelection && blockSelection.from > 0);
   const canMoveSelectionDown = Boolean(blockSelection && blockSelection.to < documentNode.blocks.length - 1);
+  const formatTextToken = (0, import_react13.useMemo)(() => findFormatTextToken(documentNode, editorFocus), [documentNode, editorFocus]);
+  const canFormatText = formatTextToken !== null;
+  const activeTextStyles = formatTextToken?.style ?? {};
   function clearBlockSelection() {
     setBlockSelectionState(emptyBlockSelection());
   }
@@ -16771,15 +17347,15 @@ function ButexDocumentEditor2({
     root.addEventListener("keydown", onKeyDown);
     return () => root.removeEventListener("keydown", onKeyDown);
   }, [editorOpen]);
-  function rememberFieldFocus(blockId, fieldId, textTokenId, caretOffset) {
+  function rememberFieldFocus(blockId, fieldId, textTokenId, caretOffset, selectionStart, selectionEnd) {
     openBlock(blockId);
     clearBlockSelection();
-    setEditorFocus({ blockId, fieldId, textTokenId, caretOffset });
+    setEditorFocus({ blockId, fieldId, textTokenId, caretOffset, selectionStart, selectionEnd });
   }
   function rememberMathFocus(blockId, fieldId) {
     openBlock(blockId);
     clearBlockSelection();
-    setEditorFocus({ blockId, fieldId, textTokenId: null, caretOffset: 0 });
+    setEditorFocus({ blockId, fieldId, textTokenId: null, caretOffset: 0, selectionStart: 0, selectionEnd: 0 });
   }
   function rememberBlockFocus(blockId) {
     openBlock(blockId);
@@ -17042,6 +17618,22 @@ function ButexDocumentEditor2({
   function deleteRefToken(tokenId) {
     applyDocument(removeRefTokenById(documentRef.current, tokenId), "immediate");
   }
+  function toggleInlineTextStyle(styleName) {
+    if (!canFormatText || !editorFocus.fieldId || !editorFocus.textTokenId) {
+      return;
+    }
+    applyDocument(
+      toggleTextTokenStyle(
+        documentRef.current,
+        editorFocus.fieldId,
+        editorFocus.textTokenId,
+        editorFocus.selectionStart,
+        editorFocus.selectionEnd,
+        styleName
+      ),
+      "immediate"
+    );
+  }
   const showEditorPanel = !previewOnly && editorOpen;
   const showPreviewPanel = previewOnly || previewOpen;
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -17064,8 +17656,11 @@ function ButexDocumentEditor2({
               selectionCount,
               canMoveSelectionUp,
               canMoveSelectionDown,
+              canFormatText,
+              activeTextStyles,
               onUndo: undoDocument,
               onRedo: redoDocument,
+              onToggleTextStyle: toggleInlineTextStyle,
               onMoveSelectionUp: () => moveSelectedBlocks(-1),
               onMoveSelectionDown: () => moveSelectedBlocks(1),
               onDeleteSelection: deleteSelectedBlocks,