smeditor 0.2.4 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3edf61aad6834f2726ef15563ef798a7d71ae7758868f016fcd82af1b3521e39
-  data.tar.gz: 4ef021f5c72395a43f3f6dac47e5694c425bb4051691830f12ff83425f7e40e6
+  metadata.gz: 37d69366d661f31b412b1225d656367136e26de3ac8ad98988ceeaf251ddc942
+  data.tar.gz: fbc0c5332adb77f6a42b1716c403a31e3dd21d8eb79919ee214073a69caab8ed
 SHA512:
-  metadata.gz: dbf99306fc6c0e519bc46f3de5910d7508f24d4016afde2aea1c713380db598e7145338b778d44c284f94902a1a5f31ca35e95e099355c8563e29a6f842930b3
-  data.tar.gz: fda2e73e1c3df37b94c77911b0cf63c27d1d2d9bfa3488553a58b45f356601e3d7f015e524a847acc5878535ff5a5af33518310a4e52b3f583cc14fdb378c475
+  metadata.gz: 5db1e9fa62c9bf728776931b9276184d18b85c36e586efbe907fae818cd6ecf4785d8144e66b922a3e567f64db97a546d96ca3ee4ecd5b8aa3c655b7933bd496
+  data.tar.gz: 9426a009a1184a403397818a2f37600702dbf72c3ecaa73bd7c0ffff44ab0f638416b033cc8e3208bbce664fba1fca97182bb7410b61e5b69dcc9bbff4f4f4ec

data/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog — smeditor
 
+## 0.3.0 — 2026-09-13
+
+- Added explicit `light` and `dark` theme selection across Core, React, and the Rails adapter. Rails now also supports a global `config.default_theme` and per-editor `theme` option.
+- The editor now defaults to the light theme when no theme is configured; dark mode is enabled only when explicitly requested, instead of following `prefers-color-scheme`.
+- Fixed React `EditorContent` overriding an editor created with `editable: false` back to an editable surface when the `editable` prop is omitted.
+
+## 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/README.md

@@ -42,6 +42,7 @@ SMEditor.configure do |config|
   config.uploads = :none                 # or :active_storage
   config.upload_path = "/smeditor/uploads"
   config.default_kit = "starter"        # or "full"
+  config.default_theme = "light"        # or "dark"
   config.min_height = 320               # desktop, px when numeric
   config.tablet_min_height = 280        # <= 1024px
   config.mobile_min_height = 220        # <= 640px
@@ -64,6 +65,7 @@ end
 <%= form_with model: @article do |form| %>
   <%= form.smeditor_editor :content,
         kit: "full",
+        theme: "light",
         placeholder: "Write…",
         min_height: 420,
         tablet_min_height: 340,
@@ -81,6 +83,7 @@ observe the value without CKEditor-specific integration.
 Available options:
 
 - `kit: "starter" | "full"`
+- `theme: "light" | "dark"` — defaults to `config.default_theme` (`"light"`)
 - `placeholder:`
 - `class:`
 - `label:` — editor ARIA label

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 = () => {
@@ -583,10 +595,15 @@ function bootMount(mount) {
     const kit = mount.dataset.smeditorKit === "full" ? "full" : "starter";
     const uploadUrl = mount.dataset.smeditorUploadUrl || undefined;
     const placeholder = mount.dataset.smeditorPlaceholder || undefined;
-    const explicitTheme = ((_b = (_a = mount.parentElement) === null || _a === void 0 ? void 0 : _a.closest("[data-theme]")) === null || _b === void 0 ? void 0 : _b.dataset.theme)
+    const configuredTheme = mount.dataset.smeditorTheme;
+    const inheritedTheme = ((_b = (_a = mount.parentElement) === null || _a === void 0 ? void 0 : _a.closest("[data-theme]")) === null || _b === void 0 ? void 0 : _b.dataset.theme)
         || document.documentElement.dataset.theme;
-    if (explicitTheme === "light" || explicitTheme === "dark")
-        mount.dataset.theme = explicitTheme;
+    const theme = configuredTheme === "dark" || configuredTheme === "light"
+        ? configuredTheme
+        : inheritedTheme === "dark" || inheritedTheme === "light"
+            ? inheritedTheme
+            : "light";
+    mount.dataset.theme = theme;
     const root = shadowRootFor(mount);
     const shell = document.createElement("div");
     shell.className = "smeditor";
@@ -609,6 +626,7 @@ function bootMount(mount) {
         extensions: kitExtensions(kit, uploadUrl),
         content: input.value || "<p></p>",
         placeholder,
+        theme,
         deepSelection: true,
         onUpdate: ({ editor: current }) => {
             input.value = current.getHTML();
@@ -618,8 +636,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";
@@ -788,7 +806,7 @@ function createEditor(options) {
 }
 class Editor {
     constructor(options) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         this.selection = null;
         this.history = new history_js_1.History();
         this.emitter = new events_js_1.EventEmitter();
@@ -818,10 +836,13 @@ class Editor {
             // Capture the finished composed text in one shot.
             this.handleDOMInput();
         };
-        this.options = options;
-        this.element = (_a = options.element) !== null && _a !== void 0 ? _a : null;
+        this.options = {
+            ...options,
+            theme: (_a = options.theme) !== null && _a !== void 0 ? _a : "light",
+        };
+        this.element = (_b = options.element) !== null && _b !== void 0 ? _b : null;
         // 1. Resolve extensions
-        this.extensions = (0, schema_js_1.flattenExtensions)((_b = options.extensions) !== null && _b !== void 0 ? _b : []);
+        this.extensions = (0, schema_js_1.flattenExtensions)((_c = options.extensions) !== null && _c !== void 0 ? _c : []);
         // 2. Compile schema
         this.schema = (0, schema_js_1.compileSchema)(this.extensions);
         // 3. Normalize initial content into JSON
@@ -830,7 +851,7 @@ class Editor {
         this.commands = this.buildCommandMap();
         // 5. Lifecycle: onCreate for each extension
         for (const ext of this.extensions) {
-            (_c = ext.onCreate) === null || _c === void 0 ? void 0 : _c.call(ext, this);
+            (_d = ext.onCreate) === null || _d === void 0 ? void 0 : _d.call(ext, this);
         }
         // 6. Mount to DOM if an element was given
         if (this.element) {
@@ -1117,9 +1138,10 @@ class Editor {
         this.attachToElement();
     }
     attachToElement() {
-        var _a;
+        var _a, _b;
         const el = this.element;
         el.setAttribute("contenteditable", String(this.options.editable !== false));
+        el.setAttribute("data-theme", (_a = this.options.theme) !== null && _a !== void 0 ? _a : "light");
         el.classList.add("smeditor-editor");
         el.addEventListener("input", this.onDomInput);
         el.addEventListener("beforeinput", this.onDomBeforeInput);
@@ -1133,7 +1155,7 @@ class Editor {
             // 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 root = (_b = el.getRootNode) === null || _b === void 0 ? void 0 : _b.call(el);
             const targets = [document];
             if (root && root !== document && "addEventListener" in root)
                 targets.push(root);

data/app/assets/stylesheets/smeditor.css

@@ -1,15 +1,11 @@
 /* SMEditor default theme tokens.
  *
- * Two ways to pick a theme:
+ * Theme selection:
  *
- *   1. Do nothing → the editor follows `prefers-color-scheme`.
- *   2. Set `data-theme="light"` or `data-theme="dark"` on any element
- *      that wraps the editor (or on <html>). The explicit attribute
- *      wins over the media query.
- *
- * Why both: developers want auto for new users (matches the rest of
- * their app), but a theme toggle in product UI needs explicit control
- * that survives reloads. Supporting both lets either pattern work.
+ *   1. Do nothing → light theme.
+ *   2. Set `data-theme="light"` or `data-theme="dark"` on the editor or
+ *      on an ancestor. SMEditor sets `data-theme="light"` by default when
+ *      initialized without a theme option.
  */
 
 /* ---------------------------------------------------------------------------
@@ -87,8 +83,7 @@
 }
 
 /* ---------------------------------------------------------------------------
- * Dark theme — applied when explicitly tagged, OR via media query when
- * no explicit theme is set on the document.
+ * Dark theme — applied only when explicitly tagged.
  * ------------------------------------------------------------------------ */
 :host([data-theme="dark"]),
 [data-theme="dark"] {
@@ -110,31 +105,6 @@
     0 10px 20px -15px rgba(0, 0, 0, 0.45);
 }
 
-/* Auto-dark: only when the document root has no explicit override. The
- * `:not([data-theme])` guard means a `data-theme="light"` setting on
- * any ancestor wins, even at night. */
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme="light"]),
-  :host(:not([data-theme="light"])) {
-    --sme-color-surface: #0f1115;
-    --sme-color-surface-muted: #1a1d23;
-    --sme-color-border: #2a2d35;
-    --sme-color-border-strong: #3a3f49;
-    --sme-color-text: #e7e9ee;
-    --sme-color-text-muted: #9aa0aa;
-    --sme-color-placeholder: #5c606b;
-    --sme-color-accent: #a78bfa;
-    --sme-color-accent-soft: #2a1d54;
-    --sme-color-primary: var(--sme-color-accent);
-    --sme-color-focus: #c4b5fd;
-    --sme-color-danger: #fca5a5;
-    --sme-color-danger-soft: #451a1a;
-    --sme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
-    --sme-shadow-md: 0 10px 38px -10px rgba(0, 0, 0, 0.5),
-      0 10px 20px -15px rgba(0, 0, 0, 0.45);
-  }
-}
-
 /* SMEditor default theme.
  *
  * Imports tokens, then styles the structural classes set by core
@@ -143,6 +113,7 @@
  */
 
 .smeditor {
+  position: relative;
   font-family: var(--sme-font-sans);
   color: var(--sme-color-text);
   background: var(--sme-color-surface);

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

@@ -14,6 +14,9 @@ SMEditor.configure do |config|
   # "starter" gives the MVP toolbar; "full" enables the larger extension set.
   config.default_kit = "starter"
 
+  # "light" is the default. Set "dark" globally or pass theme: per editor.
+  config.default_theme = "light"
+
   # Responsive minimum editor height. Numeric values are pixels. You can also
   # use CSS lengths such as "24rem" or "45vh".
   config.min_height = 320

data/lib/smeditor/rails/config.rb

@@ -18,6 +18,8 @@ module SMEditor
     attr_accessor :allowed_tags
     # Which bundle the form helper boots: "starter" or "full".
     attr_accessor :default_kit
+    # Default visual theme: "light" or "dark".
+    attr_accessor :default_theme
     # Upload endpoint used by the JavaScript adapter when uploads are enabled.
     attr_accessor :upload_path
     # Include the packaged JS/CSS automatically with the first editor field.
@@ -47,6 +49,7 @@ module SMEditor
         table thead tbody tr td th
       ]
       @default_kit = "starter"
+      @default_theme = "light"
       @upload_path = "/smeditor/uploads"
       @auto_include_assets = true
       @min_height = "320px"

data/lib/smeditor/rails/form_helper.rb

@@ -11,24 +11,28 @@ module SMEditor
       # include assets in <head> can call `smeditor_assets` there and disable
       # auto inclusion with config.auto_include_assets = false.
       def smeditor_assets
-        return "".html_safe if defined?(@_smeditor_assets_rendered) && @_smeditor_assets_rendered
-
-        @_smeditor_assets_rendered = true
-        safe_join([
-          stylesheet_link_tag("smeditor", "data-turbo-track": "reload"),
-          javascript_include_tag("smeditor", defer: true, "data-turbo-track": "reload"),
-        ])
+        if defined?(@_smeditor_assets_rendered) && @_smeditor_assets_rendered
+          "".html_safe
+        else
+          @_smeditor_assets_rendered = true
+          safe_join([
+            stylesheet_link_tag("smeditor", "data-turbo-track": "reload"),
+            javascript_include_tag("smeditor", defer: true, "data-turbo-track": "reload"),
+          ])
+        end
       end
 
       # form    - a Rails FormBuilder
       # method  - the model attribute (stored as an HTML string)
       # options - :kit ("starter" | "full"), :class, :placeholder,
-      #           :upload_url, :label, :include_assets, :min_height,
+      #           :theme ("light" | "dark"), :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
         kit = (options[:kit] || SMEditor.config.default_kit).to_s
+        theme = smeditor_theme(options.fetch(:theme, SMEditor.config.default_theme))
         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")
@@ -49,6 +53,7 @@ module SMEditor
           data: {
             smeditor: true,
             smeditor_kit: kit,
+            smeditor_theme: theme,
             smeditor_placeholder: options[:placeholder],
             smeditor_upload_url: upload_url,
             smeditor_label: options[:label],
@@ -71,9 +76,20 @@ module SMEditor
 
       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)
+        if normalized.match?(CSS_LENGTH)
+          normalized
+        else
+          raise ArgumentError, "#{option_name} must be a number (pixels) or a CSS length such as 320px, 24rem, or 45vh"
+        end
+      end
+
+      def smeditor_theme(value)
+        theme = value.to_s
+        unless %w[light dark].include?(theme)
+          raise ArgumentError, 'theme must be "light" or "dark"'
+        end
 
-        raise ArgumentError, "#{option_name} must be a number (pixels) or a CSS length such as 320px, 24rem, or 45vh"
+        theme
       end
 
       def smeditor_upload_url

data/lib/smeditor/rails/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: smeditor
 version: !ruby/object:Gem::Version
-  version: 0.2.4
+  version: 0.3.0
 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.3.0
   rubygems_mfa_required: 'true'
 rdoc_options: []
 require_paths: