Skip to content

Feat/support search and replace #780

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
May 29, 2025

Conversation

syhxzzz
Copy link
Contributor

@syhxzzz syhxzzz commented May 28, 2025

#776

  1. 添加了新组件 SearchTab,可以在里面输入搜索词和替换词,可以上下选择选中的搜索词进行跳转,或者替换成其他词
  2. CodeMirror5 本身是自带一个简易的搜索功能的,但是由于 CodeMirror5 已经停止维护了,直接复用个人感觉不太好。社区其实也有类似的拓展,比如https://github.com/coderaiser/cm-searchbox ,权衡之后我也没有使用,第一是社区的代码也很久没更新了,第二是社区的拓展有很多是代码编辑器的功能,比如大小写区分的搜索、正则表达式、通配符,个人认为不适合出现在公众号编辑器这种轻代码的项目,所以我自己简易的实现了一下。可能存在问题,欢迎指正👏
  3. 有个别样式css,比如搜索到的元素的高亮样式,可能还需要换用其他的颜色或者针对浅色深色模式再改

syhxzzz added 5 commits May 27, 2025 21:13
- Disable Ctrl-F shortcuts in the code editor to avoid conflicts with the default behavior of the browser - Add keyboard navigation support to the search input box (up and down arrows and return keys)

- Optimize the UI layout of the search tab, including adjusting the width and spacing of the input box

- Change the close button icon from ChevronDown to a more intuitive X icon
Copy link

github-actions bot commented May 28, 2025

🎊 PR Preview has been successfully built and deployed to https://doocs-md-preview-pr-780.surge.sh

@yanglbme
Copy link
Member

@syhxzzz 很不错哦👍

搜索框目前放在了右上角,似乎离编辑区有点远,能否直接悬浮在编辑区上?

@syhxzzz
Copy link
Contributor Author

syhxzzz commented May 29, 2025

修改了组件AIFixedBtn的z-index,因为如果需要让搜索栏在编辑区,就需要在使用搜索栏时,让搜索栏在AIFixedBtn的上面。同时也要保证设置的Popover是最高层的。
image
image

@yanglbme
Copy link
Member

还有一个点,按 esc 的时候,搜索框能否消失?就是不需要每次点击 x,才能让搜索框隐藏。@syhxzzz

@yanglbme
Copy link
Member

image

可以调整下,简单做下适配

@syhxzzz
Copy link
Contributor Author

syhxzzz commented May 29, 2025

image 可以调整下,简单做下适配

开着devtools会导致编辑栏的宽度不够,这样SearchTab也没有足够的宽度空间来容纳这么多东西。所以我一开始是没有放在编辑栏里面的。
适配的话,有什么好的方案吗

@yanglbme
Copy link
Member

左侧的箭头,调整下就好,现在我看着是显示不全

@syhxzzz
Copy link
Contributor Author

syhxzzz commented May 29, 2025

因为宽度空间不够才会导致显示不全。所以只能削减宽度大小
因为Icon的大小不太好改,我想到的比较好的方案就是缩小搜索栏Input元素的宽度,或者把"查找","替换"文本作为placeholder以节省空间。
image

… the search interface

- Add ESC key monitoring to CodemirrorEditor to close the search tab

- Optimize the SearchTab component and add sliding animation effects

- Simplify checkMatchNumber function logic

- Adjust the width of the search box and add placeholder text
@yanglbme
Copy link
Member

yanglbme commented May 29, 2025

之前代码是 w-[406px],适配的话,改成 w-full sm:w-[406px] 应该也可以

@quiet-river
Copy link
Contributor

我觉得placeholder这个方法不错,目前的场景看起来简单有效。如果要做更灵活更复杂的适配的话,可以考虑根据宽度把放不下的操作收到一个按钮里面,点击按钮再展示其他操作。

@yanglbme
Copy link
Member

截止目前的代码,整体效果挺好的,考虑合并,看看还有没有要改的?@syhxzzz @quiet-river

@quiet-river
Copy link
Contributor

我这边没有会阻塞合并的问题,整体挺好的 @yanglbme @syhxzzz

@yanglbme
Copy link
Member

我先合并,有进一步修改,可以再另外提 pr

@yanglbme yanglbme merged commit cca77eb into doocs:main May 29, 2025
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants