@singleton-sd/post-kit-editor 0.3.0

package/dist/canvas/editor-core.js

@@ -0,0 +1,87 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorConfigurationSchema = exports.EditorBlockSchema = exports.EditorBlock = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const zod_1 = require("zod");
+const block_avatar_1 = require("@usewaypoint/block-avatar");
+const block_button_1 = require("@usewaypoint/block-button");
+const block_divider_1 = require("@usewaypoint/block-divider");
+const block_heading_1 = require("@usewaypoint/block-heading");
+const block_html_1 = require("@usewaypoint/block-html");
+const block_image_1 = require("@usewaypoint/block-image");
+const block_spacer_1 = require("@usewaypoint/block-spacer");
+const block_text_1 = require("@usewaypoint/block-text");
+const document_core_1 = require("@usewaypoint/document-core");
+const ColumnsContainerEditor_1 = __importDefault(require("./blocks/ColumnsContainerEditor"));
+const ColumnsContainerPropsSchema_1 = __importDefault(require("./blocks/ColumnsContainerPropsSchema"));
+const ContainerEditor_1 = __importDefault(require("./blocks/ContainerEditor"));
+const ContainerPropsSchema_1 = __importDefault(require("./blocks/ContainerPropsSchema"));
+const EmailLayoutEditor_1 = __importDefault(require("./blocks/EmailLayoutEditor"));
+const EmailLayoutPropsSchema_1 = __importDefault(require("./blocks/EmailLayoutPropsSchema"));
+const EditorBlockWrapper_1 = __importDefault(require("./helpers/EditorBlockWrapper"));
+const EDITOR_DICTIONARY = (0, document_core_1.buildBlockConfigurationDictionary)({
+    Avatar: {
+        schema: block_avatar_1.AvatarPropsSchema,
+        Component: (props) => ((0, jsx_runtime_1.jsx)(EditorBlockWrapper_1.default, { children: (0, jsx_runtime_1.jsx)(block_avatar_1.Avatar, { ...props }) })),
+    },
+    Button: {
+        schema: block_button_1.ButtonPropsSchema,
+        Component: (props) => ((0, jsx_runtime_1.jsx)(EditorBlockWrapper_1.default, { children: (0, jsx_runtime_1.jsx)(block_button_1.Button, { ...props }) })),
+    },
+    Container: {
+        schema: ContainerPropsSchema_1.default,
+        Component: (props) => ((0, jsx_runtime_1.jsx)(EditorBlockWrapper_1.default, { children: (0, jsx_runtime_1.jsx)(ContainerEditor_1.default, { ...props }) })),
+    },
+    ColumnsContainer: {
+        schema: ColumnsContainerPropsSchema_1.default,
+        Component: (props) => ((0, jsx_runtime_1.jsx)(EditorBlockWrapper_1.default, { children: (0, jsx_runtime_1.jsx)(ColumnsContainerEditor_1.default, { ...props }) })),
+    },
+    Heading: {
+        schema: block_heading_1.HeadingPropsSchema,
+        Component: (props) => ((0, jsx_runtime_1.jsx)(EditorBlockWrapper_1.default, { children: (0, jsx_runtime_1.jsx)(block_heading_1.Heading, { ...props }) })),
+    },
+    Html: {
+        schema: block_html_1.HtmlPropsSchema,
+        Component: (props) => ((0, jsx_runtime_1.jsx)(EditorBlockWrapper_1.default, { children: (0, jsx_runtime_1.jsx)(block_html_1.Html, { ...props }) })),
+    },
+    Image: {
+        schema: block_image_1.ImagePropsSchema,
+        Component: (data) => {
+            if (!data.props?.url) {
+                return ((0, jsx_runtime_1.jsx)(EditorBlockWrapper_1.default, { children: (0, jsx_runtime_1.jsx)("div", { "data-testid": "pk-editor-image-empty", "aria-hidden": true, style: {
+                            backgroundColor: '#F8F8F8',
+                            color: '#AAAAAA',
+                            fontSize: '14px',
+                            lineHeight: '400px',
+                            textAlign: 'center',
+                            width: '100%',
+                            minHeight: '120px',
+                        }, children: "Image" }) }));
+            }
+            return ((0, jsx_runtime_1.jsx)(EditorBlockWrapper_1.default, { children: (0, jsx_runtime_1.jsx)(block_image_1.Image, { ...data }) }));
+        },
+    },
+    Text: {
+        schema: block_text_1.TextPropsSchema,
+        Component: (props) => ((0, jsx_runtime_1.jsx)(EditorBlockWrapper_1.default, { children: (0, jsx_runtime_1.jsx)(block_text_1.Text, { ...props }) })),
+    },
+    EmailLayout: {
+        schema: EmailLayoutPropsSchema_1.default,
+        Component: (props) => (0, jsx_runtime_1.jsx)(EmailLayoutEditor_1.default, { ...props }),
+    },
+    Spacer: {
+        schema: block_spacer_1.SpacerPropsSchema,
+        Component: (props) => ((0, jsx_runtime_1.jsx)(EditorBlockWrapper_1.default, { children: (0, jsx_runtime_1.jsx)(block_spacer_1.Spacer, { ...props }) })),
+    },
+    Divider: {
+        schema: block_divider_1.DividerPropsSchema,
+        Component: (props) => ((0, jsx_runtime_1.jsx)(EditorBlockWrapper_1.default, { children: (0, jsx_runtime_1.jsx)(block_divider_1.Divider, { ...props }) })),
+    },
+});
+exports.EditorBlock = (0, document_core_1.buildBlockComponent)(EDITOR_DICTIONARY);
+exports.EditorBlockSchema = (0, document_core_1.buildBlockConfigurationSchema)(EDITOR_DICTIONARY);
+exports.EditorConfigurationSchema = zod_1.z.record(zod_1.z.string(), exports.EditorBlockSchema);
+//# sourceMappingURL=editor-core.js.map

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

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

package/dist/canvas/helpers/AddBlockMenu.d.ts

@@ -0,0 +1,7 @@
+import type { TEditorBlock } from '../editor-core';
+type AddBlockButtonProps = {
+    placeholder?: boolean;
+    onSelect: (block: TEditorBlock) => void;
+};
+export default function AddBlockButton({ onSelect, placeholder, }: AddBlockButtonProps): JSX.Element;
+export {};

package/dist/canvas/helpers/AddBlockMenu.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = AddBlockButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const email_template_editor_1 = require("../../email-template-editor");
+const block_templates_1 = require("./block-templates");
+function AddBlockButton({ onSelect, placeholder, }) {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `${email_template_editor_1.EDITOR_CLASS_PREFIX}add-block`, style: { position: 'relative', padding: '4px 0' }, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: `${email_template_editor_1.EDITOR_CLASS_PREFIX}add-block-trigger`, onClick: () => setOpen((value) => !value), children: placeholder ? '+ Add block' : '+' }), open ? ((0, jsx_runtime_1.jsx)("div", { className: `${email_template_editor_1.EDITOR_CLASS_PREFIX}add-block-menu`, style: {
+                    position: 'absolute',
+                    zIndex: 10,
+                    background: '#fff',
+                    border: '1px solid #ccc',
+                    borderRadius: '4px',
+                    padding: '4px',
+                    minWidth: '140px',
+                }, children: block_templates_1.BLOCK_TEMPLATES.map((template) => ((0, jsx_runtime_1.jsx)("button", { type: "button", className: `${email_template_editor_1.EDITOR_CLASS_PREFIX}add-block-option`, style: { display: 'block', width: '100%', textAlign: 'left', padding: '4px 8px' }, onClick: () => {
+                        onSelect(template.block());
+                        setOpen(false);
+                    }, children: template.label }, template.label))) })) : null] }));
+}
+//# sourceMappingURL=AddBlockMenu.js.map

package/dist/canvas/helpers/AddBlockMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddBlockMenu.js","sourceRoot":"","sources":["../../../src/canvas/helpers/AddBlockMenu.tsx"],"names":[],"mappings":";;AAYA,iCAiDC;;AA7DD,iCAAwC;AAExC,uEAAkE;AAGlE,uDAAoD;AAOpD,SAAwB,cAAc,CAAC,EACrC,QAAQ,EACR,WAAW,GACS;IACpB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAExC,OAAO,CACL,iCACE,SAAS,EAAE,GAAG,2CAAmB,WAAW,EAC5C,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,aAEjD,mCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,GAAG,2CAAmB,mBAAmB,EACpD,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,YAExC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,GAC3B,EACR,IAAI,CAAC,CAAC,CAAC,CACN,gCACE,SAAS,EAAE,GAAG,2CAAmB,gBAAgB,EACjD,KAAK,EAAE;oBACL,QAAQ,EAAE,UAAU;oBACpB,MAAM,EAAE,EAAE;oBACV,UAAU,EAAE,MAAM;oBAClB,MAAM,EAAE,gBAAgB;oBACxB,YAAY,EAAE,KAAK;oBACnB,OAAO,EAAE,KAAK;oBACd,QAAQ,EAAE,OAAO;iBAClB,YAEA,iCAAe,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACjC,mCAEE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,GAAG,2CAAmB,kBAAkB,EACnD,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,EACjF,OAAO,EAAE,GAAG,EAAE;wBACZ,QAAQ,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC;wBAC3B,OAAO,CAAC,KAAK,CAAC,CAAC;oBACjB,CAAC,YAEA,QAAQ,CAAC,KAAK,IATV,QAAQ,CAAC,KAAK,CAUZ,CACV,CAAC,GACE,CACP,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC"}

package/dist/canvas/helpers/EditorBlockWrapper.d.ts

@@ -0,0 +1,5 @@
+type EditorBlockWrapperProps = {
+    children: JSX.Element;
+};
+export default function EditorBlockWrapper({ children }: EditorBlockWrapperProps): JSX.Element;
+export {};

package/dist/canvas/helpers/EditorBlockWrapper.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = EditorBlockWrapper;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const EditorBlock_1 = require("../EditorBlock");
+const editor_context_1 = require("../editor-context");
+function EditorBlockWrapper({ children }) {
+    const selectedBlockId = (0, editor_context_1.useSelectedBlockId)();
+    const setSelectedBlockId = (0, editor_context_1.useSetSelectedBlockId)();
+    const [mouseInside, setMouseInside] = (0, react_1.useState)(false);
+    const blockId = (0, EditorBlock_1.useCurrentBlockId)();
+    let outline;
+    if (selectedBlockId === blockId) {
+        outline = '2px solid rgba(0,121,204, 1)';
+    }
+    else if (mouseInside) {
+        outline = '2px solid rgba(0,121,204, 0.3)';
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            position: 'relative',
+            maxWidth: '100%',
+            outlineOffset: '-1px',
+            outline,
+        }, onMouseEnter: (event) => {
+            setMouseInside(true);
+            event.stopPropagation();
+        }, onMouseLeave: () => {
+            setMouseInside(false);
+        }, onClick: (event) => {
+            setSelectedBlockId(blockId);
+            event.stopPropagation();
+            event.preventDefault();
+        }, children: children }));
+}
+//# sourceMappingURL=EditorBlockWrapper.js.map

