@singleton-sd/post-kit-editor 0.3.0

package/dist/canvas/blocks/EmailLayoutEditor.js

@@ -0,0 +1,80 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = EmailLayoutEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const EditorBlock_1 = require("../EditorBlock");
+const editor_context_1 = require("../editor-context");
+const EditorChildrenIds_1 = __importDefault(require("../helpers/EditorChildrenIds"));
+function getFontFamily(fontFamily) {
+    const f = fontFamily ?? 'MODERN_SANS';
+    switch (f) {
+        case 'MODERN_SANS':
+            return '"Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif';
+        case 'BOOK_SANS':
+            return 'Optima, Candara, "Noto Sans", source-sans-pro, sans-serif';
+        case 'ORGANIC_SANS':
+            return 'Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif';
+        case 'GEOMETRIC_SANS':
+            return 'Avenir, "Avenir Next LT Pro", Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif';
+        case 'HEAVY_SANS':
+            return 'Bahnschrift, "DIN Alternate", "Franklin Gothic Medium", "Nimbus Sans Narrow", sans-serif-condensed, sans-serif';
+        case 'ROUNDED_SANS':
+            return 'ui-rounded, "Hiragino Maru Gothic ProN", Quicksand, Comfortaa, Manjari, "Arial Rounded MT Bold", Calibri, source-sans-pro, sans-serif';
+        case 'MODERN_SERIF':
+            return 'Charter, "Bitstream Charter", "Sitka Text", Cambria, serif';
+        case 'BOOK_SERIF':
+            return '"Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif';
+        case 'MONOSPACE':
+            return '"Nimbus Mono PS", "Courier New", "Cutive Mono", monospace';
+    }
+}
+function EmailLayoutEditor(props) {
+    const childrenIds = props.childrenIds ?? [];
+    const document = (0, editor_context_1.useDocument)();
+    const currentBlockId = (0, EditorBlock_1.useCurrentBlockId)();
+    const patchDocument = (0, editor_context_1.usePatchDocument)();
+    const setSelectedBlockId = (0, editor_context_1.useSetSelectedBlockId)();
+    return ((0, jsx_runtime_1.jsx)("div", { onClick: (event) => {
+            if (event.target === event.currentTarget) {
+                setSelectedBlockId(null);
+            }
+        }, style: {
+            backgroundColor: props.backdropColor ?? '#F5F5F5',
+            color: props.textColor ?? '#262626',
+            fontFamily: getFontFamily(props.fontFamily),
+            fontSize: '16px',
+            fontWeight: '400',
+            letterSpacing: '0.15008px',
+            lineHeight: '1.5',
+            margin: '0',
+            padding: '32px 0',
+            width: '100%',
+            minHeight: '100%',
+        }, children: (0, jsx_runtime_1.jsx)("table", { align: "center", width: "100%", style: {
+                margin: '0 auto',
+                maxWidth: '600px',
+                backgroundColor: props.canvasColor ?? '#FFFFFF',
+                borderRadius: props.borderRadius ?? undefined,
+                border: props.borderColor ? `1px solid ${props.borderColor}` : undefined,
+            }, role: "presentation", cellSpacing: 0, cellPadding: 0, border: 0, children: (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)("tr", { style: { width: '100%' }, children: (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)(EditorChildrenIds_1.default, { childrenIds: childrenIds, onChange: ({ block, blockId, childrenIds: nextChildrenIds }) => {
+                                const currentBlock = document[currentBlockId];
+                                if (!currentBlock || currentBlock.type !== 'EmailLayout') {
+                                    return;
+                                }
+                                patchDocument({
+                                    [blockId]: block,
+                                    [currentBlockId]: {
+                                        type: 'EmailLayout',
+                                        data: {
+                                            ...currentBlock.data,
+                                            childrenIds: nextChildrenIds,
+                                        },
+                                    },
+                                });
+                                setSelectedBlockId(blockId);
+                            } }) }) }) }) }) }));
+}
+//# sourceMappingURL=EmailLayoutEditor.js.map

