tiptap-markdown-react 0.12.0 → 0.12.1

package/README.md

@@ -294,7 +294,7 @@ Ref handle (`MarkdownWysiwygEditorHandle`): `getMarkdown()`, `getHTML()`, `getJS
 
 #### Find & replace
 
-<kbd>Cmd/Ctrl</kbd>+<kbd>F</kbd> (while focus is inside the editor) opens a floating bar: match counter, wrap-around next/previous, match-case / whole-word / regex toggles, replace and replace-all. `Esc` closes it, clears the highlights and returns focus to the editor. Read-only editors (`editable={false}`) can search but not replace.
+<kbd>Cmd/Ctrl</kbd>+<kbd>F</kbd> (while focus is inside the editor) opens a floating bar: match counter inside the search field, wrap-around next/previous, match-case and whole-word toggles, replace and replace-all. `Esc` closes it, clears the highlights and returns focus to the editor. Read-only editors (`editable={false}`) can search but not replace.
 
 Matching is done by the official extension, so the semantics are its semantics — worth knowing before you rely on them:
 
@@ -302,7 +302,7 @@ Matching is done by the official extension, so the semantics are its semantics
 - **Matches may span marks inside one block** (`**bold** tail` is found by `bold tail`) but never cross blocks. What you search is rendered text, not markdown source: `**bold**` does not match.
 - **Replacement takes the marks at the match start**: replacing `bold tail` in `**bold** tail` yields `**X**` — the trailing plain run's formatting is gone.
 - **Replace-all is a single transaction**, so one undo restores everything.
-- **Regex is RE2-compatible** (via `re2js`): no lookarounds or backreferences, replacement text is literal (`$1` is not expanded), and an invalid pattern yields zero matches instead of throwing — the bar shows "Invalid pattern" for that case.
+- **Regex is RE2-compatible** (via `re2js`): no lookarounds or backreferences, replacement text is literal (`$1` is not expanded), and an invalid pattern yields zero matches instead of throwing — the bar shows "Invalid pattern" for that case. The bar ships no regex toggle (find/replace as a plain-text tool); turn it on from your own UI or headlessly with `editor.commands.setUseRegex(true)`.
 
 Everything is also callable headlessly — the extension's commands and storage are the API, so AI/agent flows can drive it without the bar:
 
@@ -351,7 +351,7 @@ There is no global locale and no provider: every visible string comes from a `Pa
 | Component | Prop | Type |
 | --- | --- | --- |
 | `<EditorToolbar>` | `labels` | `Partial<ToolbarLabels>` (also covers the Import menu and the equation popover) |
-| `<MarkdownWysiwygEditor>` | `findLabels` | `Partial<FindLabels>` |
+| `<MarkdownWysiwygEditor>` | `findLabels` | `Partial<FindLabels>` (replace / replace-all appear as icon buttons, so their labels are the tooltip + accessible name) |
 | `<MarkdownWysiwygEditor>` | `codeBlockLabels` | `Partial<CodeBlockLabels>` |
 | `<TocPanel>` | `labels` | `Partial<TocLabels>` |
 | `<ColorPalette>` | `labels` | `Partial<ColorPaletteLabels>` |

package/dist/icons/index.d.ts

@@ -31,6 +31,8 @@ export declare const MenuIcon: (p: IconProps) => import("react").JSX.Element;
 export declare const SearchIcon: (p: IconProps) => import("react").JSX.Element;
 export declare const XIcon: (p: IconProps) => import("react").JSX.Element;
 export declare const ChevronUpIcon: (p: IconProps) => import("react").JSX.Element;
+export declare const ReplaceIcon: (p: IconProps) => import("react").JSX.Element;
+export declare const ReplaceAllIcon: (p: IconProps) => import("react").JSX.Element;
 export declare const ColumnBeforeIcon: (p: IconProps) => import("react").JSX.Element;
 export declare const ColumnAfterIcon: (p: IconProps) => import("react").JSX.Element;
 export declare const ColumnDeleteIcon: (p: IconProps) => import("react").JSX.Element;

package/dist/index.js

@@ -462,6 +462,26 @@ const XIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
   /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
 ] });
 const ChevronUpIcon = (p) => /* @__PURE__ */ jsx(Svg, { ...p, children: /* @__PURE__ */ jsx("path", { d: "m18 15-6-6-6 6" }) });
+const ReplaceIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx("path", { d: "M14 4a1 1 0 0 1 1-1" }),
+  /* @__PURE__ */ jsx("path", { d: "M15 10a1 1 0 0 1-1-1" }),
+  /* @__PURE__ */ jsx("path", { d: "M21 4a1 1 0 0 0-1-1" }),
+  /* @__PURE__ */ jsx("path", { d: "M21 9a1 1 0 0 1-1 1" }),
+  /* @__PURE__ */ jsx("path", { d: "m3 7 3 3 3-3" }),
+  /* @__PURE__ */ jsx("path", { d: "M6 10V5a2 2 0 0 1 2-2h2" }),
+  /* @__PURE__ */ jsx("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1" })
+] });
+const ReplaceAllIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx("path", { d: "M14 14a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1" }),
+  /* @__PURE__ */ jsx("path", { d: "M14 4a1 1 0 0 1 1-1" }),
+  /* @__PURE__ */ jsx("path", { d: "M15 10a1 1 0 0 1-1-1" }),
+  /* @__PURE__ */ jsx("path", { d: "M19 14a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1" }),
+  /* @__PURE__ */ jsx("path", { d: "M21 4a1 1 0 0 0-1-1" }),
+  /* @__PURE__ */ jsx("path", { d: "M21 9a1 1 0 0 1-1 1" }),
+  /* @__PURE__ */ jsx("path", { d: "m3 7 3 3 3-3" }),
+  /* @__PURE__ */ jsx("path", { d: "M6 10V5a2 2 0 0 1 2-2h2" }),
+  /* @__PURE__ */ jsx("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1" })
+] });
 const ColumnBeforeIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
   /* @__PURE__ */ jsx("rect", { x: "10", y: "4", width: "11", height: "16", rx: "1" }),
   /* @__PURE__ */ jsx("path", { d: "M14 4v16" }),
@@ -614,20 +634,19 @@ const defaultFindLabels = {
   invalidRegex: "Invalid pattern",
   readOnly: "Read-only"
 };
-const bar = "_bar_1lvby_3";
-const row = "_row_1lvby_25";
-const field = "_field_1lvby_40";
-const fieldIcon = "_fieldIcon_1lvby_59";
-const input = "_input_1lvby_64";
-const counter = "_counter_1lvby_75";
-const counterInvalid = "_counterInvalid_1lvby_84";
-const btn$1 = "_btn_1lvby_88";
-const toggle = "_toggle_1lvby_116";
-const toggleOn = "_toggleOn_1lvby_128";
-const closeBtn = "_closeBtn_1lvby_136";
-const textBtn = "_textBtn_1lvby_140";
-const spacer = "_spacer_1lvby_145";
-const readOnly = "_readOnly_1lvby_150";
+const bar = "_bar_1h61e_3";
+const row = "_row_1h61e_25";
+const field = "_field_1h61e_43";
+const fieldIcon = "_fieldIcon_1h61e_62";
+const input = "_input_1h61e_67";
+const counter = "_counter_1h61e_79";
+const counterInvalid = "_counterInvalid_1h61e_89";
+const btn$1 = "_btn_1h61e_93";
+const toggle = "_toggle_1h61e_29";
+const toggleOn = "_toggleOn_1h61e_135";
+const iconGroup = "_iconGroup_1h61e_29";
+const spacer = "_spacer_1h61e_150";
+const readOnly = "_readOnly_1h61e_155";
 const styles$5 = {
   bar,
   row,
@@ -639,8 +658,7 @@ const styles$5 = {
   btn: btn$1,
   toggle,
   toggleOn,
-  closeBtn,
-  textBtn,
+  iconGroup,
   spacer,
   readOnly
 };
@@ -745,8 +763,7 @@ function FindReplaceBar({
   const toggle2 = (key, value) => {
     runCommand(() => {
       if (key === "caseSensitive") editor.commands.setCaseSensitive(value);
-      else if (key === "wholeWord") editor.commands.setWholeWord(value);
-      else editor.commands.setUseRegex(value);
+      else editor.commands.setWholeWord(value);
     });
   };
   if (!hasExtension) return null;
@@ -781,6 +798,15 @@ function FindReplaceBar({
                 autoFocus: true,
                 spellCheck: false
               }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `${styles$5.counter}${invalidPattern ? ` ${styles$5.counterInvalid}` : ""}`,
+                "aria-live": "polite",
+                title: invalidPattern ? t.invalidRegex : void 0,
+                children: invalidPattern ? t.invalidRegex : counter2
+              }
             )
           ] }),
           /* @__PURE__ */ jsx(
@@ -809,66 +835,46 @@ function FindReplaceBar({
               children: "ab"
             }
           ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: toggleClass(state.useRegex),
-              title: t.useRegex,
-              "aria-label": t.useRegex,
-              "aria-pressed": state.useRegex,
-              onMouseDown: keepFocus,
-              onClick: () => toggle2("useRegex", !state.useRegex),
-              children: ".*"
-            }
-          ),
           /* @__PURE__ */ jsx("span", { className: styles$5.spacer }),
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: `${styles$5.counter}${invalidPattern ? ` ${styles$5.counterInvalid}` : ""}`,
-              "aria-live": "polite",
-              title: invalidPattern ? t.invalidRegex : void 0,
-              children: invalidPattern ? t.invalidRegex : counter2
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: styles$5.btn,
-              title: t.previous,
-              "aria-label": t.previous,
-              disabled: state.total === 0,
-              onMouseDown: keepFocus,
-              onClick: () => runAction(() => editor.commands.goToPreviousResult()),
-              children: /* @__PURE__ */ jsx(ChevronUpIcon, { size: 16 })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: styles$5.btn,
-              title: t.next,
-              "aria-label": t.next,
-              disabled: state.total === 0,
-              onMouseDown: keepFocus,
-              onClick: () => runAction(() => editor.commands.goToNextResult()),
-              children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: 16 })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: `${styles$5.btn} ${styles$5.closeBtn}`,
-              title: t.close,
-              "aria-label": t.close,
-              onClick: onClose,
-              children: /* @__PURE__ */ jsx(XIcon, { size: 16 })
-            }
-          )
+          /* @__PURE__ */ jsxs("span", { className: styles$5.iconGroup, children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: styles$5.btn,
+                title: t.previous,
+                "aria-label": t.previous,
+                disabled: state.total === 0,
+                onMouseDown: keepFocus,
+                onClick: () => runAction(() => editor.commands.goToPreviousResult()),
+                children: /* @__PURE__ */ jsx(ChevronUpIcon, { size: 16 })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: styles$5.btn,
+                title: t.next,
+                "aria-label": t.next,
+                disabled: state.total === 0,
+                onMouseDown: keepFocus,
+                onClick: () => runAction(() => editor.commands.goToNextResult()),
+                children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: 16 })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: styles$5.btn,
+                title: t.close,
+                "aria-label": t.close,
+                onClick: onClose,
+                children: /* @__PURE__ */ jsx(XIcon, { size: 16 })
+              }
+            )
+          ] })
         ] }),
         editor.isEditable ? /* @__PURE__ */ jsxs("div", { className: styles$5.row, children: [
           /* @__PURE__ */ jsx("span", { className: styles$5.field, children: /* @__PURE__ */ jsx(
@@ -888,22 +894,26 @@ function FindReplaceBar({
             "button",
             {
               type: "button",
-              className: `${styles$5.btn} ${styles$5.textBtn}`,
+              className: styles$5.btn,
+              title: t.replaceOne,
+              "aria-label": t.replaceOne,
               disabled: state.total === 0,
               onMouseDown: keepFocus,
               onClick: () => runAction(() => editor.commands.replace()),
-              children: t.replaceOne
+              children: /* @__PURE__ */ jsx(ReplaceIcon, { size: 16 })
             }
           ),
           /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
-              className: `${styles$5.btn} ${styles$5.textBtn}`,
+              className: styles$5.btn,
+              title: t.replaceAll,
+              "aria-label": t.replaceAll,
               disabled: state.total === 0,
               onMouseDown: keepFocus,
               onClick: () => runAction(() => editor.commands.replaceAll()),
-              children: t.replaceAll
+              children: /* @__PURE__ */ jsx(ReplaceAllIcon, { size: 16 })
             }
           )
         ] }) : /* @__PURE__ */ jsx("div", { className: styles$5.row, children: /* @__PURE__ */ jsx("span", { className: styles$5.readOnly, children: t.readOnly }) })
@@ -3670,6 +3680,8 @@ export {
   MenuIcon,
   PENDING_ANCHOR_CLASS,
   RedoIcon,
+  ReplaceAllIcon,
+  ReplaceIcon,
   R2 as ReportContent,
   R as ReportContentInteractive,
   b as ReportContentWithCharts,