ckeditor5 1.16.0 → 1.16.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e91fe2d11179c703901756efa978fcedcd3030d0381c4e550ab8c9c15ef73a19
-  data.tar.gz: 4119948cdae51969b3d1e77801f20faecd81cfbf2755388fc444421e7da8bdb9
+  metadata.gz: 80773f82ac9fcdf35feac2e568206c4dd5dbd04240ae891b880549fc7192ef12
+  data.tar.gz: d4c4244344977827288691f7846bce8737c70d9df170aff1fa2fb52a3a400d1a
 SHA512:
-  metadata.gz: d4f236d5bc883344daa8fa9bc0b7d55e3898360dd8fabfd48265bbd1eedf3c654e8ba6baf5b0a1ba5ffa215c6b2c14a60c02f7182b81885a875b0a4902f67746
-  data.tar.gz: 593de9199583c1f22a38b9858967eca63b9c98eef8b7a6a1e5a06ccfa1df759424dab96ed88c1719614744b26c8a32920722156875ba748e66c80272eeb0fd78
+  metadata.gz: 2b681fd82436a62b4da89064979c02f4952ba1c210473b3d00791fe34627555e6df6761c4fb9cdbd49ea3258a3ce508c7c2c013ae4dccb56eb452848f936024a
+  data.tar.gz: 1c2170807abc784d8905b6817a8b1fb03c08d1f8ce3be48403923b96c255232c7acea65bacd417922e0014e5b18f7eb58dd6702837d0fc7bca3df936bee9774d

data/README.md

@@ -82,26 +82,26 @@ end
 
 Voilà! You have CKEditor 5 integrated with your Rails application. 🎉
 
-## Try Our Demos! 🎮 ✨
+## Try Demos! 🎮 ✨
 
