mail-editor-pancake 0.0.7 → 0.0.8

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

@@ -151,6 +151,55 @@
   flex: 1;
 }
 
+.sm-focus-crumb {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 2px;
+  width: 100%;
+  min-width: 0;
+  font-size: 12px;
+  line-height: 1.35;
+  color: var(--sm-text-muted);
+}
+.sm-focus-crumb__sep {
+  flex-shrink: 0;
+  padding: 0 2px;
+  color: var(--sm-text-muted);
+  opacity: 0.55;
+  user-select: none;
+}
+.sm-focus-crumb__item {
+  display: inline-block;
+  max-width: 9em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border: 0;
+  background: transparent;
+  padding: 2px 6px;
+  margin: 0;
+  border-radius: var(--sm-radius-sm);
+  font: inherit;
+  font-size: 12px;
+  color: var(--sm-text-muted);
+  cursor: pointer;
+  vertical-align: middle;
+}
+.sm-focus-crumb__item:hover {
+  background: var(--sm-ghost-hover-bg);
+  color: var(--sm-text);
+}
+.sm-focus-crumb__item--current {
+  color: var(--sm-text);
+  font-weight: 600;
+  cursor: default;
+}
+.sm-focus-crumb__item--current:hover {
+  background: transparent;
+  color: var(--sm-text);
+}
+
 .sm-topbar__theme-seg {
   flex-shrink: 0;
 }
@@ -205,6 +254,17 @@
   display: block;
   flex-shrink: 0;
 }
+.sm-topbar__toggle-btn[aria-pressed="true"] {
+  background: var(--sm-primary-soft);
+  color: var(--sm-primary);
+}
+.sm-topbar__toggle-btn .sm-layout-borders-check {
+  opacity: 0;
+  transition: opacity 0.12s ease;
+}
+.sm-topbar__toggle-btn[aria-pressed="true"] .sm-layout-borders-check {
+  opacity: 1;
+}
 
 .sm-btn {
   display: inline-flex;
@@ -309,7 +369,30 @@
   overflow: auto;
   min-width: 0;
 }
