✨ feat(vscode): 代码阅读预览加 ⌘F 查找栏：整份文件查（折叠着的块里的也算，跳过去时展开），按页面上显示的字不分大小写匹配、中文名也认原名，Enter / ⌘G 跳、Esc 关，高亮直接画在页面上不重画卡片

vscode/webview-ui/src/codeReader/TextPreview.tsx

@@ -9,20 +9,23 @@ import { SegmentText } from './SegmentText'
 /** 卡片里的 Markdown 说明按哪种渲染：页面上是注释；定义卡片浮窗里是 peek（别的文件的注释，不认不带路径的引用）。 */
 export const MarkdownKindContext = createContext<Exclude<MarkdownKind, 'answer'>>('comment')
 
-/** 预览里的一段文字：着色的词按源码排版；Markdown 说明渲染成段落、列表、代码块。 */
-export const TextPreview = memo(({ text, className }: { text: PreviewText, className?: string }): ReactElement => {
+/**
+ * 预览里的一段文字：着色的词按源码排版；Markdown 说明渲染成段落、列表、代码块。
+ * `find` 是卡片上这段字的记号（见 [textKey](vscode/webview-ui/src/codeReader/viewState.ts#textKey)），查找栏按它找到这段字画高亮。
+ */
+export const TextPreview = memo(({ text, className, find }: { text: PreviewText, className?: string, find?: string }): ReactElement => {
   const kind = useContext(MarkdownKindContext)
   if ('markdown' in text)
-    return <MarkdownPreview html={renderMarkdown(text.markdown, kind)} className={className} />
+    return <MarkdownPreview html={renderMarkdown(text.markdown, kind)} className={className} find={find} />
   return (
-    <p className={cn('cr-code', className)}>
+    <p className={cn('cr-code', className)} data-find={find}>
       <SegmentText segments={text} />
     </p>
   )
 })
 TextPreview.displayName = 'TextPreview'
 
-export function MarkdownPreview({ html, className }: { html: string, className?: string }): ReactElement {
+export function MarkdownPreview({ html, className, find }: { html: string, className?: string, find?: string }): ReactElement {
   const content = useMemo(() => ({ __html: html }), [html])
-  return <div className={cn('cr-markdown', className)} dangerouslySetInnerHTML={content} />
+  return <div className={cn('cr-markdown', className)} data-find={find} dangerouslySetInnerHTML={content} />
 }