smeditor 0.2.1 → 0.2.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 84ee0bbaa2884f82336e20cf7962934d728d539ab71a68c87c865c09122d1100
-  data.tar.gz: 80da9de751d692cb0398e80f9b3017324fbf848873dc6a2e73dfa3c85fe9c8fb
+  metadata.gz: e09edfe28f68de93439fdd0552894387afc89e6eadf4875fb164d1a45aaa7658
+  data.tar.gz: a76689f1341ffd28d5b9e2fa24bf3c6543c40a0b9f8cc83ccc3348c871c41de5
 SHA512:
-  metadata.gz: 1a905c9df109f03de095aab6652d2eeedd1d42acffeb505a020872c6ffaf5ad88b4ea3cb7cdf5a518b449528b009c6eb53735ef3d61aa50ad6cc554f19114aeb
-  data.tar.gz: eb385c65cbae2a229035f98a66950f160d7d301c475cf9976429eebda3e1cc32faf3acfe3206c3478689f9567d33d78a02554dae6d3fe58f01bd3b7a21dadd9c
+  metadata.gz: 06f5e3c97c24a257a36d115e3ceebc42f0ab70060c9e5013d81807ac0d77af20a218ea6597972724e1df5492e26733eb382cedf0fbb638ecab90839f86d3d1ab
+  data.tar.gz: 36f25a97de694d48cff314de6bffef35bd6016d2960489601881ad35ef893ce580a3b4a3a4ba86c395e13bca62140b236170d985a6f3bc0f0ebcd19043aca43a

data/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog — smeditor
 
+## 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()`.
+- Selection restore and caret coordinate ranges now use the editor element's owner document, keeping the DOM integration correct in isolated roots and embedded documents.
+
 ## 0.2.1 — 2026-09-09
 
 - Rails editor now renders inside Shadow DOM so host application CSS cannot alter the SMEditor toolbar or editing surface.

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

@@ -476,6 +476,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");
@@ -763,14 +772,14 @@ class Editor {
      */
     coordsAtPoint(point) {
         var _a;
-        if (!this.element || typeof document === "undefined")
+        if (!this.element)
             return null;
         const deep = (_a = this.options.deepSelection) !== null && _a !== void 0 ? _a : false;
         const loc = domNodeFromPoint(point, this.element, deep);
         if (!loc)
             return null;
         try {
-            const range = document.createRange();
+            const range = this.element.ownerDocument.createRange();
             const offset = Math.min(loc.offset, lengthOf(loc.node));
             range.setStart(loc.node, offset);
             range.collapse(true);
@@ -1243,9 +1252,7 @@ class Editor {
         var _a, _b;
         if (this.updatingDOM || !this.element)
             return;
-        if (typeof document === "undefined")
-            return;
-        const domSel = document.getSelection();
+        const domSel = selectionForElement(this.element);
         if (!domSel)
             return;
         if (!this.element.contains(domSel.anchorNode))
@@ -1267,9 +1274,9 @@ class Editor {
     }
     readSelectionFromDOM() {
         var _a;
-        if (!this.element || typeof document === "undefined")
+        if (!this.element)
             return null;
-        const sel = document.getSelection();
+        const sel = selectionForElement(this.element);
         if (!sel || sel.rangeCount === 0)
             return null;
         const deep = (_a = this.options.deepSelection) !== null && _a !== void 0 ? _a : false;
@@ -1290,10 +1297,10 @@ class Editor {
     }
     applySelectionToDOM() {
         var _a;
-        if (!this.selection || !this.element || typeof document === "undefined") {
+        if (!this.selection || !this.element) {
             return;
         }
-        const sel = document.getSelection();
+        const sel = selectionForElement(this.element);
         if (!sel)
             return;
         const deep = (_a = this.options.deepSelection) !== null && _a !== void 0 ? _a : false;
@@ -1302,7 +1309,7 @@ class Editor {
         if (!anchorNode || !headNode)
             return;
         try {
-            const range = document.createRange();
+            const range = this.element.ownerDocument.createRange();
             range.setStart(anchorNode.node, Math.min(anchorNode.offset, lengthOf(anchorNode.node)));
             range.setEnd(headNode.node, Math.min(headNode.offset, lengthOf(headNode.node)));
             sel.removeAllRanges();
@@ -1353,6 +1360,30 @@ class Editor {
 // ============================================================================
 // Helpers (module-private)
 // ============================================================================
+/**
+ * Return the Selection object that actually owns the editor caret.
+ *
+ * `document.getSelection()` is not sufficient for editors mounted inside an
+ * open ShadowRoot: Chromium exposes a composed selection on the document whose
+ * anchor can be the shadow host instead of the text node inside the editor.
+ * Reading that selection produces a null/wrong editor position; the next DOM
+ * render then loses the caret (most visibly when typing spaces).
+ *
+ * Both Document and Chromium's ShadowRoot expose getSelection(). Prefer the
+ * editor's root and fall back to its owner document for browsers that do not
+ * expose ShadowRoot#getSelection.
+ */
+function selectionForElement(element) {
+    var _a, _b, _c, _d;
+    const root = (_a = element.getRootNode) === null || _a === void 0 ? void 0 : _a.call(element);
+    const rootedGetSelection = root === null || root === void 0 ? void 0 : root.getSelection;
+    if (root && typeof rootedGetSelection === "function") {
+        const selection = rootedGetSelection.call(root);
+        if (selection)
+            return selection;
+    }
+    return (_d = (_c = (_b = element.ownerDocument) === null || _b === void 0 ? void 0 : _b.getSelection) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : null;
+}
 /**
  * Strip noise and unsafe elements from pasted HTML.
  *

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.1"
+    VERSION = "0.2.3"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: smeditor
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.2.3
 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.1
+  documentation_uri: https://rubydoc.info/gems/smeditor/0.2.3
   rubygems_mfa_required: 'true'
 rdoc_options: []
 require_paths: