碎记

• 3. 浏览器选区之 hanging Range

  Published:2024/11/16

  浏览器默认有这样一个行为：当用户双击一段文本时，会选中单词（中文有分词处理），当三击时，会选中整段文本。

  这个「选中整段文本」的行为所产生的浏览器选区 Selection 对象上，extendNode、focusNode 是当前块级文本的下一行的节点。

  而如果用户通过手动拖拽行为，从段落开头框选到段落结尾，这时产生的选区对象上，上述的两个字段是当前块级文本的末尾节点。

  对比这两种操作，用户看到的选区是一样的，实际生成的选区对象却是不同的，从编辑器框架的角度看，前者的 range 似乎比后者多了 1。

  这就会造成很多问题，如果在此时进行插入带格式文本的操作，就会有意料之外的效果。

  那么如何解决这个问题？

  • Quill 没有处理这种情况，两种操作下获取到选区的长度相差 1。所以我遇到了 bug，也才有了本文的记录。
  • ProseMirror 实现了三次点击的行为监听，在其中拦截了，参考 ProseMirror 源码。
  • Slate 将这种选区称为「hanging range」，并对它进行一次 unhang 的格式化处理，在其中重新计算了选区结尾节点，参考 Slate 源码。关于它，也有一些比较有趣的社区讨论。

• 2. MacOS Chrome FullScreen 模式的 bug

  Published:2024/10/29

  Chrome 130 版本。

  在用户的交互回调中触发 requestFullscreen 方法后，如果点击浏览器左上角的退出全屏幕按钮，能退出全屏状态。

  但是此时不会触发 fullscreenchange 事件，并且通过浏览器的控制台可以看到目标 dom（即 document.fullscreenElement 元素）依然处于全屏激活（Layer 1）的状态。

  此时需要稍微调整一下浏览器窗口（resize），就会触发 fullscreenchange 事件，目标元素退出全屏激活态。

  Safari、Firefox、Arc 都不能复现这个问题。

• 1. Dart Sass 的除法

  Published:2024/05/16

  有这样一个样式：

  @for $i from 1 through 24 {
    .offset-#{$i} {
      width: calc((100 / 24) * #{$i} * 1%);
    }
  }

  编译结果中的第一个样式是：width: calc(4.1666666667 * 1 * 1%);。

  因为目标环境（React Native） 并不支持 calc，所以需要做改造。

  第一个方案：width: percentage($i / 24);

  它的编译结果中第一个样式是 width: 4.1666666667%;，满足要求，不过编译过程会报警告，原因见：breaking-changes/slash-div。这样做很好，理由也很让我信服，所以试试它的替代方案。

  第二个方案：width: percentage(math.div($i, 24))

  math 是 sass 内置的一个模块，需要通过 @use 'sass:math' 的方式声明后才可以使用，但是 @use 又有用法上的限制，比如不能在任何已有样式规则之后使用，这就导致我没办法做完美的替换。由于样式文件结构和引用的关系，我没找到合适的声明位置。

  第三个方案：width: percentage(round($i * 0.04166666666, 0.000000001));

  用除法各种问题，咱还是直接用乘法曲线救国吧，叠加一个精确位数的四舍五入方法，结果很完美。