Remove CKEditor from demos

src/app/(demos)/demo-mjml/DemoEditor.tsx

@@ -1,36 +1,38 @@
-'use client'
+"use client";
 
 import GrapesDemoEditor from "../GrapesEditor";
 import { components, plugins, pluginsOpts } from "./utils";
 
 const info = {
-    name: 'GrapesJS MJML Newsletter Builder',
-    repoLink: 'https://github.com/GrapesJS/mjml',
-    repoName: 'MJML Preset',
+  name: "GrapesJS MJML Newsletter Builder",
+  repoLink: "https://github.com/GrapesJS/mjml",
+  repoName: "MJML Preset",
 };
 
 const config = {
-    storageManager: {
-        options: {
-            local: { key: 'gjsProjectMjml' }
-        }
+  storageManager: {
+    options: {
+      local: { key: "gjsProjectMjml" },
     },
-    styleManager: {},
+  },
+  styleManager: {},
 };
 
 export default function DemoEditorNewsletter() {
-    return (
-        <>
-            <script src="https://unpkg.com/[email protected]"></script>
-            <script src="https://unpkg.com/[email protected]"></script>
-            <link rel="stylesheet" href="/assets/styles/grapesjs/grapesjs-preset-mjml.css"/>
-            <GrapesDemoEditor
-                components={components}
-                plugins={plugins}
-                pluginsOpts={pluginsOpts}
-                info={info}
-                config={config}
-            />
-        </>
-    )
-}
+  return (
+    <>
+      <script src="https://unpkg.com/[email protected]"></script>
+      <link
+        rel="stylesheet"
+        href="/assets/styles/grapesjs/grapesjs-preset-mjml.css"
+      />
+      <GrapesDemoEditor
+        components={components}
+        plugins={plugins}
+        pluginsOpts={pluginsOpts}
+        info={info}
+        config={config}
+      />
+    </>
+  );
+}

src/app/(demos)/demo-mjml/utils.ts

@@ -75,45 +75,16 @@ export const components = `
 `;
 
 export const plugins = [
-    'grapesjs-mjml',
-    'grapesjs-plugin-ckeditor',
-    pluginDemo,
-    (editor: any) => {
-        editor.onReady(() => {
-            const pnm = editor.Panels;
+  "grapesjs-mjml",
+  pluginDemo,
+  (editor: any) => {
+    editor.onReady(() => {
+      const pnm = editor.Panels;
 
-            // Show borders by default
-            pnm.getButton('options', 'sw-visibility').set('active', true);
-
-            // Wait for CKEDITOR load
-            setTimeout(() => {
-                const { CKEDITOR } = window as any;
-                if (CKEDITOR) {
-                    CKEDITOR.dtd.$editable.a = 1;
-                }
-            }, 300);
-        });
-    }
+      // Show borders by default
+      pnm.getButton("options", "sw-visibility").set("active", true);
+    });
+  },
 ];
 
-export const pluginsOpts = {
-  'grapesjs-plugin-ckeditor': {
-    onToolbar: (el: any) => {
-      el.style.minWidth = '350px';
-    },
-    options: {
-      startupFocus: true,
-      extraAllowedContent: '*(*);*{*}', // Allows any class and any inline style
-      allowedContent: true, // Disable auto-formatting, class removing, etc.
-      enterMode: 2, // CKEDITOR.ENTER_BR,
-      extraPlugins: 'sharedspace,justify,colorbutton,panelbutton,font',
-      toolbar: [
-        { name: 'styles', items: ['Font', 'FontSize' ] },
-        ['Bold', 'Italic', 'Underline', 'Strike'],
-        {name: 'paragraph', items : [ 'NumberedList', 'BulletedList']},
-        {name: 'links', items: ['Link', 'Unlink']},
-        {name: 'colors', items: [ 'TextColor', 'BGColor' ]},
-      ],
-    }
-  }
-};
+export const pluginsOpts = {};

src/app/(demos)/demo-newsletter-editor/DemoEditor.tsx

