@daisychainapp/maily-to-core 0.1.3 → 0.2.8

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@daisychainapp/maily-to-core",
-  "version": "0.1.3",
+  "type": "module",
+  "version": "0.2.8",
   "description": "Powerful editor for creating beautiful, pre-designed, mobile-ready emails.",
   "private": false,
-  "main": "./dist/index.js",
+  "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "files": [
@@ -12,20 +13,102 @@
   "exports": {
     "./package.json": "./package.json",
     ".": {
-      "browser": "./dist/index.mjs",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "node": {
+        "import": {
+          "types": "./dist/index.d.ts",
+          "default": "./dist/index.mjs"
+        },
+        "require": {
+          "types": "./dist/index.d.ts",
+          "default": "./dist/index.cjs"
+        }
+      },
+      "browser": {
+        "import": {
+          "types": "./dist/index.d.ts",
+          "default": "./dist/index.mjs"
+        },
+        "require": {
+          "types": "./dist/index.d.ts",
+          "default": "./dist/index.cjs"
+        }
+      },
+      "default": {
+        "import": {
+          "types": "./dist/index.d.ts",
+          "default": "./dist/index.mjs"
+        },
+        "require": {
+          "types": "./dist/index.d.ts",
+          "default": "./dist/index.cjs"
+        }
+      }
     },
     "./blocks": {
-      "browser": "./dist/blocks/index.mjs",
-      "import": "./dist/blocks/index.mjs",
-      "require": "./dist/blocks/index.js"
+      "node": {
+        "import": {
+          "types": "./dist/blocks/index.d.ts",
+          "default": "./dist/blocks/index.mjs"
+        },
+        "require": {
+          "types": "./dist/blocks/index.d.ts",
+          "default": "./dist/blocks/index.cjs"
+        }
+      },
+      "browser": {
+        "import": {
+          "types": "./dist/blocks/index.d.ts",
+          "default": "./dist/blocks/index.mjs"
+        },
+        "require": {
+          "types": "./dist/blocks/index.d.ts",
+          "default": "./dist/blocks/index.cjs"
+        }
+      },
+      "default": {
+        "import": {
+          "types": "./dist/blocks/index.d.ts",
+          "default": "./dist/blocks/index.mjs"
+        },
+        "require": {
+          "types": "./dist/blocks/index.d.ts",
+          "default": "./dist/blocks/index.cjs"
+        }
+      }
     },
     "./extensions": {
-      "browser": "./dist/extensions/index.mjs",
-      "import": "./dist/extensions/index.mjs",
-      "require": "./dist/extensions/index.js"
-    }
+      "node": {
+        "import": {
+          "types": "./dist/extensions/index.d.ts",
+          "default": "./dist/extensions/index.mjs"
+        },
+        "require": {
+          "types": "./dist/extensions/index.d.ts",
+          "default": "./dist/extensions/index.cjs"
+        }
+      },
+      "browser": {
+        "import": {
+          "types": "./dist/extensions/index.d.ts",
+          "default": "./dist/extensions/index.mjs"
+        },
+        "require": {
+          "types": "./dist/extensions/index.d.ts",
+          "default": "./dist/extensions/index.cjs"
+        }
+      },
+      "default": {
+        "import": {
+          "types": "./dist/extensions/index.d.ts",
+          "default": "./dist/extensions/index.mjs"
+        },
+        "require": {
+          "types": "./dist/extensions/index.d.ts",
+          "default": "./dist/extensions/index.cjs"
+        }
+      }
+    },
+    "./style.css": "./dist/index.css"
   },
   "typesVersions": {
     "*": {
@@ -63,60 +146,55 @@
     "node": ">=18.0.0"
   },
   "dependencies": {
-    "@radix-ui/react-dropdown-menu": "^2.1.2",
-    "@radix-ui/react-popover": "^1.1.2",
-    "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-tooltip": "^1.1.3",
-    "@tiptap/core": "^2.9.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.6",
+    "@radix-ui/react-popover": "^1.1.6",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.1.8",
+    "@tiptap/core": "^2.11.5",
     "@tiptap/extension-code-block-lowlight": "^2.11.5",
-    "@tiptap/extension-color": "^2.9.1",
-    "@tiptap/extension-document": "^2.9.1",
-    "@tiptap/extension-dropcursor": "^2.9.1",
-    "@tiptap/extension-focus": "^2.9.1",
-    "@tiptap/extension-heading": "^2.9.1",
-    "@tiptap/extension-horizontal-rule": "^2.9.1",
-    "@tiptap/extension-image": "^2.9.1",
-    "@tiptap/extension-link": "^2.9.1",
-    "@tiptap/extension-list-item": "^2.9.1",
-    "@tiptap/extension-mention": "^2.9.1",
-    "@tiptap/extension-paragraph": "^2.9.1",
-    "@tiptap/extension-placeholder": "^2.9.1",
-    "@tiptap/extension-text-align": "^2.9.1",
-    "@tiptap/extension-text-style": "^2.9.1",
-    "@tiptap/extension-underline": "^2.9.1",
-    "@tiptap/pm": "^2.9.1",
-    "@tiptap/react": "^2.9.1",
-    "@tiptap/starter-kit": "^2.9.1",
-    "@tiptap/suggestion": "^2.9.1",
+    "@tiptap/extension-color": "^2.11.5",
+    "@tiptap/extension-document": "^2.11.5",
+    "@tiptap/extension-dropcursor": "^2.11.5",
+    "@tiptap/extension-focus": "^2.11.5",
+    "@tiptap/extension-heading": "^2.11.5",
+    "@tiptap/extension-horizontal-rule": "^2.11.5",
+    "@tiptap/extension-image": "^2.11.5",
+    "@tiptap/extension-link": "^2.11.5",
+    "@tiptap/extension-list-item": "^2.11.5",
+    "@tiptap/extension-mention": "^2.11.5",
+    "@tiptap/extension-paragraph": "^2.11.5",
+    "@tiptap/extension-placeholder": "^2.11.5",
+    "@tiptap/extension-text-align": "^2.11.5",
+    "@tiptap/extension-text-style": "^2.11.5",
+    "@tiptap/extension-underline": "^2.11.5",
+    "@tiptap/pm": "^2.11.5",
+    "@tiptap/react": "^2.11.5",
+    "@tiptap/starter-kit": "^2.11.5",
+    "@tiptap/suggestion": "^2.11.5",
     "clsx": "^2.1.1",
     "fast-deep-equal": "^3.1.3",
     "highlight.js": "^11.11.1",
     "lowlight": "^3.3.0",
-    "lucide-react": "^0.453.0",
+    "lucide-react": "^0.483.0",
     "react-colorful": "^5.6.1",
     "tailwind-merge": "^2.5.4",
     "tailwindcss": "^3.4.14",
     "tippy.js": "^6.3.7",
-    "uuid": "^10.0.0",
-    "y-prosemirror": "^1.2.15"
+    "uuid": "^11.1.0",
+    "y-prosemirror": "^1.3.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.12",
-    "@types/uuid": "^10.0.0",
-    "postcss": "^8.4.47",
+    "@types/react": "^18.3.18",
+    "postcss": "^8.5.3",
+    "postcss-replace": "^2.0.1",
     "tailwind-config": "workspace:*",
     "tsconfig": "workspace:*",
-    "typescript": "^5.6.3"
+    "typescript": "^5.8.2"
   },
   "peerDependencies": {
-    "react": "^18.3.1"
+    "react": "^18 || ^19"
   },
   "publishConfig": {
     "access": "public"
-  },
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/arikchakma/maily.to/issues"
-  },
-  "homepage": "https://github.com/arikchakma/maily.to#readme"
+  }
 }

