Update RTE doc

docs/guides/Replace-Rich-Text-Editor.md

@@ -17,42 +17,53 @@ In the following guide we'll integrate the CKEditor and to accomplish this task
 The first step is to indicate how to enable the third-party library and so for we gonna start with the `enable()` function. This method should take care of the first initialization of our custom RTE but also for the next time is called on the same element, this is why there is the `rte` argument.
 
 ```js
-var editor = grapesjs.init({...});
+// IMPORTANT: place the code in a new plugin
-editor.setCustomRte({
+const customRTE = (editor) => {
-  /**
+  const focus = (el, rte) => {
-   * Enabling the custom RTE
+    // implemented later
-   * @param  {HTMLElement} el This is the HTML node which was selected to be edited
+  }
-   * @param  {Object} rte It's the instance you'd return from the first call of enable().
+
-   *                      At the first call it'd be undefined. This is useful when you need
+  editor.setCustomRte({
-   *                      to check if the RTE is already enabled on the component
+    /**
-   * @return {Object} The return should be the RTE initialized instance
+     * Enabling the custom RTE
-   */
+     * @param  {HTMLElement} el This is the HTML node which was selected to be edited
-  enable: function(el, rte) {
+     * @param  {Object} rte It's the instance you'd return from the first call of enable().
-    // If already exists just focus
+     *                      At the first call it'd be undefined. This is useful when you need
-    if (rte) {
+     *                      to check if the RTE is already enabled on the component
-      this.focus(el, rte); // implemented later
+     * @return {Object} The return should be the RTE initialized instance
-      return rte;
+     */
-    }
+    enable: function(el, rte) {
-
+      // If already exists just focus
-    // CKEditor initialization
+      if (rte) {
-    rte = CKEDITOR.inline(el, {
+        focus(el, rte);
-      // Your configurations...
+        return rte;
-      toolbar: [...],
-      // IMPORTANT
-      // Generally, inline editors are attached exactly at the same position of
-      // the selected element but in this case it'd work until you start to scroll
-      // the canvas. For this reason you have to move the RTE's toolbar inside the
-      // one from GrapesJS. For this purpose we used a plugin which simplify
-      // this process and move all next CKEditor's toolbars inside our indicated
-      // element
-      sharedSpaces: {
-        top: editor.RichTextEditor.getToolbarEl(),
       }
-    });
 
-    this.focus(el, rte); // implemented later
+      // CKEditor initialization
-    return rte;
+      rte = CKEDITOR.inline(el, {
-  },
+        // Your configurations...
+        toolbar: [...],
+        // IMPORTANT
+        // Generally, inline editors are attached exactly at the same position of
+        // the selected element but in this case it'd work until you start to scroll
+        // the canvas. For this reason you have to move the RTE's toolbar inside the
+        // one from GrapesJS. For this purpose we used a plugin which simplify
+        // this process and move all next CKEditor's toolbars inside our indicated
+        // element
+        sharedSpaces: {
+          top: editor.RichTextEditor.getToolbarEl(),
+        }
+      });
+
+      focus(el, rte);
+      return rte;
+    },
+  });
+}
+
+const editor = grapesjs.init({
+  ...
+  plugins: [customRTE],
 });
 ```
 
@@ -66,13 +77,11 @@ Once we know how to enable the RTE let's implement the method which disable it,
 editor.setCustomRte({
   // ...
   /**
-   * The signature of the function is the same of the enable
+   * The signature of the function is the same of the `enable`
    */
   disable: function(el, rte) {
     el.contentEditable = false;
-    if (rte && rte.focusManager) {
+    rte?.focusManager?.blur(true);
-      rte.focusManager.blur(true);
-    }
   },
 });
 ```
@@ -84,15 +93,21 @@ editor.setCustomRte({
 The `focus()` method is just a helper used inside `enable()` and not required by the interface
 
 ```js
+const focus = (el, rte) => {
+  // Do nothing if already focused
+  if (rte?.focusManager?.hasFocus) {
+    return;
+  }
+  el.contentEditable = true;
+  rte?.focus();
+}
+
 editor.setCustomRte({
   // ...
-  focus: function (el, rte) {
+  enable: function (el, rte) {
-    // Do nothing if already focused
+    // ...
-    if (rte && rte.focusManager.hasFocus) {
+    focus(el, rte);
-      return;
+    // ...
-    }
-    el.contentEditable = true;
-    rte && rte.focus();
   },
 });
 ```