如何能让搜索面板在ctrl f时出现在代码框的上面，我看codemirror6有支持这个配置，以及能够修改搜索面板中的英文成中文吗

[jaywcjlove]

@rocsun 我看作者说实现个搜索并不难 https://discuss.codemirror.net/t/export-class-searchpanel/6364/2

从代码上来看是写死的： https://github.com/codemirror/search/blob/3c1346e213a9635f56f92b23066ea0638319de25/src/search.ts#L645-L666

解决方法：

1. 重新实现一个搜索的 extensions，使用 searchKeymap 禁用默认的搜索。
2. 通过寻找 dom 节点 JS 去改上面的文本(更简单)

[jaywcjlove]

https://codemirror.net/try/?c=aW1wb3J0IHtiYXNpY1NldHVwLCBFZGl0b3JWaWV3fSBmcm9tICJjb2RlbWlycm9yIgppbXBvcnQge2phdmFzY3JpcHR9IGZyb20gIkBjb2RlbWlycm9yL2xhbmctamF2YXNjcmlwdCIKaW1wb3J0IHtzZWFyY2h9IGZyb20gIkBjb2RlbWlycm9yL3NlYXJjaCIKCm5ldyBFZGl0b3JWaWV3KHsKICBkb2M6ICJjb25zb2xlLmxvZygnaGVsbG8nKVxuIiwKICBleHRlbnNpb25zOiBbCiAgICBiYXNpY1NldHVwLAogICAgc2VhcmNoKHsKICAgICAgY3JlYXRlUGFuZWwodmlldykgewogICAgICAgIGNvbnN0IGRvbSA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2RpdicpOwogICAgICAgIGNvbnN0IGlucHV0ID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnaW5wdXQnKTsKICAgICAgICBpbnB1dC5zZXRBdHRyaWJ1dGUoJ21haW4tZmllbGQnLCAndHJ1ZScpOwogICAgICAgIGRvbS5hcHBlbmRDaGlsZChpbnB1dCk7CgogICAgICAgIHJldHVybiB7IGRvbSB9OwogICAgICB9CiAgICB9KQogIF0sCiAgcGFyZW50OiBkb2N1bWVudC5ib2R5Cn0pCg==

import {basicSetup, EditorView} from "codemirror"
import {javascript} from "@codemirror/lang-javascript"
import {search} from "@codemirror/search"

new EditorView({
  doc: "console.log('hello')\n",
  extensions: [
    basicSetup,
    search({
      createPanel(view) {
        const dom = document.createElement('div');
        const input = document.createElement('input');
        input.setAttribute('main-field', 'true');
        dom.appendChild(input);

        return { dom };
      }
    })
  ],
  parent: document.body
})

[rocsun]

@rocsun 我看作者说实现个搜索并不难 https://discuss.codemirror.net/t/export-class-searchpanel/6364/2

从代码上来看是写死的： https://github.com/codemirror/search/blob/3c1346e213a9635f56f92b23066ea0638319de25/src/search.ts#L645-L666

解决方法：

1. 重新实现一个搜索的 extensions，使用 searchKeymap 禁用默认的搜索。
2. 通过寻找 dom 节点 JS 去改上面的文本(更简单)

第二个方法确实够简单，解决了感谢👍

[wintc23]

@jaywcjlove 使用 search 函数创建 extension 后，好像也不能自定义搜索面板，需要自己手动调用 openSearchPanel 吗？

[jaywcjlove]

@wintc23 不知道你代码如何写的，示例中显示没有问题。 https://codesandbox.io/embed/react-codemirror-example-codemirror-6-https-github-com-uiwjs-react-codemirror-issues-498-wqg52f?fontsize=14&hidenavigation=1&theme=dark

import React from "react";
import CodeMirror from "@uiw/react-codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { search } from "@codemirror/search";

export default function App() {
  const onChange = React.useCallback((value, viewUpdate) => {
    console.log("value:", value);
  }, []);
  return (
    <CodeMirror
      value="console.log('hello world!');"
      height="200px"
      theme="dark"
      extensions={[
        javascript({ jsx: true }),
        search({
          createPanel(view) {
            const dom = document.createElement("div");
            const input = document.createElement("input");
            input.setAttribute("main-field", "true");
            dom.appendChild(input);

            return { dom };
          }
        })
      ]}
      onChange={onChange}
    />
  );
}

[wintc23]

@jaywcjlove 感谢！确实是可以，排查了下看代码没问题，重启服务后竟然就可以了...