smeditor 0.2.5 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b78483ba31701d6ff1da3c082c82396b6612812174f756d83312b13dc9f2a16d
-  data.tar.gz: d14fac8b9b6a172bf23fddf19eb0fa6b34b3eae978884ed7cc6b70b29a8c7e2e
+  metadata.gz: 37d69366d661f31b412b1225d656367136e26de3ac8ad98988ceeaf251ddc942
+  data.tar.gz: fbc0c5332adb77f6a42b1716c403a31e3dd21d8eb79919ee214073a69caab8ed
 SHA512:
-  metadata.gz: f05b0e4d311cc29ab173c12b84d745fb8ef50c3a956d1983bf619a901fc738157cabcfe9784a197c28ff8991f88ccedc5b74af38a161aab1b63474b19c6c0841
-  data.tar.gz: c7ed0efe7cddecbde87182b620027ccfed65002948e14f4f68226e7ba3dc92bd1df095cd0445d3943e37193e2afd5a32159a34ff7ed19936aac5fad4104113a0
+  metadata.gz: 5db1e9fa62c9bf728776931b9276184d18b85c36e586efbe907fae818cd6ecf4785d8144e66b922a3e567f64db97a546d96ca3ee4ecd5b8aa3c655b7933bd496
+  data.tar.gz: 9426a009a1184a403397818a2f37600702dbf72c3ecaa73bd7c0ffff44ab0f638416b033cc8e3208bbce664fba1fca97182bb7410b61e5b69dcc9bbff4f4f4ec

data/CHANGELOG.md

@@ -1,5 +1,11 @@
 # 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).

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

@@ -595,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";
@@ -621,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();
@@ -800,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();
@@ -830,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
@@ -842,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) {
@@ -1129,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);
@@ -1145,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

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