@@ -1,36 +1,38 @@
-'use client'
+"use client";
 
 import GrapesDemoEditor from "../GrapesEditor";
 import { components, plugins, pluginsOpts } from "./utils";
 
 const info = {
-    name: 'GrapesJS Newsletter Builder',
-    repoLink: 'https://github.com/GrapesJS/preset-newsletter',
-    repoName: 'Newsletter Preset',
+  name: "GrapesJS Newsletter Builder",
+  repoLink: "https://github.com/GrapesJS/preset-newsletter",
+  repoName: "Newsletter Preset",
 };
 
 const config = {
-    storageManager: {
-        options: {
-            local: { key: 'gjsProjectNl' }
-        }
+  storageManager: {
+    options: {
+      local: { key: "gjsProjectNl" },
     },
-    styleManager: {},
+  },
+  styleManager: {},
 };
 
 export default function DemoEditorNewsletter() {
-    return (
-        <>
-            <script src="https://unpkg.com/[email protected]"></script>
-            <script src="https://unpkg.com/[email protected]"></script>
-            <link rel="stylesheet" href="/assets/styles/grapesjs/grapesjs-preset-newsletter.css"/>
-            <GrapesDemoEditor
-                components={components}
-                plugins={plugins}
-                pluginsOpts={pluginsOpts}
-                info={info}
-                config={config}
-            />
-        </>
-    )
-}
+  return (
+    <>
+      <script src="https://unpkg.com/[email protected]"></script>
+      <link
+        rel="stylesheet"
+        href="/assets/styles/grapesjs/grapesjs-preset-newsletter.css"
+      />
+      <GrapesDemoEditor
+        components={components}
+        plugins={plugins}
+        pluginsOpts={pluginsOpts}
+        info={info}
+        config={config}
+      />
+    </>
+  );
+}

src/app/(demos)/demo-newsletter-editor/utils.ts

@@ -420,59 +420,32 @@ export const components = `
 `;
 
 export const plugins = [
-    'grapesjs-preset-newsletter',
-    'grapesjs-plugin-ckeditor',
-    pluginDemo,
-    (editor: any) => {
-        editor.onReady(() => {
-            const pnm = editor.Panels;
+  "grapesjs-preset-newsletter",
+  pluginDemo,
+  (editor: any) => {
+    editor.onReady(() => {
+      const pnm = editor.Panels;
 
-            // Show borders by default
-            pnm.getButton('options', 'sw-visibility').set('active', true);
-
-            // Wait for CKEDITOR load
-            setTimeout(() => {
-                const { CKEDITOR } = window as any;
-                if (CKEDITOR) {
-                    CKEDITOR.dtd.$editable.a = 1;
-                }
-            }, 300);
-        });
-    }
+      // Show borders by default
+      pnm.getButton("options", "sw-visibility").set("active", true);
+    });
+  },
 ];
 
 export const pluginsOpts = {
-    'grapesjs-preset-newsletter': {
-      modalLabelImport: 'Paste all your code here below and click import',
-      modalLabelExport: 'Copy the code and use it wherever you want',
-      codeViewerTheme: 'material',
-      importPlaceholder: '<table class="table"><tr><td class="cell">Hello world!</td></tr></table>',
-      cellStyle: {
-        'font-size': '12px',
-        'font-weight': 300,
-        'vertical-align': 'top',
-        color: 'rgb(111, 119, 125)',
-        margin: 0,
-        padding: 0,
-      }
+  "grapesjs-preset-newsletter": {
+    modalLabelImport: "Paste all your code here below and click import",
+    modalLabelExport: "Copy the code and use it wherever you want",
+    codeViewerTheme: "material",
+    importPlaceholder:
+      '<table class="table"><tr><td class="cell">Hello world!</td></tr></table>',
+    cellStyle: {
+      "font-size": "12px",
+      "font-weight": 300,
+      "vertical-align": "top",
+      color: "rgb(111, 119, 125)",
+      margin: 0,
+      padding: 0,
     },
-    'grapesjs-plugin-ckeditor': {
-      onToolbar: (el: any) => {
-        el.style.minWidth = '350px';
-      },
-      options: {
-        startupFocus: true,
-        extraAllowedContent: '*(*);*{*}', // Allows any class and any inline style
-        allowedContent: true, // Disable auto-formatting, class removing, etc.
-        enterMode: 2, // CKEDITOR.ENTER_BR,
-        extraPlugins: 'sharedspace,justify,colorbutton,panelbutton,font',
-        toolbar: [
-          { name: 'styles', items: ['Font', 'FontSize' ] },
-          ['Bold', 'Italic', 'Underline', 'Strike'],
-          {name: 'paragraph', items : [ 'NumberedList', 'BulletedList']},
-          {name: 'links', items: ['Link', 'Unlink']},
-          {name: 'colors', items: [ 'TextColor', 'BGColor' ]},
-        ],
-      }
-    }
-  };
+  },
+};