-.sm-panel--right { border-right: 0; border-left: 1px solid var(--sm-border); }
+.sm-panel--right {
+  border-right: 0;
+  border-left: 1px solid var(--sm-border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.sm-panel__head {
+  flex-shrink: 0;
+  padding: 10px 12px 8px;
+  border-bottom: 1px solid var(--sm-border);
+  background: var(--sm-panel-bg);
+}
+
+.sm-panel__head[hidden] {
+  display: none;
+}
+
+.sm-panel__body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
 
 .sm-panel__title {
   font-size: 12px;
@@ -403,19 +486,46 @@
   /* 由 Canvas 在运行时设为 doc.styles.linkColor；兜底与默认邮件 link 橙一致 */
   --sm-editor-link-color: #ff5a00;
 }
-/* 用户代理对 <a> 的默认色会盖过继承的 color，需与预览/MJML 全局链接色对齐 */
-.sm-canvas a,
-.sm-canvas a:link,
-.sm-canvas a:visited,
-.sm-canvas a:hover,
-.sm-canvas a:active {
-  color: var(--sm-editor-link-color) !important;
+/*
+ * 无 inline color 时使用文档级链接色；局部 style 优先于全局（不用 !important，避免盖过 foreColor）。
+ * 属性选择器排除 background-color 等误匹配（仅匹配 style 中的 color: 声明）。
+ */
+.sm-canvas a:not([style^="color:"]):not([style*=";color:"]):not([style*="; color:"]),
+.sm-canvas a:not([style^="color:"]):not([style*=";color:"]):not([style*="; color:"]):link,
+.sm-canvas a:not([style^="color:"]):not([style*=";color:"]):not([style*="; color:"]):visited,
+.sm-canvas a:not([style^="color:"]):not([style*=";color:"]):not([style*="; color:"]):hover,
+.sm-canvas a:not([style^="color:"]):not([style*=";color:"]):not([style*="; color:"]):active {
+  color: var(--sm-editor-link-color);
 }
 
 .sm-canvas .sm-text-content :where(p) {
   margin: 0;
 }
 
+/* 宿主全局 reset（如 p/strong { font-weight:400 }）会盖过块级字重配置，子节点须继承容器 */
+.sm-canvas .sm-text-content :where(
+    p,
+    li,
+    td,
+    th,
+    span,
+    div,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    address,
+    caption
+  ) {
+  font-weight: inherit;
+}
+
+.sm-canvas .sm-text-content :where(strong, b) {
+  font-weight: bolder;
+}
+
 .sm-canvas .sm-text-content :where(ul, ol) {
   margin: 0.5em 0;
   padding-left: 1.5em;
@@ -430,15 +540,31 @@
   list-style-type: decimal;
 }
 
-/* Section 在画布中的呈现层（包了一层壳便于选中/排序） */
+/* Section 外层：Sortable 拖拽壳，与列内 Sortable 分离避免嵌套冲突 */
+.sm-section-host {
+  position: relative;
+}
+.sm-section-host:hover,
+.sm-section-host.is-selected,
+.sm-section-host.sm-chosen,
+.sm-section-host.sm-drag {
+  z-index: 5;
+}
+
+/* Section 在画布中的呈现层 */
 .sm-section {
   position: relative;
   outline: 1px dashed transparent;
   outline-offset: -1px;
   transition: outline-color 0.12s;
 }
-.sm-section:hover { outline-color: var(--sm-outline-muted); }
-.sm-section.is-selected {
+.sm-root.sm-show-layout-borders .sm-section {
+  outline-color: var(--sm-outline-muted);
+}
+.sm-section-host:hover .sm-section {
+  outline-color: var(--sm-outline-muted);
+}
+.sm-section-host.is-selected .sm-section {
   outline: 2px solid var(--sm-primary);
 }
 .sm-section__toolbar {
@@ -446,19 +572,37 @@
   top: auto;
   bottom: 100%;
   right: 8px;
+  left: auto;
   margin-bottom: 10px;
-  z-index: 1;
+  z-index: 10;
   display: none;
   align-items: center;
   gap: 6px;
   flex-direction: row;
   flex-wrap: nowrap;
   max-width: calc(100% - 16px);
-  /* 贴在 Section 上沿之上，避免压住白纸圆角与选中描边（translateY(-100%) 在部分布局下仍会叠在内容上） */
+  pointer-events: auto;
+  transition: margin-bottom 0.12s ease;
+  /* 贴在 Section 上沿之上，避免压住白纸圆角与选中描边 */
   transform: none;
 }
-.sm-section.is-selected .sm-section__toolbar,
-.sm-section:hover .sm-section__toolbar {
+/* 内部 Block 工具条可见时，Section 工具条上移让位（尤其多列第一列 Block 条在左侧，避免叠层抢点击） */
+.sm-section-host:has(.sm-block:hover) .sm-section__toolbar,
+.sm-section-host:has(.sm-block.is-selected) .sm-section__toolbar,
+.sm-section-host:has(.sm-block.is-editing) .sm-section__toolbar {
+  /* margin-bottom: calc(10px + 44px); */
+}
+/* Block 交互时抬高内容层，保证列内工具条（z-index:30）在 Section 工具条之上可点 */
+.sm-section-host:has(.sm-block:hover) .sm-section,
+.sm-section-host:has(.sm-block.is-selected) .sm-section,
+.sm-section-host:has(.sm-block.is-editing) .sm-section {
+  position: relative;
+  z-index: 20;
+}
+.sm-section-host.is-selected .sm-section__toolbar,
+.sm-section-host:hover .sm-section__toolbar,
+.sm-section-host.sm-chosen .sm-section__toolbar,
+.sm-section-host.sm-drag .sm-section__toolbar {
   display: inline-flex;
 }
 .sm-section__toolbar-label {
@@ -474,7 +618,7 @@
   user-select: none;
   flex-shrink: 0;
 }
-.sm-section.is-selected .sm-section__toolbar-label {
+.sm-section-host.is-selected .sm-section__toolbar-label {
   border-color: var(--sm-primary-soft);
   color: var(--sm-primary);
 }
@@ -484,9 +628,28 @@
   gap: 4px;
   flex-shrink: 0;
 }
-.sm-section.is-selected .sm-section__toolbar-actions {
+.sm-section-host.is-selected .sm-section__toolbar-actions,
+.sm-section-host.sm-chosen .sm-section__toolbar-actions,
+.sm-section-host.sm-drag .sm-section__toolbar-actions {
   display: inline-flex;
 }
+.sm-section-host.is-selected .sm-section__toolbar,
+.sm-section-host.sm-chosen .sm-section__toolbar,
+.sm-section-host.sm-drag .sm-section__toolbar {
+  background: rgba(31, 35, 40, 0.92);
+  padding: 4px 6px;
+  border-radius: 6px;
+  box-shadow: 0 4px 14px rgba(16, 24, 40, 0.14);
+}
+.sm-section-host.is-selected .sm-section__toolbar-label,
+.sm-section-host.sm-chosen .sm-section__toolbar-label,
+.sm-section-host.sm-drag .sm-section__toolbar-label {
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  padding: 0;
+  color: rgba(255, 255, 255, 0.88);
+}
 .sm-tool-btn {
   width: 24px;
   height: 24px;
@@ -501,13 +664,18 @@
 }
 .sm-tool-btn:hover { filter: brightness(1.1); }
 .sm-tool-btn--danger { background: var(--sm-danger); }
+.sm-section__handle { cursor: grab; }
+.sm-section__handle:active { cursor: grabbing; }
 
 .sm-section__columns {
   position: relative;
-  z-index: 2;
   display: flex;
   width: 100%;
 }
+.sm-section-host.sm-chosen .sm-section__columns,
+.sm-section-host.sm-drag .sm-section__columns {
+  pointer-events: none;
+}
 
 .sm-column {
   flex: 1 1 auto;
@@ -540,13 +708,30 @@
 .sm-block {
   position: relative;
   outline: 1px dashed transparent;
-  outline-offset: -2px;
+  /* 不用负 offset，避免行首 caret 被描边盖住 */
+  outline-offset: 0;
 }
-.sm-block:hover { outline-color: var(--sm-outline-muted); }
-.sm-block.is-selected { outline: 2px solid var(--sm-primary); }
-.sm-block.is-editing {
+.sm-root.sm-show-layout-borders .sm-block:not(.is-selected):not(.is-editing) {
+  outline-color: var(--sm-outline-muted);
+}
+.sm-block:hover:not(.is-selected):not(.is-editing) {
+  outline-color: var(--sm-outline-muted);
+}
+.sm-block.is-selected:not(.is-editing) {
   outline: 2px solid var(--sm-primary);
+}
+.sm-block.is-editing {
+  /* 编辑中：块级虚线框（偏外），与内层 focus 实线区分 */
+  outline: 1px dashed color-mix(in srgb, var(--sm-primary) 55%, var(--sm-border));
+  outline-offset: 3px;
   cursor: text;
+  /* 列内 Block 按 DOM 顺序绘制；下方块（如 padding-top:0 的分割线）会盖住 offset 描边 */
+  z-index: 3;
+}
+/* hover / 选中态同样抬升，避免 2px 实线描边被相邻块遮挡（编辑态 z-index 更高，见 .is-editing） */
+.sm-block:hover:not(.is-editing),
+.sm-block.is-selected:not(.is-editing) {
+  z-index: 2;
 }
 .sm-block__content { position: relative; }
 
@@ -556,7 +741,7 @@
   bottom: 100%;
   right: 0;
   margin-bottom: 8px;
-  z-index: 20;
+  z-index: 30;
   display: none;
   align-items: center;
   gap: 6px;
@@ -733,6 +918,7 @@
   align-items: center;
 }
 .sm-social-link-list__color {
+  cursor: pointer;
   width: 100%;
   height: 32px;
   padding: 2px;
@@ -853,6 +1039,16 @@
   text-align: center;
   line-height: 1.2;
 }
+.sm-spacing-row input[type='range'],
+.sm-field__slider-row input[type='range'],
+.sm-width-field__slider-row input[type='range'] {
+  cursor: pointer;
+}
+.sm-spacing-row input[type='range']::-webkit-slider-thumb,
+.sm-field__slider-row input[type='range']::-webkit-slider-thumb,
+.sm-width-field__slider-row input[type='range']::-webkit-slider-thumb {
+  cursor: pointer;
+}
 .sm-spacing-row input[type='range'] {
   flex: 1 1 auto;
   min-width: 0;
@@ -880,11 +1076,67 @@
   font-size: 11px;
 }
 
+.sm-field__label-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.sm-inherit-switch {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.sm-inherit-switch__label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  user-select: none;
+}
+.sm-inherit-switch__text {
+  font-size: 12px;
+  color: var(--sm-text-muted);
+}
+.sm-inherit-switch__input {
+  width: 28px;
+  height: 16px;
+  margin: 0;
+  accent-color: var(--sm-primary);
+  cursor: pointer;
+}
+.sm-inherit-switch__value {
+  font-size: 12px;
+  color: var(--sm-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+.sm-inherit-switch__value[hidden] {
+  display: none;
+}
+.sm-segmented--disabled {
+  opacity: 0.45;
+}
+
 .sm-field__slider-row {
   display: flex;
   align-items: center;
   gap: 8px;
 }
+.sm-field__slider-row--inherit {
+  opacity: 0.55;
+}
+.sm-field__slider-row--inherit input[type='range'] {
+  accent-color: var(--sm-outline-muted);
+}
+.sm-field__slider-row--inherit input[type='number']:disabled {
+  background: var(--sm-surface-hover);
+  color: var(--sm-text-muted);
+}
+.sm-input--inherit-disabled {
+  opacity: 0.55;
+}
 .sm-field__slider-row input[type='range'] {
   flex: 1;
   min-width: 0;
@@ -937,6 +1189,11 @@
   border: 1px solid var(--sm-border);
   border-radius: 6px;
   background: none;
+  cursor: pointer;
+}
+.sm-color-row input[type='color'].sm-color-row__pick--inherit {
+  opacity: 0.55;
+  border-style: dashed;
 }
 
 .sm-empty-form {
@@ -1009,13 +1266,26 @@
 
 /* 内联编辑 + 富文本浮动工具条 -------------------------------------------- */
 .sm-inline-editing {
-  outline: 2px dashed var(--sm-primary) !important;
+  /* 编辑中未聚焦（如点浮动工具条）：虚线 + 淡底；正 offset 不挡行首 caret */
+  outline: 2px dashed color-mix(in srgb, var(--sm-primary) 70%, var(--sm-outline-muted)) !important;
   outline-offset: 2px;
+  box-shadow: none;
+  border-radius: 2px;
+  background-color: color-mix(in srgb, var(--sm-primary-soft) 55%, transparent);
   cursor: text;
   min-height: 1em;
   caret-color: var(--sm-primary);
+  transition:
+    outline-color 0.12s ease,
+    box-shadow 0.12s ease,
+    background-color 0.12s ease;
+}
+.sm-inline-editing:focus {
+  outline: 2px solid var(--sm-primary) !important;
+  outline-offset: 2px;
+  box-shadow: 0 0 0 4px var(--sm-primary-soft);
+  background-color: color-mix(in srgb, var(--sm-primary-soft) 35%, transparent);
 }
-.sm-inline-editing:focus { outline-style: solid !important; }
 .sm-inline-editing:empty::before {
   content: attr(data-placeholder);
   color: var(--sm-placeholder);
@@ -1112,6 +1382,89 @@
 .sm-floating-toolbar__link-panel .sm-input::placeholder { color: rgba(255,255,255,0.5); }
 .sm-floating-toolbar__link-panel .sm-btn { height: 26px; }
 
+/* 自定义色板（右栏 / 富文本色卡） ---------------------------------------- */
+.sm-color-picker-layer {
+  position: absolute;
+  z-index: 210;
+}
+.sm-color-picker {
+  width: 220px;
+  padding: 10px;
+  background: var(--sm-surface, #fff);
+  border: 1px solid var(--sm-border, #e6e8ec);
+  border-radius: var(--sm-radius-sm, 6px);
+  box-shadow: var(--sm-shadow-md, 0 4px 16px rgba(16, 24, 40, 0.08));
+}
+.sm-color-picker__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+.sm-color-picker__title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--sm-text, #1f2328);
+}
+.sm-color-picker__close {
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--sm-radius-sm, 6px);
+  background: transparent;
+  color: var(--sm-text-muted, #6b7280);
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+}
+.sm-color-picker__close:hover {
+  background: var(--sm-ghost-hover-bg, #f0f1f4);
+  color: var(--sm-text, #1f2328);
+}
+.sm-color-picker__swatches {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 4px;
+  margin-bottom: 8px;
+}
+.sm-color-picker__swatch {
+  width: 100%;
+  aspect-ratio: 1;
+  padding: 0;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 4px;
+  cursor: pointer;
+}
+.sm-color-picker__swatch:hover {
+  outline: 2px solid var(--sm-primary, #4f46e5);
+  outline-offset: 1px;
+}
+.sm-color-picker__native {
+  width: 100%;
+  height: 32px;
+  margin-bottom: 6px;
+  padding: 0;
+  border: 1px solid var(--sm-border, #e6e8ec);
+  border-radius: 6px;
+  cursor: pointer;
+}
+.sm-color-picker__hex {
+  width: 100%;
+  text-align: center;
+}
+.sm-color-picker__foot {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 8px;
+}
+.sm-color-picker__clear {
+  height: 26px;
+  font-size: 12px;
+}
+
 /* 弹层（变量插入） ------------------------------------------------------- */
 .sm-popover {
   position: absolute;

package/packages/core/src/index.ts

@@ -3,7 +3,18 @@ export { defineBlock, Registry } from './registry/registry';
 export { mjRawCellTypographyFromStyles, mjRawEmailTableWrap } from './utils/lockedMjml';
 export { renderDoc, replaceVariables } from './renderer';
 export { docToMjml } from './renderer/mjml';
-export { Store, createSection, findSection, findBlockLocation, pruneEmptySections } from './store/store';
+export {
+  Store,
+  createSection,
+  findSection,
+  findBlockLocation,
+  pruneEmptySections,
+  pruneSectionIfEmpty,
+  isTwoColumnLayout,
+  setSectionLayout,
+  TWO_COLUMN_LAYOUTS,
+} from './store/store';
+export type { TwoColumnLayout } from './store/store';
 export type { MjRawCellTypography } from './utils/lockedMjml';
 export {
   FONT_WEIGHT_STEP_OPTIONS,

package/packages/core/src/store/store.ts

@@ -126,16 +126,57 @@ export function findBlockLocation(
 }
 
 /**
- * 从文档中移除「每一列都没有任何 Block」的 Section。
- * 在内容块被删除或拖走后调用，可与 `autoWrapSection` 搭配，避免唯一块离场后仍残留空壳；
- * 不会在用户仅点击「添加 Section」时单独触发，因此未拖入内容的空布局仍会保留在画布上。
+ * 若指定 Section 的每一列都没有 Block，则从文档中移除该 Section。
+ * 在内容块被删除或拖走后调用，可与 `autoWrapSection` 搭配，避免单列 Section 在唯一块离场后仍残留空壳；
+ * 多列 Section 始终保留，便于继续向各列拖入内容。
+ * 仅处理刚变空的 Section，不会误删用户事先添加、尚未拖入内容的空布局。
  */
+export function pruneSectionIfEmpty(draft: EmailDoc, sectionId: string) {
+  const sec = draft.sections.find((s) => s.id === sectionId);
+  if (!sec) return;
+  if (sec.columns.length > 1) return;
+  const isEmpty = sec.columns.every((col) => col.blocks.length === 0);
+  if (!isEmpty) return;
+  draft.sections = draft.sections.filter((s) => s.id !== sectionId);
+}
+
+/** @deprecated 请改用 {@link pruneSectionIfEmpty}，避免误删多个空 Section */
 export function pruneEmptySections(draft: EmailDoc) {
   draft.sections = draft.sections.filter((sec) =>
     sec.columns.some((col) => col.blocks.length > 0),
   );
 }
 
+/** 两列 Section 的列宽比例（左栏拖入默认 `1-1`，右栏可改为 `1-2` / `2-1`） */
+export const TWO_COLUMN_LAYOUTS = ['1-1', '1-2', '2-1'] as const;
+export type TwoColumnLayout = (typeof TWO_COLUMN_LAYOUTS)[number];
+
+export function isTwoColumnLayout(layout: SectionLayout): layout is TwoColumnLayout {
+  return layout === '1-1' || layout === '1-2' || layout === '2-1';
+}
+
+/** 仅更新 layout 字段；两列间切换时列数不变，列内块按列下标保留 */
+export function setSectionLayout(section: Section, layout: SectionLayout): void {
+  const nextCols = layout.split('-').length;
+  const curCols = section.columns.length;
+  if (nextCols === curCols) {
+    section.layout = layout;
+    return;
+  }
+  if (nextCols > curCols) {
+    for (let i = curCols; i < nextCols; i++) {
+      section.columns.push({ id: uid('col'), attrs: {}, blocks: [] });
+    }
+  } else {
+    const removed = section.columns.splice(nextCols);
+    const last = section.columns[nextCols - 1];
+    if (last) {
+      for (const col of removed) last.blocks.push(...col.blocks);
+    }
+  }
+  section.layout = layout;
+}
+
 export function createSection(layout: SectionLayout): Section {
   const colCount = layout.split('-').length;
   const columns: Column[] = Array.from({ length: colCount }, () => ({

package/packages/core/src/types.ts

@@ -136,6 +136,8 @@ export interface BlockSchemaField {
   step?: number;
   placeholder?: string;
   help?: string;
+  /** 为 true 时右栏显示「继承全局」开关：开=留空跟随邮件全局，关=写入当前全局值为块级固定值 */
+  inheritGlobal?: boolean;
 }
 
 export interface BlockDefinition<P extends object = Record<string, unknown>> {
@@ -223,6 +225,10 @@ export interface EditorUiOptions {
    * 为 true 时隐藏顶栏「全屏」图标按钮（浏览器原生全屏 API，作用于编辑器根节点）。
    */
   hideTopbarFullscreen?: boolean;
+  /** 为 true 时隐藏顶栏「清空画布」按钮。 */
+  hideTopbarClearCanvas?: boolean;
+  /** 为 true 时隐藏顶栏「重置内容」按钮。 */
+  hideTopbarResetContent?: boolean;
 }
 
 export interface EditorEvents {

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

@@ -0,0 +1,30 @@
+/**
+ * contenteditable 富文本仍依赖 Document.execCommand / queryCommand* 系列 API。
+ * 浏览器与 TypeScript lib.dom 虽已标记 deprecated，但目前无等价替代；集中封装便于 IDE 消警与日后迁移。
+ */
+export interface RichTextDocument extends Document {
+  execCommand(commandId: string, showUI?: boolean, value?: string): boolean;
+  queryCommandState(commandId: string): boolean;
+  queryCommandValue(commandId: string): string;
+}
+
+function asRichTextDoc(doc: Document = document): RichTextDocument {
+  return doc as RichTextDocument;
+}
+
+export function richTextExecCommand(
+  commandId: string,
+  showUI = false,
+  value?: string,
+  doc: Document = document,
+): boolean {
+  return asRichTextDoc(doc).execCommand(commandId, showUI, value);
+}
+
+export function richTextQueryCommandState(commandId: string, doc: Document = document): boolean {
+  return asRichTextDoc(doc).queryCommandState(commandId);
+}
+
+export function richTextQueryCommandValue(commandId: string, doc: Document = document): string {
+  return asRichTextDoc(doc).queryCommandValue(commandId);
+}

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

@@ -0,0 +1,13 @@
+import type { SectionLayout } from '../types';
+
+const LAYOUT_LABELS: Record<SectionLayout, string> = {
+  '1': '一列',
+  '1-1': '两列',
+  '1-2': '1:2',
+  '2-1': '2:1',
+  '1-1-1': '三列',
+};
+
+export function layoutHumanLabel(layout: SectionLayout): string {
+  return LAYOUT_LABELS[layout] ?? layout;
+}