email-builder-online 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +36 -6
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -1,10 +1,40 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Email Builder - Editor Sample
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
This project provides a sample implementation of an email builder, demonstrating how to integrate and use the various building blocks and features. It allows users to design and customize email templates with a drag-and-drop interface.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## Usage
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
- `npx vite`
|
|
7
|
+
To use the email builder, simply include the web component in your HTML. The component exposes several properties that can be used to customize its behavior and appearance.
|
|
9
8
|
|
|
10
|
-
|
|
9
|
+
```html
|
|
10
|
+
<div id="email-builder-container"></div>
|
|
11
|
+
<script type="module">
|
|
12
|
+
import EmailBuilder from './dist/email-builder.js';
|
|
13
|
+
|
|
14
|
+
const container = document.getElementById('email-builder-container');
|
|
15
|
+
|
|
16
|
+
EmailBuilder({
|
|
17
|
+
primaryColor: '#FF5733',
|
|
18
|
+
secondaryColor: '#33FF57',
|
|
19
|
+
galleryImages: true,
|
|
20
|
+
freeMode: false,
|
|
21
|
+
darkMode: true,
|
|
22
|
+
heightContent: '800px',
|
|
23
|
+
stickyHeader: true,
|
|
24
|
+
disableSticky: false,
|
|
25
|
+
});
|
|
26
|
+
</script>
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Available Props
|
|
30
|
+
|
|
31
|
+
The `EmailBuilder` component accepts the following props:
|
|
32
|
+
|
|
33
|
+
- `primaryColor`: (string, default: `#058705`) Sets the primary color theme of the builder.
|
|
34
|
+
- `secondaryColor`: (string, default: `#079707`) Sets the secondary color theme of the builder.
|
|
35
|
+
- `galleryImages`: (boolean, default: `false`) Enables or disables the image gallery feature.
|
|
36
|
+
- `freeMode`: (boolean, default: `true`) If `true`, allows free-form editing; if `false`, imposes stricter design constraints.
|
|
37
|
+
- `darkMode`: (boolean, default: `false`) Enables or disables dark mode.
|
|
38
|
+
- `heightContent`: (string, default: `calc(80dvh - 80px)`) Sets the height of the content area.
|
|
39
|
+
- `stickyHeader`: (boolean, default: `true`) Enables or disables the sticky header.
|
|
40
|
+
- `disableSticky`: (boolean, default: `false`) Disables all sticky elements within the builder.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "email-builder-online",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.cjs",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
@@ -16,7 +16,8 @@
|
|
|
16
16
|
"scripts": {
|
|
17
17
|
"build-library": "vite build --lib --entry=src/index.ts --name=EmailBuilder --fileName=index",
|
|
18
18
|
"dev": "vite",
|
|
19
|
-
|
|
19
|
+
"build": "tsup src/index.tsx --format cjs,esm --dts",
|
|
20
|
+
"build-vite": "vite build",
|
|
20
21
|
"preview": "vite preview",
|
|
21
22
|
"staticBuild": "esbuild build.js --bundle --outfile=build/email-builder.js --loader:.js=tsx --loader:.svg=dataurl --loader:.ttf=dataurl --format=esm",
|
|
22
23
|
"copy-to-maildrill": "cp -f ./build/email-builder.js ../../../maildrill/resources/js/components/email-builder.js && cp -f ./build/email-builder.css ../../../maildrill/resources/css/email-builder.css",
|