smeditor 0.2.3 → 0.2.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e09edfe28f68de93439fdd0552894387afc89e6eadf4875fb164d1a45aaa7658
-  data.tar.gz: a76689f1341ffd28d5b9e2fa24bf3c6543c40a0b9f8cc83ccc3348c871c41de5
+  metadata.gz: b78483ba31701d6ff1da3c082c82396b6612812174f756d83312b13dc9f2a16d
+  data.tar.gz: d14fac8b9b6a172bf23fddf19eb0fa6b34b3eae978884ed7cc6b70b29a8c7e2e
 SHA512:
-  metadata.gz: 06f5e3c97c24a257a36d115e3ceebc42f0ab70060c9e5013d81807ac0d77af20a218ea6597972724e1df5492e26733eb382cedf0fbb638ecab90839f86d3d1ab
-  data.tar.gz: 36f25a97de694d48cff314de6bffef35bd6016d2960489601881ad35ef893ce580a3b4a3a4ba86c395e13bca62140b236170d985a6f3bc0f0ebcd19043aca43a
+  metadata.gz: f05b0e4d311cc29ab173c12b84d745fb8ef50c3a956d1983bf619a901fc738157cabcfe9784a197c28ff8991f88ccedc5b74af38a161aab1b63474b19c6c0841
+  data.tar.gz: c7ed0efe7cddecbde87182b620027ccfed65002948e14f4f68226e7ba3dc92bd1df095cd0445d3943e37193e2afd5a32159a34ff7ed19936aac5fad4104113a0

data/CHANGELOG.md

@@ -1,5 +1,17 @@
 # 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.
+- Bubble toolbar positioning and selection tracking now work inside the Rails Shadow DOM and stay visible across scroll/resize.
+- Core selection syncing now also listens on the editor ShadowRoot when available.
+
 ## 0.2.3
 
 - Added configurable responsive minimum editor heights for desktop, tablet, and mobile.

data/app/assets/javascripts/smeditor.js

@@ -446,6 +446,132 @@ function buildToolbar(editor, kit, uploadUrl) {
     };
     return toolbar;
 }
+function selectionForSurface(surface) {
+    var _a, _b, _c, _d;
+    const root = (_a = surface.getRootNode) === null || _a === void 0 ? void 0 : _a.call(surface);
+    const getSelection = root === null || root === void 0 ? void 0 : root.getSelection;
+    if (root && typeof getSelection === "function") {
+        const selection = getSelection.call(root);
+        if (selection)
+            return selection;
+    }
+    return (_d = (_c = (_b = surface.ownerDocument) === null || _b === void 0 ? void 0 : _b.getSelection) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : null;
+}
+/**
+ * Rails uses a dependency-free browser adapter rather than the React package,
+ * so contextual UI that exists in the playground must be mounted explicitly.
+ * This mirrors React's <BubbleMenu />: selecting non-empty text opens a small
+ * formatting toolbar above the live DOM range.
+ */
+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");
+    // 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 = [
+        commandButton(editor, "bold", "Bold", () => run(editor, "toggleBold"), () => editor.isActive("bold")),
+        commandButton(editor, "italic", "Italic", () => run(editor, "toggleItalic"), () => editor.isActive("italic")),
+        commandButton(editor, "underline", "Underline", () => run(editor, "toggleUnderline"), () => editor.isActive("underline")),
+        commandButton(editor, "strike", "Strike-through", () => run(editor, "toggleStrike"), () => editor.isActive("strike")),
+        commandButton(editor, "link", "Link", () => {
+            if (editor.isActive("link"))
+                return run(editor, "unsetLink");
+            const href = window.prompt("Link URL", "https://");
+            return href ? run(editor, "setLink", { href }) : false;
+        }, () => editor.isActive("link")),
+    ];
+    menu.append(...buttons);
+    // Keeping pointer-down inside the menu from focusing a button preserves the
+    // editor's text selection, which the formatting command needs.
+    menu.addEventListener("mousedown", (event) => event.preventDefault());
+    let frame = 0;
+    const hide = () => {
+        menu.style.display = "none";
+        menu.style.visibility = "hidden";
+    };
+    const updateNow = () => {
+        var _a, _b;
+        frame = 0;
+        if (surface.getAttribute("contenteditable") === "false")
+            return hide();
+        const selection = selectionForSurface(surface);
+        if (!selection || selection.rangeCount === 0 || selection.isCollapsed)
+            return hide();
+        const range = selection.getRangeAt(0);
+        if (!surface.contains(range.commonAncestorContainer))
+            return hide();
+        const anchor = range.getBoundingClientRect();
+        if (anchor.width === 0 && anchor.height === 0)
+            return hide();
+        for (const button of buttons)
+            (_b = (_a = button).__smeditorRefresh) === null || _b === void 0 ? void 0 : _b.call(_a);
+        // Make it measurable off-screen, then place it before the next paint.
+        menu.style.display = "inline-flex";
+        menu.style.visibility = "hidden";
+        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;
+        // 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 = () => {
+        if (frame)
+            cancelAnimationFrame(frame);
+        frame = requestAnimationFrame(updateNow);
+    };
+    const selectionRoot = (_a = surface.getRootNode) === null || _a === void 0 ? void 0 : _a.call(surface);
+    const selectionTarget = selectionRoot && selectionRoot !== document
+        ? selectionRoot
+        : null;
+    const disposeSelection = editor.on("selectionUpdate", scheduleUpdate);
+    document.addEventListener("selectionchange", scheduleUpdate);
+    selectionTarget === null || selectionTarget === void 0 ? void 0 : selectionTarget.addEventListener("selectionchange", scheduleUpdate);
+    surface.addEventListener("pointerup", scheduleUpdate);
+    surface.addEventListener("keyup", scheduleUpdate);
+    window.addEventListener("resize", scheduleUpdate);
+    window.addEventListener("scroll", scheduleUpdate, true);
+    menu.__smeditorDispose = () => {
+        if (frame)
+            cancelAnimationFrame(frame);
+        disposeSelection();
+        document.removeEventListener("selectionchange", scheduleUpdate);
+        selectionTarget === null || selectionTarget === void 0 ? void 0 : selectionTarget.removeEventListener("selectionchange", scheduleUpdate);
+        surface.removeEventListener("pointerup", scheduleUpdate);
+        surface.removeEventListener("keyup", scheduleUpdate);
+        window.removeEventListener("resize", scheduleUpdate);
+        window.removeEventListener("scroll", scheduleUpdate, true);
+    };
+    return menu;
+}
 function shadowRootFor(mount) {
     const root = mount.shadowRoot || mount.attachShadow({ mode: "open" });
     root.innerHTML = "";
@@ -504,11 +630,16 @@ function bootMount(mount) {
     });
     const toolbar = buildToolbar(editor, kit, uploadUrl);
     shell.insertBefore(toolbar, surface);
