ckeditor5 1.1.2 → 1.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0aee8586159157d2581cefe62cc87ea58d822db618c0f0dd9ceee5c0d3fdba46
-  data.tar.gz: 550633bd1bb74e54909f19447f7ced3bff0f6bd10324b44c9076641eb65e08e7
+  metadata.gz: a1a9231d02fc433d84940be1d9dff62a4a32a24101a0d383374dd5ce41789fdb
+  data.tar.gz: 58f7b1f2c6ebc373a80f8aacd1720f712f6b3b2df3501bfae8185c2f25ab6c9a
 SHA512:
-  metadata.gz: ba63dc4631e0703b8d719b7b2c21efc97183455550e6eb6406f96f8e789baaf1ed7dd202d0711ca100f39e906b386c026ef8515042d6441bce465baf6de8b10a
-  data.tar.gz: 15a0df8fd18291bc5d47e9a15df2d0192316512b38a85ec07c4bc047895d1111a6bd92afa2c09bdab639f31485a039538d7390048e39d66ea22bf51373e22e38
+  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,50 +798,10 @@ 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 📝
-
-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
-<%= 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
-<%= ckeditor5_editor do %>
-  <p>Initial content</p>
-<% end %>
-```
-
 ### 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.
@@ -838,6 +820,8 @@ You can integrate CKEditor 5 with Rails form builders like `form_for` or `simple
 #### 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!' %>
@@ -847,6 +831,8 @@ You can integrate CKEditor 5 with Rails form builders like `form_for` or `simple
 #### 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 %>
@@ -860,8 +846,12 @@ You can integrate CKEditor 5 with Rails form builders like `form_for` or `simple
 
 ### 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 🧩
@@ -1034,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

@@ -310,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/version.rb

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

metadata

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