@mdxeditor/editor/dist/plugins/image/EditImageToolbar.js

React component for rich text markdown editing

import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
import { useCellValues, usePublisher } from "@mdxeditor/gurx";
import classNames from "classnames";
import { $getNodeByKey } from "lexical";
import React__default from "react";
import { disableImageSettingsButton$, openEditImageDialog$, parseImageDimension } from "./index.js";
import styles from "../../styles/ui.module.css.js";
import { iconComponentFor$, readOnly$, useTranslation } from "../core/index.js";
function EditImageToolbar(props) {
  const { nodeKey, imageSource, initialImagePath, title, alt, width, height } = props;
  const [disableImageSettingsButton, iconComponentFor, readOnly] = useCellValues(disableImageSettingsButton$, iconComponentFor$, readOnly$);
  const [editor] = useLexicalComposerContext();
  const openEditImageDialog = usePublisher(openEditImageDialog$);
  const t = useTranslation();
  return /* @__PURE__ */ React__default.createElement("div", { className: styles.editImageToolbar }, /* @__PURE__ */ React__default.createElement(
    "button",
    {
      className: styles.iconButton,
      type: "button",
      title: t("imageEditor.deleteImage", "Delete image"),
      disabled: readOnly,
      onClick: (e) => {
        e.preventDefault();
        editor.update(() => {
          var _a;
          (_a = $getNodeByKey(nodeKey)) == null ? void 0 : _a.remove();
        });
      }
    },
    iconComponentFor("delete_small")
  ), !disableImageSettingsButton && /* @__PURE__ */ React__default.createElement(
    "button",
    {
      type: "button",
      className: classNames(styles.iconButton, styles.editImageButton),
      title: t("imageEditor.editImage", "Edit image"),
      disabled: readOnly,
      onClick: () => {
        openEditImageDialog({
          nodeKey,
          initialValues: {
            src: !initialImagePath ? imageSource : initialImagePath,
            title,
            altText: alt,
            width: parseImageDimension(width),
            height: parseImageDimension(height)
          }
        });
      }
    },
    iconComponentFor("settings")
  ));
}
export {
  EditImageToolbar
};