@multiplatform.one/rich-text 6.1.0 → 6.3.0

package/dist/esm/toolbar/ColorPicker.mjs

@@ -1,45 +1,12 @@
 import { useCallback, useState } from "react";
+import { PresetSwatches } from "@multiplatform.one/forms";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { Popover, Text, View, XStack, YStack } from "tamagui";
-import { TEXT_COLORS, HIGHLIGHT_COLORS } from "../constants.mjs";
+import { Popover, Text, YStack, useThemeName } from "tamagui";
+import { TEXT_COLORS, TEXT_COLORS_DARK, HIGHLIGHT_COLORS } from "../constants.mjs";
 import { ToolbarButton } from "./ToolbarButton.mjs";
 import { TextColorIcon, HighlightIcon } from "./icons.mjs";
+import { t } from "../shared/t.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-function ColorSwatch({
-  color,
-  isSelected,
-  onPress,
-  isNone
-}) {
-  return /* @__PURE__ */jsx(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__ */jsx(View, {
-      position: "absolute",
-      width: 20,
-      height: 2,
-      backgroundColor: "$red10",
-      transform: [{
-        rotate: "45deg"
-      }]
-    })
-  });
-}
 function ColorGrid({
   title,
   colors,
@@ -56,16 +23,14 @@ function ColorGrid({
       fontSize: knobProps.sizeToken,
       fontWeight: "600",
       children: title
-    }), /* @__PURE__ */jsx(XStack, {
-      flexWrap: "wrap",
-      gap: "$1",
-      maxWidth,
-      children: colors.map(c => /* @__PURE__ */jsx(ColorSwatch, {
-        color: c.value,
-        isSelected: selectedColor === c.value,
-        isNone: c.value === null,
-        onPress: () => onSelect(c.value)
-      }, c.name))
+    }), /* @__PURE__ */jsx(PresetSwatches, {
+      presetColors: colors.map(c => ({
+        ...c,
+        name: t(c.name)
+      })),
+      selectedColor,
+      onSelect,
+      width: maxWidth
     })]
   });
 }
@@ -77,12 +42,13 @@ function TextColorPicker({
   const {
     knobProps
   } = useResolvedKnobs();
+  const themeName = useThemeName();
+  const textColors = String(themeName).startsWith("dark") ? TEXT_COLORS_DARK : TEXT_COLORS;
   const [open, setOpen] = useState(false);
   const handleSelect = useCallback(color => {
     editorRef.current?.executeCommand("textColor", {
       color
     });
-    setOpen(false);
   }, [editorRef]);
   return /* @__PURE__ */jsxs(Popover, {
     open,
@@ -94,8 +60,8 @@ function TextColorPicker({
         active: !!state.textColor,
         disabled,
         onPress: () => setOpen(true),
-        "aria-label": "Text Color",
-        tooltip: "Text Color",
+        "aria-label": t("Text Color"),
+        tooltip: t("Text Color"),
         children: /* @__PURE__ */jsx(TextColorIcon, {
           color: state.textColor
         })
@@ -119,8 +85,8 @@ function TextColorPicker({
         borderColor: "$borderColor",
         backgroundColor: "$background"
       }), /* @__PURE__ */jsx(ColorGrid, {
-        title: "Text Color",
-        colors: TEXT_COLORS,
+        title: t("Text Color"),
+        colors: textColors,
         selectedColor: state.textColor,
         onSelect: handleSelect,
         maxWidth: 160
@@ -141,7 +107,6 @@ function HighlightColorPicker({
     editorRef.current?.executeCommand("highlight", {
       color
     });
-    setOpen(false);
   }, [editorRef]);
   return /* @__PURE__ */jsxs(Popover, {
     open,
@@ -153,8 +118,8 @@ function HighlightColorPicker({
         active: !!state.highlightColor,
         disabled,
         onPress: () => setOpen(true),
-        "aria-label": "Highlight Color",
-        tooltip: "Highlight",
+        "aria-label": t("Highlight Color"),
+        tooltip: t("Highlight"),
         children: /* @__PURE__ */jsx(HighlightIcon, {
           color: state.highlightColor
         })
@@ -178,7 +143,7 @@ function HighlightColorPicker({
         borderColor: "$borderColor",
         backgroundColor: "$background"
       }), /* @__PURE__ */jsx(ColorGrid, {
-        title: "Highlight",
+        title: t("Highlight"),
         colors: HIGHLIGHT_COLORS,
         selectedColor: state.highlightColor,
         onSelect: handleSelect,

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

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useState","useResolvedKnobs","Popover","Text","View","XStack","YStack","TEXT_COLORS","HIGHLIGHT_COLORS","ToolbarButton","TextColorIcon","HighlightIcon","jsx","jsxs","ColorSwatch","color","isSelected","onPress","isNone","width","height","borderRadius","backgroundColor","borderWidth","borderColor","cursor","hoverStyle","opacity","pressStyle","scale","alignItems","justifyContent","children","position","transform","rotate","ColorGrid","title","colors","selectedColor","onSelect","maxWidth","knobProps","gap","fontSize","sizeToken","fontWeight","flexWrap","map","c","value","name","TextColorPicker","editorRef","state","disabled","open","setOpen","handleSelect","current","executeCommand","onOpenChange","placement","Trigger","asChild","active","textColor","tooltip","Content","panelPadding","elevation","enterStyle","y","exitStyle","Arrow","HighlightColorPicker","highlightColor"],"sources":["../../../src/toolbar/ColorPicker.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useCallback","useState","PresetSwatches","useResolvedKnobs","Popover","Text","YStack","useThemeName","TEXT_COLORS","TEXT_COLORS_DARK","HIGHLIGHT_COLORS","ToolbarButton","TextColorIcon","HighlightIcon","t","jsx","jsxs","ColorGrid","title","colors","selectedColor","onSelect","maxWidth","knobProps","gap","children","fontSize","sizeToken","fontWeight","presetColors","map","c","name","width","TextColorPicker","editorRef","state","disabled","themeName","textColors","String","startsWith","open","setOpen","handleSelect","color","current","executeCommand","onOpenChange","placement","Trigger","asChild","active","textColor","onPress","tooltip","Content","panelPadding","backgroundColor","borderWidth","borderColor","borderRadius","elevation","enterStyle","opacity","y","exitStyle","Arrow","HighlightColorPicker","highlightColor"],"sources":["../../../src/toolbar/ColorPicker.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

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

@@ -1,79 +1,56 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useState } from "react";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { Popover, Text, View, XStack, YStack } from "tamagui";
-import { TEXT_COLORS, HIGHLIGHT_COLORS } from "../constants.native.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { ActionSheetIOS, Alert, Platform } from "react-native";
+import { useTheme, useThemeName } from "tamagui";
+import { TEXT_COLOR_TOKENS, TEXT_COLOR_TOKENS_DARK, HIGHLIGHT_COLOR_TOKENS } from "../constants.native.js";
 import { ToolbarButton } from "./ToolbarButton.native.js";
 import { TextColorIcon, HighlightIcon } from "./icons.native.js";
-function ColorSwatch(param) {
-  var {
-    color,
-    isSelected,
-    onPress,
-    isNone
-  } = param;
-  return /* @__PURE__ */_jsx(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__ */_jsx(View, {
-      position: "absolute",
-      width: 20,
-      height: 2,
-      backgroundColor: "$red10",
-      transform: [{
-        rotate: "45deg"
-      }]
-    })
-  });
+import { t } from "../shared/t.native.js";
+function useResolvedPalette(entries) {
+  var theme = useTheme();
+  return 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
-  } = useResolvedKnobs();
-  return /* @__PURE__ */_jsxs(YStack, {
-    ...knobProps.gap,
-    children: [/* @__PURE__ */_jsx(Text, {
-      fontSize: knobProps.sizeToken,
-      fontWeight: "600",
-      children: title
-    }), /* @__PURE__ */_jsx(XStack, {
-      flexWrap: "wrap",
-      gap: "$1",
-      maxWidth,
-      children: colors.map(function (c) {
-        return /* @__PURE__ */_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 t(c.name);
   });
+  if (Platform.OS === "ios") {
+    ActionSheetIOS.showActionSheetWithOptions({
+      title,
+      options: [...labels, 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;
+  }
+  Alert.alert(title, void 0, [...colors.map(function (c) {
+    return {
+      text: t(c.name),
+      onPress: function onPress() {
+        return onSelect(c.value);
+      }
+    };
+  }), {
+    text: t("Cancel"),
+    style: "cancel"
+  }]);
 }
 function TextColorPicker(param) {
   var {
@@ -81,61 +58,24 @@ function TextColorPicker(param) {
     state,
     disabled
   } = param;
-  var {
-    knobProps
-  } = useResolvedKnobs();
-  var [open, setOpen] = useState(false);
-  var handleSelect = useCallback(function (color) {
-    var _editorRef_current;
-    (_editorRef_current = editorRef.current) === null || _editorRef_current === void 0 ? void 0 : _editorRef_current.executeCommand("textColor", {
-      color
+  var themeName = useThemeName();
+  var textColors = useResolvedPalette(String(themeName).startsWith("dark") ? TEXT_COLOR_TOKENS_DARK : TEXT_COLOR_TOKENS);
+  var handlePress = useCallback(function () {
+    pickColor(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__ */_jsxs(Popover, {
-    open,
-    onOpenChange: setOpen,
-    placement: "bottom",
-    children: [/* @__PURE__ */_jsx(Popover.Trigger, {
-      asChild: true,
-      children: /* @__PURE__ */_jsx(ToolbarButton, {
-        active: !!state.textColor,
-        disabled,
-        onPress: function onPress() {
-          return setOpen(true);
-        },
-        "aria-label": "Text Color",
-        tooltip: "Text Color",
-        children: /* @__PURE__ */_jsx(TextColorIcon, {
-          color: state.textColor
-        })
-      })
-    }), /* @__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__ */_jsx(ColorGrid, {
-        title: "Text Color",
-        colors: TEXT_COLORS,
-        selectedColor: state.textColor,
-        onSelect: handleSelect,
-        maxWidth: 160
-      })]
-    })]
+  }, [editorRef, textColors]);
+  return /* @__PURE__ */_jsx(ToolbarButton, {
+    active: !!state.textColor,
+    disabled,
+    onPress: handlePress,
+    "aria-label": t("Text Color"),
+    children: /* @__PURE__ */_jsx(TextColorIcon, {
+      color: state.textColor
+    })
   });
 }
 function HighlightColorPicker(param) {
@@ -144,61 +84,23 @@ function HighlightColorPicker(param) {
     state,
     disabled
   } = param;
-  var {
-    knobProps
-  } = useResolvedKnobs();
-  var [open, setOpen] = useState(false);
-  var handleSelect = 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(HIGHLIGHT_COLOR_TOKENS);
+  var handlePress = useCallback(function () {
+    pickColor(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__ */_jsxs(Popover, {
-    open,
-    onOpenChange: setOpen,
-    placement: "bottom",
-    children: [/* @__PURE__ */_jsx(Popover.Trigger, {
-      asChild: true,
-      children: /* @__PURE__ */_jsx(ToolbarButton, {
-        active: !!state.highlightColor,
-        disabled,
-        onPress: function onPress() {
-          return setOpen(true);
-        },
-        "aria-label": "Highlight Color",
-        tooltip: "Highlight",
-        children: /* @__PURE__ */_jsx(HighlightIcon, {
-          color: state.highlightColor
-        })
-      })
-    }), /* @__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__ */_jsx(ColorGrid, {
-        title: "Highlight",
-        colors: HIGHLIGHT_COLORS,
-        selectedColor: state.highlightColor,
-        onSelect: handleSelect,
-        maxWidth: 130
-      })]
-    })]
+  }, [editorRef, highlightColors]);
+  return /* @__PURE__ */_jsx(ToolbarButton, {
+    active: !!state.highlightColor,
+    disabled,
+    onPress: handlePress,
+    "aria-label": t("Highlight Color"),
+    children: /* @__PURE__ */_jsx(HighlightIcon, {
+      color: state.highlightColor
+    })
   });
 }
 export { HighlightColorPicker, TextColorPicker };

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

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","useCallback","useState","useResolvedKnobs","Popover","Text","View","XStack","YStack","TEXT_COLORS","HIGHLIGHT_COLORS","ToolbarButton","TextColorIcon","HighlightIcon","ColorSwatch","param","color","isSelected","onPress","isNone","width","height","borderRadius","backgroundColor","borderWidth","borderColor","cursor","hoverStyle","opacity","pressStyle","scale","alignItems","justifyContent","children","position","transform","rotate","ColorGrid","title","colors","selectedColor","onSelect","maxWidth","knobProps","gap","fontSize","sizeToken","fontWeight","flexWrap","map","c","value","name","TextColorPicker","editorRef","state","disabled","open","setOpen","handleSelect","_editorRef_current","current","executeCommand","onOpenChange","placement","Trigger","asChild","active","textColor","tooltip","Content","panelPadding","elevation","enterStyle","y","exitStyle","Arrow","HighlightColorPicker","highlightColor"],"sources":["../../../src/toolbar/ColorPicker.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","useCallback","useMemo","ActionSheetIOS","Alert","Platform","useTheme","useThemeName","TEXT_COLOR_TOKENS","TEXT_COLOR_TOKENS_DARK","HIGHLIGHT_COLOR_TOKENS","ToolbarButton","TextColorIcon","HighlightIcon","t","useResolvedPalette","entries","theme","map","param","name","token","_ref","_theme_token","value","val","pickColor","title","colors","onSelect","labels","c","OS","showActionSheetWithOptions","options","cancelButtonIndex","length","index","_colors_index","alert","text","onPress","style","TextColorPicker","editorRef","state","disabled","themeName","textColors","String","startsWith","handlePress","color","_editorRef_current","current","executeCommand","active","textColor","children","HighlightColorPicker","highlightColors","highlightColor"],"sources":["../../../src/toolbar/ColorPicker.native.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/toolbar/FixedToolbar.mjs

@@ -5,7 +5,7 @@ import { ToolbarFrame } from "../styled.mjs";
 import { ToolbarButton } from "./ToolbarButton.mjs";
 import { ToolbarGroup } from "./ToolbarGroup.mjs";
 import { useHorizontalScroll, useHorizontalScrollArrows, HorizontalScrollArrow } from "./useHorizontalScroll.mjs";
-import { UndoIcon, RedoIcon, BoldIcon, ItalicIcon, UnderlineIcon, StrikeIcon, BlockquoteIcon, CodeBlockIcon } from "./icons.mjs";
+import { UndoIcon, RedoIcon, BoldIcon, ItalicIcon, UnderlineIcon, StrikeIcon, BlockquoteIcon, CodeBlockIcon, ExpandIcon, CompressIcon } from "./icons.mjs";
 import { TextColorPicker, HighlightColorPicker } from "./ColorPicker.mjs";
 import { HeadingPicker } from "./HeadingPicker.mjs";
 import { ListPicker } from "./ListPicker.mjs";
@@ -13,6 +13,8 @@ import { LinkDialog } from "./LinkDialog.mjs";
 import { ImageDialog } from "./ImageDialog.mjs";
 import { MoreDropdown } from "./MoreDropdown.mjs";
 import { SHORTCUTS } from "./shortcuts.mjs";
+import { useRovingFocus } from "./useRovingFocus.mjs";
+import { t } from "../shared/t.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 function isSectionVisible(section, sections) {
   if (!sections) return true;
@@ -22,7 +24,11 @@ function FixedToolbar({
   editorRef,
   state = defaultEditorState,
   sections,
-  hasError
+  hasError,
+  fullscreen,
+  onFullscreenToggle,
+  linkDialogOpen,
+  onLinkDialogOpenChange
 }) {
   const scrollerRef = useRef(null);
   const {
@@ -32,6 +38,7 @@ function FixedToolbar({
     updateArrows
   } = useHorizontalScrollArrows();
   useHorizontalScroll(scrollerRef);
+  useRovingFocus(scrollerRef);
   useEffect(() => {
     const el = scrollerRef.current;
     if (!el) return;
@@ -74,6 +81,9 @@ function FixedToolbar({
     }), /* @__PURE__ */jsx("div", {
       ref: scrollerRef,
       className: "toolbar-scroller",
+      role: "toolbar",
+      "aria-label": t("Formatting toolbar"),
+      "aria-orientation": "horizontal",
       children: /* @__PURE__ */jsxs(XStack, {
         alignItems: "center",
         gap: "$1",
@@ -83,13 +93,13 @@ function FixedToolbar({
           children: [/* @__PURE__ */jsx(ToolbarButton, {
             disabled: !state.canUndo,
             onPress: () => executeCommand("undo"),
-            "aria-label": "Undo",
+            "aria-label": t("Undo"),
             tooltip: SHORTCUTS.undo,
             children: /* @__PURE__ */jsx(UndoIcon, {})
           }), /* @__PURE__ */jsx(ToolbarButton, {
             disabled: !state.canRedo,
             onPress: () => executeCommand("redo"),
-            "aria-label": "Redo",
+            "aria-label": t("Redo"),
             tooltip: SHORTCUTS.redo,
             children: /* @__PURE__ */jsx(RedoIcon, {})
           })]
@@ -98,7 +108,7 @@ function FixedToolbar({
           children: [/* @__PURE__ */jsx(ToolbarButton, {
             active: state.isBold,
             onPress: () => executeCommand("bold"),
-            "aria-label": "Bold",
+            "aria-label": t("Bold"),
             tooltip: SHORTCUTS.bold,
             children: /* @__PURE__ */jsx(BoldIcon, {
               children: "B"
@@ -106,7 +116,7 @@ function FixedToolbar({
           }), /* @__PURE__ */jsx(ToolbarButton, {
             active: state.isItalic,
             onPress: () => executeCommand("italic"),
-            "aria-label": "Italic",
+            "aria-label": t("Italic"),
             tooltip: SHORTCUTS.italic,
             children: /* @__PURE__ */jsx(ItalicIcon, {
               children: "I"
@@ -114,7 +124,7 @@ function FixedToolbar({
           }), /* @__PURE__ */jsx(ToolbarButton, {
             active: state.isUnderline,
             onPress: () => executeCommand("underline"),
-            "aria-label": "Underline",
+            "aria-label": t("Underline"),
             tooltip: SHORTCUTS.underline,
             children: /* @__PURE__ */jsx(UnderlineIcon, {
               children: "U"
@@ -122,7 +132,7 @@ function FixedToolbar({
           }), /* @__PURE__ */jsx(ToolbarButton, {
             active: state.isStrike,
             onPress: () => executeCommand("strike"),
-            "aria-label": "Strikethrough",
+            "aria-label": t("Strikethrough"),
             tooltip: SHORTCUTS.strike,
             children: /* @__PURE__ */jsx(StrikeIcon, {
               children: "S"
@@ -154,13 +164,13 @@ function FixedToolbar({
           children: [/* @__PURE__ */jsx(ToolbarButton, {
             active: state.isBlockquote,
             onPress: () => executeCommand("blockquote"),
-            "aria-label": "Blockquote",
+            "aria-label": t("Blockquote"),
             tooltip: SHORTCUTS.blockquote,
             children: /* @__PURE__ */jsx(BlockquoteIcon, {})
           }), /* @__PURE__ */jsx(ToolbarButton, {
             active: state.isCodeBlock,
             onPress: () => executeCommand("codeBlock"),
-            "aria-label": "Code Block",
+            "aria-label": t("Code Block"),
             tooltip: SHORTCUTS.codeBlock,
             children: /* @__PURE__ */jsx(CodeBlockIcon, {})
           })]
@@ -168,7 +178,9 @@ function FixedToolbar({
           visible: visible("link"),
           children: /* @__PURE__ */jsx(LinkDialog, {
             editorRef,
-            state
+            state,
+            open: linkDialogOpen,
+            onOpenChange: onLinkDialogOpenChange
           })
         }), /* @__PURE__ */jsx(ToolbarGroup, {
           visible: visible("image"),
@@ -189,6 +201,17 @@ function FixedToolbar({
       scrollRef: scrollerRef,
       visible: arrowRight,
       arrowScrollDirRef
+    }), onFullscreenToggle && /* @__PURE__ */jsx(XStack, {
+      alignItems: "center",
+      paddingHorizontal: "$1",
+      children: /* @__PURE__ */jsx(ToolbarButton, {
+        active: fullscreen,
+        onPress: onFullscreenToggle,
+        "aria-label": t("Fullscreen"),
+        "aria-pressed": !!fullscreen,
+        tooltip: fullscreen ? t("Exit fullscreen (Esc)") : t("Fullscreen"),
+        children: fullscreen ? /* @__PURE__ */jsx(CompressIcon, {}) : /* @__PURE__ */jsx(ExpandIcon, {})
+      })
     })]
   });
 }