@akairos/pipeline 0.18.1 → 0.19.0

package/src/wechat-preview/browser/studio/color-palettes.ts

@@ -112,4 +112,32 @@ export const COLOR_PALETTES: ColorPalette[] = [
       divider: "#dadce0",
     },
   },
+  {
+    id: "amber-terracotta",
+    name: "🍂 暖柿陶土 (秋日暖柿 / 温暖人文)",
+    category: "温暖人文与生活",
+    description: "秋日暖柿与陶土红调，深焦糖微暖黑正文，温润包容，手机长文夜读极度舒适",
+    colors: {
+      brand: "#c25e2e",
+      text: "#2b2623",
+      h2: "#1f1b18",
+      h3: "#573d2d",
+      quote: "#d9825b",
+      divider: "#ece2d8",
+    },
+  },
+  {
+    id: "iris-indigo",
+    name: "🔮 鸢尾极光 (Linear / 前沿科技)",
+    category: "现代数字与前沿设计",
+    description: "深邃鸢尾靛蓝紫，搭配深紫夜冷黑字色与柔光分割，兼具理性逻辑与前沿审美",
+    colors: {
+      brand: "#6366f1",
+      text: "#1e1b4b",
+      h2: "#0f0e26",
+      h3: "#4338ca",
+      quote: "#a5b4fc",
+      divider: "#e0e7ff",
+    },
+  },
 ];

package/src/wechat-preview/browser/studio/config-manager.ts

@@ -0,0 +1,49 @@
+import type { WechatExportTheme } from "../../themes";
+
+export interface StandaloneStyleConfig {
+  schemaVersion: number;
+  engineVersion: number;
+  id: string;
+  name: string;
+  version: string;
+  description?: string;
+  editorVars: Record<string, string>;
+  exportTheme: Partial<WechatExportTheme> | Record<string, string | undefined>;
+  syntaxPresets?: Record<string, string>;
+  structure?: {
+    numberedHeadings?: boolean;
+    headingLabel?: string;
+    quoteLabel?: string;
+    calloutPresets?: Record<string, { icon?: string; title?: string }>;
+  };
+  css?: string;
+}
+
+export function parseStyleConfig(jsonString: string): { ok: true; config: StandaloneStyleConfig } | { ok: false; error: string } {
+  try {
+    const data = JSON.parse(jsonString);
+    if (!data || typeof data !== "object") {
+      return { ok: false, error: "JSON 格式必须为对象" };
+    }
+    if (data.schemaVersion !== 1 || data.engineVersion !== 1) {
+      data.schemaVersion = 1;
+      data.engineVersion = 1;
+    }
+    data.editorVars = data.editorVars || {};
+    data.exportTheme = data.exportTheme || {};
+    data.syntaxPresets = data.syntaxPresets || {};
+    data.structure = data.structure || {};
+    data.css = typeof data.css === "string" ? data.css : "";
+    return { ok: true, config: data as StandaloneStyleConfig };
+  } catch (err) {
+    return { ok: false, error: err instanceof Error ? err.message : String(err) };
+  }
+}
+
+export function exportStyleConfigBlob(config: StandaloneStyleConfig): { url: string; filename: string } {
+  const content = JSON.stringify(config, null, 2) + "\n";
+  const blob = new Blob([content], { type: "application/json" });
+  const url = URL.createObjectURL(blob);
+  const filename = `${config.id || "wechat-style"}.json`;
+  return { url, filename };
+}

package/src/wechat-preview/browser/studio/milkdown-article-menu.ts

