@mdxeditor/editor 0.3.0 → 0.4.0

package/dist/index.js

@@ -423,115 +423,6 @@ const styles$1 = {
   admonitionTip,
   admonitionCaution
 };
-const editorRoot = "_editorRoot_1x7ym_47";
-const editorWrapper = "_editorWrapper_1x7ym_141";
-const nestedListItem = "_nestedListItem_1x7ym_145";
-const toolbarRoot = "_toolbarRoot_1x7ym_149";
-const toolbarModeSwitch = "_toolbarModeSwitch_1x7ym_170";
-const toolbarToggleItem = "_toolbarToggleItem_1x7ym_179";
-const toolbarGroupOfGroups = "_toolbarGroupOfGroups_1x7ym_189";
-const toolbarToggleSingleGroup = "_toolbarToggleSingleGroup_1x7ym_193";
-const toolbarButton = "_toolbarButton_1x7ym_207";
-const toolbarNodeKindSelectContainer = "_toolbarNodeKindSelectContainer_1x7ym_236";
-const toolbarButtonDropdownContainer = "_toolbarButtonDropdownContainer_1x7ym_237";
-const toolbarCodeBlockLanguageSelectContent = "_toolbarCodeBlockLanguageSelectContent_1x7ym_238";
-const toolbarNodeKindSelectTrigger = "_toolbarNodeKindSelectTrigger_1x7ym_252";
-const toolbarButtonSelectTrigger = "_toolbarButtonSelectTrigger_1x7ym_253";
-const toolbarCodeBlockLanguageSelectTrigger = "_toolbarCodeBlockLanguageSelectTrigger_1x7ym_286";
-const toolbarNodeKindSelectItem = "_toolbarNodeKindSelectItem_1x7ym_292";
-const toolbarNodeKindSelectDropdownArrow = "_toolbarNodeKindSelectDropdownArrow_1x7ym_315";
-const contentEditable = "_contentEditable_1x7ym_319";
-const sandpackWrapper = "_sandpackWrapper_1x7ym_327";
-const frontmatterWrapper = "_frontmatterWrapper_1x7ym_331";
-const frontmatterToggleButton = "_frontmatterToggleButton_1x7ym_341";
-const frontmatterEditorTable = "_frontmatterEditorTable_1x7ym_349";
-const iconButton = "_iconButton_1x7ym_367";
-const frontmatterInput = "_frontmatterInput_1x7ym_373";
-const primaryButton = "_primaryButton_1x7ym_388";
-const linkDialogEditForm = "_linkDialogEditForm_1x7ym_398";
-const linkDialogInputContainer = "_linkDialogInputContainer_1x7ym_404";
-const linkDialogInputWrapper = "_linkDialogInputWrapper_1x7ym_410";
-const linkDialogInput = "_linkDialogInput_1x7ym_404";
-const linkDialogAutocompleteContainer = "_linkDialogAutocompleteContainer_1x7ym_440";
-const linkDialogAnchor = "_linkDialogAnchor_1x7ym_485";
-const linkDialogPopoverContent = "_linkDialogPopoverContent_1x7ym_499";
-const tableColumnEditorPopoverContent = "_tableColumnEditorPopoverContent_1x7ym_499";
-const dialogContent = "_dialogContent_1x7ym_499";
-const linkDialogPreviewAnchor = "_linkDialogPreviewAnchor_1x7ym_513";
-const tooltipContent = "_tooltipContent_1x7ym_535";
-const actionButton = "_actionButton_1x7ym_547";
-const primaryActionButton = "_primaryActionButton_1x7ym_553";
-const tableEditor = "_tableEditor_1x7ym_562";
-const toolCell = "_toolCell_1x7ym_573";
-const tableColumnEditorTrigger = "_tableColumnEditorTrigger_1x7ym_590";
-const tableRowEditorTrigger = "_tableRowEditorTrigger_1x7ym_590";
-const addRowButton = "_addRowButton_1x7ym_590";
-const addColumnButton = "_addColumnButton_1x7ym_590";
-const tableColumnEditorToolbar = "_tableColumnEditorToolbar_1x7ym_624";
-const toggleGroupRoot = "_toggleGroupRoot_1x7ym_636";
-const tableToolsColumn = "_tableToolsColumn_1x7ym_653";
-const leftAlignedCell = "_leftAlignedCell_1x7ym_661";
-const rightAlignedCell = "_rightAlignedCell_1x7ym_665";
-const centeredCell = "_centeredCell_1x7ym_669";
-const dialogOverlay = "_dialogOverlay_1x7ym_697";
-const overlayShow = "_overlayShow_1x7ym_1";
-const contentShow = "_contentShow_1x7ym_1";
-const styles = {
-  editorRoot,
-  editorWrapper,
-  nestedListItem,
-  toolbarRoot,
-  toolbarModeSwitch,
-  toolbarToggleItem,
-  toolbarGroupOfGroups,
-  toolbarToggleSingleGroup,
-  toolbarButton,
-  toolbarNodeKindSelectContainer,
-  toolbarButtonDropdownContainer,
-  toolbarCodeBlockLanguageSelectContent,
-  toolbarNodeKindSelectTrigger,
-  toolbarButtonSelectTrigger,
-  toolbarCodeBlockLanguageSelectTrigger,
-  toolbarNodeKindSelectItem,
-  toolbarNodeKindSelectDropdownArrow,
-  contentEditable,
-  sandpackWrapper,
-  frontmatterWrapper,
-  frontmatterToggleButton,
-  frontmatterEditorTable,
-  iconButton,
-  frontmatterInput,
-  primaryButton,
-  linkDialogEditForm,
-  linkDialogInputContainer,
-  linkDialogInputWrapper,
-  linkDialogInput,
-  linkDialogAutocompleteContainer,
-  linkDialogAnchor,
-  linkDialogPopoverContent,
-  tableColumnEditorPopoverContent,
-  dialogContent,
-  linkDialogPreviewAnchor,
-  tooltipContent,
-  actionButton,
-  primaryActionButton,
-  tableEditor,
-  toolCell,
-  tableColumnEditorTrigger,
-  tableRowEditorTrigger,
-  addRowButton,
-  addColumnButton,
-  tableColumnEditorToolbar,
-  toggleGroupRoot,
-  tableToolsColumn,
-  leftAlignedCell,
-  rightAlignedCell,
-  centeredCell,
-  dialogOverlay,
-  overlayShow,
-  contentShow
-};
-console.log(styles);
 const theme = {
   text: {
     bold: styles$1.bold,
@@ -2731,6 +2622,8 @@ function getStateAsMarkdown(editor, exportParams) {
     });
   }).markdown;
 }
+const CAN_USE_DOM = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
+const IS_APPLE = CAN_USE_DOM && /Mac|iPod|iPhone|iPad/.test(navigator.platform);
 function getLinkNodeInSelection(selection) {
   const node = getSelectedNode(selection);
   const parent = node.getParent();
@@ -2804,7 +2697,7 @@ const [LinkDialogSystem, LinkDialogSystemType] = system(
       return editor.registerCommand(
         KEY_MODIFIER_COMMAND,
         (event) => {
-          if (event.key === "k" && event.metaKey) {
+          if (event.key === "k" && IS_APPLE ? event.metaKey : event.ctrlKey) {
             r.pub(openLinkEditDialog, true);
             return true;
           }
@@ -3039,6 +2932,114 @@ const SvgArrowDropDown$1 = (props) => /* @__PURE__ */ React.createElement("svg",
   maskType: "alpha"
 } }, /* @__PURE__ */ React.createElement("path", { d: "M0 0h24v24H0z" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "m12 15-5-5h10l-5 5Z" })));
 const DropDownIcon = SvgArrowDropDown$1;
+const editorRoot = "_editorRoot_15boy_47";
+const editorWrapper = "_editorWrapper_15boy_141";
+const nestedListItem = "_nestedListItem_15boy_145";
+const toolbarRoot = "_toolbarRoot_15boy_149";
+const toolbarModeSwitch = "_toolbarModeSwitch_15boy_170";
+const toolbarToggleItem = "_toolbarToggleItem_15boy_179";
+const toolbarGroupOfGroups = "_toolbarGroupOfGroups_15boy_189";
+const toolbarToggleSingleGroup = "_toolbarToggleSingleGroup_15boy_193";
+const toolbarButton = "_toolbarButton_15boy_207";
+const toolbarNodeKindSelectContainer = "_toolbarNodeKindSelectContainer_15boy_236";
+const toolbarButtonDropdownContainer = "_toolbarButtonDropdownContainer_15boy_237";
+const toolbarCodeBlockLanguageSelectContent = "_toolbarCodeBlockLanguageSelectContent_15boy_238";
+const toolbarNodeKindSelectTrigger = "_toolbarNodeKindSelectTrigger_15boy_252";
+const toolbarButtonSelectTrigger = "_toolbarButtonSelectTrigger_15boy_253";
+const toolbarCodeBlockLanguageSelectTrigger = "_toolbarCodeBlockLanguageSelectTrigger_15boy_286";
+const toolbarNodeKindSelectItem = "_toolbarNodeKindSelectItem_15boy_292";
+const toolbarNodeKindSelectDropdownArrow = "_toolbarNodeKindSelectDropdownArrow_15boy_315";
+const contentEditable = "_contentEditable_15boy_319";
+const sandpackWrapper = "_sandpackWrapper_15boy_327";
+const frontmatterWrapper = "_frontmatterWrapper_15boy_331";
+const frontmatterToggleButton = "_frontmatterToggleButton_15boy_341";
+const frontmatterEditorTable = "_frontmatterEditorTable_15boy_349";
+const iconButton = "_iconButton_15boy_367";
+const frontmatterInput = "_frontmatterInput_15boy_373";
+const primaryButton = "_primaryButton_15boy_388";
+const linkDialogEditForm = "_linkDialogEditForm_15boy_398";
+const linkDialogInputContainer = "_linkDialogInputContainer_15boy_404";
+const linkDialogInputWrapper = "_linkDialogInputWrapper_15boy_410";
+const linkDialogInput = "_linkDialogInput_15boy_404";
+const linkDialogAutocompleteContainer = "_linkDialogAutocompleteContainer_15boy_440";
+const linkDialogAnchor = "_linkDialogAnchor_15boy_485";
+const linkDialogPopoverContent = "_linkDialogPopoverContent_15boy_499";
+const tableColumnEditorPopoverContent = "_tableColumnEditorPopoverContent_15boy_499";
+const dialogContent = "_dialogContent_15boy_499";
+const linkDialogPreviewAnchor = "_linkDialogPreviewAnchor_15boy_513";
+const tooltipContent = "_tooltipContent_15boy_535";
+const actionButton = "_actionButton_15boy_547";
+const primaryActionButton = "_primaryActionButton_15boy_553";
+const tableEditor = "_tableEditor_15boy_562";
+const toolCell = "_toolCell_15boy_573";
+const tableColumnEditorTrigger = "_tableColumnEditorTrigger_15boy_590";
+const tableRowEditorTrigger = "_tableRowEditorTrigger_15boy_590";
+const addRowButton = "_addRowButton_15boy_590";
+const addColumnButton = "_addColumnButton_15boy_590";
+const tableColumnEditorToolbar = "_tableColumnEditorToolbar_15boy_624";
+const toggleGroupRoot = "_toggleGroupRoot_15boy_636";
+const tableToolsColumn = "_tableToolsColumn_15boy_653";
+const leftAlignedCell = "_leftAlignedCell_15boy_661";
+const rightAlignedCell = "_rightAlignedCell_15boy_665";
+const centeredCell = "_centeredCell_15boy_669";
+const dialogOverlay = "_dialogOverlay_15boy_697";
+const overlayShow = "_overlayShow_15boy_1";
+const contentShow = "_contentShow_15boy_1";
+const styles = {
+  editorRoot,
+  editorWrapper,
+  nestedListItem,
+  toolbarRoot,
+  toolbarModeSwitch,
+  toolbarToggleItem,
+  toolbarGroupOfGroups,
+  toolbarToggleSingleGroup,
+  toolbarButton,
+  toolbarNodeKindSelectContainer,
+  toolbarButtonDropdownContainer,
+  toolbarCodeBlockLanguageSelectContent,
+  toolbarNodeKindSelectTrigger,
+  toolbarButtonSelectTrigger,
+  toolbarCodeBlockLanguageSelectTrigger,
+  toolbarNodeKindSelectItem,
+  toolbarNodeKindSelectDropdownArrow,
+  contentEditable,
+  sandpackWrapper,
+  frontmatterWrapper,
+  frontmatterToggleButton,
+  frontmatterEditorTable,
+  iconButton,
+  frontmatterInput,
+  primaryButton,
+  linkDialogEditForm,
+  linkDialogInputContainer,
+  linkDialogInputWrapper,
+  linkDialogInput,
+  linkDialogAutocompleteContainer,
+  linkDialogAnchor,
+  linkDialogPopoverContent,
+  tableColumnEditorPopoverContent,
+  dialogContent,
+  linkDialogPreviewAnchor,
+  tooltipContent,
+  actionButton,
+  primaryActionButton,
+  tableEditor,
+  toolCell,
+  tableColumnEditorTrigger,
+  tableRowEditorTrigger,
+  addRowButton,
+  addColumnButton,
+  tableColumnEditorToolbar,
+  toggleGroupRoot,
+  tableToolsColumn,
+  leftAlignedCell,
+  rightAlignedCell,
+  centeredCell,
+  dialogOverlay,
+  overlayShow,
+  contentShow
+};
 createCommand();
 const MAX_SUGGESTIONS$1 = 20;
 function LinkEditForm({ initialUrl, onSubmit, onCancel, linkAutocompleteSuggestions }) {
@@ -3647,15 +3648,15 @@ const TableEditor = ({ mdastNode, parentEditor, lexicalTable }) => {
   const addRowToBottom = React__default.useCallback(() => {
     parentEditor.update(() => {
       lexicalTable.addRowToBottom();
+      setActiveCell([0, lexicalTable.getRowCount()]);
     });
-    setActiveCellWithBoundaries([0, lexicalTable.getRowCount()]);
-  }, [parentEditor, lexicalTable, setActiveCellWithBoundaries]);
+  }, [parentEditor, lexicalTable]);
   const addColumnToRight = React__default.useCallback(() => {
     parentEditor.update(() => {
       lexicalTable.addColumnToRight();
+      setActiveCell([lexicalTable.getColCount(), 0]);
     });
-    setActiveCellWithBoundaries([lexicalTable.getColCount(), 0]);
-  }, [parentEditor, lexicalTable, setActiveCellWithBoundaries]);
+  }, [parentEditor, lexicalTable]);
   const [highlightedCoordinates, setHighlightedCoordinates] = React__default.useState([-1, -1]);
   const onTableMouseOver = React__default.useCallback((e) => {
     let tableCell = e.target;
@@ -3951,13 +3952,17 @@ const SourceEditor = () => {
     }
   )));
 };
+const InstantTooltip = React__default.forwardRef(({ title, children }, ref) => {
+  const [editorRootElementRef] = useEmitterValues("editorRootElementRef");
+  return /* @__PURE__ */ React__default.createElement(Tooltip.Provider, { delayDuration: 100 }, /* @__PURE__ */ React__default.createElement(Tooltip.Root, null, /* @__PURE__ */ React__default.createElement(Tooltip.Trigger, { ref, asChild: true }, children), /* @__PURE__ */ React__default.createElement(Tooltip.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(Tooltip.Content, { className: classNames(styles.tooltipContent), sideOffset: 10 }, title))));
+});
 const SelectItem = React__default.forwardRef(
   ({ children, className, ...props }, forwardedRef) => {
     return /* @__PURE__ */ React__default.createElement(Select.Item, { ...props, ref: forwardedRef, className: classNames(className, styles.toolbarNodeKindSelectItem) }, /* @__PURE__ */ React__default.createElement(Select.ItemText, null, children));
   }
 );
-const SelectTrigger = ({ placeholder, className }) => {
-  return /* @__PURE__ */ React__default.createElement(Select.Trigger, { "aria-label": placeholder, className: classNames(styles.toolbarNodeKindSelectTrigger, className) }, /* @__PURE__ */ React__default.createElement(Select.Value, { placeholder }), /* @__PURE__ */ React__default.createElement(Select.Icon, { className: styles.toolbarNodeKindSelectDropdownArrow }, /* @__PURE__ */ React__default.createElement(DropDownIcon, null)));
+const SelectTrigger = ({ title, placeholder, className }) => {
+  return /* @__PURE__ */ React__default.createElement(InstantTooltip, { title }, /* @__PURE__ */ React__default.createElement(Select.Trigger, { "aria-label": placeholder, className: classNames(styles.toolbarNodeKindSelectTrigger, className) }, /* @__PURE__ */ React__default.createElement(Select.Value, { placeholder }), /* @__PURE__ */ React__default.createElement(Select.Icon, { className: styles.toolbarNodeKindSelectDropdownArrow }, /* @__PURE__ */ React__default.createElement(DropDownIcon, null))));
 };
 const SelectContent = ({
   children,
@@ -3971,7 +3976,7 @@ const SelectButtonTrigger = ({
   title,
   className
 }) => {
-  return /* @__PURE__ */ React__default.createElement(Select.Trigger, { className: classNames(styles.toolbarButtonSelectTrigger, className), title }, children, /* @__PURE__ */ React__default.createElement(Select.Icon, { className: styles.toolbarNodeKindSelectDropdownArrow }, /* @__PURE__ */ React__default.createElement(DropDownIcon, null)));
+  return /* @__PURE__ */ React__default.createElement(InstantTooltip, { title }, /* @__PURE__ */ React__default.createElement(Select.Trigger, { className: classNames(styles.toolbarButtonSelectTrigger, className) }, children, /* @__PURE__ */ React__default.createElement(Select.Icon, { className: styles.toolbarNodeKindSelectDropdownArrow }, /* @__PURE__ */ React__default.createElement(DropDownIcon, null))));
 };
 function CodeBlockLanguageSelect() {
   const [activeEditorType, activeEditor, codeBlockLanguages] = useEmitterValues("activeEditorType", "activeEditor", "codeBlockLanguages");
@@ -3997,7 +4002,7 @@ function CodeBlockLanguageSelect() {
         });
       }
     },
-    /* @__PURE__ */ React__default.createElement(SelectTrigger, { placeholder: "Language", className: styles.toolbarCodeBlockLanguageSelectTrigger }),
+    /* @__PURE__ */ React__default.createElement(SelectTrigger, { title: "Change code block language", placeholder: "Language", className: styles.toolbarCodeBlockLanguageSelectTrigger }),
     /* @__PURE__ */ React__default.createElement(SelectContent, { className: styles.toolbarCodeBlockLanguageSelectContent }, Object.entries(codeBlockLanguages).map(([value, label]) => /* @__PURE__ */ React__default.createElement(SelectItem, { key: value, value }, label)))
   );
 }
@@ -4068,7 +4073,7 @@ const TableIcon = SvgTable;
 const BlockTypeSelect = () => {
   const [currentBlockType] = useEmitterValues("currentBlockType");
   const applyBlockType = usePublisher("applyBlockType");
-  return /* @__PURE__ */ React__default.createElement(Select.Root, { value: currentBlockType || "", onValueChange: applyBlockType }, /* @__PURE__ */ React__default.createElement(SelectTrigger, { placeholder: "Block type" }), /* @__PURE__ */ React__default.createElement(SelectContent, null, /* @__PURE__ */ React__default.createElement(SelectItem, { value: "paragraph" }, "Paragraph"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "quote" }, "Quote"), /* @__PURE__ */ React__default.createElement(Select.Separator, null), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "h1" }, "Heading 1"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "h2" }, "Heading 2"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "h3" }, "Heading 3"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "h4" }, "Heading 4"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "h5" }, "Heading 5"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "h6" }, "Heading 6"), /* @__PURE__ */ React__default.createElement(Select.Separator, null), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "note" }, "Note"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "tip" }, "Tip"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "info" }, "Info"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "caution" }, "Caution"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "danger" }, "Danger")));
+  return /* @__PURE__ */ React__default.createElement(Select.Root, { value: currentBlockType || "", onValueChange: applyBlockType }, /* @__PURE__ */ React__default.createElement(SelectTrigger, { title: "Select block type", placeholder: "Block type" }), /* @__PURE__ */ React__default.createElement(SelectContent, null, /* @__PURE__ */ React__default.createElement(SelectItem, { value: "paragraph" }, "Paragraph"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "quote" }, "Quote"), /* @__PURE__ */ React__default.createElement(Select.Separator, null), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "h1" }, "Heading 1"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "h2" }, "Heading 2"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "h3" }, "Heading 3"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "h4" }, "Heading 4"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "h5" }, "Heading 5"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "h6" }, "Heading 6"), /* @__PURE__ */ React__default.createElement(Select.Separator, null), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "note" }, "Note"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "tip" }, "Tip"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "info" }, "Info"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "caution" }, "Caution"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "danger" }, "Danger")));
 };
 const SvgAddPhoto = (props) => /* @__PURE__ */ React.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("mask", { id: "mask0_343_38", style: {
   maskType: "alpha"
@@ -4085,7 +4090,7 @@ const ImageButton = React__default.forwardRef((props, forwardedRef) => {
     },
     [insertImage]
   );
-  return /* @__PURE__ */ React__default.createElement(Dialog.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React__default.createElement(Dialog.Trigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { className: styles.toolbarButton, ...props, ref: forwardedRef }, /* @__PURE__ */ React__default.createElement(AddPhotoIcon, null))), /* @__PURE__ */ React__default.createElement(Dialog.Portal, { container: editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(Dialog.Overlay, { className: styles.dialogOverlay }), /* @__PURE__ */ React__default.createElement(Dialog.Content, { className: styles.dialogContent }, /* @__PURE__ */ React__default.createElement(ImageForm, { initialUrl: "", onSubmit, imageAutocompleteSuggestions }))));
+  return /* @__PURE__ */ React__default.createElement(Dialog.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React__default.createElement(Dialog.Trigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(InstantTooltip, { title: "Insert image" }, /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { className: styles.toolbarButton, ...props, ref: forwardedRef }, /* @__PURE__ */ React__default.createElement(AddPhotoIcon, null)))), /* @__PURE__ */ React__default.createElement(Dialog.Portal, { container: editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(Dialog.Overlay, { className: styles.dialogOverlay }), /* @__PURE__ */ React__default.createElement(Dialog.Content, { className: styles.dialogContent }, /* @__PURE__ */ React__default.createElement(ImageForm, { initialUrl: "", onSubmit, imageAutocompleteSuggestions }))));
 });
 createCommand();
 const MAX_SUGGESTIONS = 20;
@@ -4161,13 +4166,15 @@ const ActionButton = React__default.forwardRef(({ className, ...props }, ref) =>
   return /* @__PURE__ */ React__default.createElement("button", { className: classNames(styles.actionButton, className), ref, ...props });
 });
 const ToggleItem = React__default.forwardRef(
-  ({ className: passedClassName, ...props }, forwardedRef) => {
-    return /* @__PURE__ */ React__default.createElement(RadixToolbar.ToggleItem, { className: classNames(passedClassName, styles.toolbarToggleItem), ...props, ref: forwardedRef });
+  ({ title, className: passedClassName, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ React__default.createElement(InstantTooltip, { title }, /* @__PURE__ */ React__default.createElement(RadixToolbar.ToggleItem, { className: classNames(passedClassName, styles.toolbarToggleItem), ...props, ref: forwardedRef }));
+  }
+);
+const ToolbarButton = React__default.forwardRef(
+  ({ title, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ React__default.createElement(InstantTooltip, { title }, /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { className: styles.toolbarButton, ...props, ref: forwardedRef }));
   }
 );
-const ToolbarButton = React__default.forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { className: styles.toolbarButton, ...props, ref: forwardedRef });
-});
 const ToggleSingleGroup = React__default.forwardRef(
   ({ children, className, ...props }, forwardedRef) => {
     return /* @__PURE__ */ React__default.createElement(
@@ -4182,8 +4189,8 @@ const ToggleSingleGroup = React__default.forwardRef(
     );
   }
 );
-const ToggleSingleGroupWithItem = React__default.forwardRef(({ on, children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React__default.createElement(ToggleSingleGroup, { ...props, value: on ? "on" : "off", ref: forwardedRef }, /* @__PURE__ */ React__default.createElement(ToggleItem, { value: "on" }, children));
+const ToggleSingleGroupWithItem = React__default.forwardRef(({ on, title, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React__default.createElement(ToggleSingleGroup, { ...props, value: on ? "on" : "off", ref: forwardedRef }, /* @__PURE__ */ React__default.createElement(ToggleItem, { title, value: "on" }, children));
 });
 const GroupGroup = ({ children }) => {
   return /* @__PURE__ */ React__default.createElement("div", { className: styles.toolbarGroupOfGroups }, children);
@@ -4192,19 +4199,18 @@ const ToolbarSeparator = RadixToolbar.ToolbarSeparator;
 const BoldItalicUnderlineButtons = () => {
   const [currentFormat] = useEmitterValues("currentFormat", "currentListType");
   const applyFormat = usePublisher("applyFormat");
-  return /* @__PURE__ */ React__default.createElement(GroupGroup, null, /* @__PURE__ */ React__default.createElement(ToggleSingleGroupWithItem, { "aria-label": "Bold", on: (currentFormat & IS_BOLD) !== 0, onValueChange: applyFormat.bind(null, "bold") }, /* @__PURE__ */ React__default.createElement(BoldIcon, null)), /* @__PURE__ */ React__default.createElement(
-    ToggleSingleGroupWithItem,
-    {
-      "aria-label": "Italic",
-      on: (currentFormat & IS_ITALIC) !== 0,
-      onValueChange: applyFormat.bind(null, "italic")
-    },
-    /* @__PURE__ */ React__default.createElement(ItalicIcon, null)
-  ), /* @__PURE__ */ React__default.createElement(
+  const boldIsOn = (currentFormat & IS_BOLD) !== 0;
+  const italicIsOn = (currentFormat & IS_ITALIC) !== 0;
+  const underlineIsOn = (currentFormat & IS_UNDERLINE) !== 0;
+  const boldTitle = boldIsOn ? "Remove bold" : "Bold";
+  const italicTitle = italicIsOn ? "Remove italic" : "Italic";
+  const underlineTitle = underlineIsOn ? "Remove underline" : "Underline";
+  return /* @__PURE__ */ React__default.createElement(GroupGroup, null, /* @__PURE__ */ React__default.createElement(ToggleSingleGroupWithItem, { title: boldTitle, "aria-label": "Bold", on: boldIsOn, onValueChange: applyFormat.bind(null, "bold") }, /* @__PURE__ */ React__default.createElement(BoldIcon, null)), /* @__PURE__ */ React__default.createElement(ToggleSingleGroupWithItem, { title: italicTitle, "aria-label": "Italic", on: italicIsOn, onValueChange: applyFormat.bind(null, "italic") }, /* @__PURE__ */ React__default.createElement(ItalicIcon, null)), /* @__PURE__ */ React__default.createElement(
     ToggleSingleGroupWithItem,
     {
       "aria-label": "Underline",
-      on: (currentFormat & IS_UNDERLINE) !== 0,
+      title: underlineTitle,
+      on: underlineIsOn,
       onValueChange: applyFormat.bind(null, "underline")
     },
     /* @__PURE__ */ React__default.createElement(UnderlinedIcon, { style: { transform: "translateY(2px)" } })
@@ -4213,15 +4219,9 @@ const BoldItalicUnderlineButtons = () => {
 const CodeFormattingButton = () => {
   const [currentFormat] = useEmitterValues("currentFormat", "currentListType");
   const applyFormat = usePublisher("applyFormat");
-  return /* @__PURE__ */ React__default.createElement(GroupGroup, null, /* @__PURE__ */ React__default.createElement(
-    ToggleSingleGroupWithItem,
-    {
-      "aria-label": "Inline code",
-      on: (currentFormat & IS_CODE) !== 0,
-      onValueChange: applyFormat.bind(null, "code")
-    },
-    /* @__PURE__ */ React__default.createElement(CodeIcon, null)
-  ));
+  const codeIsOn = (currentFormat & IS_CODE) !== 0;
+  const codeTitle = codeIsOn ? "Remove inline code" : "Inline code";
+  return /* @__PURE__ */ React__default.createElement(GroupGroup, null, /* @__PURE__ */ React__default.createElement(ToggleSingleGroupWithItem, { title: codeTitle, "aria-label": "Inline code", on: codeIsOn, onValueChange: applyFormat.bind(null, "code") }, /* @__PURE__ */ React__default.createElement(CodeIcon, null)));
 };
 const ListButtons = () => {
   const [currentListType] = useEmitterValues("currentListType");
@@ -4234,34 +4234,34 @@ const ListButtons = () => {
       value: currentListType || "",
       onFocus: (e) => e.preventDefault()
     },
-    /* @__PURE__ */ React__default.createElement(ToggleItem, { value: "bullet", "aria-label": "Bulleted list" }, /* @__PURE__ */ React__default.createElement(BulletedListIcon, null)),
-    /* @__PURE__ */ React__default.createElement(ToggleItem, { value: "number", "aria-label": "Numbered list" }, /* @__PURE__ */ React__default.createElement(NumberedListIcon, null))
+    /* @__PURE__ */ React__default.createElement(ToggleItem, { title: "Bulleted list", value: "bullet", "aria-label": "Bulleted list" }, /* @__PURE__ */ React__default.createElement(BulletedListIcon, null)),
+    /* @__PURE__ */ React__default.createElement(ToggleItem, { title: "Numbered list", value: "number", "aria-label": "Numbered list" }, /* @__PURE__ */ React__default.createElement(NumberedListIcon, null))
   ));
 };
 const LinkButton = () => {
   const openLinkEditDialog = usePublisher("openLinkEditDialog");
-  return /* @__PURE__ */ React__default.createElement(ToolbarButton, { onClick: openLinkEditDialog.bind(null, true) }, /* @__PURE__ */ React__default.createElement(LinkIcon, null));
+  return /* @__PURE__ */ React__default.createElement(ToolbarButton, { title: "Create link", onClick: openLinkEditDialog.bind(null, true) }, /* @__PURE__ */ React__default.createElement(LinkIcon, null));
 };
 const TableButton = () => {
   const insertTable = usePublisher("insertTable");
-  return /* @__PURE__ */ React__default.createElement(ToolbarButton, { onClick: insertTable.bind(null, true) }, /* @__PURE__ */ React__default.createElement(TableIcon, null));
+  return /* @__PURE__ */ React__default.createElement(ToolbarButton, { title: "Insert table", onClick: insertTable.bind(null, true) }, /* @__PURE__ */ React__default.createElement(TableIcon, null));
 };
 const CodeBlockButton = () => {
   const insertCodeBlock = usePublisher("insertCodeBlock");
-  return /* @__PURE__ */ React__default.createElement(ToolbarButton, { onClick: insertCodeBlock.bind(null, true) }, /* @__PURE__ */ React__default.createElement(FrameSourceIcon, null));
+  return /* @__PURE__ */ React__default.createElement(ToolbarButton, { title: "Insert code block", onClick: insertCodeBlock.bind(null, true) }, /* @__PURE__ */ React__default.createElement(FrameSourceIcon, null));
 };
 const HorizontalRuleButton = () => {
   const insertHorizontalRule = usePublisher("insertHorizontalRule");
-  return /* @__PURE__ */ React__default.createElement(ToolbarButton, { onClick: insertHorizontalRule.bind(null, true) }, /* @__PURE__ */ React__default.createElement(HorizontalRuleIcon, null));
+  return /* @__PURE__ */ React__default.createElement(ToolbarButton, { title: "Insert horizontal rule", onClick: insertHorizontalRule.bind(null, true) }, /* @__PURE__ */ React__default.createElement(HorizontalRuleIcon, null));
 };
 const SandpackButton = () => {
   const insertSandpack = usePublisher("insertSandpack");
   const [sandpackConfig] = useEmitterValues("sandpackConfig");
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, sandpackConfig.presets.length === 1 ? /* @__PURE__ */ React__default.createElement(ToolbarButton, { onClick: insertSandpack.bind(null, "") }, /* @__PURE__ */ React__default.createElement(LiveCodeIcon, null)) : /* @__PURE__ */ React__default.createElement(Select.Root, { value: "", onValueChange: insertSandpack }, /* @__PURE__ */ React__default.createElement(SelectButtonTrigger, { title: "Insert live code snippet" }, /* @__PURE__ */ React__default.createElement(LiveCodeIcon, null)), /* @__PURE__ */ React__default.createElement(SelectContent, { className: styles.toolbarButtonDropdownContainer }, sandpackConfig.presets.map((preset) => /* @__PURE__ */ React__default.createElement(SelectItem, { key: preset.name, value: preset.meta }, preset.label)))));
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, sandpackConfig.presets.length === 1 ? /* @__PURE__ */ React__default.createElement(ToolbarButton, { title: "Insert live code block", onClick: insertSandpack.bind(null, "") }, /* @__PURE__ */ React__default.createElement(LiveCodeIcon, null)) : /* @__PURE__ */ React__default.createElement(Select.Root, { value: "", onValueChange: insertSandpack }, /* @__PURE__ */ React__default.createElement(SelectButtonTrigger, { title: "Insert live code snippet" }, /* @__PURE__ */ React__default.createElement(LiveCodeIcon, null)), /* @__PURE__ */ React__default.createElement(SelectContent, { className: styles.toolbarButtonDropdownContainer }, sandpackConfig.presets.map((preset) => /* @__PURE__ */ React__default.createElement(SelectItem, { key: preset.name, value: preset.meta }, preset.label)))));
 };
 const FrontmatterButton = () => {
   const insertFrontmatter = usePublisher("insertFrontmatter");
-  return /* @__PURE__ */ React__default.createElement(ToolbarButton, { onClick: insertFrontmatter.bind(null, true) }, /* @__PURE__ */ React__default.createElement(FrontmatterIcon, null));
+  return /* @__PURE__ */ React__default.createElement(ToolbarButton, { title: "Insert frontmatter editor", onClick: insertFrontmatter.bind(null, true) }, /* @__PURE__ */ React__default.createElement(FrontmatterIcon, null));
 };
 const ViewModeSwitch = () => {
   const [viewMode] = useEmitterValues("viewMode", "activeEditorType");
@@ -4278,9 +4278,10 @@ const ViewModeSwitch = () => {
       value: viewMode,
       className: styles.toolbarModeSwitch
     },
-    /* @__PURE__ */ React__default.createElement(ToggleItem, { value: "editor", "aria-label": "Rich text", title: "Rich text" }, /* @__PURE__ */ React__default.createElement(RichTextIcon, null)),
-    /* @__PURE__ */ React__default.createElement(ToggleItem, { value: "diff", "aria-label": "View diff", title: "Diff" }, /* @__PURE__ */ React__default.createElement(DifferenceIcon, null)),
-    /* @__PURE__ */ React__default.createElement(ToggleItem, { value: "markdown", "aria-label": "View Markdown", title: "Markdown" }, /* @__PURE__ */ React__default.createElement(MarkdownIcon, null))
+    /* @__PURE__ */ React__default.createElement(RichTextIcon, null),
+    /* @__PURE__ */ React__default.createElement(ToggleItem, { value: "editor", "aria-label": "Rich text", title: "Rich text mode" }),
+    /* @__PURE__ */ React__default.createElement(ToggleItem, { value: "diff", "aria-label": "View diff", title: "Diff mode" }, /* @__PURE__ */ React__default.createElement(DifferenceIcon, null)),
+    /* @__PURE__ */ React__default.createElement(ToggleItem, { value: "markdown", "aria-label": "View Markdown", title: "Markdown source mode" }, /* @__PURE__ */ React__default.createElement(MarkdownIcon, null))
   );
 };
 const ToolbarComponents = {
@@ -4310,6 +4311,7 @@ const CodeBlockButtonSet = () => {
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(CodeBlockLanguageSelect, null), /* @__PURE__ */ React__default.createElement(
     ToolbarButton,
     {
+      title: "Remove code block",
       onClick: () => {
         activeEditor.update(() => {
           const node = $getNodeByKey(activeEditorType.nodeKey);
@@ -4326,6 +4328,7 @@ const SandpackButtonSet = () => {
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
     ToolbarButton,
     {
+      title: "Remove live code block",
       onClick: () => {
         activeEditor.update(() => {
           const node = $getNodeByKey(activeEditorType.nodeKey);