package/dist/canvas/helpers/EditorBlockWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorBlockWrapper.js","sourceRoot":"","sources":["../../../src/canvas/helpers/EditorBlockWrapper.tsx"],"names":[],"mappings":";;AASA,qCAqCC;;AA9CD,iCAA4D;AAE5D,gDAAmD;AACnD,sDAA8E;AAM9E,SAAwB,kBAAkB,CAAC,EAAE,QAAQ,EAA2B;IAC9E,MAAM,eAAe,GAAG,IAAA,mCAAkB,GAAE,CAAC;IAC7C,MAAM,kBAAkB,GAAG,IAAA,sCAAqB,GAAE,CAAC;IACnD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACtD,MAAM,OAAO,GAAG,IAAA,+BAAiB,GAAE,CAAC;IAEpC,IAAI,OAAiC,CAAC;IACtC,IAAI,eAAe,KAAK,OAAO,EAAE,CAAC;QAChC,OAAO,GAAG,8BAA8B,CAAC;IAC3C,CAAC;SAAM,IAAI,WAAW,EAAE,CAAC;QACvB,OAAO,GAAG,gCAAgC,CAAC;IAC7C,CAAC;IAED,OAAO,CACL,gCACE,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,QAAQ,EAAE,MAAM;YAChB,aAAa,EAAE,MAAM;YACrB,OAAO;SACR,EACD,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE;YACtB,cAAc,CAAC,IAAI,CAAC,CAAC;YACrB,KAAK,CAAC,eAAe,EAAE,CAAC;QAC1B,CAAC,EACD,YAAY,EAAE,GAAG,EAAE;YACjB,cAAc,CAAC,KAAK,CAAC,CAAC;QACxB,CAAC,EACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACjB,kBAAkB,CAAC,OAAO,CAAC,CAAC;YAC5B,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC,YAEA,QAAQ,GACL,CACP,CAAC;AACJ,CAAC"}

package/dist/canvas/helpers/EditorChildrenIds.d.ts

@@ -0,0 +1,11 @@
+import type { TEditorBlock } from '../editor-core';
+export type EditorChildrenChange = {
+    blockId: string;
+    block: TEditorBlock;
+    childrenIds: string[];
+};
+export type EditorChildrenIdsProps = {
+    childrenIds: string[] | null | undefined;
+    onChange: (val: EditorChildrenChange) => void;
+};
+export default function EditorChildrenIds({ childrenIds, onChange, }: EditorChildrenIdsProps): JSX.Element;

package/dist/canvas/helpers/EditorChildrenIds.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = EditorChildrenIds;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const EditorBlock_1 = require("../EditorBlock");
+const AddBlockMenu_1 = __importDefault(require("./AddBlockMenu"));
+function generateId() {
+    return `block-${Date.now()}`;
+}
+function EditorChildrenIds({ childrenIds, onChange, }) {
+    const appendBlock = (block) => {
+        const blockId = generateId();
+        onChange({
+            blockId,
+            block,
+            childrenIds: [...(childrenIds || []), blockId],
+        });
+    };
+    const insertBlock = (block, index) => {
+        const blockId = generateId();
+        const nextChildrenIds = [...(childrenIds || [])];
+        nextChildrenIds.splice(index, 0, blockId);
+        onChange({
+            blockId,
+            block,
+            childrenIds: nextChildrenIds,
+        });
+    };
+    if (!childrenIds || childrenIds.length === 0) {
+        return (0, jsx_runtime_1.jsx)(AddBlockMenu_1.default, { placeholder: true, onSelect: appendBlock });
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [childrenIds.map((childId, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(AddBlockMenu_1.default, { onSelect: (block) => insertBlock(block, index) }), (0, jsx_runtime_1.jsx)(EditorBlock_1.EditorBlock, { id: childId })] }, childId))), (0, jsx_runtime_1.jsx)(AddBlockMenu_1.default, { onSelect: appendBlock })] }));
+}
+//# sourceMappingURL=EditorChildrenIds.js.map

package/dist/canvas/helpers/EditorChildrenIds.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorChildrenIds.js","sourceRoot":"","sources":["../../../src/canvas/helpers/EditorChildrenIds.tsx"],"names":[],"mappings":";;;;;AAsBA,oCAuCC;;AA7DD,iCAAwC;AAExC,gDAA6C;AAG7C,kEAA4C;AAQ5C,SAAS,UAAU;IACjB,OAAO,SAAS,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC;AAC/B,CAAC;AAOD,SAAwB,iBAAiB,CAAC,EACxC,WAAW,EACX,QAAQ,GACe;IACvB,MAAM,WAAW,GAAG,CAAC,KAAmB,EAAE,EAAE;QAC1C,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;QAC7B,QAAQ,CAAC;YACP,OAAO;YACP,KAAK;YACL,WAAW,EAAE,CAAC,GAAG,CAAC,WAAW,IAAI,EAAE,CAAC,EAAE,OAAO,CAAC;SAC/C,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,KAAmB,EAAE,KAAa,EAAE,EAAE;QACzD,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;QAC7B,MAAM,eAAe,GAAG,CAAC,GAAG,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC,CAAC;QACjD,eAAe,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC;QAC1C,QAAQ,CAAC;YACP,OAAO;YACP,KAAK;YACL,WAAW,EAAE,eAAe;SAC7B,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,IAAI,CAAC,WAAW,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC7C,OAAO,uBAAC,sBAAc,IAAC,WAAW,QAAC,QAAQ,EAAE,WAAW,GAAI,CAAC;IAC/D,CAAC;IAED,OAAO,CACL,6DACG,WAAW,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CACnC,wBAAC,gBAAQ,eACP,uBAAC,sBAAc,IAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,GAAI,EAClE,uBAAC,yBAAW,IAAC,EAAE,EAAE,OAAO,GAAI,KAFf,OAAO,CAGX,CACZ,CAAC,EACF,uBAAC,sBAAc,IAAC,QAAQ,EAAE,WAAW,GAAI,IACxC,CACJ,CAAC;AACJ,CAAC"}

