ckeditor5 1.1.1 → 1.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ba0f56261f0c699d67fce659fe6cd4cbc3fc2f288ebedf0fd908f4f6d9555001
-  data.tar.gz: 9c5b41693f3858a94841b7e6392bbd573a3bc83c3a936c7dd2fbdcfff42fda63
+  metadata.gz: a1a9231d02fc433d84940be1d9dff62a4a32a24101a0d383374dd5ce41789fdb
+  data.tar.gz: 58f7b1f2c6ebc373a80f8aacd1720f712f6b3b2df3501bfae8185c2f25ab6c9a
 SHA512:
-  metadata.gz: e12b59365223eeeee6cccef5e771ae2df9e17e9500275a871c8f7b41b6a39abe0cec725848f887ead1a3235d2d50447fdb8b99ead940d1dc50c5f795369d9354
-  data.tar.gz: b163824d28f9867b0bee31e273e5b0be6ad380891d43a1e48ed1fb4df0c38460a4cfddc5fcb7fdf1fa1430950b6cd3d47a6c4cbcf8c4067f5178660f6c991d15
+  metadata.gz: 660761eb62fcd75e55f59c4a4f06115ed7d523aefeedde9d78a288cfced67170bb8ddddeb8f0c18a0d61267a05882df2c01e5b6689a0f0109aca7ce5aed31565
+  data.tar.gz: acf7b3c7999b4524e096a49e70522cb029d7d54ebb470605c89552f6de35c89d5d828e34fa59c9f106d2ad041295a8ec019821ba84f23b89a6fc81c3e3e4d9ef

data/README.md