@@ -0,0 +1,251 @@
+import type { BlockEditFeatureConfig } from "@milkdown/crepe/feature/block-edit";
+import type { ToolbarFeatureConfig } from "@milkdown/crepe/feature/toolbar";
+import type { TopBarFeatureConfig } from "@milkdown/crepe/feature/top-bar";
+import type { Ctx } from "@milkdown/kit/ctx";
+import { editorViewCtx, parserCtx } from "@milkdown/kit/core";
+import type { EditorView } from "@milkdown/kit/prose/view";
+import type { Parser } from "@milkdown/transformer";
+import { Slice } from "@milkdown/kit/prose/model";
+import { TextSelection } from "@milkdown/kit/prose/state";
+
+export function getEditorView(ctx: Ctx): EditorView | undefined {
+  try {
+    const view = ctx.get(editorViewCtx);
+    if (view && (view as any).state) return view;
+  } catch {
+    // fallback
+  }
+  try {
+    const view = (ctx as any).get("editorView");
+    if (view && (view as any).state) return view;
+  } catch {
+    // ignore
+  }
+  return undefined;
+}
+
+export function getParser(ctx: Ctx): Parser | undefined {
+  try {
+    const parser = ctx.get(parserCtx);
+    if (typeof parser === "function") return parser;
+  } catch {
+    // fallback
+  }
+  try {
+    const parser = (ctx as any).get("parser");
+    if (typeof parser === "function") return parser;
+  } catch {
+    // ignore
+  }
+  return undefined;
+}
+
+const articleIcon =
+  '<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 8h8M8 12h8M8 16h5"/></svg>';
+
+export const inlineItems = [
+  {
+    key: "highlight",
+    label: "高亮",
+    mark: "highlight",
+    text: "重点内容",
+    attrs: {},
+    icon: '<svg viewBox="0 0 24 24" width="20" height="20" fill="none"><path d="m14 3 7 7-9 9H5v-7z" fill="#fef08a" stroke="#d97706" stroke-width="2"/><path d="M3 21h12" stroke="#d97706" stroke-width="2" stroke-linecap="round"/><path d="m11 6 7 7" stroke="#d97706" stroke-width="2"/><title>高亮</title></svg>',
+  },
+  {
+    key: "kbd",
+    label: "快捷键",
+    mark: "kbd",
+    text: "Cmd",
+    attrs: {},
+    icon: '<svg viewBox="0 0 24 24" width="20" height="20" fill="none"><rect x="3" y="5" width="18" height="14" rx="3" fill="#f1f5f9" stroke="#475569" stroke-width="1.8"/><path d="M7 9h2m2 0h2m2 0h2M7 13h2m2 0h2m2 0h2M8 16h8" stroke="#64748b" stroke-width="1.5" stroke-linecap="round"/><title>快捷键</title></svg>',
+  },
+  ...[
+    ["brand", "重点徽章", "重点", "#ca6093", "#fce7f3"],
+    ["success", "成功徽章", "完成", "#16a34a", "#dcfce7"],
+    ["warning", "提醒徽章", "待确认", "#ea580c", "#ffedd5"],
+    ["danger", "风险徽章", "风险", "#dc2626", "#fee2e2"],
+    ["info", "信息徽章", "说明", "#0284c7", "#e0f2fe"],
+  ].map(([type, label, text, color, bg]) => ({
+    key: `badge-${type}`,
+    label: label!,
+    mark: "badge",
+    text: text!,
+    attrs: { type },
+    icon: `<svg viewBox="0 0 24 24" width="20" height="20" fill="none"><path d="M3 4h9l9 9-8 8-10-10z" fill="${bg}" stroke="${color}" stroke-width="2"/><circle cx="8" cy="8" r="1.5" fill="${color}"/><title>${label}</title></svg>`,
+  })),
+];
+
+export type InlineItem = (typeof inlineItems)[number];
+export const inlineMarks = ["highlight", "kbd", "badge"];
+
+export function applyInline(ctx: Ctx, item: InlineItem, slash = false) {
+  const view = getEditorView(ctx);
+  if (!view || !view.state) return;
+  const { state } = view;
+  const { selection } = state;
+  if (
+    !(selection instanceof TextSelection) ||
+    !selection.$from.sameParent(selection.$to) ||
+    selection.$from.parent.type.spec.code
+  )
+    return;
+  const from = slash ? selection.$from.start() : selection.from;
+  const to = selection.to;
+  if (state.doc.rangeHasMark(from, to, state.schema.marks.inlineCode!)) return;
+
+  const markType = state.schema.marks[item.mark];
+  if (!markType) return;
+  const tr = state.tr;
+
+  // 检查是否已经具有完全一致的标记（包括类型属性）
+  const targetType = "type" in item.attrs ? (item.attrs as { type?: string }).type : undefined;
+  let alreadyHasExactMark = false;
+  state.doc.nodesBetween(from, to, (node) => {
+    for (const m of node.marks) {
+      if (m.type === markType) {
+        if (!targetType || m.attrs?.type === targetType) {
+          alreadyHasExactMark = true;
+        }
+      }
+    }
+  });
+
+  if (selection.empty || slash) {
+    const mark = markType.create(item.attrs);
+    tr.replaceWith(from, to, state.schema.text(item.text, [mark]));
+    tr.setSelection(TextSelection.create(tr.doc, from + item.text.length));
+  } else {
+    // 若当前已处于该标记，则点击后取消（Toggle Off）
+    if (alreadyHasExactMark) {
+      tr.removeMark(from, to, markType);
+    } else {
+      // 切换徽章类型时，先清除已存在的旧徽章/行内标记
+      if (item.mark === "badge") {
+        const badgeMark = state.schema.marks.badge;
+        if (badgeMark) tr.removeMark(from, to, badgeMark);
+      } else if (item.mark === "kbd") {
+        const kbdMark = state.schema.marks.kbd;
+        if (kbdMark) tr.removeMark(from, to, kbdMark);
+      } else if (item.mark === "highlight") {
+        for (const name of inlineMarks) {
+          const m = state.schema.marks[name];
+          if (m) tr.removeMark(from, to, m);
+        }
+      }
+      const mark = markType.create(item.attrs);
+      tr.addMark(from, to, mark);
+    }
+  }
+  tr.setStoredMarks([]);
+  view.dispatch(tr.scrollIntoView());
+  view.focus();
+}
+
+export function clearInline(ctx: Ctx) {
+  const view = getEditorView(ctx);
+  if (!view || !view.state) return;
+  const { state } = view;
+  const { from, to } = state.selection;
+  const tr = state.tr;
+  for (const name of inlineMarks) {
+    const markType = state.schema.marks[name];
+    if (markType) tr.removeMark(from, to, markType);
+  }
+  tr.setStoredMarks([]);
+  view.dispatch(tr);
+  view.focus();
+}
+
+export const articleInlineTopBar: NonNullable<TopBarFeatureConfig["buildTopBar"]> = (builder) => {
+  builder.addGroup("article-inline", "行内组件").addItem("article-inline", {
+    icon: "",
+    active: () => false,
+    selector: {
+      activeLabel: () => "行内组件",
+      options: [
+        ...inlineItems.map((item) => ({
+          label: item.label,
+          onSelect: (ctx: Ctx) => applyInline(ctx, item),
+        })),
+        { label: "清除行内组件", onSelect: clearInline },
+      ],
+    },
+  });
+};
+
+export const articleInlineToolbar: NonNullable<ToolbarFeatureConfig["buildToolbar"]> = (builder) => {
+  const group = builder.addGroup("article-inline", "行内组件");
+  for (const item of inlineItems) {
+    const targetType = "type" in item.attrs ? (item.attrs as { type?: string }).type : undefined;
+    group.addItem(item.key, {
+      icon: item.icon,
+      active: (ctx) => {
+        const view = getEditorView(ctx);
+        if (!view || !view.state) return false;
+        const { state } = view;
+        const markType = state.schema.marks[item.mark];
+        if (!markType) return false;
+        let hasActive = false;
+        state.doc.nodesBetween(state.selection.from, state.selection.to, (node) => {
+          for (const m of node.marks) {
+            if (m.type === markType) {
+              if (targetType) {
+                if (m.attrs?.type === targetType) hasActive = true;
+              } else {
+                hasActive = true;
+              }
+            }
+          }
+        });
+        return hasActive;
+      },
+      onRun: (ctx) => applyInline(ctx, item),
+    });
+  }
+};
+
+/**
+ * 常用组件直接出现在 / 斜杠菜单中，插入后由 @akairos/milkdown-article-plugins 深度解析和保存。
+ */
+export const articleBlockMenu: NonNullable<BlockEditFeatureConfig["buildMenu"]> = (builder) => {
+  const group = builder.addGroup("article", "文章专属组件");
+  const blocks: [string, string, string][] = [
+    ["intro", "导读卡片 (INTRO)", "> [!INTRO] 导读\n> 在此处填写文章核心观点或背景提炼。"],
+    ["cta", "文末互动 (CTA)", "> [!CTA] 交流与讨论\n> 欢迎在评论区分享你的经验与思考。"],
+    ["note", "提示卡片 (NOTE)", "> [!NOTE]\n> 请填写背景上下文或参考提示。"],
+    ["tip", "建议卡片 (TIP)", "> [!TIP]\n> 请填写技巧建议或最佳实践。"],
+    ["important", "重点卡片 (IMPORTANT)", "> [!IMPORTANT]\n> 请填写核心关键点。"],
+    ["warning", "警告卡片 (WARNING)", "> [!WARNING]\n> 请填写需特别留意的风险事项。"],
+    ["caution", "注意卡片 (CAUTION)", "> [!CAUTION]\n> 请填写潜在危险或破坏性操作提示。"],
+  ];
+
+  for (const [key, label, markdown] of blocks) {
+    group.addItem(key, {
+      label,
+      icon: articleIcon,
+      onRun: (ctx) => {
+        const view = getEditorView(ctx);
+        const parser = getParser(ctx);
+        if (!view || !parser) return;
+        const document = parser(markdown);
+        if (!document) return;
+        const { $from } = view.state.selection;
+        view.dispatch(
+          view.state.tr
+            .replace($from.before(), $from.after(), new Slice(document.content, 0, 0))
+            .scrollIntoView(),
+        );
+        view.focus();
+      },
+    });
+  }
+
+  for (const item of inlineItems) {
+    group.addItem(item.key, {
+      label: item.label,
+      icon: item.icon,
+      onRun: (ctx) => applyInline(ctx, item, true),
+    });
+  }
+};

