feat(theming): theming was improved

Author: vepsala

README.md

@@ -2,23 +2,18 @@
 
 A React-based email template editor component that allows users to create and customize email templates through a visual interface. This component can be embedded in any React application.
 
-## Overview
-
-React Email Editor is a comprehensive solution for creating email templates with a drag-and-drop interface. It's built as a reusable React component that can be easily integrated into your applications.
-
 ## Features
 
 - Visual email template builder
 - Rich set of components (text, buttons, images, dividers, containers, columns, etc.)
 - Markdown support for text editing
 - Responsive email templates
-- Customizable themes
-- Export to HTML
+- Embeddable into React applications
 
 ## Installation
 
 ```bash
-npm install kontakto-email-editor
+npm install @kontakto/email-template-editor
 ```
 
 ## Usage
@@ -28,7 +23,7 @@ npm install kontakto-email-editor
 You can easily embed the EmailEditor into any React application:
 
 ```jsx
-import { EmailEditor } from 'kontakto-email-editor';
+import { EmailEditor } from '@kontakto/email-template-editor';
 
 function MyApp() {
   return (
@@ -62,6 +57,7 @@ function MyApp() {
 | `deleteTemplate` | function | - | Deletes a template: `(id) => void` |
 | `copyTemplate` | function | - | Copies a template: `(name, content) => void` |
 | `saveAs` | function | - | Saves template with new name: `(name, content) => Promise<{id, name}>` |
+| `theme` | object | theme.ts | Custom theme for the EmailEditor, must be a Material UI theme object |
 
 #### Imperative API
 
@@ -114,30 +110,8 @@ This will start a development server with the EmailEditor running as a standalon
 
 ## Theming
 
-The EmailEditor component does not include its own ThemeProvider, allowing you to integrate it with your application's theme. To apply a theme to the EmailEditor, wrap it with MUI's ThemeProvider:
-
-```jsx
-import React from 'react';
-import { ThemeProvider, CssBaseline } from '@mui/material';
-import { EmailEditor } from 'kontakto-email-editor';
-import { createTheme } from '@mui/material/styles';
-
-// Create your custom theme or import it
-const theme = createTheme({
-  // Your theme options
-});
+The EmailEditor component has the CssBaseline and ThemeProvider components from Material UI applied by default. However, if you need to supply a custom theme, you can do so by passing a custom theme to the EmailEditor component. The theme should be a Material UI theme object.
 
