@drghaliasri/butex 4.2.0 → 4.4.0

package/dist/react-document2.mjs

@@ -10925,24 +10925,11 @@ var DOCUMENT2_WIDGET_CSS = `
   grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
 }
 
-.butex-document2-widget__layout--editor-open.butex-document2-widget__layout--preview-closed {
-  grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);
-}
-
-.butex-document2-widget__layout--editor-closed.butex-document2-widget__layout--preview-open {
-  grid-template-columns: minmax(0, 0fr) minmax(0, 1fr);
-}
-
+/* One visible panel: a single track so the panel fills the widget (previewOnly / hide editor / hide preview). */
+.butex-document2-widget__layout--editor-open.butex-document2-widget__layout--preview-closed,
+.butex-document2-widget__layout--editor-closed.butex-document2-widget__layout--preview-open,
 .butex-document2-widget__layout--editor-closed.butex-document2-widget__layout--preview-closed {
-  grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);
-}
-
-.butex-document2-widget__layout--preview-open {
-  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
-}
-
-.butex-document2-widget__layout--preview-closed {
-  grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);
+  grid-template-columns: minmax(0, 1fr);
 }
 
 .butex-document2-widget__editor-panel,
@@ -10960,24 +10947,16 @@ var DOCUMENT2_WIDGET_CSS = `
     box-shadow 0.22s ease;
 }
 
