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

package/dist/theme.js

@@ -18,8 +18,8 @@ export const SRTE_DEFAULT_CSS = `
   --srte-input-border: var(--srte-border);
   --srte-modal-backdrop: rgba(0, 0, 0, 0.35);
   --srte-modal-backdrop-filter: blur(2px);
-  --srte-modal-bg: #ffffff;
-  --srte-modal-text: #000000;
+  --srte-modal-bg: var(--card, #ffffff);
+  --srte-modal-text: var(--foreground, #000000);
   --srte-menu-bg: var(--srte-background);
   --srte-menu-text: var(--srte-foreground);
   --srte-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
@@ -32,7 +32,6 @@ export const SRTE_DEFAULT_CSS = `
      (see .srte-tool-button[aria-pressed="true"]), not a replacement for
      --srte-primary generally. */
   --srte-primary-pressed: #1d4ed8;
-  --srte-surface-subtle: #f3f4f6;
   --srte-on-primary: #ffffff;
   --srte-cancel-bg: #f3f4f6;
   --srte-code-bg: #f6f8fa;
@@ -56,8 +55,8 @@ export const SRTE_DEFAULT_CSS = `
   --srte-input-border: var(--srte-border);
   --srte-modal-backdrop: rgba(0, 0, 0, 0.22);
   --srte-modal-backdrop-filter: blur(10px) saturate(0.9);
-  --srte-modal-bg: #1e293b;
-  --srte-modal-text: #e0e0e0;
+  --srte-modal-bg: var(--card, #1e293b);
+  --srte-modal-text: var(--foreground, #e0e0e0);
   --srte-menu-bg: var(--srte-background);
   --srte-menu-text: var(--srte-foreground);
   --srte-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
@@ -66,7 +65,6 @@ export const SRTE_DEFAULT_CSS = `
   --srte-danger: #ef4444;
   --srte-primary: #3b82f6;
   --srte-primary-pressed: var(--srte-primary);
-  --srte-surface-subtle: #333333;
   --srte-on-primary: #ffffff;
   --srte-cancel-bg: #333333;
   --srte-code-bg: #111827;
@@ -196,6 +194,20 @@ export const SRTE_DEFAULT_CSS = `
   color: var(--srte-menu-text);
   box-shadow: var(--srte-menu-shadow);
 }
+/*
+ * ToolbarDropdown's own menu panel (docs/bugs/
+ * toolbar-dropdown-clipped-by-host-overflow-hidden.md): position:fixed with
+ * JS-measured left/top (ToolbarPrimitives.tsx) instead of the default
+ * position:absolute above, so it always escapes an ancestor host container's
+ * own overflow:hidden regardless of DOM depth - MobileMoreMenu's overflow
+ * menu (no data-srte-menu-fixed attribute) is unaffected and keeps its
+ * existing position:absolute/right-anchored behavior.
+ */
+.srte-menu[data-srte-menu-fixed="true"] {
+  position: fixed;
+  top: 0;
+  left: 0;
+}
 .srte-menu-item {
   display: flex;
   align-items: center;
@@ -395,34 +407,32 @@ export const SRTE_DEFAULT_CSS = `
   border-color: var(--srte-ring) !important;
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--srte-ring) 18%, transparent);
 }
