代码块类型输入区域如何获得焦点?

以下是我的 css 写法:

.vditor-ir__marker[data-type="code-block-info"] {
  opacity: 0;
}

.vditor-ir__node[data-type="code-block"]:hover
  .vditor-ir__marker[data-type="code-block-info"],
.vditor-ir__node[data-type="code-block"]:focus-within
  .vditor-ir__marker[data-type="code-block-info"] {
  opacity: 1;
}

尽管使用了 :focus-within,但是输入的时候如果把鼠标悬停在弹出菜单上时,类型输入区域的透明度还是会变回 0,如下图:

代码块类型输入区域.gif

所以想问问,应该如何获得焦点呢?

广告 我要投放

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • Vanessa
    订阅者

    只要光标在编辑器中就是 focus 状态,可能需要重置 .vditor-ir__node[data-type="code-block"] span.vditor-ir__marker--info

    2 回复
  • 其他回帖
  • zqhjl 1 评论
    作者

    诶你在待办列表中加入代码块不会有这个 bug 吗?

    任务列表中的代码块 bug.gif

    顺带抄送 @Vanessa V 姐看看这个 bug

    收到,后面修复
    Vanessa
  • zqhjl 2 评论
    作者

    我把代码改成这样也还是没有效果…

    .vditor-ir__node[data-type="code-block"] span.vditor-ir__marker--info:hover,
    .vditor-ir__node[data-type="code-block"]
      span.vditor-ir__marker--info:focus-within {
      opacity: 1;
    }
    
    重置 display
    Vanessa
    @Vanessa 噢这个我已经重置过了,这个问题是我设置的 opacity 导致的,因为我把 opacity 恒定为 1 就不会有这个问题了
    zqhjl
  • zqhjl 2 评论
    作者

    嗯,我最后就是这么实现的,只是会有个小问题:鼠标点击代码块后移开,这个类型输入区域还是会显示

    这个也不算问题吧,默认就是这样的
    Achuan-2
    @Achuan-2 可能我还是强迫症吧,想实现 notion 那种效果,但是确实做不到
    zqhjl
  • 查看全部回帖