package/dist/canvas/blocks/EmailLayoutEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailLayoutEditor.js","sourceRoot":"","sources":["../../../src/canvas/blocks/EmailLayoutEditor.tsx"],"names":[],"mappings":"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"}

package/dist/canvas/blocks/EmailLayoutPropsSchema.d.ts

@@ -0,0 +1,28 @@
+import { z } from 'zod';
+declare const EmailLayoutPropsSchema: z.ZodObject<{
+    backdropColor: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+    borderColor: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+    borderRadius: z.ZodNullable<z.ZodOptional<z.ZodNumber>>;
+    canvasColor: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+    textColor: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+    fontFamily: z.ZodOptional<z.ZodNullable<z.ZodEnum<["MODERN_SANS", "BOOK_SANS", "ORGANIC_SANS", "GEOMETRIC_SANS", "HEAVY_SANS", "ROUNDED_SANS", "MODERN_SERIF", "BOOK_SERIF", "MONOSPACE"]>>>;
+    childrenIds: z.ZodNullable<z.ZodOptional<z.ZodArray<z.ZodString, "many">>>;
+}, "strip", z.ZodTypeAny, {
+    childrenIds?: string[] | null | undefined;
+    backdropColor?: string | null | undefined;
+    borderColor?: string | null | undefined;
+    borderRadius?: number | null | undefined;
+    canvasColor?: string | null | undefined;
+    textColor?: string | null | undefined;
+    fontFamily?: "MODERN_SANS" | "BOOK_SANS" | "ORGANIC_SANS" | "GEOMETRIC_SANS" | "HEAVY_SANS" | "ROUNDED_SANS" | "MODERN_SERIF" | "BOOK_SERIF" | "MONOSPACE" | null | undefined;
+}, {
+    childrenIds?: string[] | null | undefined;
+    backdropColor?: string | null | undefined;
+    borderColor?: string | null | undefined;
+    borderRadius?: number | null | undefined;
+    canvasColor?: string | null | undefined;
+    textColor?: string | null | undefined;
+    fontFamily?: "MODERN_SANS" | "BOOK_SANS" | "ORGANIC_SANS" | "GEOMETRIC_SANS" | "HEAVY_SANS" | "ROUNDED_SANS" | "MODERN_SERIF" | "BOOK_SERIF" | "MONOSPACE" | null | undefined;
+}>;
+export default EmailLayoutPropsSchema;
+export type EmailLayoutProps = z.infer<typeof EmailLayoutPropsSchema>;

package/dist/canvas/blocks/EmailLayoutPropsSchema.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const zod_1 = require("zod");
+const COLOR_SCHEMA = zod_1.z
+    .string()
+    .regex(/^#[0-9a-fA-F]{6}$/)
+    .nullable()
+    .optional();
+const FONT_FAMILY_SCHEMA = zod_1.z
+    .enum([
+    'MODERN_SANS',
+    'BOOK_SANS',
+    'ORGANIC_SANS',
+    'GEOMETRIC_SANS',
+    'HEAVY_SANS',
+    'ROUNDED_SANS',
+    'MODERN_SERIF',
+    'BOOK_SERIF',
+    'MONOSPACE',
+])
+    .nullable()
+    .optional();
+const EmailLayoutPropsSchema = zod_1.z.object({
+    backdropColor: COLOR_SCHEMA,
+    borderColor: COLOR_SCHEMA,
+    borderRadius: zod_1.z.number().optional().nullable(),
+    canvasColor: COLOR_SCHEMA,
+    textColor: COLOR_SCHEMA,
+    fontFamily: FONT_FAMILY_SCHEMA,
+    childrenIds: zod_1.z.array(zod_1.z.string()).optional().nullable(),
+});
+exports.default = EmailLayoutPropsSchema;
+//# sourceMappingURL=EmailLayoutPropsSchema.js.map

package/dist/canvas/blocks/EmailLayoutPropsSchema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailLayoutPropsSchema.js","sourceRoot":"","sources":["../../../src/canvas/blocks/EmailLayoutPropsSchema.ts"],"names":[],"mappings":";;AAAA,6BAAwB;AAExB,MAAM,YAAY,GAAG,OAAC;KACnB,MAAM,EAAE;KACR,KAAK,CAAC,mBAAmB,CAAC;KAC1B,QAAQ,EAAE;KACV,QAAQ,EAAE,CAAC;AAEd,MAAM,kBAAkB,GAAG,OAAC;KACzB,IAAI,CAAC;IACJ,aAAa;IACb,WAAW;IACX,cAAc;IACd,gBAAgB;IAChB,YAAY;IACZ,cAAc;IACd,cAAc;IACd,YAAY;IACZ,WAAW;CACZ,CAAC;KACD,QAAQ,EAAE;KACV,QAAQ,EAAE,CAAC;AAEd,MAAM,sBAAsB,GAAG,OAAC,CAAC,MAAM,CAAC;IACtC,aAAa,EAAE,YAAY;IAC3B,WAAW,EAAE,YAAY;IACzB,YAAY,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE;IAC9C,WAAW,EAAE,YAAY;IACzB,SAAS,EAAE,YAAY;IACvB,UAAU,EAAE,kBAAkB;IAC9B,WAAW,EAAE,OAAC,CAAC,KAAK,CAAC,OAAC,CAAC,MAAM,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE;CACvD,CAAC,CAAC;AAEH,kBAAe,sBAAsB,CAAC"}

package/dist/canvas/editor-context.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { EmailBuilderDocument } from '../types';
+import type { TEditorBlock } from './editor-core';
+type CanvasEditorContextValue = {
+    document: EmailBuilderDocument;
+    selectedBlockId: string | null;
+    setSelectedBlockId: (blockId: string | null) => void;
+    patchDocument: (partial: Record<string, TEditorBlock>) => void;
+    replaceDocument: (document: EmailBuilderDocument) => void;
+};
+export declare function CanvasEditorProvider({ document, onChange, children, }: {
+    document: EmailBuilderDocument;
+    onChange: (document: EmailBuilderDocument) => void;
+    children: React.ReactNode;
+}): JSX.Element;
+export declare function useCanvasEditor(): CanvasEditorContextValue;
+export declare function useDocument(): EmailBuilderDocument;
+export declare function useSelectedBlockId(): string | null;
+export declare function useSetSelectedBlockId(): (blockId: string | null) => void;
+export declare function usePatchDocument(): (partial: Record<string, TEditorBlock>) => void;
+export declare function useReplaceDocument(): (document: EmailBuilderDocument) => void;
+export {};

package/dist/canvas/editor-context.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CanvasEditorProvider = CanvasEditorProvider;
+exports.useCanvasEditor = useCanvasEditor;
+exports.useDocument = useDocument;
+exports.useSelectedBlockId = useSelectedBlockId;
+exports.useSetSelectedBlockId = useSetSelectedBlockId;
+exports.usePatchDocument = usePatchDocument;
+exports.useReplaceDocument = useReplaceDocument;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const CanvasEditorContext = (0, react_1.createContext)(null);
+function CanvasEditorProvider({ document, onChange, children, }) {
+    const [selectedBlockId, setSelectedBlockId] = (0, react_1.useState)(null);
+    const patchDocument = (0, react_1.useCallback)((partial) => {
+        onChange({
+            ...document,
+            ...partial,
+        });
+    }, [document, onChange]);
+    const replaceDocument = (0, react_1.useCallback)((nextDocument) => {
+        onChange(nextDocument);
+    }, [onChange]);
+    const value = (0, react_1.useMemo)(() => ({
+        document,
+        selectedBlockId,
+        setSelectedBlockId,
+        patchDocument,
+        replaceDocument,
+    }), [document, selectedBlockId, patchDocument, replaceDocument]);
+    return (0, jsx_runtime_1.jsx)(CanvasEditorContext.Provider, { value: value, children: children });
+}
+function useCanvasEditor() {
+    const context = (0, react_1.useContext)(CanvasEditorContext);
+    if (!context) {
+        throw new Error('useCanvasEditor must be used within CanvasEditorProvider');
+    }
+    return context;
+}
+function useDocument() {
+    return useCanvasEditor().document;
+}
+function useSelectedBlockId() {
+    return useCanvasEditor().selectedBlockId;
+}
+function useSetSelectedBlockId() {
+    return useCanvasEditor().setSelectedBlockId;
+}
+function usePatchDocument() {
+    return useCanvasEditor().patchDocument;
+}
+function useReplaceDocument() {
+    return useCanvasEditor().replaceDocument;
+}
+//# sourceMappingURL=editor-context.js.map

package/dist/canvas/editor-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-context.js","sourceRoot":"","sources":["../../src/canvas/editor-context.tsx"],"names":[],"mappings":";;AAeA,oDAwCC;AAED,0CAMC;AAED,kCAEC;AAED,gDAEC;AAED,sDAEC;AAED,4CAEC;AAED,gDAEC;;AAnFD,iCAAyF;AAazF,MAAM,mBAAmB,GAAG,IAAA,qBAAa,EAAkC,IAAI,CAAC,CAAC;AAEjF,SAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,QAAQ,EACR,QAAQ,GAKT;IACC,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,IAAA,gBAAQ,EAAgB,IAAI,CAAC,CAAC;IAE5E,MAAM,aAAa,GAAG,IAAA,mBAAW,EAC/B,CAAC,OAAqC,EAAE,EAAE;QACxC,QAAQ,CAAC;YACP,GAAG,QAAQ;YACX,GAAG,OAAO;SACX,CAAC,CAAC;IACL,CAAC,EACD,CAAC,QAAQ,EAAE,QAAQ,CAAC,CACrB,CAAC;IAEF,MAAM,eAAe,GAAG,IAAA,mBAAW,EACjC,CAAC,YAAkC,EAAE,EAAE;QACrC,QAAQ,CAAC,YAAY,CAAC,CAAC;IACzB,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,KAAK,GAAG,IAAA,eAAO,EACnB,GAAG,EAAE,CAAC,CAAC;QACL,QAAQ;QACR,eAAe;QACf,kBAAkB;QAClB,aAAa;QACb,eAAe;KAChB,CAAC,EACF,CAAC,QAAQ,EAAE,eAAe,EAAE,aAAa,EAAE,eAAe,CAAC,CAC5D,CAAC;IAEF,OAAO,uBAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAgC,CAAC;AAC/F,CAAC;AAED,SAAgB,eAAe;IAC7B,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,mBAAmB,CAAC,CAAC;IAChD,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,0DAA0D,CAAC,CAAC;IAC9E,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,SAAgB,WAAW;IACzB,OAAO,eAAe,EAAE,CAAC,QAAQ,CAAC;AACpC,CAAC;AAED,SAAgB,kBAAkB;IAChC,OAAO,eAAe,EAAE,CAAC,eAAe,CAAC;AAC3C,CAAC;AAED,SAAgB,qBAAqB;IACnC,OAAO,eAAe,EAAE,CAAC,kBAAkB,CAAC;AAC9C,CAAC;AAED,SAAgB,gBAAgB;IAC9B,OAAO,eAAe,EAAE,CAAC,aAAa,CAAC;AACzC,CAAC;AAED,SAAgB,kBAAkB;IAChC,OAAO,eAAe,EAAE,CAAC,eAAe,CAAC;AAC3C,CAAC"}