smeditor 0.2.2 → 0.2.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: deea7d855b9ea5c7d61a51d82adeb656e3583db0dc9ed8d677345fe2d1bac550
-  data.tar.gz: 99a68a8823548919c2acb1aaea114822b677e33d464cd37a66f42fe4cc802e73
+  metadata.gz: 3edf61aad6834f2726ef15563ef798a7d71ae7758868f016fcd82af1b3521e39
+  data.tar.gz: 4ef021f5c72395a43f3f6dac47e5694c425bb4051691830f12ff83425f7e40e6
 SHA512:
-  metadata.gz: 6cf34629807ab5b326dff8ddaa85e80bc2f4b5c7de86a233e4d2a9c1196a3151df18af818f658f6826e0f21c7d90317c8f190df1697f5ecc8501c4f24511c9b7
-  data.tar.gz: 3f72f9d9fc819294563dd2519eb07e84dd159432fd2bc8ad6111b0ed125c46790163ef7caae49ae1b76ea7ced5406baf65b1dc9a2350e6115edc15b34c3d57bc
+  metadata.gz: dbf99306fc6c0e519bc46f3de5910d7508f24d4016afde2aea1c713380db598e7145338b778d44c284f94902a1a5f31ca35e95e099355c8563e29a6f842930b3
+  data.tar.gz: fda2e73e1c3df37b94c77911b0cf63c27d1d2d9bfa3488553a58b45f356601e3d7f015e524a847acc5878535ff5a5af33518310a4e52b3f583cc14fdb378c475

data/CHANGELOG.md

@@ -1,5 +1,17 @@
 # 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.
+- Added per-field `min_height`, `tablet_min_height`, and `mobile_min_height` Rails helper options.
+- Added matching global defaults in `SMEditor.configure`.
+
 ## 0.2.2 — 2026-09-09
 
 - Fixed caret jumps and reordered typing inside the Rails Shadow DOM editor. The core now resolves the live DOM Selection from the editor's own root instead of always using `document.getSelection()`.

data/README.md

@@ -42,6 +42,9 @@ SMEditor.configure do |config|
   config.uploads = :none                 # or :active_storage
   config.upload_path = "/smeditor/uploads"
   config.default_kit = "starter"        # or "full"
+  config.min_height = 320               # desktop, px when numeric
+  config.tablet_min_height = 280        # <= 1024px
+  config.mobile_min_height = 220        # <= 640px
   config.sanitize_output = true
 
   # true by default: the first editor field includes smeditor.js/css.
@@ -61,7 +64,10 @@ end
 <%= form_with model: @article do |form| %>
   <%= form.smeditor_editor :content,
         kit: "full",
-        placeholder: "Write…" %>
+        placeholder: "Write…",
+        min_height: 420,
+        tablet_min_height: 340,
+        mobile_min_height: 260 %>
 
   <%= form.submit %>
 <% end %>
@@ -79,8 +85,14 @@ Available options:
 - `class:`
 - `label:` — editor ARIA label
 - `upload_url:` — custom image upload endpoint
+- `min_height:` — minimum height on desktop (> 1024px)
+- `tablet_min_height:` — minimum height on tablet widths (641-1024px)
+- `mobile_min_height:` — minimum height on phone widths (<= 640px)
 - `include_assets: false` — skip automatic asset tags for this field
 
+Height options accept numbers (treated as pixels) or CSS lengths such as `24rem`,
+`45vh`, or `60dvh`. Per-field values override the initializer defaults.
+
 ### Assets in the layout (optional)
 
 By default the first `smeditor_editor` call includes the packaged assets once.

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 = "";
@@ -476,6 +590,15 @@ function bootMount(mount) {
     const root = shadowRootFor(mount);
     const shell = document.createElement("div");
     shell.className = "smeditor";
+    const responsiveHeights = [
+        ["--sme-editor-min-height", mount.dataset.smeditorMinHeight],
+        ["--sme-editor-min-height-tablet", mount.dataset.smeditorTabletMinHeight],
+        ["--sme-editor-min-height-mobile", mount.dataset.smeditorMobileMinHeight],
+    ];
+    for (const [property, value] of responsiveHeights) {
+        if (value)
+            shell.style.setProperty(property, value);
+    }
     const surface = document.createElement("div");
     surface.className = "smeditor-editor";
     surface.setAttribute("aria-label", mount.dataset.smeditorLabel || "Rich text editor");
@@ -495,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);
@@ -681,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;
         };
@@ -988,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");
@@ -1000,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();
     }
@@ -1337,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/app/assets/stylesheets/smeditor.css

@@ -79,6 +79,11 @@
 
   /* Indent step (block-level indentation) */
   --sme-indent-step: 24px;
