@multiplatform.one/rich-text 6.0.0

package/dist/cjs/toolbar/CodeBlockBubble.cjs

@@ -0,0 +1,211 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var CodeBlockBubble_exports = {};
+__export(CodeBlockBubble_exports, {
+  CodeBlockBubble: () => CodeBlockBubble
+});
+module.exports = __toCommonJS(CodeBlockBubble_exports);
+var import_react = require("react");
+var import_menus = require("@tiptap/react/menus");
+var import_theme = require("@multiplatform.one/theme");
+var import_tamagui = require("tamagui");
+var import_styled = require("../styled.cjs");
+var import_ToolbarButton = require("./ToolbarButton.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const LANGUAGES = [{
+  value: null,
+  label: "Plain text"
+}, {
+  value: "bash",
+  label: "Bash"
+}, {
+  value: "c",
+  label: "C"
+}, {
+  value: "cpp",
+  label: "C++"
+}, {
+  value: "csharp",
+  label: "C#"
+}, {
+  value: "css",
+  label: "CSS"
+}, {
+  value: "go",
+  label: "Go"
+}, {
+  value: "graphql",
+  label: "GraphQL"
+}, {
+  value: "java",
+  label: "Java"
+}, {
+  value: "javascript",
+  label: "JavaScript"
+}, {
+  value: "json",
+  label: "JSON"
+}, {
+  value: "kotlin",
+  label: "Kotlin"
+}, {
+  value: "markdown",
+  label: "Markdown"
+}, {
+  value: "php",
+  label: "PHP"
+}, {
+  value: "python",
+  label: "Python"
+}, {
+  value: "ruby",
+  label: "Ruby"
+}, {
+  value: "rust",
+  label: "Rust"
+}, {
+  value: "scss",
+  label: "SCSS"
+}, {
+  value: "sql",
+  label: "SQL"
+}, {
+  value: "swift",
+  label: "Swift"
+}, {
+  value: "typescript",
+  label: "TypeScript"
+}, {
+  value: "xml",
+  label: "XML / HTML"
+}, {
+  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 CodeBlockBubble({
+  editor
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const [langOpen, setLangOpen] = (0, import_react.useState)(false);
+  const currentLang = editor?.getAttributes("codeBlock")?.language ?? null;
+  const currentLabel = LANGUAGES.find(l => l.value === currentLang)?.label ?? currentLang ?? "Plain text";
+  const setLanguage = (0, import_react.useCallback)(lang => {
+    if (!editor) return;
+    editor.chain().focus().updateAttributes("codeBlock", {
+      language: lang
+    }).run();
+    setLangOpen(false);
+  }, [editor]);
+  const removeCodeBlock = (0, import_react.useCallback)(() => {
+    if (!editor) return;
+    editor.chain().focus().toggleCodeBlock().run();
+  }, [editor]);
+  if (!editor) return null;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menus.BubbleMenu, {
+    editor,
+    shouldShow: ({
+      editor: e
+    }) => e.isActive("codeBlock"),
+    options: {
+      placement: "top-start"
+    },
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      backgroundColor: "$background",
+      borderWidth: 1,
+      borderColor: "$borderColor",
+      borderRadius: knobProps.borderRadius.borderRadius,
+      padding: "$1",
+      gap: "$1",
+      alignItems: "center",
+      elevation: knobProps.elevation,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
+        open: langOpen,
+        onOpenChange: setLangOpen,
+        placement: "bottom-start",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
+          asChild: true,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToolbarButton.ToolbarDropdownButton, {
+            onPress: () => setLangOpen(true),
+            "aria-label": "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,
+          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.YStack, {
+            gap: "$0.5",
+            minWidth: 160,
+            maxHeight: 280,
+            overflow: "scroll",
+            children: LANGUAGES.map(lang => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_styled.DropdownMenuItemFrame, {
+              active: currentLang === lang.value,
+              onPress: () => setLanguage(lang.value),
+              "aria-label": lang.label,
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                fontSize: 13,
+                children: lang.label
+              })
+            }, lang.label))
+          })
+        })]
+      }), /* @__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, {})
+      })]
+    })
+  });
+}

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

@@ -0,0 +1,228 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var CodeBlockBubble_exports = {};
+__export(CodeBlockBubble_exports, {
+  CodeBlockBubble: () => CodeBlockBubble
+});
+module.exports = __toCommonJS(CodeBlockBubble_exports);
+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_tamagui = require("tamagui");
+var import_styled = require("../styled.native.js");
+var import_ToolbarButton = require("./ToolbarButton.native.js");
+var LANGUAGES = [{
+  value: null,
+  label: "Plain text"
+}, {
+  value: "bash",
+  label: "Bash"
+}, {
+  value: "c",
+  label: "C"
+}, {
+  value: "cpp",
+  label: "C++"
+}, {
+  value: "csharp",
+  label: "C#"
+}, {
+  value: "css",
+  label: "CSS"
+}, {
+  value: "go",
+  label: "Go"
+}, {
+  value: "graphql",
+  label: "GraphQL"
+}, {
+  value: "java",
+  label: "Java"
+}, {
+  value: "javascript",
+  label: "JavaScript"
+}, {
+  value: "json",
+  label: "JSON"
+}, {
+  value: "kotlin",
+  label: "Kotlin"
+}, {
+  value: "markdown",
+  label: "Markdown"
+}, {
+  value: "php",
+  label: "PHP"
+}, {
+  value: "python",
+  label: "Python"
+}, {
+  value: "ruby",
+  label: "Ruby"
+}, {
+  value: "rust",
+  label: "Rust"
+}, {
+  value: "scss",
+  label: "SCSS"
+}, {
+  value: "sql",
+  label: "SQL"
+}, {
+  value: "swift",
+  label: "Swift"
+}, {
+  value: "typescript",
+  label: "TypeScript"
+}, {
+  value: "xml",
+  label: "XML / HTML"
+}, {
+  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 CodeBlockBubble(param) {
+  var {
+    editor
+  } = param;
+  var _ref, _ref1, _ref2;
+  var _editor_getAttributes, _LANGUAGES_find;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  var [langOpen, setLangOpen] = (0, import_react.useState)(false);
+  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) {
+    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";
+  var setLanguage = (0, import_react.useCallback)(function (lang) {
+    if (!editor) return;
+    editor.chain().focus().updateAttributes("codeBlock", {
+      language: lang
+    }).run();
+    setLangOpen(false);
+  }, [editor]);
+  var removeCodeBlock = (0, import_react.useCallback)(function () {
+    if (!editor) return;
+    editor.chain().focus().toggleCodeBlock().run();
+  }, [editor]);
+  if (!editor) return null;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menus.BubbleMenu, {
+    editor,
+    shouldShow: function shouldShow(param2) {
+      var {
+        editor: e
+      } = param2;
+      return e.isActive("codeBlock");
+    },
+    options: {
+      placement: "top-start"
+    },
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      backgroundColor: "$background",
+      borderWidth: 1,
+      borderColor: "$borderColor",
+      borderRadius: knobProps.borderRadius.borderRadius,
+      padding: "$1",
+      gap: "$1",
+      alignItems: "center",
+      elevation: knobProps.elevation,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
+        open: langOpen,
+        onOpenChange: setLangOpen,
+        placement: "bottom-start",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
+          asChild: true,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToolbarButton.ToolbarDropdownButton, {
+            onPress: function onPress() {
+              return setLangOpen(true);
+            },
+            "aria-label": "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,
+          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.YStack, {
+            gap: "$0.5",
+            minWidth: 160,
+            maxHeight: 280,
+            overflow: "scroll",
+            children: LANGUAGES.map(function (lang) {
+              return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_styled.DropdownMenuItemFrame, {
+                active: currentLang === lang.value,
+                onPress: function onPress() {
+                  return setLanguage(lang.value);
+                },
+                "aria-label": lang.label,
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                  fontSize: 13,
+                  children: lang.label
+                })
+              }, lang.label);
+            })
+          })
+        })]
+      }), /* @__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, {})
+      })]
+    })
+  });
+}
+//# sourceMappingURL=CodeBlockBubble.native.js.map

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

@@ -0,0 +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":[]}

package/dist/cjs/toolbar/ColorPicker.cjs

@@ -0,0 +1,217 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var ColorPicker_exports = {};
+__export(ColorPicker_exports, {
+  HighlightColorPicker: () => HighlightColorPicker,
+  TextColorPicker: () => TextColorPicker
+});
+module.exports = __toCommonJS(ColorPicker_exports);
+var import_react = require("react");
+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_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,
+  selectedColor,
+  onSelect,
+  maxWidth
+}) {
+  const {
+    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(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))
+    })]
+  });
+}
+function TextColorPicker({
+  editorRef,
+  state,
+  disabled
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  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,
+    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: () => 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
+      })]
+    })]
+  });
+}
+function HighlightColorPicker({
+  editorRef,
+  state,
+  disabled
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const handleSelect = (0, import_react.useCallback)(color => {
+    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: () => 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
+      })]
+    })]
+  });
+}