one-design-next 0.0.119 → 0.0.120

package/dist/composer/editor.js

@@ -22,6 +22,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
+import { svgData } from "../icon/svg-data";
 import ScrollArea from "../scroll-area";
 import { caretBeforeHintIn, caretRangeFromPoint, findChipHostBeforeCaret, getCaretBeforeHint, getCurrentLine, isCaretBeforeHint, isCaretOnHintLine, isPointOnHint, isPositionAfterHint, mergeLineIntoPreviousAtCaretStart, normalizeCollapsedCaretAtChipBoundary, normalizeCollapsedCaretBeforeHint, resolveCaretMove, splitLineAt, wouldArrowCrossHint } from "./caret";
 import { buildClipboardPayload, COMPOSER_CLIPBOARD_MIME, parseClipboardPayload, plainTextFromClipboardPayload, remapClipboardPayload } from "./clipboard";
@@ -102,8 +103,36 @@ var findDirectHint = function findDirectHint(line) {
   return null;
 };
 
+/** 小块右侧的箭头图标：OD icon `arrow-right-to-line`（文案 → 填入的指向）。 */
+var HINT_ACCEPT_ICON_NAME = 'arrow-right-to-line';
+
+/**
+ * 拼一个 `<svg>` 图标节点。
+ *
+ * 小块由 DOM API 直接构建（editor 的 children 归 contenteditable 自治，不走
+ * React），所以这里从图标数据里取 viewBox / content 自己建元素；描边用
+ * `currentColor`，颜色跟随父级文字色。尺寸取 12：与本块 12px 文案同高，
+ * Lucide 的 24 viewBox 缩到 12 后描边正好 1px，与文字笔画同重。
+ */
+var createHintAcceptArrowNode = function createHintAcceptArrowNode() {
+  var _svgData$HINT_ACCEPT_ = svgData[HINT_ACCEPT_ICON_NAME],
+    viewBox = _svgData$HINT_ACCEPT_.viewBox,
+    content = _svgData$HINT_ACCEPT_.content;
+  var arrow = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  arrow.setAttribute('data-odn-composer-hint-accept-arrow', '');
+  arrow.setAttribute('viewBox', viewBox);
+  arrow.setAttribute('width', '12');
+  arrow.setAttribute('height', '12');
+  arrow.setAttribute('fill', 'none');
+  /* 装饰性图标：文案已经说清动作，不给读屏重复播报。 */
+  arrow.setAttribute('aria-hidden', 'true');
+  arrow.setAttribute('focusable', 'false');
+  arrow.innerHTML = content;
+  return arrow;
+};
+
 /**
- * hint 末尾的「按 TAB 键填入」小块：点它 = 按 Tab 填入这段模板文案。
+ * hint 末尾的「TAB 键填入」小块：点它 = 按 Tab 填入这段模板文案。
  *
  * 与 hint 文本是同级节点（见 `COMPOSER_HINT_ACCEPT_ATTR` 的说明），由
  * `syncHintNode` 一起插入 / 移除，不进 value / 剪贴板 / segments。
@@ -120,16 +149,13 @@ var createHintAcceptNode = function createHintAcceptNode() {
    * - aria-label 会盖掉可见文案，反而违反「可见标签即无障碍名」。
    * - title 是浏览器原生 tooltip：延迟出现、样式不可控、会盖住灰字。 */
 
-  var prefix = document.createElement('span');
-  prefix.setAttribute('data-odn-composer-hint-accept-prefix', '');
-  prefix.textContent = '按';
   var key = document.createElement('span');
   key.setAttribute('data-odn-composer-hint-accept-key', '');
   key.textContent = 'TAB';
   var label = document.createElement('span');
   label.setAttribute('data-odn-composer-hint-accept-label', '');
   label.textContent = '键填入';
-  accept.append(prefix, key, label);
+  accept.append(key, label, createHintAcceptArrowNode());
   return accept;
 };
 
