ckeditor5 1.0.5 → 1.1.0

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

@@ -41,7 +41,7 @@ module CKEditor5::Rails::Assets
   class JSExportsMeta
     attr_reader :url, :import_meta
 
-    delegate :esm?, :window?, :import_name, :window_name, :import_as, to: :import_meta
+    delegate :esm?, :window?, :import_name, :window_name, :import_as, :to_h, to: :import_meta
 
     def initialize(url, translation: false, **import_options)
       @url = url

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

@@ -63,13 +63,14 @@ module CKEditor5::Rails::Assets
 
     def styles_tags
       @styles_tags ||= safe_join(bundle.stylesheets.map do |url|
-        tag.link(href: url, rel: 'stylesheet')
+        tag.link(href: url, rel: 'stylesheet', crossorigin: 'anonymous')
       end)
     end
 
     def preload_tags
       @preload_tags ||= safe_join(bundle.preloads.map do |url|
-        tag.link(href: url, rel: 'preload', as: self.class.url_resource_preload_type(url))
+        tag.link(href: url, rel: 'preload', as: self.class.url_resource_preload_type(url),
+                 crossorigin: 'anonymous')
       end)
     end
   end

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

@@ -23,7 +23,8 @@
  */
 class CKEditorComponent extends HTMLElement {
   /**
-   * List of attributes that trigger updates when changed
+   * List of attributes that trigger updates when changed.
+   *
    * @static
    * @returns {string[]} Array of attribute names to observe
    */
@@ -31,6 +32,16 @@ class CKEditorComponent extends HTMLElement {
     return ['config', 'plugins', 'translations', 'type'];
   }
 
+  /**
+   * List of input attributes that trigger updates when changed.
+   *
+   * @static
+   * @returns {string[]} Array of input attribute names to observe
+   */
+  static get inputAttributes() {
+    return ['name', 'required', 'value'];
+  }
+
   /** @type {Promise<import('ckeditor5').Editor>|null} Promise to initialize editor instance */
   instancePromise = Promise.withResolvers();
 
@@ -134,16 +145,17 @@ class CKEditorComponent extends HTMLElement {
       content = editablesOrContent.main;
     }
 
-    const instance = await Editor.create(
-      content,
-      {
-        ...this.#getConfig(),
-        ...translations.length && {
-          translations
-        },
-        plugins,
-      }
-    );
+    const config = {
+      ...this.#getConfig(),
+      ...translations.length && {
+        translations
+      },
+      plugins,
+    };
+
+    console.warn('Initializing CKEditor with config:', config);
+
+    const instance = await Editor.create(content, config);
 
     this.dispatchEvent(new CustomEvent('editor-ready', { detail: instance }));
 
@@ -168,6 +180,7 @@ class CKEditorComponent extends HTMLElement {
 
     if (!this.isMultiroot() && !this.isDecoupled()) {
       this.innerHTML = `<${this.#editorElementTag}></${this.#editorElementTag}>`;
+      this.#assignInputAttributes();
     }
 
     // Let's track changes in editables if it's a multiroot editor.
@@ -181,6 +194,8 @@ class CKEditorComponent extends HTMLElement {
 
     try {
       this.instance = await this.#initializeEditor(this.editables || this.#getConfig().initialData || '');
+      this.#setupContentSync();
+
       this.instancePromise.resolve(this.instance);
     } catch (err) {
       this.instancePromise.reject(err);
@@ -251,6 +266,74 @@ class CKEditorComponent extends HTMLElement {
     return { main: mainEditable };
   }
 
+  /**
+   * Copies input-related attributes from component to the main editable element
+   *
+   * @private
+   */
+  #assignInputAttributes() {
+    const textarea = this.querySelector('textarea');
+
+    if (!textarea) {
+      return;
+    }
+
+    for (const attr of CKEditorComponent.inputAttributes) {
+      if (this.hasAttribute(attr)) {
+        textarea.setAttribute(attr, this.getAttribute(attr));
+      }
+    }
+  }
+
+  /**
+   * Sets up content sync between editor and textarea element.
+   *
+   * @private
+   */
+  #setupContentSync() {
+    if (!this.instance) {
+      return;
+    }
+
+    const textarea = this.querySelector('textarea');
+
+    if (!textarea) {
+      return;
+    }
+
+    // Initial sync
+    const syncInput = () => {
+      this.style.position = 'relative';
+
+      textarea.value = this.instance.getData();
+      textarea.tabIndex = -1;
+
+      Object.assign(textarea.style, {
+        display: 'flex',
+        position: 'absolute',
+        bottom: '0',
+        left: '50%',
+        width: '1px',
+        height: '1px',
+        opacity: '0',
+        pointerEvents: 'none',
+        margin: '0',
+        padding: '0',
+        border: 'none'
+      });
+    };
+
+    syncInput();
+
+    // Listen for changes
+    this.instance.model.document.on('change:data', () => {
+      textarea.dispatchEvent(new Event('input', { bubbles: true }));
+      textarea.dispatchEvent(new Event('change', { bubbles: true }));
+
+      syncInput();
+    });
+  }
+
   /**
    * Loads translation modules
    *
@@ -624,16 +707,48 @@ function execIfDOMReady(callback) {
  * @returns {Promise<Array<any>>} Loaded modules
  */
 function loadAsyncImports(imports = []) {
-  return Promise.all(
-    imports.map(async ({ import_name, import_as, window_name }) => {
-      if (window_name && Object.prototype.hasOwnProperty.call(window, window_name)) {
-        return window[window_name];
+  const loadInlinePlugin = async ({ name, code }) => {
+    const module = await import(`data:text/javascript,${encodeURIComponent(code)}`);
+
+    if (!module.default) {
+      throw new Error(`Inline plugin "${name}" must export a default class/function!`);
+    }
+
+    return module.default;
+  };
+
+  const loadExternalPlugin = async ({ import_name, import_as, window_name }) => {
+    if (window_name) {
+      if (!Object.prototype.hasOwnProperty.call(window, window_name)) {
+        throw new Error(
+          `Plugin window['${window_name}'] not found in global scope. ` +
+          'Please ensure the plugin is loaded before CKEditor initialization.'
+        );
       }
 
-      const module = await import(import_name);
-      return import_as ? module[import_as] : module.default;
-    })
-  );
+      return window[window_name];
+    }
+
+    const module = await import(import_name);
+    const imported = module[import_as || 'default'];
+
+    if (!imported) {
+      throw new Error(`Plugin "${import_as}" not found in the ESM module "${import_name}"!`);
+    }
+
+    return imported;
+  };
+
+  return Promise.all(imports.map(item => {
+    switch(item.type) {
+      case 'inline':
+        return loadInlinePlugin(item);
+
+      case 'external':
+      default:
+        return loadExternalPlugin(item);
+    }
+  }));
 }
 
 customElements.define('ckeditor-component', CKEditorComponent);

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

@@ -7,7 +7,7 @@ module CKEditor5::Rails
 
       attr_reader :cdn, :version, :theme, :translations
 
-      def initialize(version, theme: :lark, cdn: Engine.base.default_cdn, translations: [])
+      def initialize(version, theme: :lark, cdn: Engine.default_preset.cdn, translations: [])
         raise ArgumentError, 'version must be semver' unless version.is_a?(Semver)
         raise ArgumentError, 'theme must be a string' unless theme.is_a?(String)
         raise ArgumentError, 'translations must be an array' unless translations.is_a?(Array)

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

@@ -7,7 +7,7 @@ module CKEditor5::Rails
 
       attr_reader :version, :translations, :import_name
 
-      def initialize(version, import_name, cdn: Engine.base.default_cdn, translations: [])
+      def initialize(version, import_name, cdn: Engine.default_preset.cdn, translations: [])
         raise ArgumentError, 'version must be semver' unless version.is_a?(Semver)
         raise ArgumentError, 'import_name must be a string' unless import_name.is_a?(String)
         raise ArgumentError, 'translations must be an array' unless translations.is_a?(Array)

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

@@ -6,7 +6,17 @@ require_relative 'ckbox_bundle'
 
 module CKEditor5::Rails
   module Cdn::Helpers
-    def ckeditor5_cdn_assets(version:, cdn:, license_key: 'GPL', premium: false, translations: [], ckbox: nil)
+    def ckeditor5_cdn_assets(preset: :default, **kwargs)
+      merge_with_editor_preset(preset, **kwargs) => {
+        cdn:,
+        version:,
+        translations:,
+        ckbox:,
+        license_key:,
+        premium:,
+        **kwargs
+      }
+
       bundle = build_base_cdn_bundle(cdn, version, translations)
       bundle << build_premium_cdn_bundle(cdn, version, translations) if premium
       bundle << build_ckbox_cdn_bundle(ckbox) if ckbox
@@ -29,12 +39,34 @@ module CKEditor5::Rails
       if kwargs[:license_key] && kwargs[:license_key] != 'GPL'
         ckeditor5_cloud_assets(**kwargs)
       else
-        ckeditor5_cdn_assets(**kwargs.merge(cdn: Engine.base.default_cdn))
+        ckeditor5_cdn_assets(**kwargs.merge(cdn: Engine.default_preset.cdn))
       end
     end
 
     private
 
+    def merge_with_editor_preset(preset, **kwargs)
+      found_preset = Engine.base.presets[preset]
+
+      if found_preset.blank?
+        raise ArgumentError,
+              "Poor thing. You forgot to define your #{preset} preset. " \
+              'Please define it in initializer. Thank you!'
+      end
+
+      hash = found_preset.to_h_with_overrides(**kwargs)
+
+      %i[version type].each do |key|
+        next if hash[key].present?
+
+        raise ArgumentError,
+              "Poor thing. You forgot to define #{key}. Make sure you passed `#{key}:` parameter to " \
+              "`ckeditor5_cdn_assets` or defined default one in your `#{preset}` preset!"
+      end
+
+      hash
+    end
+
     def build_base_cdn_bundle(cdn, version, translations)
       Cdn::CKEditorBundle.new(
         Semver.new(version),

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

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 require_relative 'props_plugin'
+require_relative 'props_inline_plugin'
 require_relative 'props'
 
 module CKEditor5::Rails
@@ -11,6 +12,7 @@ module CKEditor5::Rails
     def ckeditor5_editor(
       config: nil, extra_config: {},
       type: nil, preset: :default,
+      initial_data: nil,
       **html_attributes, &block
     )
       context = validate_and_get_editor_context!
@@ -19,8 +21,11 @@ module CKEditor5::Rails
       config ||= preset.config
       type ||= preset.type
 
+      config = config.deep_merge(extra_config)
+      config[:initialData] = initial_data if initial_data
+
       editor_props = build_editor_props(
-        config: config.deep_merge(extra_config),
+        config: config,
         type: type,
         context: context
       )

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

@@ -44,7 +44,7 @@ module CKEditor5::Rails::Editor
     end
 
     def serialize_translations
-      context[:bundle].translations_scripts.map { |script| script.import_meta.to_h }.to_json
+      context[:bundle].translations_scripts.map(&:to_h).to_json
     end
 
     def serialize_plugins
@@ -54,7 +54,7 @@ module CKEditor5::Rails::Editor
     def serialize_config
       config
         .except(:plugins)
-        .merge(licenseKey: context[:license_key] || 'GPL')
+        .tap { |cfg| cfg[:licenseKey] = context[:license_key] if context[:license_key] }
         .to_json
     end
   end

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

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module CKEditor5::Rails::Editor
+  class PropsInlinePlugin
+    def initialize(name, code)
+      @name = name
+      @code = code
+      validate_code!
+    end
+
+    def to_h
+      {
+        type: :inline,
+        name: name,
+        code: code
+      }
+    end
+
+    private
+
+    attr_reader :name, :code
+
+    def validate_code!
+      raise ArgumentError, 'Code must be a String' unless code.is_a?(String)
+
+      return if code.include?('export default')
+
+      raise ArgumentError,
+            'Code must include `export default` that exports plugin definition!'
+    end
+  end
+end

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

@@ -4,30 +4,35 @@ module CKEditor5::Rails::Editor
   class PropsPlugin
     delegate :to_h, to: :import_meta
 
-    def initialize(name, premium: false, import_name: nil)
+    def initialize(name, premium: false, **js_import_meta)
       @name = name
-      @premium = premium
-      @import_name = import_name
-      @import_name ||= premium ? 'ckeditor5-premium-features' : 'ckeditor5'
+      @js_import_meta = if js_import_meta.empty?
+                          { import_name: premium ? 'ckeditor5-premium-features' : 'ckeditor5' }
+                        else
+                          js_import_meta
+                        end
     end
 
     def self.normalize(plugin)
       case plugin
       when String, Symbol then new(plugin)
-      when PropsPlugin then plugin
+      when PropsPlugin, PropsInlinePlugin then plugin
       else raise ArgumentError, "Invalid plugin: #{plugin}"
       end
     end
 
-    private
-
-    attr_reader :name, :premium, :import_name
+    def to_h
+      meta = ::CKEditor5::Rails::Assets::JSImportMeta.new(
+        import_as: js_import_meta[:window_name] ? nil : name,
+        **js_import_meta
+      ).to_h
 
-    def import_meta
-      ::CKEditor5::Rails::Assets::JSImportMeta.new(
-        import_as: name,
-        import_name: import_name
-      )
+      meta.merge!({ type: :external })
+      meta
     end
+
+    private
+
+    attr_reader :name, :js_import_meta
   end
 end

data/lib/ckeditor5/rails/engine.rb

@@ -2,17 +2,12 @@
 
 require 'rails/engine'
 require_relative 'presets'
+require_relative 'hooks/form'
 
 module CKEditor5::Rails
   class Engine < ::Rails::Engine
     config.ckeditor5 = ActiveSupport::OrderedOptions.new
 
-    # Specifies which CDN should be used to load CKEditor 5 using the ckeditor5_assets helper.
-    # It is possible to use the following CDNs:
-    # - :unpkg
-    # - :jsdelivr (default)
-    config.ckeditor5.default_cdn = :jsdelivr
-
     # Specifies configuration of editors generated by gem.
     config.ckeditor5.presets = PresetsManager.new
 
@@ -22,10 +17,30 @@ module CKEditor5::Rails
       end
     end
 
+    initializer 'ckeditor5.simple_form' do
+      next unless defined?(::SimpleForm)
+
+      require_relative 'hooks/simple_form'
+
+      ::SimpleForm::FormBuilder.map_type :ckeditor5, to: Hooks::SimpleForm::CKEditor5Input
+    end
+
+    initializer 'ckeditor5.form_builder' do
+      require_relative 'hooks/form'
+
+      ActionView::Helpers::FormBuilder.include(
+        Hooks::Form::FormBuilderExtension
+      )
+    end
+
     def self.base
       config.ckeditor5
     end
 
+    def self.default_preset
+      config.ckeditor5.presets.default
+    end
+
     def self.configure
       yield config.ckeditor5
     end

data/lib/ckeditor5/rails/hooks/form.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module CKEditor5::Rails::Hooks
+  module Form
+    module FormBuilderExtension
+      def ckeditor5(method, options = {})
+        value = if object.respond_to?(method)
+                  object.send(method)
+                else
+                  options[:initial_data]
+                end
+
+        html_options = options.merge(
+          name: object_name,
+          required: options.delete(:required),
+          initial_data: value
+        )
+
+        @template.ckeditor5_editor(**html_options)
+      end
+    end
+  end
+end

data/lib/ckeditor5/rails/hooks/simple_form.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module CKEditor5::Rails::Hooks
+  module SimpleForm
+    class CKEditor5Input < ::SimpleForm::Inputs::Base
+      def input(wrapper_options = nil)
+        merged_input_options = merge_wrapper_options(input_html_options, wrapper_options)
+        @builder.template.ckeditor5_editor(**editor_options(merged_input_options))
+      end
+
+      private
+
+      def editor_options(merged_input_options)
+        {
+          preset: input_options.fetch(:preset, :default),
+          type: input_options.fetch(:type, :classic),
+          config: input_options[:config],
+          initial_data: object.try(attribute_name) || input_options[:initial_data],
+          name: "#{object_name}[#{attribute_name}]",
+          **merged_input_options
+        }
+      end
+    end
+  end
+end