-.butex-document2-widget__layout--editor-closed .butex-document2-widget__editor-panel {
-  border-width: 0;
-  box-shadow: none;
-  opacity: 0;
-  padding-inline: 0;
-  pointer-events: none;
-  transform: translateX(10px);
-  visibility: hidden;
+/* When previewOnly (or display:none) leaves a lone panel, span the full grid. */
+.butex-document2-widget__editor-panel:only-child,
+.butex-document2-widget__preview-panel:only-child {
+  grid-column: 1 / -1;
+  width: 100%;
 }
 
+.butex-document2-widget__layout--editor-closed .butex-document2-widget__editor-panel,
 .butex-document2-widget__layout--preview-closed .butex-document2-widget__preview-panel {
-  border-width: 0;
-  box-shadow: none;
-  opacity: 0;
-  padding-inline: 0;
-  pointer-events: none;
-  transform: translateX(-10px);
-  visibility: hidden;
+  display: none;
 }
 
 .butex-document2-widget__inline-field {
@@ -11151,6 +11130,13 @@ var DOCUMENT2_WIDGET_CSS = `
   vertical-align: middle;
 }
 
+/* Guard against host CSS resets (e.g. Tailwind Preflight's \`svg { display: block }\`).
+ * MathJax v4 inline line-breaking emits an equation as several sibling <svg> chunks;
+ * a block-level svg reset stacks them vertically inside the island. */
+.butex-document2-widget mjx-container svg {
+  display: inline;
+}
+
 .butex-document2-widget__math-chip .butex-document2-widget__math-island {
   margin: 0;
 }
@@ -11312,18 +11298,13 @@ var DOCUMENT2_WIDGET_CSS = `
 }
 
 @media (max-width: 900px) {
-  .butex-document2-widget__layout {
-    grid-template-columns: 1fr;
-  }
-
-  .butex-document2-widget__layout--preview-closed .butex-document2-widget__preview-panel {
-    display: none;
-  }
-
-  .butex-document2-widget__layout--editor-closed .butex-document2-widget__editor-panel {
-    display: none;
+  .butex-document2-widget__layout,
+  .butex-document2-widget__layout--editor-open.butex-document2-widget__layout--preview-open,
+  .butex-document2-widget__layout--editor-open.butex-document2-widget__layout--preview-closed,
+  .butex-document2-widget__layout--editor-closed.butex-document2-widget__layout--preview-open,
+  .butex-document2-widget__layout--editor-closed.butex-document2-widget__layout--preview-closed {
+    grid-template-columns: minmax(0, 1fr);
   }
-
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -11528,6 +11509,7 @@ function ButexDocumentEditor2({
   documentDirection = "rtl",
   equationSide = "arabic",
   editableEquations = true,
+  previewOnly = false,
   uiLocale = "ar",
   mathOutput = "svg",
   onDocumentChange,
@@ -11570,10 +11552,10 @@ function ButexDocumentEditor2({
     injectBuTeXDocument2Styles();
   }, []);
   useEffect5(() => {
-    if (!editableEquations) {
+    if (!editableEquations || previewOnly) {
       setSelectedMath(null);
     }
-  }, [editableEquations]);
+  }, [editableEquations, previewOnly]);
   useEffect5(() => {
     const next = resolveInitialDocument2(initialDocument, uiLocale);
     setDocumentNode(next.document);
@@ -11862,6 +11844,8 @@ function ButexDocumentEditor2({
     pendingFocusRef.current = focusAfterDeletedMath(current, next, tokenId);
     applyDocument(next, "immediate");
   }
+  const showEditorPanel = !previewOnly && editorOpen;
+  const showPreviewPanel = previewOnly || previewOpen;
   return /* @__PURE__ */ jsx10(
     "div",
     {
@@ -11870,7 +11854,7 @@ function ButexDocumentEditor2({
       dir: uiLocaleDirection(uiLocale),
       lang: uiLocale,
       children: /* @__PURE__ */ jsxs8("div", { className: "butex-document2-widget__shell", children: [
-        /* @__PURE__ */ jsxs8("div", { className: "butex-document2-widget__toolbar", children: [
+        !previewOnly ? /* @__PURE__ */ jsxs8("div", { className: "butex-document2-widget__toolbar", children: [
           /* @__PURE__ */ jsx10(
             DocumentInsertToolbar,
             {
@@ -11900,19 +11884,19 @@ function ButexDocumentEditor2({
             /* @__PURE__ */ jsx10("button", { type: "button", onClick: collapseAllBlocks, children: messages.collapseAll }),
             /* @__PURE__ */ jsx10("button", { type: "button", onClick: openAllBlocks, children: messages.openAll })
           ] })
-        ] }),
+        ] }) : null,
         error ? /* @__PURE__ */ jsx10("p", { className: "butex-document2-widget__error", children: error }) : null,
         /* @__PURE__ */ jsxs8(
           "div",
           {
-            className: `butex-document2-widget__layout butex-document2-widget__layout--editor-${editorOpen ? "open" : "closed"} butex-document2-widget__layout--preview-${previewOpen ? "open" : "closed"}`,
+            className: `butex-document2-widget__layout butex-document2-widget__layout--editor-${showEditorPanel ? "open" : "closed"} butex-document2-widget__layout--preview-${showPreviewPanel ? "open" : "closed"}`,
             children: [
-              /* @__PURE__ */ jsx10(
+              !previewOnly ? /* @__PURE__ */ jsx10(
                 "section",
                 {
                   className: "butex-document2-widget__panel butex-document2-widget__editor-panel",
                   "aria-label": messages.documentEditor,
-                  "aria-hidden": !editorOpen,
+                  "aria-hidden": !showEditorPanel,
                   children: /* @__PURE__ */ jsx10("div", { className: "butex-document2-widget__blocks", children: documentNode.blocks.map((block, blockIndex) => /* @__PURE__ */ jsx10(
                     BlockEditor,
                     {
@@ -11942,13 +11926,13 @@ function ButexDocumentEditor2({
                     block.id
                   )) })
                 }
-              ),
+              ) : null,
               /* @__PURE__ */ jsx10(
                 "section",
                 {
                   className: "butex-document2-widget__panel butex-document2-widget__preview-panel",
                   "aria-label": messages.documentPreview,
-                  "aria-hidden": !previewOpen,
+                  "aria-hidden": !showPreviewPanel,
                   children: /* @__PURE__ */ jsx10(DocumentPreview, { blocks: preview.blocks, output: mathOutput, documentDirection, uiLocale })
                 }
               )
@@ -11965,7 +11949,7 @@ function ButexDocumentEditor2({
           /* @__PURE__ */ jsx10("strong", { children: "AST" }),
           /* @__PURE__ */ jsx10("pre", { children: JSON.stringify(documentNode, null, 2) })
         ] }) : null,
-        selectedMath ? /* @__PURE__ */ jsx10(
+        !previewOnly && selectedMath ? /* @__PURE__ */ jsx10(
           EquationDrawer,
           {
             session: selectedMath.session,