package/dist/canvas/helpers/block-templates.d.ts

@@ -0,0 +1,7 @@
+import type { TEditorBlock } from '../editor-core';
+type BlockTemplate = {
+    label: string;
+    block: () => TEditorBlock;
+};
+export declare const BLOCK_TEMPLATES: BlockTemplate[];
+export {};

package/dist/canvas/helpers/block-templates.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BLOCK_TEMPLATES = void 0;
+exports.BLOCK_TEMPLATES = [
+    {
+        label: 'Heading',
+        block: () => ({
+            type: 'Heading',
+            data: {
+                props: { text: 'Hello friend' },
+                style: {
+                    padding: { top: 16, bottom: 16, left: 24, right: 24 },
+                },
+            },
+        }),
+    },
+    {
+        label: 'Text',
+        block: () => ({
+            type: 'Text',
+            data: {
+                props: { text: 'My new text block' },
+                style: {
+                    padding: { top: 16, bottom: 16, left: 24, right: 24 },
+                    fontWeight: 'normal',
+                },
+            },
+        }),
+    },
+    {
+        label: 'Button',
+        block: () => ({
+            type: 'Button',
+            data: {
+                props: {
+                    text: 'Button',
+                    url: 'https://example.com',
+                },
+                style: { padding: { top: 16, bottom: 16, left: 24, right: 24 } },
+            },
+        }),
+    },
+    {
+        label: 'Image',
+        block: () => ({
+            type: 'Image',
+            data: {
+                props: {
+                    url: 'https://placehold.co/600x400',
+                    alt: 'Sample image',
+                    contentAlignment: 'middle',
+                    linkHref: null,
+                },
+                style: { padding: { top: 16, bottom: 16, left: 24, right: 24 } },
+            },
+        }),
+    },
+    {
+        label: 'Divider',
+        block: () => ({
+            type: 'Divider',
+            data: {
+                style: { padding: { top: 16, right: 0, bottom: 16, left: 0 } },
+                props: {
+                    lineColor: '#CCCCCC',
+                },
+            },
+        }),
+    },
+    {
+        label: 'Spacer',
+        block: () => ({
+            type: 'Spacer',
+            data: {},
+        }),
+    },
+    {
+        label: 'Container',
+        block: () => ({
+            type: 'Container',
+            data: {
+                style: { padding: { top: 16, bottom: 16, left: 24, right: 24 } },
+            },
+        }),
+    },
+];
+//# sourceMappingURL=block-templates.js.map

package/dist/canvas/helpers/block-templates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"block-templates.js","sourceRoot":"","sources":["../../../src/canvas/helpers/block-templates.ts"],"names":[],"mappings":";;;AAOa,QAAA,eAAe,GAAoB;IAC9C;QACE,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC;YACZ,IAAI,EAAE,SAAS;YACf,IAAI,EAAE;gBACJ,KAAK,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE;gBAC/B,KAAK,EAAE;oBACL,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;iBACtD;aACF;SACF,CAAC;KACH;IACD;QACE,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC;YACZ,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE;gBACJ,KAAK,EAAE,EAAE,IAAI,EAAE,mBAAmB,EAAE;gBACpC,KAAK,EAAE;oBACL,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;oBACrD,UAAU,EAAE,QAAQ;iBACrB;aACF;SACF,CAAC;KACH;IACD;QACE,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC;YACZ,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE;gBACJ,KAAK,EAAE;oBACL,IAAI,EAAE,QAAQ;oBACd,GAAG,EAAE,qBAAqB;iBAC3B;gBACD,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE;aACjE;SACF,CAAC;KACH;IACD;QACE,KAAK,EAAE,OAAO;QACd,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC;YACZ,IAAI,EAAE,OAAO;YACb,IAAI,EAAE;gBACJ,KAAK,EAAE;oBACL,GAAG,EAAE,8BAA8B;oBACnC,GAAG,EAAE,cAAc;oBACnB,gBAAgB,EAAE,QAAQ;oBAC1B,QAAQ,EAAE,IAAI;iBACf;gBACD,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE;aACjE;SACF,CAAC;KACH;IACD;QACE,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC;YACZ,IAAI,EAAE,SAAS;YACf,IAAI,EAAE;gBACJ,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE;gBAC9D,KAAK,EAAE;oBACL,SAAS,EAAE,SAAS;iBACrB;aACF;SACF,CAAC;KACH;IACD;QACE,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC;YACZ,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,EAAE;SACT,CAAC;KACH;IACD;QACE,KAAK,EAAE,WAAW;QAClB,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC;YACZ,IAAI,EAAE,WAAW;YACjB,IAAI,EAAE;gBACJ,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE;aACjE;SACF,CAAC;KACH;CACF,CAAC"}

package/dist/email-template-editor.d.ts

@@ -0,0 +1,11 @@
+import type { TemplateSourceFiles, TemplateVariable } from './types';
+export declare const EDITOR_CLASS_PREFIX = "pk-editor-";
+export interface EmailTemplateEditorProps {
+    template: TemplateSourceFiles;
+    availableVariables?: TemplateVariable[];
+    onSave: (files: TemplateSourceFiles) => Promise<void> | void;
+    onSendTest?: (files: TemplateSourceFiles, recipient: string) => Promise<void> | void;
+    onPreviewRendered?: (html: string) => void;
+    className?: string;
+}
+export declare function EmailTemplateEditor({ template, availableVariables, onPreviewRendered, className, }: EmailTemplateEditorProps): JSX.Element;

