mail-editor-pancake 0.0.7 → 0.0.9

package/packages/blocks/src/text.ts

@@ -28,10 +28,10 @@ export const textBlock = defineBlock<TextProps>({
     content:
       '<p style="margin:0;">在此处输入文本。<strong>双击</strong>进入编辑模式，<em>选中文字</em>会出现工具条；支持变量 {{user.name}}</p>',
     align: 'left',
-    color: '#433f3f',
-    fontSize: '16px',
+    color: '',
+    fontSize: '',
     fontFamily: '',
-    fontWeight: '400',
+    fontWeight: '',
     lineHeight: '',
     paddingTop: 8,
     paddingRight: 0,
@@ -41,7 +41,7 @@ export const textBlock = defineBlock<TextProps>({
   schema: [
     {
       key: 'align',
-      label: '默认对齐',
+      label: '对齐',
       type: 'select',
       selectVariant: 'segmented',
       options: [
@@ -50,14 +50,15 @@ export const textBlock = defineBlock<TextProps>({
         { label: '右', value: 'right' },
       ],
     },
-    { key: 'color', label: '默认颜色', type: 'color' },
-    { key: 'fontSize', label: '默认字号', type: 'text', placeholder: '14px' },
+    { key: 'color', label: '颜色', type: 'color', placeholder: '继承全局' },
+    { key: 'fontSize', label: '字号', type: 'text', inheritGlobal: true },
     { key: 'fontFamily', label: '字体', type: 'text', placeholder: '继承全局' },
     {
       key: 'fontWeight',
       label: '字重',
       type: 'select',
       selectVariant: 'segmented',
+      inheritGlobal: true,
       options: [...FONT_WEIGHT_STEP_OPTIONS],
     },
     {
@@ -98,20 +99,26 @@ export const textBlock = defineBlock<TextProps>({
   toMjml: (p) => {
     const padding = `${p.paddingTop}px ${p.paddingRight}px ${p.paddingBottom}px ${p.paddingLeft}px`;
     const ff = p.fontFamily ? ` font-family="${escapeAttr(p.fontFamily)}"` : '';
-    const fwN = normalizeFontWeightStep(p.fontWeight);
-    const fw = fwN !== '400' ? ` font-weight="${escapeAttr(fwN)}"` : '';
+    const fwRaw = String(p.fontWeight ?? '').trim();
+    const fw = fwRaw ? ` font-weight="${escapeAttr(normalizeFontWeightStep(fwRaw))}"` : '';
     const lh = String(p.lineHeight ?? '').trim();
     const lhAttr = lh ? ` line-height="${escapeAttr(lh)}"` : '';
-    return `<mj-text align="${p.align}" color="${escapeAttr(p.color)}" font-size="${escapeAttr(
-      p.fontSize,
-    )}"${lhAttr}${ff}${fw} padding="${padding}">${p.content}</mj-text>`;
+    const colorRaw = String(p.color ?? '').trim();
+    const colorAttr = colorRaw ? ` color="${escapeAttr(colorRaw)}"` : '';
+    const fsRaw = String(p.fontSize ?? '').trim();
+    const fsAttr = fsRaw ? ` font-size="${escapeAttr(fsRaw)}"` : '';
+    return `<mj-text align="${p.align}"${colorAttr}${fsAttr}${lhAttr}${ff}${fw} padding="${padding}">${p.content}</mj-text>`;
   },
   renderPreview: (p) => {
     const ff = p.fontFamily ? `font-family:${p.fontFamily};` : '';
-    const fwN = normalizeFontWeightStep(p.fontWeight);
-    const fw = fwN !== '400' ? `font-weight:${fwN};` : '';
+    const fwRaw = String(p.fontWeight ?? '').trim();
+    const fwCss = fwRaw ? `font-weight:${normalizeFontWeightStep(fwRaw)};` : '';
     const lhRaw = String(p.lineHeight ?? '').trim();
     const lh = lhRaw ? `line-height:${lhRaw};` : 'line-height:normal;';
-    return `<div class="sm-text-content" style="text-align:${p.align};color:${p.color};font-size:${p.fontSize};${lh}${ff}${fw}padding:${p.paddingTop}px ${p.paddingRight}px ${p.paddingBottom}px ${p.paddingLeft}px;">${p.content}</div>`;
+    const colorRaw = String(p.color ?? '').trim();
+    const colorCss = colorRaw ? `color:${colorRaw};` : '';
+    const fsRaw = String(p.fontSize ?? '').trim();
+    const fsCss = fsRaw ? `font-size:${fsRaw};` : '';
+    return `<div class="sm-text-content" style="text-align:${p.align};${colorCss}${fsCss}${fwCss}${lh}${ff}padding:${p.paddingTop}px ${p.paddingRight}px ${p.paddingBottom}px ${p.paddingLeft}px;">${p.content}</div>`;
   },
 });

package/packages/core/dist/index.d.ts

@@ -72,8 +72,32 @@ export declare interface BlockSchemaField {
     step?: number;
     placeholder?: string;
     help?: string;
+    /** 为 true 时右栏显示「继承全局」开关：开=留空跟随邮件全局，关=写入当前全局值为块级固定值 */
+    inheritGlobal?: boolean;
 }
 
+export declare interface BodyVariableInsert {
+    content: string;
+    asHtml: boolean;
+}
+
+/** 插入链接 / 图片等元素片段 */
+export declare function buildBodyVariableElementInsert(v: Variable, options?: {
+    linkColor?: string;
+    token?: string;
+}): BodyVariableInsert;
+
+/** @deprecated 使用 buildBodyVariableKeyInsert / buildBodyVariableElementInsert */
+export declare function buildBodyVariableInsert(v: Variable, options?: {
+    linkColor?: string;
+    token?: string;
+}): BodyVariableInsert;
+
+/** 插入变量 key（`{{key}}`） */
+export declare function buildBodyVariableKeyInsert(v: Variable): BodyVariableInsert;
+
+export declare function buildLinkVariableHtml(token: string, linkColor: string): string;
+
 export declare interface Column {
     id: string;
     attrs: ColumnAttrs;
@@ -87,6 +111,9 @@ declare interface ColumnAttrs {
 
 export declare function createSection(layout: SectionLayout): Section;
 
+/** 无后端 sample 时按 kind / label 生成预览用示例值（仅预览弹窗等场景） */
+export declare function defaultVariableSample(v: Pick<Variable, 'key' | 'label' | 'kind' | 'sample'>): string;
+
 /** 工厂函数，便于外部以函数式风格定义组件。 */
 export declare function defineBlock<P extends object>(def: BlockDefinition<P>): BlockDefinition<P>;
 
@@ -162,6 +189,11 @@ declare interface EditorOptions {
     imageAssets?: ImageAssetsHandlers;
     /** 右栏控件形态等可选 UI 偏好。 */
     ui?: EditorUiOptions;
+    /**
+     * 顶栏「重置内容」恢复的目标文档（与 `initialDoc` 独立；编辑已保存邮件时仍应指向业务预置模板）。
+     * 未传时与构造时的 `initialDoc` 合并结果一致。
+     */
+    presetDoc?: Partial<EmailDoc>;
 }
 
 /** 编辑器 Chrome 配色：`system` 由 `prefers-color-scheme` 与 `data-sm-theme` 共同决定。邮件画布 `.sm-canvas` 默认仍为白纸以贴近成品。 */
@@ -194,6 +226,10 @@ export declare interface EditorUiOptions {
      * 为 true 时隐藏顶栏「全屏」图标按钮（浏览器原生全屏 API，作用于编辑器根节点）。
      */
     hideTopbarFullscreen?: boolean;
+    /** 为 true 时隐藏顶栏「清空画布」按钮。 */
+    hideTopbarClearCanvas?: boolean;
+    /** 为 true 时隐藏顶栏「重置内容」按钮。 */
+    hideTopbarResetContent?: boolean;
 }
 
 /**
@@ -335,6 +371,8 @@ declare interface InlineEditableConfig<P extends object = Record<string, unknown
     placeholder?: string;
 }
 
+export declare function isTwoColumnLayout(layout: SectionLayout): layout is TwoColumnLayout;
+
 declare type Listener = (detail?: DocChangedDetail) => void;
 
 /**
@@ -366,6 +404,12 @@ export declare class MailEditor {
     private changeTimer;
     /** 显式品牌色时覆盖 CSS 变量；未设置则由 styles 按 light/dark 使用默认紫/靛 */
     private accentColorOverride;
+    /** 顶栏开关：是否在画布上始终显示 Section / Block 轻量虚线边框 */
+    private showLayoutBorders;
+    /** 「重置内容」时恢复的文档快照（与当前画布内容无关） */
+    private presetContentDoc;
+    /** 宿主通过 setVariables 注入的列表；setValue 恢复文档后仍会写回，避免被 doc JSON 里的空数组覆盖 */
+    private configuredVariables;
     private systemThemeMq;
     private readonly _onSystemThemeMqChange;
     private readonly _onFullscreenChange;
@@ -379,8 +423,30 @@ export declare class MailEditor {
     constructor(opts: EditorOptions);
     setValue(doc: EmailDoc): void;
     getValue(): EmailDoc;
+    /**
+     * 清空画布：移除所有 Section/Block，保留 meta、styles、variables。
+     * 会提交内联编辑并清空选中。
+     */
+    clearCanvas(): void;
+    /** 将画布恢复为构造时 `presetDoc`（或 `initialDoc`）对应的预置内容。 */
+    resetToPreset(): void;
+    /** 更新「重置内容」的目标（例如宿主异步加载默认模板后）。 */
+    setPresetDoc(partial: Partial<EmailDoc>): void;
     setVariables(vars: Variable[]): void;
     getVariables(): Variable[];
+    private _applyConfiguredVariables;
+    /**
+     * 插入变量 key（`{{key}}`）。
+     * @returns 是否成功插入
+     */
+    insertVariableKey(v: Variable): boolean;
+    /**
+     * 插入链接 / 图片变量对应元素（`<a>` / image 块等）。
+     * 非 link/image 时退化为 insertVariableKey。
+     */
+    insertVariableElement(v: Variable): boolean;
+    /** 同 {@link insertVariableKey} */
+    insertVariable(v: Variable): boolean;
     /** 当前界面主题（`system` 不解析为 light/dark）。 */
     getTheme(): EditorTheme;
     /** 切换界面主题；写入 `data-sm-theme`，顶栏选择器同步。 */
@@ -414,12 +480,16 @@ export declare class MailEditor {
     private _bindKeyboard;
     private _onChange;
     private _showVariablePopover;
-    private _insertVariable;
+    private _showToast;
+    private _insertImageVariable;
+    /** 在焦点处插入文本或 HTML；失败时返回 false */
+    private _insertAtFocus;
     private _showExport;
     private _showPreview;
     private _bindFullscreen;
     private _unbindFullscreen;
     private _toggleFullscreen;
+    private _toggleLayoutBorders;
 }
 
 export declare function metaWidthInputString(raw: unknown): string;
@@ -449,6 +519,9 @@ export declare function mjRawEmailTableWrap(paddingCss: string, cellInnerHtml: s
 /** 将任意历史写法映射到最近一档（normal→400，bold→700 等） */
 export declare function normalizeFontWeightStep(raw: string | undefined | null): FontWeightStep;
 
+/** 规范化 Variable（补 kind、sample） */
+export declare function normalizeVariable(v: Variable): Variable;
+
 /**
  * 打开内置图库弹层：搜索、分页、选图插入；可选「链接添加」「上传到图库」「删除」由 adapter 决定。
  */
@@ -468,12 +541,16 @@ export declare function parseMetaWidthFromUserInput(input: string): number | str
 /** Section 右栏输入；空字符串表示清除宽度 */
 export declare function parseSectionWidthFromUserInput(input: string): string | number | undefined;
 
+/** @deprecated 请改用 {@link pruneSectionIfEmpty}，避免误删多个空 Section */
+export declare function pruneEmptySections(draft: EmailDoc): void;
+
 /**
- * 从文档中移除「每一列都没有任何 Block」的 Section。
- * 在内容块被删除或拖走后调用，可与 `autoWrapSection` 搭配，避免唯一块离场后仍残留空壳；
- * 不会在用户仅点击「添加 Section」时单独触发，因此未拖入内容的空布局仍会保留在画布上。
+ * 若指定 Section 的每一列都没有 Block，则从文档中移除该 Section。
+ * 在内容块被删除或拖走后调用，可与 `autoWrapSection` 搭配，避免单列 Section 在唯一块离场后仍残留空壳；
+ * 多列 Section 始终保留，便于继续向各列拖入内容。
+ * 仅处理刚变空的 Section，不会误删用户事先添加、尚未拖入内容的空布局。
  */
-export declare function pruneEmptySections(draft: EmailDoc): void;
+export declare function pruneSectionIfEmpty(draft: EmailDoc, sectionId: string): void;
 
 /**
  * 组件注册表。所有内置/自定义组件都通过 `defineBlock` 注册进来；
@@ -571,6 +648,9 @@ export { Selection_2 as Selection }
 
 declare type SelectionListener = () => void;
 
+/** 仅更新 layout 字段；两列间切换时列数不变，列内块按列下标保留 */
+export declare function setSectionLayout(section: Section, layout: SectionLayout): void;
+
 /**
  * 极小的不可变 store + 发布订阅 + history。
  * 所有变更都通过 `update(fn)` 走结构化克隆，保证：
@@ -607,12 +687,26 @@ export declare class Store {
     private _notify;
 }
 
+/** 从 Mustache token 提取 key，如 `{{username}}` → `username` */
+export declare function tokenToVariableKey(token: string): string;
+
+/** 两列 Section 的列宽比例（左栏拖入默认 `1-1`，右栏可改为 `1-2` / `2-1`） */
+export declare const TWO_COLUMN_LAYOUTS: readonly ["1-1", "1-2", "2-1"];
+
+export declare type TwoColumnLayout = (typeof TWO_COLUMN_LAYOUTS)[number];
+
 export declare interface Variable {
     /** Mustache 风格变量名，例如 user.name */
     key: string;
     label: string;
     /** 预览数据，仅设计态预览使用 */
     sample?: string;
+    /** 插入语义：纯文本占位 / 链接片段 / 图片块 */
+    kind?: 'text' | 'link' | 'image';
 }
 
+export declare type VariableKind = 'text' | 'link' | 'image';
+
+export declare function variablePlaceholder(key: string): string;
+
 export { }