tiptap-markdown-react 0.10.4 → 0.12.0

package/dist/style.css

@@ -1,12 +1,33 @@
 /* 规范正文样式（编辑器 / 只读预览 / SSR 阅读三处共用同一个类，保证所见即所得、
    发布后一致）。配色/字体全部走可被消费方覆盖的 CSS 变量（--tmr-*，带默认值）。 */
 
-._editorScroll_ff3la_4 {
+/* 编辑器最外层：查找替换浮动条的粘性范围就是它（超出编辑器范围后浮动条随之离场）。
+   正文的滚动容器仍是 .editorScroll（宿主传的 className 依然落在它身上，契约不变）。 */
+._editorHost_1k0bn_6 {
+  position: relative;
+}
+
+/* 浮动条的粘性锚点：高度 0，不占布局、不推挤正文；sticky 让浮动条在「最近的滚动容器」
+   里粘住（宿主的外层滚动容器或页面本身），正文滚动时不会把条子卷上去。
+   注意：锚点必须在 DOM 里排在正文之前——排在后面的话它的自然位置在正文底部，粘性范围就错了。 */
+._findBarAnchor_1k0bn_13 {
+  position: sticky;
+  top: 0;
+  height: 0;
+  z-index: 7;
+}
+
+/* 浮动条本体：绝对定位浮在正文之上，具体落点由 findBarOffset 决定（默认右上 4px） */
+._findBar_1k0bn_13 {
+  position: absolute;
+}
+
+._editorScroll_1k0bn_5 {
   margin-top: 24px;
   position: relative;
 }
 
-._editorContent_ff3la_9 {
+._editorContent_1k0bn_30 {
   outline: none;
   padding: 0;
   font-family: var(
@@ -29,7 +50,7 @@
 }
 
 /* placeholder：空文档第一段显示占位符 */
-._editorContent_ff3la_9 p.is-editor-empty:first-child::before {
+._editorContent_1k0bn_30 p.is-editor-empty:first-child::before {
   content: attr(data-placeholder);
   float: left;
   height: 0;
@@ -37,7 +58,7 @@
   pointer-events: none;
 }
 
-._editorContent_ff3la_9 h1 {
+._editorContent_1k0bn_30 h1 {
   font-family: inherit;
   font-size: 1.55em;
   font-weight: 700;
@@ -45,7 +66,7 @@
   line-height: 1.3;
 }
 
-._editorContent_ff3la_9 h2 {
+._editorContent_1k0bn_30 h2 {
   font-family: inherit;
   font-size: 1.3em;
   font-weight: 700;
@@ -53,7 +74,7 @@
   line-height: 1.3;
 }
 
-._editorContent_ff3la_9 h3 {
+._editorContent_1k0bn_30 h3 {
   font-family: inherit;
   font-size: 1.12em;
   font-weight: 600;
@@ -61,21 +82,21 @@
 }
 
 /* h4-h6：延续 h1-h3 尺寸梯度递减；字号差变小后靠字重保持标题感，h6 字色稍弱。 */
-._editorContent_ff3la_9 h4 {
+._editorContent_1k0bn_30 h4 {
   font-family: inherit;
   font-size: 1.05em;
   font-weight: 600;
   margin: 0.7em 0 0.3em;
 }
 
-._editorContent_ff3la_9 h5 {
+._editorContent_1k0bn_30 h5 {
   font-family: inherit;
   font-size: 0.95em;
   font-weight: 600;
   margin: 0.7em 0 0.3em;
 }
 
-._editorContent_ff3la_9 h6 {
+._editorContent_1k0bn_30 h6 {
   font-family: inherit;
   font-size: 0.88em;
   font-weight: 600;
@@ -83,25 +104,25 @@
   color: var(--tmr-muted, #777777);
 }
 
-._editorContent_ff3la_9 p {
+._editorContent_1k0bn_30 p {
   margin: 0.7em 0;
 }
 
-._editorContent_ff3la_9 ul,
-._editorContent_ff3la_9 ol {
+._editorContent_1k0bn_30 ul,
+._editorContent_1k0bn_30 ol {
   padding-left: 1.5em;
   margin: 0.7em 0;
 }
 
-._editorContent_ff3la_9 ul {
+._editorContent_1k0bn_30 ul {
   list-style: disc;
 }
 
-._editorContent_ff3la_9 ol {
+._editorContent_1k0bn_30 ol {
   list-style: decimal;
 }
 
-._editorContent_ff3la_9 blockquote {
+._editorContent_1k0bn_30 blockquote {
   border-left: 3px solid var(--tmr-accent, #ff6719);
   padding-left: 1em;
   margin: 0.9em 0;
@@ -109,13 +130,13 @@
   font-style: italic;
 }
 
-._editorContent_ff3la_9 a {
+._editorContent_1k0bn_30 a {
   color: var(--tmr-accent, #ff6719);
   text-decoration: underline;
 }
 
 /* 仅行内代码加灰底；代码块内的 <code>（在 pre 内）由 NodeView 自管，排除掉 */
-._editorContent_ff3la_9 code:not(pre code) {
+._editorContent_1k0bn_30 code:not(pre code) {
   background: var(--tmr-code-bg, #f4f4f4);
   padding: 0.15em 0.4em;
   border-radius: 4px;
@@ -130,13 +151,13 @@
   );
 }
 
-._editorContent_ff3la_9 hr {
+._editorContent_1k0bn_30 hr {
   border: none;
   border-top: 1px solid var(--tmr-border, #e6e6e6);
   margin: 1.5em 0;
 }
 
-._editorContent_ff3la_9 img {
+._editorContent_1k0bn_30 img {
   max-width: 100%;
   height: auto;
   border-radius: 6px;
@@ -145,21 +166,21 @@
 }
 
 /* 选中的图片高亮 */
-._editorContent_ff3la_9 img.ProseMirror-selectednode {
+._editorContent_1k0bn_30 img.ProseMirror-selectednode {
   outline: 2px solid var(--tmr-accent, #ff6719);
 }
 
 /* 表格：细边框、表头浅灰；外包 .tableWrapper（编辑器 NodeView + SSR renderWrapper）
  * 桌面：width:100% + 允许换行，整表落在阅读列内（与改前一致）
  * 窄屏：max-content + nowrap，避免列被挤扁，wrapper 内横滑 */
-._editorContent_ff3la_9 .tableWrapper {
+._editorContent_1k0bn_30 .tableWrapper {
   max-width: 100%;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   margin: 1em 0;
 }
 
-._editorContent_ff3la_9 table {
+._editorContent_1k0bn_30 table {
   border-collapse: collapse;
   table-layout: auto;
   width: 100%;
@@ -169,12 +190,12 @@
 }
 
 /* 无 wrapper 的遗留 HTML（旧缓存）仍给一点外边距 */
-._editorContent_ff3la_9 :not(.tableWrapper) > table {
+._editorContent_1k0bn_30 :not(.tableWrapper) > table {
   margin: 1em 0;
 }
 
-._editorContent_ff3la_9 table td,
-._editorContent_ff3la_9 table th {
+._editorContent_1k0bn_30 table td,
+._editorContent_1k0bn_30 table th {
   border: 1px solid var(--tmr-border, #e6e6e6);
   padding: 8px 12px;
   vertical-align: top;
@@ -185,27 +206,27 @@
   word-break: break-word;
 }
 
-._editorContent_ff3la_9 table th {
+._editorContent_1k0bn_30 table th {
   background: var(--tmr-table-header-bg, #f7f7f7);
   font-weight: 600;
 }
 
 @media (max-width: 640px) {
-  ._editorContent_ff3la_9 table {
+  ._editorContent_1k0bn_30 table {
     width: max-content;
     min-width: 100%;
     max-width: none;
   }
 
-  ._editorContent_ff3la_9 table td,
-  ._editorContent_ff3la_9 table th {
+  ._editorContent_1k0bn_30 table td,
+  ._editorContent_1k0bn_30 table th {
     white-space: nowrap;
     word-break: normal;
   }
 }
 
 /* 选中的单元格高亮 */
-._editorContent_ff3la_9 table .selectedCell::after {
+._editorContent_1k0bn_30 table .selectedCell::after {
   content: '';
   position: absolute;
   inset: 0;
@@ -214,7 +235,7 @@
 }
 
 /* 列宽拖拽手柄 */
-._editorContent_ff3la_9 table .column-resize-handle {
+._editorContent_1k0bn_30 table .column-resize-handle {
   position: absolute;
   right: -2px;
   top: 0;
@@ -227,30 +248,30 @@
 /* 任务清单：复选框与首行文字在同一行高内垂直居中。
    li 是 flex 容器，项内段落的外边距不会塌到 li 外（不像普通 ul/ol），只会把正文往下推，
    所以项内段落清零外边距，项间距改由 li 按 ul/ol 的 0.7em 承担。 */
-._editorContent_ff3la_9 ul[data-type='taskList'] {
+._editorContent_1k0bn_30 ul[data-type='taskList'] {
   list-style: none;
   padding-left: 0.2em;
 }
 
-._editorContent_ff3la_9 ul[data-type='taskList'] li {
+._editorContent_1k0bn_30 ul[data-type='taskList'] li {
   display: flex;
   align-items: flex-start;
   gap: 0.5em;
   margin: 0.7em 0;
 }
 
-._editorContent_ff3la_9 ul[data-type='taskList'] li > div > p {
+._editorContent_1k0bn_30 ul[data-type='taskList'] li > div > p {
   margin: 0;
 }
 
 /* 项内第二段起保留半档间距，避免多段任务项的段落粘成一片（首段仍不带外边距） */
-._editorContent_ff3la_9 ul[data-type='taskList'] li > div > p + p {
+._editorContent_1k0bn_30 ul[data-type='taskList'] li > div > p + p {
   margin-top: 0.35em;
 }
 
 /* label 撑满一行行高并居中，框心落在首行文字中线上；
    1lh 即该元素当前行高，随 --tmr-line-height（数字或长度写法）一起变，不靠手调偏移。 */
-._editorContent_ff3la_9 ul[data-type='taskList'] li > label {
+._editorContent_1k0bn_30 ul[data-type='taskList'] li > label {
   display: flex;
   align-items: center;
   flex: 0 0 auto;
@@ -258,18 +279,18 @@
   user-select: none;
 }
 
-._editorContent_ff3la_9 ul[data-type='taskList'] li > div {
+._editorContent_1k0bn_30 ul[data-type='taskList'] li > div {
   flex: 1;
 }
 
-._editorContent_ff3la_9 ul[data-type='taskList'] input[type='checkbox'] {
+._editorContent_1k0bn_30 ul[data-type='taskList'] input[type='checkbox'] {
   margin: 0;
   accent-color: var(--tmr-accent, #ff6719);
   cursor: pointer;
 }
 
 /* 脚注/引文圆标：与正文字垂直居中；配色对齐工具栏 active（浅橙底 + accent 字） */
-._editorContent_ff3la_9 span.citation-ref {
+._editorContent_1k0bn_30 span.citation-ref {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -306,7 +327,7 @@
     border-color 0.15s ease;
 }
 
-._editorContent_ff3la_9 span.citation-ref a {
+._editorContent_1k0bn_30 span.citation-ref a {
   color: inherit;
   text-decoration: none;
   display: flex;
@@ -318,26 +339,26 @@
   pointer-events: none;
 }
 
-._editorContent_ff3la_9 span.citation-ref:hover,
-._editorContent_ff3la_9 span.citation-ref:focus-within,
-._editorContent_ff3la_9 span.citation-ref[data-tmr-citation-active] {
+._editorContent_1k0bn_30 span.citation-ref:hover,
+._editorContent_1k0bn_30 span.citation-ref:focus-within,
+._editorContent_1k0bn_30 span.citation-ref[data-tmr-citation-active] {
   background: var(--tmr-citation-bg-hover, var(--tmr-accent, #ff6719));
   border-color: var(--tmr-citation-bg-hover, var(--tmr-accent, #ff6719));
   color: var(--tmr-citation-fg-hover, #ffffff);
 }
 
-._editorContent_ff3la_9 .tiptap-mathematics-render[data-type='inline-math'] {
+._editorContent_1k0bn_30 .tiptap-mathematics-render[data-type='inline-math'] {
   display: inline;
 }
 
-._editorContent_ff3la_9 .tiptap-mathematics-render[data-type='block-math'] {
+._editorContent_1k0bn_30 .tiptap-mathematics-render[data-type='block-math'] {
   margin: 0.9em 0;
   overflow-x: auto;
   text-align: center;
 }
 
 /* 导入占位：进度写在光标处，不进 Markdown */
-._editorContent_ff3la_9 .tmr-import-placeholder {
+._editorContent_1k0bn_30 .tmr-import-placeholder {
   display: flex;
   align-items: center;
   gap: 0.5em;
@@ -347,16 +368,16 @@
   user-select: none;
 }
 
-._editorContent_ff3la_9 .tmr-import-placeholder-spin {
+._editorContent_1k0bn_30 .tmr-import-placeholder-spin {
   width: 0.7em;
   height: 0.7em;
   border: 1.5px solid var(--tmr-border, #e6e6e6);
   border-top-color: var(--tmr-accent, #ff6719);
   border-radius: 50%;
-  animation: _tmr-import-spin_ff3la_1 0.7s linear infinite;
+  animation: _tmr-import-spin_1k0bn_1 0.7s linear infinite;
 }
 
-@keyframes _tmr-import-spin_ff3la_1 {
+@keyframes _tmr-import-spin_1k0bn_1 {
   to {
     transform: rotate(360deg);
   }
@@ -564,6 +585,160 @@
   background: #fff3ec;
   border-radius: 4px;
 }
+/* 查找替换浮动条。配色走 --tmr-* 变量（与工具栏/评论同一套），宿主可覆盖。 */
+
+._bar_1lvby_3 {
+  --fb-accent: var(--tmr-accent, #ff6719);
+  --fb-text: var(--tmr-text, #363737);
+  --fb-muted: var(--tmr-toolbar-muted, #6b6b6b);
+  --fb-border: var(--tmr-toolbar-border, #ececec);
+
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: max-content;
+  max-width: 100%;
+  padding: 8px;
+  box-sizing: border-box;
+  background: #fff;
+  border: 1px solid var(--fb-border);
+  border-radius: 10px;
+  box-shadow: 0 6px 24px rgb(0 0 0 / 14%);
+  color: var(--fb-text);
+  font-size: 14px;
+  line-height: 1.3;
+}
+
+._row_1lvby_25 {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  /* 窄屏（手机）允许折行，浮动条不会横向溢出 */
+  flex-wrap: wrap;
+}
+
+/* 第二行起（替换 / 只读提示）与查找行之间用细线分开 */
+._row_1lvby_25 + ._row_1lvby_25 {
+  margin-top: 2px;
+  padding-top: 8px;
+  border-top: 1px solid var(--fb-border);
+}
+
+._field_1lvby_40 {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex: none;
+  /* 两个输入框（带不带放大镜图标）总宽一致，左右边缘都对得齐 */
+  width: 228px;
+  height: 30px;
+  padding: 0 8px;
+  box-sizing: border-box;
+  border: 1px solid var(--fb-border);
+  border-radius: 6px;
+  background: #fff;
+}
+
+._field_1lvby_40:focus-within {
+  border-color: var(--fb-accent);
+}
+
+._fieldIcon_1lvby_59 {
+  flex: none;
+  color: var(--fb-muted);
+}
+
+._input_1lvby_64 {
+  width: 100%;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+}
+
+/* 计数：等宽数字，避免 1 / 9 → 1 / 10 时宽度跳动 */
+._counter_1lvby_75 {
+  flex: none;
+  min-width: 46px;
+  padding: 0 2px;
+  color: var(--fb-muted);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+._counterInvalid_1lvby_84 {
+  color: var(--tmr-danger, #d4380d);
+}
+
+._btn_1lvby_88 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  height: 30px;
+  min-width: 30px;
+  padding: 0 8px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--fb-muted);
+  font: inherit;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+._btn_1lvby_88:hover:not(:disabled) {
+  background: #f3f3f3;
+  color: var(--fb-text);
+}
+
+._btn_1lvby_88:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+/* 三个查找开关用短标记（Aa / ab / .*），省宽度且不依赖文案；带边框才读得出是控件 */
+._toggle_1lvby_116 {
+  min-width: 32px;
+  padding: 0 7px;
+  border: 1px solid var(--fb-border);
+  font-family: var(--tmr-mono-font, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 13px;
+}
+
+._toggle_1lvby_116:hover:not(:disabled) {
+  border-color: var(--fb-muted);
+}
+
+._toggleOn_1lvby_128,
+._toggleOn_1lvby_128:hover:not(:disabled) {
+  color: var(--fb-accent);
+  border-color: var(--fb-accent);
+  background: #fff3ec;
+}
+
+/* 关闭与上/下一条拉开一点：它不是「第三个导航」 */
+._closeBtn_1lvby_136 {
+  margin-left: 4px;
+}
+
+._textBtn_1lvby_140 {
+  padding: 0 10px;
+  color: var(--fb-text);
+}
+
+._spacer_1lvby_145 {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+._readOnly_1lvby_150 {
+  color: var(--fb-muted);
+  font-size: 13px;
+  white-space: nowrap;
+}
 /* 「这段正在被 AI 改写」的高亮（decoration，只存在于编辑会话里、不进 markdown）。
    普通 CSS（不是 *.module.css）：模块写法在这种「只做副作用的 import」下会被库构建丢掉
    —— 与 chart.css 同一种写法，保证能进 dist/style.css。色值走 --tmr-* 变量，宿主可覆盖。 */
@@ -583,6 +758,24 @@ li.tmr-pending-anchor,
 table.tmr-pending-anchor {
   box-shadow: inset 3px 0 0 0 var(--tmr-pending-bar, rgba(22, 119, 255, 0.45));
 }
+/* 查找替换命中（decoration，只存在于编辑会话里、不进 markdown、不进 undo 历史）。
+   普通 CSS（不是 *.module.css）：类名由 @tiptap/extension-find-and-replace 输出，必须保持全局，
+   与 chart.css / pending.css 同一种写法，保证能进 dist/style.css。色值走 --tmr-* 变量，宿主可覆盖。 */
+
+/* 全部命中：淡黄底 + 轻微圆角（跨行的命中靠 box-decoration-break 保持断行处也有底色） */
+.find-and-replace-result {
+  background: var(--tmr-find-bg, rgba(255, 196, 0, 0.32));
+  border-radius: 2px;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+
+/* 当前命中：官方在同一个元素上同时挂 result 与 result-current 两个类，所以这条规则必须写在上面
+   那条之后——同优先级下后来者胜出。 */
+.find-and-replace-result-current {
+  background: var(--tmr-find-active-bg, rgba(255, 145, 0, 0.5));
+  box-shadow: 0 0 0 1px var(--tmr-find-active-ring, rgba(230, 122, 0, 0.7));
+}
 /* 代码块 NodeView：白底、细边框、顶部 header 放语言选择（Radix 下拉）+ 删除。 */
 ._wrapper_5i2vi_2 {
   position: relative;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tiptap-markdown-react",
-  "version": "0.10.4",
+  "version": "0.12.0",
   "description": "A batteries-included, self-styled Markdown WYSIWYG editor and reader suite built on Tiptap v3. Markdown in/out, SSR/static rendering, table of contents, themeable via CSS variables, zero Ant Design.",
   "type": "module",
   "license": "MIT",
@@ -67,26 +67,27 @@
   "dependencies": {
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-popover": "^1.1.15",
-    "@tiptap/core": "3.27.1",
-    "@tiptap/extension-code": "3.27.1",
-    "@tiptap/extension-code-block-lowlight": "3.27.1",
-    "@tiptap/extension-file-handler": "3.27.1",
-    "@tiptap/extension-highlight": "3.27.1",
-    "@tiptap/extension-image": "3.27.1",
-    "@tiptap/extension-mathematics": "3.27.1",
-    "@tiptap/extension-subscript": "3.27.1",
-    "@tiptap/extension-superscript": "3.27.1",
-    "@tiptap/extension-table": "3.27.1",
-    "@tiptap/extension-table-of-contents": "3.27.1",
-    "@tiptap/extension-task-item": "3.27.1",
-    "@tiptap/extension-task-list": "3.27.1",
-    "@tiptap/extension-text-style": "3.27.1",
-    "@tiptap/extensions": "3.27.1",
-    "@tiptap/markdown": "3.27.1",
-    "@tiptap/pm": "3.27.1",
-    "@tiptap/react": "3.27.1",
-    "@tiptap/starter-kit": "3.27.1",
-    "@tiptap/static-renderer": "3.27.1",
+    "@tiptap/core": "3.31.3",
+    "@tiptap/extension-code": "3.31.3",
+    "@tiptap/extension-code-block-lowlight": "3.31.3",
+    "@tiptap/extension-file-handler": "3.31.3",
+    "@tiptap/extension-find-and-replace": "3.31.3",
+    "@tiptap/extension-highlight": "3.31.3",
+    "@tiptap/extension-image": "3.31.3",
+    "@tiptap/extension-mathematics": "3.31.3",
+    "@tiptap/extension-subscript": "3.31.3",
+    "@tiptap/extension-superscript": "3.31.3",
+    "@tiptap/extension-table": "3.31.3",
+    "@tiptap/extension-table-of-contents": "3.31.3",
+    "@tiptap/extension-task-item": "3.31.3",
+    "@tiptap/extension-task-list": "3.31.3",
+    "@tiptap/extension-text-style": "3.31.3",
+    "@tiptap/extensions": "3.31.3",
+    "@tiptap/markdown": "3.31.3",
+    "@tiptap/pm": "3.31.3",
+    "@tiptap/react": "3.31.3",
+    "@tiptap/starter-kit": "3.31.3",
+    "@tiptap/static-renderer": "3.31.3",
     "chart.js": "^4.5.1",
     "katex": "^0.16.47",
     "lowlight": "3.3.0"
@@ -105,13 +106,13 @@
     "vitest": "^3.2.4"
   },
   "overrides": {
-    "@tiptap/core": "3.27.1",
-    "@tiptap/pm": "3.27.1",
-    "@tiptap/extension-list": "3.27.1",
-    "@tiptap/extensions": "3.27.1",
-    "@tiptap/extension-code-block": "3.27.1",
-    "@tiptap/extension-file-handler": "3.27.1",
-    "@tiptap/extension-bubble-menu": "3.27.1",
-    "@tiptap/extension-floating-menu": "3.27.1"
+    "@tiptap/core": "3.31.3",
+    "@tiptap/pm": "3.31.3",
+    "@tiptap/extension-list": "3.31.3",
+    "@tiptap/extensions": "3.31.3",
+    "@tiptap/extension-code-block": "3.31.3",
+    "@tiptap/extension-file-handler": "3.31.3",
+    "@tiptap/extension-bubble-menu": "3.31.3",
+    "@tiptap/extension-floating-menu": "3.31.3"
   }
 }