ckeditor5 1.6.1 → 1.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4ad96eb676ba96b39112d59c4f4404dbdb0c0fbce2b4f550b35c3e101912c18f
-  data.tar.gz: f58e26500ca145f1b4a4cb8421ee525f9dd3865e545a012cac132b9e667489ab
+  metadata.gz: 18736efccfe3547f18ff9df5418fd5f93aafa426423c3ca8daca99de481c6c60
+  data.tar.gz: 6be07d38f24ba131e3a8444175b8416561706a97d74bd581d8568703ef3544f2
 SHA512:
-  metadata.gz: deffecb44d57d886e23adacb80e2849517e43f5528154ee0e956dac016cd0ce541bd949e8d707049f1750687ecb4e9c872b89c719f7b76c1ad2550fceec51aed
-  data.tar.gz: 595a4e6f3ea8a192ec28973452074dad87d3f6da84b2ff926868c4921afea8238bc2642649ca0a0d45c734d8dfdfb88fb0b23f84686d9ba10727c5778845a59e
+  metadata.gz: c40e50c2093c7f8c311b8565a54ddc4835aba887ced1e36b4802c6681769a8f2e4f39812443e688f6e31ff4932eef76282664be82d7cdbb4b667c9febe76374f
+  data.tar.gz: f9a999fb8a325323e497b225f3c8bed54cc24befc5bcd2cc90a93a25dece1d539e5e33a34fbe2a4f9570e462527492e061819563b7fad19e61d24fae8a39953e

data/README.md

@@ -73,6 +73,7 @@ Voilà! You have CKEditor 5 integrated with your Rails application. 🎉
       - [`gpl` method](#gpl-method)
       - [`license_key(key)` method](#license_keykey-method)
       - [`premium` method](#premium-method)
+      - [`editable_height(height)` method](#editable_heightheight-method)
       - [`translations(*languages)` method](#translationslanguages-method)
       - [`ckbox` method](#ckbox-method)
       - [`type(type)` method](#typetype-method)
@@ -83,6 +84,7 @@ Voilà! You have CKEditor 5 integrated with your Rails application. 🎉
       - [`plugin(name, premium:, import_name:)` method](#pluginname-premium-import_name-method)
       - [`plugins(*names, **kwargs)` method](#pluginsnames-kwargs-method)
       - [`inline_plugin(name, code)` method](#inline_pluginname-code-method)
+      - [`ckeditor5_element_ref(selector)` method](#ckeditor5_element_refselector-method)
   - [Including CKEditor 5 assets 📦](#including-ckeditor-5-assets-)
     - [Format 📝](#format-)
       - [Using default preset](#using-default-preset)
@@ -271,6 +273,20 @@ CKEditor5::Rails.configure do
 end
 ```
 
+#### `editable_height(height)` method
+
+Defines the height of the editor. The example below shows how to set the height to `300px`:
+
+```rb
+# config/initializers/ckeditor5.rb
+
+CKEditor5::Rails.configure do
+  # ... other configuration
+
+  editable_height 300
+end
+```
+
 #### `translations(*languages)` method
 
 Defines the translations of CKEditor 5. You can pass the language codes as arguments. The example below shows how tell integration to fetch Polish and Spanish translations:
@@ -430,7 +446,9 @@ end
 
 #### `configure(name, value)` method
 
-Allows you to set custom configuration options. You can pass the name of the option and its value as arguments. The example below show how to set the default protocol for the link plugin to `https://`:
+Allows you to set custom configuration options. You can pass the name of the option and its value as arguments. The [`ckeditor5_element_ref(selector)` helper](#ckeditor5_element_refselector-method) allows you to reference DOM elements that will be used by the editor's features. It's particularly useful for features that need to check element presence or operate on specific DOM elements.
+
+For example, you can use it to configure font family dropdown to show only fonts available in specific elements:
 
 ```rb
 # config/initializers/ckeditor5.rb
@@ -438,8 +456,19 @@ Allows you to set custom configuration options. You can pass the name of the opt
 CKEditor5::Rails.configure do
   # ... other configuration
 
-  configure :link, {
-    defaultProtocol: 'https://'
+  configure :fontFamily, {
+    supportAllValues: true,
+    options: [
+      'default',
+      'Arial, Helvetica, sans-serif',
+      'Courier New, Courier, monospace',
+      'Georgia, serif',
+      'Lucida Sans Unicode, Lucida Grande, sans-serif',
+      'Tahoma, Geneva, sans-serif',
+      'Times New Roman, Times, serif',
+      'Trebuchet MS, Helvetica, sans-serif',
+      'Verdana, Geneva, sans-serif'
+    ]
   }
 end
 ```
@@ -523,6 +552,23 @@ CKEditor5::Rails.configure do
   JS
 end
 ```
+
+#### `ckeditor5_element_ref(selector)` method
+
+Defines a reference to a CKEditor 5 element. In other words, it allows you to reference DOM elements that will be used by the editor's features. It's particularly useful for features that need to check element presence or operate on specific DOM elements. The primary example is the `presence list` feature that requires a reference to the element that will be used to display the list.
+
+```rb
+# config/initializers/ckeditor5.rb
+
+CKEditor5::Rails.configure do
+  # ... other configuration
+
+  configure :yourPlugin, {
+      element: ckeditor5_element_ref("body")
+  }
+end
+```
+
 </details>
 
 ## Including CKEditor 5 assets 📦
@@ -808,6 +854,18 @@ If you want to override the configuration of the editor specified in default or
 <%= ckeditor5_editor extra_config: { toolbar: [:Bold, :Italic] }, style: 'width: 600px' %>
 ```
 
+It's possible to define the height of the editor by passing the `editable_height` keyword argument with the value in pixels:
+
+```erb
+<!-- app/views/demos/index.html.erb -->
+
+<% content_for :head do %>
+  <%= ckeditor5_assets %>
+<% end %>
+
+<%= ckeditor5_editor editable_height: 300 %>
+```
+
 ### Multiroot editor 🌳
 
 The multiroot editor allows you to create an editor with multiple editable areas. It's useful when you want to create a CMS with multiple editable areas on a single page.

data/lib/ckeditor5/rails/assets/webcomponent.mjs

@@ -132,6 +132,72 @@ class CKEditorComponent extends HTMLElement {
     }
   }
 
+  /**
+   * Resolves element references in configuration object.
+   * Looks for objects with { $element: "selector" } format and replaces them with actual elements.
+   *
+   * @private
+   * @param {Object} obj - Configuration object to process
+   * @returns {Object} Processed configuration object with resolved element references
+   */
+  #resolveElementReferences(obj) {
+    if (!obj || typeof obj !== 'object') {
+      return obj;
+    }
+
+    if (Array.isArray(obj)) {
+      return obj.map(item => this.#resolveElementReferences(item));
+    }
+
+    const result = Object.create(null);
+
+    for (const key of Object.getOwnPropertyNames(obj)) {
+      if (!isSafeKey(key)) {
+        console.warn(`Suspicious key "${key}" detected in config, skipping`);
+        continue;
+      }
+
+      const value = obj[key];
+
+      if (value && typeof value === 'object') {
+        if (value.$element) {
+          const selector = value.$element;
+
+          if (typeof selector !== 'string') {
+            console.warn(`Invalid selector type for "${key}", expected string`);
+            continue;
+          }
+
+          const element = document.querySelector(selector);
+
+          if (!element) {
+            console.warn(`Element not found for selector: ${selector}`);
+          }
+
+          result[key] = element || null;
+        } else {
+          result[key] = this.#resolveElementReferences(value);
+        }
+      } else {
+        result[key] = value;
+      }
+    }
+
+    return result;
+  }
+
+  /**
+   * Gets editor configuration with resolved element references
+   *
+   * @private
+   * @returns {EditorConfig}
+   */
+  #getConfig() {
+    const config = JSON.parse(this.getAttribute('config') || '{}');
+
+    return this.#resolveElementReferences(config);
+  }
+
   /**
    * Creates a new CKEditor instance
    *
@@ -228,6 +294,7 @@ class CKEditorComponent extends HTMLElement {
       this.instance = instance;
 
       this.#setupContentSync();
+      this.#setupEditableHeight();
 
       this.instancePromise.resolve(this.instance);
     } catch (err) {
@@ -236,10 +303,18 @@ class CKEditorComponent extends HTMLElement {
     }
   }
 
+  /**
+   * Checks if current editor is classic type
+   *
+   * @returns {boolean}
+   */
+  isClassic() {
+    return this.getAttribute('type') === 'ClassicEditor';
+  }
+
   /**
    * Checks if current editor is multiroot type
    *
-   * @private
    * @returns {boolean}
    */
   isMultiroot() {
@@ -249,7 +324,6 @@ class CKEditorComponent extends HTMLElement {
   /**
    * Checks if current editor is decoupled type
    *
-   * @private
    * @returns {boolean}
    */
   isDecoupled() {
@@ -259,23 +333,12 @@ class CKEditorComponent extends HTMLElement {
   /**
    * Checks if current editor has watchdog enabled
    *
-   * @private
    * @returns {boolean}
    */
   hasWatchdog() {
     return this.getAttribute('watchdog') === 'true';
   }
 
-  /**
-   * Parses editor configuration from config attribute
-   *
-   * @private
-   * @returns {EditorConfig}
-   */
-  #getConfig() {
-    return JSON.parse(this.getAttribute('config') || '{}');
-  }
-
   /**
    * Queries and validates editable elements
    *
@@ -378,6 +441,28 @@ class CKEditorComponent extends HTMLElement {
     });
   }
 
+  /**
+   * Sets up editable height for ClassicEditor
+   *
+   * @private
+   */
+  #setupEditableHeight() {
+    if (!this.isClassic()) {
+      return;
+    }
+
+    const { instance } = this;
+    const height = Number.parseInt(this.getAttribute('editable-height'), 10);
+
+    if (Number.isNaN(height)) {
+      return;
+    }
+
+    instance.editing.view.change((writer) => {
+      writer.setStyle('height', `${height}px`, instance.editing.view.document.getRoot());
+    });
+  }
+
   /**
    * Loads translation modules
    *
@@ -795,6 +880,20 @@ function loadAsyncImports(imports = []) {
   }));
 }
 
+
+/**
+ * Checks if a key is safe to use in configuration objects to prevent prototype pollution.
+ *
+ * @param {string} key - Key name to check
+ * @returns {boolean} True if key is safe to use.
+ */
+function isSafeKey(key) {
+  return typeof key === 'string' &&
+          key !== '__proto__' &&
+          key !== 'constructor' &&
+          key !== 'prototype';
+}
+
 customElements.define('ckeditor-component', CKEditorComponent);
 customElements.define('ckeditor-editable-component', CKEditorEditableComponent);
 customElements.define('ckeditor-ui-part-component', CKEditorUIPartComponent);

data/lib/ckeditor5/rails/editor/config_helpers.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module CKEditor5::Rails
+  module Editor::ConfigHelpers
+    def ckeditor5_element_ref(selector)
+      { '$element': selector }
+    end
+  end
+end

data/lib/ckeditor5/rails/editor/helpers.rb

@@ -3,31 +3,42 @@
 require_relative 'props_plugin'
 require_relative 'props_inline_plugin'
 require_relative 'props'
+require_relative 'config_helpers'
 
 module CKEditor5::Rails
   module Editor::Helpers
+    include Editor::ConfigHelpers
+
     class EditorContextError < StandardError; end
     class PresetNotFoundError < ArgumentError; end
+    class InvalidEditableHeightError < ArgumentError; end
 
     def ckeditor5_editor( # rubocop:disable Metrics/ParameterLists
       config: nil, extra_config: {},
       type: nil, preset: nil,
       initial_data: nil, watchdog: true,
+      editable_height: nil,
       **html_attributes, &block
     )
       validate_editor_input!(initial_data, block)
+
       controller_context = validate_and_get_editor_context!
 
       preset = resolve_editor_preset(preset || controller_context[:preset])
       config = build_editor_config(preset, config, extra_config, initial_data)
       type ||= preset.type
 
+      validated_height = validate_editable_height(type, editable_height) || preset.editable_height
       editor_props = Editor::Props.new(
         controller_context, type, config,
         watchdog: watchdog
       )
 
-      render_editor_component(editor_props, html_attributes, &block)
+      render_editor_component(
+        editor_props,
+        html_attributes.merge(validated_height ? { 'editable-height' => validated_height } : {}),
+        &block
+      )
     end
 
     def ckeditor5_editable(name = nil, **kwargs, &block)
@@ -83,5 +94,23 @@ module CKEditor5::Rails
     def render_editor_component(props, html_attributes, &block)
       tag.send(:'ckeditor-component', **props.to_attributes, **html_attributes, &block)
     end
+
+    def validate_editable_height(type, height)
+      return nil if height.nil?
+
+      unless type == :classic
+        raise InvalidEditableHeightError,
+              'editable_height can be used only with ClassicEditor'
+      end
+
+      case height
+      when String, /^\d+px$/ then height
+      when Integer, /^\d+$/ then "#{height}px"
+      else
+        raise InvalidEditableHeightError,
+              "editable_height must be an integer representing pixels or string ending with 'px'\n" \
+              "(e.g. 500 or '500px'). Got: #{height.inspect}"
+      end
+    end
   end
 end

data/lib/ckeditor5/rails/presets/preset_builder.rb

@@ -3,6 +3,8 @@
 module CKEditor5::Rails
   module Presets
     class PresetBuilder
+      include Editor::ConfigHelpers
+
       attr_reader :config
 
       def initialize
@@ -13,6 +15,7 @@ module CKEditor5::Rails
         @license_key = nil
         @type = :classic
         @ckbox = nil
+        @editable_height = nil
         @config = {
           plugins: [],
           toolbar: []
@@ -32,6 +35,12 @@ module CKEditor5::Rails
         }
       end
 
+      def editable_height(height = nil)
+        return @editable_height if height.nil?
+
+        @editable_height = height
+      end
+
       def ckbox(version = nil, theme: :lark)
         return @ckbox if version.nil?
 

data/lib/ckeditor5/rails/version.rb

@@ -2,6 +2,6 @@
 
 module CKEditor5
   module Rails
-    VERSION = '1.6.1'
+    VERSION = '1.8.0'
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: ckeditor5
 version: !ruby/object:Gem::Version
-  version: 1.6.1
+  version: 1.8.0
 platform: ruby
 authors:
 - Mateusz Bagiński
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-11-11 00:00:00.000000000 Z
+date: 2024-11-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -51,6 +51,7 @@ files:
 - lib/ckeditor5/rails/cdn/helpers.rb
 - lib/ckeditor5/rails/cdn/url_generator.rb
 - lib/ckeditor5/rails/cloud/helpers.rb
+- lib/ckeditor5/rails/editor/config_helpers.rb
 - lib/ckeditor5/rails/editor/helpers.rb
 - lib/ckeditor5/rails/editor/props.rb
 - lib/ckeditor5/rails/editor/props_inline_plugin.rb