@mdxeditor/editor 0.2.0 → 0.4.0

package/dist/index.d.ts

@@ -274,23 +274,6 @@ export declare type DefaultMdxOptionValues = {
  */
 export declare const defaultMdxOptionValues: DefaultMdxOptionValues;
 
-declare interface ExportLexicalTreeOptions {
-    root: RootNode;
-    visitors: LexicalVisitor[];
-    jsxComponentDescriptors: JsxComponentDescriptor[];
-}
-
-declare interface ExportMarkdownFromLexicalOptions extends ExportLexicalTreeOptions {
-    /**
-     * the markdown extensions to use
-     */
-    toMarkdownExtensions: Array<ToMarkdownExtension>;
-    /**
-     * The options to pass to `toMarkdown`
-     */
-    toMarkdownOptions: ToMarkdownOptions;
-}
-
 declare type ExtendedEditorConfig = EditorConfig & {
     theme: EditorConfig['theme'] & {
         nodeDecoratorComponents: NodeDecoratorComponents;
@@ -435,6 +418,24 @@ export declare interface JsxPropertyDescriptor {
     required?: boolean;
 }
 
+/**
+ * Configures how the lexical tree is converted to a mdast tree and then to markdown.
+ */
+export declare interface LexicalConvertOptions {
+    /**
+     * The visitors to use when processing the lexical tree
+     */
+    visitors?: LexicalVisitor[];
+    /**
+     * the markdown extensions to use
+     */
+    toMarkdownExtensions?: Array<ToMarkdownExtension>;
+    /**
+     * The options to pass to `toMarkdown`
+     */
+    toMarkdownOptions?: ToMarkdownOptions;
+}
+
 /**
  * Implement this interface in order to process mdast node(s) into a lexical tree.
  * This is part of the process that converts the editor contents to markdown.
@@ -661,13 +662,14 @@ export declare interface MDXEditorProps {
      */
     markdownParseOptions?: Partial<MarkdownParseOptions>;
     /**
-     * The {@link https://lexical.dev/ Lexical nodes} used by the editor.
+     * The {@link https://lexical.dev/ | Lexical nodes} used by the editor.
      */
     lexicalNodes?: Klass<LexicalNode>[];
     /**
      * The options used when converting the lexical tree to markdown.
+     * @see the {@link LexicalConvertOptions} interface for more details.
      */
-    lexicalConvertOptions?: Partial<ExportMarkdownFromLexicalOptions>;
+    lexicalConvertOptions?: LexicalConvertOptions;
     /**
      * The supported code block languages.
      */
@@ -683,15 +685,15 @@ declare interface NodeDecoratorComponents {
 }
 
 /**
- * The configuration for the available sandpack presets
+ * The configuration for the available sandpack presets.
  */
 export declare interface SandpackConfig {
     /**
-     * The name of the default preset that will be used if no meta (other than live) is set
+     * The name of the default preset that will be used if no meta (other than live) is set.
      */
     defaultPreset: string;
     /**
-     * The list of sandpack presets that can be used
+     * The list of sandpack presets that can be used.
      */
     presets: Array<SandpackPreset>;
 }
@@ -737,11 +739,11 @@ export declare class SandpackNode extends DecoratorNode<JSX.Element> {
  */
 export declare interface SandpackPreset {
     /**
-     * The name of the preset - use this to reference the preset from the defaultPreset field
+     * The name of the preset - use this to reference the preset from the defaultPreset field.
      */
     name: string;
     /**
-     * The label of th preset, displayed in the sandpack button dropdown
+     * The label of the preset, displayed in the sandpack button dropdown.
      */
     label: string;
     /**
@@ -757,11 +759,11 @@ export declare interface SandpackPreset {
      */
     sandpackTheme: SandpackProviderProps['theme'];
     /**
-     * The name of the file that will be created in the sandbox. e.g. "/App.js"
+     * The name of the file that will be created in the sandbox. e.g. "/App.js".
      */
     snippetFileName: string;
     /**
-     * The dependencies that will be added to the sandbox, just like in package.json
+     * The dependencies that will be added to the sandbox, just like in package.json.
      */
     dependencies?: Record<string, string>;
     /**
@@ -770,7 +772,7 @@ export declare interface SandpackPreset {
      */
     files?: Record<string, string>;
     /**
-     * The language used in the editable snippet. e.g. "jsx", "tsx", etc
+     * The language used in the editable snippet. e.g. "jsx", "tsx", etc.
      */
     snippetLanguage?: string;
     /**
@@ -907,12 +909,17 @@ export declare const ToolbarComponents: {
     ListButtons: React_2.FC<{}>;
     SandpackButton: React_2.FC<{}>;
     TableButton: React_2.FC<{}>;
-    ToggleItem: React_2.ForwardRefExoticComponent<RadixToolbar.ToolbarToggleItemProps & React_2.RefAttributes<HTMLButtonElement>>;
+    ToggleItem: React_2.ForwardRefExoticComponent<RadixToolbar.ToolbarToggleItemProps & {
+        title: string;
+    } & React_2.RefAttributes<HTMLButtonElement>>;
     ToggleSingleGroup: React_2.ForwardRefExoticComponent<Omit<RadixToolbar.ToolbarToggleGroupSingleProps, "type"> & React_2.RefAttributes<HTMLDivElement>>;
     ToggleSingleGroupWithItem: React_2.ForwardRefExoticComponent<Omit<RadixToolbar.ToolbarToggleGroupSingleProps, "type"> & {
         on: boolean;
+        title: string;
     } & React_2.RefAttributes<HTMLDivElement>>;
-    ToolbarButton: React_2.ForwardRefExoticComponent<RadixToolbar.ToolbarButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
+    ToolbarButton: React_2.ForwardRefExoticComponent<RadixToolbar.ToolbarButtonProps & {
+        title: string;
+    } & React_2.RefAttributes<HTMLButtonElement>>;
     ToolbarSeparator: React_2.ForwardRefExoticComponent<RadixToolbar.ToolbarSeparatorProps & React_2.RefAttributes<HTMLDivElement>>;
     ImageButton: React_2.ForwardRefExoticComponent<RadixToolbar.ToolbarButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
 };

package/dist/index.js

@@ -17,17 +17,16 @@ import { ElementNode, $createParagraphNode, $applyNodeReplacement, DecoratorNode
 import { AdmonitionKind } from "lexical";
 import * as React from "react";
 import React__default, { createContext, forwardRef, useMemo, useImperativeHandle, createElement, useCallback, useContext, useState, useEffect } from "react";
-import { directiveToMarkdown, directiveFromMarkdown } from "mdast-util-directive";
-import { frontmatterToMarkdown, frontmatterFromMarkdown } from "mdast-util-frontmatter";
-import { gfmTableToMarkdown, gfmTableFromMarkdown } from "mdast-util-gfm-table";
-import { mdxToMarkdown, mdxFromMarkdown } from "mdast-util-mdx";
-import { toMarkdown } from "mdast-util-to-markdown";
 import { CodeNode } from "@lexical/code";
 import { $isLinkNode, LinkNode, $createLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
 import { $isListNode, $isListItemNode, ListNode, ListItemNode, $createListNode, $createListItemNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND, $getListDepth } from "@lexical/list";
 import { $isHorizontalRuleNode, HorizontalRuleNode, $createHorizontalRuleNode, INSERT_HORIZONTAL_RULE_COMMAND } from "@lexical/react/LexicalHorizontalRuleNode";
 import { $isHeadingNode, $isQuoteNode, HeadingNode, QuoteNode, $createHeadingNode, $createQuoteNode } from "@lexical/rich-text";
+import { directiveToMarkdown, directiveFromMarkdown } from "mdast-util-directive";
 import { fromMarkdown } from "mdast-util-from-markdown";
+import { frontmatterToMarkdown, frontmatterFromMarkdown } from "mdast-util-frontmatter";
+import { gfmTableToMarkdown, gfmTableFromMarkdown } from "mdast-util-gfm-table";
+import { mdxToMarkdown, mdxFromMarkdown } from "mdast-util-mdx";
 import { directive } from "micromark-extension-directive";
 import { frontmatter } from "micromark-extension-frontmatter";
 import { gfmTable } from "micromark-extension-gfm-table";
@@ -36,6 +35,7 @@ import { addClassNamesToElement, $insertNodeToNearestRoot, $findMatchingParent,
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $setBlocksType, $isAtNodeEnd } from "@lexical/selection";
 import { createEmptyHistoryState, HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { toMarkdown } from "mdast-util-to-markdown";
 import * as RadixPopover from "@radix-ui/react-popover";
 import * as Tooltip from "@radix-ui/react-tooltip";
 import { useCombobox } from "downshift";
@@ -391,21 +391,23 @@ function $createImageNode(options) {
 function $isImageNode(node) {
   return node instanceof ImageNode;
 }
-const bold = "_bold_1xdbx_1";
-const italic = "_italic_1xdbx_5";
-const underline = "_underline_1xdbx_9";
-const strikethrough = "_strikethrough_1xdbx_25";
-const underlineStrikethrough = "_underlineStrikethrough_1xdbx_29";
-const subscript = "_subscript_1xdbx_33";
-const superscript = "_superscript_1xdbx_38";
-const code = "_code_1xdbx_43";
-const nestedListItem$1 = "_nestedListItem_1xdbx_50";
-const admonitionDanger = "_admonitionDanger_1xdbx_54";
-const admonitionInfo = "_admonitionInfo_1xdbx_54";
-const admonitionNote = "_admonitionNote_1xdbx_54";
-const admonitionTip = "_admonitionTip_1xdbx_54";
-const admonitionCaution = "_admonitionCaution_1xdbx_54";
+const darkTheme = "_dark-theme_13nbk_1";
+const bold = "_bold_13nbk_10";
+const italic = "_italic_13nbk_14";
+const underline = "_underline_13nbk_18";
+const strikethrough = "_strikethrough_13nbk_34";
+const underlineStrikethrough = "_underlineStrikethrough_13nbk_38";
+const subscript = "_subscript_13nbk_42";
+const superscript = "_superscript_13nbk_47";
+const code = "_code_13nbk_52";
+const nestedListItem$1 = "_nestedListItem_13nbk_59";
+const admonitionDanger = "_admonitionDanger_13nbk_63";
+const admonitionInfo = "_admonitionInfo_13nbk_63";
+const admonitionNote = "_admonitionNote_13nbk_63";
+const admonitionTip = "_admonitionTip_13nbk_63";
+const admonitionCaution = "_admonitionCaution_13nbk_63";
 const styles$1 = {
+  darkTheme,
   bold,
   italic,
   underline,
@@ -786,7 +788,7 @@ class TableNode extends DecoratorNode {
       const row = table.children[rowIndex];
       const cells = row.children;
       const cellsClone = Array.from(cells);
-      const rowClone = { ...row, hildren: cellsClone };
+      const rowClone = { ...row, children: cellsClone };
       cellsClone.splice(colIndex, 1);
       table.children[rowIndex] = rowClone;
     }
@@ -912,10 +914,13 @@ const LexicalQuoteVisitor = {
 };
 const AdmonitionVisitor = {
   testLexicalNode: $isAdmonitionNode,
-  visitLexicalNode: ({ lexicalNode, actions }) => {
-    actions.addAndStepInto("containerDirective", {
-      name: lexicalNode.getKind()
+  visitLexicalNode: ({ mdastParent, lexicalNode, actions }) => {
+    const admonition = actions.appendToParent(mdastParent, {
+      type: "containerDirective",
+      name: lexicalNode.getKind(),
+      children: [{ type: "paragraph", children: [] }]
     });
+    actions.visitChildren(lexicalNode, admonition.children[0]);
   }
 };
 const SandpackNodeVisitor = {
@@ -2617,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();
@@ -2690,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;
           }
@@ -2925,59 +2932,59 @@ 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_1bxeh_43";
-const editorWrapper = "_editorWrapper_1bxeh_121";
-const nestedListItem = "_nestedListItem_1bxeh_125";
-const toolbarRoot = "_toolbarRoot_1bxeh_129";
-const toolbarModeSwitch = "_toolbarModeSwitch_1bxeh_150";
-const toolbarToggleItem = "_toolbarToggleItem_1bxeh_159";
-const toolbarGroupOfGroups = "_toolbarGroupOfGroups_1bxeh_169";
-const toolbarToggleSingleGroup = "_toolbarToggleSingleGroup_1bxeh_173";
-const toolbarButton = "_toolbarButton_1bxeh_187";
-const toolbarNodeKindSelectContainer = "_toolbarNodeKindSelectContainer_1bxeh_216";
-const toolbarButtonDropdownContainer = "_toolbarButtonDropdownContainer_1bxeh_217";
-const toolbarCodeBlockLanguageSelectContent = "_toolbarCodeBlockLanguageSelectContent_1bxeh_218";
-const toolbarNodeKindSelectTrigger = "_toolbarNodeKindSelectTrigger_1bxeh_232";
-const toolbarButtonSelectTrigger = "_toolbarButtonSelectTrigger_1bxeh_233";
-const toolbarCodeBlockLanguageSelectTrigger = "_toolbarCodeBlockLanguageSelectTrigger_1bxeh_266";
-const toolbarNodeKindSelectItem = "_toolbarNodeKindSelectItem_1bxeh_272";
-const toolbarNodeKindSelectDropdownArrow = "_toolbarNodeKindSelectDropdownArrow_1bxeh_295";
-const contentEditable = "_contentEditable_1bxeh_299";
-const sandpackWrapper = "_sandpackWrapper_1bxeh_307";
-const frontmatterWrapper = "_frontmatterWrapper_1bxeh_311";
-const frontmatterToggleButton = "_frontmatterToggleButton_1bxeh_321";
-const frontmatterEditorTable = "_frontmatterEditorTable_1bxeh_329";
-const iconButton = "_iconButton_1bxeh_347";
-const frontmatterInput = "_frontmatterInput_1bxeh_353";
-const primaryButton = "_primaryButton_1bxeh_368";
-const linkDialogEditForm = "_linkDialogEditForm_1bxeh_378";
-const linkDialogInputContainer = "_linkDialogInputContainer_1bxeh_384";
-const linkDialogInputWrapper = "_linkDialogInputWrapper_1bxeh_390";
-const linkDialogInput = "_linkDialogInput_1bxeh_384";
-const linkDialogAutocompleteContainer = "_linkDialogAutocompleteContainer_1bxeh_420";
-const linkDialogAnchor = "_linkDialogAnchor_1bxeh_465";
-const linkDialogPopoverContent = "_linkDialogPopoverContent_1bxeh_479";
-const tableColumnEditorPopoverContent = "_tableColumnEditorPopoverContent_1bxeh_479";
-const dialogContent = "_dialogContent_1bxeh_479";
-const linkDialogPreviewAnchor = "_linkDialogPreviewAnchor_1bxeh_493";
-const tooltipContent = "_tooltipContent_1bxeh_515";
-const actionButton = "_actionButton_1bxeh_527";
-const primaryActionButton = "_primaryActionButton_1bxeh_533";
-const tableEditor = "_tableEditor_1bxeh_542";
-const toolCell = "_toolCell_1bxeh_553";
-const tableColumnEditorTrigger = "_tableColumnEditorTrigger_1bxeh_570";
-const tableRowEditorTrigger = "_tableRowEditorTrigger_1bxeh_570";
-const addRowButton = "_addRowButton_1bxeh_570";
-const addColumnButton = "_addColumnButton_1bxeh_570";
-const tableColumnEditorToolbar = "_tableColumnEditorToolbar_1bxeh_604";
-const toggleGroupRoot = "_toggleGroupRoot_1bxeh_616";
-const tableToolsColumn = "_tableToolsColumn_1bxeh_633";
-const leftAlignedCell = "_leftAlignedCell_1bxeh_641";
-const rightAlignedCell = "_rightAlignedCell_1bxeh_645";
-const centeredCell = "_centeredCell_1bxeh_649";
-const dialogOverlay = "_dialogOverlay_1bxeh_677";
-const overlayShow = "_overlayShow_1bxeh_1";
-const contentShow = "_contentShow_1bxeh_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,
@@ -3641,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;
@@ -3945,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,
@@ -3965,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");
@@ -3991,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)))
   );
 }
@@ -4062,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: "info" }, "Info")));
+  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"
@@ -4079,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;
@@ -4155,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(
@@ -4176,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);
@@ -4186,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)" } })
@@ -4207,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");
@@ -4228,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");
@@ -4272,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 = {
@@ -4304,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);
@@ -4320,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);