package/readme.md

@@ -2,11 +2,11 @@
 
 <p align="center">
   <a href="https://github.com/arikchakma/maily.to/blob/main/license">
-    <img src="https://img.shields.io/badge/License-MIT-yellow.svg" />
+    <img src="https://img.shields.io/badge/License-MIT-222222.svg" />
   </a>
   <a href="https://maily.to">
-    	<img src="https://img.shields.io/badge/%E2%9C%A8-Get%20Editor-0a0a0a.svg?style=flat&colorA=0a0a0a" alt="Get Maily Editor" />
-    </a>
+    <img src="https://img.shields.io/badge/%E2%9C%A8-Get%20Editor-0a0a0a.svg?style=flat&colorA=0a0a0a" alt="Get Maily Editor" />
+  </a>
 </p>
 
 > Currently, this package is under development. You can follow the progress [here](https://github.com/arikchakma/maily.to).
@@ -23,6 +23,8 @@ pnpm add -D @tiptap/core
 ## Usage
 
 ```tsx
+import '@maily-to/core/style.css';
+
 import { useState } from 'react';
 import { Editor } from '@maily-to/core';
 import type { Editor as TiptapEditor, JSONContent } from '@tiptap/core';
@@ -149,13 +151,17 @@ You can pass variables to the editor in two ways:
 
    ```tsx
    // (Omitted repeated imports)
+   import { VariableExtension, getVariableSuggestions } from '@maily-to/core/extensions';
+
    <Editor
-     variableTriggerCharacter="@"
-     variables={[
-       {
-         name: 'currentDate',
-         required: false,
-       },
+     extensions={[
+       VariableExtension.configure({
+         suggestions: getVariableSuggestions('@'),
+         variables: [{
+            name: 'currentTime',
+            required: false,
+         }],
+       }),
      ]}
    />
    ```
@@ -166,26 +172,32 @@ You can pass variables to the editor in two ways:
 
    ```tsx
    // (Omitted repeated imports)
+   import { VariableExtension, getVariableSuggestions } from '@maily-to/core/extensions';
+
    <Editor
-     variableTriggerCharacter="@"
-     variables={({ query, from, editor }) => {
-       // magic goes here
-       // query: the text after the trigger character
-       // from: the context from where the variables are requested (repeat, variable)
-       // editor: the editor instance
-       if (from === 'repeat-variable') {
-         // return variables for the Repeat block `each` key
-         return [
-           { name: 'notifications' },
-           { name: 'comments' },
-         ];
-       }
-
-       return [
-         { name: 'currentDate' },
-         { name: 'currentTime', required: false },
-       ];
-     }}
+     extensions={[
+       VariableExtension.configure({
+         suggestions: getVariableSuggestions('@'),
+         variables: ({ query, from, editor }) => {
+           // magic goes here
+           // query: the text after the trigger character
+           // from: the context from where the variables are requested (repeat, variable)
+           // editor: the editor instance
+           if (from === 'repeat-variable') {
+             // return variables for the Repeat block `each` key
+             return [
+               { name: 'notifications' },
+               { name: 'comments' },
+             ];
+           }
+
+           return [
+             { name: 'currentDate' },
+             { name: 'currentTime', required: false },
+           ];
+         },
+       }),
+     ]}
    />
    ```
 
@@ -217,11 +229,7 @@ import { MailyKit, VariableExtension, getVariableSuggestions } from '@maily-to/c
         });
       },
     }).configure({
-      suggestions: getVariableSuggestions(
-        variables,
-        variableTriggerCharacter,
-        variableListComponent, // optional custom component for variable list
-      ),
+      suggestions: getVariableSuggestions(variableTriggerCharacter),
     }),
   ]}
 />
@@ -242,8 +250,58 @@ import { CustomExtension } from './extensions/custom-extension';
 />
 ```
 
+### Image Upload
+
+To enable image upload, you need to pass the `ImageUploadExtension` extension to the editor. The `onImageUpload` function will be called when an image is being uploaded. You can use this function to upload the image to your server and return the URL.
+
+```tsx
+// (Omitted repeated imports)
+import { ImageUploadExtension } from '@maily-to/core/extensions';
+
+<Editor
+  extensions={[
+    ImageUploadExtension.configure({
+      onImageUpload: async (file) => {
+        // upload the image to wherever you want
+        const url = await uploadImage(file);
+        return url;
+      },
+    }),
+  ]}
+/>
+```
+
 See the [@maily-to/render](../render) package for more information on how to render the editor content to HTML.
 
+<br/>
+
+## Sponsors
+
+Sponsorship at any level is appreciated and encouraged. If you built a paid product using Maily, consider one of the [sponsorship tiers](https://github.com/sponsors/arikchakma).
+
+<br/>
+
+<h3 align="center">Gold</h3>
+
+<table align="center" style="justify-content: center;align-items: center;display: flex;">
+  <tr>
+    <td align="center">
+      <p></p>
+      <p></p>
+      <a href="https://novu.co?ref=maily.to">
+        <picture height="60px">
+          <source media="(prefers-color-scheme: dark)" srcset="https://github.com/user-attachments/assets/5e2b9ef1-5ded-4863-995d-62c7e40f946a">
+          <img alt="Novu Logo" height="60px" src="https://github.com/user-attachments/assets/d2fdaf14-2211-4946-ab67-a4ce547aabc0">
+        </picture>
+      </a>
+      <p></p>
+      <p></p>
+    </td>
+  </tr>
+</table>
+
+<br/>
+
 ## License
 
 MIT &copy; [Arik Chakma](https://twitter.com/imarikchakma)