smartrte-react 1.0.0-beta.1 → 1.0.0-beta.11

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # Changelog
 
+## 1.0.0-beta.11
+
+- Fix toolbar dropdowns/popovers still landing far from their trigger inside a host container that uses CSS `contain: paint | strict | content` on an ancestor (a real gap in `1.0.0-beta.9`'s transform-only fix — `contain` also creates a `position: fixed` containing block, independent of `transform`). See `docs/bugs/toolbar-overlay-misplaced-inside-contain-ancestor.md`.
+
+## 1.0.0-beta.10
+
+- Fix a table row resize regression: dragging a row boundary back to where it started (after an earlier drag hit a row's natural content floor) inflated the neighboring row instead of restoring the original layout — the only way back was Undo. Reversing a boundary drag now correctly shrinks the table's total height instead of growing a neighbor that never actually had slack to give.
+
+- Fix a horizontal line/page break appearing to be "not selectable": clicking one already set real node selection, but right-clicking showed no UI at all, unlike every other atom (image/video/audio/formula). Right-click now shows the same Delete-only action menu formula already gets (never Edit — neither atom has an editable field, and neither ever gets resize handles).
+- Add a "Line spacing" toolbar dropdown (Paragraph group) with presets (1, 1.15, 1.5, 2, 2.5), a "Default" entry that clears the override, and a custom numeric value entry, matching Google Docs' own line-spacing picker shape. Shows a checkmark on the current value, or no checkmark at all when the selection spans blocks with differing values. New `tools.lineHeight` visibility flag (default visible). Depends on `smartrte-core@1.0.0-beta.5`.
+- Add "Horizontal line" and "Page break" toolbar tools (in the "More to insert" group, plus wide-viewport-promoted standalone copies), and matching `tools.horizontalLine`/`tools.pageBreak` visibility flags. A page break renders as a dashed, labeled marker in the live editor — distinct from a horizontal line — and produces real pagination in both the exported HTML and this package's "Save as PDF" (a real browser print of that same HTML). Depends on `smartrte-core@1.0.0-beta.5`.
+- Fix formulas rendering invisible in "Save as PDF" output (see `smartrte-core@1.0.0-beta.5`'s own changelog entry for the root cause).
+- Rename the "Save as PDF" toolbar entry to "Print / Save as PDF" — it opens the browser's print dialog rather than triggering a direct file download like its "Save as ..." siblings; the new label sets the correct expectation instead of implying a one-click download.
+
+## 1.0.0-beta.9
+
+- Fix toolbar dropdowns, the mobile "More tools" kebab menu, and the text/background colour and table-border popovers rendering far from their own trigger when the editor is embedded inside a host container that has its own CSS `transform` on an ancestor - e.g. a Radix/shadcn `Dialog`'s own centering transform. These overlays now correctly account for the resulting change of containing block instead of assuming it's always the viewport.
+
+## 1.0.0-beta.8
+
+- Add a `tools` prop (`ClassicEditor`, `CanonicalAuthorityEditor`, and the standalone embed) letting a host hide any individual toolbar tool — Bold, Video, Version history, Review, and around 40 others — without wrapping or restyling the component. Every tool is visible by default; composes with existing gates (a required provider or capability must still be present). See the README's "Hiding individual toolbar tools" section for the full list and usage.
+- Retire the never-shipped `showVersionHistory`/`showReview` props in favor of `tools.versionHistory`/`tools.comments`/`tools.suggestions`.
+- Also export `EditorCapabilityPreset` from the package's public entry point (previously only reachable indirectly through `CanonicalAuthorityEditorProps`).
+
+## 1.0.0-beta.7
+
+- Fix the mobile "More tools" overflow menu getting clipped almost entirely off-screen when the editor is embedded inside a host container with `overflow: hidden` — the same fix already applied to the desktop toolbar dropdowns, now also covering this menu (the only overflow affordance on narrow viewports).
+- Add the "List preset" control (decimal/lower-alpha/upper-alpha/roman-numeral/outline numbering styles, plus bullet-glyph presets) to the mobile "More tools" menu — previously only reachable from the desktop toolbar's "More list tools" dropdown, leaving narrow-viewport users with no way to use anything beyond plain bulleted/numbered/checklist lists.
+
+## 1.0.0-beta.6
+
+- Replace the media Edit overlay's plain alt-text prompt with a full "Media details" panel: link (with open-in-new-tab), corner radius, alignment, and license fields (description, source URL, type, version, attribution), matching the pre-canonical editor's own edit-panel field set. A library-picked image's existing license metadata is now carried onto the inserted atom instead of being discarded. Depends on `smartrte-core@1.0.0-beta.3`.
+
+## 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.
+
+## 1.0.0-beta.3
+
+- Fix toolbar dropdown menus (e.g. "More text styles", "More paragraph tools") getting visually clipped to unusable fragments when the editor is embedded inside a host container with `overflow: hidden` (e.g. a rounded card or a clipped split-pane panel) — the menu now positions itself relative to the viewport instead of the nearest ancestor, so it can never be clipped regardless of host layout.
+
+## 1.0.0-beta.2
+
+- Fix the toolbar promoting extra buttons based on the browser window's width instead of the editor's own rendered width — broke embedding the editor in a split pane or any container narrower than the window, causing overlapping/mashed toolbar labels and misdirected clicks that looked like an unresponsive toolbar.
+
 ## 1.0.0-beta.1
 
 **BREAKING CHANGE.** `ClassicEditor` is now unconditionally the canonical, schema-driven editor (`CanonicalAuthorityEditor` underneath). The DOM-authoritative legacy editor and its rollback path have been fully removed; every published version through 0.3.4 defaulted to the DOM-authoritative implementation, so this changes real runtime behavior for every existing consumer, not just internals.

package/README.md

@@ -96,6 +96,7 @@ export default App;
 | `defaultFont` | `string` | `undefined` | Default font family for the editor content |
 | `theme` | `"light" \| "dark"` | `"light"` | Built-in theme mode |
 | `className` | `string` | `undefined` | Custom CSS class for theming via CSS variable overrides |
+| `tools` | `Partial<ToolbarTools>` | every tool `true` | Hide individual toolbar tools (Bold, Video, Version history, etc.) — see [Hiding individual toolbar tools](#hiding-individual-toolbar-tools) below |
 
 ### Advanced Examples
 
@@ -118,6 +119,104 @@ import { ClassicEditor } from 'smartrte-react';
 />
 ```
 
+#### Hiding individual toolbar tools
+
+The `table`/`media`/`formula` props above turn off a whole *capability* — no
+tables anywhere, or media/formulas removed from the schema entirely. If you
+just want a **smaller toolbar** while keeping every capability intact (e.g.
+hide Video, Audio, Version history, and Review for a specific product
+surface, without touching what content the editor can actually store), use
+`tools` instead. It's a plain object: name the tools you want off, everything
+else stays on by default. No wrapping, no CSS overrides, no forking the
+component.
+
+```tsx
+import { ClassicEditor } from 'smartrte-react';
+
+<ClassicEditor
+  tools={{
+    video: false,
+    audio: false,
+    versionHistory: false,
+    comments: false,
+    suggestions: false,
+  }}
+/>
+```
+
+**How it composes with everything else:** a tool only ever needs *both*
+things to be true to show up — your `tools` flag says yes, *and* whatever
+that tool actually depends on is present. So:
+
+- `tools.video`/`tools.audio`/`tools.image` also need a `mediaProvider` (or
+  `mediaManager`) to be configured at all — turning the flag on can't make
+  media insertion appear out of nowhere if you never wired up a provider.
+- `tools.versionHistory` also needs a `versionProvider`; `tools.comments`
+  needs a `commentProvider`; `tools.suggestions` needs a `suggestionProvider`.
+- `tools.insertTable` also needs the table capability to actually be enabled
+  (i.e. you haven't set `table={false}`) — you can't use `tools` to bring
+  back a capability you turned off elsewhere.
+
+In other words: `tools` can only ever hide something, never force something
+into existence that isn't otherwise configured. This means it's always safe
+to leave `tools` unset — every consumer who doesn't pass it sees the exact
+toolbar they see today.
+
+**Every toggleable key**, grouped the way they appear in the toolbar:
+
+```ts
+interface ToolbarTools {
+  // Text formatting
+  bold, italic, underline, strikethrough, code,
+  superscript, subscript, textColor, backgroundColor, fontSize, fontFamily,
+
+  // Paragraph
+  blockType,   // the Paragraph/Heading/Code block dropdown
+  alignLeft, alignCenter, alignRight, alignJustify,
+  lineHeight,  // the line-spacing dropdown (1/1.15/1.5/2/2.5 presets plus a custom value)
+  quote,
+
+  // Lists
+  bulletedList, numberedList, checklist,
+  listPreset,  // the numbered-list style picker (1,2,3 / a,b,c / i,ii,iii / A,B,C / I,II,III)
+
+  // Insert
+  link, removeLink, image, video, audio, insertFormula, specialCharacters,
+  horizontalLine,  // inserts a divider (<hr>)
+  pageBreak,       // inserts a print/export pagination marker - distinct from horizontalLine
+  insertTable,
+
+  // Document
+  import,
+  saveAsHtml, saveAsMarkdown, saveAsWord, saveAsPdf, saveAsSmartRte,
+  versionHistory, comments, suggestions,
+
+  // History
+  undo, redo,
+}
+```
+
+A few notes on what's *not* in this list, on purpose: actions that only ever
+apply to something you already have selected — moving a block up/down,
+indenting a list item, adding/removing a table row or column, resizing a
+selected image — aren't individually toggleable. They only make sense as
+part of using the tool that created them (a table, a list, an image), so
+they follow that tool's own visibility rather than needing a separate flag
+each. If you turn off `insertTable`, its row/column tools go with it
+automatically — there's no separate flag to remember.
+
+If you're using the exported `CanonicalAuthorityEditor` directly instead of
+`ClassicEditor`, `tools` works exactly the same way. And if you're using the
+standalone embed (`window.SmartRTE.ClassicEditor.init(...)`), pass `tools`
+in the same options object you pass `target`/`value`/etc.
+
+```ts
+window.SmartRTE.ClassicEditor.init({
+  target: document.getElementById('editor'),
+  tools: { video: false, audio: false },
+});
+```
+
 #### Complete Example with All Features
 
 ```tsx

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

@@ -6,6 +6,7 @@ import type { CommentProvider } from "../commentProvider.js";
 import type { SuggestionProvider } from "../suggestionProvider.js";
 import { type MediaPickerComponent } from "./MediaPicker.js";
 import type { EditorCapabilityPreset } from "../capabilityPresets.js";
+import { type ToolbarTools } from "../toolbarTools.js";
 import { CanonicalEditorRuntime, type SmartEditorChange, type SmartEditorHandle } from "../canonicalEditorRuntime.js";
 export interface CanonicalAuthorityEditorProps {
     /** Initial value only. Later replacements must use SmartEditorHandle.replaceValue. */
@@ -22,6 +23,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;
@@ -35,7 +43,20 @@ export interface CanonicalAuthorityEditorProps {
      * for images too.
      */
     mediaManager?: boolean;
-    /** Host-owned save/list/load/remove boundary for document version history. Absent hides the version-history toolbar button entirely, mirroring mediaProvider's absent-disables-the-feature contract. */
+    /**
+     * Per-tool toolbar visibility - "developers should be able to hide tools
+     * which are not for their use" (docs/bugs/per-tool-toolbar-visibility.md).
+     * Every tool defaults to visible; a host only needs to name the ones they
+     * want off (`tools={{ video: false, versionHistory: false }}`). Composes
+     * with, never overrides, the deeper existing gates: a tool whose required
+     * provider is absent (`versionProvider`/`commentProvider`/
+     * `suggestionProvider`/`mediaProvider`) or whose plugin was excluded via
+     * `preset` (e.g. `insertTable` under `preset="simple"`) still won't
+     * render even if explicitly set to `true` here - see ToolbarTools.ts's
+     * own doc comment for the full contract and scoping decisions.
+     */
+    tools?: Partial<ToolbarTools>;
+    /** Host-owned save/list/load/remove boundary for document version history. */
     versionProvider?: VersionProvider;
     /** Host-owned save/list/remove boundary for comment threads. Absent hides the comment toolbar buttons and markers entirely, mirroring versionProvider's absent-disables-the-feature contract. */
     commentProvider?: CommentProvider;