@mdxeditor/editor 0.10.0-alpha.1 → 0.10.0-alpha.3

package/dist/plugins/image/ImageResizer.js

@@ -0,0 +1,214 @@
+import * as React from "react";
+import { useRef } from "react";
+import styles from "../../styles/ui.module.css.js";
+import classNames from "classnames";
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+const Direction = {
+  east: 1 << 0,
+  north: 1 << 3,
+  south: 1 << 1,
+  west: 1 << 2
+};
+function ImageResizer({
+  onResizeStart,
+  onResizeEnd,
+  imageRef,
+  maxWidth,
+  editor
+}) {
+  const controlWrapperRef = useRef(null);
+  const userSelect = useRef({
+    priority: "",
+    value: "default"
+  });
+  const positioningRef = useRef({
+    currentHeight: 0,
+    currentWidth: 0,
+    direction: 0,
+    isResizing: false,
+    ratio: 0,
+    startHeight: 0,
+    startWidth: 0,
+    startX: 0,
+    startY: 0
+  });
+  const editorRootElement = editor.getRootElement();
+  const maxWidthContainer = maxWidth ? maxWidth : editorRootElement !== null ? editorRootElement.getBoundingClientRect().width - 20 : 100;
+  const maxHeightContainer = editorRootElement !== null ? editorRootElement.getBoundingClientRect().height - 20 : 100;
+  const minWidth = 100;
+  const minHeight = 100;
+  const setStartCursor = (direction) => {
+    const ew = direction === Direction.east || direction === Direction.west;
+    const ns = direction === Direction.north || direction === Direction.south;
+    const nwse = direction & Direction.north && direction & Direction.west || direction & Direction.south && direction & Direction.east;
+    const cursorDir = ew ? "ew" : ns ? "ns" : nwse ? "nwse" : "nesw";
+    if (editorRootElement !== null) {
+      editorRootElement.style.setProperty("cursor", `${cursorDir}-resize`, "important");
+    }
+    if (document.body !== null) {
+      document.body.style.setProperty("cursor", `${cursorDir}-resize`, "important");
+      userSelect.current.value = document.body.style.getPropertyValue("-webkit-user-select");
+      userSelect.current.priority = document.body.style.getPropertyPriority("-webkit-user-select");
+      document.body.style.setProperty("-webkit-user-select", `none`, "important");
+    }
+  };
+  const setEndCursor = () => {
+    if (editorRootElement !== null) {
+      editorRootElement.style.setProperty("cursor", "text");
+    }
+    if (document.body !== null) {
+      document.body.style.setProperty("cursor", "default");
+      document.body.style.setProperty("-webkit-user-select", userSelect.current.value, userSelect.current.priority);
+    }
+  };
+  const handlePointerDown = (event, direction) => {
+    if (!editor.isEditable()) {
+      return;
+    }
+    const image = imageRef.current;
+    const controlWrapper = controlWrapperRef.current;
+    if (image !== null && controlWrapper !== null) {
+      event.preventDefault();
+      const { width, height } = image.getBoundingClientRect();
+      const positioning = positioningRef.current;
+      positioning.startWidth = width;
+      positioning.startHeight = height;
+      positioning.ratio = width / height;
+      positioning.currentWidth = width;
+      positioning.currentHeight = height;
+      positioning.startX = event.clientX;
+      positioning.startY = event.clientY;
+      positioning.isResizing = true;
+      positioning.direction = direction;
+      setStartCursor(direction);
+      onResizeStart();
+      controlWrapper.classList.add(styles.imageControlWrapperResizing);
+      image.style.height = `${height}px`;
+      image.style.width = `${width}px`;
+      document.addEventListener("pointermove", handlePointerMove);
+      document.addEventListener("pointerup", handlePointerUp);
+    }
+  };
+  const handlePointerMove = (event) => {
+    const image = imageRef.current;
+    const positioning = positioningRef.current;
+    const isHorizontal = positioning.direction & (Direction.east | Direction.west);
+    const isVertical = positioning.direction & (Direction.south | Direction.north);
+    if (image !== null && positioning.isResizing) {
+      if (isHorizontal && isVertical) {
+        let diff = Math.floor(positioning.startX - event.clientX);
+        diff = positioning.direction & Direction.east ? -diff : diff;
+        const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);
+        const height = width / positioning.ratio;
+        image.style.width = `${width}px`;
+        image.style.height = `${height}px`;
+        positioning.currentHeight = height;
+        positioning.currentWidth = width;
+      } else if (isVertical) {
+        let diff = Math.floor(positioning.startY - event.clientY);
+        diff = positioning.direction & Direction.south ? -diff : diff;
+        const height = clamp(positioning.startHeight + diff, minHeight, maxHeightContainer);
+        image.style.height = `${height}px`;
+        positioning.currentHeight = height;
+      } else {
+        let diff = Math.floor(positioning.startX - event.clientX);
+        diff = positioning.direction & Direction.east ? -diff : diff;
+        const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);
+        image.style.width = `${width}px`;
+        positioning.currentWidth = width;
+      }
+    }
+  };
+  const handlePointerUp = () => {
+    const image = imageRef.current;
+    const positioning = positioningRef.current;
+    const controlWrapper = controlWrapperRef.current;
+    if (image !== null && controlWrapper !== null && positioning.isResizing) {
+      const width = positioning.currentWidth;
+      const height = positioning.currentHeight;
+      positioning.startWidth = 0;
+      positioning.startHeight = 0;
+      positioning.ratio = 0;
+      positioning.startX = 0;
+      positioning.startY = 0;
+      positioning.currentWidth = 0;
+      positioning.currentHeight = 0;
+      positioning.isResizing = false;
+      controlWrapper.classList.remove(styles.imageControlWrapperResizing);
+      setEndCursor();
+      onResizeEnd(width, height);
+      document.removeEventListener("pointermove", handlePointerMove);
+      document.removeEventListener("pointerup", handlePointerUp);
+    }
+  };
+  return /* @__PURE__ */ React.createElement("div", { ref: controlWrapperRef }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(styles.imageResizer, styles.imageResizerN),
+      onPointerDown: (event) => {
+        handlePointerDown(event, Direction.north);
+      }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(styles.imageResizer, styles.imageResizerNe),
+      onPointerDown: (event) => {
+        handlePointerDown(event, Direction.north | Direction.east);
+      }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(styles.imageResizer, styles.imageResizerE),
+      onPointerDown: (event) => {
+        handlePointerDown(event, Direction.east);
+      }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(styles.imageResizer, styles.imageResizerSe),
+      onPointerDown: (event) => {
+        handlePointerDown(event, Direction.south | Direction.east);
+      }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(styles.imageResizer, styles.imageResizerS),
+      onPointerDown: (event) => {
+        handlePointerDown(event, Direction.south);
+      }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(styles.imageResizer, styles.imageResizerSw),
+      onPointerDown: (event) => {
+        handlePointerDown(event, Direction.south | Direction.west);
+      }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(styles.imageResizer, styles.imageResizerW),
+      onPointerDown: (event) => {
+        handlePointerDown(event, Direction.west);
+      }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(styles.imageResizer, styles.imageResizerNw),
+      onPointerDown: (event) => {
+        handlePointerDown(event, Direction.north | Direction.west);
+      }
+    }
+  ));
+}
+export {
+  ImageResizer as default
+};

package/dist/plugins/image/LexicalImageVisitor.js

@@ -2,12 +2,33 @@ import { $isImageNode } from "./ImageNode.js";
 const LexicalImageVisitor = {
   testLexicalNode: $isImageNode,
   visitLexicalNode({ mdastParent, lexicalNode, actions }) {
-    actions.appendToParent(mdastParent, {
-      type: "image",
-      url: lexicalNode.getSrc(),
-      alt: lexicalNode.getAltText(),
-      title: lexicalNode.getTitle()
-    });
+    if (lexicalNode.hasExplicitDimensions()) {
+      const img = new Image();
+      if (lexicalNode.getHeight() !== "inherit") {
+        img.height = lexicalNode.getHeight();
+      }
+      if (lexicalNode.getWidth() !== "inherit") {
+        img.width = lexicalNode.getWidth();
+      }
+      img.src = lexicalNode.getSrc();
+      if (lexicalNode.getAltText()) {
+        img.alt = lexicalNode.getAltText();
+      }
+      if (lexicalNode.getTitle()) {
+        img.title = lexicalNode.getTitle();
+      }
+      actions.appendToParent(mdastParent, {
+        type: "html",
+        value: img.outerHTML.replace(/>$/, "/>")
+      });
+    } else {
+      actions.appendToParent(mdastParent, {
+        type: "image",
+        url: lexicalNode.getSrc(),
+        alt: lexicalNode.getAltText(),
+        title: lexicalNode.getTitle()
+      });
+    }
   }
 };
 export {

package/dist/plugins/image/MdastImageVisitor.d.ts

@@ -1,3 +1,6 @@
 import * as Mdast from 'mdast';
 import { MdastImportVisitor } from '../../importMarkdownToLexical';
+import { MdxJsxTextElement, MdxJsxFlowElement } from 'mdast-util-mdx';
 export declare const MdastImageVisitor: MdastImportVisitor<Mdast.Image>;
+export declare const MdastHtmlImageVisitor: MdastImportVisitor<Mdast.HTML>;
+export declare const MdastJsxImageVisitor: MdastImportVisitor<MdxJsxTextElement | MdxJsxFlowElement>;

package/dist/plugins/image/MdastImageVisitor.js

@@ -1,4 +1,5 @@
 import { $createImageNode } from "./ImageNode.js";
+import { $createParagraphNode } from "lexical";
 const MdastImageVisitor = {
   testNode: "image",
   visitNode({ mdastNode, actions }) {
@@ -11,6 +12,76 @@ const MdastImageVisitor = {
     );
   }
 };
+const MdastHtmlImageVisitor = {
+  testNode: (node) => {
+    return node.type === "html" && node.value.trim().startsWith("<img");
+  },
+  visitNode({ mdastNode, lexicalParent }) {
+    const wrapper = document.createElement("div");
+    wrapper.innerHTML = mdastNode.value;
+    const img = wrapper.querySelector("img");
+    if (!img) {
+      throw new Error("Invalid HTML image");
+    }
+    const src = img.src;
+    const altText = img.alt;
+    const title = img.title;
+    const width = img.width;
+    const height = img.height;
+    const image = $createImageNode({
+      src: src || "",
+      altText,
+      title,
+      width,
+      height
+    });
+    if (lexicalParent.getType() === "root") {
+      const paragraph = $createParagraphNode();
+      paragraph.append(image);
+      lexicalParent.append(paragraph);
+    } else {
+      lexicalParent.append(image);
+    }
+  }
+};
+function getAttributeValue(node, attributeName) {
+  const attribute = node.attributes.find((a) => a.type === "mdxJsxAttribute" && a.name === attributeName);
+  if (!attribute) {
+    return void 0;
+  }
+  return attribute.value;
+}
+const MdastJsxImageVisitor = {
+  testNode: (node) => {
+    return (node.type === "mdxJsxTextElement" || node.type === "mdxJsxFlowElement") && node.name === "img";
+  },
+  visitNode({ mdastNode, lexicalParent }) {
+    const src = getAttributeValue(mdastNode, "src");
+    if (!src) {
+      return;
+    }
+    const altText = getAttributeValue(mdastNode, "alt") || "";
+    const title = getAttributeValue(mdastNode, "title");
+    const height = getAttributeValue(mdastNode, "height");
+    const width = getAttributeValue(mdastNode, "width");
+    const image = $createImageNode({
+      src,
+      altText,
+      title,
+      width: width ? parseInt(width, 10) : void 0,
+      height: height ? parseInt(height, 10) : void 0
+    });
+    if (lexicalParent.getType() === "root") {
+      const paragraph = $createParagraphNode();
+      paragraph.append(image);
+      lexicalParent.append(paragraph);
+    } else {
+      lexicalParent.append(image);
+    }
+  }
+};
 export {
-  MdastImageVisitor
+  MdastHtmlImageVisitor,
+  MdastImageVisitor,
+  MdastJsxImageVisitor
 };

package/dist/plugins/image/index.d.ts

@@ -530,7 +530,11 @@ imagePluginHooks: {
         insertDecoratorNode: import("../../gurx").RealmNode<() => import("lexical").DecoratorNode<unknown>>;
     }, K_2>) => void;
 };
+/** @internal */
 export type InsertImagePayload = Readonly<CreateImageNodeOptions>;
+/**
+ * @internal
+ */
 export declare const INSERT_IMAGE_COMMAND: LexicalCommand<InsertImagePayload>;
 declare global {
     interface DragEvent {

package/dist/plugins/image/index.js

@@ -3,7 +3,7 @@ import { createCommand, $insertNodes, $isRootOrShadowRoot, $createParagraphNode,
 import { coreSystem } from "../core/index.js";
 import { $createImageNode, $isImageNode, ImageNode } from "./ImageNode.js";
 import { LexicalImageVisitor } from "./LexicalImageVisitor.js";
-import { MdastImageVisitor } from "./MdastImageVisitor.js";
+import { MdastImageVisitor, MdastHtmlImageVisitor, MdastJsxImageVisitor } from "./MdastImageVisitor.js";
 import { CAN_USE_DOM } from "../../utils/detectMac.js";
 import { system } from "../../gurx/realmFactory.js";
 import { realmPlugin } from "../../gurx/react.js";
@@ -106,6 +106,8 @@ const [
   },
   init: (realm) => {
     realm.pubKey("addImportVisitor", MdastImageVisitor);
+    realm.pubKey("addImportVisitor", MdastHtmlImageVisitor);
+    realm.pubKey("addImportVisitor", MdastJsxImageVisitor);
     realm.pubKey("addLexicalNode", ImageNode);
     realm.pubKey("addExportVisitor", LexicalImageVisitor);
   }

package/dist/plugins/jsx/MdastMdxJsxElementVisitor.js

@@ -1,7 +1,7 @@
 import { $createLexicalJsxNode } from "./LexicalJsxNode.js";
 const MdastMdxJsxElementVisitor = {
   testNode: (node) => {
-    return node.type === "mdxJsxTextElement" || node.type === "mdxJsxFlowElement";
+    return (node.type === "mdxJsxTextElement" || node.type === "mdxJsxFlowElement") && node.name !== "img";
   },
   visitNode({ lexicalParent, mdastNode }) {
     lexicalParent.append($createLexicalJsxNode(mdastNode));

package/dist/plugins/jsx/index.d.ts

@@ -1,5 +1,8 @@
 import type { MdxJsxFlowElement, MdxJsxTextElement } from 'mdast-util-mdx-jsx';
 import React from 'react';
+/**
+ * @internal
+ */
 export type MdastJsx = MdxJsxTextElement | MdxJsxFlowElement;
 /**
  * Defines the structure of a JSX component property.
@@ -109,7 +112,13 @@ export declare const jsxSystem: import("../../gurx").SystemSpec<[import("../../g
     convertSelectionToNode: import("../../gurx").RealmNode<() => import("lexical").ElementNode>;
     insertDecoratorNode: import("../../gurx").RealmNode<() => import("lexical").DecoratorNode<unknown>>;
 }>], (_: import("../../gurx").Realm) => {}>;
+/**
+ * The parameters of the `jsxPlugin`.
+ */
 export interface JsxPluginParams {
+    /**
+     * A set of descriptors that document the JSX elements used in the document.
+     */
     jsxComponentDescriptors: JsxComponentDescriptor[];
 }
 export declare const 

package/dist/plugins/lists/LexicalListVisitor.js

@@ -4,7 +4,6 @@ const LexicalListVisitor = {
   visitLexicalNode: ({ lexicalNode, actions }) => {
     actions.addAndStepInto("list", {
       ordered: lexicalNode.getListType() === "number",
-      //TODO: figure out when spread can be true
       spread: false
     });
   }

package/dist/plugins/table/TableEditor.js

@@ -77,18 +77,26 @@ const TableEditor = ({ mdastNode, parentEditor, lexicalTable }) => {
   React__default.useEffect(() => {
     lexicalTable.focusEmitter.subscribe(setActiveCellWithBoundaries);
   }, [lexicalTable, setActiveCellWithBoundaries]);
-  const addRowToBottom = React__default.useCallback(() => {
-    parentEditor.update(() => {
-      lexicalTable.addRowToBottom();
-      setActiveCell([0, lexicalTable.getRowCount()]);
-    });
-  }, [parentEditor, lexicalTable]);
-  const addColumnToRight = React__default.useCallback(() => {
-    parentEditor.update(() => {
-      lexicalTable.addColumnToRight();
-      setActiveCell([lexicalTable.getColCount(), 0]);
-    });
-  }, [parentEditor, lexicalTable]);
+  const addRowToBottom = React__default.useCallback(
+    (e) => {
+      e.preventDefault();
+      parentEditor.update(() => {
+        lexicalTable.addRowToBottom();
+        setActiveCell([0, lexicalTable.getRowCount()]);
+      });
+    },
+    [parentEditor, lexicalTable]
+  );
+  const addColumnToRight = React__default.useCallback(
+    (e) => {
+      e.preventDefault();
+      parentEditor.update(() => {
+        lexicalTable.addColumnToRight();
+        setActiveCell([lexicalTable.getColCount(), 0]);
+      });
+    },
+    [parentEditor, lexicalTable]
+  );
   const [highlightedCoordinates, setHighlightedCoordinates] = React__default.useState([-1, -1]);
   const onTableMouseOver = React__default.useCallback((e) => {
     let tableCell = e.target;
@@ -116,8 +124,10 @@ const TableEditor = ({ mdastNode, parentEditor, lexicalTable }) => {
     "button",
     {
       className: styles.iconButton,
+      type: "button",
       title: "Delete table",
-      onClick: () => {
+      onClick: (e) => {
+        e.preventDefault();
         parentEditor.update(() => {
           lexicalTable.selectNext();
           lexicalTable.remove();
@@ -158,8 +168,8 @@ const TableEditor = ({ mdastNode, parentEditor, lexicalTable }) => {
           }
         }
       );
-    }), rowIndex === 0 && /* @__PURE__ */ React__default.createElement("th", { rowSpan: lexicalTable.getRowCount(), "data-tool-cell": true }, /* @__PURE__ */ React__default.createElement("button", { className: styles.addColumnButton, onClick: addColumnToRight }, /* @__PURE__ */ React__default.createElement(AddColumnIcon, null))));
-  })), /* @__PURE__ */ React__default.createElement("tfoot", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("th", null), /* @__PURE__ */ React__default.createElement("th", { colSpan: lexicalTable.getColCount() }, /* @__PURE__ */ React__default.createElement("button", { className: styles.addRowButton, onClick: addRowToBottom }, /* @__PURE__ */ React__default.createElement(AddRowIcon, null))), /* @__PURE__ */ React__default.createElement("th", null))));
+    }), rowIndex === 0 && /* @__PURE__ */ React__default.createElement("th", { rowSpan: lexicalTable.getRowCount(), "data-tool-cell": true }, /* @__PURE__ */ React__default.createElement("button", { type: "button", className: styles.addColumnButton, onClick: addColumnToRight }, /* @__PURE__ */ React__default.createElement(AddColumnIcon, null))));
+  })), /* @__PURE__ */ React__default.createElement("tfoot", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("th", null), /* @__PURE__ */ React__default.createElement("th", { colSpan: lexicalTable.getColCount() }, /* @__PURE__ */ React__default.createElement("button", { type: "button", className: styles.addRowButton, onClick: addRowToBottom }, /* @__PURE__ */ React__default.createElement(AddRowIcon, null))), /* @__PURE__ */ React__default.createElement("th", null))));
 };
 const Cell = ({ align, ...props }) => {
   const { activeCell, setActiveCell } = props;

package/dist/plugins/toolbar/components/BlockTypeSelect.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * A toolbar component that allows the user to change the block type of the current selection.
+ * Supports paragraphs, headings and block quotes.
+ */
 export declare const BlockTypeSelect: () => React.JSX.Element | null;

package/dist/plugins/toolbar/components/BoldItalicUnderlineToggles.d.ts

@@ -1,2 +1,5 @@
 import React from 'react';
+/**
+ * A toolbar component that lets the user toggle bold, italic and underline formatting.
+ */
 export declare const BoldItalicUnderlineToggles: React.FC;

package/dist/plugins/toolbar/components/ChangeAdmonitionType.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * A component that allows the user to change the admonition type of the current selection.
+ * For this component to work, you must pass the {@link AdmonitionDirectiveDescriptor} to the `directivesPlugin` `directiveDescriptors` parameter.
+ */
 export declare const ChangeAdmonitionType: () => React.JSX.Element;

package/dist/plugins/toolbar/components/ChangeCodeMirrorLanguage.d.ts

@@ -1,2 +1,7 @@
 import React from 'react';
+/**
+ * A component that allows the user to change the code block language of the current selection.
+ * For this component to work, you must enable the `codeMirrorPlugin` for the editor.
+ * See {@link ConditionalContents} for an example on how to display the dropdown only when a code block is in focus.
+ */
 export declare const ChangeCodeMirrorLanguage: () => React.JSX.Element;

package/dist/plugins/toolbar/components/ChangeCodeMirrorLanguage.js

@@ -21,8 +21,8 @@ const ChangeCodeMirrorLanguage = () => {
           });
         });
       },
