smeditor 0.2.4 → 0.2.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3edf61aad6834f2726ef15563ef798a7d71ae7758868f016fcd82af1b3521e39
-  data.tar.gz: 4ef021f5c72395a43f3f6dac47e5694c425bb4051691830f12ff83425f7e40e6
+  metadata.gz: b78483ba31701d6ff1da3c082c82396b6612812174f756d83312b13dc9f2a16d
+  data.tar.gz: d14fac8b9b6a172bf23fddf19eb0fa6b34b3eae978884ed7cc6b70b29a8c7e2e
 SHA512:
-  metadata.gz: dbf99306fc6c0e519bc46f3de5910d7508f24d4016afde2aea1c713380db598e7145338b778d44c284f94902a1a5f31ca35e95e099355c8563e29a6f842930b3
-  data.tar.gz: fda2e73e1c3df37b94c77911b0cf63c27d1d2d9bfa3488553a58b45f356601e3d7f015e524a847acc5878535ff5a5af33518310a4e52b3f583cc14fdb378c475
+  metadata.gz: f05b0e4d311cc29ab173c12b84d745fb8ef50c3a956d1983bf619a901fc738157cabcfe9784a197c28ff8991f88ccedc5b74af38a161aab1b63474b19c6c0841
+  data.tar.gz: c7ed0efe7cddecbde87182b620027ccfed65002948e14f4f68226e7ba3dc92bd1df095cd0445d3943e37193e2afd5a32159a34ff7ed19936aac5fad4104113a0

data/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog — smeditor
 
+## 0.2.5 — 2026-09-09
+
+- Fixed the Rails selected-text bubble toolbar being displaced to the right or vertically aligned with the text when the host application creates a CSS containing block (for example with `transform`, `filter`, `perspective`, or modal/animated wrappers).
+- Bubble positioning now matches the playground: it is centered above the live selection, flips below near the top viewport edge, and clamps horizontally to the viewport.
+- The Rails bubble is positioned in editor-local coordinates, so host layout transforms no longer corrupt its placement.
+
 ## 0.2.4 — 2026-09-09
 
 - Added the selected-text bubble formatting toolbar to the self-contained Rails adapter, matching the playground behavior.

data/app/assets/javascripts/smeditor.js

@@ -463,13 +463,18 @@ function selectionForSurface(surface) {
  * This mirrors React's <BubbleMenu />: selecting non-empty text opens a small
  * formatting toolbar above the live DOM range.
  */
-function buildBubbleMenu(editor, surface) {
+function buildBubbleMenu(editor, surface, container) {
     var _a;
     const menu = document.createElement("div");
     menu.className = "smeditor-floating smeditor-bubble-menu";
     menu.setAttribute("role", "toolbar");
     menu.setAttribute("aria-label", "Selected text formatting");
-    menu.style.position = "fixed";
+    // Keep the popover in the editor's own coordinate space. `position: fixed`
+    // becomes relative to transformed/filtering ancestors in browsers, which can
+    // shove the menu to the right or down in host applications. Absolute local
+    // positioning is stable because both the selection and container are measured
+    // in viewport coordinates and then converted to editor-local coordinates.
+    menu.style.position = "absolute";
     menu.style.display = "none";
     menu.style.zIndex = "2147483000";
     const buttons = [
@@ -515,20 +520,27 @@ function buildBubbleMenu(editor, surface) {
         menu.style.left = "-9999px";
         menu.style.top = "-9999px";
         const rect = menu.getBoundingClientRect();
+        const containerRect = container.getBoundingClientRect();
         const margin = 8;
         const offset = 8;
         const viewportWidth = window.innerWidth;
         const viewportHeight = window.innerHeight;
-        let left = anchor.left + anchor.width / 2 - rect.width / 2;
-        left = Math.max(margin, Math.min(left, viewportWidth - rect.width - margin));
-        let top = anchor.top - rect.height - offset;
-        if (top < margin)
-            top = anchor.bottom + offset;
-        if (top + rect.height > viewportHeight - margin) {
-            top = Math.max(margin, anchor.top - rect.height - offset);
-        }
-        menu.style.left = `${Math.round(left)}px`;
-        menu.style.top = `${Math.round(top)}px`;
+        // Calculate the desired position in viewport coordinates first, exactly like
+        // the React playground's Floating primitive, including viewport clamping and
+        // top/bottom collision handling. Then translate that point into the local
+        // coordinate system of the editor shell. This survives transformed parents,
+        // zoomed panels, modals, sidebars and other containing-block creators.
+        let viewportLeft = anchor.left + anchor.width / 2 - rect.width / 2;
+        const maxViewportLeft = Math.max(margin, viewportWidth - rect.width - margin);
+        viewportLeft = Math.max(margin, Math.min(viewportLeft, maxViewportLeft));
+        let viewportTop = anchor.top - rect.height - offset;
+        if (viewportTop < margin)
+            viewportTop = anchor.bottom + offset;
+        if (viewportTop + rect.height > viewportHeight - margin) {
+            viewportTop = Math.max(margin, anchor.top - rect.height - offset);
+        }
+        menu.style.left = `${Math.round(viewportLeft - containerRect.left)}px`;
+        menu.style.top = `${Math.round(viewportTop - containerRect.top)}px`;
         menu.style.visibility = "visible";
     };
     const scheduleUpdate = () => {
@@ -618,8 +630,8 @@ function bootMount(mount) {
     });
     const toolbar = buildToolbar(editor, kit, uploadUrl);
     shell.insertBefore(toolbar, surface);
-    const bubbleMenu = buildBubbleMenu(editor, surface);
-    root.appendChild(bubbleMenu);
+    const bubbleMenu = buildBubbleMenu(editor, surface, shell);
+    shell.appendChild(bubbleMenu);
     input.smeditorInstance = editor;
     mount.smeditorInstance = editor;
     mount.dataset.smeditorBooted = "1";

data/app/assets/stylesheets/smeditor.css

@@ -143,6 +143,7 @@
  */
 
 .smeditor {
+  position: relative;
   font-family: var(--sme-font-sans);
   color: var(--sme-color-text);
   background: var(--sme-color-surface);

data/lib/smeditor/rails/version.rb

@@ -2,6 +2,6 @@
 
 module SMEditor
   module Rails
-    VERSION = "0.2.4"
+    VERSION = "0.2.5"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: smeditor
 version: !ruby/object:Gem::Version
-  version: 0.2.4
+  version: 0.2.5
 platform: ruby
 authors:
 - SMEditor contributors
@@ -96,7 +96,7 @@ metadata:
   source_code_uri: https://github.com/sCruze/smeditor/tree/main/gems/smeditor
   changelog_uri: https://github.com/sCruze/smeditor/blob/main/gems/smeditor/CHANGELOG.md
   bug_tracker_uri: https://github.com/sCruze/smeditor/issues
-  documentation_uri: https://rubydoc.info/gems/smeditor/0.2.4
+  documentation_uri: https://rubydoc.info/gems/smeditor/0.2.5
   rubygems_mfa_required: 'true'
 rdoc_options: []
 require_paths: