登录 注册

[反馈] 标签位于段落开头时, 光标无法显示在标签外部

本贴最后更新于 1010 天前，其中的信息可能已经水流花落

当标签不在开头时,光标可以显示在标签外面,如下

Snipaste20221009125729.png

但是当标签位于开头时,光标无法显示在标签外部

Snipaste20221009130019.png

视频:

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    26381 引用 • 109712 回帖
上海 位置
1 感谢
6 回帖
3
3
650 63 31 353 1 17 18 165

相关帖子

6 回帖
[反馈] 标签位于段落开头时, 光标无法显示在标签外部

欢迎来到这里！

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

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

    再按一下 ←，默认主题没问题。

    2 回复
  • cyanc •
    付费者 捐赠者 作者

    默认主题下,光标是能够移动到标签内或标签外部,

    但是在视觉上是看不出光标是在内部还是在外部的,

    比如下图, 无论在内在外,都是显示在"是"和"法"之间

    Snipaste20221009211423.png

    而通过 css 给标签加上边框之后能从视觉上看出光标是在标签内部还是外部,

    在内部:

    Snipaste20221009211500.png

    在外部:

    Snipaste20221009211540.png

    但是如果标签前面没有纯文本了,即没有"是"这个字符串, 那么

    无论光标是在内在外,都只显示在内部, 如下图所示

    Snipaste20221009212608.png

    css 如下:

    .protyle-wysiwyg span[data-type~=tag] {
  font-size: 1em;
  border-bottom: 0 none transparent !important;
  border-radius: 1em;
  padding: 1px 0.5em 1px 0.5em;
  transition: all 200ms linear 0ms;
}

.protyle-wysiwyg [data-node-id] span[data-type="tag"] {
 
  background-color: var(--custom-span-tag-background-color);
}

​
    1 回复
  • 88250 •
    订阅者 MOD

    默认的样式估计暂时不会调整，这个可以参考一下代码或者键盘的样式，可能有帮助。

    1 回复
  • cyanc •
    付费者 捐赠者 作者

    我看了下语雀的实现,发现当行内元素前面没有字符时,会在行内元素前面加一个零宽空格占位 ,如下图

    这或许就是语雀可以做到当行内代码位于开头时,光标能移动到行内代码外部的原因 ?

    Snipaste20221009214145.png

    1 操作
    cyanc 在 2022-10-09 23:18:34 更新了该回帖
  • cyanc • • 3 评论
    付费者 捐赠者 作者

    行内代码也是这个问题,

    当行内代码位于开头时,光标无法移动到其边框外部

    Snipaste20221009214843.png

    当行内代码不位于开头时,即前面还有字符时,光标可以移动到其边框外部或内部,如下

    Snipaste20221009214918.png

    Snipaste20221009214934.png

    1 回复
    标签的样式会对输入操作有一定的影响。可以把标签样式放到 code 上看看是不是你需要的效果？
    Vanessa •
    @Vanessa 没太理解"标签样式放到 code 上"啥意思, 现在 code(行内代码)的样式是我喜欢的, 但是它显示光标有问题, 通过改 css 也解决不了吧, 语雀是这么解决的: [反馈] 标签位于段落开头时, 光标无法显示在标签外部 - cyanc 的回帖
    cyanc •
    @iamqiz 现在标签前后没有零宽空格，但是代码块有，可以把标签的带图标的样式放在代码块上，试一试能不能移的出去？
    Vanessa •
  • 88250 •
    订阅者 MOD

    下个版本改进 Issue #6133 · siyuan-note/siyuan

请输入回帖内容 ...
cyanc
链滴 666666 号成员 上海
回帖
188
 帖子
98
 积分
15658

近期热议

推荐标签 标签

  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 650 关注
  • 外包

    有空闲时间是接外包好呢还是学习好呢？

    26 引用 • 233 回帖
  • 心情

    心是产生任何想法的源泉，心本体会陷入到对自己本体不能理解的状态中，因为心能产生任何想法，不能分出对错，不能分出自己。

    59 引用 • 369 回帖
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据（或者事件）流的 API。它组合了观察者模式，迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 179 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统，由瑞典 MySQL AB 公司开发，目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    694 引用 • 537 回帖 • 1 关注
  • 工具

    子曰：“工欲善其事，必先利其器。”

    300 引用 • 768 回帖
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis，2010 年这个项目由 Apache 软件基金会迁移到了 google code，并且改名为 MyBatis ，2013 年 11 月再次迁移到了 GitHub。

    173 引用 • 414 回帖 • 364 关注
  • Google

    Google（Google Inc.，NASDAQ：GOOG）是一家美国上市公司（公有股份公司），于 1998 年 9 月 7 日以私有股份公司的形式创立，设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”，它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎，它提供了简单易用的免费服务。不作恶（Don't be evil）是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台，用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统（CMS）来使用。WordPress 是一个免费的开源项目，在 GNU 通用公共许可证（GPLv2）下授权发布。

    46 引用 • 114 回帖 • 165 关注
  • Quicker

    Quicker 您的指尖工具箱！操作更少，收获更多！

    37 引用 • 157 回帖
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎，可以结合 MySQL、PostgreSQL 做全文搜索，它可以提供比数据库本身更专业的搜索功能，使得应用程序更容易实现专业化的全文检索。

    1 引用 • 225 关注
  • DevOps

    DevOps（Development 和 Operations 的组合词）是一组过程、方法与系统的统称，用于促进开发（应用程序/软件工程）、技术运营和质量保障（QA）部门之间的沟通、协作与整合。

    59 引用 • 25 回帖 • 1 关注
  • C

    C 语言是一门通用计算机编程语言，应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    86 引用 • 165 回帖
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件，让构建、部署、自动化集成项目变得简单易用。

    54 引用 • 37 回帖 • 1 关注
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    10 引用 • 77 回帖
  • Lute

    Lute 是一款结构化的 Markdown 引擎，支持 Go 和 JavaScript。

    29 引用 • 202 回帖 • 30 关注
  • 游戏

    沉迷游戏伤身，强撸灰飞烟灭。

    187 引用 • 832 回帖
  • Maven

    Maven 是基于项目对象模型（POM）、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    188 引用 • 319 回帖 • 237 关注
  • 自由行
    • 1 关注
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发，并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例： https://wide.b3log.org

    30 引用 • 218 回帖 • 645 关注
  • golang

    Go 语言是 Google 推出的一种全新的编程语言，可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克（Rob Pike）说：我们之所以开发 Go，是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    500 引用 • 1396 回帖 • 252 关注
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统，它问世于 1985 年，起初仅仅是 Microsoft-DOS 模拟环境，后续的系统版本由于微软不断的更新升级，不但易用，也慢慢的成为家家户户人们最喜爱的操作系统。

    229 引用 • 476 回帖
  • 锤子科技

    锤子科技（Smartisan）成立于 2012 年 5 月，是一家制造移动互联网终端设备的公司，公司的使命是用完美主义的工匠精神，打造用户体验一流的数码消费类产品（智能手机为主），改善人们的生活质量。

    4 引用 • 31 回帖
  • 新人

    让我们欢迎这对新人。哦，不好意思说错了，让我们欢迎这位新人！
    新手上路，请谨慎驾驶！

    52 引用 • 228 回帖
  • 小说

    小说是以刻画人物形象为中心，通过完整的故事情节和环境描写来反映社会生活的文学体裁。

    32 引用 • 108 回帖
  • Solo

    Solo 是一款小而美的开源博客系统，专为程序员设计。Solo 有着非常活跃的社区，可将文章作为帖子推送到社区，来自社区的回帖将作为博客评论进行联动（具体细节请浏览 B3log 构思 - 分布式社区网络）。

    这是一种全新的网络社区体验，让热爱记录和分享的你不再感到孤单！

    1444 引用 • 10083 回帖 • 507 关注
  • iOS

    iOS 是由苹果公司开发的移动操作系统，最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统，最初是设计给 iPhone 使用的，后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样，属于类 Unix 的商业操作系统。

    89 引用 • 150 回帖 • 4 关注

最新标签