smartrte-react 1.0.0-beta.13 → 1.0.0-beta.15

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 1.0.0-beta.15
+
+- The Blockquote toolbar button now shows as active (pressed) when the caret is inside a blockquote, matching every other toggle-style tool (Bold, Bulleted list, etc.) — previously it never reflected caret/selection state at all.
+
+## 1.0.0-beta.14
+
+- Fix toolbar dropdowns still landing far from their trigger inside a dialog centered via the standalone CSS `translate` property (e.g. Tailwind's `translate-x-[-50%] translate-y-[-50%]` compiled to `translate` rather than the legacy `transform` property, depending on Tailwind/browser version) — `findFixedPositioningContainer` only checked `transform`, missing that `translate`/`rotate`/`scale` (CSS Transforms Level 2's independent transform properties) each independently establish a `position: fixed` containing block too. Root-caused via a live console diagnostic against the real page rather than guessing. See `docs/bugs/toolbar-overlay-misplaced-standalone-translate-property.md`.
+
 ## 1.0.0-beta.13
 
 - Fix toolbar dropdowns still landing far from their trigger inside a dialog whose ancestor uses `contain: layout` without `paint` — `1.0.0-beta.11`'s `contain` fix only checked for `paint`/`strict`/`content`, missing that bare `layout` alone also establishes a `position: fixed` containing block per spec (confirmed directly in real Chromium). Menus rendered hundreds of pixels from their trigger, overlapping unrelated page content, with no error. See `docs/bugs/toolbar-overlay-misplaced-inside-contain-layout-ancestor.md`.

package/dist/components/CanonicalAuthorityEditor.js

@@ -501,6 +501,10 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
         return "paragraph";
     };
     const currentBlockType = blockTypeAt(runtime.editor.selection.head);
+    // Mirrors toggleBlockquote's own ancestor lookup exactly, so "the button
+    // looks active" and "clicking it again unwraps" can never drift apart -
+    // same discipline as listStyleActive for the list toggle buttons.
+    const currentBlockquoteActive = Boolean([...runtime.editor.resolve({ pos: runtime.editor.selection.head }).ancestors].reverse().find((node) => node.type === "blockquote"));
     const currentListPreset = currentListParts.length === 1 && typeof rootList?.attrs?.preset === "string"
         ? rootList.attrs.preset
         : "";