-@media (max-width: 639px) {
-  .srte-toolbar { gap: 3px; padding: 6px; }
-  .srte-tool-button, .srte-toolbar select { height: 40px; min-width: 40px; }
-  .srte-toolbar-group[data-srte-priority="3"] { display: none; }
-  .srte-toolbar-menu[data-srte-priority="2"] { display: none; }
-  .srte-mobile-more { display: block; }
-  .srte-mobile-more .srte-menu {
-    left: auto;
-    right: 0;
-    width: min(280px, calc(100vw - 16px));
-    min-width: 0;
-    max-height: min(70dvh, 480px);
-    overflow-x: hidden;
-    overflow-y: auto;
-    overscroll-behavior: contain;
-    -webkit-overflow-scrolling: touch;
-  }
-  .srte-menu-item { height: 40px; }
-}
+/*
+ * @container (element width), not @media (viewport width): a host can embed
+ * the editor at any fraction of the browser window - a split pane next to a
+ * preview panel is the case that surfaced this (docs/bugs/
+ * toolbar-wide-promotion-fires-on-viewport-width-not-container-width.md). A
+ * plain @media breakpoint here would fire based on the *window*, wrongly
+ * switching tiers for an editor instance that's actually much narrower (or
+ * wider) than the window - .srte-editor already establishes its own
+ * container: srte-editor / inline-size (see the .srte-editor rule above),
+ * so @container always reflects this specific instance's real rendered width regardless of host
+ * layout, with no @media fallback needed (container queries have full
+ * support across this project's three target engines).
+ */
 @container srte-editor (max-width: 639px) {
   .srte-toolbar { gap: 3px; padding: 6px; }
   .srte-tool-button, .srte-toolbar select { height: 40px; min-width: 40px; }
   .srte-toolbar-group[data-srte-priority="3"],
   .srte-toolbar-menu[data-srte-priority="2"] { display: none; }
   .srte-mobile-more { display: block; }
+  /* left/top are no longer set here - ToolbarPrimitives.tsx now computes
+     them via inline style (JS-measured, position:fixed, viewport-clamped;
+     see MobileMoreMenu's own doc comment), which always wins over any
+     value set here regardless of specificity or source order. Sizing/
+     scroll behavior stays defined here since inline positioning doesn't
+     touch those properties. */
   .srte-mobile-more .srte-menu {
-    left: auto;
-    right: 0;
     width: min(280px, calc(100vw - 16px));
     min-width: 0;
     max-height: min(70dvh, 480px);
@@ -459,12 +469,16 @@ export const SRTE_DEFAULT_CSS = `
  * under them. 1440px clears that default with room to spare while still
  * comfortably covering "wide desktop" (the ~2264px width the original
  * report was filed against).
+ *
+ * @container only, no @media fallback - same reasoning as the mobile tier
+ * above (docs/bugs/toolbar-wide-promotion-fires-on-viewport-width-not-container-width.md):
+ * a plain @media(min-width:1440px) fired whenever the *browser window* was
+ * wide, even when this editor instance was embedded in a much narrower
+ * split pane - promoting 9 extra buttons into a group with no room for
+ * them, which squeezed/overlapped the group's existing buttons instead of
+ * wrapping cleanly.
  */
 .srte-tool-button[data-srte-wide-promote="true"] { display: none; }
-@media (min-width: 1440px) {
-  .srte-tool-button[data-srte-wide-promote="true"] { display: inline-flex; }
-  .srte-menu-item[data-srte-wide-promote="true"] { display: none; }
-}
 @container srte-editor (min-width: 1440px) {
   .srte-tool-button[data-srte-wide-promote="true"] { display: inline-flex; }
   .srte-menu-item[data-srte-wide-promote="true"] { display: none; }
@@ -473,7 +487,17 @@ export const SRTE_DEFAULT_CSS = `
   border-left: 4px solid var(--srte-accent);
   margin: 0.75em 0;
   padding: 0.5em 1em;
-  background: var(--srte-surface-subtle);
+  /* --srte-muted, not the retired --srte-surface-subtle (docs/bugs/
+     srte-surface-subtle-not-host-theme-aware.md): every other neutral
+     surface/text token here (--srte-background, --srte-foreground,
+     --srte-muted, --srte-border) is defined as var(--host-token, fallback)
+     so it correctly follows a host's OWN light/dark state even if
+     .srte-dark never gets applied for some host-side wiring reason -
+     --srte-surface-subtle was the one exception, a bare hardcoded hex with
+     no host integration, which is exactly what let a real host (dark mode,
+     .srte-dark not reaching this editor instance) render this blockquote
+     with a light-mode background and dark-mode text simultaneously. */
+  background: var(--srte-muted);
   color: var(--srte-text);
 }
 .srte-editor [contenteditable] p,
@@ -552,7 +576,7 @@ export const SRTE_DEFAULT_CSS = `
   color: inherit;
 }
 .srte-editor [contenteditable] th {
-  background: var(--srte-surface-subtle);
+  background: var(--srte-muted);
   font-weight: 600;
   text-align: left;
 }
@@ -613,6 +637,39 @@ export const SRTE_DEFAULT_CSS = `
 .srte-editor [contenteditable] sup {
   line-height: 0;
 }
+/*
+ * A page break has no native visual meaning in a continuously-scrolling
+ * web editor - its entire purpose is what happens at export/print time
+ * (see atom/formats.ts's atomToHtml doc comment). This gives it a clearly
+ * distinct live-editor appearance from the plain solid <hr> a horizontal
+ * line renders as by default, so the two are never confused: a dashed
+ * line with an explicit "Page break" label, per the feature's own design
+ * decision.
+ */
+.srte-editor [contenteditable] [data-smart-type="page_break"] {
+  display: block;
+  position: relative;
+  height: 0;
+  margin: 1.5em 0;
+  border: none;
+  border-top: 2px dashed var(--srte-border);
+  cursor: default;
+}
+.srte-editor [contenteditable] [data-smart-type="page_break"]::after {
+  content: "Page break";
+  position: absolute;
+  top: -0.7em;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--srte-canvas);
+  padding: 0 0.6em;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--srte-text-muted);
+  white-space: nowrap;
+}
 `;
 const SRTE_STYLE_ID = 'srte-theme-defaults';
 export function ensureStyleSheet() {

package/dist/toolbarTools.d.ts

@@ -0,0 +1,95 @@
+/**
+ * A named, per-tool toolbar-visibility toggle - "developers should be able
+ * to hide tools they don't want their users to see" (e.g. Version History,
+ * Review, Video, Audio), without wrapping/overriding the component or
+ * patching it with CSS. This is a UI-visibility layer, distinct from and
+ * composed with (never replacing) two existing, deeper mechanisms:
+ *
+ * - `EditorCapabilityPreset` (capabilityPresets.ts) controls real document
+ *   *capability* - which plugins the schema itself is built with (today,
+ *   only `table`). Excluding a plugin there already, correctly, hides its
+ *   toolbar entry (`tablesEnabled`) - this file does not duplicate that.
+ * - Provider presence (`mediaProvider`, `versionProvider`, `commentProvider`,
+ *   `suggestionProvider`) already gates whether a feature can function at
+ *   all. `tools` never turns a tool ON when its required provider is
+ *   absent - see `resolveToolbarTools`'s own doc comment.
+ *
+ * `tools` is for the remaining, larger set of toolbar entries that have no
+ * other on/off mechanism at all today (Bold, Italic, Video, Audio, Special
+ * characters, Version history, ...) - a host that wants to hide any of
+ * these previously had no supported way to do so.
+ *
+ * Deliberately NOT covered by individual keys (scoping decision, not an
+ * oversight): purely contextual actions that only ever act on something
+ * already selected - block move/indent, list-item indent/move/restart
+ * numbering, table row/column/cell operations, and the selected-media
+ * edit/resize/delete actions. None of these have independent product
+ * meaning (there is no real case for "let people insert a table but hide
+ * its 'Add row' action") - they stay governed solely by their owning
+ * top-level tool (`insertTable`, `bulletedList`/`numberedList`/`checklist`,
+ * `link`, `image`/`video`/`audio`).
+ */
+export interface ToolbarTools {
+    bold: boolean;
+    italic: boolean;
+    underline: boolean;
+    strikethrough: boolean;
+    code: boolean;
+    superscript: boolean;
+    subscript: boolean;
+    textColor: boolean;
+    backgroundColor: boolean;
+    fontSize: boolean;
+    fontFamily: boolean;
+    /** The Paragraph/Heading 1-6/Code block <select>. */
+    blockType: boolean;
+    alignLeft: boolean;
+    alignCenter: boolean;
+    alignRight: boolean;
+    alignJustify: boolean;
+    /** The line-spacing dropdown (1/1.15/1.5/2/2.5 presets plus a custom value). */
+    lineHeight: boolean;
+    quote: boolean;
+    bulletedList: boolean;
+    numberedList: boolean;
+    checklist: boolean;
+    /** The named multi-level marker preset picker (decimal/alpha/roman/outline/bullet-glyph) - independent of the plain list-type toggles above. */
+    listPreset: boolean;
+    link: boolean;
+    removeLink: boolean;
+    /** Requires `mediaProvider` to actually render - see resolveToolbarTools. */
+    image: boolean;
+    /** Requires `mediaProvider` to actually render - see resolveToolbarTools. */
+    video: boolean;
+    /** Requires `mediaProvider` to actually render - see resolveToolbarTools. */
+    audio: boolean;
+    insertFormula: boolean;
+    specialCharacters: boolean;
+    /** Inserts a `divider` atom (a horizontal rule) - see docs/bugs/ for the toolbar-tools feature this was added alongside. */
+    horizontalLine: boolean;
+    /** Inserts a `page_break` atom - a print/export pagination marker, distinct from `horizontalLine`. */
+    pageBreak: boolean;
+    /** Requires the schema to actually have the table plugin (EditorCapabilityPreset) - see resolveToolbarTools. */
+    insertTable: boolean;
+    import: boolean;
+    saveAsHtml: boolean;
+    saveAsMarkdown: boolean;
+    saveAsWord: boolean;
+    saveAsPdf: boolean;
+    saveAsSmartRte: boolean;
+    /** Requires `versionProvider` to actually render. */
+    versionHistory: boolean;
+    /** Bundles "Add comment" and the Comments panel toggle - requires `commentProvider` to actually render. */
+    comments: boolean;
+    /** Bundles Suggest insertion/deletion/removal, the Suggestions panel toggle, and "Show edits" (track changes) - requires `suggestionProvider` to actually render. */
+    suggestions: boolean;
+    undo: boolean;
+    redo: boolean;
+}
+/** Every tool defaults to visible - an existing consumer who never passes `tools` sees 100% unchanged behavior. */
+export declare const DEFAULT_TOOLBAR_TOOLS: ToolbarTools;
+/**
+ * Merges a host's partial `tools` override onto the all-enabled default -
+ * a host only ever needs to name the tools they want OFF.
+ */
+export declare const resolveToolbarTools: (tools?: Partial<ToolbarTools>) => ToolbarTools;

package/dist/toolbarTools.js

@@ -0,0 +1,17 @@
+/** Every tool defaults to visible - an existing consumer who never passes `tools` sees 100% unchanged behavior. */
+export const DEFAULT_TOOLBAR_TOOLS = {
+    bold: true, italic: true, underline: true, strikethrough: true, code: true,
+    superscript: true, subscript: true, textColor: true, backgroundColor: true, fontSize: true, fontFamily: true,
+    blockType: true, alignLeft: true, alignCenter: true, alignRight: true, alignJustify: true, lineHeight: true, quote: true,
+    bulletedList: true, numberedList: true, checklist: true, listPreset: true,
+    link: true, removeLink: true, image: true, video: true, audio: true, insertFormula: true, specialCharacters: true,
+    horizontalLine: true, pageBreak: true, insertTable: true,
+    import: true, saveAsHtml: true, saveAsMarkdown: true, saveAsWord: true, saveAsPdf: true, saveAsSmartRte: true,
+    versionHistory: true, comments: true, suggestions: true,
+    undo: true, redo: true,
+};
+/**
+ * Merges a host's partial `tools` override onto the all-enabled default -
+ * a host only ever needs to name the tools they want OFF.
+ */
+export const resolveToolbarTools = (tools) => ({ ...DEFAULT_TOOLBAR_TOOLS, ...tools });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "smartrte-react",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.11",
   "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.6"
   },
   "scripts": {
     "build": "rm -rf dist && tsc -p tsconfig.json",