@one2x/medeo-rte 0.4.3 → 0.4.5

package/README.md

@@ -75,7 +75,7 @@ new Editor(el, { plugins: [...builtinEmbedPlugins, formulaPlugin] });
 
 两种 kind：
 
-- **`mark`**：纯样式叠层（高亮底色、边框、文字缺省色等）。**交互与普通文本流完全一致**：点击落光标、方向键逐字走、能选中、能编辑；不参与嵌套（`parentId` 恒为 `null`），可与其他块任意叠放。光标停在左右边界时都分内外两侧：从块内走到边界或点在底色里是**内侧**，输入算区间内（背景跟着延伸，遇到换行就断）；在边界上再朝块外按一次方向键，或点在底色外，是**外侧**（光标画在底色外），输入的文字留在块外、同一行；朝块内按一次回到内侧。其他方式落到边界（`setSelection`、撤销等）时，右边界默认内侧、左边界默认外侧。没有 `placeholder` 时，区间内文字删光后块自动移除；有 `placeholder` 时收成零宽，灰字由 SDK 画出来，不进正文。样式只需配 `chrome.background`、`chrome.radius`（圆角，默认 3；折行时只有首行的上两角和末行的下两角是圆角，其余角为直角，单行自然四角全圆）、`chrome.paddingX`（水平内边距，不传按 4px，传 `0` 表示不留）、`chrome.hoverBackground`（鼠标悬停时整段含折行各行换成这个底色）和 `chrome.placeholderColor`（灰字颜色，不传是 `#98a2b3`）：
+- **`mark`**：纯样式叠层（高亮底色、边框、文字缺省色等）。点击落在字上，块内方向键逐字走。从外侧朝块内按方向键不会走进去，而是先进入选中态（高亮整段文字，焦点留在来的这一侧）。从内侧走到边界再往外按，同样先进入选中态，焦点留在要出去的这一侧。选中态再朝块内按一次，光标进入这一侧的内侧；朝外侧再按一次，才离开到这一侧的外面。拖选或 Shift 拉出的选区不是选中态，左右键仍收到选区两端。选中态打字按选区替换整段。上下键不参与选中态，按原来的方式换行。同一条边上有多块重叠时，从外往里撞上选范围最大的，从里往外离开选范围最小的。不参与嵌套（`parentId` 恒为 `null`），可与其他块任意叠放。光标停在左右边界时都分内外两侧：从块内走到边界或点在底色里是**内侧**，输入算区间内（背景跟着延伸，遇到换行就断）；选中态再朝外侧按一次，或点在底色外，是**外侧**（光标画在底色外），输入的文字留在块外、同一行。其他方式落到边界（`setSelection`、撤销等）时，右边界默认内侧、左边界默认外侧。没有 `placeholder` 时，区间内文字删光后块自动移除；有 `placeholder` 时，只删这块里的字会收成零宽，灰字由 SDK 画出来，不进正文，方向键也不把它当成整段选中。选区比这块更大（含全选）再删除会把这块拆掉；已经是零宽灰字时，光标在它上面再按退格或删除也会拆掉。样式只需配 `chrome.background`、`chrome.radius`（圆角，默认 3；折行时首行的上两角和末行的下两角是圆角，倒数第二行右缘超出最后一行时它的右下角也圆，其余角为直角，单行自然四角全圆）、`chrome.paddingX`（水平内边距，不传按 4px，传 `0` 表示不留）、`chrome.hoverBackground`（鼠标悬停时整段含折行各行换成这个底色）和 `chrome.placeholderColor`（灰字颜色，不传是 `#c5ccd6`）：
 
   ```ts
   editor.insertVirtualBlock({
@@ -84,15 +84,15 @@ new Editor(el, { plugins: [...builtinEmbedPlugins, formulaPlugin] });
   });
   ```
 
-  `paddingX` 和 CSS 行内元素的 padding 一样**占排版宽度**：mark 真正的起点前、终点后各让出 `paddingX`，前后文字和相邻 mark 不会压在底色上，光标在内外侧的位置也正好是下一个字落下的位置。折行处不让位，底色在行首/行尾外扩，外扩部分画在内容区外：SDK 默认让画布和 `.mini-page-wrap` 左右各多出 5px（负 margin 抵消，文字位置不变），所以 `paddingX` 在 5px 以内开箱即用，更大就要靠编辑器 `padding.x` 补足。**宿主若覆盖 `.mini-page-wrap` 的 `padding`，请保留 `padding-inline: 5px; margin-inline: -5px;`，否则文字会左移 5px、外扩被裁**。不支持垂直内边距。
+  `paddingX` 留在底色里面，每一行的字都按它缩进。mark 真正的起点前、终点后，这段空白还占排版宽度，前后文字和相邻 mark 不会压在底色上，光标在内外侧的位置也正好是下一个字落下的位置。还没写完的行，底色铺到内容区右缘。SDK 默认让画布和 `.mini-page-wrap` 左右各多出 5px（负 margin 抵消，文字位置不变），所以贴边的 `paddingX` 在 5px 以内开箱即用。**宿主若覆盖 `.mini-page-wrap` 的 `padding`，请保留 `padding-inline: 5px; margin-inline: -5px;`，否则文字会左移 5px、贴边的内边距会被裁**。不支持垂直内边距。
 
-  **空态。** `placeholder` 不是正文，复制、保存、`getContent()` 里都没有这段字。删光或 `replaceMarkText(id, '')` 后块留在原下标，两种光标亲和打字都会写进块里。没传 `placeholder` 的 mark 不能建成零宽，删光即拆掉。
+  **空态。** `placeholder` 不是正文，复制、保存、`getContent()` 里都没有这段字。只删这块里的字，或 `replaceMarkText(id, '')`，块留在原下标，两种光标亲和打字都会写进块里。选区超出这块再删，或光标停在灰字上再按退格、删除，块会被拆掉。没传 `placeholder` 的 mark 不能建成零宽，删光即拆掉。
 
   ```ts
   const id = editor.insertVirtualBlock({
     kind: 'mark',
     placeholder: 'Describe a scene',
-    chrome: { background: '#fff3bf', placeholderColor: '#98a2b3' }
+    chrome: { background: '#fff3bf', placeholderColor: '#c5ccd6' }
   });
   // 光标在这块里（含空块、内侧边界）时：
   editor.on('markenter', ({ id }) => {});
@@ -132,7 +132,7 @@ editor.insertSlice({
       start: 19,
       end: 33,
       placeholder: 'a red bicycle',
-      chrome: { background: '#fff3bf', placeholderColor: '#98a2b3' }
+      chrome: { background: '#fff3bf', placeholderColor: '#c5ccd6' }
     }
   ]
 });
@@ -147,7 +147,7 @@ editor.insertSlice({
 editor.insertVirtualBlock({
   kind: 'mark',
   placeholder: 'Describe a scene',
-  chrome: { background: '#fff3bf', placeholderColor: '#98a2b3' }
+  chrome: { background: '#fff3bf', placeholderColor: '#c5ccd6' }
 });
 
 // 也可显式下标