@trycourier/react-designer 0.0.0-canary-20250424162557

package/README.md

@@ -0,0 +1,402 @@
+# Introduction
+
+The Courier Template editor is a package designed to facilitate the editing of templates in a multi-tenant environment. In platforms like Courier, where the application serves different users or clients (tenants) with unique configurations, this package makes it easy to edit and manage templates associated with specific tenants directly within your React application.
+
+## Key Features
+
+- **Embedded React Integration**
+    
+    Easily integrate the template editor directly into your existing React application.
+    
+- **Multi-Tenant Support**
+    
+    Seamlessly manage and edit templates for different tenants, each with their own branding.
+    
+- **Brand Editing**
+    
+    Customize branding elements such as logos, colors, and styles per tenant to ensure consistency with each client's identity.
+    
+- **Developer Friendly**
+    
+    Designed with intuitive APIs and flexible components to speed up development and integration.
+    
+
+# Getting Started
+
+## Installation
+
+```tsx
+npm install @trycourier/react-editor
+```
+
+or
+
+```tsx
+yarn add @trycourier/react-editor
+```
+
+## Authentication
+
+To use the Courier Editor, you'll need to authenticate your requests using a JWT token. For development environments, you can quickly get started with a client key, while JWT authentication is recommended for production deployments.
+
+### Generate a JWT
+
+**Scopes**
+
+The follow scopes are available for the editor:
+
+- `tenants:read`: allow the user to read all tenant data
+- `tenants:brand:read`: allow the user to read brand data for all tenants
+- `tenants:notifications:read`: allow the user to read all notification data for all tenants
+- `tenants:notifications:write`: allow the user to write all notification data for all tenants
+- `tenant:${TENANT_ID}:read` : allow the user to read tenant data for a specific tenant
+- `tenant:${TENANT_ID}:notification:read` : allow the user to write notification data for a specific tenant
+- `tenant:${TENANT_ID}:notification:write` : allow the user to write notification data for a specific tenant
+- `tenant:${TENANT_ID}:brand:read` : allow the user to read brand data for a specific tenant
+- `tenant:${TENANT_ID}:brand:write`: allow the user to write brand data for a specific tenant
+
+Here is a curl example with all the scopes needed that the SDK uses. Change the scopes to the scopes you need for your use case.
+
+**Example**
+
+This example will generate a JWT that has access to all tenants and tenant notifications
+
+```bash
+curl --request POST \
+     --url https://api.courier.com/auth/issue-token \
+     --header 'Accept: application/json' \
+     --header 'Authorization: Bearer $YOUR_AUTH_KEY' \
+     --header 'Content-Type: application/json' \
+     --data \
+ '{
+    "scope": "user_id:$YOUR_USER_ID tenants:read tenants:notifications:read tenants:notifications:write",
+    "expires_in": "$YOUR_NUMBER days"
+  }'
+
+```
+
+**Example**
+
+This example will generate a JWT that only has access to a specific tenant and it's notifications
+
+```bash
+curl --request POST \
+     --url https://api.courier.com/auth/issue-token \
+     --header 'Accept: application/json' \
+     --header 'Authorization: Bearer $YOUR_AUTH_KEY' \
+     --header 'Content-Type: application/json' \
+     --data \
+ '{
+    "scope": "user_id:$YOUR_USER_ID tenant:tenant-123:read tenant:tenant-123:notifications:read tenants:tenant-123:notifications:write",
+    "expires_in": "$YOUR_NUMBER days"
+  }'
+```
+
+**Example**
+
+This example will generate a JWT that gives a user access to change brand information for a specific tenant
+
+```bash
+curl --request POST \
+     --url https://api.courier.com/auth/issue-token \
+     --header 'Accept: application/json' \
+     --header 'Authorization: Bearer $YOUR_AUTH_KEY' \
+     --header 'Content-Type: application/json' \
+     --data \
+ '{
+    "scope": "user_id:$YOUR_USER_ID tenant:tenant-123:read tenant:tenant-123:brand:read tenant:tenant-123:brand:write",
+    "expires_in": "$YOUR_NUMBER days"
+  }'
+```
+
+## Editor Usage
+
+### Basic
+
+This basic setup provides a fully functional editor with default settings. The TemplateProvider component handles state management and provides necessary context to the Editor.
+
+As template changes are made, they are automatically saved to Courier.
+
+```tsx
+import { TemplateEditor, TemplateProvider } from '@trycourier/react-editor';
+
+function App() {
+  return (
+    <TemplateProvider templateId="template-123" tenantId="tenant-123" token="jwt">
+      <TemplateEditor />
+    </TemplateProvider>
+  );
+}
+```
+
+### Publishing Hook
+
+By default, the Courier template editor exposes a publish button that the template editor can interact with after completing changes. To override this default publishing behavior, you can hide the publishing button and interact with the publishing action directly allowing you to tightly integrate with your application's workflow.
+
+*Note:* `useTemplateActions` *must be used inside of the `<TemplateProvider />` context*
+
+```tsx
+import { TemplateEditor, TemplateProvider, useTemplateActions } from '@trycourier/react-editor';
+
+function SaveButtonComponent() {
+  const { publishTemplate } = useTemplateActions();
+  
+  const handlePublishTemplate = () => {
+	  //... other publish logic
+	  await publishTemplate();
+  }
+
+	return (
+		<TemplateProvider templateId="template-123" tenantId="tenant-123" token="jwt">
+      <TemplateEditor hidePublish />
+			<button onClick={handlePublishTemplate}>Save Template</button>;
+    </TemplateProvider>
+  );
+}
+```
+
+### Theming
+
+You can customize the look and feel through the theming API, which allows you to modify colors, and other visual elements via configuration.
+
+```tsx
+import { Editor, TemplateProvider } from '@trycourier/editor';
+
+function App() {
+  return (
+    <Editor
+      theme={{
+        background: '#ffffff',
+        foreground: '#292929',
+        muted: '#D9D9D9',
+        mutedForeground: '#A3A3A3',
+        popover: '#ffffff',
+        popoverForeground: '#292929',
+        border: '#DCDEE4',
+        input: '#DCDEE4',
+        card: '#FAF9F8',
+        cardForeground: '#292929',
+        primary: '#ffffff',
+        primaryForeground: '#696F8C',
+        secondary: '#F5F5F5',
+        secondaryForeground: '#171717',
+        accent: '#E5F3FF',
+        accentForeground: '#1D4ED8',
+        destructive: '#292929',
+        destructiveForeground: '#FF3363',
+        ring: '#80849D',
+        radius: '6px',
+      }}
+    />
+  );
+}
+```
+
+### Disabling Auto-save
+
+By default, the Courier Editor auto-saves content. To disable this feature, configure the provider as follows
+
+```tsx
+import { TemplateEditor, TemplateProvider, useTemplateActions } from '@trycourier/react-editor';
+
+function SaveButtonComponent() {
+  const { saveTemplate, publishTemplate } = useTemplateActions();
+  
+  const handleSaveTemplate = () => {
+	  //... other publish logic
+	  await saveTemplate(); // the template must be saved before publishing
+	  await publishTemplate();
+  }
+
+	return (
+		<TemplateProvider templateId="template-123" tenantId="tenant-123" token="jwt">
+      <TemplateEditor autoSave={false} hidePublish />
+			<button onClick={handleSaveTemplate}>Save Template</button>;
+    </TemplateProvider>
+  );
+}
+```
+
+## Brand Editor
+
+The Brand Editor component allows you to customize and manage a tenant's brand settings directly within your application. This specialized editor provides an interface for modifying brand colors, logos, and other visual elements that will be applied to your templates.
+
+### Basic
+
+Similar to the basic Template Editor setup, implementing the Brand Editor requires minimal configuration. The BrandProvider component handles state management and provides the necessary context to the Brand Editor component.
+
+```tsx
+import { BrandEditor, BrandProvider } from '@trycourier/editor';
+
+function App() {
+  return (
+    <BrandProvider tenantId="tenant-123" token="jwt">
+      <BrandEditor />
+    </BrandProvider>
+  );
+}
+```
+
+### Publishing Hook
+
+Similar to the Template Editor, the Brand Editor also provides a publishing hook that allows you to customize the publishing behavior. You can use the `useBrandActions` hook to programmatically trigger brand updates and integrate them with your application's workflow.
+
+*Note: `useBrandActions` must be used inside of the `<BrandProvider />` context*
+
+```tsx
+import { BrandEditor, BrandProvider, useBrandActions } from '@trycourier/editor';
+
+function SaveBrandComponent() {
+  const { publishBrand } = useBrandActions();
+  
+  const handlePublishBrand = () => {
+	  //... other publish logic
+	  await publishBrand();
+  }
+
+  return (
+    <BrandProvider tenantId="tenant-123" token="jwt | client key">
+      <BrandEditor hidePublish />
+      <button onClick={handlePublishBrand}>Save Brand</button>
+    </BrandProvider>
+  );
+}
+```
+
+# Properties
+
+The Properties section details the configuration options available for both the Editor and TemplateProvider components. These properties allow you to customize the behavior and functionality of the editor to match your specific requirements.
+
+### Template Editor Properties
+
+The Editor component is the core element that provides the template editing interface. If you are using the Template Editor with the Template provider, required properties will be provided.
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| autoSave | boolean | true | Enables automatic saving of changes to the template. When true, changes are automatically persisted. |
+| autoSaveDebounce | number | 200ms | Time in milliseconds to wait after changes before triggering an auto-save operation. Controls save frequency. |
+| brandEditor | boolean | false | When enabled, shows the brand editor interface alongside the template editor. Allows editing brand settings. |
+| brandProps | BrandEditorProps |  | Configuration options for the brand editor when enabled. Passed directly to the BrandEditor component. |
+| hidePublish | boolean | false | When true, hides the "Publish Changes" button in the editor interface. |
+| onChange | (value: ElementalContent) => void |  | Callback function that fires whenever the editor content changes, providing the updated ElementalContent structure. |
+| theme | ThemeObj | cssClass |  | Controls the visual appearance of the editor. Can be a Theme object with styling properties or a CSS class name. |
+| value | ElementalContent |  | Initial content for the editor in ElementalContent format. Used as the starting template when the editor loads. |
+| variables | Record<string, any |  | Custom variables available for template personalization. These can be referenced within the template content. |
+
+### Template Provider Properties
+
+The TemplateProvider component wraps the Editor component and manages the template state, authentication, and data flow. It provides essential context and functionality needed for the editor to operate. Below are the key properties that can be configured when using the 
+
+| Property | Type | Required | Description |
+| --- | --- | --- | --- |
+| templateId | string | Yes | Unique identifier for the template being edited. Required for loading and saving template data. |
+| tenantId | string | Yes | The tenant ID associated with the template. Used for brand theming and tenant-specific functionality. |
+| token | string | Yes | Authentication token (JWT or ClientKey) used to authorize API requests to Courier services. |
+
+### Brand Editor
+
+The Brand Editor component accepts properties that allow you to customize its behavior and appearance. These properties provide control over the editing interface and functionality specific to brand management.
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| autoSave | boolean | true | Enables automatic saving of changes to the template. When true, changes are automatically persisted. |
+| autoSaveDebounce | number | 200ms | Time in milliseconds to wait after changes before triggering an auto-save operation. Controls save frequency. |
+| hidePublish | boolean | false | When true, hides the "Publish Changes" button in the editor interface. |
+| onChange | (value: BrandSettings) => void |  | Callback function that fires whenever brand settings are modified, providing the updated brand configuration values. |
+| theme | ThemeObj | cssClass |  | Controls the visual appearance of the editor. Can be a Theme object with styling properties or a CSS class name. |
+| value | BrandSettings |  | Initial brand settings values to populate the editor with, including colors, logo, social links, and header style preferences. |
+| variables | Record<string, any |  | Custom variables available for brand personalization. These can be referenced within the brand footer content. |
+
+### Brand Provider
+
+The Brand Provider component is responsible for managing brand-related state and context in your application. It wraps the Brand Editor component and handles data flow, authentication, and state management for brand customization. Here are the key properties that can be configured:
+
+| Property | Type | Required | Description |
+| --- | --- | --- | --- |
+| tenantId | string | Yes | The unique identifier for the tenant whose brand settings are being edited. |
+| token | string | Yes | Authentication token (JWT or ClientKey) used to authorize brand-related API requests. |
+
+# Limitations
+
+**React Only**
+
+The Courier Editor is currently only compatible with React applications. This means you'll need to have a React-based frontend to integrate the editor into your application. Support for other frameworks like Vue.js or Angular may be considered in future releases based on community demand.
+
+Minimal supported React version is 18.2.0.
+
+**Email channel support only**
+
+Currently, the editor only supports creating and editing email templates. Support for additional channels like SMS, push notifications, and direct messages is currently under development and will be added in the next month or so.
+
+# Development
+
+## Scripts
+
+- `pnpm dev` - Starts the development environment
+- `pnpm build` - Builds the package
+- `pnpm test` - Runs tests
+- `pnpm lint` - Runs linting
+
+## Publishing to npm
+
+This package can be published to npm using the provided scripts. The publishing process includes version bumping, building, testing, and pushing changes to git.
+
+### Publishing workflow
+
+1. Make sure your changes are committed and your working directory is clean
+2. Run one of the release commands:
+   - `pnpm release` - Bumps patch version and publishes
+   - `pnpm release:patch` - Same as above
+   - `pnpm release:minor` - Bumps minor version and publishes
+   - `pnpm release:major` - Bumps major version and publishes
+   - `pnpm release:dry-run` - Simulates the release process without publishing
+   - `pnpm release:canary` - Creates a canary release with a unique tag
+
+The release script will:
+- Check if your working directory is clean
+- Build the package
+- Run tests
+- Bump the version (if not dry run)
+- Commit version changes and create a git tag (except for canary releases)
+- Publish to npm
+- Push changes and tags to git repository (except for canary releases)
+
+### Canary builds
+
+Canary builds are pre-release versions that allow users to test the latest changes without affecting the stable release. Each canary build is published with a unique npm tag based on the timestamp when it was created.
+
+#### Creating a canary build
+
+Run the canary release command:
+```sh
+pnpm release:canary
+```
+
+This will:
+- Generate a unique tag in the format `canary-{timestamp}`
+- Create a version like `0.0.1-canary-1718392847`
+- Publish to npm with the unique tag
+
+#### Installing a specific canary build
+
+To see all available canary builds:
+```sh
+npm dist-tag ls @trycourier/react-editor
+```
+
+To install a specific canary build:
+```sh
+# Example for a specific canary build
+npm install @trycourier/react-editor@canary-1718392847
+```
+
+### Manual publishing
+
+If you need more control over the publishing process:
+
+1. Build the package: `pnpm build`
+2. Run tests: `pnpm test`
+3. Bump version: `pnpm version patch|minor|major`
+4. Publish: `pnpm publish --access public`
+
+Note: You need to have npm publishing rights for the `@trycourier` organization to publish this package.

package/dist/cjs/index.css

@@ -0,0 +1,2 @@
+.ProseMirror{h1{@apply courier-text-3xl;}h2{@apply courier-text-2xl;}h3{@apply courier-text-xl;}h4{@apply courier-text-lg;}h5{@apply courier-text-base;}h6{@apply courier-text-sm;}h1,h2,h3,h4,h5,h6{@apply courier-font-bold first:courier-mt-0 last:courier-mb-0;}h1,h2,h3{@apply courier-mt-12;}h4,h5,h6{@apply courier-mt-8;}a.link{@apply courier-text-blue-700 courier-underline;}mark{@apply courier-bg-red-500 courier-rounded-sm courier-decoration-clone courier-text-inherit courier-py-1 courier-px-0 dark:courier-bg-red-400;}& img{@apply courier-h-auto courier-w-full courier-max-w-full;}[data-type=divider]{@apply courier-py-4 courier-transition-all courier-duration-100 courier-ease-in-out courier-cursor-pointer;&.ProseMirror-selectednode{@apply courier-bg-black/5 dark:courier-bg-white/10;hr{@apply courier-border-t-black/30 dark:courier-border-t-white/30;}}hr{@apply courier-border-0 courier-border-t courier-border-black/20 courier-bg-black/80 courier-m-0 courier-h-px;@apply dark:courier-border-white/20 dark:courier-bg-white/80;}}[data-type=emoji]{display:inline-block;img{width:1em;height:1em;object-fit:cover;display:block}}}.lightTheme{--background: #ffffff;--foreground: #292929;--muted: #D9D9D9;--muted-foreground: #A3A3A3;--popover: #ffffff;--popover-foreground: #292929;--border: #DCDEE4;--input: #DCDEE4;--card: #FAF9F8;--card-foreground: #292929;--primary: #ffffff;--primary-foreground: #696F8C;--secondary: #F5F5F5;--secondary-foreground: #171717;--accent: #E5F3FF;--accent-foreground: #1D4ED8;--destructive: #292929;--destructive-foreground: #FF3363;--ring: #80849D;--radius: 6px}.ProseMirror{>*:first-child,[data-type=column]>*{@apply first:courier-mt-0 last:courier-mb-0;}>*+*{margin-top:.75em}.node-imageUpload{@apply courier-rounded courier-border-2 courier-border-dotted courier-border-black courier-border-opacity-10 courier-p-2 dark:courier-border-neutral-500;transition:border .16s cubic-bezier(.45,.05,.55,.95);&:hover{@apply courier-border-opacity-30;}&:has(.is-active),&.has-focus{@apply courier-border-opacity-40;}}[data-type=columns]{&.has-focus [data-type=column],&:hover [data-type=column]{@apply courier-border-neutral-300 dark:courier-border-neutral-700;}[data-type=column].has-focus{@apply courier-border-neutral-400 dark:courier-border-neutral-600;}}[data-type=column]{@apply courier-rounded courier-border-2 courier-border-dotted courier-border-transparent courier-p-1;transition:border .16s cubic-bezier(.45,.05,.55,.95);&:hover{@apply courier-border-neutral-100 dark:courier-border-neutral-900;}&:has(.is-active),&.has-focus{@apply courier-border-neutral-100 dark:courier-border-neutral-900;}}.node-imageBlock{& img{@apply courier-border-2 courier-border-transparent courier-rounded-xl courier-overflow-hidden;}&:hover img{@apply courier-border-2 courier-border-neutral-100 dark:courier-border-neutral-900;}&:has(.is-active) img,&.has-focus img{@apply courier-border-2 courier-border-neutral-800 dark:courier-border-neutral-200;}}.node-aiWriter,.node-aiImage,.node-tableOfContentsNode{&.has-focus [data-node-view-wrapper]>*{@apply courier-shadow-[0_0_0_2px] courier-shadow-black/30 dark:courier-shadow-white/30 courier-transition-all courier-rounded-lg;}}.ProseMirror-gapcursor+.node-imageBlock,.ProseMirror-gapcursor+.node-imageUpload,.ProseMirror-gapcursor+.node-blockquote{@apply courier-outline-neutral-700 hover:courier-outline-neutral-600 dark:courier-outline-neutral-300 dark:hover:courier-outline-neutral-400;}}@tailwind base;@tailwind components;@tailwind utilities;@keyframes pop{0%{transform:scale(1);box-shadow:var(--box-shadow)}to{transform:scale(var(--scale));box-shadow:var(--box-shadow-picked-up)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.lightTheme{height:100%}@layer base{*{@apply courier-border-border courier-outline-ring;}body{@apply courier-font-sans courier-antialiased courier-bg-background courier-text-foreground;}}.courier-editor-container{@apply courier-relative courier-flex-1 courier-flex courier-flex-col courier-p-6 courier-overflow-y-auto courier-transition-all courier-duration-300 courier-ease-in-out;background:radial-gradient(#0A0A0A32 1px,transparent 1px);background-size:15px 15px}.courier-editor-sidebar{@apply courier-rounded-br-sm courier-border-border courier-bg-white courier-border-l courier-overflow-y-auto courier-h-full courier-transition-all courier-duration-300 courier-ease-in-out;}.courier-editor-loading{@apply courier-w-full courier-h-full courier-flex courier-items-center courier-justify-center courier-pb-10;}.courier-brand-editor-readonly{@apply courier-pointer-events-none;.ProseMirror{@apply courier-cursor-default courier-p-0;.react-renderer{@apply courier-cursor-default;&.node-paragraph{p{@apply courier-text-sm;}.is-empty{p{&:after{content:""}}}}.draggable-item{@apply courier-p-0;}}}}.courier-theme-editor-main{@apply courier-bg-white courier-rounded-lg courier-border courier-border-border courier-shadow-sm courier-max-w-2xl courier-select-none courier-self-center courier-w-full;>div{@apply courier-w-full;.ProseMirror{@apply courier-p-0;.react-renderer{&.node-paragraph{p{@apply courier-text-sm;}.is-empty{p{&:after{content:"Write footer text..."}}}&:hover{.draggable-item{>button{@apply courier-hidden;}}}.draggable-item{@apply courier-p-0;}}}}}}.courier-editor-main{@apply courier-bg-white courier-rounded-lg courier-border courier-border-border courier-shadow-sm courier-max-w-2xl courier-select-none courier-self-center courier-w-full;>div{@apply courier-w-full;}}.courier-editor-preview-mode{&.courier-editor-preview-mode-mobile{.courier-editor-main{@apply courier-max-w-sm;&:hover{>button{@apply courier-hidden;}}}}.ProseMirror{>.react-renderer{&.node-imageBlock,&.node-button,&.node-divider,&.node-paragraph,&.node-heading,&.node-blockquote{*{@apply courier-cursor-default courier-pointer-events-none;}[data-cypress=draggable-handle]{@apply courier-hidden;}&:hover,&:active{[data-cypress=draggable-handle]{@apply courier-hidden;}.node-element{>div,>hr,&.courier-empty-image{&:before{@apply courier-hidden;}}}}}&.node-imageBlock{.courier-empty-image{@apply courier-hidden;}}&.node-paragraph,&.node-blockquote{.is-empty{p,blockquote{&:after{@apply courier-hidden;}}}}&.node-heading{.is-empty{h1,h2,h3{&:after{@apply courier-hidden;}}}}}}}.ProseMirror{@apply courier-caret-black dark:courier-caret-white courier-outline-0 courier-pr-10 courier-pl-4 courier-py-10 courier-z-0 lg:courier-pl-2 lg:courier-pr-10 courier-max-w-2xl courier-h-full;.selection{@apply courier-inline;}.selection,*::selection{@apply courier-bg-black/10 dark:courier-bg-white/20 courier-inline;}>.react-renderer{@apply courier-my-12 first:courier-mt-0 last:courier-mb-0;&.node-divider{@apply courier-flex courier-flex-col courier-justify-center;}&.node-variable{@apply courier-inline-block courier-m-0;}&.node-dragPlaceholder{@apply courier-m-0;}&.node-paragraph{@apply courier-m-0;&:focus,&:focus-visible{outline:none}}&.node-paragraph,&.node-blockquote{p{>div{@apply courier-block courier-relative courier-cursor-text;&[contenteditable=true]{outline:none;caret-color:currentColor}}}.is-empty{p,blockquote{position:relative;&:after{content:"Write body text...";@apply courier-absolute courier-top-0 courier-left-0 courier-text-neutral-500 dark:courier-text-neutral-400 -courier-z-10;}}}}&.node-heading{h1,h2,h3{>div{@apply courier-block courier-relative courier-cursor-text;&[contenteditable=true]{outline:none;caret-color:currentColor}}}.is-empty{h1,h2,h3{position:relative;&:after{content:"Write heading...";@apply courier-absolute courier-top-0 courier-left-0 courier-text-neutral-500 dark:courier-text-neutral-400 -courier-z-10;}}}}&.node-imageBlock,&.node-button,&.node-divider,&.node-paragraph,&.node-heading,&.node-blockquote{@apply courier-m-0 courier-relative;[data-cypress=draggable-handle]{@apply courier-invisible;}&:hover,&:active{[data-cypress=draggable-handle]{@apply courier-visible;}.node-element{>div,>hr,&.courier-empty-image{&:before{@apply courier-left-[-12px] courier-right-[-12px] courier-top-0 courier-bottom-0 courier-rounded-md courier-border-2 courier-border-border courier-absolute courier-content-[""];}}}}.node-element{@apply courier-relative;&:focus,&:focus-visible{outline:none}}.selected-element{.node-element{@apply courier-relative courier-z-20;&:before{@apply courier-left-[-12px] courier-right-[-12px] courier-top-0 courier-bottom-0 courier-rounded-md courier-border courier-border-[#0085FF] courier-absolute courier-content-[""] -courier-z-10;}.node-element{&:before{@apply courier-hidden;}}}.courier-actions-panel{@apply courier-block;}}}&.node-blockquote{@apply courier-m-0;@apply courier-text-foreground;@apply dark:courier-text-white;&:hover,&:active{[data-cypress=draggable-handle]{@apply courier-visible;}.node-element{&:before{@apply courier-left-[-12px] courier-right-[-12px] courier-top-0 courier-bottom-0 courier-rounded-md !courier-border-2 !courier-border-border courier-absolute courier-content-[""] -courier-z-20;}>div{&:before{@apply courier-hidden;}}.node-element{&:before{@apply courier-hidden;}}}.selected-element{.node-element{.node-element{&:before{@apply courier-hidden -courier-z-20;}}}}}}}&.resize-cursor{@apply courier-cursor-col-resize;}.ProseMirror-gapcursor{@apply courier-relative courier-w-full courier-max-w-2xl courier-mx-auto;&:after{@apply courier-border-t-black/40 dark:courier-border-t-white/40 courier-w-full courier-top-[-1.5em] courier-max-w-2xl courier-mx-auto courier-left-0 courier-right-0;}}}[data-theme=slash-command]{@apply courier-w-full;}.tiptap{outline:none;:first-child{margin-top:0}ul,ol{padding:0 1rem;margin:1.25rem 1rem 1.25rem .4rem;li p{margin-top:.25em;margin-bottom:.25em}}h1,h2,h3,h4,h5,h6{line-height:1.1;margin-top:2.5rem;text-wrap:pretty}h1,h2{margin-top:3.5rem;margin-bottom:1.5rem}h1{font-size:1.4rem}h2{font-size:1.2rem}h3{font-size:1.1rem}h4,h5,h6{font-size:1rem}code{background-color:var(--purple-light);border-radius:.4rem;color:var(--black);font-size:.85rem;padding:.25em .3em}pre{background:var(--black);border-radius:.5rem;color:var(--white);font-family:JetBrainsMono,monospace;margin:1.5rem 0;padding:.75rem 1rem;code{background:none;color:inherit;font-size:.8rem;padding:0}}}@layer utilities{.animate-pop{animation:pop .2s cubic-bezier(.18,.67,.6,1.22)}.animate-fadeIn{animation:fadeIn .5s ease}.touch-transparent{-webkit-tap-highlight-color:transparent}.courier-editor-preview-mode{>div:first-child{flex-grow:1;width:100%}>div:last-child{width:0}}}
+/*# sourceMappingURL=index.css.map */

package/dist/cjs/index.css.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["css-file:/home/runner/work/courier-designer/courier-designer/packages/react-designer/src/components/typography.css", "css-file:/home/runner/work/courier-designer/courier-designer/packages/react-designer/src/components/generated/theme.css", "css-file:/home/runner/work/courier-designer/courier-designer/packages/react-designer/src/components/editor.css", "css-file:/home/runner/work/courier-designer/courier-designer/packages/react-designer/src/styles.css"],
+  "sourcesContent": [".ProseMirror {\n  /* p {\n    @apply leading-relaxed courier-my-3 first:courier-mt-0 last:courier-mb-0;\n  }\n\n  & > p {\n    @apply courier-my-6 first:courier-mt-0 last:courier-mb-0;\n  } */\n\n  h1 {\n    @apply courier-text-3xl;\n  }\n\n  h2 {\n    @apply courier-text-2xl;\n  }\n\n  h3 {\n    @apply courier-text-xl;\n  }\n\n  h4 {\n    @apply courier-text-lg;\n  }\n\n  h5 {\n    @apply courier-text-base;\n  }\n\n  h6 {\n    @apply courier-text-sm;\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    @apply courier-font-bold first:courier-mt-0 last:courier-mb-0;\n  }\n\n  h1,\n  h2,\n  h3 {\n    @apply courier-mt-12;\n  }\n\n  h4,\n  h5,\n  h6 {\n    @apply courier-mt-8;\n  }\n\n  a.link {\n    @apply courier-text-blue-700 courier-underline;\n  }\n\n  mark {\n    @apply courier-bg-red-500 courier-rounded-sm courier-decoration-clone courier-text-inherit courier-py-1 courier-px-0 dark:courier-bg-red-400;\n  }\n\n  & img {\n    @apply courier-h-auto courier-w-full courier-max-w-full;\n  }\n\n  [data-type=\"divider\"] {\n    @apply courier-py-4 courier-transition-all courier-duration-100 courier-ease-in-out courier-cursor-pointer;\n\n    &.ProseMirror-selectednode {\n      @apply courier-bg-black/5 dark:courier-bg-white/10;\n\n      hr {\n        @apply courier-border-t-black/30 dark:courier-border-t-white/30;\n      }\n    }\n\n    /* &:hover:not(&.ProseMirror-selectednode) {\n      @apply courier-bg-black/5;\n      @apply dark:courier-bg-white/10;\n    } */\n\n    hr {\n      @apply courier-border-0 courier-border-t courier-border-black/20 courier-bg-black/80 courier-m-0 courier-h-px;\n      @apply dark:courier-border-white/20 dark:courier-bg-white/80;\n    }\n  }\n\n  [data-type=\"emoji\"] {\n    display: inline-block;\n\n    img {\n      width: 1em;\n      height: 1em;\n      object-fit: cover;\n      display: block;\n    }\n  }\n}", ".lightTheme {\n  --background: #ffffff;\n  --foreground: #292929;\n  --muted: #D9D9D9;\n  --muted-foreground: #A3A3A3;\n  --popover: #ffffff;\n  --popover-foreground: #292929;\n  --border: #DCDEE4;\n  --input: #DCDEE4;\n  --card: #FAF9F8;\n  --card-foreground: #292929;\n  --primary: #ffffff;\n  --primary-foreground: #696F8C;\n  --secondary: #F5F5F5;\n  --secondary-foreground: #171717;\n  --accent: #E5F3FF;\n  --accent-foreground: #1D4ED8;\n  --destructive: #292929;\n  --destructive-foreground: #FF3363;\n  --ring: #80849D;\n  --radius: 6px;\n}\n", "@import \"./typography.css\";\n@import \"./generated/theme.css\";\n\n.ProseMirror {\n  /* .is-empty::before {\n    @apply courier-text-neutral-500 dark:courier-text-neutral-400;\n    content: attr(data-placeholder);\n    float: left;\n    height: 0;\n    pointer-events: none;\n    width: 100%;\n  } */\n\n  &>*:first-child,\n  [data-type=\"column\"]>* {\n    @apply first:courier-mt-0 last:courier-mb-0;\n  }\n\n  &>*+* {\n    margin-top: 0.75em;\n  }\n\n  .node-imageUpload {\n    @apply courier-rounded courier-border-2 courier-border-dotted courier-border-black courier-border-opacity-10 courier-p-2 dark:courier-border-neutral-500;\n    transition: border 160ms cubic-bezier(0.45, 0.05, 0.55, 0.95);\n\n    &:hover {\n      @apply courier-border-opacity-30;\n    }\n\n    &:has(.is-active),\n    &.has-focus {\n      @apply courier-border-opacity-40;\n    }\n  }\n\n  [data-type=\"columns\"] {\n\n    &.has-focus [data-type=\"column\"],\n    &:hover [data-type=\"column\"] {\n      @apply courier-border-neutral-300 dark:courier-border-neutral-700;\n    }\n\n    [data-type=\"column\"].has-focus {\n      @apply courier-border-neutral-400 dark:courier-border-neutral-600;\n    }\n  }\n\n  [data-type=\"column\"] {\n    @apply courier-rounded courier-border-2 courier-border-dotted courier-border-transparent courier-p-1;\n    transition: border 160ms cubic-bezier(0.45, 0.05, 0.55, 0.95);\n\n    &:hover {\n      @apply courier-border-neutral-100 dark:courier-border-neutral-900;\n    }\n\n    &:has(.is-active),\n    &.has-focus {\n      @apply courier-border-neutral-100 dark:courier-border-neutral-900;\n    }\n  }\n\n  .node-imageBlock {\n    & img {\n      @apply courier-border-2 courier-border-transparent courier-rounded-xl courier-overflow-hidden;\n    }\n\n    &:hover img {\n      @apply courier-border-2 courier-border-neutral-100 dark:courier-border-neutral-900;\n    }\n\n    &:has(.is-active) img,\n    &.has-focus img {\n      @apply courier-border-2 courier-border-neutral-800 dark:courier-border-neutral-200;\n    }\n  }\n\n  .node-aiWriter,\n  .node-aiImage,\n  .node-tableOfContentsNode {\n    &.has-focus [data-node-view-wrapper]>* {\n      @apply courier-shadow-[0_0_0_2px] courier-shadow-black/30 dark:courier-shadow-white/30 courier-transition-all courier-rounded-lg;\n    }\n  }\n\n  .ProseMirror-gapcursor+.node-imageBlock,\n  .ProseMirror-gapcursor+.node-imageUpload,\n  .ProseMirror-gapcursor+.node-blockquote {\n    @apply courier-outline-neutral-700 hover:courier-outline-neutral-600 dark:courier-outline-neutral-300 dark:hover:courier-outline-neutral-400;\n  }\n}", "@import \"./components/editor.css\";\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@keyframes pop {\n  0% {\n    transform: scale(1);\n    box-shadow: var(--box-shadow);\n  }\n\n  100% {\n    transform: scale(var(--scale));\n    box-shadow: var(--box-shadow-picked-up);\n  }\n}\n\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n.lightTheme {\n  height: 100%;\n}\n\n@layer base {\n  * {\n    @apply courier-border-border courier-outline-ring;\n    /* @apply courier-border-border courier-outline-ring/50; */\n  }\n\n  body {\n    @apply courier-font-sans courier-antialiased courier-bg-background courier-text-foreground;\n  }\n}\n\n.courier-editor-container {\n  @apply courier-relative courier-flex-1 courier-flex courier-flex-col courier-p-6 courier-overflow-y-auto courier-transition-all courier-duration-300 courier-ease-in-out;\n  background: radial-gradient(#0A0A0A32 1px, transparent 1px);\n  background-size: 15px 15px;\n}\n\n.courier-editor-sidebar {\n  @apply courier-rounded-br-sm courier-border-border courier-bg-white courier-border-l courier-overflow-y-auto courier-h-full courier-transition-all courier-duration-300 courier-ease-in-out;\n}\n\n.courier-editor-loading {\n  @apply courier-w-full courier-h-full courier-flex courier-items-center courier-justify-center courier-pb-10;\n}\n\n.courier-brand-editor-readonly {\n  @apply courier-pointer-events-none;\n\n  .ProseMirror {\n    @apply courier-cursor-default courier-p-0;\n\n    .react-renderer {\n      @apply courier-cursor-default;\n\n      &.node-paragraph {\n        p {\n          @apply courier-text-sm;\n        }\n\n        .is-empty {\n          p {\n            &::after {\n              content: '';\n            }\n          }\n        }\n      }\n\n      .draggable-item {\n        @apply courier-p-0;\n      }\n    }\n  }\n}\n\n.courier-theme-editor-main {\n  @apply courier-bg-white courier-rounded-lg courier-border courier-border-border courier-shadow-sm courier-max-w-2xl courier-select-none courier-self-center courier-w-full;\n\n  >div {\n    @apply courier-w-full;\n\n    .ProseMirror {\n      @apply courier-p-0;\n\n      .react-renderer {\n        &.node-paragraph {\n          p {\n            @apply courier-text-sm;\n          }\n\n          .is-empty {\n            p {\n              &::after {\n                content: 'Write footer text...';\n              }\n            }\n          }\n\n          &:hover {\n            .draggable-item {\n              >button {\n                @apply courier-hidden;\n              }\n            }\n          }\n\n          .draggable-item {\n            @apply courier-p-0;\n          }\n        }\n      }\n    }\n  }\n}\n\n.courier-editor-main {\n  @apply courier-bg-white courier-rounded-lg courier-border courier-border-border courier-shadow-sm courier-max-w-2xl courier-select-none courier-self-center courier-w-full;\n\n  >div {\n    @apply courier-w-full;\n  }\n}\n\n.courier-editor-preview-mode {\n  &.courier-editor-preview-mode-mobile {\n    .courier-editor-main {\n      @apply courier-max-w-sm;\n\n      &:hover {\n        >button {\n          @apply courier-hidden;\n        }\n      }\n    }\n  }\n\n  .ProseMirror {\n\n    &>.react-renderer {\n\n      &.node-imageBlock,\n      &.node-button,\n      &.node-divider,\n      &.node-paragraph,\n      &.node-heading,\n      &.node-blockquote {\n\n        * {\n          @apply courier-cursor-default courier-pointer-events-none;\n        }\n\n        [data-cypress=\"draggable-handle\"] {\n          @apply courier-hidden;\n        }\n\n        &:hover,\n        &:active {\n          [data-cypress=\"draggable-handle\"] {\n            @apply courier-hidden;\n          }\n\n          .node-element {\n\n            &>div,\n            &>hr,\n            &.courier-empty-image {\n              &::before {\n                @apply courier-hidden;\n              }\n            }\n          }\n        }\n      }\n\n      &.node-imageBlock {\n        .courier-empty-image {\n          @apply courier-hidden;\n        }\n      }\n\n      &.node-paragraph,\n      &.node-blockquote {\n        .is-empty {\n\n          p,\n          blockquote {\n            &::after {\n              @apply courier-hidden;\n            }\n          }\n        }\n      }\n\n      &.node-heading {\n        .is-empty {\n\n          h1,\n          h2,\n          h3 {\n            &::after {\n              @apply courier-hidden;\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\n.ProseMirror {\n  @apply courier-caret-black dark:courier-caret-white courier-outline-0 courier-pr-10 courier-pl-4 courier-py-10 courier-z-0 lg:courier-pl-2 lg:courier-pr-10 courier-max-w-2xl courier-h-full;\n\n  .selection {\n    @apply courier-inline;\n  }\n\n  .selection,\n  *::selection {\n    @apply courier-bg-black/10 dark:courier-bg-white/20 courier-inline;\n  }\n\n  &>.react-renderer {\n    @apply courier-my-12 first:courier-mt-0 last:courier-mb-0;\n\n    &.node-divider {\n      @apply courier-flex courier-flex-col courier-justify-center;\n    }\n\n    &.node-variable {\n      @apply courier-inline-block courier-m-0;\n    }\n\n    &.node-dragPlaceholder {\n      @apply courier-m-0;\n    }\n\n    &.node-paragraph {\n      @apply courier-m-0;\n\n      &:focus,\n      &:focus-visible {\n        outline: none;\n      }\n    }\n\n    &.node-paragraph,\n    &.node-blockquote {\n\n      p {\n        >div {\n          @apply courier-block courier-relative courier-cursor-text;\n\n          &[contenteditable=\"true\"] {\n            outline: none;\n            caret-color: currentColor;\n          }\n        }\n      }\n\n      .is-empty {\n\n        p,\n        blockquote {\n          position: relative;\n\n          &::after {\n            content: 'Write body text...';\n            @apply courier-absolute courier-top-0 courier-left-0 courier-text-neutral-500 dark:courier-text-neutral-400 -courier-z-10;\n          }\n        }\n      }\n    }\n\n    &.node-heading {\n\n      h1,\n      h2,\n      h3 {\n        >div {\n          @apply courier-block courier-relative courier-cursor-text;\n\n          &[contenteditable=\"true\"] {\n            outline: none;\n            caret-color: currentColor;\n          }\n        }\n      }\n\n      .is-empty {\n\n        h1,\n        h2,\n        h3 {\n          position: relative;\n\n          &::after {\n            content: 'Write heading...';\n            @apply courier-absolute courier-top-0 courier-left-0 courier-text-neutral-500 dark:courier-text-neutral-400 -courier-z-10;\n          }\n        }\n      }\n    }\n\n\n    &.node-imageBlock,\n    &.node-button,\n    &.node-divider,\n    &.node-paragraph,\n    &.node-heading,\n    &.node-blockquote {\n      @apply courier-m-0 courier-relative;\n\n      [data-cypress=\"draggable-handle\"] {\n        @apply courier-invisible;\n      }\n\n      &:hover,\n      &:active {\n        [data-cypress=\"draggable-handle\"] {\n          @apply courier-visible;\n        }\n\n        .node-element {\n\n          &>div,\n          &>hr,\n          &.courier-empty-image {\n            &::before {\n              @apply courier-left-[-12px] courier-right-[-12px] courier-top-0 courier-bottom-0 courier-rounded-md courier-border-2 courier-border-border courier-absolute courier-content-[''];\n            }\n          }\n        }\n      }\n\n      .node-element {\n        @apply courier-relative;\n\n        &:focus,\n        &:focus-visible {\n          outline: none;\n        }\n      }\n\n      .selected-element {\n        .node-element {\n          @apply courier-relative courier-z-20;\n\n          &::before {\n            @apply courier-left-[-12px] courier-right-[-12px] courier-top-0 courier-bottom-0 courier-rounded-md courier-border courier-border-[#0085FF] courier-absolute courier-content-[''] -courier-z-10;\n          }\n\n          .node-element {\n            &::before {\n              @apply courier-hidden;\n            }\n          }\n        }\n\n        .courier-actions-panel {\n          @apply courier-block;\n        }\n      }\n    }\n\n    &.node-blockquote {\n      @apply courier-m-0;\n      @apply courier-text-foreground;\n      @apply dark:courier-text-white;\n\n      &:hover,\n      &:active {\n        [data-cypress=\"draggable-handle\"] {\n          @apply courier-visible;\n        }\n\n        .node-element {\n          &::before {\n            @apply courier-left-[-12px] courier-right-[-12px] courier-top-0 courier-bottom-0 courier-rounded-md !courier-border-2 !courier-border-border courier-absolute courier-content-[''] -courier-z-20;\n          }\n\n          &>div {\n            &::before {\n              @apply courier-hidden;\n            }\n          }\n\n          .node-element {\n            &::before {\n              @apply courier-hidden;\n            }\n          }\n        }\n\n        .selected-element {\n          .node-element {\n            .node-element {\n              &::before {\n                @apply courier-hidden -courier-z-20;\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n\n  &.resize-cursor {\n    @apply courier-cursor-col-resize;\n  }\n\n  .ProseMirror-gapcursor {\n    @apply courier-relative courier-w-full courier-max-w-2xl courier-mx-auto;\n\n    &:after {\n      @apply courier-border-t-black/40 dark:courier-border-t-white/40 courier-w-full courier-top-[-1.5em] courier-max-w-2xl courier-mx-auto courier-left-0 courier-right-0;\n    }\n  }\n}\n\n[data-theme=\"slash-command\"] {\n  @apply courier-w-full;\n}\n\n/* Basic editor styles */\n.tiptap {\n  outline: none;\n\n  :first-child {\n    margin-top: 0;\n  }\n\n  /* List styles */\n  ul,\n  ol {\n    padding: 0 1rem;\n    margin: 1.25rem 1rem 1.25rem 0.4rem;\n\n    li p {\n      margin-top: 0.25em;\n      margin-bottom: 0.25em;\n    }\n  }\n\n  /* Heading styles */\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    line-height: 1.1;\n    margin-top: 2.5rem;\n    text-wrap: pretty;\n  }\n\n  h1,\n  h2 {\n    margin-top: 3.5rem;\n    margin-bottom: 1.5rem;\n  }\n\n  h1 {\n    font-size: 1.4rem;\n  }\n\n  h2 {\n    font-size: 1.2rem;\n  }\n\n  h3 {\n    font-size: 1.1rem;\n  }\n\n  h4,\n  h5,\n  h6 {\n    font-size: 1rem;\n  }\n\n  /* Code and preformatted text styles */\n  code {\n    background-color: var(--purple-light);\n    border-radius: 0.4rem;\n    color: var(--black);\n    font-size: 0.85rem;\n    padding: 0.25em 0.3em;\n  }\n\n  pre {\n    background: var(--black);\n    border-radius: 0.5rem;\n    color: var(--white);\n    font-family: \"JetBrainsMono\", monospace;\n    margin: 1.5rem 0;\n    padding: 0.75rem 1rem;\n\n    code {\n      background: none;\n      color: inherit;\n      font-size: 0.8rem;\n      padding: 0;\n    }\n  }\n\n  /* hr {\n    border: none;\n    border-top: 1px solid var(--gray-2);\n    margin: 2rem 0;\n  } */\n}\n\n@layer utilities {\n  .animate-pop {\n    animation: pop 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);\n  }\n\n  .animate-fadeIn {\n    animation: fadeIn 500ms ease;\n  }\n\n  .touch-transparent {\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  .courier-editor-preview-mode {\n    &>div:first-child {\n      flex-grow: 1;\n      width: 100%;\n    }\n\n    &>div:last-child {\n      width: 0;\n    }\n  }\n}"],
+  "mappings": "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",
+  "names": []
+}