package/dist/email-template-editor.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EDITOR_CLASS_PREFIX = void 0;
+exports.EmailTemplateEditor = EmailTemplateEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const EmailBuilderCanvas_1 = require("./canvas/EmailBuilderCanvas");
+const insertion_target_1 = require("./insertion-target");
+const MetadataPanel_1 = require("./metadata/MetadataPanel");
+const PreviewDataEditor_1 = require("./preview/PreviewDataEditor");
+const PreviewPane_1 = require("./preview/PreviewPane");
+const VariableCatalogue_1 = require("./variables/VariableCatalogue");
+const working_files_1 = require("./working-files");
+exports.EDITOR_CLASS_PREFIX = 'pk-editor-';
+function EmailTemplateEditor({ template, availableVariables, onPreviewRendered, className, }) {
+    const [workingFiles, setWorkingFiles] = (0, react_1.useState)(template);
+    const handleDocumentChange = (0, react_1.useCallback)((document) => {
+        setWorkingFiles((current) => (0, working_files_1.withDocument)(current, document));
+    }, []);
+    const handleMetadataChange = (0, react_1.useCallback)((metadata) => {
+        setWorkingFiles((current) => (0, working_files_1.withMetadata)(current, metadata));
+    }, []);
+    const handleMetadataVariablesChange = (0, react_1.useCallback)((variables) => {
+        setWorkingFiles((current) => (0, working_files_1.withMetadataVariables)(current, variables));
+    }, []);
+    const handlePreviewDataChange = (0, react_1.useCallback)((previewData) => {
+        setWorkingFiles((current) => (0, working_files_1.withPreviewData)(current, previewData));
+    }, []);
+    const rootClassName = [`${exports.EDITOR_CLASS_PREFIX}root`, className].filter(Boolean).join(' ');
+    return ((0, jsx_runtime_1.jsx)("div", { className: rootClassName, "data-testid": `${exports.EDITOR_CLASS_PREFIX}root`, children: (0, jsx_runtime_1.jsx)(insertion_target_1.InsertionTargetProvider, { children: (0, jsx_runtime_1.jsxs)("div", { className: `${exports.EDITOR_CLASS_PREFIX}layout`, "data-testid": `${exports.EDITOR_CLASS_PREFIX}layout`, children: [(0, jsx_runtime_1.jsxs)("aside", { className: `${exports.EDITOR_CLASS_PREFIX}sidebar`, children: [(0, jsx_runtime_1.jsx)(MetadataPanel_1.MetadataPanel, { metadata: workingFiles.metadata, previewData: workingFiles.previewData, onChange: handleMetadataChange }), (0, jsx_runtime_1.jsx)(VariableCatalogue_1.VariableCatalogue, { availableVariables: availableVariables, metadataVariables: workingFiles.metadata.variables, onMetadataVariablesChange: handleMetadataVariablesChange }), (0, jsx_runtime_1.jsx)(PreviewDataEditor_1.PreviewDataEditor, { declaredVariables: workingFiles.metadata.variables, previewData: workingFiles.previewData, onChange: handlePreviewDataChange })] }), (0, jsx_runtime_1.jsxs)("div", { className: `${exports.EDITOR_CLASS_PREFIX}main`, children: [(0, jsx_runtime_1.jsx)(EmailBuilderCanvas_1.EmailBuilderCanvas, { document: workingFiles.templateJson, onChange: handleDocumentChange }), (0, jsx_runtime_1.jsx)(PreviewPane_1.PreviewPane, { files: workingFiles, onPreviewRendered: onPreviewRendered })] })] }) }) }));
+}
+//# sourceMappingURL=email-template-editor.js.map

package/dist/email-template-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"email-template-editor.js","sourceRoot":"","sources":["../src/email-template-editor.tsx"],"names":[],"mappings":";;;AAmDA,kDA6DC;;AA9GD,iCAAqD;AAErD,oEAAiE;AACjE,yDAA6D;AAC7D,4DAAyD;AACzD,mEAAgE;AAChE,uDAAoD;AAGpD,qEAAkE;AAClE,mDAKyB;AAQZ,QAAA,mBAAmB,GAAG,YAAY,CAAC;AA0BhD,SAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,kBAAkB,EAClB,iBAAiB,EACjB,SAAS,GACgB;IACzB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAsB,QAAQ,CAAC,CAAC;IAEhF,MAAM,oBAAoB,GAAG,IAAA,mBAAW,EAAC,CAAC,QAA8B,EAAE,EAAE;QAC1E,eAAe,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,IAAA,4BAAY,EAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IAChE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,oBAAoB,GAAG,IAAA,mBAAW,EAAC,CAAC,QAAgC,EAAE,EAAE;QAC5E,eAAe,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,IAAA,4BAAY,EAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IAChE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,6BAA6B,GAAG,IAAA,mBAAW,EAAC,CAAC,SAAmB,EAAE,EAAE;QACxE,eAAe,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,IAAA,qCAAqB,EAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC;IAC1E,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,uBAAuB,GAAG,IAAA,mBAAW,EAAC,CAAC,WAAgC,EAAE,EAAE;QAC/E,eAAe,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,IAAA,+BAAe,EAAC,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC;IACtE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,CAAC,GAAG,2BAAmB,MAAM,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE1F,OAAO,CACL,gCAAK,SAAS,EAAE,aAAa,iBAAe,GAAG,2BAAmB,MAAM,YACtE,uBAAC,0CAAuB,cACtB,iCACE,SAAS,EAAE,GAAG,2BAAmB,QAAQ,iBAC5B,GAAG,2BAAmB,QAAQ,aAE3C,mCAAO,SAAS,EAAE,GAAG,2BAAmB,SAAS,aAC/C,uBAAC,6BAAa,IACZ,QAAQ,EAAE,YAAY,CAAC,QAAQ,EAC/B,WAAW,EAAE,YAAY,CAAC,WAAW,EACrC,QAAQ,EAAE,oBAAoB,GAC9B,EACF,uBAAC,qCAAiB,IAChB,kBAAkB,EAAE,kBAAkB,EACtC,iBAAiB,EAAE,YAAY,CAAC,QAAQ,CAAC,SAAS,EAClD,yBAAyB,EAAE,6BAA6B,GACxD,EACF,uBAAC,qCAAiB,IAChB,iBAAiB,EAAE,YAAY,CAAC,QAAQ,CAAC,SAAS,EAClD,WAAW,EAAE,YAAY,CAAC,WAAW,EACrC,QAAQ,EAAE,uBAAuB,GACjC,IACI,EACR,iCAAK,SAAS,EAAE,GAAG,2BAAmB,MAAM,aAC1C,uBAAC,uCAAkB,IACjB,QAAQ,EAAE,YAAY,CAAC,YAAY,EACnC,QAAQ,EAAE,oBAAoB,GAC9B,EACF,uBAAC,yBAAW,IAAC,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,GAAI,IACtE,IACF,GACkB,GACtB,CACP,CAAC;AACJ,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { type TemplateSourceFiles, type TemplateVariable, type EmailBuilderDocument, } from './types';
+export { EDITOR_CLASS_PREFIX, EmailTemplateEditor, type EmailTemplateEditorProps, } from './email-template-editor';
+export { EmailBuilderCanvas, type EmailBuilderCanvasProps } from './canvas/EmailBuilderCanvas';
+export { loadTemplateSource, serializeTemplateSource, TemplateSourceError } from './serialization';

package/dist/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TemplateSourceError = exports.serializeTemplateSource = exports.loadTemplateSource = exports.EmailBuilderCanvas = exports.EmailTemplateEditor = exports.EDITOR_CLASS_PREFIX = void 0;
+var email_template_editor_1 = require("./email-template-editor");
+Object.defineProperty(exports, "EDITOR_CLASS_PREFIX", { enumerable: true, get: function () { return email_template_editor_1.EDITOR_CLASS_PREFIX; } });
+Object.defineProperty(exports, "EmailTemplateEditor", { enumerable: true, get: function () { return email_template_editor_1.EmailTemplateEditor; } });
+var EmailBuilderCanvas_1 = require("./canvas/EmailBuilderCanvas");
+Object.defineProperty(exports, "EmailBuilderCanvas", { enumerable: true, get: function () { return EmailBuilderCanvas_1.EmailBuilderCanvas; } });
+var serialization_1 = require("./serialization");
+Object.defineProperty(exports, "loadTemplateSource", { enumerable: true, get: function () { return serialization_1.loadTemplateSource; } });
+Object.defineProperty(exports, "serializeTemplateSource", { enumerable: true, get: function () { return serialization_1.serializeTemplateSource; } });
+Object.defineProperty(exports, "TemplateSourceError", { enumerable: true, get: function () { return serialization_1.TemplateSourceError; } });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAKA,iEAIiC;AAH/B,4HAAA,mBAAmB,OAAA;AACnB,4HAAA,mBAAmB,OAAA;AAGrB,kEAA+F;AAAtF,wHAAA,kBAAkB,OAAA;AAC3B,iDAAmG;AAA1F,mHAAA,kBAAkB,OAAA;AAAE,wHAAA,uBAAuB,OAAA;AAAE,oHAAA,mBAAmB,OAAA"}

package/dist/insertion-target.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface InsertionTarget {
+    insert: (text: string) => void;
+    label: string;
+}
+interface InsertionTargetContextValue {
+    target: InsertionTarget | null;
+    setTarget: React.Dispatch<React.SetStateAction<InsertionTarget | null>>;
+}
+export declare function InsertionTargetProvider({ children }: {
+    children: React.ReactNode;
+}): JSX.Element;
+export declare function useInsertionTarget(): InsertionTargetContextValue;
+export declare function useRegisterInsertionTarget(label: string, insert: (text: string) => void): {
+    onFocus: () => void;
+    onBlur: () => void;
+};
+export {};

package/dist/insertion-target.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InsertionTargetProvider = InsertionTargetProvider;
+exports.useInsertionTarget = useInsertionTarget;
+exports.useRegisterInsertionTarget = useRegisterInsertionTarget;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const InsertionTargetContext = (0, react_1.createContext)(null);
+function InsertionTargetProvider({ children }) {
+    const [target, setTarget] = (0, react_1.useState)(null);
+    const value = (0, react_1.useMemo)(() => ({ target, setTarget }), [target]);
+    return ((0, jsx_runtime_1.jsx)(InsertionTargetContext.Provider, { value: value, children: children }));
+}
+function useInsertionTarget() {
+    const ctx = (0, react_1.useContext)(InsertionTargetContext);
+    if (!ctx) {
+        throw new Error('useInsertionTarget must be used within InsertionTargetProvider');
+    }
+    return ctx;
+}
+function useRegisterInsertionTarget(label, insert) {
+    const { setTarget } = useInsertionTarget();
+    const insertRef = (0, react_1.useRef)(insert);
+    insertRef.current = insert;
+    const registrationRef = (0, react_1.useRef)(null);
+    const stableInsert = (0, react_1.useCallback)((text) => {
+        insertRef.current(text);
+    }, []);
+    const onFocus = (0, react_1.useCallback)(() => {
+        const next = { label, insert: stableInsert };
+        registrationRef.current = next;
+        setTarget(next);
+    }, [label, setTarget, stableInsert]);
+    const onBlur = (0, react_1.useCallback)(() => {
+        const registration = registrationRef.current;
+        registrationRef.current = null;
+        setTarget((current) => (current === registration ? null : current));
+    }, [setTarget]);
+    return { onFocus, onBlur };
+}
+//# sourceMappingURL=insertion-target.js.map