+    const bubbleMenu = buildBubbleMenu(editor, surface, shell);
+    shell.appendChild(bubbleMenu);
     input.smeditorInstance = editor;
     mount.smeditorInstance = editor;
     mount.dataset.smeditorBooted = "1";
     instances.set(mount, editor);
-    disposers.set(mount, [() => { var _a, _b; return (_b = (_a = toolbar).__smeditorDispose) === null || _b === void 0 ? void 0 : _b.call(_a); }]);
+    disposers.set(mount, [
+        () => { var _a, _b; return (_b = (_a = toolbar).__smeditorDispose) === null || _b === void 0 ? void 0 : _b.call(_a); },
+        () => { var _a, _b; return (_b = (_a = bubbleMenu).__smeditorDispose) === null || _b === void 0 ? void 0 : _b.call(_a); },
+    ]);
 }
 function boot(root = document) {
     root.querySelectorAll("[data-smeditor]").forEach(bootMount);
@@ -690,6 +821,7 @@ class Editor {
         this.onDomFocus = () => this.emit("focus", { editor: this });
         this.onDomBlur = () => this.emit("blur", { editor: this });
         this.onSelectionChange = () => this.syncSelectionFromDOM();
+        this.selectionChangeTargets = [];
         this.onCompositionStart = () => {
             this.composing = true;
         };
@@ -997,6 +1129,7 @@ class Editor {
         this.attachToElement();
     }
     attachToElement() {
+        var _a;
         const el = this.element;
         el.setAttribute("contenteditable", String(this.options.editable !== false));
         el.classList.add("smeditor-editor");
@@ -1009,7 +1142,17 @@ class Editor {
         el.addEventListener("compositionstart", this.onCompositionStart);
         el.addEventListener("compositionend", this.onCompositionEnd);
         if (typeof document !== "undefined") {
-            document.addEventListener("selectionchange", this.onSelectionChange);
+            // Keep the model selection in sync in both regular DOM and Shadow DOM.
+            // Chromium exposes the live shadow selection on ShadowRoot; listening to
+            // that root as well as Document avoids missing drag-selection events.
+            const root = (_a = el.getRootNode) === null || _a === void 0 ? void 0 : _a.call(el);
+            const targets = [document];
+            if (root && root !== document && "addEventListener" in root)
+                targets.push(root);
+            for (const target of targets) {
+                target.addEventListener("selectionchange", this.onSelectionChange);
+                this.selectionChangeTargets.push(target);
+            }
         }
         this.renderToDOM();
     }
@@ -1346,9 +1489,10 @@ class Editor {
             this.element.removeEventListener("compositionstart", this.onCompositionStart);
             this.element.removeEventListener("compositionend", this.onCompositionEnd);
         }
-        if (typeof document !== "undefined") {
-            document.removeEventListener("selectionchange", this.onSelectionChange);
+        for (const target of this.selectionChangeTargets) {
+            target.removeEventListener("selectionchange", this.onSelectionChange);
         }
+        this.selectionChangeTargets.length = 0;
         for (const ext of this.extensions) {
             (_a = ext.onDestroy) === null || _a === void 0 ? void 0 : _a.call(ext, this);
         }

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.3"
+    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.3
+  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.3
+  documentation_uri: https://rubydoc.info/gems/smeditor/0.2.5
   rubygems_mfa_required: 'true'
 rdoc_options: []
 require_paths: