mail-editor-pancake 0.0.8 → 0.0.9

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

@@ -1469,29 +1469,70 @@
 .sm-popover {
   position: absolute;
   z-index: 100;
-  min-width: 220px;
-  max-height: 280px;
-  overflow: auto;
+  min-width: 260px;
   background: var(--sm-surface);
   border: 1px solid var(--sm-border);
   border-radius: var(--sm-radius-sm);
   box-shadow: var(--sm-shadow-md);
 }
+
+.sm-popover--variables {
+  max-height: min(480px, 65vh);
+  overflow: auto;
+}
+
+.sm-popover__row {
+  display: flex;
+  align-items: stretch;
+  border-bottom: 1px solid var(--sm-border);
+}
+.sm-popover__row:last-child {
+  border-bottom: 0;
+}
+
 .sm-popover__item {
   display: flex;
   flex-direction: column;
   gap: 2px;
-  padding: 8px 12px;
+  flex: 1;
+  min-width: 0;
+  padding: 10px 12px;
   cursor: pointer;
   border: 0;
-  width: 100%;
   text-align: left;
   background: transparent;
   font: inherit;
 }
-.sm-popover__item:hover { background: var(--sm-primary-soft); }
-.sm-popover__key { font-family: monospace; color: var(--sm-primary); }
-.sm-popover__label { font-size: 11px; color: var(--sm-text-muted); }
+.sm-popover__item:hover { background: var(--sm-surface-hover); }
+.sm-popover__label { font-size: 13px; color: var(--sm-text); }
+.sm-popover__key {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 12px;
+  color: var(--sm-text-muted);
+}
+
+.sm-popover__actions {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 6px;
+  margin-right: 8px;
+}
+
+.sm-popover__action {
+  padding: 4px 10px;
+  border: 1px solid var(--sm-border);
+  border-radius: var(--sm-radius-sm);
+  background: var(--sm-surface);
+  color: var(--sm-text-muted);
+  font-size: 12px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.sm-popover__action:hover {
+  background: var(--sm-surface-hover);
+  color: var(--sm-text);
+}
 
 /* Modal -------------------------------------------------------------------- */
 /* 弹层常挂在 document.body，无 .sm-root 祖先时 CSS 变量不存在；凡 var(...) 须带浅色兜底，避免卡片「透明」与页面叠在一起 */

package/packages/core/src/index.ts

@@ -2,6 +2,17 @@ export { MailEditor } from './editor/Editor';
 export { defineBlock, Registry } from './registry/registry';
 export { mjRawCellTypographyFromStyles, mjRawEmailTableWrap } from './utils/lockedMjml';
 export { renderDoc, replaceVariables } from './renderer';
+export {
+  buildBodyVariableElementInsert,
+  buildBodyVariableInsert,
+  buildBodyVariableKeyInsert,
+  buildLinkVariableHtml,
+  defaultVariableSample,
+  normalizeVariable,
+  tokenToVariableKey,
+  variablePlaceholder,
+} from './variables';
+export type { BodyVariableInsert, VariableKind } from './variables';
 export { docToMjml } from './renderer/mjml';
 export {
   Store,

package/packages/core/src/types.ts

@@ -42,6 +42,8 @@ export interface Variable {
   label: string;
   /** 预览数据，仅设计态预览使用 */
   sample?: string;
+  /** 插入语义：纯文本占位 / 链接片段 / 图片块 */
+  kind?: 'text' | 'link' | 'image';
 }
 
 export type SectionLayout = '1' | '1-1' | '1-2' | '2-1' | '1-1-1';

package/packages/core/src/utils/richHtmlInsert.ts

@@ -0,0 +1,16 @@
+/**
+ * 向富文本 HTML 末尾「行内」追加内容，避免落在 `</p>` 外产生换行。
+ * 无块级标签时包一层 `<p style="margin:0;">`。
+ */
+export function appendInlineToRichHtml(html: string, insert: string): string {
+  const trimmed = String(html ?? '').trim();
+  if (!insert) return trimmed;
+  if (!trimmed) return `<p style="margin:0;">${insert}</p>`;
+
+  const blockClose = trimmed.match(/<\/(p|div|h[1-6]|li)>\s*$/i);
+  if (blockClose && blockClose.index != null) {
+    const idx = blockClose.index;
+    return trimmed.slice(0, idx) + insert + trimmed.slice(idx);
+  }
+  return trimmed + insert;
+}

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

@@ -0,0 +1,91 @@
+import type { Variable } from '../types';
+
+export type VariableKind = 'text' | 'link' | 'image';
+
+/** 从 Mustache token 提取 key，如 `{{username}}` → `username` */
+export function tokenToVariableKey(token: string): string {
+  const t = String(token || '').trim();
+  const m = t.match(/^\{\{\s*([^}]+?)\s*\}\}$/);
+  return (m?.[1] || t.replace(/^\{\{\s*/, '').replace(/\s*\}\}$/, '')).trim();
+}
+
+export function variablePlaceholder(key: string): string {
+  return `{{${key}}}`;
+}
+
+/** 无后端 sample 时按 kind / label 生成预览用示例值（仅预览弹窗等场景） */
+export function defaultVariableSample(v: Pick<Variable, 'key' | 'label' | 'kind' | 'sample'>): string {
+  if (v.sample != null && String(v.sample).trim() !== '') return String(v.sample);
+  if (v.kind === 'image') return 'https://via.placeholder.com/120x80/e8e8e8/666666?text=Image';
+  if (v.kind === 'link') return '#';
+  return v.label?.trim() || v.key;
+}
+
+/** 规范化 Variable（补 kind、sample） */
+export function normalizeVariable(v: Variable): Variable {
+  const key = v.key?.trim() || tokenToVariableKey(String(v.key));
+  const kind = v.kind ?? 'text';
+  return {
+    ...v,
+    key,
+    kind,
+    sample: defaultVariableSample({ ...v, key, kind }),
+  };
+}
+
+export function buildLinkVariableHtml(token: string, linkColor: string): string {
+  const safeHref = token.replace(/"/g, '&quot;');
+  const safeText = token
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+  return `<a href="${safeHref}" style="color:${linkColor} !important;text-decoration:underline;">${safeText}</a>`;
+}
+
+export interface BodyVariableInsert {
+  content: string;
+  asHtml: boolean;
+}
+
+/** 插入变量 key（`{{key}}`） */
+export function buildBodyVariableKeyInsert(v: Variable): BodyVariableInsert {
+  const normalized = normalizeVariable(v);
+  return { content: variablePlaceholder(normalized.key), asHtml: false };
+}
+
+/** 插入链接 / 图片等元素片段 */
+export function buildBodyVariableElementInsert(
+  v: Variable,
+  options?: { linkColor?: string; token?: string },
+): BodyVariableInsert {
+  const normalized = normalizeVariable(v);
+  const token = options?.token?.trim() || variablePlaceholder(normalized.key);
+  const linkColor = options?.linkColor?.trim() || '#ff5a00';
+
+  if (normalized.kind === 'link') {
+    return {
+      content: buildLinkVariableHtml(token, linkColor),
+      asHtml: true,
+    };
+  }
+  if (normalized.kind === 'image') {
+    const alt = tokenToVariableKey(token);
+    return {
+      content: `<img src="${token.replace(/"/g, '&quot;')}" alt="${alt.replace(/"/g, '&quot;')}" width="100" style="max-width:100%;height:auto;display:block;border:0;" />`,
+      asHtml: true,
+    };
+  }
+  return buildBodyVariableKeyInsert(normalized);
+}
+
+/** @deprecated 使用 buildBodyVariableKeyInsert / buildBodyVariableElementInsert */
+export function buildBodyVariableInsert(
+  v: Variable,
+  options?: { linkColor?: string; token?: string },
+): BodyVariableInsert {
+  const normalized = normalizeVariable(v);
+  if (normalized.kind === 'link' || normalized.kind === 'image') {
+    return buildBodyVariableElementInsert(normalized, options);
+  }
+  return buildBodyVariableKeyInsert(normalized);
+}