@drghaliasri/butex 5.4.6 → 5.5.0

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) {
@@ -8116,6 +8189,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 +8289,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") {
@@ -8852,9 +8998,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 +9037,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 +9291,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 +9467,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 +9610,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 +10652,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 +10788,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 +11587,11 @@ function DocumentInsertToolbar({
   selectionCount = 0,
   canMoveSelectionUp = false,
   canMoveSelectionDown = false,
+  canFormatText = false,
+  activeTextStyles = {},
   onUndo,
   onRedo,
+  onToggleTextStyle,
   onMoveSelectionUp,
   onMoveSelectionDown,
   onDeleteSelection,
@@ -11438,6 +11615,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 +11722,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 +11817,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 +11882,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);
@@ -14785,7 +15088,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 +15296,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 +15822,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 +16852,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 +17014,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 +17217,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 +17488,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 +17526,11 @@ function ButexDocumentEditor2({
               selectionCount,
               canMoveSelectionUp,
               canMoveSelectionDown,
+              canFormatText,
+              activeTextStyles,
               onUndo: undoDocument,
               onRedo: redoDocument,
+              onToggleTextStyle: toggleInlineTextStyle,
               onMoveSelectionUp: () => moveSelectedBlocks(-1),
               onMoveSelectionDown: () => moveSelectedBlocks(1),
               onDeleteSelection: deleteSelectedBlocks,