smeditor 0.2.5 → 0.3.4

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
@@ -340,7 +310,7 @@
 /* Color swatch grid inside the color-picker dropdowns */
 .smeditor-color-grid {
   display: grid;
-  grid-template-columns: repeat(8, 1fr);
+  grid-template-columns: repeat(10, 22px);
   gap: 4px;
   padding: 6px;
 }
@@ -1232,6 +1202,145 @@
   }
 }
 
+/* ===========================================================================
+ * Colour pickers — current-colour indicator and labelled panel
+ * ======================================================================== */
+
+.smeditor-color-trigger {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1px;
+}
+
+.smeditor-color-trigger__bar {
+  display: block;
+  width: 14px;
+  height: 3px;
+  border-radius: 1px;
+}
+
+.smeditor-color-trigger__bar[data-empty="true"] {
+  background: transparent;
+  box-shadow: inset 0 0 0 1px var(--sme-color-border-strong);
+}
+
+.smeditor-color-trigger__bar[data-empty="false"] {
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
+}
+
+.smeditor-dropdown--color .smeditor-dropdown__menu {
+  min-width: 0;
+  max-width: none;
+}
+
+.smeditor-color-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 4px;
+}
+
+.smeditor-color-panel .smeditor-color-grid {
+  padding: 0;
+}
+
+.smeditor-color-panel__title {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--sme-color-text-muted);
+}
+
+.smeditor-color-panel__widths {
+  display: flex;
+  gap: 4px;
+}
+
+.smeditor-color-panel__chip,
+.smeditor-color-panel__clear {
+  appearance: none;
+  font: inherit;
+  font-size: var(--sme-text-sm);
+  color: var(--sme-color-text);
+  background: transparent;
+  border: 1px solid var(--sme-color-border);
+  border-radius: var(--sme-radius-sm);
+  padding: 5px 8px;
+  cursor: pointer;
+}
+
+.smeditor-color-panel__chip {
+  flex: 1 1 0;
+  white-space: nowrap;
+}
+
+.smeditor-color-panel__chip:hover,
+.smeditor-color-panel__clear:hover {
+  background: var(--sme-color-surface-muted);
+}
+
+.smeditor-color-panel__chip.is-active {
+  color: var(--sme-color-accent);
+  background: var(--sme-color-accent-soft);
+  border-color: var(--sme-color-accent);
+}
+
+.smeditor-color-panel__clear:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.smeditor-color-panel__clear:disabled:hover {
+  background: transparent;
+}
+
+/* Value pickers show the current value (font / size / spacing) */
+.smeditor-dropdown__label--text {
+  max-width: 96px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Bubble menu — one row, compact dividers */
+.smeditor-bubble-menu {
+  flex-wrap: nowrap;
+  white-space: nowrap;
+}
+
+.smeditor-bubble-menu .smeditor-toolbar__divider {
+  height: 18px;
+  margin: 0 2px;
+}
+
+/* Filled text (extension-background-color). `.smeditor-text-outline` is
+ * the class the 0.3.2 Rails build wrote for the same thing. */
+.smeditor-editor :where(.smeditor-fill, .smeditor-text-outline),
+.smeditor-content :where(.smeditor-fill, .smeditor-text-outline) {
+  padding: 0.04em 0.18em;
+  border-radius: 0.22em;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+
+/* Colour dot on the "text in outline" chips */
+.smeditor-color-panel__chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+.smeditor-color-panel__chip::before {
+  content: "";
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--sme-chip-swatch, conic-gradient(#1a1a1f 0 50%, #ffffff 0));
+  box-shadow: inset 0 0 0 1px var(--sme-color-border-strong);
+}
+
 
 /* Rails self-contained adapter / style isolation */
 :host {

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/sanitizer.rb

@@ -13,7 +13,7 @@ module SMEditor
       module_function
 
       # Attributes kept on surviving tags. `style` is included because
-      # SMEditor serializes color, background, highlight, text stroke,
+      # SMEditor serializes color, background, highlight, underline colour, text stroke,
       # font size, font family and alignment as constrained inline CSS.
       ALLOWED_ATTRS = %w[
         href src alt title class style target rel
@@ -111,7 +111,7 @@ module SMEditor
         case name
         when "text-align"
           sanitize_text_align(value)
-        when "color", "background-color", "background"
+        when "color", "background-color", "background", "text-decoration-color"
           sanitize_color(value)
         when "font-family"
           sanitize_font_family(value)

data/lib/smeditor/rails/version.rb

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