@@ -1633,7 +1637,7 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
                                 } }), t.fontSize && _jsx(ToolbarButton, { icon: "fontSize", label: "Font size", disabled: readOnly, onClick: () => applyAttributedMark("fontSize"), widePromote: true }), t.fontFamily && _jsx(ToolbarButton, { icon: "fontFamily", label: "Font family", disabled: readOnly, onClick: () => applyAttributedMark("fontFamily"), widePromote: true }), showMoreTextStyles && _jsx(ToolbarDropdown, { icon: "textColor", label: "More text styles", priority: 2, children: textStylesMenuItems })] }), _jsxs(ToolbarGroup, { children: [t.blockType && _jsxs("select", { className: "srte-block-type-select", "aria-label": "Block type", title: "Block type", value: currentBlockType, disabled: readOnly, onChange: (event) => transactBlock(setBlockTypeCommand(runtime.editor.document, blockScope(), {
                                     type: event.target.value === "paragraph" ? "paragraph" : event.target.value === "code_block" ? "code_block" : "heading",
                                     attrs: event.target.value.startsWith("heading-") ? { level: Number(event.target.value.slice(8)) } : {},
-                                }, blockContext())), children: [_jsx("option", { value: "paragraph", children: "Paragraph" }), Array.from({ length: 6 }, (_, index) => _jsxs("option", { value: `heading-${index + 1}`, children: ["Heading ", index + 1] }, index + 1)), _jsx("option", { value: "code_block", children: "Code block" })] }), t.alignLeft && _jsx(ToolbarButton, { icon: "alignLeft", label: "Align left", ariaLabel: "Align left", iconOnly: true, disabled: readOnly, onClick: () => transactBlock(setBlockAttributes(runtime.editor.document, blockScope(), { attrs: { align: "left" } }, blockContext())) }), t.alignCenter && _jsx(ToolbarButton, { icon: "alignCenter", label: "Align center", ariaLabel: "Align center", iconOnly: true, disabled: readOnly, onClick: () => transactBlock(setBlockAttributes(runtime.editor.document, blockScope(), { attrs: { align: "center" } }, blockContext())) }), t.alignRight && _jsx(ToolbarButton, { icon: "alignRight", label: "Align right", ariaLabel: "Align right", iconOnly: true, disabled: readOnly, onClick: () => transactBlock(setBlockAttributes(runtime.editor.document, blockScope(), { attrs: { align: "right" } }, blockContext())) }), t.alignJustify && _jsx(ToolbarButton, { icon: "alignJustify", label: "Justify", ariaLabel: "Align justify", iconOnly: true, disabled: readOnly, onClick: () => transactBlock(setBlockAttributes(runtime.editor.document, blockScope(), { attrs: { align: "justify" } }, blockContext())) }), t.lineHeight && _jsx(ToolbarDropdown, { icon: "lineHeight", label: "Line spacing", priority: 2, children: lineHeightMenuItems }), t.quote && _jsx(ToolbarButton, { icon: "quote", label: "Quote", ariaLabel: "Blockquote", disabled: readOnly, onClick: toggleBlockquote }), _jsx(ToolbarDropdown, { icon: "moveUp", label: "More paragraph tools", priority: 2, children: paragraphToolsMenuItems })] }), _jsxs(ToolbarGroup, { children: [t.bulletedList && (t.listPreset ? _jsxs("span", { className: "srte-split-control", children: [_jsx(ToolbarButton, { icon: "bulletedList", label: "Bulleted list", ariaLabel: "Bulleted list", pressed: listStyleActive("disc"), disabled: readOnly, narrowIconOnly: true, onClick: () => toggleList("disc") }), _jsxs("select", { "aria-label": "Bulleted list style", title: "Bulleted list style", disabled: readOnly || (currentListScope.kind === "list-selection" && currentListParts.length !== 1), value: currentBulletPreset, onChange: (event) => { const preset = event.target.value; if (preset)
+                                }, blockContext())), children: [_jsx("option", { value: "paragraph", children: "Paragraph" }), Array.from({ length: 6 }, (_, index) => _jsxs("option", { value: `heading-${index + 1}`, children: ["Heading ", index + 1] }, index + 1)), _jsx("option", { value: "code_block", children: "Code block" })] }), t.alignLeft && _jsx(ToolbarButton, { icon: "alignLeft", label: "Align left", ariaLabel: "Align left", iconOnly: true, disabled: readOnly, onClick: () => transactBlock(setBlockAttributes(runtime.editor.document, blockScope(), { attrs: { align: "left" } }, blockContext())) }), t.alignCenter && _jsx(ToolbarButton, { icon: "alignCenter", label: "Align center", ariaLabel: "Align center", iconOnly: true, disabled: readOnly, onClick: () => transactBlock(setBlockAttributes(runtime.editor.document, blockScope(), { attrs: { align: "center" } }, blockContext())) }), t.alignRight && _jsx(ToolbarButton, { icon: "alignRight", label: "Align right", ariaLabel: "Align right", iconOnly: true, disabled: readOnly, onClick: () => transactBlock(setBlockAttributes(runtime.editor.document, blockScope(), { attrs: { align: "right" } }, blockContext())) }), t.alignJustify && _jsx(ToolbarButton, { icon: "alignJustify", label: "Justify", ariaLabel: "Align justify", iconOnly: true, disabled: readOnly, onClick: () => transactBlock(setBlockAttributes(runtime.editor.document, blockScope(), { attrs: { align: "justify" } }, blockContext())) }), t.lineHeight && _jsx(ToolbarDropdown, { icon: "lineHeight", label: "Line spacing", priority: 2, children: lineHeightMenuItems }), t.quote && _jsx(ToolbarButton, { icon: "quote", label: "Quote", ariaLabel: "Blockquote", pressed: currentBlockquoteActive, disabled: readOnly, onClick: toggleBlockquote }), _jsx(ToolbarDropdown, { icon: "moveUp", label: "More paragraph tools", priority: 2, children: paragraphToolsMenuItems })] }), _jsxs(ToolbarGroup, { children: [t.bulletedList && (t.listPreset ? _jsxs("span", { className: "srte-split-control", children: [_jsx(ToolbarButton, { icon: "bulletedList", label: "Bulleted list", ariaLabel: "Bulleted list", pressed: listStyleActive("disc"), disabled: readOnly, narrowIconOnly: true, onClick: () => toggleList("disc") }), _jsxs("select", { "aria-label": "Bulleted list style", title: "Bulleted list style", disabled: readOnly || (currentListScope.kind === "list-selection" && currentListParts.length !== 1), value: currentBulletPreset, onChange: (event) => { const preset = event.target.value; if (preset)
                                             applyListPreset(preset); }, children: [_jsx("option", { value: "", children: "Bulleted list style" }), SMART_LIST_PRESETS.filter((preset) => preset.kind === "bullet").map((preset) => _jsx("option", { value: preset.id, children: preset.label }, preset.id))] })] }) : _jsx(ToolbarButton, { icon: "bulletedList", label: "Bulleted list", ariaLabel: "Bulleted list", pressed: listStyleActive("disc"), disabled: readOnly, narrowIconOnly: true, onClick: () => toggleList("disc") })), t.numberedList && (t.listPreset ? _jsxs("span", { className: "srte-split-control", children: [_jsx(ToolbarButton, { icon: "numberedList", label: "Numbered list", ariaLabel: "Numbered list", pressed: listStyleActive("decimal"), disabled: readOnly, narrowIconOnly: true, onClick: () => toggleList("decimal") }), _jsxs("select", { "aria-label": "Numbered list style", title: "Numbered list style", disabled: readOnly || (currentListScope.kind === "list-selection" && currentListParts.length !== 1), value: currentOrderedPreset, onChange: (event) => { const preset = event.target.value; if (preset)
                                             applyListPreset(preset); }, children: [_jsx("option", { value: "", children: "Numbered list style" }), SMART_LIST_PRESETS.filter((preset) => preset.kind === "ordered").map((preset) => _jsx("option", { value: preset.id, children: preset.label }, preset.id))] })] }) : _jsx(ToolbarButton, { icon: "numberedList", label: "Numbered list", ariaLabel: "Numbered list", pressed: listStyleActive("decimal"), disabled: readOnly, narrowIconOnly: true, onClick: () => toggleList("decimal") })), t.checklist && _jsx(ToolbarButton, { icon: "checklist", label: "Checklist", ariaLabel: "Checklist", pressed: listStyleActive("disc", true), disabled: readOnly, narrowIconOnly: true, onClick: () => toggleList("disc", true) }), _jsxs(ToolbarDropdown, { icon: "restart", label: "More list tools", priority: 2, children: [listPresetSelect, t.listPreset && _jsx("div", { className: "srte-menu-separator" }), listToolsMenuItems] })] }), _jsxs(ToolbarGroup, { children: [t.link && _jsx(ToolbarButton, { icon: "link", label: "Link", ariaLabel: "Insert or edit link", disabled: readOnly, onClick: openLinkPopover }), showImageTool && _jsx(ToolbarButton, { icon: "image", label: "Image", ariaLabel: "Insert image", disabled: readOnly, onClick: () => setMediaKind("image") }), t.removeLink && _jsx(ToolbarButton, { icon: "unlink", label: "Remove link", disabled: readOnly, onClick: removeLink, widePromote: true }), t.insertFormula && _jsx(ToolbarButton, { icon: "formula", label: "Insert formula", disabled: readOnly, widePromote: true, onClick: (event) => {
                                     const rect = event.currentTarget.getBoundingClientRect();

package/dist/components/fixedPositioning.d.ts

@@ -9,6 +9,23 @@
  *   (`translate-x-[-50%] translate-y-[-50%]`), confirmed live via a Sootr
  *   host rendering the editor inside such a dialog
  *   (docs/bugs/toolbar-menu-misplaced-inside-transformed-ancestor.md).
+ * - `translate`, `rotate`, `scale` (CSS Transforms Level 2's *independent*
+ *   transform properties, distinct from the legacy composite `transform`
+ *   property) - a FOURTH real Sootr dialog kept misplacing every dropdown
+ *   after all three fixes above shipped, still using the exact same
+ *   `translate-x-[-50%] translate-y-[-50%]` Tailwind centering classes the
+ *   very first fix (above) was written for - but a current Tailwind/browser
+ *   combination compiles those classes to the standalone `translate: -50%
+ *   -50%` CSS property, not `transform: translate(-50%, -50%)`. Confirmed
+ *   directly in real Chromium: an ancestor with only `translate` set (its
+ *   own computed `transform` reads `none`) still fully establishes a
+ *   `position: fixed` containing block, per the CSS Transforms Level 2
+ *   spec - the original fix's own doc comment described the right *symptom*
+ *   (a Radix/shadcn Dialog's centering translate) but checked the wrong
+ *   *property* for it, because at the time it was written the transform
+ *   ended up composited into `transform` rather than emitted as `translate`
+ *   directly. Both are checked now, since either can appear depending on
+ *   the host's exact Tailwind/browser version.
  * - `contain: layout | paint | strict | content` (CSS Containment) - a
  *   common perf/isolation optimization on large scrollable containers, e.g.
  *   a second, different Sootr dialog reported still misplacing every
@@ -69,8 +86,9 @@ export declare function getFixedPositioningOrigin(el: HTMLElement): {
  * the actual, much narrower, clipping ancestor.
  *
  * Deliberately NOT applied for a containing block established only by
- * `transform`/`perspective`/`filter`/`backdrop-filter`/`will-change`, or by
- * `contain: layout` with no `paint`/`strict`/`content` alongside it - none
+ * `transform`/`translate`/`rotate`/`scale`/`perspective`/`filter`/
+ * `backdrop-filter`/`will-change`, or by `contain: layout` with no
+ * `paint`/`strict`/`content` alongside it - none
  * of those clip overflow (`layout` containment only isolates layout
  * calculations, it does not imply paint containment - see the spec note
  * above `findFixedPositioningContainer`), so a menu is free to visually

package/dist/components/fixedPositioning.js

@@ -9,6 +9,23 @@
  *   (`translate-x-[-50%] translate-y-[-50%]`), confirmed live via a Sootr
  *   host rendering the editor inside such a dialog
  *   (docs/bugs/toolbar-menu-misplaced-inside-transformed-ancestor.md).
+ * - `translate`, `rotate`, `scale` (CSS Transforms Level 2's *independent*
+ *   transform properties, distinct from the legacy composite `transform`
+ *   property) - a FOURTH real Sootr dialog kept misplacing every dropdown
+ *   after all three fixes above shipped, still using the exact same
+ *   `translate-x-[-50%] translate-y-[-50%]` Tailwind centering classes the
+ *   very first fix (above) was written for - but a current Tailwind/browser
+ *   combination compiles those classes to the standalone `translate: -50%
+ *   -50%` CSS property, not `transform: translate(-50%, -50%)`. Confirmed
+ *   directly in real Chromium: an ancestor with only `translate` set (its
+ *   own computed `transform` reads `none`) still fully establishes a
+ *   `position: fixed` containing block, per the CSS Transforms Level 2
+ *   spec - the original fix's own doc comment described the right *symptom*
+ *   (a Radix/shadcn Dialog's centering translate) but checked the wrong
+ *   *property* for it, because at the time it was written the transform
+ *   ended up composited into `transform` rather than emitted as `translate`
+ *   directly. Both are checked now, since either can appear depending on
+ *   the host's exact Tailwind/browser version.
  * - `contain: layout | paint | strict | content` (CSS Containment) - a
  *   common perf/isolation optimization on large scrollable containers, e.g.
  *   a second, different Sootr dialog reported still misplacing every
@@ -52,10 +69,13 @@ export function findFixedPositioningContainer(el) {
     while (node) {
         const style = window.getComputedStyle(node);
         if ((style.transform && style.transform !== "none") ||
+            (style.translate && style.translate !== "none") ||
+            (style.rotate && style.rotate !== "none") ||
+            (style.scale && style.scale !== "none") ||
             (style.perspective && style.perspective !== "none") ||
             (style.filter && style.filter !== "none") ||
             (style.backdropFilter && style.backdropFilter !== "none") ||
-            (style.willChange && /transform|perspective|filter/.test(style.willChange)) ||
+            (style.willChange && /transform|perspective|filter|translate|rotate|scale/.test(style.willChange)) ||
             (style.contain && /\b(layout|paint|strict|content)\b/.test(style.contain))) {
             return node;
         }
@@ -87,8 +107,9 @@ export function getFixedPositioningOrigin(el) {
  * the actual, much narrower, clipping ancestor.
  *
  * Deliberately NOT applied for a containing block established only by
- * `transform`/`perspective`/`filter`/`backdrop-filter`/`will-change`, or by
- * `contain: layout` with no `paint`/`strict`/`content` alongside it - none
+ * `transform`/`translate`/`rotate`/`scale`/`perspective`/`filter`/
+ * `backdrop-filter`/`will-change`, or by `contain: layout` with no
+ * `paint`/`strict`/`content` alongside it - none
  * of those clip overflow (`layout` containment only isolates layout
  * calculations, it does not imply paint containment - see the spec note
  * above `findFixedPositioningContainer`), so a menu is free to visually

package/package.json

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