better-react-email-editor 0.1.3 → 0.1.6

package/dist/types/components/BetterEmailEditor.d.ts

@@ -17,6 +17,8 @@ export interface BetterEmailEditorProps extends Omit<EditorRootProps, 'children'
     showLayers?: boolean;
     /** Show the right sidebar. Default: true. */
     showSidebar?: boolean;
+    /** Show the subject and preview text fields above the email. Default: false. */
+    showEmailHeader?: boolean;
     /** Replace any part with your own component. */
     components?: BetterEmailEditorComponents;
     /** Props (className, style…) forwarded to each part. */

package/dist/types/components/BodyTab.d.ts

@@ -5,5 +5,5 @@ export type DocumentContext = Parameters<NonNullable<InspectorDocumentProps['chi
 export interface BodyTabProps extends StyleProps {
     ctx: DocumentContext;
 }
-/** "Body" tab: email-wide settings (background, width, default colors, preview text). */
+/** "Body" tab: email-wide settings (background, width, default font and colors, preview text). */
 export declare function BodyTab({ ctx, className, style }: BodyTabProps): import("react").JSX.Element;

package/dist/types/components/Canvas.d.ts

@@ -8,8 +8,10 @@ export interface CanvasProps extends StyleProps {
     bubbleMenu?: boolean;
     /** "/" command menu. `true` (default), `false`, or your own items. */
     slashCommands?: boolean | SlashCommandItem[];
+    /** Subject and preview text fields above the email. Default: false. */
+    header?: boolean;
     /** Extra content rendered inside the canvas scroll area. */
     children?: ReactNode;
 }
 /** The editable email. Scrolls on its own: give it a height through its parent or `style`. */
-export declare function Canvas({ overlay, bubbleMenu, slashCommands, className, style, children }: CanvasProps): import("react").JSX.Element;
+export declare function Canvas({ overlay, bubbleMenu, slashCommands, header, className, style, children }: CanvasProps): import("react").JSX.Element;

package/dist/types/components/EmailHeader.d.ts

@@ -0,0 +1,4 @@
+import { type StyleProps } from '../core/cx';
+export type EmailHeaderProps = StyleProps;
+/** Card with the subject line and the preview text, as an inbox shows them. */
+export declare function EmailHeader({ className, style }: EmailHeaderProps): import("react").JSX.Element;

package/dist/types/components/fields.d.ts

@@ -78,6 +78,15 @@ export interface SelectProps extends StyleProps {
     options: Array<[string, string]>;
 }
 export declare function Select({ value, onChange, options, className, style }: SelectProps): import("react").JSX.Element;
+export interface FontInputProps extends StyleProps {
+    /** A CSS `font-family` stack, or '' for none. */
+    value: string | undefined;
+    onChange: (value: string) => void;
+    /** Label of an extra first option that clears the font (''), e.g. "Default". */
+    emptyLabel?: string;
+}
+/** Font picker over the editor's `fonts`. Each option is drawn in its own font. */
+export declare function FontInput({ value, onChange, emptyLabel, className, style }: FontInputProps): import("react").JSX.Element;
 export interface SegmentedProps<T extends string> extends StyleProps {
     value: T;
     onChange: (value: T) => void;

package/dist/types/context.d.ts

@@ -2,10 +2,13 @@ import type { Editor, Extensions, JSONContent } from '@tiptap/core';
 import { type EditorThemeInput } from '@react-email/editor/plugins';
 import { type ReactNode } from 'react';
 import { type StyleProps } from './core/cx';
+import { type FontOption } from './core/fonts';
 import { type DragSession, type HoverStore } from './core/stores';
 import { type I18n, type Messages, type PartialMessages } from './i18n';
 import type { NodeDefinition, PaletteGroup, PaletteItem, TemplateItem } from './registry/types';
 export interface EmailSettings {
+    /** Subject line. Not part of the rendered HTML: send it with your email provider. */
+    subject?: string;
     /** Inbox preview line (shown after the subject). */
     previewText: string;
 }
@@ -43,6 +46,8 @@ export interface EmailEditorContextValue extends I18n {
     palette: PaletteItem[];
     paletteGroups: PaletteGroup[];
     templates: TemplateItem[];
+    /** Fonts offered by the font pickers. */
+    fonts: FontOption[];
     starterDocument: (i18n: I18n) => JSONContent;
     uploadImage: (file: File) => Promise<{
         url: string;
@@ -82,6 +87,8 @@ export interface EditorRootProps extends StyleProps {
     paletteGroups?: PaletteGroup[];
     /** Prebuilt rows of the "Blocks" tab. */
     templates?: TemplateItem[];
+    /** Fonts offered by the font pickers (Body tab and typography). Default: fonts installed with the main browsers. */
+    fonts?: FontOption[];
     /** Content loaded by the top bar's "Template" button. */
     starterDocument?: (i18n: I18n) => JSONContent;
     /** Extra Tiptap extensions, read on mount. */

package/dist/types/core/email-font.d.ts

@@ -0,0 +1,5 @@
+import type { Editor } from '@tiptap/core';
+/** Font chosen for the whole email, or '' when it uses the theme's (system) font. */
+export declare function getEmailFont(editor: Editor): string;
+/** Sets the default font of the email. '' goes back to the theme's font. */
+export declare function setEmailFont(editor: Editor, value: string): void;

package/dist/types/core/fonts.d.ts

@@ -0,0 +1,13 @@
+/** A font offered in the font pickers. `value` is a full CSS `font-family` stack. */
+export interface FontOption {
+    label: string;
+    value: string;
+}
+/**
+ * Fonts installed on virtually every device and supported by every email
+ * client, each with fallbacks. Single quotes only: the stack ends up in a
+ * `style` attribute.
+ */
+export declare const defaultFonts: FontOption[];
+/** The option whose first family matches `value` (quotes and fallbacks may differ). */
+export declare function findFont(fonts: FontOption[], value: string | undefined): FontOption | undefined;

package/dist/types/i18n/en.d.ts

@@ -44,6 +44,12 @@ export declare const en: {
         breadcrumb: string;
         selectedText: string;
     };
+    emailHeader: {
+        subject: string;
+        subjectPlaceholder: string;
+        previewText: string;
+        previewTextPlaceholder: string;
+    };
     body: {
         general: string;
         previewText: string;
@@ -57,6 +63,8 @@ export declare const en: {
         innerPadding: string;
         radius: string;
         defaultStyles: string;
+        font: string;
+        fontDefault: string;
         text: string;
         headings: string;
         links: string;
@@ -65,6 +73,8 @@ export declare const en: {
     };
     inspector: {
         typography: string;
+        font: string;
+        fontDefault: string;
         color: string;
         size: string;
         weight: string;

package/dist/types/i18n/index.d.ts

@@ -48,6 +48,12 @@ export declare const locales: {
             breadcrumb: string;
             selectedText: string;
         };
+        emailHeader: {
+            subject: string;
+            subjectPlaceholder: string;
+            previewText: string;
+            previewTextPlaceholder: string;
+        };
         body: {
             general: string;
             previewText: string;
@@ -61,6 +67,8 @@ export declare const locales: {
             innerPadding: string;
             radius: string;
             defaultStyles: string;
+            font: string;
+            fontDefault: string;
             text: string;
             headings: string;
             links: string;
@@ -69,6 +77,8 @@ export declare const locales: {
         };
         inspector: {
             typography: string;
+            font: string;
+            fontDefault: string;
             color: string;
             size: string;
             weight: string;
@@ -291,6 +301,12 @@ export declare const locales: {
             breadcrumb: string;
             selectedText: string;
         };
+        emailHeader: {
+            subject: string;
+            subjectPlaceholder: string;
+            previewText: string;
+            previewTextPlaceholder: string;
+        };
         body: {
             general: string;
             previewText: string;
@@ -304,6 +320,8 @@ export declare const locales: {
             innerPadding: string;
             radius: string;
             defaultStyles: string;
+            font: string;
+            fontDefault: string;
             text: string;
             headings: string;
             links: string;
@@ -312,6 +330,8 @@ export declare const locales: {
         };
         inspector: {
             typography: string;
+            font: string;
+            fontDefault: string;
             color: string;
             size: string;
             weight: string;

package/dist/types/index.d.ts

@@ -2,6 +2,7 @@ export { BetterEmailEditor, type BetterEmailEditorProps, type BetterEmailEditorC
 export { EditorRoot, useEmailEditor, useOptionalEmailEditor, useI18n, useMessages, defaultTheme, readFileAsDataUrl, type EditorRootProps, type EmailEditorHandle, type EmailEditorContextValue, type EmailValue, type EmailSettings, type EmailExport, type Device, } from './context';
 export { Canvas, type CanvasProps } from './components/Canvas';
 export { CanvasOverlay } from './components/CanvasOverlay';
+export { EmailHeader, type EmailHeaderProps } from './components/EmailHeader';
 export { TopBar, LayersToggle, UndoRedo, DeviceToggle, TemplateButton, ImportButton, ExportJsonButton, PreviewButton, ExportHtmlButton, type TopBarProps, type PreviewButtonProps, } from './components/TopBar';
 export { LayersPanel, type LayersPanelProps } from './components/LayersPanel';
 export { Sidebar, type SidebarProps } from './components/Sidebar';
@@ -22,7 +23,7 @@ export { SocialLinksInspector } from './components/inspectors/SocialLinksInspect
 export { ColumnsInspector } from './components/inspectors/ColumnsInspector';
 export { SpacerInspector, HtmlInspector, DividerInspector, ContainerInspector } from './components/inspectors/SimpleInspectors';
 export { TypographyGroup, SpacingGroup, BoxGroup, css, type TypographyGroupProps, type SpacingGroupProps, type BoxGroupProps, } from './components/inspectors/groups';
-export { Group, Field, TextInput, TextArea, NumberInput, RangeInput, ColorInput, Select, Segmented, AlignInput, PaddingInput, toHex, DEFAULT_SWATCHES, type GroupProps, type FieldProps, type TextInputProps, type TextAreaProps, type NumberInputProps, type RangeInputProps, type ColorInputProps, type SelectProps, type SegmentedProps, type AlignInputProps, type PaddingInputProps, type Side, } from './components/fields';
+export { Group, Field, TextInput, TextArea, NumberInput, RangeInput, FontInput, ColorInput, Select, Segmented, AlignInput, PaddingInput, toHex, DEFAULT_SWATCHES, type GroupProps, type FieldProps, type TextInputProps, type TextAreaProps, type NumberInputProps, type FontInputProps, type RangeInputProps, type ColorInputProps, type SelectProps, type SegmentedProps, type AlignInputProps, type PaddingInputProps, type Side, } from './components/fields';
 export * as icons from './components/icons';
 export { defaultNodes, textPreview, truncate } from './registry/default-nodes';
 export { defaultPalette, defaultPaletteGroups, menuParagraph } from './registry/default-palette';
@@ -34,4 +35,5 @@ export * as content from './core/content';
 export { BLOCK_CONTAINERS, COLUMN_PARENTS, appendBlocks, applyDrop, findDropTarget, selectedUnit, selectUnit, duplicateUnit, deleteUnit, parentUnit, unitAt, type BlockUnit, type DragPayload, type DropTarget, } from './core/dnd';
 export { EmailButton } from './core/paste';
 export { inlineStyleToObject } from './core/style-utils';
+export { defaultFonts, findFont, type FontOption } from './core/fonts';
 export { cx, type StyleProps } from './core/cx';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "better-react-email-editor",
-  "version": "0.1.3",
+  "version": "0.1.6",
   "description": "Drag & drop email builder for React (Unlayer-style), built on @react-email/editor. Modular components, English and French included.",
   "keywords": [
     "react",