package/dist/insertion-target.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"insertion-target.js","sourceRoot":"","sources":["../src/insertion-target.tsx"],"names":[],"mappings":";;AAgBA,0DAMC;AAED,gDAMC;AAMD,gEAgCC;;AApED,iCAAiG;AAcjG,MAAM,sBAAsB,GAAG,IAAA,qBAAa,EAAqC,IAAI,CAAC,CAAC;AAEvF,SAAgB,uBAAuB,CAAC,EAAE,QAAQ,EAAiC;IACjF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAyB,IAAI,CAAC,CAAC;IACnE,MAAM,KAAK,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAC/D,OAAO,CACL,uBAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAmC,CAC5F,CAAC;AACJ,CAAC;AAED,SAAgB,kBAAkB;IAChC,MAAM,GAAG,GAAG,IAAA,kBAAU,EAAC,sBAAsB,CAAC,CAAC;IAC/C,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,MAAM,IAAI,KAAK,CAAC,gEAAgE,CAAC,CAAC;IACpF,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC;AAMD,SAAgB,0BAA0B,CACxC,KAAa,EACb,MAA8B;IAK9B,MAAM,EAAE,SAAS,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAC3C,MAAM,SAAS,GAAG,IAAA,cAAM,EAAC,MAAM,CAAC,CAAC;IACjC,SAAS,CAAC,OAAO,GAAG,MAAM,CAAC;IAC3B,MAAM,eAAe,GAAG,IAAA,cAAM,EAA2D,IAAI,CAAC,CAAC;IAE/F,MAAM,YAAY,GAAG,IAAA,mBAAW,EAAC,CAAC,IAAY,EAAE,EAAE;QAChD,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,OAAO,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAC/B,MAAM,IAAI,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC;QAC7C,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC;QAC/B,SAAS,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC;IAErC,MAAM,MAAM,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAC9B,MAAM,YAAY,GAAG,eAAe,CAAC,OAAO,CAAC;QAC7C,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC;QAI/B,SAAS,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,OAAO,KAAK,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;IACtE,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC;AAC7B,CAAC"}

package/dist/metadata/MetadataPanel.d.ts

@@ -0,0 +1,7 @@
+import type { TemplatePreviewData, TemplateSourceMetadata } from '@singleton-sd/post-kit-types';
+export interface MetadataPanelProps {
+    metadata: TemplateSourceMetadata;
+    previewData: TemplatePreviewData;
+    onChange: (metadata: TemplateSourceMetadata) => void;
+}
+export declare function MetadataPanel({ metadata, previewData, onChange, }: MetadataPanelProps): JSX.Element;

package/dist/metadata/MetadataPanel.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MetadataPanel = MetadataPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const email_template_editor_1 = require("../email-template-editor");
+const insertion_target_1 = require("../insertion-target");
+const insert_at_cursor_1 = require("./insert-at-cursor");
+const subject_preview_1 = require("./subject-preview");
+const template_key_1 = require("./template-key");
+function MetadataPanel({ metadata, previewData, onChange, }) {
+    const [keyError, setKeyError] = (0, react_1.useState)(null);
+    const subjectRef = (0, react_1.useRef)(null);
+    const patch = (0, react_1.useCallback)((partial) => {
+        onChange({ ...metadata, ...partial });
+    }, [metadata, onChange]);
+    const handleKeyChange = (0, react_1.useCallback)((event) => {
+        const next = event.target.value;
+        const error = (0, template_key_1.templateKeyInputError)(next);
+        if (!(0, template_key_1.isAcceptableTemplateKeyInput)(next)) {
+            setKeyError(error);
+            return;
+        }
+        setKeyError(null);
+        patch({ key: next });
+    }, [patch]);
+    const insertIntoSubject = (0, react_1.useCallback)((text) => {
+        const el = subjectRef.current;
+        const start = el?.selectionStart ?? metadata.subject.length;
+        const end = el?.selectionEnd ?? start;
+        const { value, caret } = (0, insert_at_cursor_1.insertAtCursor)(metadata.subject, start, end, text);
+        patch({ subject: value });
+        if (typeof requestAnimationFrame === 'function') {
+            requestAnimationFrame(() => {
+                const input = subjectRef.current;
+                if (input) {
+                    input.focus();
+                    input.setSelectionRange(caret, caret);
+                }
+            });
+        }
+    }, [metadata.subject, patch]);
+    const subjectFocus = (0, insertion_target_1.useRegisterInsertionTarget)('subject field', insertIntoSubject);
+    const subjectPreview = (0, subject_preview_1.previewSubject)(metadata.subject, previewData);
+    const p = email_template_editor_1.EDITOR_CLASS_PREFIX;
+    return ((0, jsx_runtime_1.jsxs)("section", { className: `${p}metadata`, "data-testid": `${p}metadata`, children: [(0, jsx_runtime_1.jsx)("h2", { className: `${p}metadata-heading`, children: "Template metadata" }), (0, jsx_runtime_1.jsxs)("div", { className: `${p}metadata-field`, children: [(0, jsx_runtime_1.jsx)("label", { className: `${p}metadata-label`, htmlFor: `${p}meta-key`, children: "Key" }), (0, jsx_runtime_1.jsx)("input", { id: `${p}meta-key`, className: `${p}metadata-input`, type: "text", value: metadata.key, onChange: handleKeyChange, autoComplete: "off", spellCheck: false, "data-testid": `${p}meta-key` }), keyError ? ((0, jsx_runtime_1.jsx)("p", { className: `${p}metadata-error`, "data-testid": `${p}meta-key-error`, role: "status", children: keyError })) : null] }), (0, jsx_runtime_1.jsxs)("div", { className: `${p}metadata-field`, children: [(0, jsx_runtime_1.jsx)("label", { className: `${p}metadata-label`, htmlFor: `${p}meta-name`, children: "Name" }), (0, jsx_runtime_1.jsx)("input", { id: `${p}meta-name`, className: `${p}metadata-input`, type: "text", value: metadata.name, onChange: (event) => patch({ name: event.target.value }), "data-testid": `${p}meta-name` })] }), (0, jsx_runtime_1.jsxs)("div", { className: `${p}metadata-field`, children: [(0, jsx_runtime_1.jsx)("label", { className: `${p}metadata-label`, htmlFor: `${p}meta-description`, children: "Description" }), (0, jsx_runtime_1.jsx)("textarea", { id: `${p}meta-description`, className: `${p}metadata-textarea`, value: metadata.description ?? '', onChange: (event) => {
+                            const description = event.target.value;
+                            if (description === '') {
+                                const { description: _removed, ...rest } = metadata;
+                                onChange(rest);
+                                return;
+                            }
+                            patch({ description });
+                        }, rows: 3, "data-testid": `${p}meta-description` })] }), (0, jsx_runtime_1.jsxs)("div", { className: `${p}metadata-field`, children: [(0, jsx_runtime_1.jsx)("label", { className: `${p}metadata-label`, htmlFor: `${p}meta-subject`, children: "Subject" }), (0, jsx_runtime_1.jsx)("input", { id: `${p}meta-subject`, ref: subjectRef, className: `${p}metadata-input`, type: "text", value: metadata.subject, onChange: (event) => patch({ subject: event.target.value }), onFocus: subjectFocus.onFocus, onBlur: subjectFocus.onBlur, "data-testid": `${p}meta-subject` }), (0, jsx_runtime_1.jsxs)("p", { className: `${p}metadata-subject-preview`, "data-testid": `${p}meta-subject-preview`, children: ["Preview: ", subjectPreview] })] }), (0, jsx_runtime_1.jsxs)("div", { className: `${p}metadata-field`, children: [(0, jsx_runtime_1.jsx)("span", { className: `${p}metadata-label`, children: "Schema version" }), (0, jsx_runtime_1.jsx)("span", { className: `${p}metadata-readonly`, "data-testid": `${p}meta-schema-version`, children: metadata.schemaVersion })] })] }));
+}
+//# sourceMappingURL=MetadataPanel.js.map