package/src/wechat-preview/browser/studio/myno-editor.ts

@@ -0,0 +1,122 @@
+import { Crepe } from "@milkdown/crepe";
+import { getCombinedMilkdownPlugins } from "@akairos/milkdown-article-plugins";
+import {
+  articleBlockMenu,
+  articleInlineToolbar,
+  articleInlineTopBar,
+  getEditorView,
+  getParser,
+} from "./milkdown-article-menu";
+
+import "@milkdown/crepe/theme/common/style.css";
+import "@milkdown/crepe/theme/frame.css";
+import "@akairos/milkdown-article-style/tokens-default.css";
+import "@akairos/milkdown-article-style/article.css";
+
+export interface MynoEditorOptions {
+  root: HTMLElement;
+  defaultValue?: string;
+  readonly?: boolean;
+  placeholder?: string;
+  onMarkdownChange?: (markdown: string) => void;
+}
+
+export class MynoEditor {
+  private crepe: Crepe | null = null;
+  private options: MynoEditorOptions;
+  private isDestroyed = false;
+
+  constructor(options: MynoEditorOptions) {
+    this.options = options;
+  }
+
+  async create(): Promise<Crepe> {
+    const { root, defaultValue = "", readonly = false, placeholder = "输入内容，或输入 / 快速插入文章组件..." } = this.options;
+
+    const crepe = new Crepe({
+      root,
+      defaultValue,
+      features: readonly
+        ? {
+            [Crepe.Feature.BlockEdit]: false,
+            [Crepe.Feature.LinkTooltip]: false,
+            [Crepe.Feature.Toolbar]: false,
+            [Crepe.Feature.TopBar]: false,
+          }
+        : undefined,
+      featureConfigs: {
+        [Crepe.Feature.BlockEdit]: {
+          buildMenu: articleBlockMenu,
+        },
+        [Crepe.Feature.Toolbar]: {
+          buildToolbar: articleInlineToolbar,
+        },
+        [Crepe.Feature.TopBar]: {
+          buildTopBar: articleInlineTopBar,
+        },
+        placeholder: {
+          text: placeholder,
+          mode: "doc",
+        },
+      },
+    });
+
+    crepe.editor.use(getCombinedMilkdownPlugins());
+
+    crepe.on((listener) => {
+      listener.markdownUpdated((_ctx, markdown) => {
+        if (!this.isDestroyed && this.options.onMarkdownChange) {
+          this.options.onMarkdownChange(markdown);
+        }
+      });
+    });
+
+    await crepe.create();
+    crepe.setReadonly(readonly);
+
+    crepe.editor.action((ctx) => {
+      const view = getEditorView(ctx);
+      if (view?.dom) {
+        view.dom.classList.add("zzhub-wechat-article");
+      }
+    });
+
+    this.crepe = crepe;
+    return crepe;
+  }
+
+  getMarkdown(): string {
+    if (!this.crepe) return this.options.defaultValue || "";
+    return this.crepe.getMarkdown();
+  }
+
+  setMarkdown(markdown: string) {
+    if (!this.crepe) return;
+    this.crepe.editor.action((ctx) => {
+      const view = getEditorView(ctx);
+      const parser = getParser(ctx);
+      if (!view || !parser) return;
+      const doc = parser(markdown);
+      if (!doc) return;
+      const { state } = view;
+      const tr = state.tr.replaceWith(0, state.doc.content.size, doc.content);
+      view.dispatch(tr);
+    });
+  }
+
+  setReadonly(readonly: boolean) {
+    this.crepe?.setReadonly(readonly);
+  }
+
+  getCrepe(): Crepe | null {
+    return this.crepe;
+  }
+
+  async destroy() {
+    this.isDestroyed = true;
+    if (this.crepe) {
+      await this.crepe.destroy();
+      this.crepe = null;
+    }
+  }
+}