mail-editor-pancake 0.2.1 → 0.2.3

package/packages/core/src/editor/RightPanel.ts

@@ -32,7 +32,7 @@ import {
   resolveGlobalListIndentPx,
 } from '../utils/emailListStyles';
 import { FONT_WEIGHT_STEP_OPTIONS, normalizeFontWeightStep } from '../utils/fontWeightSteps';
-import type { ImageAssetsHandlers, ImageFieldContext } from './imageAssets';
+import { resolveAssetPermission, type ImageAssetsHandlers, type ImageFieldContext } from './imageAssets';
 import { FocusBreadcrumb } from './FocusBreadcrumb';
 import { openImageGalleryModal } from './ImageGalleryModal';
 import {
@@ -81,7 +81,7 @@ export interface RightPanelOptions {
   /** 点击路径中的文档级层级（等同 Esc 从 Section 上浮） */
   onFocusDocument: () => void;
   /**
-   * 可选。配置后，schema 中 `type: 'image'` 的字段会显示「上传 / 图床」按钮并调用对应回调。
+   * 可选。配置后，schema 中 `type: 'image'` 的字段会显示「上传 / 图库」按钮并调用对应回调。
    */
   imageAssets?: ImageAssetsHandlers;
   /** 与 MailEditor.opts.ui 对齐 */
@@ -562,6 +562,24 @@ export class RightPanel {
             `section:${section.id}:attrs.columnGap`,
           )
         : null,
+      section.layout !== '1' && !a.preserveColumnsOnMobile
+        ? this._numberField(
+            this.opts.t('rightPanel.section.stackedGap'),
+            a.columnStackedGap ?? 0,
+            0,
+            64,
+            (v) => {
+              const g = Math.max(0, Math.min(64, Math.round(v)));
+              this.opts.store.update((d) => {
+                const s = findSection(d, section.id);
+                if (s) s.attrs.columnStackedGap = g > 0 ? g : undefined;
+              });
+            },
+            1,
+            `section:${section.id}:attrs.stackedGap`,
+            this.opts.t('rightPanel.section.stackedGapHelp'),
+          )
+        : null,
       section.layout !== '1'
         ? this._switchField(
             this.opts.t('rightPanel.section.preserveMobile'),
@@ -939,7 +957,7 @@ export class RightPanel {
     ]);
   }
 
-  /** `type: 'image'`：URL 输入 + 可选上传、图床（由 `imageAssets` 注入） */
+  /** `type: 'image'`：URL 输入 + 可选上传、图库（由 `imageAssets` 注入） */
   private _imageField(
     label: string,
     value: string,
@@ -1005,19 +1023,33 @@ export class RightPanel {
           );
         },
       });
-      row.append(
-        h(
-          'button',
-          {
-            class: 'sm-btn sm-btn--secondary sm-image-field__btn',
-            type: 'button',
-            title: this.opts.t('rightPanel.image.uploadTitle'),
-            onclick: () => fileInp.click(),
-          },
-          [this.opts.t('rightPanel.image.upload')],
-        ),
+      const uploadPerm = resolveAssetPermission(
+        assets?.permissions,
+        'upload',
+        this.opts.t('common.noPermissionUpload'),
       );
-      row.append(fileInp);
+      if (!uploadPerm.allowed && uploadPerm.mode === 'hide') {
+        // 无权限且配置为隐藏：不渲染上传按钮（fileInp 同样不渲染）
+      } else {
+        row.append(
+          h(
+            'button',
+            {
+              class: 'sm-btn sm-btn--secondary sm-image-field__btn',
+              type: 'button',
+              title: uploadPerm.allowed
+                ? this.opts.t('rightPanel.image.uploadTitle')
+                : uploadPerm.tip,
+              disabled: !uploadPerm.allowed,
+              ...(uploadPerm.allowed
+                ? { onclick: () => fileInp.click() }
+                : {}),
+            },
+            [this.opts.t('rightPanel.image.upload')],
+          ),
+        );
+        row.append(fileInp);
+      }
     }
 
     if (showGalleryBtn) {
@@ -1032,6 +1064,7 @@ export class RightPanel {
               if (assets.imageGallery) {
                 openImageGalleryModal({
                   adapter: assets.imageGallery,
+                  permissions: assets?.permissions,
                   onPick: (url) => applyUrl(url),
                   t: this.opts.t,
                   parent: this.el.closest('.sm-root') as HTMLElement | undefined,
@@ -1122,6 +1155,24 @@ export class RightPanel {
     onChange: (v: number) => void,
     step = 1,
     focusToken?: string,
+    help?: string,
+  ): HTMLElement {
+    const field = this._buildNumberField(label, value, min, max, onChange, step, focusToken);
+    if (!help) return field;
+    return h('div', { class: 'sm-field', style: 'flex-direction:column;align-items:flex-start;gap:6px;' }, [
+      field,
+      h('div', { class: 'sm-field__help' }, [help]),
+    ]);
+  }
+
+  private _buildNumberField(
+    label: string,
+    value: number,
+    min: number,
+    max: number,
+    onChange: (v: number) => void,
+    step = 1,
+    focusToken?: string,
   ) {
     const snap = (n: number) => {
       const c = Math.min(max, Math.max(min, n));

package/packages/core/src/editor/imageAssets.ts

@@ -1,5 +1,5 @@
 /**
- * 右侧「图片地址」类字段：宿主可选手输 URL、本地上传、内置图库弹层或完全自管图床回调。
+ * 右侧「图片地址」类字段：宿主可选手输 URL、本地上传、内置图库弹层或完全自管图库回调。
  * 编辑器最终只把 URL 写入 props。
  */
 
@@ -26,6 +26,62 @@ export interface ImageGalleryListResult {
   hasMore: boolean;
 }
 
+/**
+ * 资源动作权限的语义标识。宿主在 `ImageAssetPermissions.check` 中据此返回是否有权限：
+ * - `'upload'`：右栏「上传」按钮、图库弹层「上传」按钮（对应创建/上传权限）
+ * - `'addUrl'`：图库弹层「添加链接」按钮（对应创建权限）
+ * - `'delete'`：图库弹层缩略图删除按钮（对应删除权限）
+ */
+export type AssetPermissionAction = 'upload' | 'addUrl' | 'delete';
+
+/**
+ * 图片资源动作的权限管控配置。未配置 `check` 时视为全部有权限（不做管控）。
+ */
+export interface ImageAssetPermissions {
+  /**
+   * 权限校验：返回 `false` 表示该动作无权限。
+   * 未配置时视为全部有权限。
+   */
+  check?: (action: AssetPermissionAction) => boolean;
+  /**
+   * 无权限时的表现：
+   * - `'disable'`（默认）：按钮置灰禁用，hover 提示无权限。
+   * - `'hide'`：直接隐藏对应按钮。
+   */
+  noPermissionMode?: 'disable' | 'hide';
+  /**
+   * 无权限禁用时 hover 提示文案；未配置或为空时使用编辑器默认文案（`common.noPermission`）。
+   */
+  noPermissionTip?: string;
+}
+
+/** `resolveAssetPermission` 的结果。 */
+export interface ResolvedAssetPermission {
+  /** `true` 表示有权限 */
+  allowed: boolean;
+  /** 无权限时的表现（仅在 `allowed === false` 时有意义） */
+  mode: 'disable' | 'hide';
+  /** 无权限禁用时的 hover 提示文案（仅在 `allowed === false` 且 `mode === 'disable'` 时有意义） */
+  tip: string;
+}
+
+/**
+ * 解析某个动作的权限状态。未配置 `permissions` 或 `check` 时视为有权限。
+ * @param defaultNoPermissionTip 编辑器默认的无权限提示文案（由调用方从 i18n 传入）
+ */
+export function resolveAssetPermission(
+  permissions: ImageAssetPermissions | undefined,
+  action: AssetPermissionAction,
+  defaultNoPermissionTip: string,
+): ResolvedAssetPermission {
+  if (!permissions?.check) return { allowed: true, mode: 'disable', tip: '' };
+  const allowed = permissions.check(action);
+  if (allowed) return { allowed: true, mode: 'disable', tip: '' };
+  const mode: 'disable' | 'hide' = permissions.noPermissionMode === 'hide' ? 'hide' : 'disable';
+  const tip = (permissions.noPermissionTip ?? '').trim() || defaultNoPermissionTip;
+  return { allowed: false, mode, tip };
+}
+
 /**
  * 内置图库弹层的数据与扩展能力。实现 `listItems` 即可；上传、链接添加、删除等仅在提供对应方法时显示。
  */
@@ -47,7 +103,7 @@ export interface ImageAssetsHandlers {
   uploadImage?: (file: File, ctx: ImageFieldContext) => Promise<string>;
 
   /**
-   * 完全自管图床：与内置 `imageGallery` 可并存；
+   * 完全自管图库：与内置 `imageGallery` 可并存；
    * **同时配置时优先使用内置 `imageGallery` 弹层**。
    */
   pickImageFromGallery?: (ctx: ImageFieldContext) => Promise<string | null>;
@@ -65,8 +121,14 @@ export interface ImageAssetsHandlers {
   showUpload?: boolean;
 
   /**
-   * 是否显示「图床」按钮。在配置了 `pickImageFromGallery` 或 `imageGallery` 时有效。
+   * 是否显示「图库」按钮。在配置了 `pickImageFromGallery` 或 `imageGallery` 时有效。
    * 默认 `false`；需显式设为 `true` 才展示入口。
    */
   showGallery?: boolean;
+
+  /**
+   * 资源动作权限管控。配置后，「上传 / 添加链接 / 删除」按钮将按 `check` 结果禁用或隐藏。
+   * 默认无权限时禁用并 hover 提示。右栏「上传」与图库弹层内按钮共用同一份配置。
+   */
+  permissions?: ImageAssetPermissions;
 }

package/packages/core/src/editor/styles.css

@@ -1294,6 +1294,14 @@
   border-color: var(--sm-primary);
 }
 
+.sm-input[disabled],
+.sm-textarea[disabled],
+.sm-select[disabled] {
+  opacity: 0.55;
+  cursor: not-allowed;
+  background: var(--sm-surface-disabled, #f3f4f6);
+}
+
 .sm-spacing-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
@@ -2148,6 +2156,13 @@
 .sm-gallery-modal__cell-delete:hover {
   background: var(--sm-danger, #dc2626);
 }
+.sm-gallery-modal__cell-delete[disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.sm-gallery-modal__cell-delete[disabled]:hover {
+  background: rgba(15, 23, 42, 0.82);
+}
 
 .sm-gallery-modal__cell {
   display: flex;

package/packages/core/src/i18n/index.ts

@@ -31,6 +31,10 @@ export const zhCNMessages: SimpleMailMessages = {
   'common.insert': '插入',
   'common.copy': '复制',
   'common.image': '图片',
+  'common.noPermission': '无权限',
+  'common.noPermissionUpload': '无上传权限',
+  'common.noPermissionAdd': '无添加权限',
+  'common.noPermissionDelete': '无删除权限',
   'common.left': '左',
   'common.center': '居中',
   'common.right': '右',
@@ -136,6 +140,8 @@ export const zhCNMessages: SimpleMailMessages = {
   'rightPanel.section.widthHelp': '留空=与邮件同宽；自适应等价于清空宽度',
   'rightPanel.section.padding': '内边距',
   'rightPanel.section.columnGap': '列间距 (px)',
+  'rightPanel.section.stackedGap': '堆叠纵向间距 (px)',
+  'rightPanel.section.stackedGapHelp': '小屏堆叠为单列后，相邻列之间的额外纵向间距；0 表示沿用块自身内边距。',
   'rightPanel.section.preserveMobile': '小屏仍并排显示多列（可能字很窄）',
   'rightPanel.section.preserveMobileHelp': '开启后 MJML 会生成 mj-group，移动端预览/导出与默认「小屏堆叠列」行为不同。',
   'rightPanel.section.columnLayout': '列布局',
@@ -145,10 +151,10 @@ export const zhCNMessages: SimpleMailMessages = {
   'rightPanel.image.uploadTitle': '上传本地图片',
   'rightPanel.image.upload': '上传',
   'rightPanel.image.galleryTitle': '从图库选择',
-  'rightPanel.image.gallery': '图床',
+  'rightPanel.image.gallery': '图库',
   'rightPanel.image.helpManual': '可手输 URL',
   'rightPanel.image.helpUpload': '或使用「上传」',
-  'rightPanel.image.helpGallery': '或使用「图床」',
+  'rightPanel.image.helpGallery': '或使用「图库」',
   'rightPanel.image.helpSeparator': '；',
   'rightPanel.image.helpEnd': '。',
   'rightPanel.image.helpAssetsConfigured': '已传入 imageAssets：上传默认显示（提供 uploadImage 且未设 showUpload:false）；图库需 showGallery:true，可使用内置 imageGallery 或自管 pickImageFromGallery。仍可手输 URL。',
@@ -334,6 +340,10 @@ export const enUSMessages: SimpleMailMessages = {
   'common.insert': 'Insert',
   'common.copy': 'Copy',
   'common.image': 'Image',
+  'common.noPermission': 'No permission',
+  'common.noPermissionUpload': 'No upload permission',
+  'common.noPermissionAdd': 'No add permission',
+  'common.noPermissionDelete': 'No delete permission',
   'common.left': 'Left',
   'common.center': 'Center',
   'common.right': 'Right',
@@ -439,6 +449,8 @@ export const enUSMessages: SimpleMailMessages = {
   'rightPanel.section.widthHelp': 'Empty = email width. Auto is equivalent to clearing the width.',
   'rightPanel.section.padding': 'Padding',
   'rightPanel.section.columnGap': 'Column gap (px)',
+  'rightPanel.section.stackedGap': 'Stacked vertical gap (px)',
+  'rightPanel.section.stackedGapHelp': 'Extra vertical space between columns once they stack on small screens. 0 keeps each block own padding.',
   'rightPanel.section.preserveMobile': 'Keep columns side by side on small screens',
   'rightPanel.section.preserveMobileHelp': 'When enabled, MJML outputs mj-group. Mobile preview/export differs from the default stacked-column behavior.',
   'rightPanel.section.columnLayout': 'Column layout',

package/packages/core/src/index.ts

@@ -86,12 +86,16 @@ export type {
 } from './types';
 export type { EditorTheme } from './editor/theme';
 export type {
+  AssetPermissionAction,
   GalleryItem,
   ImageAssetsHandlers,
+  ImageAssetPermissions,
   ImageFieldContext,
   ImageGalleryAdapter,
   ImageGalleryListResult,
+  ResolvedAssetPermission,
 } from './editor/imageAssets';
+export { resolveAssetPermission } from './editor/imageAssets';
 export type { OpenImageGalleryModalOptions } from './editor/ImageGalleryModal';
 export { openImageGalleryModal } from './editor/ImageGalleryModal';
 export {

package/packages/core/src/renderer/mjml.ts

@@ -34,6 +34,7 @@ export function docToMjml(doc: EmailDoc, registry: Registry): string {
     <mj-style>
       a { color: ${escapeAttr(attrs.linkColor)}; }
 ${sectionWidthConstraintCss(doc)}
+${columnGapMobileCss(doc)}
     </mj-style>
   </mj-head>
   <mj-body background-color="${escapeAttr(attrs.backgroundColor)}" width="${escapeAttr(docContentWidthCss(doc.meta.width))}">
@@ -55,6 +56,65 @@ function sectionWidthConstraintCss(doc: EmailDoc): string {
     .join('\n');
 }
 
+/**
+ * 列间距相关的小屏规则。
+ *
+ * 1) 水平间距（columnGap）用 mj-column 对称 padding 实现，小屏堆叠后 padding 不消失会导致
+ *    相邻列内容纵向错位（首列右缩、次列左缩），需要在堆叠时清零。
+ * 2) 堆叠纵向间距（columnStackedGap）只挂在非末列上，作为堆叠后相邻列之间的额外间距。
+ *
+ * 共同注意点：mj-column 的 padding 不落在带 css-class 的外层 div 上，编译结果是
+ * `div[class] > table > tbody > tr > td{padding:...}`，所以规则必须命中这一层 td，
+ * 用直接子代链避免波及块自身的 padding。
+ * 断点取 MJML 默认堆叠断点 480px；!important 用于覆盖行内样式。
+ * 仅对会小屏堆叠的列生效；mj-group（preserveColumnsOnMobile）不堆叠，不注入。
+ */
+const COLUMN_GAP_MOBILE_BREAKPOINT = 480;
+
+function columnGapClassName(sectionId: string): string {
+  return `${sectionMjClassName(sectionId)}-cg`;
+}
+
+function columnStackedGapClassName(sectionId: string): string {
+  return `${sectionMjClassName(sectionId)}-svg`;
+}
+
+/** 该 Section 的列是否会在小屏堆叠（未包 mj-group 的多列） */
+function stacksOnMobile(section: Section): boolean {
+  return section.columns.length > 1 && section.attrs.preserveColumnsOnMobile !== true;
+}
+
+function columnGapMobileCss(doc: EmailDoc): string {
+  const lines: string[] = [];
+
+  for (const s of doc.sections) {
+    if (!stacksOnMobile(s)) continue;
+    const gap = Math.max(0, s.attrs.columnGap ?? 0);
+    const stackedGap = Math.max(0, Math.round(s.attrs.columnStackedGap ?? 0));
+    if (gap <= 0 && stackedGap <= 0) continue;
+
+    if (gap > 0) {
+      const cls = columnGapClassName(s.id);
+      lines.push(
+        `        .${cls},`,
+        `        .${cls} > table > tbody > tr > td { padding-left: 0 !important; padding-right: 0 !important; }`,
+      );
+    }
+    if (stackedGap > 0) {
+      lines.push(
+        `        .${columnStackedGapClassName(
+          s.id,
+        )} > table > tbody > tr > td { padding-bottom: ${stackedGap}px !important; }`,
+      );
+    }
+  }
+
+  if (!lines.length) return '';
+  return `      @media only screen and (max-width:${COLUMN_GAP_MOBILE_BREAKPOINT}px) {
+${lines.join('\n')}
+      }`;
+}
+
 function sectionToMjml(section: Section, registry: Registry, ctx: RenderContext): string {
   const a = section.attrs;
   const padding = [a.paddingTop, a.paddingRight, a.paddingBottom, a.paddingLeft]
@@ -67,10 +127,27 @@ function sectionToMjml(section: Section, registry: Registry, ctx: RenderContext)
     secW || dvKey ? ` css-class="${escapeAttr(sectionMjClassName(section.id))}"` : '';
   const widths = layoutWidths(section.layout);
   const gapPx = Math.max(0, section.attrs.columnGap ?? 0);
+  /** 仅小屏堆叠时才有水平复位与纵向间距；与下方 grouped 判定保持一致 */
+  const stacked = stacksOnMobile(section);
+  const hCls = stacked && gapPx > 0 ? columnGapClassName(section.id) : '';
+  const vCls =
+    stacked && Math.max(0, Math.round(section.attrs.columnStackedGap ?? 0)) > 0
+      ? columnStackedGapClassName(section.id)
+      : '';
+  const lastIndex = section.columns.length - 1;
 
   const columns = section.columns
     .map((col, i) =>
-      columnToMjml(col, widths[i], i, section.columns.length, gapPx, registry, ctx),
+      columnToMjml(
+        col,
+        widths[i],
+        i,
+        section.columns.length,
+        gapPx,
+        [hCls, vCls && i < lastIndex ? vCls : ''].filter(Boolean).join(' '),
+        registry,
+        ctx,
+      ),
     )
     .join('\n');
 
@@ -92,6 +169,7 @@ function columnToMjml(
   columnIndex: number,
   columnCount: number,
   columnGapPx: number,
+  gapClassNames: string,
   registry: Registry,
   ctx: RenderContext,
 ): string {
@@ -106,6 +184,7 @@ function columnToMjml(
     const pr = columnIndex < columnCount - 1 ? `${half}px` : '0px';
     gapPad = ` padding="0px ${pr} 0px ${pl}"`;
   }
+  const clsAttr = gapClassNames ? ` css-class="${escapeAttr(gapClassNames)}"` : '';
 
   const rawTypo = mjRawCellTypographyFromStyles(ctx.doc.styles);
   const blocks = column.blocks
@@ -129,7 +208,7 @@ function columnToMjml(
     })
     .join('\n');
 
-  return `      <mj-column width="${width}"${va}${bg}${gapPad}>
+  return `      <mj-column width="${width}"${va}${bg}${gapPad}${clsAttr}>
 ${blocks || '        <!-- empty column -->'}
       </mj-column>`;
 }

package/packages/core/src/types.ts

@@ -77,6 +77,13 @@ export interface SectionAttrs {
    * MJML 通过相邻 `mj-column` 对称内边距实现；画布用 flex `gap` 对齐观感。
    */
   columnGap?: number;
+  /**
+   * 多列在小屏堆叠为单列后，相邻列之间的纵向间距（px）。
+   * 仅在多列且未开启 `preserveColumnsOnMobile` 时生效；未设置/0 表示不额外加间距
+   * （沿用块自身 padding 形成的间距），避免改变已有邮件的移动端排版。
+   * 通过小屏媒体查询实现，不会影响桌面端行高。
+   */
+  columnStackedGap?: number;
   /**
    * 本节内容区最大宽度（窄于邮件 `meta.width` 时居中）。支持 `480`、`480px`、`90%`；留空则与邮件同宽。
    */
@@ -195,10 +202,21 @@ export interface BlockDefinition<P extends object = Record<string, unknown>> {
   ) => Block[] | PaletteDropResult;
 }
 
-/** 左栏组合拖入：可附带新建 Section 的 attrs（如 meta 扩展袋） */
+/** 左栏组合拖入：可附带新建 Section 的 attrs、布局和按列分发的 Block。 */
 export interface PaletteDropResult {
+  /** 单列组合或落入既有列时插入的 Block。 */
   blocks: Block[];
   sectionAttrs?: Partial<SectionAttrs>;
+  /**
+   * 组合入口可声明要新建的 Section 布局；多列布局会始终创建独立 Section，
+   * 不会被插入到用户当前选中的单列中。
+   */
+  sectionLayout?: SectionLayout;
+  /**
+   * 仅创建新 Section 时使用；每个数组对应一个 Column，索引与 Section 列顺序一致。
+   * 超出布局列数的数组会被忽略，缺少的列保持为空。
+   */
+  columnBlocks?: Block[][];
 }
 
 export interface InlineEditableConfig<P extends object = Record<string, unknown>> {