@multiplatform.one/rich-text 6.1.0 → 6.4.0

package/dist/cjs/toolbar/CodeBlockBubble.native.js

@@ -31,9 +31,12 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_menus = require("@tiptap/react/menus");
 var import_theme = require("@multiplatform.one/theme");
+var import_react2 = require("@phosphor-icons/react");
 var import_tamagui = require("tamagui");
 var import_styled = require("../styled.native.js");
+var import_blockAnchor = require("../editor/blockAnchor.native.js");
 var import_ToolbarButton = require("./ToolbarButton.native.js");
+var import_t = require("../shared/t.native.js");
 var LANGUAGES = [{
   value: null,
   label: "Plain text"
@@ -73,6 +76,12 @@ var LANGUAGES = [{
 }, {
   value: "markdown",
   label: "Markdown"
+}, {
+  value: "math",
+  label: "Math (TeX)"
+}, {
+  value: "mermaid",
+  label: "Mermaid"
 }, {
   value: "php",
   label: "PHP"
@@ -104,35 +113,38 @@ var LANGUAGES = [{
   value: "yaml",
   label: "YAML"
 }];
-function TrashIcon() {
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("svg", {
-    width: "14",
-    height: "14",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("polyline", {
-      points: "3 6 5 6 21 6"
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("path", {
-      d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
-    })]
-  });
+function getActiveCodeBlockText(editor) {
+  var {
+    $from
+  } = editor.state.selection;
+  for (var depth = $from.depth; depth >= 0; depth--) {
+    var node = $from.node(depth);
+    if (node.type.name === "codeBlock") return node.textContent;
+  }
+  return "";
 }
 function CodeBlockBubble(param) {
   var {
     editor
   } = param;
-  var _ref, _ref1, _ref2;
+  var _ref, _ref1;
   var _editor_getAttributes, _LANGUAGES_find;
   var {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
   var [langOpen, setLangOpen] = (0, import_react.useState)(false);
+  var [copied, setCopied] = (0, import_react.useState)(false);
+  var copiedTimer = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(function () {
+    return function () {
+      if (copiedTimer.current) clearTimeout(copiedTimer.current);
+    };
+  }, []);
   var currentLang = (_ref = editor === null || editor === void 0 ? void 0 : (_editor_getAttributes = editor.getAttributes("codeBlock")) === null || _editor_getAttributes === void 0 ? void 0 : _editor_getAttributes.language) !== null && _ref !== void 0 ? _ref : null;
-  var currentLabel = (_ref1 = (_ref2 = (_LANGUAGES_find = LANGUAGES.find(function (l) {
+  var rawLabel = (_ref1 = (_LANGUAGES_find = LANGUAGES.find(function (l) {
     return l.value === currentLang;
-  })) === null || _LANGUAGES_find === void 0 ? void 0 : _LANGUAGES_find.label) !== null && _ref2 !== void 0 ? _ref2 : currentLang) !== null && _ref1 !== void 0 ? _ref1 : "Plain text";
+  })) === null || _LANGUAGES_find === void 0 ? void 0 : _LANGUAGES_find.label) !== null && _ref1 !== void 0 ? _ref1 : currentLang;
+  var currentLabel = currentLang === null ? (0, import_t.t)("Plain text") : rawLabel !== null && rawLabel !== void 0 ? rawLabel : (0, import_t.t)("Plain text");
   var setLanguage = (0, import_react.useCallback)(function (lang) {
     if (!editor) return;
     editor.chain().focus().updateAttributes("codeBlock", {
@@ -140,6 +152,19 @@ function CodeBlockBubble(param) {
     }).run();
     setLangOpen(false);
   }, [editor]);
+  var copyCode = (0, import_react.useCallback)(async function () {
+    if (!editor) return;
+    try {
+      await navigator.clipboard.writeText(getActiveCodeBlockText(editor));
+      setCopied(true);
+      if (copiedTimer.current) clearTimeout(copiedTimer.current);
+      copiedTimer.current = setTimeout(function () {
+        return setCopied(false);
+      }, 1500);
+    } catch (err) {
+      console.warn("[rich-text] copy failed:", err);
+    }
+  }, [editor]);
   var removeCodeBlock = (0, import_react.useCallback)(function () {
     if (!editor) return;
     editor.chain().focus().toggleCodeBlock().run();
@@ -147,14 +172,22 @@ function CodeBlockBubble(param) {
   if (!editor) return null;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menus.BubbleMenu, {
     editor,
+    className: "rt-bubble-menu",
     shouldShow: function shouldShow(param2) {
       var {
         editor: e
       } = param2;
       return e.isActive("codeBlock");
     },
+    // Anchor to the <pre> rect (not the caret) so the bubble sits above
+    // the block instead of covering its first line, and does not chase
+    // the caret while typing.
+    getReferencedVirtualElement: function getReferencedVirtualElement() {
+      return (0, import_blockAnchor.getBlockVirtualElement)(editor, "codeBlock");
+    },
     options: {
-      placement: "top-start"
+      placement: "top-start",
+      offset: 6
     },
     children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
       backgroundColor: "$background",
@@ -175,14 +208,16 @@ function CodeBlockBubble(param) {
             onPress: function onPress() {
               return setLangOpen(true);
             },
-            "aria-label": "Select language",
+            "aria-label": (0, import_t.t)("Select language"),
             children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
               fontSize: 12,
               children: currentLabel
             })
           })
         }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Content, {
-          ...knobProps.panelPadding,
+          // SP-EDGE: container owns only its border — items own all padding.
+          padding: 0,
+          overflow: "hidden",
           backgroundColor: "$background",
           borderWidth: 1,
           borderColor: "$borderColor",
@@ -207,20 +242,31 @@ function CodeBlockBubble(param) {
                 onPress: function onPress() {
                   return setLanguage(lang.value);
                 },
-                "aria-label": lang.label,
+                "aria-label": lang.value === null ? (0, import_t.t)("Plain text") : lang.label,
                 children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
                   fontSize: 13,
-                  children: lang.label
+                  children: lang.value === null ? (0, import_t.t)("Plain text") : lang.label
                 })
               }, lang.label);
             })
           })
         })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToolbarButton.ToolbarButton, {
+        onPress: copyCode,
+        "aria-label": copied ? (0, import_t.t)("Copied") : (0, import_t.t)("Copy code"),
+        tooltip: copied ? (0, import_t.t)("Copied") : (0, import_t.t)("Copy code"),
+        children: copied ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CheckIcon, {
+          size: 14
+        }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CopyIcon, {
+          size: 14
+        })
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToolbarButton.ToolbarButton, {
         onPress: removeCodeBlock,
-        "aria-label": "Remove code block",
-        tooltip: "Remove code block",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(TrashIcon, {})
+        "aria-label": (0, import_t.t)("Remove code block"),
+        tooltip: (0, import_t.t)("Remove code block"),
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.TrashIcon, {
+          size: 14
+        })
       })]
     })
   });

package/dist/cjs/toolbar/CodeBlockBubble.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","CodeBlockBubble_exports","__export","CodeBlockBubble","module","exports","import_jsx_runtime","require","import_react","import_menus","import_theme","import_tamagui","import_styled","import_ToolbarButton","LANGUAGES","label","TrashIcon","jsxs","width","height","viewBox","fill","stroke","strokeWidth","children","jsx","points","d","param","editor","_ref","_ref1","_ref2","_editor_getAttributes","_LANGUAGES_find","knobProps","useResolvedKnobs","langOpen","setLangOpen","useState"],"sources":["../../../src/toolbar/CodeBlockBubble.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,uBAAA;AAAAC,QAAA,CAAAD,uBAAA;EAAAE,eAAA,EAAAA,CAAA,KAAAA;AAAA;AAKAC,MAAA,CAAAC,OAAA,GAAAT,YAAsC,CAAAK,uBAAA;AAEtC,IAAAK,kBAA2B,GAAAC,OAAA;AAC3B,IAAAC,YAAA,GAAiCD,OAAA;AACjC,IAAAE,YAAA,GAAAF,OAA8C;AAC9C,IAAAG,YAAA,GAAAH,OAAsC;AACtC,IAAAI,cAAA,GAAAJ,OAAqD;AA8BjD,IAAAK,aAAA,GAAAL,OAAA;AA5BJ,IAAAM,oBAAkB,GAAAN,OAAA;AAAA,IACdO,SAAO,IACT;EACEd,KAAA,EAAO;EACPe,KAAA,EAAO;AACT,GACA;EACEf,KAAA,EAAO,MAAM;EACbe,KAAA,EAAO;AACT,GACA;EACEf,KAAA,EAAO;EACPe,KAAA,EAAO;AACT,GACA;EACEf,KAAA,EAAO;EACPe,KAAA,EAAO;AACT,GACA;EACEf,KAAA,EAAO,QAAO;EACde,KAAA,EAAO;AACT,GACA;EACEf,KAAA,EAAO;EACXe,KAAA;AAEA,GACE;EACGf,KAAA;EAAAe,KAAA;AAAA,GACO;EACCf,KACP,WAAQ;EAAAe,KACR;AAAK,GACE;EACKf,KAEZ;EAAAe,KAAA;AAAgC,GACyD;EAAAf,KAAA;EAC3Fe,KAAA;AAEJ,GAMO;EACLf,KAAM,EAAE;EACRe,KAAO;AAEP,GACA;EAGAf,KAAM;EACJe,KAAC;AACC,GACA;EACAf,KAAA,YAAY;EACde,KAAA;AAAA,GAEF;EAEAf,KAAM;EACJe,KAAK;AACL,GACF;EAEAf,KAAK,UAAQ;EAEbe,KACE;AAAA,GAAC;EAAAf,KACC;EAAAe,KACA;AAAqD,GACnB;EAElCf,KAAC;EAAAe,KAAA;AAAA,GACiB;EACHf,KAAA,EACb;EAAYe,KAAA,EACZ;AAAqC,GAC7B;EACJf,KAAA,EACJ;EAAWe,KAAA,EACX;AAAqB,GAErB;EACEf,KAAA;EAIAe,KAAA;AACA,GAAS;EAARf,KAAA,cACK;EAAUe,KAAA;AACE,GACH;EACDf,KAAA;EACyBe,KAAA;AAChB,GACW;EACDf,KAAA;EAI3Be,KAAA;AAAC;AAE8B,SAAAC,UAAA;EACQ,sBACrC,IAAAV,kBAAiB,CAAAW,IAAA;IAAAC,KAAA;IAEeC,MAAA;IAAAC,OAAA,aAL3B;IAAKC,IAAA;IAQhBC,MAAA;IAAAC,WACF;IAAAC,QAAA,GACF,eAEA,IAAAlB,kBAAA,CAAAmB,GAAA;MAAAC,MAAC;IAAA,mBACC,IAASpB,kBAAA,CAAAmB,GAAA;MAAAE,CAAA;IACE;EAGA;AAAA;AACb,SAAAxB,gBAAAyB,KAAA;EAAA;IAAAC;EAAA,IAAAD,KAAA;EAAA,IACFE,IAAA,EAAAC,KAAA,EAAAC,KAAA;EAAA,IAAAC,qBAAA,EAAAC,eAAA;EACF;IAAAC;EAAA,QAAAzB,YAAA,CAAA0B,gBAAA;EAEJ,KAAAC,QAAA,EAAAC,WAAA,QAAA9B,YAAA,CAAA+B,QAAA","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","CodeBlockBubble_exports","__export","CodeBlockBubble","module","exports","import_jsx_runtime","require","import_react","import_menus","import_theme","import_react2","import_tamagui","import_styled","import_blockAnchor","import_ToolbarButton","import_t","LANGUAGES","label","getActiveCodeBlockText","editor","$from","state","selection","depth","node","type","name","textContent","param","_ref","_ref1","_editor_getAttributes","_LANGUAGES_find","knobProps","useResolvedKnobs","langOpen","setLangOpen","useState","copied","setCopied","copiedTimer","useRef","useEffect","current","clearTimeout","currentLang","getAttributes","language","rawLabel","find","l","currentLabel","t","setLanguage","useCallback","lang","chain","focus","updateAttributes","run","copyCode","navigator","clipboard","writeText","setTimeout","err","console","warn"],"sources":["../../../src/toolbar/CodeBlockBubble.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/toolbar/ColorPicker.cjs

@@ -27,47 +27,14 @@ __export(ColorPicker_exports, {
 });
 module.exports = __toCommonJS(ColorPicker_exports);
 var import_react = require("react");
+var import_forms = require("@multiplatform.one/forms");
 var import_theme = require("@multiplatform.one/theme");
 var import_tamagui = require("tamagui");
 var import_constants = require("../constants.cjs");
 var import_ToolbarButton = require("./ToolbarButton.cjs");
 var import_icons = require("./icons.cjs");
+var import_t = require("../shared/t.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
-function ColorSwatch({
-  color,
-  isSelected,
-  onPress,
-  isNone
-}) {
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-    width: 24,
-    height: 24,
-    borderRadius: 4,
-    backgroundColor: color || "$background",
-    borderWidth: isSelected ? 2 : 1,
-    borderColor: isSelected ? "$blue10" : "$color6",
-    cursor: "pointer",
-    hoverStyle: {
-      opacity: 0.8
-    },
-    pressStyle: {
-      scale: 0.95
-    },
-    onPress,
-    alignItems: "center",
-    justifyContent: "center",
-    "aria-label": isNone ? "Remove color" : `Color ${color}`,
-    children: isNone && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-      position: "absolute",
-      width: 20,
-      height: 2,
-      backgroundColor: "$red10",
-      transform: [{
-        rotate: "45deg"
-      }]
-    })
-  });
-}
 function ColorGrid({
   title,
   colors,
@@ -84,16 +51,14 @@ function ColorGrid({
       fontSize: knobProps.sizeToken,
       fontWeight: "600",
       children: title
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
-      flexWrap: "wrap",
-      gap: "$1",
-      maxWidth,
-      children: colors.map(c => /* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorSwatch, {
-        color: c.value,
-        isSelected: selectedColor === c.value,
-        isNone: c.value === null,
-        onPress: () => onSelect(c.value)
-      }, c.name))
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.PresetSwatches, {
+      presetColors: colors.map(c => ({
+        ...c,
+        name: (0, import_t.t)(c.name)
+      })),
+      selectedColor,
+      onSelect,
+      width: maxWidth
     })]
   });
 }
@@ -105,12 +70,13 @@ function TextColorPicker({
   const {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
+  const themeName = (0, import_tamagui.useThemeName)();
+  const textColors = String(themeName).startsWith("dark") ? import_constants.TEXT_COLORS_DARK : import_constants.TEXT_COLORS;
   const [open, setOpen] = (0, import_react.useState)(false);
   const handleSelect = (0, import_react.useCallback)(color => {
     editorRef.current?.executeCommand("textColor", {
       color
     });
-    setOpen(false);
   }, [editorRef]);
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
     open,
@@ -122,8 +88,8 @@ function TextColorPicker({
         active: !!state.textColor,
         disabled,
         onPress: () => setOpen(true),
-        "aria-label": "Text Color",
-        tooltip: "Text Color",
+        "aria-label": (0, import_t.t)("Text Color"),
+        tooltip: (0, import_t.t)("Text Color"),
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_icons.TextColorIcon, {
           color: state.textColor
         })
@@ -147,8 +113,8 @@ function TextColorPicker({
         borderColor: "$borderColor",
         backgroundColor: "$background"
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorGrid, {
-        title: "Text Color",
-        colors: import_constants.TEXT_COLORS,
+        title: (0, import_t.t)("Text Color"),
+        colors: textColors,
         selectedColor: state.textColor,
         onSelect: handleSelect,
         maxWidth: 160
@@ -169,7 +135,6 @@ function HighlightColorPicker({
     editorRef.current?.executeCommand("highlight", {
       color
     });
-    setOpen(false);
   }, [editorRef]);
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
     open,
@@ -181,8 +146,8 @@ function HighlightColorPicker({
         active: !!state.highlightColor,
         disabled,
         onPress: () => setOpen(true),
-        "aria-label": "Highlight Color",
-        tooltip: "Highlight",
+        "aria-label": (0, import_t.t)("Highlight Color"),
+        tooltip: (0, import_t.t)("Highlight"),
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_icons.HighlightIcon, {
           color: state.highlightColor
         })
@@ -206,7 +171,7 @@ function HighlightColorPicker({
         borderColor: "$borderColor",
         backgroundColor: "$background"
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorGrid, {
-        title: "Highlight",
+        title: (0, import_t.t)("Highlight"),
         colors: import_constants.HIGHLIGHT_COLORS,
         selectedColor: state.highlightColor,
         onSelect: handleSelect,

package/dist/cjs/toolbar/ColorPicker.native.js

@@ -22,88 +22,65 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
   value: true
 }), mod);
-var ColorPicker_exports = {};
-__export(ColorPicker_exports, {
+var ColorPicker_native_exports = {};
+__export(ColorPicker_native_exports, {
   HighlightColorPicker: () => HighlightColorPicker,
   TextColorPicker: () => TextColorPicker
 });
-module.exports = __toCommonJS(ColorPicker_exports);
+module.exports = __toCommonJS(ColorPicker_native_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_theme = require("@multiplatform.one/theme");
+var import_react_native = require("react-native");
 var import_tamagui = require("tamagui");
 var import_constants = require("../constants.native.js");
 var import_ToolbarButton = require("./ToolbarButton.native.js");
 var import_icons = require("./icons.native.js");
-function ColorSwatch(param) {
-  var {
-    color,
-    isSelected,
-    onPress,
-    isNone
-  } = param;
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-    width: 24,
-    height: 24,
-    borderRadius: 4,
-    backgroundColor: color || "$background",
-    borderWidth: isSelected ? 2 : 1,
-    borderColor: isSelected ? "$blue10" : "$color6",
-    cursor: "pointer",
-    hoverStyle: {
-      opacity: 0.8
-    },
-    pressStyle: {
-      scale: 0.95
-    },
-    onPress,
-    alignItems: "center",
-    justifyContent: "center",
-    "aria-label": isNone ? "Remove color" : `Color ${color}`,
-    children: isNone && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-      position: "absolute",
-      width: 20,
-      height: 2,
-      backgroundColor: "$red10",
-      transform: [{
-        rotate: "45deg"
-      }]
-    })
-  });
+var import_t = require("../shared/t.native.js");
+function useResolvedPalette(entries) {
+  var theme = (0, import_tamagui.useTheme)();
+  return (0, import_react.useMemo)(function () {
+    return entries.map(function (param) {
+      var {
+        name,
+        token
+      } = param;
+      var _ref;
+      var _theme_token;
+      return {
+        name,
+        value: token ? (_ref = (_theme_token = theme[token]) === null || _theme_token === void 0 ? void 0 : _theme_token.val) !== null && _ref !== void 0 ? _ref : null : null
+      };
+    });
+  }, [entries, theme]);
 }
-function ColorGrid(param) {
-  var {
-    title,
-    colors,
-    selectedColor,
-    onSelect,
-    maxWidth
-  } = param;
-  var {
-    knobProps
-  } = (0, import_theme.useResolvedKnobs)();
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-    ...knobProps.gap,
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-      fontSize: knobProps.sizeToken,
-      fontWeight: "600",
-      children: title
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
-      flexWrap: "wrap",
-      gap: "$1",
-      maxWidth,
-      children: colors.map(function (c) {
-        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorSwatch, {
-          color: c.value,
-          isSelected: selectedColor === c.value,
-          isNone: c.value === null,
-          onPress: function onPress() {
-            return onSelect(c.value);
-          }
-        }, c.name);
-      })
-    })]
+function pickColor(title, colors, onSelect) {
+  var labels = colors.map(function (c) {
+    return (0, import_t.t)(c.name);
   });
+  if (import_react_native.Platform.OS === "ios") {
+    import_react_native.ActionSheetIOS.showActionSheetWithOptions({
+      title,
+      options: [...labels, (0, import_t.t)("Cancel")],
+      cancelButtonIndex: labels.length
+    }, function (index) {
+      var _ref;
+      var _colors_index;
+      if (typeof index !== "number" || index >= labels.length) return;
+      onSelect((_ref = (_colors_index = colors[index]) === null || _colors_index === void 0 ? void 0 : _colors_index.value) !== null && _ref !== void 0 ? _ref : null);
+    });
+    return;
+  }
+  import_react_native.Alert.alert(title, void 0, [...colors.map(function (c) {
+    return {
+      text: (0, import_t.t)(c.name),
+      onPress: function onPress() {
+        return onSelect(c.value);
+      }
+    };
+  }), {
+    text: (0, import_t.t)("Cancel"),
+    style: "cancel"
+  }]);
 }
 function TextColorPicker(param) {
   var {
@@ -111,61 +88,24 @@ function TextColorPicker(param) {
     state,
     disabled
   } = param;
-  var {
-    knobProps
-  } = (0, import_theme.useResolvedKnobs)();
-  var [open, setOpen] = (0, import_react.useState)(false);
-  var handleSelect = (0, import_react.useCallback)(function (color) {
-    var _editorRef_current;
-    (_editorRef_current = editorRef.current) === null || _editorRef_current === void 0 ? void 0 : _editorRef_current.executeCommand("textColor", {
-      color
+  var themeName = (0, import_tamagui.useThemeName)();
+  var textColors = useResolvedPalette(String(themeName).startsWith("dark") ? import_constants.TEXT_COLOR_TOKENS_DARK : import_constants.TEXT_COLOR_TOKENS);
+  var handlePress = (0, import_react.useCallback)(function () {
+    pickColor((0, import_t.t)("Text Color"), textColors, function (color) {
+      var _editorRef_current;
+      (_editorRef_current = editorRef.current) === null || _editorRef_current === void 0 ? void 0 : _editorRef_current.executeCommand("textColor", {
+        color
+      });
     });
-    setOpen(false);
-  }, [editorRef]);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
-    open,
-    onOpenChange: setOpen,
-    placement: "bottom",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
-      asChild: true,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToolbarButton.ToolbarButton, {
-        active: !!state.textColor,
-        disabled,
-        onPress: function onPress() {
-          return setOpen(true);
-        },
-        "aria-label": "Text Color",
-        tooltip: "Text Color",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_icons.TextColorIcon, {
-          color: state.textColor
-        })
-      })
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover.Content, {
-      ...knobProps.panelPadding,
-      backgroundColor: "$background",
-      borderWidth: 1,
-      borderColor: "$borderColor",
-      borderRadius: knobProps.borderRadius.borderRadius,
-      elevation: knobProps.elevation,
-      enterStyle: {
-        opacity: 0,
-        y: -5
-      },
-      exitStyle: {
-        opacity: 0,
-        y: -5
-      },
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Arrow, {
-        borderColor: "$borderColor",
-        backgroundColor: "$background"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorGrid, {
-        title: "Text Color",
-        colors: import_constants.TEXT_COLORS,
-        selectedColor: state.textColor,
-        onSelect: handleSelect,
-        maxWidth: 160
-      })]
-    })]
+  }, [editorRef, textColors]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToolbarButton.ToolbarButton, {
+    active: !!state.textColor,
+    disabled,
+    onPress: handlePress,
+    "aria-label": (0, import_t.t)("Text Color"),
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_icons.TextColorIcon, {
+      color: state.textColor
+    })
   });
 }
 function HighlightColorPicker(param) {
@@ -174,61 +114,23 @@ function HighlightColorPicker(param) {
     state,
     disabled
   } = param;
-  var {
-    knobProps
-  } = (0, import_theme.useResolvedKnobs)();
-  var [open, setOpen] = (0, import_react.useState)(false);
-  var handleSelect = (0, import_react.useCallback)(function (color) {
-    var _editorRef_current;
-    (_editorRef_current = editorRef.current) === null || _editorRef_current === void 0 ? void 0 : _editorRef_current.executeCommand("highlight", {
-      color
+  var highlightColors = useResolvedPalette(import_constants.HIGHLIGHT_COLOR_TOKENS);
+  var handlePress = (0, import_react.useCallback)(function () {
+    pickColor((0, import_t.t)("Highlight"), highlightColors, function (color) {
+      var _editorRef_current;
+      (_editorRef_current = editorRef.current) === null || _editorRef_current === void 0 ? void 0 : _editorRef_current.executeCommand("highlight", {
+        color
+      });
     });
-    setOpen(false);
-  }, [editorRef]);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
-    open,
-    onOpenChange: setOpen,
-    placement: "bottom",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
-      asChild: true,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToolbarButton.ToolbarButton, {
-        active: !!state.highlightColor,
-        disabled,
-        onPress: function onPress() {
-          return setOpen(true);
-        },
-        "aria-label": "Highlight Color",
-        tooltip: "Highlight",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_icons.HighlightIcon, {
-          color: state.highlightColor
-        })
-      })
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover.Content, {
-      ...knobProps.panelPadding,
-      backgroundColor: "$background",
-      borderWidth: 1,
-      borderColor: "$borderColor",
-      borderRadius: knobProps.borderRadius.borderRadius,
-      elevation: knobProps.elevation,
-      enterStyle: {
-        opacity: 0,
-        y: -5
-      },
-      exitStyle: {
-        opacity: 0,
-        y: -5
-      },
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Arrow, {
-        borderColor: "$borderColor",
-        backgroundColor: "$background"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorGrid, {
-        title: "Highlight",
-        colors: import_constants.HIGHLIGHT_COLORS,
-        selectedColor: state.highlightColor,
-        onSelect: handleSelect,
-        maxWidth: 130
-      })]
-    })]
+  }, [editorRef, highlightColors]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToolbarButton.ToolbarButton, {
+    active: !!state.highlightColor,
+    disabled,
+    onPress: handlePress,
+    "aria-label": (0, import_t.t)("Highlight Color"),
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_icons.HighlightIcon, {
+      color: state.highlightColor
+    })
   });
 }
 //# sourceMappingURL=ColorPicker.native.js.map