smartrte-react 1.0.0-beta.4 → 1.0.0-beta.5

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.0.0-beta.5
+
+- Add an opt-in `renderFormulaHtml` prop (on `ClassicEditor`/`CanonicalAuthorityEditor`) that bakes real KaTeX-rendered HTML into the formula elements of `onChange`'s exported HTML, instead of an empty placeholder — for hosts that display saved content directly (e.g. a read-only preview panel) without also running KaTeX against it. Depends on `smartrte-core@1.0.0-beta.2`.
+
 ## 1.0.0-beta.4
 
 - Fix blockquote, table header, and dialog (media library, comments, suggestions, version history) backgrounds/text staying in their light-mode colors even when the host page is in dark mode — these now follow the host's own dark-mode CSS variables directly, the same way the rest of the editor's colors already did, instead of depending solely on the `.srte-dark` class reaching the editor correctly.

package/dist/canonicalEditorRuntime.d.ts

@@ -57,6 +57,17 @@ export interface CanonicalEditorRuntimeOptions {
     contentVisibility?: boolean;
     /** Which built-in plugins this instance is constructed with - see capabilityPresets.ts. Defaults to "full" (every plugin), matching this runtime's only behavior before this option existed. */
     preset?: EditorCapabilityPreset;
+    /**
+     * Bakes real KaTeX-rendered HTML into `onHtmlChange`'s formula elements
+     * instead of leaving them as empty placeholders (docs/bugs/
+     * formula-not-rendered-in-static-html-consumers.md). Off by default -
+     * the live editing surface already renders formulas correctly on its
+     * own via surface/renderer.ts's imperative katex.render() calls, which
+     * this option has no effect on; it exists purely for consumers that take
+     * this HTML string and display it *without* also running KaTeX against
+     * it themselves (e.g. a read-only preview panel built from saved HTML).
+     */
+    renderFormulaHtml?: boolean;
 }
 /** Persistent, React-independent owner for one product editor instance. */
 export declare class CanonicalEditorRuntime implements SmartEditorHandle {
@@ -70,6 +81,7 @@ export declare class CanonicalEditorRuntime implements SmartEditorHandle {
     private onHtmlChange?;
     private readonly onClipboardDiagnostic?;
     private readonly contentVisibility;
+    private readonly renderFormulaHtml;
     private htmlChangeTimer;
     private pendingHtmlDocument;
     constructor(options?: CanonicalEditorRuntimeOptions);

package/dist/canonicalEditorRuntime.js

@@ -99,6 +99,7 @@ export class CanonicalEditorRuntime {
         this.onHtmlChange = options.onHtmlChange;
         this.onClipboardDiagnostic = options.onClipboardDiagnostic;
         this.contentVisibility = options.contentVisibility === true;
+        this.renderFormulaHtml = options.renderFormulaHtml === true;
     }
     setCallbacks(onChange, onHtmlChange) {
         this.onChange = onChange;
@@ -120,7 +121,7 @@ export class CanonicalEditorRuntime {
             const pending = this.pendingHtmlDocument;
             this.pendingHtmlDocument = null;
             if (pending && this.onHtmlChange)
-                this.onHtmlChange(serializeCanonicalListHtml(pending, { clean: true }));
+                this.onHtmlChange(serializeCanonicalListHtml(pending, { clean: true, renderFormulaHtml: this.renderFormulaHtml }));
         };
         if (view) {
             // Transitional HTML serialization is intentionally debounced outside the

package/dist/components/CanonicalAuthorityEditor.d.ts

@@ -22,6 +22,13 @@ export interface CanonicalAuthorityEditorProps {
     onChange?: (change: SmartEditorChange) => void;
     /** Transitional serialization callback for hosts that still persist HTML. */
     onHtmlChange?: (html: string) => void;
+    /**
+     * Bakes real KaTeX-rendered HTML into onHtmlChange's formula elements
+     * instead of leaving them as empty placeholders - see
+     * canonicalEditorRuntime.ts's CanonicalEditorRuntimeOptions for the full
+     * rationale. Construction-time only, same contract as `preset`.
+     */
+    renderFormulaHtml?: boolean;
     onClipboardDiagnostic?: (report: ClipboardDiagnosticReport) => void;
     /** Host-owned upload/search/remove boundary for canonical media insertion. */
     mediaProvider?: MediaProvider;

package/dist/components/CanonicalAuthorityEditor.js

@@ -102,7 +102,7 @@ const parseBorderShorthand = (value) => {
 const isCollapsedTextSelection = (selection) => selection.type === "text" && selection.anchor.offset === selection.head.offset
     && selection.anchor.path.length === selection.head.path.length
     && selection.anchor.path.every((part, index) => part === selection.head.path[index]);
-export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEditor({ defaultValue, preset, onChange, onHtmlChange, onClipboardDiagnostic, mediaProvider, mediaPicker: MediaPicker = DefaultMediaPicker, mediaManager = true, versionProvider, commentProvider, suggestionProvider, authorId, placeholder = "Type here…", minHeight = 200, maxHeight = 500, readOnly = false, className, onRuntime, }, forwardedRef) {
+export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEditor({ defaultValue, preset, renderFormulaHtml, onChange, onHtmlChange, onClipboardDiagnostic, mediaProvider, mediaPicker: MediaPicker = DefaultMediaPicker, mediaManager = true, versionProvider, commentProvider, suggestionProvider, authorId, placeholder = "Type here…", minHeight = 200, maxHeight = 500, readOnly = false, className, onRuntime, }, forwardedRef) {
     ensureStyleSheet();
     const rootRef = useRef(null);
     const importRef = useRef(null);
@@ -147,7 +147,7 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
     // selection.head differs from this value.
     const [linkOverlayDismissedAt, setLinkOverlayDismissedAt] = useState(null);
     if (!runtimeRef.current)
-        runtimeRef.current = new CanonicalEditorRuntime({ initialValue: defaultValue, preset, onChange, onHtmlChange, onClipboardDiagnostic });
+        runtimeRef.current = new CanonicalEditorRuntime({ initialValue: defaultValue, preset, renderFormulaHtml, onChange, onHtmlChange, onClipboardDiagnostic });
     const runtime = runtimeRef.current;
     const [, setEditorTick] = useState(0);
     runtime.setCallbacks(onChange, onHtmlChange);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "smartrte-react",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.5",
   "description": "A powerful, feature-rich Rich Text Editor for React with support for tables, mathematical formulas (LaTeX/KaTeX), and media management",
   "type": "module",
   "main": "dist/index.js",
@@ -84,7 +84,7 @@
     "lucide-react": "^1.35.0",
     "mammoth": "^1.11.0",
     "pdfjs-dist": "^5.4.530",
-    "smartrte-core": "^1.0.0-beta.1"
+    "smartrte-core": "^1.0.0-beta.2"
   },
   "scripts": {
     "build": "rm -rf dist && tsc -p tsconfig.json",