-      triggerTitle: "Select admonition type",
-      placeholder: "Admonition type",
+      triggerTitle: "Select code block language",
+      placeholder: "Code block language",
       items: Object.entries(codeBlockLanguages).map(([value, label]) => ({ value, label }))
     }
   ));

package/dist/plugins/toolbar/components/CodeToggle.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * A toolbar component that lets the user toggle code formatting.
+ * Use for inline `code` elements (like variables, methods, etc).
+ */
 export declare const CodeToggle: React.FC;

package/dist/plugins/toolbar/components/CreateLink.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * A toolbar component that opens the link edit dialog.
+ * For this component to work, you must include the `linkDialogPlugin`.
+ */
 export declare const CreateLink: () => React.JSX.Element;

package/dist/plugins/toolbar/components/DiffSourceToggleWrapper.d.ts

@@ -1,4 +1,9 @@
 import React from 'react';
+/**
+ * A wrapper element for the toolbar contents that lets the user toggle between rich text, diff and source mode.
+ * Put the rich text toolbar contents as children of this component.
+ * For this component to work, you must include the `diffSourcePlugin`.
+ */
 export declare const DiffSourceToggleWrapper: React.FC<{
     children: React.ReactNode;
 }>;

package/dist/plugins/toolbar/components/InsertAdmonition.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * A toolbar dropdown button that allows the user to insert admonitions.
+ * For this to work, you need to have the `directives` plugin enabled with the {@link AdmonitionDirectiveDescriptor} configured.
+ */
 export declare const InsertAdmonition: () => React.JSX.Element;

package/dist/plugins/toolbar/components/InsertCodeBlock.d.ts

@@ -1,2 +1,7 @@
 import React from 'react';
+/**
+ * A toolbar button that allows the user to insert a fenced code block.
+ * Once the code block is focused, you can construct a special code block toolbar for it, using the {@link ConditionalContents} primitive.
+ * See the {@link ConditionalContents} documentation for an example.
+ */
 export declare const InsertCodeBlock: React.FC;

package/dist/plugins/toolbar/components/InsertFrontmatter.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * A toolbar button that allows the user to insert a {@link https://jekyllrb.com/docs/front-matter/ | front-matter} editor (if one is not already present).
+ * For this to work, you need to have the `frontmatterPlugin` plugin enabled.
+ */
 export declare const InsertFrontmatter: React.FC;

package/dist/plugins/toolbar/components/InsertImage.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * A toolbar button that allows the user to insert an image from an URL.
+ * For the button to work, you need to have the `imagePlugin` plugin enabled.
+ */
 export declare const InsertImage: React.ForwardRefExoticComponent<Omit<Record<string, never>, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/plugins/toolbar/components/InsertSandpack.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * A dropdown button that allows the user to insert a live code block into the editor. The dropdown offers a list of presets that are defined in the sandpack plugin config.
+ * For this to work, you need to have the `sandpackPlugin` installed.
+ */
 export declare const InsertSandpack: () => React.JSX.Element;

package/dist/plugins/toolbar/components/InsertTable.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * A toolbar button that allows the user to insert a table.
+ * For this button to work, you need to have the `tablePlugin` plugin enabled.
+ */
 export declare const InsertTable: React.FC;

package/dist/plugins/toolbar/components/InsertThematicBreak.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * A toolbar button that allows the user to insert a thematic break (rendered as an HR HTML element).
+ * For this button to work, you need to have the `thematicBreakPlugin` plugin enabled.
+ */
 export declare const InsertThematicBreak: React.FC;

package/dist/plugins/toolbar/components/KitchenSinkToolbar.d.ts

@@ -1,2 +1,7 @@
 import React from 'react';
+/**
+ * A toolbar component that includes all toolbar components.
+ * Notice that some of the buttons will work only if you have the corresponding plugin enabled, so you should use it only for testing purposes.
+ * You'll probably want to create your own toolbar component that includes only the buttons that you need.
+ */
 export declare const KitchenSinkToolbar: React.FC;

package/dist/plugins/toolbar/components/ListsToggle.d.ts

@@ -1,2 +1,7 @@
 import React from 'react';
+/**
+ * A toolbar toggle that allows the user to toggle between bulleted and numbered lists.
+ * Pressing the selected button will convert the current list to the other type. Pressing it again will remove the list.
+ * For this button to work, you need to have the `listsPlugin` plugin enabled.
+ */
 export declare const ListsToggle: React.FC;

package/dist/plugins/toolbar/components/ShowSandpackInfo.d.ts

@@ -1,2 +1,7 @@
 import React from 'react';
+/**
+ * A component that displays the focused live code block's name.
+ * For this component to work, you must enable the `sandpackPlugin` for the editor.
+ * See {@link ConditionalContents} for an example on how to display the dropdown only when a sandpack editor is in focus.
+ */
 export declare const ShowSandpackInfo: () => React.JSX.Element;

package/dist/plugins/toolbar/components/UndoRedo.d.ts

@@ -1,2 +1,5 @@
 import React from 'react';
+/**
+ * A toolbar component that lets the user undo and redo changes in the editor.
+ */
 export declare const UndoRedo: React.FC;

package/dist/plugins/toolbar/primitives/TooltipWrap.d.ts

@@ -1,4 +1,7 @@
 import React, { ReactNode } from 'react';
+/**
+ * A small styled wrapper around the radix-ui tooltip, that lets you display an instan tooltip on hover.
+ */
 export declare const TooltipWrap: React.ForwardRefExoticComponent<{
     title: string;
     children: ReactNode;