@daisychainapp/maily-to-core 0.0.2-2.1

package/package.json

@@ -0,0 +1,111 @@
+{
+  "name": "@daisychainapp/maily-to-core",
+  "version": "0.0.22.1",
+  "description": "Powerful editor for creating beautiful, pre-designed, mobile-ready emails.",
+  "private": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**"
+  ],
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "browser": "./dist/index.mjs",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./blocks": {
+      "browser": "./dist/blocks/index.mjs",
+      "import": "./dist/blocks/index.mjs",
+      "require": "./dist/blocks/index.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/index.d.ts"
+      ],
+      "blocks": [
+        "dist/blocks/index.d.ts"
+      ]
+    }
+  },
+  "scripts": {
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist",
+    "build": "tsup"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/arikchakma/maily.to.git",
+    "directory": "packages/core"
+  },
+  "author": "Arik Chakma <arikchangma@gmail.com>",
+  "keywords": [
+    "tiptap",
+    "wysiwyg",
+    "maily.to",
+    "editor",
+    "react",
+    "email"
+  ],
+  "engines": {
+    "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",
+    "@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",
+    "clsx": "^2.1.1",
+    "fast-deep-equal": "^3.1.3",
+    "lucide-react": "^0.453.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"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/uuid": "^10.0.0",
+    "postcss": "^8.4.47",
+    "tailwind-config": "workspace:*",
+    "tsconfig": "workspace:*",
+    "typescript": "^5.6.3"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1"
+  },
+  "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

@@ -0,0 +1,121 @@
+<h1 align="center"><img height="150" src="https://maily.to/brand/icon.svg" /><br> @maily.to/core</h1>
+
+<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" />
+  </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>
+</p>
+
+> Currently, this package is under development. You can follow the progress [here](https://github.com/arikchakma/maily.to).
+
+## Installation
+
+```bash
+pnpm add @maily-to/core
+
+# for types
+pnpm add -D @tiptap/core
+```
+
+## Usage
+
+```tsx
+import { useState } from 'react';
+import { Editor } from '@maily-to/core';
+import type { Editor as TiptapEditor, JSONContent } from '@tiptap/core';
+
+type AppProps = {
+  contentJson: JSONContent;
+};
+
+function App(props: AppProps) {
+  const { contentJson: defaultContentJson } = props;
+  const [editor, setEditor] = useState<TiptapEditor>();
+
+  return (
+    <Editor
+      contentJson={defaultContentJson}
+      onCreate={setEditor}
+      onUpdate={setEditor}
+    />
+  );
+}
+```
+
+### Slash Commands
+
+Slash commands are a way to interact with the editor using `/` followed by a command name. For example, `/heading1` will convert the current paragraph to a heading 1.
+
+```tsx
+// (Omitted repeated imports)
+import { text, heading1 } from '@maily-to/core/blocks';
+
+<Editor
+  blocks={[text, heading1]}
+/>
+```
+
+> Note: The order of the blocks matters. It will be shown in the order you provide.
+
+### Variables
+
+By default, variables are required. You can make them optional by setting the `required` property to `false`. When a variable is optional and not provided, a placeholder will be displayed in its place.
+
+You can pass variables to the editor in two ways:
+
+1. As an Array of Objects:
+
+   For auto-suggestions of variables in the editor when you type `@`, pass the variables as an array of objects to the `variables` prop.
+
+   ```tsx
+   // (Omitted repeated imports)
+   <Editor
+     variableTriggerCharacter="@"
+     variables={[
+       {
+         name: 'currentDate',
+         required: false,
+       },
+     ]}
+   />
+   ```
+
+2. As a Function:
+
+   If the variables are dynamic and need to be generated based on the editor's state or other inputs, you can provide a function to the `variables` prop.
+
+   ```tsx
+   // (Omitted repeated imports)
+   <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 (for, variable)
+       // editor: the editor instance
+       if (from === 'for') {
+         // return variables for the For block `each` key
+         return [
+           { name: 'notifications' },
+           { name: 'comments' },
+         ];
+       }
+
+       return [
+         { name: 'currentDate' },
+         { name: 'currentTime', required: false },
+       ];
+     }}
+   />
+   ```
+
+> Keep it in mind that if you pass an array of variable object Maily will take care of the filtering based on the query. But if you pass a function you have to take care of the filtering.
+
+See the [@maily-to/render](../render) package for more information on how to render the editor content to HTML.
+
+## License
+
+MIT &copy; [Arik Chakma](https://twitter.com/imarikchakma)