@multiplatform.one/rich-text 6.1.0 → 6.3.0

package/dist/esm/toolbar/LinkDialog.native.js

@@ -1,28 +1,18 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { Input, Popover, Text, XStack, YStack } from "tamagui";
+import { Modal, Pressable, StyleSheet } from "react-native";
+import { Input, Text, XStack, YStack } from "tamagui";
 import { Button } from "@multiplatform.one/forms";
 import { ToolbarButton } from "./ToolbarButton.native.js";
 import { LinkIcon } from "./icons.native.js";
-import { SHORTCUTS } from "./shortcuts.native.js";
-function normalizeUrl(url) {
-  var trimmed = url.trim();
-  if (!trimmed) return trimmed;
-  if (/^https?:\/\//i.test(trimmed)) return trimmed;
-  if (/^mailto:/i.test(trimmed)) return trimmed;
-  if (/^tel:/i.test(trimmed)) return trimmed;
-  return `https://${trimmed}`;
-}
+import { t } from "../shared/t.native.js";
+import { normalizeUrl } from "../shared/url.native.js";
 function LinkDialog(param) {
   var {
     editorRef,
     state,
     disabled
   } = param;
-  var {
-    knobProps
-  } = useResolvedKnobs();
   var [open, setOpen] = useState(false);
   var [linkUrl, setLinkUrl] = useState("");
   var handleSubmit = useCallback(function () {
@@ -43,75 +33,89 @@ function LinkDialog(param) {
     });
     setOpen(false);
   }, [editorRef]);
-  return /* @__PURE__ */_jsxs(Popover, {
-    open,
-    onOpenChange: setOpen,
-    placement: "bottom",
-    children: [/* @__PURE__ */_jsx(Popover.Trigger, {
-      asChild: true,
-      children: /* @__PURE__ */_jsx(ToolbarButton, {
-        active: state.isLink,
-        disabled,
+  return /* @__PURE__ */_jsxs(_Fragment, {
+    children: [/* @__PURE__ */_jsx(ToolbarButton, {
+      active: state.isLink,
+      disabled,
+      onPress: function onPress() {
+        return setOpen(true);
+      },
+      "aria-label": t("Link"),
+      children: /* @__PURE__ */_jsx(LinkIcon, {})
+    }), /* @__PURE__ */_jsx(Modal, {
+      visible: open,
+      transparent: true,
+      animationType: "fade",
+      onRequestClose: function onRequestClose() {
+        return setOpen(false);
+      },
+      children: /* @__PURE__ */_jsx(Pressable, {
+        style: styles.backdrop,
         onPress: function onPress() {
-          return setOpen(true);
+          return setOpen(false);
         },
-        "aria-label": "Link",
-        tooltip: SHORTCUTS.link,
-        children: /* @__PURE__ */_jsx(LinkIcon, {})
+        children: /* @__PURE__ */_jsx(Pressable, {
+          style: styles.sheet,
+          onPress: function onPress(e) {
+            return e.stopPropagation();
+          },
+          children: /* @__PURE__ */_jsxs(YStack, {
+            backgroundColor: "$background",
+            borderRadius: "$4",
+            padding: "$4",
+            gap: "$3",
+            minWidth: 280,
+            children: [/* @__PURE__ */_jsx(Text, {
+              fontWeight: "600",
+              children: state.isLink ? t("Edit Link") : t("Add Link")
+            }), /* @__PURE__ */_jsx(Input, {
+              size: "$3",
+              placeholder: "https://example.com",
+              value: linkUrl,
+              onChangeText: setLinkUrl,
+              onSubmitEditing: handleSubmit,
+              autoFocus: true,
+              autoCapitalize: "none",
+              keyboardType: "url"
+            }), /* @__PURE__ */_jsxs(XStack, {
+              gap: "$2",
+              justifyContent: "flex-end",
+              children: [/* @__PURE__ */_jsx(Button, {
+                size: "$2",
+                onPress: function onPress() {
+                  return setOpen(false);
+                },
+                "aria-label": t("Cancel"),
+                children: t("Cancel")
+              }), state.isLink && /* @__PURE__ */_jsx(Button, {
+                size: "$2",
+                theme: "red",
+                onPress: handleRemove,
+                "aria-label": t("Remove link"),
+                children: t("Remove")
+              }), /* @__PURE__ */_jsx(Button, {
+                size: "$2",
+                theme: "active",
+                onPress: handleSubmit,
+                disabled: !linkUrl.trim(),
+                "aria-label": state.isLink ? t("Update link") : t("Add link"),
+                children: state.isLink ? t("Update") : t("Add")
+              })]
+            })]
+          })
+        })
       })
-    }), /* @__PURE__ */_jsxs(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__ */_jsx(Popover.Arrow, {
-        borderColor: "$borderColor",
-        backgroundColor: "$background"
-      }), /* @__PURE__ */_jsxs(YStack, {
-        gap: "$2",
-        minWidth: 250,
-        children: [/* @__PURE__ */_jsx(Text, {
-          fontSize: knobProps.sizeToken,
-          fontWeight: "600",
-          children: state.isLink ? "Edit Link" : "Add Link"
-        }), /* @__PURE__ */_jsx(Input, {
-          size: "$3",
-          placeholder: "https://example.com",
-          value: linkUrl,
-          onChangeText: setLinkUrl,
-          onSubmitEditing: handleSubmit,
-          autoFocus: true
-        }), /* @__PURE__ */_jsxs(XStack, {
-          gap: "$2",
-          justifyContent: "flex-end",
-          children: [state.isLink && /* @__PURE__ */_jsx(Button, {
-            size: "$2",
-            theme: "red",
-            onPress: handleRemove,
-            "aria-label": "Remove link",
-            children: "Remove"
-          }), /* @__PURE__ */_jsx(Button, {
-            size: "$2",
-            theme: "active",
-            onPress: handleSubmit,
-            disabled: !linkUrl.trim(),
-            "aria-label": state.isLink ? "Update link" : "Add link",
-            children: state.isLink ? "Update" : "Add"
-          })]
-        })]
-      })]
     })]
   });
 }
-export { LinkDialog, normalizeUrl };
+var styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.4)",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  sheet: {}
+});
+export { LinkDialog };
 //# sourceMappingURL=LinkDialog.native.js.map

package/dist/esm/toolbar/LinkDialog.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","useCallback","useState","useResolvedKnobs","Input","Popover","Text","XStack","YStack","Button","ToolbarButton","LinkIcon","SHORTCUTS","normalizeUrl","url","trimmed","trim","test","LinkDialog","param","editorRef","state","disabled","knobProps","open","setOpen","linkUrl","setLinkUrl","handleSubmit","normalized","_editorRef_current","current","executeCommand","href","handleRemove","onOpenChange","placement","children","Trigger","asChild","active","isLink","onPress","tooltip","link","Content","panelPadding","backgroundColor","borderWidth","borderColor","borderRadius","elevation","enterStyle","opacity","y","exitStyle","Arrow","gap","minWidth","fontSize","sizeToken","fontWeight"],"sources":["../../../src/toolbar/LinkDialog.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","useCallback","useState","Modal","Pressable","StyleSheet","Input","Text","XStack","YStack","Button","ToolbarButton","LinkIcon","t","normalizeUrl","LinkDialog","param","editorRef","state","disabled","open","setOpen","linkUrl","setLinkUrl","handleSubmit","normalized","_editorRef_current","current","executeCommand","href","handleRemove","children","active","isLink","onPress","visible","transparent","animationType","onRequestClose","style","styles","backdrop","sheet","e","stopPropagation","backgroundColor","borderRadius","padding","gap","minWidth","fontWeight","size","placeholder","value","onChangeText","onSubmitEditing","autoFocus","autoCapitalize","keyboardType","justifyContent","theme","trim","create","flex","alignItems"],"sources":["../../../src/toolbar/LinkDialog.native.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/toolbar/ListPicker.mjs

@@ -1,22 +1,21 @@
-import { useState } from "react";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { Popover, Text, YStack } from "tamagui";
-import { DropdownMenuItemFrame } from "../styled.mjs";
+import { useRef, useState } from "react";
+import { DropdownMenu } from "@multiplatform.one/components";
 import { ToolbarDropdownButton } from "./ToolbarButton.mjs";
 import { BulletListIcon, OrderedListIcon, TaskListIcon } from "./icons.mjs";
+import { t } from "../shared/t.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 const LIST_OPTIONS = [{
-  label: "Bullet List",
+  label: () => t("Bullet List"),
   command: "bulletList",
   stateKey: "isBulletList",
   icon: BulletListIcon
 }, {
-  label: "Ordered List",
+  label: () => t("Ordered List"),
   command: "orderedList",
   stateKey: "isOrderedList",
   icon: OrderedListIcon
 }, {
-  label: "Task List",
+  label: () => t("Task List"),
   command: "taskList",
   stateKey: "isTaskList",
   icon: TaskListIcon
@@ -34,56 +33,46 @@ function ListPicker({
   state,
   disabled
 }) {
-  const {
-    knobProps
-  } = useResolvedKnobs();
   const [open, setOpen] = useState(false);
+  const selectedRef = useRef(false);
   const ActiveIcon = getActiveListIcon(state);
-  return /* @__PURE__ */jsxs(Popover, {
+  return /* @__PURE__ */jsxs(DropdownMenu, {
     open,
     onOpenChange: setOpen,
     placement: "bottom-start",
-    children: [/* @__PURE__ */jsx(Popover.Trigger, {
+    children: [/* @__PURE__ */jsx(DropdownMenu.Trigger, {
       asChild: true,
       children: /* @__PURE__ */jsx(ToolbarDropdownButton, {
         active: isAnyListActive(state),
         disabled,
         onPress: () => setOpen(true),
-        "aria-label": "Lists",
+        "aria-label": t("Lists"),
         children: /* @__PURE__ */jsx(ActiveIcon, {})
       })
-    }), /* @__PURE__ */jsx(Popover.Content, {
-      ...knobProps.panelPadding,
-      backgroundColor: "$background",
-      borderWidth: 1,
-      borderColor: "$borderColor",
-      borderRadius: knobProps.borderRadius.borderRadius,
-      elevation: knobProps.elevation,
-      enterStyle: {
-        opacity: 0,
-        y: -5
+    }), /* @__PURE__ */jsx(DropdownMenu.Content, {
+      minWidth: 150,
+      onCloseAutoFocus: event => {
+        event.preventDefault();
+        if (selectedRef.current) {
+          selectedRef.current = false;
+          editorRef.current?.focus();
+        }
       },
-      exitStyle: {
-        opacity: 0,
-        y: -5
-      },
-      children: /* @__PURE__ */jsx(YStack, {
-        gap: "$1",
-        minWidth: 150,
-        children: LIST_OPTIONS.map(option => {
-          const Icon = option.icon;
-          return /* @__PURE__ */jsxs(DropdownMenuItemFrame, {
-            active: state[option.stateKey],
-            onPress: () => {
-              editorRef.current?.executeCommand(option.command);
-              setOpen(false);
-            },
-            "aria-label": option.label,
-            children: [/* @__PURE__ */jsx(Icon, {}), /* @__PURE__ */jsx(Text, {
-              children: option.label
-            })]
-          }, option.command);
-        })
+      children: LIST_OPTIONS.map(option => {
+        const Icon = option.icon;
+        const label = option.label();
+        return /* @__PURE__ */jsx(DropdownMenu.Item, {
+          icon: /* @__PURE__ */jsx(Icon, {}),
+          closeOnSelect: false,
+          backgroundColor: state[option.stateKey] ? "$color4" : void 0,
+          "aria-label": label,
+          onSelect: () => {
+            selectedRef.current = true;
+            editorRef.current?.executeCommand(option.command);
+            setOpen(false);
+          },
+          children: label
+        }, option.command);
       })
     })]
   });

package/dist/esm/toolbar/ListPicker.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["useState","useResolvedKnobs","Popover","Text","YStack","DropdownMenuItemFrame","ToolbarDropdownButton","BulletListIcon","OrderedListIcon","TaskListIcon","jsx","jsxs","LIST_OPTIONS","label","command","stateKey","icon","getActiveListIcon","state","isOrderedList","isTaskList","isAnyListActive","isBulletList","ListPicker","editorRef","disabled","knobProps","open","setOpen","ActiveIcon","onOpenChange","placement","children","Trigger","asChild","active","onPress","Content","panelPadding","backgroundColor","borderWidth","borderColor","borderRadius","elevation","enterStyle","opacity","y","exitStyle","gap","minWidth","map","option","Icon","current","executeCommand"],"sources":["../../../src/toolbar/ListPicker.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useRef","useState","DropdownMenu","ToolbarDropdownButton","BulletListIcon","OrderedListIcon","TaskListIcon","t","jsx","jsxs","LIST_OPTIONS","label","command","stateKey","icon","getActiveListIcon","state","isOrderedList","isTaskList","isAnyListActive","isBulletList","ListPicker","editorRef","disabled","open","setOpen","selectedRef","ActiveIcon","onOpenChange","placement","children","Trigger","asChild","active","onPress","Content","minWidth","onCloseAutoFocus","event","preventDefault","current","focus","map","option","Icon","Item","closeOnSelect","backgroundColor","onSelect","executeCommand"],"sources":["../../../src/toolbar/ListPicker.tsx"],"sourcesContent":[null],"mappings":"AAIA,SAASA,MAAA,EAAQC,QAAA,QAAgB;AACjC,SAASC,YAAA,QAAoB;AAE7B,SAASC,qBAAA,QAA6B;AACtC,SAASC,cAAA,EAAgBC,eAAA,EAAiBC,YAAA,QAAoB;AAC9D,SAASC,CAAA,QAAS;AAoEd,SAQMC,GAAA,EARNC,IAAA;AAzCJ,MAAMC,YAAA,GAA6B,CACjC;EACEC,KAAA,EAAOA,CAAA,KAAMJ,CAAA,CAAE,aAAa;EAC5BK,OAAA,EAAS;EACTC,QAAA,EAAU;EACVC,IAAA,EAAMV;AACR,GACA;EACEO,KAAA,EAAOA,CAAA,KAAMJ,CAAA,CAAE,cAAc;EAC7BK,OAAA,EAAS;EACTC,QAAA,EAAU;EACVC,IAAA,EAAMT;AACR,GACA;EACEM,KAAA,EAAOA,CAAA,KAAMJ,CAAA,CAAE,WAAW;EAC1BK,OAAA,EAAS;EACTC,QAAA,EAAU;EACVC,IAAA,EAAMR;AACR,EACF;AAMA,SAASS,kBAAkBC,KAAA,EAAoB;EAC7C,IAAIA,KAAA,CAAMC,aAAA,EAAe,OAAOZ,eAAA;EAChC,IAAIW,KAAA,CAAME,UAAA,EAAY,OAAOZ,YAAA;EAC7B,OAAOF,cAAA;AACT;AAEA,SAASe,gBAAgBH,KAAA,EAA6B;EACpD,OAAOA,KAAA,CAAMI,YAAA,IAAgBJ,KAAA,CAAMC,aAAA,IAAiBD,KAAA,CAAME,UAAA;AAC5D;AAEO,SAASG,WAAW;EAAEC,SAAA;EAAWN,KAAA;EAAOO;AAAS,GAAoB;EAC1E,MAAM,CAACC,IAAA,EAAMC,OAAO,IAAIxB,QAAA,CAAS,KAAK;EACtC,MAAMyB,WAAA,GAAc1B,MAAA,CAAO,KAAK;EAChC,MAAM2B,UAAA,GAAaZ,iBAAA,CAAkBC,KAAK;EAE1C,OACE,eAAAP,IAAA,CAACP,YAAA;IAAasB,IAAA;IAAYI,YAAA,EAAcH,OAAA;IAASI,SAAA,EAAU;IACzDC,QAAA,kBAAAtB,GAAA,CAACN,YAAA,CAAa6B,OAAA,EAAb;MAAqBC,OAAA,EAAO;MAC3BF,QAAA,iBAAAtB,GAAA,CAACL,qBAAA;QACC8B,MAAA,EAAQd,eAAA,CAAgBH,KAAK;QAC7BO,QAAA;QACAW,OAAA,EAASA,CAAA,KAAMT,OAAA,CAAQ,IAAI;QAC3B,cAAYlB,CAAA,CAAE,OAAO;QAErBuB,QAAA,iBAAAtB,GAAA,CAACmB,UAAA,IAAW;MAAA,CACd;IAAA,CACF,GACA,eAAAnB,GAAA,CAACN,YAAA,CAAaiC,OAAA,EAAb;MACCC,QAAA,EAAU;MAIVC,gBAAA,EAAmBC,KAAA,IAAU;QAC3BA,KAAA,CAAMC,cAAA,CAAe;QACrB,IAAIb,WAAA,CAAYc,OAAA,EAAS;UACvBd,WAAA,CAAYc,OAAA,GAAU;UACtBlB,SAAA,CAAUkB,OAAA,EAASC,KAAA,CAAM;QAC3B;MACF;MAECX,QAAA,EAAApB,YAAA,CAAagC,GAAA,CAAKC,MAAA,IAAW;QAC5B,MAAMC,IAAA,GAAOD,MAAA,CAAO7B,IAAA;QACpB,MAAMH,KAAA,GAAQgC,MAAA,CAAOhC,KAAA,CAAM;QAC3B,OACE,eAAAH,GAAA,CAACN,YAAA,CAAa2C,IAAA,EAAb;UAEC/B,IAAA,EAAM,eAAAN,GAAA,CAACoC,IAAA,IAAK;UACZE,aAAA,EAAe;UACfC,eAAA,EAAiB/B,KAAA,CAAM2B,MAAA,CAAO9B,QAAQ,IAAI,YAAY;UACtD,cAAYF,KAAA;UACZqC,QAAA,EAAUA,CAAA,KAAM;YACdtB,WAAA,CAAYc,OAAA,GAAU;YACtBlB,SAAA,CAAUkB,OAAA,EAASS,cAAA,CAAeN,MAAA,CAAO/B,OAAO;YAChDa,OAAA,CAAQ,KAAK;UACf;UAECK,QAAA,EAAAnB;QAAA,GAXIgC,MAAA,CAAO/B,OAYd;MAEJ,CAAC;IAAA,CACH;EAAA,CACF;AAEJ","ignoreList":[]}

package/dist/esm/toolbar/ListPicker.native.js

@@ -1,22 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { Popover, Text, YStack } from "tamagui";
-import { DropdownMenuItemFrame } from "../styled.native.js";
+import { useRef, useState } from "react";
+import { DropdownMenu } from "@multiplatform.one/components";
 import { ToolbarDropdownButton } from "./ToolbarButton.native.js";
 import { BulletListIcon, OrderedListIcon, TaskListIcon } from "./icons.native.js";
+import { t } from "../shared/t.native.js";
 var LIST_OPTIONS = [{
-  label: "Bullet List",
+  label: function label() {
+    return t("Bullet List");
+  },
   command: "bulletList",
   stateKey: "isBulletList",
   icon: BulletListIcon
 }, {
-  label: "Ordered List",
+  label: function label2() {
+    return t("Ordered List");
+  },
   command: "orderedList",
   stateKey: "isOrderedList",
   icon: OrderedListIcon
 }, {
-  label: "Task List",
+  label: function label3() {
+    return t("Task List");
+  },
   command: "taskList",
   stateKey: "isTaskList",
   icon: TaskListIcon
@@ -35,16 +40,14 @@ function ListPicker(param) {
     state,
     disabled
   } = param;
-  var {
-    knobProps
-  } = useResolvedKnobs();
   var [open, setOpen] = useState(false);
+  var selectedRef = useRef(false);
   var ActiveIcon = getActiveListIcon(state);
-  return /* @__PURE__ */_jsxs(Popover, {
+  return /* @__PURE__ */_jsxs(DropdownMenu, {
     open,
     onOpenChange: setOpen,
     placement: "bottom-start",
-    children: [/* @__PURE__ */_jsx(Popover.Trigger, {
+    children: [/* @__PURE__ */_jsx(DropdownMenu.Trigger, {
       asChild: true,
       children: /* @__PURE__ */_jsx(ToolbarDropdownButton, {
         active: isAnyListActive(state),
@@ -52,42 +55,38 @@ function ListPicker(param) {
         onPress: function onPress() {
           return setOpen(true);
         },
-        "aria-label": "Lists",
+        "aria-label": t("Lists"),
         children: /* @__PURE__ */_jsx(ActiveIcon, {})
       })
-    }), /* @__PURE__ */_jsx(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
+    }), /* @__PURE__ */_jsx(DropdownMenu.Content, {
+      minWidth: 150,
+      // Toolbar menus must not steal focus back to the trigger on
+      // select-close: focus returns to the editor so typing continues.
+      // Escape still restores the trigger via the menu's own close().
+      onCloseAutoFocus: function onCloseAutoFocus(event) {
+        event.preventDefault();
+        if (selectedRef.current) {
+          var _editorRef_current;
+          selectedRef.current = false;
+          (_editorRef_current = editorRef.current) === null || _editorRef_current === void 0 ? void 0 : _editorRef_current.focus();
+        }
       },
-      children: /* @__PURE__ */_jsx(YStack, {
-        gap: "$1",
-        minWidth: 150,
-        children: LIST_OPTIONS.map(function (option) {
-          var Icon = option.icon;
-          return /* @__PURE__ */_jsxs(DropdownMenuItemFrame, {
-            active: state[option.stateKey],
-            onPress: function onPress() {
-              var _editorRef_current;
-              (_editorRef_current = editorRef.current) === null || _editorRef_current === void 0 ? void 0 : _editorRef_current.executeCommand(option.command);
-              setOpen(false);
-            },
-            "aria-label": option.label,
-            children: [/* @__PURE__ */_jsx(Icon, {}), /* @__PURE__ */_jsx(Text, {
-              children: option.label
-            })]
-          }, option.command);
-        })
+      children: LIST_OPTIONS.map(function (option) {
+        var Icon = option.icon;
+        var label4 = option.label();
+        return /* @__PURE__ */_jsx(DropdownMenu.Item, {
+          icon: /* @__PURE__ */_jsx(Icon, {}),
+          closeOnSelect: false,
+          backgroundColor: state[option.stateKey] ? "$color4" : void 0,
+          "aria-label": label4,
+          onSelect: function onSelect() {
+            var _editorRef_current;
+            selectedRef.current = true;
+            (_editorRef_current = editorRef.current) === null || _editorRef_current === void 0 ? void 0 : _editorRef_current.executeCommand(option.command);
+            setOpen(false);
+          },
+          children: label4
+        }, option.command);
       })
     })]
   });

package/dist/esm/toolbar/ListPicker.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","useState","useResolvedKnobs","Popover","Text","YStack","DropdownMenuItemFrame","ToolbarDropdownButton","BulletListIcon","OrderedListIcon","TaskListIcon","LIST_OPTIONS","label","command","stateKey","icon","getActiveListIcon","state","isOrderedList","isTaskList","isAnyListActive","isBulletList","ListPicker","param","editorRef","disabled","knobProps","open","setOpen","ActiveIcon","onOpenChange","placement","children","Trigger","asChild","active","onPress","Content","panelPadding","backgroundColor","borderWidth","borderColor","borderRadius","elevation","enterStyle","opacity","y","exitStyle","gap","minWidth","map","option","Icon","_editorRef_current","current","executeCommand"],"sources":["../../../src/toolbar/ListPicker.tsx"],"sourcesContent":[null],"mappings":"AAIA,SAASA,GAAA,IAAAC,IAAA,EAAAC,IAAgB,IAAAC,KAAA;AACzB,SAASC,QAAA;AACT,SAASC,gBAAe,kCAAc;AAEtC,SAASC,OAAA,EAAAC,IAAA,EAAAC,MAAA,QAA6B;AACtC,SAASC,qBAAA,QAA6B;AACtC,SAASC,qBAAgB,mCAAiB;AA2EhC,SAAAC,cAiBI,EAAAC,eAjBJ,EAAAC,YAAA;AAjDV,IAAAC,YAAM,IACJ;EACEC,KAAA,EAAO;EACPC,OAAA,EAAS;EACTC,QAAA,EAAU;EACVC,IAAA,EAAMP;AACR,GACA;EACEI,KAAA,EAAO;EACPC,OAAA,EAAS;EACTC,QAAA,EAAU;EACVC,IAAA,EAAMN;AACR,GACA;EACEG,KAAA,EAAO;EACPC,OAAA,EAAS;EACTC,QAAA,EAAU;EACVC,IAAA,EAAML;AACR,EACF;AAMA,SAASM,kBAAkBC,KAAA,EAAoB;EAC7C,IAAIA,KAAA,CAAMC,aAAA,EAAe,OAAOT,eAAA;EAChC,IAAIQ,KAAA,CAAME,UAAA,EAAY,OAAOT,YAAA;EAC7B,OAAOF,cAAA;AACT;AAEA,SAASY,gBAAgBH,KAAA,EAA6B;EACpD,OAAOA,KAAA,CAAMI,YAAA,IAAgBJ,KAAA,CAAMC,aAAA,IAAiBD,KAAA,CAAME,UAAA;AAC5D;AAEO,SAASG,WAAWC,KAAE;EAC3B;IAAMC,SAAE;IAAAP,KAAc;IAAAQ;EAAA,IAAAF,KAAiB;EACvC;IAAMG;EAAO,IAAOxB,gBAAa,EAAK;EACtC,KAAAyB,IAAM,EAAAC,OAAA,CAAa,GAAA3B,QAAA,OAAkB;EAErC,IAAA4B,UACE,GAAAb,iBAAC,CAAAC,KAAQ;EACP,sBAACjB,KAAA,CAAAG,OAAQ;IACPwB,IAAC;IAAAG,YAAA,EAAAF,OAAA;IAAAG,SACC,gBAAQ;IAAqBC,QAC7B,kBACSlC,IAAM,CAAAK,OAAQ,CAAI8B,OAAA;MAC3BC,OAAA;MAEAF,QAAA,iBAAAlC,IAAC,CAAAS,qBAAW;QAAA4B,MAAA,EAAAf,eAAA,CAAAH,KAAA;QAEhBQ,QAAA;QACAW,OAAA,WAAAA,QAAA;UAAC,OAAQR,OAAA;QAAR;QACE,YAAa;QACdI,QAAA,iBAAgBlC,IAAA,CAAA+B,UAAA;MAChB;IAAa,EACb,EAAY,eACE/B,IAAA,CAAAK,OAAU,CAAAkC,OAAA;MACxB,GAAAX,SAAW,CAAAY,YAAU;MACrBC,eAAc,eAAe;MAC7BC,WAAW,EAAE;MAEbC,WAAA;MAEIC,YAAM,EAAAhB,SAAc,CAAAgB,YAAA,CAAAA,YAAA;MACpBC,SACE,EAAAjB,SAAA,CAAAiB,SAAA;MAAAC,UAAC;QAAAC,OAAA;QAAAC,CAAA,GAEC;MAA6B;MAE3BC,SAAA;QACAF,OAAA;QAAaC,CAAA,GACf;MAAA;MACmBd,QAEnB,iBAAAlC,IAAA,CAAAO,MAAA;QAAA2C,GAAA;QAAMC,QACN;QAAoBjB,QAAA,EAAArB,YAAA,CAAAuC,GAAA,WAAAC,MAAA;UAAA,IAAAC,IAAA,GAAAD,MAAA,CAAApC,IAAA;UATf,OAAO,eAAAf,KAAA,CAAAM,qBAAA;YAUd6B,MAAA,EAAAlB,KAAA,CAAAkC,MAAA,CAAArC,QAAA;YAGNsB,OAAA,WAAAA,QAAA;cAAA,IAAAiB,kBAAA;cACF,CAAAA,kBAAA,GAAA7B,SAAA,CAAA8B,OAAA,cAAAD,kBAAA,uBAAAA,kBAAA,CAAAE,cAAA,CAAAJ,MAAA,CAAAtC,OAAA;cACFe,OAAA;YAEJ","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","useRef","useState","DropdownMenu","ToolbarDropdownButton","BulletListIcon","OrderedListIcon","TaskListIcon","t","LIST_OPTIONS","label","command","stateKey","icon","label2","label3","getActiveListIcon","state","isOrderedList","isTaskList","isAnyListActive","isBulletList","ListPicker","param","editorRef","disabled","open","setOpen","selectedRef","ActiveIcon","onOpenChange","placement","children","Trigger","asChild","active","onPress","Content","minWidth","onCloseAutoFocus","event","preventDefault","current","_editorRef_current","focus","map","option","Icon","label4","Item","closeOnSelect","backgroundColor","onSelect"],"sources":["../../../src/toolbar/ListPicker.tsx"],"sourcesContent":[null],"mappings":"AAIA,SAASA,GAAA,IAAAC,IAAQ,EAAAC,IAAA,IAAAC,KAAgB;AACjC,SAASC,MAAA,EAAAC,QAAA,QAAoB;AAE7B,SAASC,YAAA,uCAA6B;AACtC,SAASC,qBAAgB,mCAAiB;AAC1C,SAASC,cAAS,EAAAC,eAAA,EAAAC,YAAA;AAoEd,SAQMC,CAAA,QARN;AAzCJ,IAAAC,YAAM,IACJ;EACEC,KAAA,EAAO,SAAQA,MAAA;IACf,OAASF,CAAA;EACT;EACAG,OAAM;EACRC,QAAA;EACAC,IAAA,EAAAR;AAAA,GAC+B;EAE7BK,KAAA,WAAUI,OAAA;IACV,OAAMN,CAAA;EACR;EACAG,OAAA;EACEC,QAAO,iBAAQ;EACfC,IAAA,EAAAP;AAAS,GACC;EAEZI,KAAA,WAAAK,OAAA;IACF,OAAAP,CAAA;EAMA;EACEG,OAAI,EAAM;EACVC,QAAU,cAAY;EACtBC,IAAA,EAAON;AACT,EAEA;AACE,SAAOS,iBAAMA,CAAAC,KAAgB;EAC/B,IAAAA,KAAA,CAAAC,aAAA,SAAAZ,eAAA;EAEO,IAAAW,KAAS,CAAAE,UAAa,SAAAZ,YAAkB;EAC7C,OAAOF,cAAa;AACpB;AACA,SAAMe,eAAaA,CAAAH,KAAA;EAEnB,OACEA,KAAA,CAAAI,YAAA,IAACJ,KAAA,CAAAC,aAAa,IAAYD,KAAA,CAAAE,UAAc;AACtC;AACE,SAACG,WAAAC,KAAA;EAAA;IAAAC,SAAA;IAAAP,KAAA;IAAAQ;EAAA,IAAAF,KAAA;EAAA,KAAAG,IACC,EAAAC,OAAQ,IAAAzB,QAAgB,MAAK;EAAA,IAAA0B,WAC7B,GAAA3B,MAAA;EAAA,IAAA4B,UACA,GAASb,iBAAkB,CAAAC,KAAA;EAAA,OAC3B,eAAcjB,KAAA,CAAOG,YAAA;IAAAuB,IAErB;IAAYI,YAAA,EAAAH,OAAA;IACdI,SACF;IACAC,QAAA,GAAC,eAAalC,IAAA,CAAAK,YAAA,CAAA8B,OAAA;MAAbC,OAAA;MACCF,QAAA,EAAU,eAAAlC,IAAA,CAAAM,qBAAA;QAIV+B,MAAA,EAAAf,eAAmB,CAAAH,KAAU;QAC3BQ,QAAM;QACNW,OAAI,WAAYA,OAASA,CAAA;UACvB,OAAAT,OAAY;QACZ;QACF,cAAAnB,CAAA;QACFwB,QAAA,iBAAAlC,IAAA,CAAA+B,UAAA;MAEC;IACC,IACA,eAAM/B,IAAQ,CAAAK,YAAa,CAAAkC,OAAA;MAC3BC,QAAA,EACE;MAAA;MAAc;MAAb;MAEaC,gBACZ,WAAeA,iBAAAC,KAAA;QAAAA,KACf,CAAAC,cAAA,CAAiB;QAAqC,IACtDb,WAAA,CAAAc,OAAY;UAAA,IACZC,kBAAgB;UACdf,WAAA,CAAAc,OAAY,QAAU;UACtB,CAAAC,kBAAU,GAAAnB,SAAS,CAAAkB,OAAe,MAAO,QAAOC,kBAAA,uBAAAA,kBAAA,CAAAC,KAAA;QAChD;MAAa;MACfZ,QAEC,EAAAvB,YAAA,CAAAoC,GAAA,WAAAC,MAAA;QAAA,IAAAC,IAAA,GAAAD,MAAA,CAAAjC,IAAA;QAAA,IAXImC,MAAO,GAAAF,MAAA,CAAApC,KAAA;QAYd,sBAAAZ,IAAA,CAAAK,YAAA,CAAA8C,IAAA;UAEHpC,IAAA,iBAAAf,IAAA,CAAAiD,IAAA;UAAAG,aAAA;UACHC,eAAA,EAAAlC,KAAA,CAAA6B,MAAA,CAAAlC,QAAA;UACF,cAAAoC,MAAA;UAEJI,QAAA,WAAAA,SAAA","ignoreList":[]}

package/dist/esm/toolbar/MathBubble.mjs

@@ -0,0 +1,134 @@
+import { useCallback, useEffect, useState } from "react";
+import { BubbleMenu } from "@tiptap/react/menus";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { PencilSimpleIcon, TrashIcon } from "@phosphor-icons/react";
+import { Input, Text, XStack, YStack } from "tamagui";
+import { Button } from "@multiplatform.one/forms";
+import { renderKatexHtml } from "../editor/lazyKatex.mjs";
+import { ToolbarButton } from "./ToolbarButton.mjs";
+import { t } from "../shared/t.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function MathBubble({
+  editor
+}) {
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  const [editing, setEditing] = useState(false);
+  const [latex, setLatex] = useState("");
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (!editing) return void 0;
+    if (!latex.trim()) {
+      setError(null);
+      return void 0;
+    }
+    let cancelled = false;
+    void renderKatexHtml(latex).then(result => {
+      if (!cancelled) setError(result.ok ? null : result.error);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [latex, editing]);
+  const handleEdit = useCallback(() => {
+    if (!editor) return;
+    setLatex(editor.getAttributes("inlineMath").latex ?? "");
+    setError(null);
+    setEditing(true);
+  }, [editor]);
+  const handleSave = useCallback(() => {
+    if (!editor) return;
+    editor.chain().focus().updateInlineMath({
+      latex: latex.trim()
+    }).run();
+    setEditing(false);
+  }, [editor, latex]);
+  const handleRemove = useCallback(() => {
+    if (!editor) return;
+    editor.chain().focus().deleteSelection().run();
+    setEditing(false);
+  }, [editor]);
+  if (!editor) return null;
+  return /* @__PURE__ */jsx(BubbleMenu, {
+    editor,
+    className: "rt-bubble-menu",
+    shouldShow: ({
+      editor: e
+    }) => e.isActive("inlineMath"),
+    options: {
+      placement: "top",
+      offset: 6
+    },
+    children: /* @__PURE__ */jsx(XStack, {
+      backgroundColor: "$background",
+      borderWidth: 1,
+      borderColor: "$borderColor",
+      borderRadius: knobProps.borderRadius.borderRadius,
+      padding: "$1.5",
+      gap: "$1.5",
+      alignItems: "center",
+      elevation: knobProps.elevation,
+      children: editing ? /* @__PURE__ */jsxs(YStack, {
+        gap: "$1.5",
+        children: [/* @__PURE__ */jsx(Input, {
+          size: "$2",
+          placeholder: "x^2 + y^2",
+          value: latex,
+          onChangeText: setLatex,
+          onSubmitEditing: handleSave,
+          "aria-label": t("TeX expression"),
+          autoFocus: true,
+          minWidth: 220,
+          fontFamily: "$mono"
+        }), error ? /* @__PURE__ */jsx(Text, {
+          color: "$red11",
+          fontSize: 11,
+          maxWidth: 260,
+          role: "alert",
+          children: error
+        }) : null, /* @__PURE__ */jsxs(XStack, {
+          gap: "$1",
+          justifyContent: "flex-end",
+          children: [/* @__PURE__ */jsx(Button, {
+            size: "$2",
+            onPress: () => setEditing(false),
+            "aria-label": t("Cancel"),
+            children: t("Cancel")
+          }), /* @__PURE__ */jsx(Button, {
+            size: "$2",
+            theme: "active",
+            onPress: handleSave,
+            "aria-label": t("Save math"),
+            children: t("Save")
+          })]
+        })]
+      }) : /* @__PURE__ */jsxs(Fragment, {
+        children: [/* @__PURE__ */jsx(Text, {
+          fontSize: 12,
+          fontFamily: "$mono",
+          maxWidth: 220,
+          numberOfLines: 1,
+          color: "$color11",
+          children: editor.getAttributes("inlineMath").latex || t("empty")
+        }), /* @__PURE__ */jsx(ToolbarButton, {
+          onPress: handleEdit,
+          "aria-label": t("Edit math"),
+          tooltip: t("Edit math"),
+          children: /* @__PURE__ */jsx(PencilSimpleIcon, {
+            size: 14
+          })
+        }), /* @__PURE__ */jsx(ToolbarButton, {
+          onPress: handleRemove,
+          "aria-label": t("Remove math"),
+          tooltip: t("Remove math"),
+          children: /* @__PURE__ */jsx(TrashIcon, {
+            size: 14
+          })
+        })]
+      })
+    })
+  });
+}
+export { MathBubble };
+//# sourceMappingURL=MathBubble.mjs.map