diff --git a/src/app/(demos)/demo-mjml/DemoEditor.tsx b/src/app/(demos)/demo-mjml/DemoEditor.tsx index 0d31689..5a2a36d 100644 --- a/src/app/(demos)/demo-mjml/DemoEditor.tsx +++ b/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 ( - <> - - - - - - ) -} \ No newline at end of file + return ( + <> + + + + + ); +} diff --git a/src/app/(demos)/demo-mjml/utils.ts b/src/app/(demos)/demo-mjml/utils.ts index 977903c..21cad7a 100644 --- a/src/app/(demos)/demo-mjml/utils.ts +++ b/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' ]}, - ], - } - } -}; \ No newline at end of file +export const pluginsOpts = {}; diff --git a/src/app/(demos)/demo-newsletter-editor/DemoEditor.tsx b/src/app/(demos)/demo-newsletter-editor/DemoEditor.tsx index 9648ed6..79c0fc2 100644 --- a/src/app/(demos)/demo-newsletter-editor/DemoEditor.tsx +++ b/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 ( - <> - - - - - - ) -} \ No newline at end of file + return ( + <> + + + + + ); +} diff --git a/src/app/(demos)/demo-newsletter-editor/utils.ts b/src/app/(demos)/demo-newsletter-editor/utils.ts index ba52220..175a5c6 100644 --- a/src/app/(demos)/demo-newsletter-editor/utils.ts +++ b/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: '
Hello world!
', - 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: + '
Hello world!
', + 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' ]}, - ], - } - } - }; \ No newline at end of file + }, +};