@@ -74,23 +74,23 @@ Voilà! You have CKEditor 5 integrated with your Rails application. 🎉
     - [GPL usage 🆓](#gpl-usage-)
     - [Commercial usage 💰](#commercial-usage-)
   - [Editor placement 🏗️](#editor-placement-️)
+    - [Setting Initial Content 📝](#setting-initial-content-)
     - [Classic editor 📝](#classic-editor-)
     - [Multiroot editor 🌳](#multiroot-editor-)
     - [Inline editor 📝](#inline-editor-)
     - [Balloon editor 🎈](#balloon-editor-)
     - [Decoupled editor 🌐](#decoupled-editor-)
   - [How to access editor instance? 🤔](#how-to-access-editor-instance-)
-  - [Events fired by the editor 🔊](#events-fired-by-the-editor-)
-    - [`editor-ready` event](#editor-ready-event)
-    - [`editor-error` event](#editor-error-event)
   - [Common Tasks and Solutions 💡](#common-tasks-and-solutions-)
-    - [Setting Initial Content 📝](#setting-initial-content-)
     - [Setting Editor Language 🌐](#setting-editor-language-)
     - [Integrating with Forms 📋](#integrating-with-forms-)
       - [Rails form builder integration](#rails-form-builder-integration)
       - [Simple form integration](#simple-form-integration)
     - [Custom Styling 🎨](#custom-styling-)
     - [Custom plugins 🧩](#custom-plugins-)
+  - [Events fired by the editor 🔊](#events-fired-by-the-editor-)
+    - [`editor-ready` event](#editor-ready-event)
+    - [`editor-error` event](#editor-error-event)
   - [License 📜](#license-)
 
 ## Presets 🎨
@@ -583,6 +583,28 @@ In this scenario, the assets are included from the official CKEditor 5 CDN which
 
 The `ckeditor5_editor` helper renders CKEditor 5 instances in your views. Before using it, ensure you've included the necessary assets in your page's head section otherwise the editor won't work as there are no CKEditor 5 JavaScript and CSS files loaded.
 
+### Setting Initial Content 📝
+
+You can set the initial content of the editor using the `initial_data` keyword argument or by passing the content directly to the `ckeditor5_editor` helper block.
+
+The example below shows how to set the initial content of the editor using the `initial_data` keyword argument:
+
+```erb
+<!-- app/views/demos/index.html.erb -->
+
+<%= ckeditor5_editor initial_data: "<p>Initial content</p>" %>
+```
+
+The example below shows how to set the initial content of the editor using the `ckeditor5_editor` helper block.
+
+```erb
+<!-- app/views/demos/index.html.erb -->
+
+<%= ckeditor5_editor do %>
+  <p>Initial content</p>
+<% end %>
+```
+
 ### Classic editor 📝
 
 The classic editor is the most common type of editor. It provides a toolbar with various formatting options like bold, italic, underline, and link.
@@ -776,40 +798,14 @@ document.getElementById('editor').runAfterEditorReady(editor => {
 });
 ```
 
-## Events fired by the editor 🔊
-
-### `editor-ready` event
-
-The event is fired when the initialization of the editor is completed. You can listen to it using the `editor-ready` event.
-
-```js
-document.getElementById('editor').addEventListener('editor-ready', () => {
-  console.log('Editor is ready');
-});
-```
-
-### `editor-error` event
-
-The event is fired when the initialization of the editor fails. You can listen to it using the `editor-error` event.
-
-```js
-document.getElementById('editor').addEventListener('editor-error', () => {
-  console.log('Editor has an error');
-});
-```
-
 ## Common Tasks and Solutions 💡
 
 This section covers frequent questions and scenarios when working with CKEditor 5 in Rails applications.
 
-### Setting Initial Content 📝
-
-```erb
-<%= ckeditor5_editor initial_data: "<p>Initial content</p>" %>
-```
-
 ### Setting Editor Language 🌐
 
+You can set the language of the editor using the `language` method in the `config/initializers/ckeditor5.rb` file. The `translations` method fetches the translations files, while the `language` method sets the default language of the editor.
+
 ```rb
 config.presets.override :default do
   translations :pl, :es
@@ -819,9 +815,13 @@ end
 
 ### Integrating with Forms 📋
 
+You can integrate CKEditor 5 with Rails form builders like `form_for` or `simple_form`. The example below shows how to integrate CKEditor 5 with a Rails form using the `form_for` helper:
+
 #### Rails form builder integration
 
 ```erb
+<!-- app/views/demos/index.html.erb -->
+
 <%= form_for @post do |f| %>
   <%= f.label :content %>
   <%= f.ckeditor5 :content, required: true, style: 'width: 700px', initial_data: 'Hello World!' %>
@@ -831,6 +831,8 @@ end
 #### Simple form integration
 
 ```erb
+<!-- app/views/demos/index.html.erb -->
+
 <%= simple_form_for :demo, url: '/demos', html: { novalidate: false } do |f| %>
   <div class="form-group">
     <%= f.input :content, as: :ckeditor5, initial_data: 'Hello, World 12!', input_html: { style: 'width: 600px' }, required: true %>
@@ -844,8 +846,12 @@ end
 
 ### Custom Styling 🎨
 
+You can pass the `style`, `class` and `id` keyword arguments to the `ckeditor5_editor` helper to define the styling of the editor. The example below shows how to set the height, margin, and CSS class of the editor:
+
 ```erb
-<%= ckeditor5_editor style: 'height: 400px; margin: 20px;' %>
+<!-- app/views/demos/index.html.erb -->
+
+<%= ckeditor5_editor style: 'height: 400px; margin: 20px;', class: 'your_css_class', id: 'your_id' %>
 ```
 
 ### Custom plugins 🧩
@@ -1018,6 +1024,28 @@ class HighlightCommand extends Command {
 
 </details>
 
+## Events fired by the editor 🔊
+
+### `editor-ready` event
+
+The event is fired when the initialization of the editor is completed. You can listen to it using the `editor-ready` event.
+
+```js
+document.getElementById('editor').addEventListener('editor-ready', () => {
+  console.log('Editor is ready');
+});
+```
+
+### `editor-error` event
+
+The event is fired when the initialization of the editor fails. You can listen to it using the `editor-error` event.
+
+```js
+document.getElementById('editor').addEventListener('editor-error', () => {
+  console.log('Editor has an error');
+});
+```
+
 ## License 📜
 
 The MIT License (MIT)

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

@@ -51,12 +51,17 @@ class CKEditorComponent extends HTMLElement {
   /** @type {Record<string, HTMLElement>} Map of editable elements by name */
   editables = {};
 
+  /** @type {String} Initial HTML passed to component */
+  #initialHTML = '';
+
   /**
    * Lifecycle callback when element is connected to DOM
    * Initializes the editor when DOM is ready
    * @protected
    */
   connectedCallback() {
+    this.#initialHTML = this.innerHTML;
+
     try {
       execIfDOMReady(() => this.#reinitializeEditor());
     } catch (error) {
@@ -179,7 +184,7 @@ class CKEditorComponent extends HTMLElement {
     this.style.display = 'block';
 
     if (!this.isMultiroot() && !this.isDecoupled()) {
-      this.innerHTML = `<${this.#editorElementTag}></${this.#editorElementTag}>`;
+      this.innerHTML = `<${this.#editorElementTag}>${this.#initialHTML}</${this.#editorElementTag}>`;
       this.#assignInputAttributes();
     }
 
@@ -305,6 +310,7 @@ class CKEditorComponent extends HTMLElement {
     const syncInput = () => {
       this.style.position = 'relative';
 
+      textarea.innerHTML = '';
       textarea.value = this.instance.getData();
       textarea.tabIndex = -1;
 

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

@@ -24,14 +24,15 @@ module CKEditor5::Rails
       config = config.deep_merge(extra_config)
       config[:initialData] = initial_data if initial_data
 
+      raise ArgumentError, 'Cannot pass initial data and block at the same time.' if initial_data && block
+
       editor_props = build_editor_props(
         config: config,
         type: type,
         context: context
       )
 
-      render_editor_component(editor_props, html_attributes,
-                              &(%i[multiroot decoupled].include?(type) ? block : nil))
+      render_editor_component(editor_props, html_attributes, &block)
     end
 
     def ckeditor5_editable(name = nil, **kwargs, &block)

data/lib/ckeditor5/rails/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module CKEditor5::Rails
-  VERSION = '1.1.1'
+  VERSION = '1.1.3'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: ckeditor5
 version: !ruby/object:Gem::Version
-  version: 1.1.1
+  version: 1.1.3
 platform: ruby
 authors:
 - Mateusz Bagiński