-const MyApp = () => {
-  return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      <EmailEditor />
-    </ThemeProvider>
-  );
-};
-```
-
-For reference, you can copy the default theme implementation from the `src/theme.ts` file in the package and customize it according to your application's design system.
 
 ## Development
 
@@ -161,7 +135,6 @@ To run this locally:
 - `src/app/` - Main application components
 - `src/email-builder/` - Email template rendering
 - `src/core/` - Core utilities and types
-- `src/configuration/` - Configuration options
 
 ## Technologies
 
@@ -172,31 +145,25 @@ To run this locally:
 - Vite as the build tool
 - Marked and Highlight.js for markdown and code highlighting
 
-# Kontakto-Email-Editor
+# Email-Template-Editor
 
 Licensed under the MIT License. See `LICENSE` for details.
 
-This project, Kontakto-Email-Editor, is a substantial derivative work based on an original MIT-licensed project, `email-builder-js` by Waypoint (Metaccountant, Inc.).  `email-builder-js` is a free and open-source block-based email template builder designed for developers to create emails with JSON or HTML output. While the original code was created by Waypoint, this project has been significantly refactored with:
+This project, Email-Template-Editor, is a substantial derivative work based on an original MIT-licensed project, `email-builder-js` by Waypoint (Metaccountant, Inc.).  `email-builder-js` is a free and open-source block-based email template builder designed for developers to create emails with JSON or HTML output. While the original code was created by Waypoint, this project has been significantly refactored with:
 
-1.  Complete restructuring of the project files and directories.
+1.  Restructuring of the project files and directories.
 2.  Implementation of how external context is handled.
-3.  Changes to the core purpose - from a standalone email builder to an embeddable email editor component for React projects.
+3.  Changes to the purpose of the project to be integrated and embedded into other React based projects.
 
 ## Original Code from Waypoint (Metaccountant, Inc.)
 
-The following parts of this project are derived from the original MIT-licensed project `email-builder-js` by Waypoint:
-
-*   The core parsing logic is based on Waypoint's original block-based parsing approach
-*   The initial concepts for the block structure of the email content
-
-## New Code and Modifications by Kontakto Oy
-
-The following parts of this project are entirely new or represent significant modifications by Kontakto Oy:
+The following parts (not limited to) of this project are derived from the original MIT-licensed project `email-builder-js` by Waypoint:
 
-*  Kontakto significantly restructured the project, so it is now embeddable email editor component as a single NPM package, rather than a set of multiple NPM packages.
-*  External context handling mechanism has been implemented.
-*  The core purpose of the project has been changed from a standalone email builder to an embeddable email editor component for React projects.
+*   The parsing logic is based on Waypoint's original block-based parsing approach
+*   The concepts for the blocks
+*   The concepts for the editor
+*   The concepts of the builder
 
 ## Acknowledgements
 
-This project gratefully acknowledges the original work by Waypoint (Metaccountant, Inc.) on `email-builder-js` as the foundation upon which this enhanced and refactored version was built. Without their initial effort in creating `email-builder-js`, this project would not have been possible.
+This project gratefully acknowledges the original work by Waypoint (Metaccountant, Inc.) on `email-builder-js` as the foundation upon which this version was built.

index.html

@@ -7,7 +7,7 @@
     <link rel="icon" type="image/png" sizes="16x16" href="/src/favicon/favicon-16x16.png" />
     <meta name="viewport" content="width=900" />
     <meta name="description" content="EmailBuilder.js interactive playground. Brought to you by Waypoint." />
-    <title>EmailBuilder.js &mdash; Free and Open Source Template Builder</title>
+    <title>Email Template Editor</title>
     <style>
       html {
         margin: 0px;

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@kontakto/react-email-editor",
+  "name": "@kontakto/email-template-editor",
   "version": "1.1.1",
   "type": "module",
   "main": "dist/index.js",

src/app/email-canvas/import-json/import-json-dialog.tsx

@@ -52,7 +52,7 @@ export default function ImportJsonDialog({ onClose }: ImportJsonDialogProps) {
       >
         <DialogContent>
           <Typography color="text.secondary" paragraph>
-            Copy and paste an EmailBuilder.js JSON (
+            Copy and paste an JSON (
             <Link
               href="https://gist.githubusercontent.com/jordanisip/efb61f56ba71bd36d3a9440122cb7f50/raw/30ea74a6ac7e52ebdc309bce07b71a9286ce2526/emailBuilderTemplate.json"
               target="_blank"

src/app/index.tsx

@@ -1,5 +1,8 @@
 import React, { forwardRef, useImperativeHandle, useEffect } from 'react';
-import { Stack, useTheme } from '@mui/material';
+import { Stack, useTheme, ThemeProvider } from '@mui/material';
+import { Theme } from '@mui/material/styles';
+import defaultTheme from '../theme';
+import { CssBaseline } from '@mui/material';
 
 import { TEditorConfiguration } from '@editor/core';
 import { 
@@ -96,6 +99,11 @@ export interface EmailEditorProps {
    * Callback to save a template with a new name.
    */
   saveAs?: (templateName: string, content: any) => Promise<{id: string, name: string}>;
+  /**
+   * Optional theme override. If not provided, the default theme will be used.
+   * This allows for easy styling without requiring a separate ThemeProvider.
+   */
+  theme?: Theme;
 }
 
 function useDrawerTransition(cssProperty: 'margin-left' | 'margin-right', open: boolean) {
@@ -200,6 +208,7 @@ const EmailEditor = forwardRef<EmailEditorRef, EmailEditorProps>((props, ref) =>
     deleteTemplate,
     copyTemplate,
     saveAs,
+    theme,
   } = props;
 
   // Initialize with the provided template and settings
@@ -213,31 +222,34 @@ const EmailEditor = forwardRef<EmailEditorRef, EmailEditorProps>((props, ref) =>
   }, [initialTemplate, persistenceEnabled]);
 
   return (
-    <div style={{ height: '100%', overflow: 'auto' }}>
-      <SnackbarProvider>
-        <EmailEditorProvider 
-          initialTemplate={initialTemplate}
-          initialTemplateId={initialTemplateId}
-          initialTemplateName={initialTemplateName}
-          onSave={onSave}
-          onChange={onChange}
-        >
-          <EmailEditorInternal 
-            ref={ref} 
-            drawerEnterDuration={drawerEnterDuration}
-            drawerExitDuration={drawerExitDuration}
-            samplesDrawerEnabled={samplesDrawerEnabled}
-            minHeight={minHeight}
-            loadSamples={loadSamples}
-            loadTemplates={loadTemplates}
-            loadTemplate={loadTemplate}
-            deleteTemplate={deleteTemplate}
-            copyTemplate={copyTemplate}
-            saveAs={saveAs}
-          />
-        </EmailEditorProvider>
-      </SnackbarProvider>
-    </div>
+    <ThemeProvider theme={theme || defaultTheme}>
+            <CssBaseline />
+      <div style={{ height: '100%', overflow: 'auto' }}>
+        <SnackbarProvider>
+          <EmailEditorProvider 
+            initialTemplate={initialTemplate}
+            initialTemplateId={initialTemplateId}
+            initialTemplateName={initialTemplateName}
+            onSave={onSave}
+            onChange={onChange}
+          >
+            <EmailEditorInternal 
+              ref={ref} 
+              drawerEnterDuration={drawerEnterDuration}
+              drawerExitDuration={drawerExitDuration}
+              samplesDrawerEnabled={samplesDrawerEnabled}
+              minHeight={minHeight}
+              loadSamples={loadSamples}
+              loadTemplates={loadTemplates}
+              loadTemplate={loadTemplate}
+              deleteTemplate={deleteTemplate}
+              copyTemplate={copyTemplate}
+              saveAs={saveAs}
+            />
+          </EmailEditorProvider>
+        </SnackbarProvider>
+      </div>
+    </ThemeProvider>
   );
 });
 

src/app/templates-drawer/index.tsx

@@ -158,9 +158,6 @@ export default function SamplesDrawer({
         variant="persistent"
         anchor="left"
         open={samplesDrawerOpen}
-        componentsProps={{
-          backdrop: { style: { position: "absolute" } },
-        }}
         PaperProps={{
           style: { position: "absolute" },
         }}