dsh-codinput 0.3.9 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-codinput",
-  "version": "0.3.9",
+  "version": "0.4.0",
   "description": "DSH 插件：把聊天输入框变成代码编辑器一样的输入风格（CodeMirror 6 接管 conversation.composer.bar），web 与桌面端通用。",
   "license": "MIT",
   "author": "Witherwithwinter",
@@ -66,7 +66,10 @@
     "@codemirror/state": "^6.5.2",
     "@codemirror/view": "^6.36.0",
     "dompurify": "^3.2.4",
-    "marked": "^15.0.6"
+    "highlight.js": "^11.12.0",
+    "katex": "^0.18.0",
+    "marked": "^15.0.6",
+    "mermaid": "^12.3.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.18",

package/src/client/cm.ts

@@ -139,6 +139,19 @@ export function subscribeEditorPrefs(view: EditorView, placeholder: string, edit
   });
 }
 
+/**
+ * 永远按字面字符渲染：同时关掉 `liga` / `calt`。
+ *
+ * 连字会把 `->`、`//` 等替换成合并字形，视觉上像「字符消失」；更关键的是
+ * DSH 桌面 0.2.2 内置的 Chromium 152 在「`calt` 连字 + 后续任意字符」时会把
+ * 连字字形第一格画空（宿主 shaping bug，CSS 层面无法稳定规避）。故本插件不做
+ * 连字：编辑器所见即所存，也与预览 / 消息区的纯文本渲染保持一致。
+ */
+const LITERAL_TEXT_STYLES = {
+  fontVariantLigatures: 'none',
+  fontFeatureSettings: '"liga" 0, "calt" 0',
+} as const;
+
 function baseTheme(fontFamily: string): Extension {
   return EditorView.theme({
     '&': { fontSize: '13px', height: '100%' },
@@ -147,8 +160,13 @@ function baseTheme(fontFamily: string): Extension {
       fontFamily,
       lineHeight: '1.6',
       overflow: 'auto',
+      ...LITERAL_TEXT_STYLES,
+    },
+    '.cm-content': {
+      caretColor: 'var(--dsw-alias-state-business-primary, currentColor)',
+      paddingBottom: '8px',
+      ...LITERAL_TEXT_STYLES,
     },
-    '.cm-content': { caretColor: 'var(--dsw-alias-state-business-primary, currentColor)', paddingBottom: '8px' },
     '.cm-line': { padding: '0 8px' },
     // CodeMirror 自绘光标（drawSelection）默认黑色，深色主题下不可见——
     // 显式对齐官方输入框的 caret 颜色（品牌强调色）。

package/src/client/command.ts

@@ -3,9 +3,10 @@
  * 贡献。
  *
  * /codinput：输入回车即切换接管（进入/退出），菜单描述随当前状态变化；接管
- * 关闭（官方输入框）时输入同样生效——贡献注册是全局生命周期。菜单拾取路径
- * 会把 "/codinput" 插进草稿而不提交，切换后需清空当前草稿。侧栏里发起的退
- * 出会经总线请求 body 关掉自己的标签（见 sideinput）。
+ * 关闭（官方输入框）时输入同样生效——贡献注册是全局生命周期。命令 token 由
+ * 宿主 consume-token 通道消费；插件只在残留时兜底剥离 token 本身，绝不整体
+ * 清空草稿（否则「先有草稿再 /codinput 退出」会丢草稿）。侧栏里发起的退出会
+ * 经总线请求 body 关掉自己的标签（见 sideinput）。
  *
  */
 
@@ -17,13 +18,40 @@ import { t } from './i18n';
 import { IconCodinputCommand16 } from './icons';
 import { diagWindow, runGuarded } from './diag';
 
-function clearDraftOf(sessionId: string | undefined): void {
+/** `/codinput` 命令 token 的规范拼写（宿主命令名即 `codinput`）。 */
+const COMMAND_TOKEN = '/codinput';
+
+/**
+ * 清理 `/codinput` 命令 token 的残留，**只剥 token，不碰草稿其余内容**。
+ *
+ * 官方命令通道在调用 `ui.run` 之前会先派发 `slash/input-consume-token`
+ * （菜单拾取 = exact span，裸命令回车 = bare-token），正常路径此时草稿里
+ * 已经没有 token。但「工具行指令按钮程序化唤起菜单」等路径的 span 消费
+ * 可能落空，草稿里会残留 "/codinput" 前缀。旧实现无条件 `setDraft('')`
+ * 把草稿整体清空——用户先有草稿、再输入 `/codinput` 退出接管时，宿主只
+ * 消费掉命令 token，剩下的用户草稿随后被这段无条件清空吞掉（普通/悬浮
+ * 形态都中招，退出后内置输入框变空）。
+ *
+ * 这里沿用宿主 bare-token guard 的判据：只有「token 本身」或「token 后跟
+ * 空白」才当作命令 token 处理；"/codinputX" 这类真的用户文本不动。清理后
+ * 余下的用户内容原样保留。
+ */
+function stripCommandToken(sessionId: string | undefined): void {
   if (!sessionId) return;
   try {
     const actx = stash.sessions?.scope(sessionId);
-    if (actx && stash.conversation) stash.conversation.input.for(actx).setDraft('');
+    if (!actx || !stash.conversation) return;
+    const input = stash.conversation.input.for(actx);
+    const draft = input.state?.getSnapshot?.().draft ?? '';
+    const leading = draft.replace(/^\s+/, '');
+    if (!leading.toLowerCase().startsWith(COMMAND_TOKEN)) return;
+    const rest = leading.slice(COMMAND_TOKEN.length);
+    // 宿主命令 token 语法：token 必须以行尾/空白收尾。
+    if (rest !== '' && !/^\s/.test(rest)) return;
+    const next = rest.replace(/^\s+/, '');
+    if (next !== draft) input.setDraft(next);
   } catch {
-    /* 会话作用域不可达时忽略（提交路径本就会清空草稿） */
+    /* 会话作用域不可达时忽略（退出接管本身不受影响） */
   }
 }
 
@@ -97,8 +125,12 @@ export function registerCodinputCommand(ctx: ClientContext): void {
             ui: {
               kind: 'action',
               run: () => {
-                // 卸载会清掉诊断 sessionId，先捕获再延迟清草稿。
+                // 卸载会清掉诊断 sessionId，先捕获（清理必须在卸载前做完，
+                // 否则官方输入框挂载时就会带上残留 token）。
                 const sessionId = diagWindow().__dshCodinputSessionId ?? undefined;
+                // 只剥离命令 token：宿主已派发 consume-token，这里兜住
+                // 「程序化唤起菜单导致 span 消费落空」的残留；用户草稿保留。
+                stripCommandToken(sessionId);
                 savePrefs({ enabled: !loadPrefs().enabled });
                 // 侧栏里发起的退出：关掉承载会话的 Codinput 标签（body 经
                 // tab 域 actions.close 关闭、卸载撤销承载），主输入回到官方
@@ -106,7 +138,6 @@ export function registerCodinputCommand(ctx: ClientContext): void {
                 if (!loadPrefs().enabled) {
                   for (const carried of carriedSessionIds()) requestSidebarTabClose(carried);
                 }
-                setTimeout(() => clearDraftOf(sessionId), 80);
               },
             },
           }),

package/src/client/components/CodinputSurface.tsx

@@ -6,8 +6,6 @@
 
 import { useEffect, useMemo, useRef, useState } from 'react';
 import type { EditorView } from '@codemirror/view';
-import { marked } from 'marked';
-import * as DOMPurifyModule from 'dompurify';
 import type {
   ComposerKeyboard,
   InputActions,
@@ -16,15 +14,22 @@ import type {
   UseProjection,
 } from '../host-types';
 import { stash } from '../services';
-import { loadPrefs, savePrefs } from '../prefs';
+import { loadPrefs, savePrefs, subscribePrefs } from '../prefs';
 import { addFilesToDraft, bindSessionFilePicker, dragHasFiles } from '../attachments';
 import { diagError, diagSession, diagWindow } from '../diag';
 import { IconEdit, IconEye } from '../icons';
 import { t, useT } from '../i18n';
+import {
+  activateMarkdown,
+  handleMarkdownClick,
+  renderMarkdown,
+  type MarkdownImageTarget,
+} from '../markdown';
 import { EditorPane } from './EditorPane';
 import { SlashMenu } from './SlashMenu';
 import { PopupSelectView } from './PopupSelectView';
 import { AttachmentRail } from './AttachmentRail';
+import { ImageLightbox } from './ImageLightbox';
 import { Toolbar } from './Toolbar';
 import { StatsRow } from './StatsRow';
 
@@ -59,12 +64,6 @@ export interface CodinputSurfaceProps {
   onDragZonePointerDown?: (event: React.PointerEvent<HTMLDivElement>) => void;
 }
 
-marked.setOptions({ gfm: true, breaks: true });
-
-/** dompurify 的导出形状随打包条件漂移：默认导出与命名空间都兼容。 */
-const DOMPurify = ((DOMPurifyModule as unknown as { default?: unknown }).default ??
-  DOMPurifyModule) as unknown as { sanitize(html: string): string };
-
 export function CodinputSurface(props: CodinputSurfaceProps): JSX.Element {
   const { sessionId, state, actions, useProjection, inputStandard, placeholder, disabled, blocked, running, side, hero, chatNodes, float, onDragZonePointerDown } = props;
   // 语言切换时整棵表面重渲染（文案都走 i18n 的 t()）。
@@ -73,12 +72,22 @@ export function CodinputSurface(props: CodinputSurfaceProps): JSX.Element {
   const [editOn, setEditOn] = useState<boolean>(() => loadPrefs().defaultEdit);
   const [previewOn, setPreviewOn] = useState<boolean>(() => loadPrefs().defaultPreview);
   const [bodyHeight, setBodyHeight] = useState<number | null>(() => loadPrefs().composerBodyHeight);
+  /** Markdown 正文等宽连字（设置 → Markdown 等宽连字）：即时跟随 prefs 变化。 */
+  const [markdownMono, setMarkdownMono] = useState<boolean>(() => loadPrefs().markdownMono);
+  useEffect(() => subscribePrefs(() => setMarkdownMono(loadPrefs().markdownMono)), []);
   /** 拖文件悬停卡片时的落区提示（松手即入草稿附件）。 */
   const [dropActive, setDropActive] = useState(false);
   const cardRef = useRef<HTMLDivElement | null>(null);
   const viewRef = useRef<EditorView | null>(null);
   const caretRef = useRef<number | null>(null);
   const previewRef = useRef<HTMLDivElement | null>(null);
+  /** 预览 Markdown 根（图片点灯箱 / 扩展渲染 扩展激活的挂点）。 */
+  const previewBodyRef = useRef<HTMLDivElement | null>(null);
+  /** Markdown 内 http(s) 图片点击后的大图灯箱。 */
+  const [lightbox, setLightbox] = useState<MarkdownImageTarget | null>(null);
+  const onPreviewClick = (event: React.MouseEvent<HTMLDivElement>): void => {
+    handleMarkdownClick(event, { onImage: setLightbox });
+  };
 
   // 高度调节：仅顶边把手，1:1 跟手（顶边上移多少、编辑区就高多少），松手持久化。
   // 宽度不做自有调节——沿用官方聊天宽度调节器（wSkVaW_widthHandle）：
@@ -233,23 +242,38 @@ export function CodinputSurface(props: CodinputSurfaceProps): JSX.Element {
     actions.submit();
   };
 
-  // 官方同语义：草稿与附件皆空时发送禁用（空草稿手势仍可经键盘 Steer）。
+  // 官方同语义（0.2.2 InputBar）：empty = 草稿与附件皆空；machineBusy = 输入机
+  // 三个 busy 阶段（adjudicating / submitting / sending）——编辑器软锁、主按钮
+  // 不再可提交；sending 时主按钮转 spinner，停止由独立停止钮（interruptible）承接。
   const inert = disabled === true || blocked === true;
   const draftEmpty = (state?.draft ?? '').trim() === '';
   const noAttachments = (state?.attachmentIds.length ?? 0) === 0;
-  // 官方 primaryStops：运行中且草稿与附件皆空 → 主按钮变停止；停止形态不随
-  // 禁用锁死（官方 primaryDisabled 在 stops 分支只看 stop 是否可用）。
-  const primaryStops = running === true && draftEmpty && noAttachments;
-  const sendDisabled =
-    inert ||
-    actions === undefined ||
-    (state !== undefined && state.phase === 'submitting') ||
-    (draftEmpty && noAttachments);
-
+  const empty = draftEmpty && noAttachments;
+  const phase = state?.phase;
+  const sending = phase === 'sending';
+  const machineBusy = phase === 'adjudicating' || phase === 'submitting' || sending;
+  // 官方 primaryStops = running && subagent===null && !sending && (empty || blocked)。
+  // （插件侧无 subagent；blocked 走 bar owner props。）
+  // 停止形态不随禁用锁死：官方 primaryDisabled 在停止分支只看 stop 是否可用。
+  const primaryStops = running === true && !sending && (empty || blocked === true);
+  // 官方 primaryDisabled 的非停止分支：empty || disabled || machineBusy || uploadsPending
+  // （插件侧草稿附件即传即用，无 uploadsPending；!live 等价于 actions 缺席）。
+  const sendDisabled = primaryStops ? false : empty || inert || machineBusy || actions === undefined;
+
+  // 统一 Markdown 管线（与用户消息同一函数）：同步渲染，draft 变更即重算。
   const html = useMemo(
-    () => DOMPurify.sanitize(marked.parse(state?.draft ?? '') as string),
+    () => renderMarkdown(state?.draft ?? '', { surface: 'preview' }),
     [state?.draft, previewOn],
   );
+  // 扩展渲染 扩展（代码高亮 / KaTeX / Mermaid）的 DOM 激活口；无注册扩展时 no-op。
+  // 依赖必须含 previewOn：预览是条件渲染，「先粘贴、后开预览」时 html 没变、根节点
+  // 却从 null 变成新挂载节点，只靠 [html] 会跳过激活（late-mount 路径：KaTeX 停在
+  // 占位、Mermaid 一直 pending、代码块复制按钮无事件）。previewOn 切换时 React 会
+  // 先跑上一次 cleanup，再对新根重新激活；side/float 与 normal 共用本效果。
+  useEffect(() => {
+    if (!previewOn) return undefined;
+    return activateMarkdown(previewBodyRef.current, 'preview');
+  }, [html, previewOn]);
 
   // ---- 分屏同步滚动：两侧按滚动比例互随（内容高度不同，比例映射） ----
   // scroll 不冒泡但走捕获相位，挂在 body 上的 onScrollCapture 能收到两栏的
@@ -380,15 +404,27 @@ export function CodinputSurface(props: CodinputSurfaceProps): JSX.Element {
               placeholder={placeholderText}
               viewRef={viewRef}
               onCaretMoved={caretMoved}
-              disabled={inert}
+              // 官方 busy 软锁：adjudicating / submitting / sending 三阶段编辑器只读
+              //（EditorPane 内部已覆盖前两者，sending 由这里并入 disabled）。
+              disabled={inert || sending}
               autoFocus={true}
               solo={!previewOn}
               stateKey={sessionId ?? 'hero'}
             />
           ) : null}
           {previewOn ? (
-            <div className="dci-preview" data-solo={!editOn} ref={previewRef}>
-              {html ? <div dangerouslySetInnerHTML={{ __html: html }} /> : <span style={{ opacity: 0.4 }}>{t("preview.empty")}</span>}
+            <div className="dci-preview" data-solo={!editOn} ref={previewRef} onClick={onPreviewClick}>
+              {html ? (
+                <div
+                  className="dci-md"
+                  data-dci-md="preview"
+                  data-mono={markdownMono ? 'true' : undefined}
+                  ref={previewBodyRef}
+                  dangerouslySetInnerHTML={{ __html: html }}
+                />
+              ) : (
+                <span style={{ opacity: 0.4 }}>{t("preview.empty")}</span>
+              )}
             </div>
           ) : null}
         </div>
@@ -400,7 +436,11 @@ export function CodinputSurface(props: CodinputSurfaceProps): JSX.Element {
           triggers={triggers}
           caretRef={caretRef}
           useProjection={useProjection}
-          disabled={inert}
+          // 官方两个 owner 信号分开下发：inert（disabled）与 blocked。
+          // locked = inert || blocked；modelSeatLocked = inert || !live（不含 blocked）。
+          disabled={disabled === true}
+          blocked={blocked === true}
+          running={running === true}
           primaryStops={primaryStops}
           onStop={onStop}
           onNotify={notifyFor(sessionId)}
@@ -414,9 +454,12 @@ export function CodinputSurface(props: CodinputSurfaceProps): JSX.Element {
           <StatsRow useProjection={useProjection} sessionId={sessionId} chatNodes={chatNodes} />
         ) : null}
 
-        {/* 官方 MenuView 锚定：主模式以卡片顶上方弹出；侧栏/悬浮形态由
-            SlashMenu 按 dropdown 改为头部行下方向下弹出（不被面板/视口裁剪） */}
-        {triggers ? <SlashMenu triggers={triggers} dropdown={side === true || float === true} /> : null}
+        {/* 官方 MenuView 锚定：normal 形态仍以卡片顶上方 absolute 浮层弹出（几何不变）；
+            side/float 形态由 SlashMenu portal 到 body，按卡片四周空位做自适应 fixed
+            浮层（不遮编辑区、不挤压卡片布局）。 */}
+        {triggers ? (
+          <SlashMenu triggers={triggers} dropdown={side === true || float === true} anchorRef={cardRef} />
+        ) : null}
       </div>
 
       {/* 数据行：主输入/侧栏渲染在卡片下方（官方 hero 新会话态无 stats）。 */}
@@ -425,6 +468,16 @@ export function CodinputSurface(props: CodinputSurfaceProps): JSX.Element {
       ) : null}
 
       {popup ? <PopupSelectView popup={popup} /> : null}
+
+      {/* Markdown 图片大图灯箱（用户消息侧同组件同行为）。 */}
+      {lightbox ? (
+        <ImageLightbox
+          src={lightbox.src}
+          alt={lightbox.alt}
+          labels={{ dialog: t('image.preview'), close: t('image.closePreview') }}
+          onClose={() => setLightbox(null)}
+        />
+      ) : null}
     </div>
   );
 }

package/src/client/components/EditorPane.tsx

@@ -102,7 +102,9 @@ export function EditorPane(props: EditorPaneProps): JSX.Element {
         }
         if (matchEvent(prefsNow.lineBreakHotkey, event) && prefsNow.lineBreakHotkey !== 'enter') {
           event.preventDefault();
-          view.dispatch({ changes: { from: view.state.selection.main.head, insert: '\n' } });
+          const head = view.state.selection.main.head;
+          // 显式插入换行后必须把光标放到插入点之后，否则 CodeMirror 会把光标留在插入点之前，后续输入落回上一行（B1 行为层：Shift+Enter「看起来没换行」）；普通 Enter 走 CM 默认 keymap，无此问题。
+          view.dispatch({ changes: { from: head, insert: '\n' }, selection: { anchor: head + 1 }, scrollIntoView: true });
           return true;
         }
         return false;

package/src/client/components/InputSlotSeat.tsx

@@ -26,7 +26,15 @@
  */
 
 import { useMemo } from 'react';
-import { entryId, listRows, renderSlotEntry, useSlotEntries } from './slotEntry';
+import type { ReactNode } from 'react';
+import {
+  entryId,
+  entryInjectFailed,
+  firstComponentEntry,
+  listRows,
+  renderSlotEntry,
+  useSlotEntries,
+} from './slotEntry';
 
 export interface InputSlotSeatProps {
   /** 官方子槽位全名（如 conversation.input.left）。 */
@@ -47,3 +55,50 @@ export function InputSlotSeat(props: InputSlotSeatProps): JSX.Element | null {
 
   return <>{rows.map((entry, index) => renderSlotEntry(entry, entryId(entry, index), { sessionId, standard }))}</>;
 }
+
+export interface InputSingleSlotProps {
+  /** 官方单值子槽位全名（如 conversation.input.permission / .plan）。 */
+  slot: string;
+  sessionId: string | undefined;
+  /** 宿主下发给本插件条目的 standard props 原样面。 */
+  standard: Record<string, unknown> | undefined;
+  /** 官方 renderSlot 第二参数的 owner props（如 { locked }）。 */
+  ownerProps?: Record<string, unknown> | undefined;
+  /**
+   * 兜底渲染（可选）：
+   * - 条目 inject 面在插件 fiber 里不可复现（依赖宿主服务面的 inject 会抛
+   *   `without inject`，见 slotEntry.boundInject）→ 渲染 fallback；
+   * - 条目组件自身崩溃 → EntryBoundary 回退 fallback。
+   * 缺省 null（槽位有占用者但无法镜像时按官方「画不出来」处理）。
+   */
+  fallback?: ReactNode;
+}
+
+/**
+ * 单值槽位镜像（0.2.2 的 `conversation.input.permission` / `.plan` 用）。
+ *
+ * 官方口径（InputBar.tsx）：`renderSlot("conversation.input.permission", { locked })`
+ * 与 `renderSlot("conversation.input.plan", { locked })` 位于 `.tools` 内
+ * `.modes` 容器（permission 在前）。**槽位已声明但无占用者 = 官方留空**，
+ * 因此这里对「已声明 + 空」返回 null，绝不回退自绘控件；「未声明」由调用方
+ * 用 `useSlotDeclaration` 区分后决定回退（旧宿主才回退 PermissionMenu）。
+ */
+export function InputSingleSlot(props: InputSingleSlotProps): JSX.Element | null {
+  const { slot, sessionId, standard, ownerProps, fallback } = props;
+  const entries = useSlotEntries(slot);
+  const occupant = useMemo(() => firstComponentEntry(entries), [entries]);
+
+  // 官方门槛：无会话不画该座位（InputBar 的 sessionId 三元）。
+  if (sessionId === undefined || occupant === null) return null;
+
+  // 让位可行性：inject 面必须在宿主 fiber 上下文里才算数（见 slotEntry）。
+  // 不可复现时回退调用方给的兜底（permission 用自绘菜单保住旧功能）。
+  if (entryInjectFailed(occupant, sessionId)) return <>{fallback ?? null}</>;
+
+  return renderSlotEntry(occupant, `single:${entryId(occupant, 0)}`, {
+    sessionId,
+    standard,
+    ownerProps,
+    fallback,
+  });
+}