@drghaliasri/butex 4.1.0 → 4.2.0

package/README.md

@@ -61,7 +61,8 @@ Peer dependency: `mathjax` ^4.x (aligned with MathJax 4 components). If you use
 2. Load BuTeX’s IIFE bundle (`dist/index.global.js` exposes global `BuTeX`).
 3. In `MathJax.startup.ready`, call `BuTeX.registerBuTeX(MathJax)` before `MathJax.startup.defaultReady()`.
 4. Inject styles once: `BuTeX.injectBuTeXStyles()` (or embed `BuTeX.BUTEX_CHROME_CSS` yourself).
-5. Render math with `renderBuTeXMathIsland(tex, options?)` or mount into a host element via `mountBuTeXMathIsland(host, tex, options?)`. Pass `output: 'svg'` when the host loads `tex-svg.js`, or `output: 'chtml'` with `tex-chtml.js`. For raw Arabic TeX that did not come from the editor AST, pass `mirrorOperators: true` to wrap directional operators according to BuTeX's shared operator table. `ButexEditor` picks SVG vs CHTML automatically from the loaded MathJax bundle (`tex2svg` vs `tex2chtml`).
+5. When using **SVG** (`tex-svg.js`), call `BuTeX.registerBuTeXSvgTextWrapper(MathJax)` **after** `defaultReady()` so Takween/Diwani text, `\ad`, and Arabic atomic commands (`\arsin`, etc.) render in the preview with the correct fonts. CommonHTML (`tex-chtml.js`) uses the injected CSS classes instead.
+6. Render math with `renderBuTeXMathIsland(tex, options?)` or mount into a host element via `mountBuTeXMathIsland(host, tex, options?)`. Pass `output: 'svg'` when the host loads `tex-svg.js`, or `output: 'chtml'` with `tex-chtml.js`. For raw Arabic TeX that did not come from the editor AST, pass `mirrorOperators: true` to wrap directional operators according to BuTeX's shared operator table. `ButexEditor` picks SVG vs CHTML automatically from the loaded MathJax bundle (`tex2svg` vs `tex2chtml`).
 
 Ensure TeX `packages` includes `butex-arabic-math` (use `BUTEX_TEX_PACKAGE` in config when using `{ '[+]': [...] }`).
 
@@ -127,7 +128,7 @@ Use this when you want the same editor UX as the demo:
 - Optionally pass `buttonElements` (undo/redo/copy/cut/split toggle) for auto button state refresh.
 - Wire your toolbar/actions to runtime methods (`toggleSide`, `insertDelimiterByKind`, `addSup`, `addSub`, `removeSup`, `removeSub`, `deleteStructure`, `performUndo`, `performRedo`, `performCopy`, `performCut`, `performPaste`).
 - Use `onSessionChange(session)` to render external previews (e.g., MathJax pane, status labels).
-- **Imported `MathObject` / `CharObject` for the editor:** document LaTeX preview treats `CharObject.expr` as already-rendered Arabic TeX (e.g. `\text{م}`). When opening an imported equation in `<ButexEditor />` via `mathObjectToEditorSession`, BuTeX unwraps supported LaTeX text/font wrappers into plain glyph `expr` plus editor `characterFont`. Supported patterns: `\text{…}`, `\takween{…}`, `\diwani{…}`, `\butextakween{…}`, `\butexdiwani{…}`, `\butexdiwanioutline{…}`, and nested forms such as `\text{\takween{…}}`. BuTeX’s own save path already stores plain glyphs; upstream converters may emit wrapped `expr` and do not need to change for document render.
+- **Imported `MathObject` / `CharObject` for the editor:** document LaTeX preview treats `CharObject.expr` as already-rendered Arabic TeX (e.g. `\text{م}`). When opening an imported equation in `<ButexEditor />` via `mathObjectToEditorSession`, BuTeX unwraps supported LaTeX text/font wrappers into plain glyph `expr` plus editor `characterFont`. Supported patterns: `\text{…}`, `\takween{…}`, `\diwani{…}`, `\butextakween{…}`, `\butexdiwani{…}`, `\butexdiwanioutline{…}`, and nested forms such as `\text{\takween{…}}`. On save, default-font chars stay plain `CharObject` nodes; non-default fonts are stored as font `CommandObject` wrappers so editor round-trip preserves `characterFont`. Upstream converters may still emit wrapped `expr` on import.
 
 Minimal browser example:
 
@@ -274,7 +275,7 @@ Open:
 
 - `http://localhost:4173/demo/` (MathJax + `\arabsqrt`)
 - `http://localhost:4173/demo/parser.html` (parser-only normalize preview)