@@ -473,7 +499,7 @@ export var ComposerEditor = /*#__PURE__*/forwardRef(function ComposerEditor(_ref
    * 它不归 React 管（editor 的 children 由 contenteditable 自治），由 fireChange
    * 按结构谓词增删/挪位；`getPlainText` 会整棵子树跳过，所以不进 value / 剪贴板。
    *
-   * 末尾的「按 TAB 键填入」小块是 hint 文本的**兄弟节点**（不是子节点）：hint 的
+   * 末尾的「TAB 键填入」小块是 hint 文本的**兄弟节点**（不是子节点）：hint 的
    * textContent 必须保持纯提示文案（采纳时直接落成正文，调试面板也按它读）。 */
   var hintNodeRef = useRef(null);
   var hintAcceptNodeRef = useRef(null);
@@ -521,7 +547,7 @@ export var ComposerEditor = /*#__PURE__*/forwardRef(function ComposerEditor(_ref
     var cur = host.nextSibling;
     while (cur) {
       var _cur$textContent;
-      // 跳过 hint 自身与它的「按 TAB 键填入」小块：上一轮若排到了锚点前面，
+      // 跳过 hint 自身与它的「TAB 键填入」小块：上一轮若排到了锚点前面，
       // 这里顺手挪回末尾
       if (cur === node || cur === accept) {
         cur = cur.nextSibling;
@@ -550,7 +576,7 @@ export var ComposerEditor = /*#__PURE__*/forwardRef(function ComposerEditor(_ref
     if (node.parentNode !== parent || node.previousSibling !== anchor) {
       parent.insertBefore(node, anchor.nextSibling);
     }
-    /* 「按 TAB 键填入」小块紧跟 hint 文案之后（同一套行内流），顺序必须是
+    /* 「TAB 键填入」小块紧跟 hint 文案之后（同一套行内流），顺序必须是
      * hint → 小块：caret 的合法落点只到 hint 之前，块本身
      * contentEditable=false，不会成为落点。 */
     if (accept.parentNode !== parent || accept.previousSibling !== node) {
@@ -660,14 +686,14 @@ export var ComposerEditor = /*#__PURE__*/forwardRef(function ComposerEditor(_ref
   recomputeTriggerRef.current = recomputeTrigger;
 
   /* ─────────────────────────────────────
-   * 采纳 hint（Tab / 点击「按 TAB 键填入」小块）
+   * 采纳 hint（Tab / 点击「TAB 键填入」小块）
    *
    * hint 只是结构投影（不进 value）；caret 恰好停在 chip 与 hint 之间
    * （= 内容末尾）时按 Tab，表示用户接受这段模板，于是把提示文案落成正文：
    * chip 之后出现内容 → 结构谓词不再命中 → 灰字自动移除，onChange 抛出的
    * value 里带上这段文案，与用户自己敲进去的效果一致。
    *
-   * 鼠标点末尾的「按 TAB 键填入」小块走**同一条链路**，只是带 `force`：
+   * 鼠标点末尾的「TAB 键填入」小块走**同一条链路**，只是带 `force`：
    * 不要求点击前 caret 就停在 hint 之前，先把 caret 归位到 chip 右侧再落。
    * ───────────────────────────────────── */
   var acceptHintAsText = useCallback(function (options) {
@@ -1219,7 +1245,7 @@ export var ComposerEditor = /*#__PURE__*/forwardRef(function ComposerEditor(_ref
     // shift+click 是扩选，不劫持
     if (e.shiftKey) return;
 
-    /* 「按 TAB 键填入」小块：点它等价于按 Tab（同一条采纳链路），且不要求点击前
+    /* 「TAB 键填入」小块：点它等价于按 Tab（同一条采纳链路），且不要求点击前
      * caret 就停在 hint 之前。在 mousedown 阶段接管 + preventDefault，
      * 原生 caret 一帧都不会落到 hint 之后。 */
     if (e.target instanceof Element && e.target.closest(COMPOSER_HINT_ACCEPT_SELECTOR)) {

package/dist/composer/style/index.css

@@ -356,15 +356,16 @@
 }
 
 /* ------------------------------------------------------------------
- * hint 末尾的「按 TAB 键填入」小块（点击 = 按 Tab 填入，见 editor.tsx）
+ * hint 末尾的「TAB 键填入」小块（点击 = 按 Tab 填入，见 editor.tsx）
  *
  * 与 hint 文本是同级节点，一起增删。它不是正文：contentEditable=false、
  * getPlainText 整棵跳过，点它走 force 版 acceptHintAsText。
- * 尺寸对齐 Figma 9857:75425（90 × 22 / 圆角 6 / 内层键帽 28 × 16）：
+ * 尺寸对齐 Figma 9857:75425（22 高 / 圆角 6 / 内层键帽 28 × 16）；
+ * 宽度随内容自然撑开（键帽 + 「键填入」+ 12px 箭头图标，约 90）：
  *   - 编辑器固定 font-size 14 / line-height 24，块高 22 + top 1 → 视觉居中
  *     且不撑高行盒（改编辑器行高时要同步调这个 1px）
  *   - 底色 black-2(5%)、键帽 bg-elevated + black-5(12%) 1px 描边
- *   - 「按」「键填入」与键帽之间 gap 3，左右内边距 4
+ *   - 「键填入」与键帽之间 gap 3，左右内边距 4
  * ----------------------------------------------------------------- */
 [data-odn-composer] [data-odn-composer-hint-accept] {
   display: inline-flex;
@@ -416,12 +417,18 @@
   letter-spacing: 0;
 }
 
-[data-odn-composer] [data-odn-composer-hint-accept-prefix],
 [data-odn-composer] [data-odn-composer-hint-accept-label] {
   font-size: 12px;
   line-height: 20px;
 }
 
+/* 文案右侧的箭头图标（OD icon arrow-right-to-line，DOM 见 editor.tsx）：
+ * 宽高由 svg 属性锁 12，这里只保证它不被 flex 压缩。 */
+[data-odn-composer] [data-odn-composer-hint-accept-arrow] {
+  display: block;
+  flex: none;
+}
+
 /* 禁用态：hint 仍按内容结构展示，但小块不可点（与 editor 冻结一致） */
 [data-odn-composer] [data-odn-composer-editor][data-odn-composer-editor-disabled] [data-odn-composer-hint-accept] {
   cursor: not-allowed;

package/dist/composer/utils.d.ts

@@ -23,7 +23,7 @@ export declare const LINE_ATTR_NAME = "data-composer-line";
 export declare const COMPOSER_HINT_ATTR = "data-odn-composer-skill-hint";
 export declare const COMPOSER_HINT_SELECTOR = "[data-odn-composer-skill-hint]";
 /**
- * 派生 hint 末尾的「按 TAB 键填入」小块（可点击采纳）。
+ * 派生 hint 末尾的「TAB 键填入」小块（可点击采纳）。
  *
  * 与 hint 文本是**兄弟节点**（不是子节点）：hint 自身的 `textContent` 必须
  * 保持纯提示文案——采纳时直接把这段文字落成正文，且 `getPlainText` /

package/dist/composer/utils.js

@@ -40,7 +40,7 @@ export var COMPOSER_HINT_ATTR = 'data-odn-composer-skill-hint';
 export var COMPOSER_HINT_SELECTOR = "[".concat(COMPOSER_HINT_ATTR, "]");
 
 /**
- * 派生 hint 末尾的「按 TAB 键填入」小块（可点击采纳）。
+ * 派生 hint 末尾的「TAB 键填入」小块（可点击采纳）。
  *
  * 与 hint 文本是**兄弟节点**（不是子节点）：hint 自身的 `textContent` 必须
  * 保持纯提示文案——采纳时直接把这段文字落成正文，且 `getPlainText` /
@@ -302,7 +302,7 @@ export function getPlainText(editor) {
   var out = '';
   var visit = function visit(node) {
     if (node instanceof HTMLElement) {
-      // 派生 hint（含末尾的「按 TAB 键填入」小块）整棵子树都不是正文，直接跳过
+      // 派生 hint（含末尾的「TAB 键填入」小块）整棵子树都不是正文，直接跳过
       if (node.hasAttribute(COMPOSER_HINT_ATTR) || node.hasAttribute(COMPOSER_HINT_ACCEPT_ATTR)) return;
       var id = node.dataset[chipIdAttr];
       if (id) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "one-design-next",
-  "version": "0.0.119",
+  "version": "0.0.120",
   "description": "One Design Next from TAD@tencent.com",
   "license": "MIT",
   "type": "module",