ckeditor5 1.15.9 → 1.16.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 604312ff3ad324ca5ebbccca70efe7157e9ee67608d6a3b8d3b2d4b7c070213b
-  data.tar.gz: 8c44e0810acd1bb837cdcc8a37c4fb3051b5323a243e7b5a16341e9c8e3ef9a7
+  metadata.gz: e91fe2d11179c703901756efa978fcedcd3030d0381c4e550ab8c9c15ef73a19
+  data.tar.gz: 4119948cdae51969b3d1e77801f20faecd81cfbf2755388fc444421e7da8bdb9
 SHA512:
-  metadata.gz: 54fc1a049c23a9c45bee8fc307de81f7976407850d068f018e715396b93a47e3c37f77c45682ba7ee4f36fe1d5cef156eeb5791dbf0793c35503a93e09e41f8a
-  data.tar.gz: 23a2299e6b8685cf120fa40be70d23737ec68f732e6e96af4428d785234600ab17a24596f4d4794093b14fdd0625b20e3a2953950659e0ab0c9deda7fc2c1cc9
+  metadata.gz: d4f236d5bc883344daa8fa9bc0b7d55e3898360dd8fabfd48265bbd1eedf3c654e8ba6baf5b0a1ba5ffa215c6b2c14a60c02f7182b81885a875b0a4902f67746
+  data.tar.gz: 593de9199583c1f22a38b9858967eca63b9c98eef8b7a6a1e5a06ccfa1df759424dab96ed88c1719614744b26c8a32920722156875ba748e66c80272eeb0fd78

data/Gemfile

@@ -24,6 +24,7 @@ end
 
 group :test, :development do
   gem 'capybara', '~> 3.40'
+  gem 'cuprite', '~> 0.15.0'
   gem 'rspec', '~> 3.13'
   gem 'rspec-expectations', '~> 3.13'
   gem 'rspec-html-matchers', '~> 0.10.0'

data/lib/ckeditor5/rails/assets/webcomponents/components/context.mjs

@@ -12,7 +12,12 @@ class CKEditorContextComponent extends HTMLElement {
   /** @type {Set<CKEditorComponent>} */
   #connectedEditors = new Set();
 
+  /** @type {String} Attributes checksum hash */
+  #integrity = '';
+
   async connectedCallback() {
+    this.#integrity = this.getAttribute('integrity');
+
     try {
       execIfDOMReady(() => this.#initializeContext());
     } catch (error) {
@@ -52,6 +57,22 @@ class CKEditorContextComponent extends HTMLElement {
     this.#connectedEditors.delete(editor);
   }
 
+  /**
+   * Validates editor configuration integrity hash to prevent attacks.
+   */
+  async #validateIntegrity() {
+    const integrity = await calculateChecksum({
+      plugins: this.getAttribute('plugins'),
+    });
+
+    if (integrity !== this.#integrity) {
+      throw new Error(
+        'Configuration integrity check failed. It means that #integrity attributes mismatch from attributes passed to webcomponent. ' +
+        'This could be a security issue. Please check if you are passing correct attributes to the webcomponent.'
+      );
+    }
+  }
+
   /**
    * Initialize CKEditor context with shared configuration
    *
@@ -66,6 +87,8 @@ class CKEditorContextComponent extends HTMLElement {
       this.instance = null;
     }
 
+    await this.#validateIntegrity();
+
     const { Context, ContextWatchdog } = await import('ckeditor5');
     const plugins = await this.#getPlugins();
     const config = this.#getConfig();

data/lib/ckeditor5/rails/assets/webcomponents/components/editor.mjs

@@ -40,6 +40,9 @@ class CKEditorComponent extends HTMLElement {
   /** @type {String} ID of editor within context */
   #contextEditorId = null;
 
+  /** @type {String} Attributes checksum hash */
+  #integrity = '';
+
   /** @type {(event: CustomEvent) => void} Event handler for editor change */
   get oneditorchange() {
     return this.#getEventHandler('editorchange');
@@ -106,9 +109,11 @@ class CKEditorComponent extends HTMLElement {
   /**
    * Lifecycle callback when element is connected to DOM
    * Initializes the editor when DOM is ready
+   *
    * @protected
    */
   connectedCallback() {
+    this.#integrity = this.getAttribute('integrity');
     this.#context = this.closest('ckeditor-context-component');
     this.#initialHTML = this.innerHTML;
 
@@ -228,6 +233,23 @@ class CKEditorComponent extends HTMLElement {
     return resolveElementReferences(config);
   }
 
+  /**
+   * Validates editor configuration integrity hash to prevent attacks.
+   */
+  async #validateIntegrity() {
+    const integrity = await calculateChecksum({
+      translations: this.getAttribute('translations'),
+      plugins: this.getAttribute('plugins'),
+    });
+
+    if (integrity !== this.#integrity) {
+      throw new Error(
+        'Configuration integrity check failed. It means that #integrity attributes mismatch from attributes passed to webcomponent. ' +
+        'This could be a security issue. Please check if you are passing correct attributes to the webcomponent.'
+      );
+    }
+  }
+
   /**
    * Creates a new CKEditor instance
    *
@@ -237,6 +259,8 @@ class CKEditorComponent extends HTMLElement {
    * @throws {Error} When initialization fails
    */
   async #initializeEditor(editablesOrContent) {
+    await this.#validateIntegrity();
+
     const Editor = await this.#getEditorConstructor();
     const [plugins, translations] = await Promise.all([
       this.#getPlugins(),

data/lib/ckeditor5/rails/assets/webcomponents/utils.mjs

@@ -66,16 +66,18 @@ function loadAsyncImports(imports = []) {
     return imported;
   };
 
-  return Promise.all(imports.map(item => {
-    switch(item.type) {
-      case 'inline':
-        return loadInlinePlugin(item);
-
-      case 'external':
-      default:
-        return loadExternalPlugin(item);
-    }
-  }));
+  return Promise.all(
+    imports.map(async (item) => {
+      switch(item.type) {
+        case 'inline':
+          return loadInlinePlugin(item);
+
+        case 'external':
+        default:
+          return loadExternalPlugin(item);
+      }
+    })
+  );
 }
 
 /**
@@ -153,3 +155,24 @@ function resolveElementReferences(obj) {
 function uid() {
   return Math.random().toString(36).substring(2);
 }
+
+/**
+ * Calculates checksum for an object.
+ */
+async function calculateChecksum(obj) {
+  const objCopy = { ...obj, checksum: undefined };
+
+  return sha256(JSON.stringify(objCopy));
+}
+
+/**
+ * Calculates SHA-256 hash for a string
+ */
+async function sha256(str) {
+  const buffer = new TextEncoder().encode(str);
+  const hashBuffer = await crypto.subtle.digest('SHA-256', buffer);
+
+  return Array.from(new Uint8Array(hashBuffer))
+    .map(b => b.toString(16).padStart(2, '0'))
+    .join('');
+}

data/lib/ckeditor5/rails/concerns/checksum.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+require 'digest'
+require 'json'
+
+module CKEditor5::Rails::Concerns
+  module Checksum
+    private
+
+    def calculate_object_checksum(obj)
+      json = JSON.generate(obj)
+      Digest::SHA256.hexdigest(json)
+    end
+  end
+end

data/lib/ckeditor5/rails/context/props.rb

@@ -3,14 +3,16 @@
 module CKEditor5::Rails
   module Context
     class Props
+      include CKEditor5::Rails::Concerns::Checksum
+
       def initialize(config)
         @config = config
       end
 
       def to_attributes
         {
-          plugins: serialize_plugins,
-          config: serialize_config
+          **serialized_attributes,
+          integrity: integrity_checksum
         }
       end
 
@@ -18,6 +20,19 @@ module CKEditor5::Rails
 
       attr_reader :config
 
+      def integrity_checksum
+        unsafe_attributes = serialized_attributes.slice(:plugins)
+
+        calculate_object_checksum(unsafe_attributes)
+      end
+
+      def serialized_attributes
+        @serialized_attributes ||= {
+          plugins: serialize_plugins,
+          config: serialize_config
+        }
+      end
+
       def serialize_plugins
         (config[:plugins] || []).map { |plugin| Editor::PropsPlugin.normalize(plugin).to_h }.to_json
       end

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

@@ -5,6 +5,8 @@ require_relative 'editable_height_normalizer'
 
 module CKEditor5::Rails::Editor
   class Props
+    include CKEditor5::Rails::Concerns::Checksum
+
     EDITOR_TYPES = {
       classic: 'ClassicEditor',
       inline: 'InlineEditor',
@@ -25,8 +27,9 @@ module CKEditor5::Rails::Editor
 
     def to_attributes
       {
+        **serialized_attributes,
         type: EDITOR_TYPES[@type],
-        **serialized_attributes
+        integrity: integrity_checksum
       }
     end
 
@@ -38,14 +41,24 @@ module CKEditor5::Rails::Editor
 
     attr_reader :controller_context, :watchdog, :type, :config, :editable_height
 
+    def integrity_checksum
+      unsafe_attributes = serialized_attributes.slice(:translations, :plugins)
+
+      calculate_object_checksum(unsafe_attributes)
+    end
+
     def serialized_attributes
-      {
+      return @serialized_attributes if defined?(@serialized_attributes)
+
+      attributes = {
         translations: serialize_translations,
         plugins: serialize_plugins,
         config: serialize_config,
         watchdog: watchdog
       }
-        .merge(editable_height ? { 'editable-height' => editable_height } : {})
+
+      attributes.merge!(editable_height ? { 'editable-height' => editable_height } : {})
+      @serialized_attributes = attributes
     end
 
     def serialize_translations

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

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module CKEditor5::Rails
+  module Editor
+    class PropsBasePlugin
+      include Concerns::Checksum
+
+      attr_reader :name
+
+      def initialize(name)
+        @name = name
+      end
+
+      def to_h
+        raise NotImplementedError, 'This method must be implemented in a subclass'
+      end
+    end
+  end
+end

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

@@ -1,11 +1,14 @@
 # frozen_string_literal: true
 
+require_relative 'props_base_plugin'
+
 module CKEditor5::Rails::Editor
-  class PropsInlinePlugin
-    attr_reader :name, :code
+  class PropsInlinePlugin < PropsBasePlugin
+    attr_reader :code
 
     def initialize(name, code)
-      @name = name
+      super(name)
+
       @code = code
       validate_code!
     end

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

@@ -1,12 +1,14 @@
 # frozen_string_literal: true
 
-module CKEditor5::Rails::Editor
-  class PropsPlugin
-    attr_reader :name, :js_import_meta
+require_relative 'props_base_plugin'
 
-    delegate :to_h, to: :import_meta
+module CKEditor5::Rails::Editor
+  class PropsPlugin < PropsBasePlugin
+    attr_reader :js_import_meta
 
     def initialize(name, premium: false, **js_import_meta)
+      super(name)
+
       @name = name
       @js_import_meta = if js_import_meta.empty?
                           { import_name: premium ? 'ckeditor5-premium-features' : 'ckeditor5' }

data/lib/ckeditor5/rails/engine.rb

@@ -45,7 +45,7 @@ module CKEditor5::Rails
       def find_preset(preset)
         return preset if preset.is_a?(CKEditor5::Rails::Presets::PresetBuilder)
 
-        Engine.base.presets[preset]
+        base.presets[preset]
       end
     end
 
@@ -54,7 +54,8 @@ module CKEditor5::Rails
 
       delegate :version, :gpl, :premium, :cdn, :translations, :license_key,
                :type, :menubar, :toolbar, :plugins, :plugin, :inline_plugin,
-               :language, :ckbox, :configure, to: :default_preset
+               :language, :ckbox, :configure, :automatic_upgrades, :simple_upload_adapter,
+               :editable_height, to: :default_preset
 
       def initialize(configuration)
         @configuration = configuration

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

@@ -2,10 +2,10 @@
 
 module CKEditor5::Rails
   class Presets::PluginsBuilder
-    attr_reader :plugins
+    attr_reader :items
 
     def initialize(plugins)
-      @plugins = plugins
+      @items = plugins
     end
 
     def self.create_plugin(name, **kwargs)
@@ -17,19 +17,19 @@ module CKEditor5::Rails
     end
 
     def remove(*names)
-      names.each { |name| plugins.delete_if { |plugin| plugin.name == name } }
+      names.each { |name| items.delete_if { |plugin| plugin.name == name } }
     end
 
     def prepend(*names, before: nil, **kwargs)
       new_plugins = names.map { |name| self.class.create_plugin(name, **kwargs) }
 
       if before
-        index = plugins.index { |p| p.name == before }
+        index = items.index { |p| p.name == before }
         raise ArgumentError, "Plugin '#{before}' not found" unless index
 
-        plugins.insert(index, *new_plugins)
+        items.insert(index, *new_plugins)
       else
-        plugins.insert(0, *new_plugins)
+        items.insert(0, *new_plugins)
       end
     end
 
@@ -37,12 +37,12 @@ module CKEditor5::Rails
       new_plugins = names.map { |name| self.class.create_plugin(name, **kwargs) }
 
       if after
-        index = plugins.index { |p| p.name == after }
+        index = items.index { |p| p.name == after }
         raise ArgumentError, "Plugin '#{after}' not found" unless index
 
-        plugins.insert(index + 1, *new_plugins)
+        items.insert(index + 1, *new_plugins)
       else
-        plugins.push(*new_plugins)
+        items.push(*new_plugins)
       end
     end
   end

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

@@ -162,10 +162,9 @@ module CKEditor5::Rails
           }
         end
 
-        return unless block
-
         builder = ToolbarBuilder.new(@config[:toolbar][:items])
-        builder.instance_eval(&block)
+        builder.instance_eval(&block) if block_given?
+        builder
       end
 
       def inline_plugin(name, code)
@@ -183,10 +182,9 @@ module CKEditor5::Rails
 
         names.each { |name| plugin(name, **kwargs) } unless names.empty?
 
-        return unless block
-
         builder = PluginsBuilder.new(@config[:plugins])
-        builder.instance_eval(&block)
+        builder.instance_eval(&block) if block_given?
+        builder
       end
 
       def language(ui = nil, content: ui) # rubocop:disable Naming/MethodParameterName

data/lib/ckeditor5/rails/version.rb

@@ -2,7 +2,7 @@
 
 module CKEditor5
   module Rails
-    VERSION = '1.15.9'
+    VERSION = '1.16.0'
 
     DEFAULT_CKEDITOR_VERSION = '43.3.1'
   end

data/lib/ckeditor5/rails.rb

@@ -5,6 +5,7 @@ module CKEditor5
     require_relative 'rails/version'
     require_relative 'rails/version_detector'
     require_relative 'rails/semver'
+    require_relative 'rails/concerns/checksum'
     require_relative 'rails/assets/assets_bundle'
     require_relative 'rails/assets/assets_bundle_html_serializer'
     require_relative 'rails/helpers'

data/spec/e2e/features/editor_types_spec.rb

@@ -0,0 +1,178 @@
+# frozen_string_literal: true
+
+require 'e2e/spec_helper'
+
+RSpec.describe 'CKEditor5 Types Integration', type: :feature, js: true do
+  shared_examples 'an editor' do |path|
+    before { visit path }
+
+    it 'loads and initializes the editor' do
+      expect(page).to have_css('.ck-editor__editable', wait: 10)
+    end
+  end
+
+  shared_examples 'an editor that fires change event with main payload' do |path|
+    before { visit path }
+
+    it 'sends properly change events with proper payload' do
+      editor = first('.ck-editor__editable')
+
+      # Set up detailed change event listener
+      page.execute_script(<<~JS)
+        window._editorEvents = [];
+        document.querySelector('ckeditor-component').addEventListener('editor-change', (e) => {
+          window._editorEvents.push({
+            data: e.detail.data,
+            hasEditor: !!e.detail.editor
+          });
+        });
+      JS
+
+      # Clear editor and type text
+      editor.click
+      editor.send_keys([[:control, 'a'], :backspace])
+      editor.send_keys('Hello from keyboard!')
+
+      # Wait for change events and verify the last one
+      eventually do
+        events = page.evaluate_script('window._editorEvents')
+        last_event = events.last
+
+        expect(last_event['data']).to eq('main' => '<p>Hello from keyboard!</p>')
+        expect(last_event['hasEditor']).to be true
+      end
+    end
+  end
+
+  shared_examples 'a multiroot editor that fires change events' do |path, editables| # rubocop:disable Metrics/BlockLength
+    before { visit path }
+
+    it 'sends properly change events with proper payload for editables' do # rubocop:disable Metrics/BlockLength
+      editors = editables.map do |name|
+        find("[data-testid='#{name}-editable']")
+      end
+
+      # Set up detailed change event listener
+      page.execute_script(<<~JS)
+        window._editorEvents = [];
+        document.querySelector('ckeditor-component').addEventListener('editor-change', (e) => {
+          window._editorEvents.push({
+            data: e.detail.data,
+            hasEditor: !!e.detail.editor
+          });
+        });
+      JS
+
+      # Test each editable
+      expected_data = {}
+      editors.each_with_index do |editor, index|
+        editor.click
+        editor.send_keys([[:control, 'a'], :backspace])
+        content = "Content for #{editables[index]}"
+        editor.send_keys(content)
+        expected_data[editables[index]] = "<p>#{content}</p>"
+      end
+
+      # Wait for change events and verify the last one
+      eventually do
+        events = page.evaluate_script('window._editorEvents')
+        last_event = events.last
+
+        expect(last_event['data']).to eq(expected_data)
+        expect(last_event['hasEditor']).to be true
+      end
+    end
+  end
+
+  describe 'Classic Editor' do
+    it_behaves_like 'an editor', 'classic'
+    it_behaves_like 'an editor that fires change event with main payload', 'classic'
+  end
+
+  describe 'Decoupled Editor' do
+    before { visit 'decoupled' }
+
+    it_behaves_like 'an editor', 'decoupled'
+    it_behaves_like 'an editor that fires change event with main payload', 'decoupled'
+
+    it 'has separate toolbar' do
+      expect(page).to have_css('.toolbar-container .ck-toolbar')
+    end
+  end
+
+  describe 'Balloon Editor' do
+    before { visit 'balloon' }
+
+    it_behaves_like 'an editor', 'balloon'
+    it_behaves_like 'an editor that fires change event with main payload', 'balloon'
+
+    it 'shows balloon toolbar on selection' do
+      editor = first('.ck-editor__editable')
+      editor.click
+
+      expect(page).to have_css('.ck-balloon-panel', wait: 5)
+    end
+  end
+
+  describe 'Inline Editor' do
+    it_behaves_like 'an editor', 'inline'
+    it_behaves_like 'an editor that fires change event with main payload', 'inline'
+  end
+
+  describe 'Multiroot Editor' do
+    before { visit 'multiroot' }
+
+    it_behaves_like 'an editor', 'multiroot'
+    it_behaves_like 'a multiroot editor that fires change events', 'multiroot', %w[toolbar content]
+
+    it 'supports multiple editable areas' do
+      expect(page).to have_css('.ck-editor__editable', minimum: 2)
+    end
+
+    it 'shares toolbar between editables' do
+      expect(page).to have_css('.ck-toolbar', count: 1)
+    end
+
+    it 'handles dynamically added editables' do # rubocop:disable Metrics/BlockLength
+      # Set up event listener
+      page.execute_script(<<~JS)
+        window._newEditableEvents = [];
+        document.querySelector('ckeditor-component').addEventListener('editor-change', (e) => {
+          window._newEditableEvents.push({
+            data: e.detail.data,
+            hasEditor: !!e.detail.editor
+          });
+        });
+      JS
+
+      # Add new editable component
+      page.execute_script(<<~JS)
+        const container = document.querySelector('[data-testid="multiroot-editor"]');
+        const newEditable = document.createElement('ckeditor-editable-component');
+        newEditable.setAttribute('name', 'new-root');
+        container.appendChild(newEditable);
+      JS
+
+      sleep 0.1 # Wait for component initialization
+
+      # Find and interact with new editable
+      new_editable = find("[name='new-root']")
+      new_editable.click
+      new_editable.send_keys('Content for new root')
+
+      # Verify the change event
+      eventually do
+        events = page.evaluate_script('window._newEditableEvents')
+        last_event = events.last
+
+        expect(last_event['data']).to include(
+          'content' => '',
+          'new-root' => '<p>Content for new root</p>',
+          'toolbar' => '<p>This is a toolbar editable</p>'
+        )
+
+        expect(last_event['hasEditor']).to be true
+      end
+    end
+  end
+end