-- **Equation editor (React):** run `cd demo/editor-app && npm install && npm run dev`, then open the URL Vite prints (see `demo/editor.html` for a short pointer).
+- **Equation editor (React):** run `cd demo/editor-app && npm install && npm run dev`, then open the URL Vite prints (see `demo/editor.html` for a short pointer). The equation editor demo loads MathJax SVG from `public/vendor/`, matching document editor v2.
 - **Document editor (React):** run `cd demo/document-editor-app && npm install && npm run dev`, then open the URL Vite prints (see `demo/document.html` for a short pointer).
 - **Document editor v2 (React):** run `cd demo/document-editor-app2 && npm install && npm run dev`, then open the URL Vite prints. The v2 demo loads MathJax SVG and includes grouped insert controls (sections, lists, tables, figures, equations), per-block delete, list item controls, and editor/preview toggles. Optional bottom dev panels (LaTeX + AST) appear only if you append `?debug=1` to the URL or pass the `debug` prop from your host app.
 

package/dist/document.js

@@ -1020,6 +1020,16 @@ var ATOMIC_COMMANDS = {
     arabicLabel: "\u0645\u062D\u062F\u062F",
     title: "\u0645\u062D\u062F\u062F"
   },
+  ////////////////////// Derivatives ////////////////////////////////
+  ad: {
+    id: "ad",
+    category: "derivative",
+    englishTex: "\\mathrm{d}",
+    englishLabel: "d",
+    arabicTex: "\\ad",
+    arabicLabel: "\u0621",
+    title: "\u0639\u0644\u0627\u0645\u0629 \u0627\u0644\u0627\u0634\u062A\u0642\u0627\u0642"
+  },
   ////////////////////// Groups /////////////////////////////////
   N: {
     id: "N",
@@ -1611,6 +1621,16 @@ function atomicOperatorCommandSpec(id) {
   return Object.prototype.hasOwnProperty.call(ATOMIC_OPERATOR_COMMANDS, id) ? ATOMIC_OPERATOR_COMMANDS[id] : null;
 }
 
+// src/editor/divideOperator.ts
+var DIVIDE_OPERATOR_EN = "/";
+var DIVIDE_OPERATOR_AR = "\\";
+function isDivideOperatorExpr(expr) {
+  return expr === DIVIDE_OPERATOR_EN || expr === DIVIDE_OPERATOR_AR;
+}
+function renderDivideOperatorLatex(side) {
+  return side === "arabic" ? "\\backslash" : DIVIDE_OPERATOR_EN;
+}
+
 // src/editor/digits.ts
 var WESTERN = "0123456789";
 var ARABIC_INDIC = "\u0660\u0661\u0662\u0663\u0664\u0665\u0666\u0667\u0668\u0669";
@@ -1733,6 +1753,9 @@ function renderNodeArabic(node, options) {
     const content = renderCharContent(node, options);
     return arabicScripts(node, (node.characterFont ?? "default") === "default" ? `\\text{${escapeText(expr)}}` : content, options);
   }
+  if (node.kind === "operator" && isDivideOperatorExpr(node.expr)) {
+    return arabicScripts(node, renderDivideOperatorLatex("arabic"), options);
+  }
   return arabicScripts(node, formatDigits(node.expr, selectedDigitForm(options)), options);
 }
 function renderChainArabic(chain, options) {
@@ -2304,6 +2327,19 @@ ${ATOMIC_OPERATOR_COMMAND_CSS}
 `.trim();
 
 // src/document/mathEditorAdapter.ts
+var CHAR_FONT_EXPORT_TEX = {
+  takween: "\\butextakween",
+  diwani: "\\butexdiwani",
+  diwaniOutline: "\\butexdiwanioutline"
+};
+function charEditorNodeToAstNode(node) {
+  const font = node.characterFont ?? "default";
+  const charNode = new CharNode(node.expr);
+  if (font === "default") {
+    return charNode;
+  }
+  return new CommandNode(CHAR_FONT_EXPORT_TEX[font], [], [new ChainNode([charNode])]);
+}
 function attachAstScripts(editorNode, astNode) {
   if (editorNode.superscript) {
     const sup = editorChainToAstChain(editorNode.superscript);
@@ -2359,7 +2395,7 @@ function editorEnvToAstNode(node) {
 function editorNodeToAstNode(node) {
   let astNode;
   if (node.kind === "char") {
-    astNode = new CharNode(node.expr);
+    astNode = charEditorNodeToAstNode(node);
   } else if (node.kind === "number") {
     astNode = new NumberNode(node.expr);
   } else if (node.kind === "operator") {