-Want to see some cool examples? We've got you covered! Check out our interactive [demo application](https://github.com/Mati365/ckeditor5-rails/tree/main/sandbox/app/views/demos) packed with various editor configurations. You can also explore official CKEditor 5 [examples](https://ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-editor.html) for more inspiration! 💡
+Explore various editor configurations with the interactive [demo application](https://github.com/Mati365/ckeditor5-rails/tree/main/sandbox/app/views/demos). For additional inspiration, visit the official CKEditor 5 [examples](https://ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-editor.html).
 
-Ready to play with the demos locally? It's super easy! Just follow these steps: 🚀
+To run the demos locally, follow these steps:
 
 ```bash
-bundle install # Install all the goodies 📦
-bundle exec guard -g rails # Fire up the server 🔥
+bundle install # Install dependencies
+bundle exec guard -g rails # Start the server
 ```
 
-Now the fun part - open [http://localhost:3000/](http://localhost:3000/) in your browser and start experimenting! 🎯 Feel free to tweak the code and make it your own! 🎨
+Open [http://localhost:3000/](http://localhost:3000/) in a browser to start experimenting. Modify the code as needed.
 
-Want to extend CKEditor's functionality? Check out our [plugins directory](https://github.com/Mati365/ckeditor5-rails/tree/main/lib/ckeditor5/rails/plugins) and create your own awesome plugins! 🔌 We love community contributions - your plugin could be the next great addition to our ecosystem! ⭐
+For extending CKEditor's functionality, refer to the [plugins directory](https://github.com/Mati365/ckeditor5-rails/tree/main/lib/ckeditor5/rails/plugins) to create custom plugins. Community contributions are welcome.
 
 ## Table of Contents 📚
 
 - [CKEditor 5 Rails Integration ✨](#ckeditor-5-rails-integration-)
   - [Installation 🛠️](#installation-️)
-  - [Try Our Demos! 🎮 ✨](#try-our-demos--)
+  - [Try Demos! 🎮 ✨](#try-demos--)
   - [Table of Contents 📚](#table-of-contents-)
   - [Presets 🎨](#presets-)
     - [Automatic upgrades 🔄](#automatic-upgrades-)
@@ -628,7 +628,7 @@ end
 
 #### `inline_plugin(name, code)` method
 
-Use with caution as this is an inline definition of the plugin code, and you can define a custom class or function for the plugin here. The example below shows how to define a custom plugin that highlights the text:
+⚠️ **Warning:** Use with caution as this is an inline definition of the plugin code, and it can potentially cause XSS vulnerabilities. Only use this method with static, trusted JavaScript code. The example below shows how to define a custom plugin that highlights the text:
 
 ```rb
 # config/initializers/ckeditor5.rb
@@ -645,6 +645,8 @@ CKEditor5::Rails.configure do
       }
 
       init() {
+        const config = this.editor.config.get('myCustomPlugin') || {};
+
         // ... Your plugin code
       }
     }
@@ -652,6 +654,23 @@ CKEditor5::Rails.configure do
 end
 ```
 
+To configure the custom plugin, use the `configure` method in your initializer. The example below shows how to configure the `myCustomPlugin`:
+
+```rb
+# config/initializers/ckeditor5.rb
+
+CKEditor5::Rails.configure do
+  # ... other configuration
+
+  configure :myCustomPlugin, {
+    option1: 'value1',
+    option2: 'value2'
+  }
+end
+```
+
+This approach is resistant to XSS attacks as it avoids inline JavaScript.
+
 #### `simple_upload_adapter(url)` method
 
 Defines the URL for the simple upload adapter. The default endpoint is `/uploads` and the method is `POST`. The example below shows how to set the URL to `/uploads`:
@@ -1129,16 +1148,18 @@ Format of the `ckeditor5_context` helper:
 ```erb
 <!-- app/views/demos/index.html.erb -->
 
-<%= ckeditor5_context config: { ... }, plugins: [ ... ] do %>
+<%= ckeditor5_context @context_preset do %>
   <%= ckeditor5_editor %>
   <%= ckeditor5_editor %>
 <% end %>
 ```
 
-The `ckeditor5_context` helper takes the `config` and `plugins` keyword arguments. The `config` keyword argument allows you to define the shared configuration of the editor instances, while the `plugins` keyword argument allows you to define the shared plugins. Format of these arguments is the same as in the `ckeditor5_editor` helper.
+The `ckeditor5_context` helper takes the context preset as an argument and renders the editor instances within the context. The context preset defines the shared configuration and state of the editor instances. It should be defined somewhere in controller.
 
 ### Example usage of `ckeditor5_context` helper 📝
 
+In your view:
+
 ```erb
 <!-- app/views/demos/index.html.erb -->
 
@@ -1146,7 +1167,7 @@ The `ckeditor5_context` helper takes the `config` and `plugins` keyword argument
   <%= ckeditor5_assets preset: :ultrabasic %>
 <% end %>
 
-<%= ckeditor5_context do %>
+<%= ckeditor5_context @context_preset do %>
   <%= ckeditor5_editor initial_data: 'Hello World' %>
 
   <br>
@@ -1155,6 +1176,39 @@ The `ckeditor5_context` helper takes the `config` and `plugins` keyword argument
 <% end %>
 ```
 
+In your controller:
+
+```rb
+# app/controllers/demos_controller.rb
+
+class DemosController < ApplicationController
+  def index
+    @context_preset = ckeditor5_context_preset do
+      # Syntax is identical to the `toolbar` method of the preset configuration.
+      toolbar :bold, :italic
+
+      # It's possible to define plugins. Syntax is identical to the `plugins` method of the preset configuration.
+      # Example:
+      # plugin :Bold
+      # inline_plugin :MyCustomPlugin, '...'
+    end
+  end
+end
+```
+
+It's possible to omit the preset argument, in that case the empty preset will be used.
+
+```erb
+<!-- app/views/demos/index.html.erb -->
+
+<%= ckeditor5_context do %>
+  <%= ckeditor5_editor %>
+  <%= ckeditor5_editor %>
+<% end %>
+```
+
+See demo for more details.
+
 ## How to access editor instance? 🤔
 
 You can access the editor instance using plain HTML and JavaScript, as CKEditor 5 is a web component with defined `instance`, `instancePromise` and `editables` properties.

data/lib/ckeditor5/rails/assets/assets_bundle.rb

@@ -38,7 +38,7 @@ module CKEditor5::Rails::Assets
     end
   end
 
-  class JSExportsMeta
+  class JSUrlImportMeta
     attr_reader :url, :import_meta
 
     delegate :esm?, :window?, :import_name, :window_name, :import_as, :to_h, to: :import_meta

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

@@ -12,12 +12,7 @@ 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) {
@@ -57,22 +52,6 @@ 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
    *
@@ -87,8 +66,6 @@ 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,9 +40,6 @@ 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');
@@ -109,11 +106,9 @@ 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;
 
@@ -233,23 +228,6 @@ 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
    *
@@ -259,8 +237,6 @@ 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,18 +66,16 @@ function loadAsyncImports(imports = []) {
     return imported;
   };
 
-  return Promise.all(
-    imports.map(async (item) => {
-      switch(item.type) {
-        case 'inline':
-          return loadInlinePlugin(item);
-
-        case 'external':
-        default:
-          return loadExternalPlugin(item);
-      }
-    })
-  );
+  return Promise.all(imports.map(item => {
+    switch(item.type) {
+      case 'inline':
+        return loadInlinePlugin(item);
+
+      case 'external':
+      default:
+        return loadExternalPlugin(item);
+    }
+  }));
 }
 
 /**
@@ -155,24 +153,3 @@ 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/cdn/ckbox_bundle.rb

@@ -20,11 +20,11 @@ module CKEditor5::Rails
 
       def scripts
         @scripts ||= [
-          Assets::JSExportsMeta.new(
+          Assets::JSUrlImportMeta.new(
             create_cdn_url('ckbox', version, 'ckbox.js'),
             window_name: 'CKBox'
           ),
-          *translations_js_exports_meta
+          *translations_js_url_imports
         ]
       end
 
@@ -46,11 +46,11 @@ module CKEditor5::Rails
               'theme must be a string or symbol'
       end
 
-      def translations_js_exports_meta
+      def translations_js_url_imports
         translations.map do |lang|
           url = create_cdn_url('ckbox', version, "translations/#{lang}.js")
 
-          Assets::JSExportsMeta.new(url, window_name: 'CKBOX_TRANSLATIONS', translation: true)
+          Assets::JSUrlImportMeta.new(url, window_name: 'CKBOX_TRANSLATIONS', translation: true)
         end
       end
     end

data/lib/ckeditor5/rails/cdn/ckeditor_bundle.rb

@@ -22,8 +22,8 @@ module CKEditor5::Rails
 
       def scripts
         @scripts ||= [
-          js_exports_meta,
-          *translations_js_exports_meta
+          js_url_imports,
+          *translations_js_url_imports
         ]
       end
 
@@ -35,18 +35,18 @@ module CKEditor5::Rails
 
       private
 
-      def js_exports_meta
-        Assets::JSExportsMeta.new(
+      def js_url_imports
+        Assets::JSUrlImportMeta.new(
           create_cdn_url(import_name, version, "#{import_name}.js"),
           import_name: import_name
         )
       end
 
-      def translations_js_exports_meta
+      def translations_js_url_imports
         translations.map do |lang|
           url = create_cdn_url(import_name, version, "translations/#{lang}.js")
 
-          Assets::JSExportsMeta.new(
+          Assets::JSUrlImportMeta.new(
             url,
             import_name: "#{import_name}/translations/#{lang}.js",
             translation: true

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

@@ -1,13 +1,19 @@
 # frozen_string_literal: true
 
-require_relative 'props'
+require_relative 'preset_builder'
+require_relative 'preset_serializer'
 
 module CKEditor5::Rails::Context
   module Helpers
-    def ckeditor5_context(**config, &block)
-      context_props = Props.new(config)
+    def ckeditor5_context(preset = nil, &block)
+      preset ||= PresetBuilder.new
+      context_props = PresetSerializer.new(preset)
 
       tag.public_send(:'ckeditor-context-component', **context_props.to_attributes, &block)
     end
+
+    def ckeditor5_context_preset(&block)
+      PresetBuilder.new(&block)
+    end
   end
 end

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

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+require_relative '../presets/concerns/configuration_methods'
+require_relative '../presets/concerns/plugin_methods'
+
+module CKEditor5::Rails
+  module Context
+    class PresetBuilder
+      include Presets::Concerns::ConfigurationMethods
+      include Presets::Concerns::PluginMethods
+
+      def initialize(&block)
+        @config = {
+          plugins: []
+        }
+
+        instance_eval(&block) if block_given?
+      end
+
+      def initialize_copy(source)
+        super
+
+        @config = {
+          plugins: source.config[:plugins].map(&:dup)
+        }.merge(
+          source.config.except(:plugins).deep_dup
+        )
+      end
+    end
+  end
+end

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

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module CKEditor5::Rails
+  module Context
+    class PresetSerializer
+      def initialize(preset)
+        @preset = preset
+      end
+
+      def to_attributes
+        {
+          plugins: serialize_plugins,
+          config: serialize_config
+        }
+      end
+
+      private
+
+      delegate :config, to: :@preset
+
+      def serialize_plugins
+        (config[:plugins] || []).map { |plugin| Editor::PropsPlugin.normalize(plugin).to_h }.to_json
+      end
+
+      def serialize_config
+        config.except(:plugins).to_json
+      end
+    end
+  end
+end

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

@@ -5,8 +5,6 @@ require_relative 'editable_height_normalizer'
 
 module CKEditor5::Rails::Editor
   class Props
-    include CKEditor5::Rails::Concerns::Checksum
-
     EDITOR_TYPES = {
       classic: 'ClassicEditor',
       inline: 'InlineEditor',
@@ -27,9 +25,8 @@ module CKEditor5::Rails::Editor
 
     def to_attributes
       {
-        **serialized_attributes,
         type: EDITOR_TYPES[@type],
-        integrity: integrity_checksum
+        **serialized_attributes
       }
     end
 
@@ -41,24 +38,14 @@ 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
       }
-
-      attributes.merge!(editable_height ? { 'editable-height' => editable_height } : {})
-      @serialized_attributes = attributes
+        .merge(editable_height ? { 'editable-height' => editable_height } : {})
     end
 
     def serialize_translations

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

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

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

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

data/lib/ckeditor5/rails/plugins/simple_upload_adapter.rb

@@ -2,7 +2,7 @@
 
 module CKEditor5::Rails::Plugins
   class SimpleUploadAdapter < CKEditor5::Rails::Editor::PropsInlinePlugin
-    PLUGIN_CODE = <<~JAVASCRIPT
+    PLUGIN_CODE = <<~JS
       import { Plugin, FileRepository } from 'ckeditor5';
 
       export default class SimpleUploadAdapter extends Plugin {
@@ -78,7 +78,7 @@ module CKEditor5::Rails::Plugins
           });
         }
       }
-    JAVASCRIPT
+    JS
 
     def initialize
       super(:SimpleUploadAdapter, PLUGIN_CODE)

data/lib/ckeditor5/rails/presets/concerns/configuration_methods.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+require 'active_support'
+
+module CKEditor5::Rails
+  module Presets
+    module Concerns
+      module ConfigurationMethods
+        extend ActiveSupport::Concern
+
+        included do
+          attr_reader :config
+        end
+
+        def configure(key, value)
+          config[key] = value
+        end
+      end
+    end
+  end
+end

data/lib/ckeditor5/rails/presets/concerns/plugin_methods.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module CKEditor5::Rails
+  module Presets
+    module Concerns
+      module PluginMethods
+        def inline_plugin(name, code)
+          config[:plugins] << Editor::PropsInlinePlugin.new(name, code)
+        end
+
+        def plugin(name, **kwargs)
+          plugin_obj = PluginsBuilder.create_plugin(name, **kwargs)
+          config[:plugins] << plugin_obj
+          plugin_obj
+        end
+
+        def plugins(*names, **kwargs, &block)
+          config[:plugins] ||= []
+
+          names.each { |name| plugin(name, **kwargs) } unless names.empty?
+
+          builder = PluginsBuilder.new(config[:plugins])
+          builder.instance_eval(&block) if block_given?
+          builder
+        end
+      end
+    end
+  end
+end