+
+  /* Responsive editor surface height. Rails can override these per field. */
+  --sme-editor-min-height: 320px;
+  --sme-editor-min-height-tablet: 280px;
+  --sme-editor-min-height-mobile: 220px;
 }
 
 /* ---------------------------------------------------------------------------
@@ -366,7 +371,7 @@
   padding: var(--sme-space-4);
   font-size: var(--sme-text-base);
   line-height: var(--sme-leading);
-  min-height: 8em;
+  min-height: var(--sme-editor-min-height, 320px);
   outline: none;
 }
 
@@ -1186,7 +1191,19 @@
   font-size: 11px;
 }
 
+@media (max-width: 1024px) {
+  .smeditor-content,
+  .smeditor-editor {
+    min-height: var(--sme-editor-min-height-tablet, 280px);
+  }
+}
+
 @media (max-width: 640px) {
+  .smeditor-content,
+  .smeditor-editor {
+    min-height: var(--sme-editor-min-height-mobile, 220px);
+  }
+
   .smeditor-toolbar {
     gap: 4px;
     padding: var(--sme-space-2);

data/lib/generators/smeditor/templates/initializer.rb

@@ -14,6 +14,12 @@ SMEditor.configure do |config|
   # "starter" gives the MVP toolbar; "full" enables the larger extension set.
   config.default_kit = "starter"
 
+  # Responsive minimum editor height. Numeric values are pixels. You can also
+  # use CSS lengths such as "24rem" or "45vh".
+  config.min_height = 320
+  config.tablet_min_height = 280
+  config.mobile_min_height = 220
+
   # Stored editor HTML is sanitized before public rendering.
   config.sanitize_output = true
 

data/lib/smeditor/rails/config.rb

@@ -23,6 +23,13 @@ module SMEditor
     # Include the packaged JS/CSS automatically with the first editor field.
     # Set false when the host app calls `smeditor_assets` in its layout.
     attr_accessor :auto_include_assets
+    # Default minimum editor heights. They are responsive by viewport width:
+    # desktop (> 1024px), tablet (641-1024px), and mobile (<= 640px).
+    # Numeric values are interpreted as pixels; CSS lengths such as "24rem"
+    # and "45vh" are accepted too.
+    attr_accessor :min_height
+    attr_accessor :tablet_min_height
+    attr_accessor :mobile_min_height
     # Hard ceiling on an uploaded file, in bytes. The endpoint is reachable
     # by anyone who can reach the host app unless the controller is
     # subclassed with authentication, so it refuses anything larger.
@@ -42,6 +49,9 @@ module SMEditor
       @default_kit = "starter"
       @upload_path = "/smeditor/uploads"
       @auto_include_assets = true
+      @min_height = "320px"
+      @tablet_min_height = "280px"
+      @mobile_min_height = "220px"
       @max_upload_size = 10 * 1024 * 1024
       @allowed_upload_types = %w[
         image/png image/jpeg image/gif image/webp image/avif image/bmp

data/lib/smeditor/rails/form_helper.rb

@@ -23,7 +23,8 @@ module SMEditor
       # form    - a Rails FormBuilder
       # method  - the model attribute (stored as an HTML string)
       # options - :kit ("starter" | "full"), :class, :placeholder,
-      #           :upload_url, :label, :include_assets
+      #           :upload_url, :label, :include_assets, :min_height,
+      #           :tablet_min_height, :mobile_min_height
       def smeditor_editor(form, method, options = {})
         object = form.object
         current = object.respond_to?(method) ? object.public_send(method) : nil
@@ -31,6 +32,9 @@ module SMEditor
         upload_url = options.fetch(:upload_url, smeditor_upload_url)
         include_assets = options.fetch(:include_assets, SMEditor.config.auto_include_assets)
         stylesheet_url = asset_path("smeditor.css")
+        min_height = smeditor_css_length(options.fetch(:min_height, SMEditor.config.min_height), :min_height)
+        tablet_min_height = smeditor_css_length(options.fetch(:tablet_min_height, SMEditor.config.tablet_min_height), :tablet_min_height)
+        mobile_min_height = smeditor_css_length(options.fetch(:mobile_min_height, SMEditor.config.mobile_min_height), :mobile_min_height)
 
         hidden = form.hidden_field(
           method,
@@ -49,6 +53,9 @@ module SMEditor
             smeditor_upload_url: upload_url,
             smeditor_label: options[:label],
             smeditor_stylesheet: stylesheet_url,
+            smeditor_min_height: min_height,
+            smeditor_tablet_min_height: tablet_min_height,
+            smeditor_mobile_min_height: mobile_min_height,
           }.compact,
         )
 
@@ -60,6 +67,15 @@ module SMEditor
 
       private
 
+      CSS_LENGTH = %r{\A(?:0|(?:\d+(?:\.\d+)?)(?:px|rem|em|vh|dvh|svh|vw|%))\z}.freeze
+
+      def smeditor_css_length(value, option_name)
+        normalized = value.is_a?(Numeric) ? "#{value}px" : value.to_s.strip
+        return normalized if normalized.match?(CSS_LENGTH)
+
+        raise ArgumentError, "#{option_name} must be a number (pixels) or a CSS length such as 320px, 24rem, or 45vh"
+      end
+
       def smeditor_upload_url
         SMEditor.config.upload_path if SMEditor.config.uploads == :active_storage
       end

data/lib/smeditor/rails/version.rb

@@ -2,6 +2,6 @@
 
 module SMEditor
   module Rails
-    VERSION = "0.2.2"
+    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.2
+  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.2
+  documentation_uri: https://rubydoc.info/gems/smeditor/0.2.4
   rubygems_mfa_required: 'true'
 rdoc_options: []
 require_paths: