wendang-react 0.6.2 → 0.6.4

package/dist/styles/editor-interaction.css

@@ -1,621 +1 @@
-/* 编辑态图片：src 由 node view 按 attachmentId 解析而来（正文不存存储地址）。
-   给个最小样式，避免加载中/缺失时排版跳动。 */
-.ywiki-prose img.ywiki-image {
-  max-width: 100%;
-  border-radius: var(--content-media-radius);
-  display: block;
-}
-/**
- * 图片容器（node view）的**三层结构**：
- *   frame（块级、占满整行）→ 水平对齐（flex justify-content）
- *     inner（贴合图片尺寸）→ 选中框 / 四角手柄 / 块选中高亮
- *       img
- *
- * 选中框必须画在 **inner** 上（用户反馈"编辑图片大小时外框没有跟随图片
- * 大小变化"）：frame 占满整行，蓝框会横跨整行、右边空出一大片，看起来
- * 像框没跟着图片走。
- */
-.ywiki-prose .ywiki-image-frame {
-  display: flex;
-  justify-content: center;
-  /* 图注在图片下方：纵向排列，图片仍按 justify-content 水平对齐 */
-  flex-direction: column;
-  align-items: center;
-}
-/* 有图注时，图片与图注各自成行；图片的水平对齐交给内层 */
-.ywiki-prose .ywiki-image-frame.has-caption > .ywiki-image-inner { align-self: center; }
-/* 图注：一行灰色小字，超出省略（完整内容见 title） */
-.ywiki-prose .ywiki-image-caption {
-  max-width: 100%;
-  margin-top: 6px;
-  padding: 0 2px;
-  color: var(--color-text-muted);
-  font-size: 12px;
-  line-height: 1.5;
-  text-align: center;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  user-select: text;
-}
-.ywiki-prose .ywiki-image-gallery {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  gap: 8px;
-  width: 100%;
-}
-/**
- * 图片行**整行选中**：给整行加一圈描边。
- *
- * 只给每张图铺底色是不够的——图片之间的间隙、行首行尾的留白都没有任何
- * 选中信号，整行看起来和未选中几乎一样（用户实测反馈："一行全选中也要有
- * 选中效果"）。
- *
- * 不能用普通块的 `::before` 蓝带：图片行是 flex 容器，绝对定位的伪元素
- * 会参与 flex 布局计算，外扩的 6px 也容易被行高吃掉。改为与其它自带外观
- * 的块一致的实色描边；圆角取 6px，与表格的选中框对齐。
- */
-.ywiki-prose .ywiki-image-gallery.is-block-selected {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 2px;
-  border-radius: 6px;
-}
-/**
- * 单张图片（独立图片块）被**整块选中**：给图片本身加一圈描边。
- *
- * 图片块没有自带外观，走的是"普通块铺蓝带"分支，结果只有一条半透明底色
- * 与图片上的淡色覆盖，**没有边框**——与表格、高亮块、文件卡片的选中观感
- * 不一致（用户实测反馈："只有一张图的选中没有边框"）。
- *
- * 只作用于独立图片（图片行内的子图不带 `is-block-selected`，整行选中时
- * 描边画在行容器上），因此不会与图片行的整行框重叠。
- */
-.ywiki-prose .ywiki-image-frame.is-block-selected .ywiki-image-inner {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 2px;
-  border-radius: 6px;
-}
-.ywiki-prose .ywiki-image-gallery > .ywiki-image-frame.is-in-gallery .ywiki-image-inner {
-  /* 图片行里不显示四角缩放手柄（等高排布，单图改宽会破坏对齐）。 */
-  cursor: default;
-}
-.ywiki-prose .ywiki-image-gallery {
-  position: relative;
-}
-/* 图片行内的框选矩形（挂在 portal 上，视口坐标定位） */
-.ywiki-gallery-marquee {
-  position: fixed;
-  z-index: 69;
-  border: 1px solid color-mix(in srgb, var(--color-accent) 70%, transparent);
-  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
-  border-radius: 2px;
-  pointer-events: none;
-}
-/**
- * 图片上的选中覆盖层：**只有一个 `::after`，强度固定 16%**。
- *
- * ## 为什么必须合并到一个选择器（用户实测："为什么还有蓝色区域"）
- *
- * 这里曾经有两处独立规则写同一个 `::after`：
- *  - 框选命中（`.is-multi-picked`）16%；
- *  - 整块选中（`.ywiki-image-frame.is-block-selected`）18%。
- *
- * 两者可以同时命中（框选后松手会转成块选区），于是同一个伪元素被两条规则
- * 分别赋值——后者胜出，颜色却与整页带（16%）不一致，图上出现一块更深的矩形。
- * 更早还叠过一层 frame 的 16% 背景，合计接近 50%。
- *
- * 现在统一为一条规则、一个强度：图片区域与非图片区域的选中底色完全相同。
- *
- * `outline` 仍按状态区分（框选中是实线、块选中不描边）——那表达的是"这是
- * 框选出来的"与"这块在选区里"的差别，不影响底色。
- */
-.ywiki-prose .ywiki-image-frame.is-multi-picked .ywiki-image-inner,
-.ywiki-prose .ywiki-image-frame.is-block-selected-image .ywiki-image-inner,
-.wendang-portal .ywiki-image-frame.is-multi-picked .ywiki-image-inner {
-  /**
-   * 圆角与表格/其他块的选中描边统一为 6px（用户反馈："图片选中的圆角
-   * 和表格选中的差不多，现在有点不一致"）。早先是 3px/4px，混在一起时
-   * 图片的框明显更方。
-   */
-  outline: 2px solid var(--color-accent);
-  outline-offset: 2px;
-  border-radius: 6px;
-}
-.ywiki-prose .is-block-selected .ywiki-image-inner::after,
-.ywiki-prose .ywiki-image-frame.is-multi-picked .ywiki-image-inner::after,
-.ywiki-prose .ywiki-image-frame.is-block-selected-image .ywiki-image-inner::after,
-.wendang-portal .ywiki-image-frame.is-multi-picked .ywiki-image-inner::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: var(--content-media-radius, 4px);
-  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
-  pointer-events: none;
-}
-/**
- * 跨图片拖拽：**落点提示**。
- *
- * ## 从"虚线框"改为"柔和的整体高亮"（用户反馈：虚线框看起来比较生硬）
- *
- * 原先落在目标图上画 2px dashed outline。虚线在照片这类复杂底图上会碎成
- * 一段段，而且"框住整张图"的观感太抢眼——它表达的是"我要插到这里"，不是
- * "这张图被选中了"，用户的原话是"看怎么处理更好看点"。
- *
- * 现在改成两层柔和的信号：
- *  1. 图片本身叠一层淡强调色（和块选中同一套语言，`::after` 已存在，复用）；
- *  2. 外加一圈 2px 实线 + 3px 留白的描边，颜色是强调色但带透明度。
- *
- * 不用虚线、不用发光：拖拽是高频操作，提示需要"看得见但不吵"。
- */
-.ywiki-prose .ywiki-image-frame.is-image-drop-target .ywiki-image-inner {
-  outline: 2px solid color-mix(in srgb, var(--color-accent) 70%, transparent);
-  outline-offset: 3px;
-  border-radius: var(--content-media-radius, 6px);
-}
-/* 落点图上再叠一层淡色，明确"松手就并到这里" */
-.ywiki-prose .ywiki-image-frame.is-image-drop-target .ywiki-image-inner::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: var(--content-media-radius, 6px);
-  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
-  pointer-events: none;
-}
-
-/**
- * 插入指示线：一条**细长的圆头光带**，插在将要落入的位置。
- *
- * 几何与颜色都由脚本内联（挂在 portal / body 上取不到主题变量），这里只给
- * 形状与层级。圆头 + 柔和外发光让它看起来像"一根发光的针"，比纯色方块轻。
- */
-.ywiki-image-drop-line,
-.ywiki-gallery-drop-line {
-  position: fixed;
-  border-radius: 999px;
-  pointer-events: none;
-  /* 必须高于图片行内容，否则会被图片盖住、看起来"拖拽没有反馈" */
-  z-index: 70;
-}
-.ywiki-image-drop-line { z-index: 60; }
-/**
- * 指示线两端的小圆点：把"针"的两端收圆，视觉上更像刻度而不是一条色块。
- * 用伪元素而不是额外 DOM，避免拖拽期间频繁创建节点。
- */
-.ywiki-image-drop-line::before,
-.ywiki-image-drop-line::after,
-.ywiki-gallery-drop-line::before,
-.ywiki-gallery-drop-line::after {
-  content: '';
-  position: absolute;
-  left: 50%;
-  width: 7px;
-  height: 7px;
-  margin-left: -3.5px;
-  border-radius: 50%;
-  background: inherit;
-}
-.ywiki-image-drop-line::before,
-.ywiki-gallery-drop-line::before { top: -3px; }
-.ywiki-image-drop-line::after,
-.ywiki-gallery-drop-line::after { bottom: -3px; }
-.wendang-portal .ywiki-gallery-drop-line,
-.wendang-portal .ywiki-image-drop-line { position: fixed; }
-.ywiki-prose .ywiki-image-frame.is-gallery-dragging {
-  opacity: 0.55;
-}
-/**
- * 图片行（飞书口径）：**按比例铺满整行**，高度由比例自然产生。
- *
- * 为什么不用固定行高：固定行高在图片少时右侧留一大片空白（实测两图并排只占
- * 一半宽度）。飞书改成「各列按 比例/比例和 分宽度」——列宽加起来正好铺满，
- * 高度 = 可用宽 / 比例和，因此同行几乎等高且无空白。
- *
- * `--ywiki-image-ratio` 由 node view 按原图宽高比写入，`flex-basis` 用比例
- * 作为权重，`flex-grow` 让它们把剩余空间按权重分掉。
- */
-.ywiki-prose .ywiki-image-gallery {
-  /* 12px 间距与飞书的 column-gap 实测一致 */
-  gap: 12px;
-  align-items: flex-start;
-}
-.ywiki-prose .ywiki-image-gallery > .ywiki-image-frame {
-  flex: 1 1 0;
-  /* 基础宽度置零，完全由 flex-grow 按比例分配，避免比例小的图先占位 */
-  min-width: 0;
-  width: auto;
-  height: auto;
-  max-width: none;
-  justify-content: flex-start;
-}
-/* 分配权重 = 原始比例 × 用户拖角设定的相对缩放（`--ywiki-image-weight`） */
-.ywiki-prose .ywiki-image-gallery > .ywiki-image-frame {
-  flex-grow: calc(var(--ywiki-image-ratio, 1) * var(--ywiki-image-weight, 1));
-}
-.ywiki-prose .ywiki-image-gallery > .ywiki-image-frame .ywiki-image-inner {
-  width: 100%;
-  max-width: none;
-}
-/**
- * 图库内图片高度由比例与列宽共同决定：
- * `width:100%` + `aspect-ratio` 让高度自动算出来，不用固定行高。
- * 没有 aspect-ratio（历史图片）时退回 4:3，等补算比例后再自动校正。
- */
-.ywiki-prose .ywiki-image-gallery > .ywiki-image-frame img.ywiki-image {
-  width: 100%;
-  height: auto;
-  max-width: none;
-  aspect-ratio: var(--ywiki-image-ratio, 1.3333);
-  object-fit: contain;
-  border-radius: var(--content-media-radius);
-}
-/**
- * 图片**加载中**：渐变沿边框流动的指示（与阅读端同一口径）。
- *
- * 不再用"整块灰底 + 微光"——静态灰块在浅色页面上看不出在加载，更像"图丢了"。
- * 现在是一条沿圆角绕圈的渐变，像贪吃蛇一样顺着边框跑，图片区域本身保持透明。
- *
- * 实现同阅读端：conic-gradient + `mask-composite: exclude` 挖空中间，只留 2px
- * 边框；旋转靠 `@property` 注册的角度变量插值（定义在 content-style.css，
- * 该文件也被编辑器引入）。加载完成后 `data-image-loading` 移除，遮罩随之消失。
- */
-.ywiki-prose .ywiki-image-frame img.ywiki-image[data-image-loading] {
-  box-sizing: border-box;
-  padding: 3px;
-  border-radius: var(--content-media-radius);
-  background-image: conic-gradient(
-    from var(--ywiki-image-flow-angle),
-    color-mix(in srgb, var(--color-accent) 14%, var(--color-surface-subtle)) 0turn 55%,
-    color-mix(in srgb, var(--color-accent) 55%, transparent) 78%,
-    var(--color-accent) 92%,
-    color-mix(in srgb, var(--color-accent) 14%, var(--color-surface-subtle)) 100%
-  );
-  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
-  -webkit-mask-clip: content-box, border-box;
-  -webkit-mask-composite: xor;
-  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
-  mask-clip: content-box, border-box;
-  mask-composite: exclude;
-  animation: ywiki-image-flow 1.4s linear infinite;
-  /* 独立图片没有 aspect-ratio 撑高，需要最小高度才看得见框 */
-  min-height: 120px;
-}
-/* 图片行内的高度由 aspect-ratio 与列宽决定，不叠加最小高度（否则整行被撑高） */
-.ywiki-prose .ywiki-image-gallery > .ywiki-image-frame img.ywiki-image[data-image-loading] {
-  min-height: 0;
-}
-/**
- * 加载失败：淡底 + 细实线边框，**不流动**。
- *
- * "在转 = 还在取 / 静止 = 取不到"，靠动效区分，不需要图标或文字。
- * 不用虚线：缩略图尺寸下虚线会碎成一段段，看起来像边框画错了。
- */
-.ywiki-prose .ywiki-image-frame img.ywiki-image[data-image-error] {
-  box-sizing: border-box;
-  min-height: 72px;
-  background-color: color-mix(in srgb, var(--color-surface-subtle) 70%, var(--color-border));
-  border-radius: var(--content-media-radius);
-  outline: 1px solid color-mix(in srgb, var(--color-border-strong) 55%, transparent);
-  outline-offset: -1px;
-}
-.ywiki-prose .ywiki-image-gallery > .ywiki-image-frame img.ywiki-image[data-image-error] {
-  min-height: 0;
-}
-@media (prefers-reduced-motion: reduce) {
-  .ywiki-prose .ywiki-image-frame img.ywiki-image[data-image-loading] {
-    animation: none;
-  }
-}
-
-/* 显式缩放过（data-sized）的图默认靠左：缩放锚点在左缘，拖动位置稳定 */
-.ywiki-prose .ywiki-image-frame[data-sized] {
-  justify-content: flex-start;
-}
-/* 显式对齐（图片工具条的左/中/右）优先于上面的默认规则 */
-.ywiki-prose .ywiki-image-frame[data-align='left'] { justify-content: flex-start; }
-.ywiki-prose .ywiki-image-frame[data-align='center'] { justify-content: center; }
-.ywiki-prose .ywiki-image-frame[data-align='right'] { justify-content: flex-end; }
-
-/* inner 贴合图片：选中框/手柄相对它定位，才随图片尺寸变化 */
-.ywiki-prose .ywiki-image-inner {
-  position: relative;
-  display: inline-block;
-  max-width: 100%;
-  line-height: 0;
-}
-/* 缩放期间禁止选中文本：跟手拖动时若触发文字选区会打断手感 */
-.ywiki-prose .ywiki-image-frame.is-resizing {
-  user-select: none;
-}
-
-/**
- * 选中态（对齐飞书截图）：蓝框 + 四角圆点手柄，拖动等比缩放。
- * 手柄只在"用户点过这张图"时显示（见 `.img-pick-active` 门控说明），
- * 未选中时 display:none，既不拦截点击也不产生视觉噪声。
- */
-/**
- * 四角手柄的尺寸与观感对齐飞书（实测飞书是 20×20 的命中区）。
- *
- * 早前是 10px 的小圆点：在 380px 宽的缩略图上几乎看不见，用户反馈
- * "选中了但看不清是不是选中了"（实测飞书明显更醒目）。这里放大到 14px
- * 的实心圆 + 2px 蓝描边 + 白色打底，并给整块加一圈白色外发光，
- * 保证在深色/蓝色图片上也能分辨。
- */
-.ywiki-prose .ywiki-image-handle {
-  display: none;
-  position: absolute;
-  width: 14px;
-  height: 14px;
-  box-sizing: border-box;
-  border: 2px solid var(--color-accent);
-  border-radius: 50%;
-  background: #fff;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
-  z-index: 3;
-}
-/*
- * 选中外观需**同时**满足：node view 处于选中态，且用户点过这张图
- * （`.img-pick-active`）。只看前者会被 PM 的默认选区骗到——文档以图片
- * 开头时一打开页面就是 NodeSelection，不门控就会出现"没点过却带蓝框"。
- */
-.editor-shell.img-pick-active .ywiki-prose .ywiki-image-frame.is-selected .ywiki-image-inner {
-  /**
-   * 双层描边：内层蓝色实线 + 外层白色细线。
-   *
-   * 单用蓝色在蓝底图片上几乎看不出边界（用户反馈"看不清有没有选中"）；
-   * 白色隔离带让边框在任何底图上都有对比，与飞书的观感一致。
-   *
-   * 圆角与表格/其它块的选中框统一为 6px（用户反馈"图片选中的圆角和表格
-   * 选中的差不多，现在有点不一致"）：早先这里是 4px，图片行的框是 3px，
-   * 与表格的 6px 摆在一起时能明显看出差别。
-   */
-  outline: 2px solid var(--color-accent);
-  outline-offset: 3px;
-  border-radius: 6px;
-  box-shadow: 0 0 0 5px #fff, 0 0 0 6px color-mix(in srgb, var(--color-accent) 28%, transparent);
-}
-.editor-shell.img-pick-active .ywiki-prose .ywiki-image-frame.is-selected .ywiki-image-handle {
-  display: block;
-}
-/*
- * 图片行内**显示**四角手柄（对齐飞书）：拖角调整该图的相对权重，
- * 整行按新权重重算，因此仍然铺满、仍然等高。
- * 唯一的例外是「整行处于块选区」时——那时拖动语义是移动整行，
- * 由行内重排逻辑让位给整块拖拽（见 image-nodeview 的 mousedown 判定）。
- */
-.editor-shell.img-pick-active .ywiki-prose .ywiki-image-frame.is-selected.is-in-gallery .ywiki-image-handle {
-  display: block;
-}
-/* 图片行内仍画选中蓝框，但只包住被选中的那一张（inner 贴合图片） */
-.editor-shell.img-pick-active .ywiki-prose .ywiki-image-frame.is-selected.is-in-gallery .ywiki-image-inner {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 3px;
-  /* 与其它块/图片的选中框同一圆角 */
-  border-radius: 6px;
-}
-/* 四个角：手柄中心骑在蓝框上（outline-offset 3px + 手柄半宽 7px = -10px） */
-.ywiki-prose .ywiki-image-handle.handle-nw { left: -10px; top: -10px; cursor: nwse-resize; }
-.ywiki-prose .ywiki-image-handle.handle-ne { right: -10px; top: -10px; cursor: nesw-resize; }
-.ywiki-prose .ywiki-image-handle.handle-sw { left: -10px; bottom: -10px; cursor: nesw-resize; }
-.ywiki-prose .ywiki-image-handle.handle-se { right: -10px; bottom: -10px; cursor: nwse-resize; }
-
-/**
- * 已选中的图片：放大镜光标（点击再次 = 打开大图预览）。
- * 拖拽缩放期间必须让位给缩放光标——否则指针拖离手柄、落在图片上时
- * 会突然变成放大镜（用户实测反馈）。
- */
-.editor-shell.img-pick-active .ywiki-prose .ywiki-image-frame.is-selected:not(.is-resizing) img.ywiki-image {
-  cursor: zoom-in;
-}
-.ywiki-prose img.ywiki-image[data-image-missing] {
-  min-width: 120px;
-  min-height: 40px;
-  border: 1px dashed var(--color-border-strong);
-  background: var(--color-surface-subtle);
-}
-
-/**
- * 块级选中：普通块铺蓝底，**自带视觉身份的块只加外圈**。
- *
- * ## 两种画法，按块是否有自己的「脸」来分
- *
- * 飞书的做法（用户提供了对照截图）是一套区分得很清楚的规则：
- *
- *  - **普通块**（段落、标题、列表、引用、图片…）——本来没有底色，选中时铺一条
- *    半透明蓝带，一眼能看出"这一段被选中了"；
- *  - **自带视觉身份的块**（高亮块、表格、代码块）——它们本来就有底色或边框，
- *    再往里铺一层蓝会把内容染色、把表格单元格弄脏。这些块只在**外围加一圈
- *    描边**，表达"这块在选区里"，内容配色完全不动。
- *
- * 早先我一度把两类统一成蓝底，结果表格单元格被整片染蓝、高亮块的黄绿底色
- * 也被改掉——用户明确纠正："像这类（高亮、表格等等）都可以有个外圈，不用蓝色
- * 背景"。
- *
- * ## 宽度只到正文列，不能铺到整页
- *
- * 曾经把带子向两侧溢出到"页面横带"边缘，那是把**可起手区域**和**高亮宽度**
- * 混为一谈了：起手区可以宽（用户在页面空白处按下就能拖选），但高亮必须只覆盖
- * 正文，否则左侧目录、右侧大纲栏也被染蓝（用户原话："我内容区域在红框区域，
- * 为啥选中后有个这么宽的蓝色背景？不合理啊！"）。
- *
- * ## 为什么普通块用伪元素而不是直接改 `background`
- *
- * 直接改背景会与块自身可能存在的底色冲突；伪元素能叠一层半透明，原底色仍透出。
- * 不能用 `z-index: -1`：那会让底色跑到祖先背景之后（`.tiptap` 是
- * `position: relative`），一旦宿主给正文加了底色，高亮就整块消失。
- */
-.ywiki-prose .is-block-selected {
-  position: relative;
-  border-radius: 6px;
-}
-
-/**
- * 普通块：铺半透明蓝带。
- *
- * 排除自带视觉身份的块（见下方外圈分支）——这是两类画法的唯一分界。
- * 用 `[data-block-chrome]` 声明式判断，而不是硬枚举类名：新增块时只在自己的
- * 渲染代码里加属性即可，不必回来改这里（思维导图就曾因为漏改而错误地变成蓝底）。
- */
-.ywiki-prose .is-block-selected:not([data-block-chrome]):not(.doc-callout):not(.tableWrapper):not(.code-block-wrap):not(.ywiki-image-gallery)::before {
-  content: '';
-  position: absolute;
-  /**
-   * 四周比块本身**外扩**，让选中色不要紧贴文字（用户反馈"文字选中区域
-   * 往外扩一下"）。块盒子就是文字行盒，贴着它画会让文字看起来被框死。
-   *
-   * 纵向外扩量由 `measureBlocksPadding` 按**实测块间距**逐块写入：
-   *  - 相邻两个都选中：各溢出间隙的一半 → 两块拼成连续一条，且不重叠
-   *    （间隙实测 6.86px 到 21px 不等，写死一个值必然要么留白缝要么叠出深线）；
-   *  - 开边一侧（首块上方 / 末块下方）：用 `SELECT_PAD_Y` 给文字留呼吸空间。
-   *
-   * 横向用 `SELECT_PAD_X`：再宽就会溢出正文列（用户此前明确反对底色超出版心）。
-   * 两侧同时外扩，因此带子比正文列宽 2×6px，仍落在阅读区留白内。
-   */
-  top: calc(-1 * var(--block-select-pad-top, 5px));
-  bottom: calc(-1 * var(--block-select-pad-bottom, 5px));
-  left: calc(-1 * var(--block-select-pad-x, 6px));
-  right: calc(-1 * var(--block-select-pad-x, 6px));
-  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
-  /* 6px 圆角：外扩后的矩形边角更明显，需要圆角才不生硬 */
-  border-radius: 6px;
-  pointer-events: none;
-}
-
-/**
- * 自带视觉身份的块：**只加外圈，不铺蓝底**。
- *
- * ## 哪些块算"自带视觉身份"
- *
- * 判据是「它本身已经有可见的边框、底色或独立画布」。这类块再往里铺一层蓝，
- * 会把内容染色或把画布弄脏；只在外围加圈，既表达"在选区里"，又不改内容观感：
- *
- *  - 高亮块（浅色底 + 边框）
- *  - 表格（网格线）
- *  - 代码块（深色底）
- *  - 思维导图（独立画布；用户实测："为啥思维导图没有框而是蓝色"）
- *  - 文件卡片 / 视频嵌入（自带卡片外观）
- *  - 分栏（多列结构，铺底色会把两栏之间的空隙也染上）
- *
- * 其余块（段落、标题、列表、引用、图片…）没有自己的外观，走蓝底分支。
- *
- * ## 为什么用 `[data-block-chrome]` 而不是继续堆类名选择器
- *
- * 之前是 `:is(.doc-callout, .tableWrapper, .code-block-wrap)` 硬枚举。每新增
- * 一种块都要改两处（`:not()` 与 `:is()`），漏一处就会退化成"这个块又变蓝了"——
- * 思维导图就是这么漏掉的。改为让节点自己在根元素上声明 `data-block-chrome`，
- * 新增块时只在自己的渲染代码里加一个属性，不必再来碰这里。
- *
- * `outline` 而不是 `border`：border 会参与盒模型，给一个已经撑满正文列宽度的
- * 表格加上 2px 边框会让它溢出或挤压内容；outline 不占布局，`outline-offset`
- * 还能让它落在块的外侧，正好是"外圈"的观感。
- *
- * 用 55% 而非更浅的透明度：高亮块是浅蓝底、代码块是深底、表格有网格线，
- * 太淡的圈在这些底色上都看不清边界。
- */
-.ywiki-prose :is([data-block-chrome], .doc-callout, .tableWrapper, .code-block-wrap).is-block-selected {
-  /**
-   * 描边圆角跟着**块自己的圆角**走，而不是写死 6px。
-   *
-   * 各块自带外观的圆角并不统一（高亮块 9px、文件卡片 8px、思维导图 12px），
-   * 写死一个值就会出现"框的角比块本身的角更方"的错位观感（用户实测反馈：
-   * "思维导图的选中圆角最好和选中带边框的圆角一致"）。用变量按块类型覆盖，
-   * 默认 6px 与表格一致。
-   */
-  --block-select-radius: 6px;
-  /**
-   * 实色而不是 55% 半透明：高亮块自带浅色底与彩色边框，半透明蓝圈叠在
-   * 这些底色上几乎看不出来（用户反馈"高亮没有被选中、没有边框"）。与图片
-   * 选中的描边用同一个强度，所有块的"被选中"一眼可辨且观感一致。
-   */
-  outline: 2px solid var(--color-accent);
-  outline-offset: 2px;
-  /* 与铺色分支同一圆角，两种选中画的观感才统一 */
-  border-radius: var(--block-select-radius);
-}
-/* 各块按自身外观的圆角覆盖描边圆角（值取自它们各自的 border-radius） */
-.ywiki-prose .doc-callout.is-block-selected { --block-select-radius: 9px; }
-.ywiki-prose .doc-file-attachment.is-block-selected { --block-select-radius: 8px; }
-.ywiki-prose [data-mind-map-node].is-block-selected { --block-select-radius: 12px; }
-
-/* 块级拖拽期间：屏蔽浏览器原生的字形级选中高亮。
-   块级选择本质上是一个覆盖整块文字的文本选区（复制/删除需要它），
-   但浏览器会为它画字形级蓝底，与"整块底色"叠在一起很乱。
-   这里只影响绘制，不影响选区模型与复制行为。 */
-.ywiki-prose.is-block-selecting ::selection,
-.ywiki-prose.is-block-selecting *::selection {
-  background: transparent;
-  color: inherit;
-}
-
-/**
- * 拖拽选择框（飞书式的矩形，跟随鼠标）。
- *
- * ## 必须**填充**，不能只描边（用户对比飞书截图后指出）
- *
- * 此前这里刻意只画边框、不铺底色，理由是"填充会盖住高亮块/表格的颜色"。
- * 但飞书的拖拽框本身就是一块**半透明蓝色矩形**，用户一眼就能判断"我现在框住
- * 了哪些内容、范围有多大"；只有边框时，框内的内容看起来和框外没区别，
- * 拖动过程中几乎无法判断落点，这正是用户反馈的差异。
- *
- * 用极低的透明度（12%）解决当初的顾虑：底色仍然透得出来，不会把高亮色
- * 染成另一种颜色；框的边界由 1px 实线 + 白描边交代清楚。
- */
-.block-marquee {
-  position: absolute;
-  z-index: 33;
-  pointer-events: none;
-  /**
-   * 宽高由插件按「按下点 → 当前指针」的拖拽矩形写入，边框必须算在尺寸内——
-   * 否则 1px 边框会让框比鼠标实际划出的范围多出 2px（用户实测：左边贴合、
-   * 右边多出一截）。
-   */
-  box-sizing: border-box;
-  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
-  border: 1px solid color-mix(in srgb, var(--color-accent) 65%, transparent);
-  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-surface) 60%, transparent);
-  border-radius: 2px;
-}
-
-/* ---------------------------------------------------------------- 表格交互样式 */
-/* 这几条此前完全缺失：resizable 生效但没有任何可视反馈，选中态也没有高亮，
-   导致"能拖列宽但看不出在哪拖、选中了格子也不知道"。 */
-/**
- * 列宽拖拽手柄。
- *
- * prosemirror-tables 为**每一行**各插一个 4px 宽的 widget，默认样式是强调色 +
- * 60% 透明度：鼠标经过列边界时它会在表格上竖着亮起一条分段蓝线，既没有
- * 拖拽反馈，也不像任何已知控件（用户反馈"表格里这个蓝色是什么？没什么用吧"）。
- *
- * 改为两级语义：
- *  - 悬停边界：中性色细线，连续贯穿整列（`top/bottom: -1px` 补齐行间缝隙），
- *    配合 `col-resize` 光标表达"这里可以拖"；
- *  - 真正拖拽中（单元格带 `column-resize-dragging`）：才使用强调色。
- */
-.ywiki-prose .column-resize-handle {
-  position: absolute;
-  right: -2px;
-  top: -4px;
-  bottom: -4px;
-  width: 3px;
-  border-radius: 2px;
-  background-color: var(--color-border-strong, #b9c3d2);
-  pointer-events: none;
-}
-.ywiki-prose .column-resize-dragging .column-resize-handle {
-  background-color: var(--color-accent, #2f6feb);
-  box-shadow: 0 0 0 1px var(--color-surface, #fff);
-}
-.ywiki-prose.resize-cursor, .ywiki-prose .resize-cursor { cursor: col-resize; }
-/* 矩形选中的单元格 */
-.ywiki-prose .selectedCell:after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
-  pointer-events: none;
-  z-index: 2;
-}
-.ywiki-prose td,
-.ywiki-prose th {
-  position: relative;
-}
+.ywiki-prose img.ywiki-image{max-width:100%;border-radius:var(--content-media-radius);display:block}.ywiki-prose .ywiki-image-frame{display:flex;justify-content:center;flex-direction:column;align-items:center}.ywiki-prose .ywiki-image-frame.has-caption>.ywiki-image-inner{align-self:center}.ywiki-prose .ywiki-image-caption{max-width:100%;margin-top:6px;padding:0 2px;color:var(--color-text-muted);font-size:12px;line-height:1.5;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:text}.ywiki-prose .ywiki-image-gallery{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;width:100%}.ywiki-prose .ywiki-image-gallery.is-block-selected,.ywiki-prose .ywiki-image-frame.is-block-selected .ywiki-image-inner{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:6px}.ywiki-prose .ywiki-image-gallery>.ywiki-image-frame.is-in-gallery .ywiki-image-inner{cursor:default}.ywiki-prose .ywiki-image-gallery{position:relative}.ywiki-gallery-marquee{position:fixed;z-index:69;border:1px solid color-mix(in srgb,var(--color-accent) 70%,transparent);background:color-mix(in srgb,var(--color-accent) 12%,transparent);border-radius:2px;pointer-events:none}.ywiki-prose .ywiki-image-frame.is-multi-picked .ywiki-image-inner,.ywiki-prose .ywiki-image-frame.is-block-selected-image .ywiki-image-inner,.wendang-portal .ywiki-image-frame.is-multi-picked .ywiki-image-inner{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:6px}.ywiki-prose .is-block-selected .ywiki-image-inner:after,.ywiki-prose .ywiki-image-frame.is-multi-picked .ywiki-image-inner:after,.ywiki-prose .ywiki-image-frame.is-block-selected-image .ywiki-image-inner:after,.wendang-portal .ywiki-image-frame.is-multi-picked .ywiki-image-inner:after{content:"";position:absolute;inset:0;border-radius:var(--content-media-radius, 4px);background:color-mix(in srgb,var(--color-accent) 16%,transparent);pointer-events:none}.ywiki-prose .ywiki-image-frame.is-image-drop-target .ywiki-image-inner{outline:2px solid color-mix(in srgb,var(--color-accent) 70%,transparent);outline-offset:3px;border-radius:var(--content-media-radius, 6px)}.ywiki-prose .ywiki-image-frame.is-image-drop-target .ywiki-image-inner:after{content:"";position:absolute;inset:0;border-radius:var(--content-media-radius, 6px);background:color-mix(in srgb,var(--color-accent) 14%,transparent);pointer-events:none}.ywiki-image-drop-line,.ywiki-gallery-drop-line{position:fixed;border-radius:999px;pointer-events:none;z-index:70}.ywiki-image-drop-line{z-index:60}.ywiki-image-drop-line:before,.ywiki-image-drop-line:after,.ywiki-gallery-drop-line:before,.ywiki-gallery-drop-line:after{content:"";position:absolute;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:inherit}.ywiki-image-drop-line:before,.ywiki-gallery-drop-line:before{top:-3px}.ywiki-image-drop-line:after,.ywiki-gallery-drop-line:after{bottom:-3px}.wendang-portal .ywiki-gallery-drop-line,.wendang-portal .ywiki-image-drop-line{position:fixed}.ywiki-prose .ywiki-image-frame.is-gallery-dragging{opacity:.55}.ywiki-prose .ywiki-image-gallery{gap:12px;align-items:flex-start}.ywiki-prose .ywiki-image-gallery>.ywiki-image-frame{flex:1 1 0;min-width:0;width:auto;height:auto;max-width:none;justify-content:flex-start}.ywiki-prose .ywiki-image-gallery>.ywiki-image-frame{flex-grow:calc(var(--ywiki-image-ratio, 1) * var(--ywiki-image-weight, 1))}.ywiki-prose .ywiki-image-gallery>.ywiki-image-frame .ywiki-image-inner{width:100%;max-width:none}.ywiki-prose .ywiki-image-gallery>.ywiki-image-frame img.ywiki-image{width:100%;height:auto;max-width:none;aspect-ratio:var(--ywiki-image-ratio, 1.3333);object-fit:contain;border-radius:var(--content-media-radius)}.ywiki-prose .ywiki-image-frame img.ywiki-image[data-image-loading]{box-sizing:border-box;padding:3px;border-radius:var(--content-media-radius);background-image:conic-gradient(from var(--ywiki-image-flow-angle),color-mix(in srgb,var(--color-accent) 14%,var(--color-surface-subtle)) 0turn 55%,color-mix(in srgb,var(--color-accent) 55%,transparent) 78%,var(--color-accent) 92%,color-mix(in srgb,var(--color-accent) 14%,var(--color-surface-subtle)) 100%);-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-clip:content-box,border-box;-webkit-mask-composite:xor;mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-clip:content-box,border-box;mask-composite:exclude;animation:ywiki-image-flow 1.4s linear infinite;min-height:120px}.ywiki-prose .ywiki-image-gallery>.ywiki-image-frame img.ywiki-image[data-image-loading]{min-height:0}.ywiki-prose .ywiki-image-frame img.ywiki-image[data-image-error]{box-sizing:border-box;min-height:72px;background-color:color-mix(in srgb,var(--color-surface-subtle) 70%,var(--color-border));border-radius:var(--content-media-radius);outline:1px solid color-mix(in srgb,var(--color-border-strong) 55%,transparent);outline-offset:-1px}.ywiki-prose .ywiki-image-gallery>.ywiki-image-frame img.ywiki-image[data-image-error]{min-height:0}@media(prefers-reduced-motion:reduce){.ywiki-prose .ywiki-image-frame img.ywiki-image[data-image-loading]{animation:none}}.ywiki-prose .ywiki-image-frame[data-sized],.ywiki-prose .ywiki-image-frame[data-align=left]{justify-content:flex-start}.ywiki-prose .ywiki-image-frame[data-align=center]{justify-content:center}.ywiki-prose .ywiki-image-frame[data-align=right]{justify-content:flex-end}.ywiki-prose .ywiki-image-inner{position:relative;display:inline-block;max-width:100%;line-height:0}.ywiki-prose .ywiki-image-frame.is-resizing{user-select:none}.ywiki-prose .ywiki-image-handle{display:none;position:absolute;width:14px;height:14px;box-sizing:border-box;border:2px solid var(--color-accent);border-radius:50%;background:#fff;box-shadow:0 1px 3px #00000047;z-index:3}.editor-shell.img-pick-active .ywiki-prose .ywiki-image-frame.is-selected .ywiki-image-inner{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:6px;box-shadow:0 0 0 5px #fff,0 0 0 6px color-mix(in srgb,var(--color-accent) 28%,transparent)}.editor-shell.img-pick-active .ywiki-prose .ywiki-image-frame.is-selected .ywiki-image-handle,.editor-shell.img-pick-active .ywiki-prose .ywiki-image-frame.is-selected.is-in-gallery .ywiki-image-handle{display:block}.editor-shell.img-pick-active .ywiki-prose .ywiki-image-frame.is-selected.is-in-gallery .ywiki-image-inner{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:6px}.ywiki-prose .ywiki-image-handle.handle-nw{left:-10px;top:-10px;cursor:nwse-resize}.ywiki-prose .ywiki-image-handle.handle-ne{right:-10px;top:-10px;cursor:nesw-resize}.ywiki-prose .ywiki-image-handle.handle-sw{left:-10px;bottom:-10px;cursor:nesw-resize}.ywiki-prose .ywiki-image-handle.handle-se{right:-10px;bottom:-10px;cursor:nwse-resize}.editor-shell.img-pick-active .ywiki-prose .ywiki-image-frame.is-selected:not(.is-resizing) img.ywiki-image{cursor:zoom-in}.ywiki-prose img.ywiki-image[data-image-missing]{min-width:120px;min-height:40px;border:1px dashed var(--color-border-strong);background:var(--color-surface-subtle)}.ywiki-prose .is-block-selected{position:relative;border-radius:6px;cursor:grab}.ywiki-prose .is-block-selected:active,.ywiki-prose.is-block-dragging,.ywiki-prose.is-block-dragging *{cursor:grabbing!important}.ywiki-prose .is-block-menu-target:not([data-block-chrome]):not(.doc-callout):not(.tableWrapper):not(.code-block-wrap){background:var(--color-accent-soft);border-radius:4px}.ywiki-prose .is-block-selected:not([data-block-chrome]):not(.doc-callout):not(.tableWrapper):not(.code-block-wrap):not(.ywiki-image-gallery):before{content:"";position:absolute;top:calc(-1 * var(--block-select-pad-top, 5px));bottom:calc(-1 * var(--block-select-pad-bottom, 5px));left:calc(-1 * var(--block-select-pad-x, 6px));right:calc(-1 * var(--block-select-pad-x, 6px));background:color-mix(in srgb,var(--color-accent) 16%,transparent);border-radius:6px;pointer-events:none}.ywiki-prose :is([data-block-chrome],.doc-callout,.tableWrapper,.code-block-wrap).is-block-selected{--block-select-radius: 6px;outline:2px solid var(--color-accent);outline-offset:2px;border-radius:var(--block-select-radius)}.ywiki-prose .doc-callout.is-block-selected{--block-select-radius: 9px}.ywiki-prose .doc-file-attachment.is-block-selected{--block-select-radius: 8px}.ywiki-prose [data-mind-map-node].is-block-selected{--block-select-radius: 12px}.ywiki-prose.is-block-selecting ::selection,.ywiki-prose.is-block-selecting *::selection{background:transparent;color:inherit}.block-marquee{position:absolute;z-index:33;pointer-events:none;box-sizing:border-box;background:color-mix(in srgb,var(--color-accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--color-accent) 65%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--color-surface) 60%,transparent);border-radius:2px}.ywiki-prose .column-resize-handle{position:absolute;right:-2px;top:-4px;bottom:-4px;width:3px;border-radius:2px;background-color:var(--color-border-strong, #b9c3d2);pointer-events:none}.ywiki-prose .column-resize-dragging .column-resize-handle{background-color:var(--color-accent, #2f6feb);box-shadow:0 0 0 1px var(--color-surface, #fff)}.ywiki-prose.resize-cursor,.ywiki-prose .resize-cursor{cursor:col-resize}.ywiki-prose .selectedCell:after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--color-accent) 8%,transparent);pointer-events:none;z-index:2}.ywiki-prose td,.ywiki-prose th{position:relative}

package/dist/styles/file-video.css

@@ -1,12 +1 @@
-.doc-file-video { margin-top: 8px; }
-.doc-file-video video {
-  width: 100%;
-  max-height: 420px;
-  border-radius: 6px;
-  background: #000;
-}
-.doc-file-video-fallback {
-  margin: 0;
-  font-size: 13px;
-  color: var(--color-text-faint);
-}
+.doc-file-video{margin-top:8px}.doc-file-video video{width:100%;max-height:420px;border-radius:6px;background:#000}.doc-file-video-fallback{margin:0;font-size:13px;color:var(--color-text-faint)}