package/dist/metadata/MetadataPanel.js.map

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

package/dist/metadata/insert-at-cursor.d.ts

@@ -0,0 +1,5 @@
+export declare function insertAtCursor(value: string, selectionStart: number, selectionEnd: number, insertion: string): {
+    value: string;
+    caret: number;
+};
+export declare function variablePlaceholder(name: string): string;

package/dist/metadata/insert-at-cursor.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.insertAtCursor = insertAtCursor;
+exports.variablePlaceholder = variablePlaceholder;
+function insertAtCursor(value, selectionStart, selectionEnd, insertion) {
+    const start = clampIndex(selectionStart, value.length);
+    const end = clampIndex(selectionEnd, value.length);
+    const from = Math.min(start, end);
+    const to = Math.max(start, end);
+    const next = value.slice(0, from) + insertion + value.slice(to);
+    return { value: next, caret: from + insertion.length };
+}
+function clampIndex(index, length) {
+    if (!Number.isFinite(index)) {
+        return length;
+    }
+    return Math.max(0, Math.min(Math.trunc(index), length));
+}
+function variablePlaceholder(name) {
+    return `{{${name}}}`;
+}
+//# sourceMappingURL=insert-at-cursor.js.map

package/dist/metadata/insert-at-cursor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"insert-at-cursor.js","sourceRoot":"","sources":["../../src/metadata/insert-at-cursor.ts"],"names":[],"mappings":";;AAIA,wCAYC;AAUD,kDAEC;AAxBD,SAAgB,cAAc,CAC5B,KAAa,EACb,cAAsB,EACtB,YAAoB,EACpB,SAAiB;IAEjB,MAAM,KAAK,GAAG,UAAU,CAAC,cAAc,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACvD,MAAM,GAAG,GAAG,UAAU,CAAC,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACnD,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAClC,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAChC,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAChE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC;AACzD,CAAC;AAED,SAAS,UAAU,CAAC,KAAa,EAAE,MAAc;IAC/C,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;QAC5B,OAAO,MAAM,CAAC;IAChB,CAAC;IACD,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;AAC1D,CAAC;AAGD,SAAgB,mBAAmB,CAAC,IAAY;IAC9C,OAAO,KAAK,IAAI,IAAI,CAAC;AACvB,CAAC"}

package/dist/metadata/subject-preview.d.ts

@@ -0,0 +1,2 @@
+import type { TemplatePreviewData } from '@singleton-sd/post-kit-types';
+export declare function previewSubject(subject: string, previewData: TemplatePreviewData): string;

package/dist/metadata/subject-preview.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.previewSubject = previewSubject;
+function previewSubject(subject, previewData) {
+    return subject.replace(/\{\{\s*([a-zA-Z0-9_.-]+)\s*\}\}/g, (match, name) => {
+        if (Object.prototype.hasOwnProperty.call(previewData, name)) {
+            return previewData[name] ?? match;
+        }
+        return match;
+    });
+}
+//# sourceMappingURL=subject-preview.js.map

package/dist/metadata/subject-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"subject-preview.js","sourceRoot":"","sources":["../../src/metadata/subject-preview.ts"],"names":[],"mappings":";;AAOA,wCAOC;AAPD,SAAgB,cAAc,CAAC,OAAe,EAAE,WAAgC;IAC9E,OAAO,OAAO,CAAC,OAAO,CAAC,kCAAkC,EAAE,CAAC,KAAK,EAAE,IAAY,EAAE,EAAE;QACjF,IAAI,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,EAAE,CAAC;YAC5D,OAAO,WAAW,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC;QACpC,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC,CAAC,CAAC;AACL,CAAC"}