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: '
',
- 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:
+ '',
+ 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
+ },
+};