smeditor 0.2.3 → 0.2.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e09edfe28f68de93439fdd0552894387afc89e6eadf4875fb164d1a45aaa7658
-  data.tar.gz: a76689f1341ffd28d5b9e2fa24bf3c6543c40a0b9f8cc83ccc3348c871c41de5
+  metadata.gz: 3edf61aad6834f2726ef15563ef798a7d71ae7758868f016fcd82af1b3521e39
+  data.tar.gz: 4ef021f5c72395a43f3f6dac47e5694c425bb4051691830f12ff83425f7e40e6
 SHA512:
-  metadata.gz: 06f5e3c97c24a257a36d115e3ceebc42f0ab70060c9e5013d81807ac0d77af20a218ea6597972724e1df5492e26733eb382cedf0fbb638ecab90839f86d3d1ab
-  data.tar.gz: 36f25a97de694d48cff314de6bffef35bd6016d2960489601881ad35ef893ce580a3b4a3a4ba86c395e13bca62140b236170d985a6f3bc0f0ebcd19043aca43a
+  metadata.gz: dbf99306fc6c0e519bc46f3de5910d7508f24d4016afde2aea1c713380db598e7145338b778d44c284f94902a1a5f31ca35e95e099355c8563e29a6f842930b3
+  data.tar.gz: fda2e73e1c3df37b94c77911b0cf63c27d1d2d9bfa3488553a58b45f356601e3d7f015e524a847acc5878535ff5a5af33518310a4e52b3f583cc14fdb378c475

data/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog — smeditor
 
+## 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,120 @@ 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) {
+    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";
+    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 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`;
+        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 +618,16 @@ function bootMount(mount) {
     });
     const toolbar = buildToolbar(editor, kit, uploadUrl);
     shell.insertBefore(toolbar, surface);
+    const bubbleMenu = buildBubbleMenu(editor, surface);
+    root.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 +809,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 +1117,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 +1130,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 +1477,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/lib/smeditor/rails/version.rb

@@ -2,6 +2,6 @@
 
 module SMEditor
   module Rails
-    VERSION = "0.2.3"
+    VERSION = "0.2.4"
   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.4
 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.4
   rubygems_mfa_required: 'true'
 rdoc_options: []
 require_paths: