@ablogcms/media 3.2.28-beta.0

package/dist/chunk-JJTHI4QP.mjs

@@ -0,0 +1,1783 @@
+import {
+  getMediaTransport
+} from "./chunk-3SYVRD3N.mjs";
+import {
+  __export
+} from "./chunk-J5LGTIGS.mjs";
+
+// src/stores/actions.ts
+var actions_exports = {};
+__export(actions_exports, {
+  fetchMediaList: () => fetchMediaList,
+  fetchTagList: () => fetchTagList,
+  setFormToken: () => setFormToken,
+  setItem: () => setItem,
+  setLabel: () => setLabel,
+  setLoading: () => setLoading,
+  setMediaArchives: () => setMediaArchives,
+  setMediaConfig: () => setMediaConfig,
+  setMediaExtensions: () => setMediaExtensions,
+  setMediaLargeSize: () => setMediaLargeSize,
+  setMediaLastPage: () => setMediaLastPage,
+  setMediaList: () => setMediaList,
+  setMediaTags: () => setMediaTags,
+  setMediaTotal: () => setMediaTotal,
+  setSelectedTags: () => setSelectedTags,
+  updateMediaList: () => updateMediaList
+});
+
+// src/constants/index.ts
+var FETCHMEDIALIST = "FETCHMEDIALIST";
+var FETCHTAGLIST = "FETCHTAGLIST";
+var SETMEDIALIST = "SETMEDIALIST";
+var SETMEDIALASTPAGE = "SETMEDIALASTPAGE";
+var SETMEDIACONFIG = "SETMEDIACONFIG";
+var SETITEM = "SETITEM";
+var UPDATEMEDIALIST = "UPDATEMEDIALIST";
+var SETMEDIALARGESIZE = "SETMEDIALARGESIZE";
+var SETFORMTOKEN = "SETFORMTOKEN";
+var SETLABEL = "SETLABEL";
+var SETMEDIAARCHIVES = "SETMEDIAARCHIVES";
+var SETMEDIATAGS = "SETMEDIATAGS";
+var SETMEDIATOTAL = "SETMEDIATOTAL";
+var SETLOADING = "SETLOADING";
+var SETSELECTEDTAGS = "SETSELECTEDTAGS";
+var SETMEDIAEXTENSIONS = "SETMEDIAEXTENSIONS";
+
+// src/stores/actions.ts
+var fetchTagList = () => ({ type: FETCHTAGLIST });
+var fetchMediaList = (config) => ({ type: FETCHMEDIALIST, config });
+var setMediaList = (items) => ({ type: SETMEDIALIST, items });
+var setMediaConfig = (config) => ({ type: SETMEDIACONFIG, config });
+var setMediaLastPage = (page) => ({ type: SETMEDIALASTPAGE, page });
+var setMediaLargeSize = (largeSize) => ({ type: SETMEDIALARGESIZE, largeSize });
+var setFormToken = (formToken) => ({ type: SETFORMTOKEN, formToken });
+var setItem = (item) => ({ type: SETITEM, item });
+var updateMediaList = (item) => ({ type: UPDATEMEDIALIST, item });
+var setLabel = (label) => ({ type: SETLABEL, label });
+var setMediaArchives = (archives) => ({ type: SETMEDIAARCHIVES, archives });
+var setMediaTags = (tags) => ({ type: SETMEDIATAGS, tags });
+var setMediaTotal = (total) => ({ type: SETMEDIATOTAL, total });
+var setLoading = (loading) => ({ type: SETLOADING, loading });
+var setSelectedTags = (tags) => ({ type: SETSELECTEDTAGS, tags });
+var setMediaExtensions = (extensions) => ({ type: SETMEDIAEXTENSIONS, extensions });
+
+// src/stores/reducer.ts
+var initialState = {
+  items: [],
+  archives: [],
+  tags: [],
+  extensions: [],
+  selectedTags: [],
+  item: null,
+  lastPage: 1,
+  largeSize: 0,
+  total: 0,
+  config: {
+    limit: 20,
+    page: 1,
+    order: "upload_date-desc",
+    keyword: "",
+    tag: "",
+    date: "",
+    filetype: "all",
+    fileext: "all",
+    year: "",
+    month: "",
+    owner: false,
+    blogAxis: false
+  },
+  formToken: "",
+  label: "",
+  loading: false,
+  actions: actions_exports
+  // upload: false,
+  // mode: 'edit',
+  // tab: 'select',
+};
+var reducer_default = (state = initialState, action) => {
+  switch (action.type) {
+    case SETMEDIALIST:
+      const { items } = action;
+      return { ...state, items };
+    case SETMEDIALASTPAGE:
+      return { ...state, lastPage: action.page };
+    case SETMEDIACONFIG:
+      return { ...state, config: { ...state.config, ...action.config } };
+    case SETMEDIATAGS:
+      return { ...state, tags: action.tags };
+    case SETMEDIAARCHIVES:
+      return { ...state, archives: action.archives };
+    case SETITEM:
+      return { ...state, item: action.item };
+    case UPDATEMEDIALIST:
+      const index = state.items.findIndex((item) => {
+        if (item.media_id === action.item.media_id) {
+          return true;
+        }
+        return false;
+      });
+      return {
+        ...state,
+        items: [...state.items.slice(0, index), action.item, ...state.items.slice(index + 1)]
+      };
+    case SETMEDIALARGESIZE:
+      return { ...state, largeSize: action.largeSize };
+    case SETFORMTOKEN:
+      return { ...state, formToken: action.formToken };
+    case SETLABEL:
+      return { ...state, label: action.label };
+    case SETMEDIATOTAL:
+      return { ...state, total: action.total };
+    case SETLOADING:
+      return { ...state, loading: action.loading };
+    case SETSELECTEDTAGS:
+      return { ...state, selectedTags: action.tags };
+    case SETMEDIAEXTENSIONS:
+      return { ...state, extensions: action.extensions };
+    default:
+      return state;
+  }
+};
+
+// src/stores/saga.ts
+import { call, put, takeEvery, select } from "redux-saga/effects";
+function* fetchTagList2() {
+  const transport = getMediaTransport();
+  const data = yield call([transport, transport.fetchTagList]);
+  yield put(setMediaTags(data));
+}
+function* fetchMediaList2({ config = {} }) {
+  const transport = getMediaTransport();
+  const state = yield select();
+  const setting = { ...state.config, ...config };
+  yield put(setLoading(true));
+  yield put(setLoading(false));
+  const data = yield call([transport, transport.fetchMediaList], setting);
+  const { items } = data;
+  const newItems = items.map((item) => {
+    const find = state.items.find((stateItem) => {
+      if (item.media_id === stateItem.media_id) {
+        return true;
+      }
+      return false;
+    });
+    if (find) {
+      return { ...item, checked: find.checked };
+    }
+    return item;
+  });
+  yield put(setMediaList(newItems));
+  yield put(setMediaLastPage(data.pageAmount));
+  yield put(setMediaTotal(data.total));
+  yield put(setMediaLargeSize(data.largeSize));
+  yield put(setMediaArchives(data.archives));
+  yield put(setMediaTags(data.tags));
+  yield put(setMediaExtensions(data.extensions));
+  if (config) {
+    yield put(setMediaConfig(config));
+  }
+}
+function* rootSaga() {
+  yield takeEvery(FETCHMEDIALIST, fetchMediaList2);
+  yield takeEvery(FETCHTAGLIST, fetchTagList2);
+}
+
+// src/components/media-modal/media-modal.tsx
+import { Component as Component2, createRef } from "react";
+import DOMPurify from "dompurify";
+import { emit } from "@ablogcms/events";
+import { pending } from "@ablogcms/pending";
+import ResizeImage from "@ablogcms/lib/resize-image-util";
+import { formatBytes, dataURItoBlob, triggerEvent } from "@ablogcms/utils";
+import CopyToClipboard from "@ablogcms/components/copy-to-clipboard";
+import { Tabs, TabPanel } from "@ablogcms/components/tabs";
+import Modal2, { ModalBody as ModalBody2, ModalFooter as ModalFooter2, ModalHeader as ModalHeader2 } from "@ablogcms/components/modal";
+import { Table, TableBody, TableRow, TableHead, TableCell } from "@ablogcms/components/table";
+import { CreatableSelect } from "@ablogcms/components/rich-select";
+import { HStack as HStack2 } from "@ablogcms/components/stack";
+import VisuallyHidden from "@ablogcms/components/visually-hidden";
+import { AutoResizeTextarea } from "@ablogcms/components/textarea";
+import { Slot } from "@ablogcms/components/slot-fill";
+
+// src/components/media-edit-modal/media-edit-modal.tsx
+import { Component } from "react";
+import { DndContext, getClientRect, useDraggable } from "@dnd-kit/core";
+import { CSS } from "@dnd-kit/utilities";
+import Cropper from "cropperjs";
+import classnames from "classnames";
+import { calcHeightFromRatio, calcVhToPx, calcWidthFromRatio } from "@ablogcms/utils";
+import { DropZone } from "@ablogcms/components/drop-zone";
+import Modal, { ModalBody, ModalFooter, ModalHeader } from "@ablogcms/components/modal";
+import "cropperjs/dist/cropper.css";
+import { HStack } from "@ablogcms/components/stack";
+
+// src/assets/images/media-rotate-icon.svg
+var media_rotate_icon_default = "./media-rotate-icon-HBMXAPD4.svg";
+
+// src/assets/images/media-focal-point.svg
+var media_focal_point_default = "./media-focal-point-OQQ3MQM2.svg";
+
+// src/assets/images/media-crop-icon.svg
+var media_crop_icon_default = "./media-crop-icon-LD2QEJHL.svg";
+
+// src/assets/images/media-crop-focal.svg
+var media_crop_focal_default = "./media-crop-focal-OQHAYXEP.svg";
+
+// src/utils/index.ts
+function getFocalPoint(media) {
+  return media.media_focal_point ? media.media_focal_point.split(",").map((str) => parseFloat(str)) : [50, 50];
+}
+function coordinatesToTransform(focalPointCoordinates, canvas) {
+  const { x, y } = focalPointCoordinates;
+  return {
+    x: x - canvas.width / 2,
+    y: y - canvas.height / 2,
+    scaleX: 1,
+    scaleY: 1
+  };
+}
+function focalPointToCoordinates(focalPoint, canvas) {
+  const [x, y] = focalPoint;
+  const percentX = x / 100;
+  const percentY = y / 100;
+  return {
+    x: canvas.width * percentX,
+    y: canvas.height * percentY
+  };
+}
+
+// src/components/media-edit-modal/media-edit-modal.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var MAX_HEIGHT_VH = 55;
+function restrictToBoundingRect(transform, rect, boundingRect) {
+  const value = {
+    ...transform
+  };
+  if (rect.top + transform.y <= boundingRect.top) {
+    value.y = boundingRect.top - rect.top;
+  } else if (rect.bottom + transform.y >= boundingRect.top + boundingRect.height) {
+    value.y = boundingRect.top + boundingRect.height - rect.bottom;
+  }
+  if (rect.left + transform.x <= boundingRect.left) {
+    value.x = boundingRect.left - rect.left;
+  } else if (rect.right + transform.x >= boundingRect.left + boundingRect.width) {
+    value.x = boundingRect.left + boundingRect.width - rect.right;
+  }
+  return value;
+}
+function DraggableFocalPoint({ children, focalPointTransform }) {
+  const { attributes, listeners, setNodeRef, transform } = useDraggable({
+    id: "focal-point"
+  });
+  const style = {
+    transform: CSS.Translate.toString(transform),
+    position: "absolute",
+    left: `calc(50% + ${focalPointTransform.x}px)`,
+    top: `calc(50% + ${focalPointTransform.y}px)`
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      ref: setNodeRef,
+      className: "acms-admin-focal-point-btn",
+      style,
+      ...listeners,
+      ...attributes,
+      "aria-label": ACMS.i18n("media.focal_point_button_label"),
+      children
+    }
+  );
+}
+var MediaEditModal = class extends Component {
+  image;
+  cropper;
+  constructor(props) {
+    super(props);
+    this.state = {
+      blob: null,
+      upload: false,
+      cropWidth: 0,
+      cropHeight: 0,
+      zoom: 1,
+      ratio: 0,
+      src: "",
+      useFocalPoint: false,
+      focalPoint: props.focalPoint,
+      timeout: null,
+      isCropListOpen: false
+    };
+    this.cropper = null;
+    this.image = null;
+  }
+  componentWillUnmount() {
+    if (this.cropper) {
+      this.cropper.destroy();
+    }
+  }
+  setImageRef(node) {
+    this.image = node;
+    if (node !== null && this.cropper === null) {
+      this.cropper = new Cropper(node, {
+        autoCrop: false,
+        zoomable: false,
+        responsive: true,
+        viewMode: 2,
+        crop: (e) => {
+          const data = e.detail;
+          if (data.width || data.height) {
+            this.setState({
+              cropWidth: data.width,
+              cropHeight: data.height
+            });
+          } else {
+            this.setState({
+              cropWidth: 0,
+              cropHeight: 0
+            });
+          }
+        },
+        autoCropArea: 1,
+        dragMode: "none"
+      });
+    }
+  }
+  handleAfterOpen() {
+    const { focalPoint } = this.props;
+    this.setState({
+      focalPoint
+      // モーダルが開いた時に、親コンポーネントから渡された focalPoint を state にセット
+    });
+  }
+  handleAfterClose() {
+    if (this.cropper) {
+      this.cropper.destroy();
+      this.cropper = null;
+    }
+    this.setState({
+      cropWidth: 0,
+      cropHeight: 0,
+      ratio: 0,
+      useFocalPoint: false
+    });
+  }
+  onCancel() {
+    this.setState({
+      cropWidth: 0,
+      cropHeight: 0,
+      ratio: 0,
+      useFocalPoint: false,
+      focalPoint: this.props.focalPoint
+    });
+    this.props.onClose();
+  }
+  onCrop() {
+    if (!this.image) {
+      return;
+    }
+    if (!this.cropper) {
+      return;
+    }
+    let mimeType = "image/png";
+    if (this.image.src) {
+      const lastIndex = this.image.src.lastIndexOf("?");
+      const src = lastIndex === -1 ? this.image.src : this.image.src.substring(0, lastIndex);
+      if (src.slice(-3) !== "png") {
+        mimeType = "image/jpeg";
+      }
+    }
+    this.cropper.getCroppedCanvas().toBlob((blob) => {
+      const { focalPoint } = this.state;
+      this.props.onCrop(blob, focalPoint);
+    }, mimeType);
+  }
+  onUploadImg(files) {
+    if (!files.length) {
+      return;
+    }
+    if (files[0].filetype === "image") {
+      this.cropper?.replace(files[0].preview);
+    }
+  }
+  useOriginalImg() {
+    if (this.props.original) {
+      this.cropper?.replace(this.props.original);
+    }
+  }
+  changeAspectRatio(ratioProp) {
+    if (!this.cropper) {
+      return;
+    }
+    const { ratio } = this.state;
+    this.cropper.clear();
+    if (ratioProp === ratio || isNaN(ratioProp) && isNaN(ratio)) {
+      this.setState({
+        ratio: 0
+      });
+      return;
+    }
+    this.cropper.setAspectRatio(ratioProp);
+    this.cropper.crop();
+    this.setState({
+      ratio: ratioProp
+    });
+  }
+  rotate(rotate) {
+    if (!this.cropper) {
+      return;
+    }
+    const data = this.cropper.getCropBoxData();
+    const contData = this.cropper.getContainerData();
+    data.width = 2;
+    data.height = 2;
+    data.top = 0;
+    const leftNew = contData.width / 2 - 1;
+    data.left = leftNew;
+    this.cropper.setCropBoxData(data);
+    this.cropper.rotate(rotate);
+    const canvData = this.cropper.getCanvasData();
+    const heightOld = canvData.height;
+    const heightNew = heightOld > contData.height ? contData.height : heightOld;
+    const koef = heightNew / heightOld;
+    const widthNew = canvData.width * koef;
+    canvData.height = heightNew;
+    canvData.width = widthNew;
+    canvData.top = 0;
+    if (canvData.width >= contData.width) {
+      canvData.left = 0;
+    } else {
+      canvData.left = (contData.width - canvData.width) / 2;
+    }
+    if (canvData.height >= contData.height) {
+      canvData.top = 0;
+    } else {
+      canvData.top = (contData.height - canvData.height) / 2;
+    }
+    this.cropper.setCanvasData(canvData);
+    data.left = 0;
+    data.top = 0;
+    data.width = canvData.width;
+    data.height = canvData.height;
+    this.cropper.setCropBoxData(data);
+  }
+  toggleFocalPoint() {
+    const { useFocalPoint } = this.state;
+    this.setState({
+      useFocalPoint: !useFocalPoint
+    });
+  }
+  handleFocalDragEnd = (event) => {
+    if (!this.cropper) {
+      return;
+    }
+    const { delta } = event;
+    const canvas = this.cropper.getCanvasData();
+    const { width, height } = canvas;
+    const { focalPoint } = this.state;
+    const focalPointCoordinates = focalPointToCoordinates(focalPoint, canvas);
+    const x = (focalPointCoordinates.x + delta.x) / width * 100;
+    const y = (focalPointCoordinates.y + delta.y) / height * 100;
+    const percentX = Math.max(0, Math.min(100, x));
+    const percentY = Math.max(0, Math.min(100, y));
+    this.setState({
+      focalPoint: [percentX, percentY]
+    });
+  };
+  focalPointToTransform = (focalPoint) => {
+    if (!this.cropper) {
+      return { x: 0, y: 0, scaleX: 1, scaleY: 1 };
+    }
+    const canvas = this.cropper.getCanvasData();
+    const coordinates = focalPointToCoordinates(focalPoint, canvas);
+    const transform = coordinatesToTransform(coordinates, canvas);
+    return transform;
+  };
+  hoverOnCropList = () => {
+    if (this.state.timeout) {
+      clearTimeout(this.state.timeout);
+    }
+    this.setState({
+      isCropListOpen: true
+    });
+  };
+  leaveFromCropList = () => {
+    const timeout = setTimeout(() => {
+      this.setState({
+        isCropListOpen: false
+      });
+    }, 500);
+    this.setState({
+      timeout
+    });
+  };
+  toggleCropList = (e) => {
+    e.preventDefault();
+    const { isCropListOpen } = this.state;
+    this.setState({
+      isCropListOpen: !isCropListOpen
+    });
+  };
+  restrictToCanvas = ({ draggingNodeRect, transform }) => {
+    if (!this.cropper) {
+      return transform;
+    }
+    if (!draggingNodeRect) {
+      return transform;
+    }
+    const canvasRect = getClientRect(this.cropper.canvas);
+    const width = canvasRect.width + draggingNodeRect.width;
+    const height = canvasRect.height + draggingNodeRect.height;
+    const left = canvasRect.left - draggingNodeRect.width / 2;
+    const right = canvasRect.right + draggingNodeRect.width / 2;
+    const top = canvasRect.top - draggingNodeRect.height / 2;
+    const bottom = canvasRect.bottom + draggingNodeRect.height / 2;
+    const restrictedCanvasRect = {
+      width,
+      height,
+      left,
+      right,
+      top,
+      bottom
+    };
+    return restrictToBoundingRect(transform, draggingNodeRect, restrictedCanvasRect);
+  };
+  getImgWidth(width, height) {
+    const ratio = width / height;
+    const heightVh = calcVhToPx(MAX_HEIGHT_VH);
+    const imageWidth = calcWidthFromRatio(ratio, Math.min(heightVh, height));
+    const imageHeight = calcHeightFromRatio(ratio, imageWidth);
+    return `${Math.max(imageWidth, imageHeight)}px`;
+  }
+  render() {
+    const { cropWidth, cropHeight, ratio, useFocalPoint, isCropListOpen, focalPoint } = this.state;
+    const { src, original, mediaCropSizes, title, width, height, isOpen, container } = this.props;
+    return /* @__PURE__ */ jsxs(
+      Modal,
+      {
+        className: "acms-admin-media-edit-modal",
+        isOpen,
+        onClose: this.onCancel.bind(this),
+        size: "large",
+        container,
+        onAfterOpen: this.handleAfterOpen.bind(this),
+        onAfterClose: this.handleAfterClose.bind(this),
+        "aria-labelledby": "acms-media-edit-modal-title",
+        children: [
+          /* @__PURE__ */ jsx(ModalHeader, { children: `${ACMS.i18n("media.edit_image")}${title ? ` - ${title}` : ""}` }),
+          /* @__PURE__ */ jsx(ModalBody, { children: /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(DropZone, { onComplete: this.onUploadImg.bind(this), children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: "acms-admin-cropper-container", children: [
+              cropWidth > 0 && cropHeight > 0 && /* @__PURE__ */ jsxs("div", { className: "acms-admin-cropper-crop-info", children: [
+                /* @__PURE__ */ jsx("img", { src: media_crop_icon_default, className: "acms-admin-cropper-crop-info-img", alt: "" }),
+                /* @__PURE__ */ jsx("input", { type: "text", className: "acms-admin-cropper-crop-info-input", value: cropWidth, readOnly: true }),
+                /* @__PURE__ */ jsx("span", { className: "acms-admin-cropper-crop-info-text", children: "\xD7" }),
+                /* @__PURE__ */ jsx("input", { type: "text", className: "acms-admin-cropper-crop-info-input", value: cropHeight, readOnly: true })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "acms-admin-cropper-wrap", children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "acms-admin-cropper-img-container",
+                  style: { maxWidth: this.getImgWidth(width, height) },
+                  children: [
+                    /* @__PURE__ */ jsx("img", { src, ref: this.setImageRef.bind(this), className: "acms-admin-img-responsive", alt: "" }),
+                    useFocalPoint && /* @__PURE__ */ jsx(DndContext, { onDragEnd: this.handleFocalDragEnd.bind(this), modifiers: [this.restrictToCanvas], children: /* @__PURE__ */ jsx(DraggableFocalPoint, { focalPointTransform: this.focalPointToTransform(focalPoint), children: /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "acms-admin-cropper-focal-point",
+                        style: { backgroundImage: `url(${media_crop_focal_default})` },
+                        "aria-hidden": true
+                      }
+                    ) }) })
+                  ]
+                }
+              ) })
+            ] }) }) }),
+            /* @__PURE__ */ jsx("div", { className: "acms-admin-form acms-admin-cropper-bottom", children: /* @__PURE__ */ jsx("div", { className: "acms-admin-cropper-group-wrap", children: /* @__PURE__ */ jsxs("div", { className: "acms-admin-cropper-group", children: [
+              /* @__PURE__ */ jsxs("div", { className: "acms-admin-cropper-crop-list-wrap", children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: "acms-admin-cropper-btn",
+                    onMouseOver: this.hoverOnCropList,
+                    onMouseLeave: this.leaveFromCropList,
+                    onFocus: this.hoverOnCropList,
+                    onBlur: this.leaveFromCropList,
+                    onClick: this.toggleCropList,
+                    children: [
+                      /* @__PURE__ */ jsx("img", { src: media_crop_icon_default, className: "acms-admin-cropper-icon", alt: "" }),
+                      /* @__PURE__ */ jsx("span", { className: "acms-admin-cropper-btn-txt", children: ACMS.i18n("media.crop") })
+                    ]
+                  }
+                ),
+                isCropListOpen && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "acms-admin-cropper-crop-list",
+                    onMouseOver: this.hoverOnCropList,
+                    onMouseLeave: this.leaveFromCropList,
+                    onFocus: this.hoverOnCropList,
+                    onBlur: this.leaveFromCropList,
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          className: classnames("acms-admin-cropper-list-btn", {
+                            active: isNaN(ratio)
+                          }),
+                          onClick: (e) => {
+                            e.preventDefault();
+                            this.changeAspectRatio(NaN);
+                            this.setState({
+                              isCropListOpen: false
+                            });
+                          },
+                          children: ACMS.i18n("media.custom")
+                        }
+                      ),
+                      mediaCropSizes.map((size) => /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          className: classnames("acms-admin-cropper-list-btn", {
+                            active: ratio === size[0] / size[1]
+                          }),
+                          onClick: (e) => {
+                            e.preventDefault();
+                            this.changeAspectRatio(size[0] / size[1]);
+                            this.setState({
+                              isCropListOpen: false
+                            });
+                          },
+                          children: `${size[0]} / ${size[1]}`
+                        },
+                        size.join("x")
+                      ))
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "acms-admin-cropper-btn",
+                  onClick: (e) => {
+                    e.preventDefault();
+                    this.rotate(90);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("img", { src: media_rotate_icon_default, className: "acms-admin-cropper-icon", alt: "" }),
+                    /* @__PURE__ */ jsx("span", { className: "acms-admin-cropper-btn-txt", children: ACMS.i18n("media.rotate") })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: classnames("acms-admin-cropper-btn", {
+                    active: useFocalPoint
+                  }),
+                  onClick: (e) => {
+                    e.preventDefault();
+                    this.toggleFocalPoint();
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("img", { src: media_focal_point_default, className: "acms-admin-cropper-icon", alt: "" }),
+                    /* @__PURE__ */ jsx("span", { className: "acms-admin-cropper-btn-txt", children: ACMS.i18n("media.focal_point") })
+                  ]
+                }
+              )
+            ] }) }) })
+          ] }) }),
+          /* @__PURE__ */ jsx(ModalFooter, { children: /* @__PURE__ */ jsxs(HStack, { display: "inline-flex", children: [
+            original && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "acms-admin-btn acms-admin-btn-text",
+                onClick: this.useOriginalImg.bind(this),
+                children: ACMS.i18n("media.initialize")
+              }
+            ),
+            /* @__PURE__ */ jsx("button", { type: "button", className: "acms-admin-btn", onClick: this.onCancel.bind(this), children: ACMS.i18n("media.cancel") }),
+            /* @__PURE__ */ jsx("button", { type: "button", className: "acms-admin-btn acms-admin-btn-info", onClick: this.onCrop.bind(this), children: ACMS.i18n("media.apply") })
+          ] }) })
+        ]
+      }
+    );
+  }
+};
+
+// src/components/media-modal/pdf-previewer.ts
+var Pdf2ImageClass;
+var instanceByUrl = /* @__PURE__ */ new Map();
+var inflightByKey = /* @__PURE__ */ new Map();
+var resultCacheByKey = /* @__PURE__ */ new Map();
+var keyOf = (url, page) => `${url}|${page}`;
+async function getInstance(url) {
+  if (!Pdf2ImageClass) {
+    const { default: pdf2image } = await import(
+      /* webpackChunkName: "pdf2image" */
+      "@ablogcms/lib/pdf2image"
+    );
+    Pdf2ImageClass = pdf2image;
+  }
+  let inst = instanceByUrl.get(url);
+  if (!inst) {
+    inst = new Pdf2ImageClass(url);
+    instanceByUrl.set(url, inst);
+  }
+  return inst;
+}
+async function fetchPdfPage(url, page) {
+  const key = keyOf(url, page);
+  const cached = resultCacheByKey.get(key);
+  if (cached) return cached;
+  const running = inflightByKey.get(key);
+  if (running) return running;
+  const p = (async () => {
+    const inst = await getInstance(url);
+    const image = await inst.getPageImage(page);
+    const [hasPrev, hasNext] = await Promise.all([inst.hasPrevPage(), inst.hasNextPage()]);
+    const res = {
+      image,
+      hasPrev,
+      hasNext,
+      currentPage: inst.currentPage
+    };
+    if (image !== false) {
+      resultCacheByKey.set(key, res);
+    }
+    return res;
+  })();
+  inflightByKey.set(key, p);
+  try {
+    return await p;
+  } finally {
+    inflightByKey.delete(key);
+  }
+}
+
+// src/components/media-modal/media-modal.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var delimiter = ",";
+var resizeImage = new ResizeImage();
+var MediaModal = class extends Component2 {
+  form;
+  filenameInputRef;
+  tagsInputRef;
+  altTextareaRef;
+  modalRef;
+  root;
+  static defaultProps = {
+    tags: []
+  };
+  constructor(props) {
+    super(props);
+    this.state = {
+      isEditDialogOpen: false,
+      file: null,
+      blob: null,
+      preview: props.item ? this.getDefaultPreview(props.item) : "",
+      replaced: false,
+      pdfPreviewSrc: "",
+      pdfHasPrevPage: false,
+      pdfHasNextPage: false,
+      pdfPage: props.item?.media_pdf_page ? parseInt(props.item.media_pdf_page, 10) : 1,
+      focalPoint: props.item ? getFocalPoint(props.item) : [50, 50],
+      activeTab: "edit"
+    };
+    this.root = document.createElement("div");
+    this.form = null;
+    this.modalRef = createRef();
+    this.filenameInputRef = createRef();
+    this.tagsInputRef = createRef();
+    this.altTextareaRef = createRef();
+  }
+  componentDidMount() {
+    (this.props.container || document.body).appendChild(this.root);
+  }
+  getDefaultPreview(item) {
+    if (item.media_type === "file") {
+      return item.media_thumbnail;
+    }
+    return `${item.media_edited}?date=${item.media_last_modified}`;
+  }
+  handleAfterClose() {
+    this.props.actions.setItem(null);
+    const { onAfterClose } = this.props;
+    if (onAfterClose) {
+      onAfterClose();
+    }
+  }
+  handleAfterOpen() {
+    const { onAfterOpen, item } = this.props;
+    if (item !== null) {
+      this.setState({
+        focalPoint: getFocalPoint(item),
+        pdfPage: parseInt(item.media_pdf_page, 10) || 1
+      });
+    }
+    if (onAfterOpen) {
+      onAfterOpen();
+    }
+  }
+  componentDidUpdate(prevProps) {
+    const { item } = this.props;
+    if (prevProps.item !== item && item !== null) {
+      if (item.media_ext.toLowerCase() === "pdf") {
+        this.pdfPreview(item.media_permalink, parseInt(item.media_pdf_page, 10) || 1);
+      } else {
+        this.setState({
+          preview: this.getDefaultPreview(item)
+        });
+      }
+      this.setState({
+        focalPoint: getFocalPoint(item),
+        pdfPage: parseInt(item.media_pdf_page, 10) || 1
+      });
+    }
+  }
+  setFormRef(node) {
+    this.form = node;
+  }
+  componentWillUnmount() {
+    this.root.parentElement?.removeChild(this.root);
+  }
+  async pdfPreview(url, page) {
+    const res = await fetchPdfPage(url, page);
+    if (res.image !== false) {
+      this.setState({
+        pdfPreviewSrc: res.image,
+        pdfHasPrevPage: res.hasPrev,
+        pdfHasNextPage: res.hasNext,
+        pdfPage: res.currentPage
+      });
+    }
+  }
+  async pdfPrevPage(e) {
+    e.preventDefault();
+    const { item } = this.props;
+    if (!item) return;
+    const url = item.media_permalink;
+    const prevPage = Math.max(1, (this.state.pdfPage || 1) - 1);
+    await this.pdfPreview(url, prevPage);
+  }
+  async pdfNextPage(e) {
+    e.preventDefault();
+    const { item } = this.props;
+    if (!item) return;
+    const url = item.media_permalink;
+    const nextPage = (this.state.pdfPage || 1) + 1;
+    await this.pdfPreview(url, nextPage);
+  }
+  hideModal() {
+    if ("history" in window) {
+      history.replaceState(null, "", "#");
+    }
+    if (this.props.onClose) {
+      this.props.onClose();
+    }
+  }
+  handleClose() {
+    this.hideModal();
+  }
+  isImageMedia(state, props) {
+    if (state.blob && state.blob.type.match(/image/)) {
+      return true;
+    }
+    if (!state.replaced && props.item?.media_type === "image") {
+      return true;
+    }
+    return false;
+  }
+  isSvgMedia(state, props) {
+    if (state.file && state.file.type === "image/svg+xml") {
+      return true;
+    }
+    if (!state.replaced && props.item?.media_type === "svg") {
+      return true;
+    }
+    return false;
+  }
+  isFileMedia(state, props) {
+    if (state.file && state.file.type !== "image/svg+xml") {
+      return true;
+    }
+    if (!state.replaced && props.item?.media_type === "file") {
+      return true;
+    }
+    return false;
+  }
+  isPdfFile(state, props) {
+    if (state.file && state.file.type === "application/pdf") {
+      return true;
+    }
+    if (!state.replaced && props.item?.media_type === "file" && props.item.media_ext.toLowerCase() === "pdf") {
+      return true;
+    }
+    return false;
+  }
+  buildFormData(postName) {
+    const { blob, file, focalPoint, replaced, pdfPreviewSrc } = this.state;
+    const formData = new FormData(this.form);
+    if (blob) {
+      formData.append("media_file", blob);
+    } else if (file) {
+      formData.append("media_file", file);
+    }
+    if (Array.isArray(focalPoint) && focalPoint.length > 0) {
+      formData.append("media[]", "focal_x");
+      formData.append("media[]", "focal_y");
+      formData.append("focal_x", `${focalPoint[0]}`);
+      formData.append("focal_y", `${focalPoint[1]}`);
+    }
+    if (replaced) {
+      formData.append("media[]", "replaced");
+      formData.append("replaced", "true");
+    }
+    if (this.isFileMedia(this.state, this.props) && this.isPdfFile(this.state, this.props) && pdfPreviewSrc) {
+      formData.append("media_pdf_thumbnail", dataURItoBlob(pdfPreviewSrc));
+      formData.append("media[]", "pdf_page");
+      formData.append("pdf_page", String(this.state.pdfPage || 1));
+    }
+    formData.append(postName, "true");
+    formData.append("formToken", window.csrfToken);
+    return formData;
+  }
+  updateStateOnAfterSave(mediaItem) {
+    this.setState({
+      file: null,
+      // メディアを更新した場合はファイルをリセット。リセットしないと再度保存時にメディアを変更していない場合でもファイルが変更されるというアラートが出てしまう。
+      blob: null,
+      // メディアを更新した場合はファイルをリセット。リセットしないと再度保存時にメディアを変更していない場合でもファイルが変更されるというアラートが出てしまう。
+      replaced: false,
+      focalPoint: getFocalPoint(mediaItem),
+      // ローカルで保持している焦点座標の状態を更新（再度モーダルを開いたときに更新を反映するため）
+      pdfPage: parseInt(mediaItem.media_pdf_page, 10) || 1
+      // ローカルで保持しているPDFページの状態を更新（再度モーダルを開いたときに更新を反映するため）
+    });
+  }
+  async update(item) {
+    const { actions } = this.props;
+    const { file, blob } = this.state;
+    const formData = this.buildFormData("ACMS_POST_Media_Update");
+    if (file || blob) {
+      const msg = file ? ACMS.i18n("media.file_changed") : ACMS.i18n("media.img_changed");
+      if (!confirm(msg)) {
+        return;
+      }
+    }
+    const gateResult = await emit("media.update.before", { item, formData });
+    if (gateResult.canceled) {
+      if (gateResult.reason) {
+        alert(gateResult.reason);
+      }
+      return;
+    }
+    const end = pending.splash(ACMS.i18n("media.saving"));
+    getMediaTransport().updateMedia(item.media_id, gateResult.event.formData).then((res) => {
+      end();
+      if ("status" in res && res.status === "failure") {
+        if (res.message) {
+          alert(res.message);
+        } else {
+          alert(ACMS.i18n("media.cannot_edit"));
+        }
+        return;
+      }
+      actions.updateMediaList(res);
+      if (this.props.onUpdate) {
+        this.props.onUpdate(res);
+      }
+      void emit("media.update.success", { item: res });
+      triggerEvent(document, "acms.media-updated", {
+        detail: { data: res },
+        bubbles: true
+      });
+      this.hideModal();
+      this.updateStateOnAfterSave(res);
+    });
+  }
+  async uploadAsNew(item) {
+    const { actions } = this.props;
+    const formData = this.buildFormData("ACMS_POST_Media_UpdateAsNew");
+    const gateResult = await emit("media.update-as-new.before", { item, formData });
+    if (gateResult.canceled) {
+      if (gateResult.reason) {
+        alert(gateResult.reason);
+      }
+      return;
+    }
+    const end = pending.splash(ACMS.i18n("media.saving"));
+    getMediaTransport().updateMediaAsNew(item.media_id, gateResult.event.formData).then((res) => {
+      end();
+      if ("status" in res && res.status === "failure") {
+        if (res.message) {
+          alert(res.message);
+        } else {
+          alert(ACMS.i18n("media.cannot_edit"));
+        }
+        return;
+      }
+      actions.fetchMediaList();
+      if (this.props.onUpdate) {
+        this.props.onUpdate(res);
+      }
+      void emit("media.update-as-new.success", { item: res });
+      this.hideModal();
+      this.updateStateOnAfterSave(res);
+    });
+  }
+  makeTags(label) {
+    if (!label) {
+      return null;
+    }
+    const labels = label.split(delimiter);
+    return labels.map((label2) => ({
+      value: label2,
+      label: label2
+    }));
+  }
+  handleTagsChange(tags) {
+    const value = tags.reduce((val, tag, idx) => {
+      if (idx === 0) {
+        return tag.value;
+      }
+      return `${val}${delimiter}${tag.value}`;
+    }, "");
+    if (this.tagsInputRef.current) {
+      this.tagsInputRef.current.value = value;
+    }
+  }
+  openEditDialog() {
+    this.setState({
+      isEditDialogOpen: true
+    });
+  }
+  blobToDataURL(blob) {
+    return new Promise((resolve, reject) => {
+      const fr = new FileReader();
+      fr.onload = (e) => {
+        if (!(e.target instanceof FileReader)) {
+          reject(new Error("Failed to load blob"));
+          return;
+        }
+        resolve(e.target.result);
+      };
+      fr.readAsDataURL(blob);
+    });
+  }
+  handleEditDialogClose() {
+    this.setState({
+      isEditDialogOpen: false
+    });
+  }
+  handleCrop(blob, focalPoint) {
+    if (blob) {
+      this.blobToDataURL(blob).then((preview) => {
+        if (focalPoint) {
+          this.setState({
+            preview,
+            blob,
+            focalPoint
+          });
+        } else {
+          this.setState({
+            preview,
+            blob
+          });
+        }
+      });
+    }
+    this.setState({
+      isEditDialogOpen: false
+    });
+  }
+  async changeImage(e) {
+    if (!(e.target instanceof HTMLInputElement)) {
+      return;
+    }
+    if (!e.target.files) {
+      return;
+    }
+    const { item } = this.props;
+    if (item === null) {
+      return;
+    }
+    const file = e.target.files[0];
+    const type = file.type.match(/svg/) ? "svg" : file.type.match(/image/) ? "image" : "file";
+    const isHeic = /(heic|heif)/i.test(file.type);
+    if (item.media_type !== type) {
+      alert(ACMS.i18n("media.cannnot_change_type"));
+      return false;
+    }
+    const nextState = {
+      replaced: true
+    };
+    if (type === "image") {
+      if (isHeic) {
+        const { heicTo } = await import(
+          /* webpackChunkName: "heic-to" */
+          "heic-to"
+        );
+        const result = await heicTo({
+          blob: file,
+          type: "image/jpeg"
+        });
+        const blob = Array.isArray(result) ? result[0] : result;
+        if (!(blob instanceof Blob)) {
+          throw new Error("Invalid blob result from heicTo");
+        }
+        const preview = await this.blobToDataURL(blob);
+        nextState.preview = preview;
+        nextState.blob = blob;
+      } else {
+        const [resizeType, largeSize] = ACMS.Config.lgImg.split(":");
+        const { blob, resize } = await resizeImage.getBlobFromFile(file, resizeType, parseInt(largeSize, 10));
+        const preview = await this.blobToDataURL(blob);
+        nextState.preview = preview;
+        if (resize === false || ACMS.Config.mediaClientResize !== "on") {
+          nextState.blob = file;
+        } else {
+          nextState.blob = blob;
+        }
+      }
+    } else if (type === "svg") {
+      const textData = await file.text();
+      const clean = DOMPurify.sanitize(textData, { USE_PROFILES: { svg: true, svgFilters: true } });
+      const reBlob = new Blob([clean], { type: "image/svg+xml" });
+      nextState.file = new File([reBlob], file.name, { type: reBlob.type });
+      nextState.preview = await this.blobToDataURL(nextState.file);
+    } else if (type === "file") {
+      nextState.file = file;
+      if (file.type === "application/pdf") {
+        const url = URL.createObjectURL(file);
+        this.pdfPreview(url, 1);
+      } else {
+        nextState.preview = `${ACMS.Config.root}themes/system/images/fileicon/document.svg`;
+      }
+    }
+    if (this.filenameInputRef.current) {
+      this.filenameInputRef.current.value = file.name;
+    }
+    this.setState(nextState);
+  }
+  imageWidth(size) {
+    const [width] = size.split(" x ");
+    return parseInt(width, 10);
+  }
+  imageHeight(size) {
+    const [, height] = size.split(" x ");
+    return parseInt(height, 10);
+  }
+  render() {
+    const { item, formToken, tags, isOpen } = this.props;
+    const { isEditDialogOpen, preview, pdfHasPrevPage, pdfHasNextPage, pdfPreviewSrc, focalPoint } = this.state;
+    return /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsxs2(
+        Modal2,
+        {
+          ref: this.modalRef,
+          isOpen,
+          onClose: this.handleClose.bind(this),
+          size: "large",
+          container: this.root,
+          onAfterClose: this.handleAfterClose.bind(this),
+          onAfterOpen: this.handleAfterOpen.bind(this),
+          "aria-labelledby": "acms-media-modal-title",
+          children: [
+            /* @__PURE__ */ jsx2(ModalHeader2, { children: ACMS.i18n("media.media_edit") }),
+            /* @__PURE__ */ jsx2(ModalBody2, { children: item && /* @__PURE__ */ jsxs2("form", { className: "acms-admin-form", ref: this.setFormRef.bind(this), children: [
+              /* @__PURE__ */ jsxs2("div", { className: "acms-admin-media-modal-layout", children: [
+                /* @__PURE__ */ jsxs2("div", { className: "acms-admin-media-modal-preview", children: [
+                  this.isImageMedia(this.state, this.props) && /* @__PURE__ */ jsxs2("div", { className: "acms-admin-media-thumb-container acms-admin-margin-bottom-small", children: [
+                    item.media_ext !== "svg" && /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        className: "acms-admin-media-edit-btn acms-admin-media-edit-thumb-btn",
+                        type: "button",
+                        onClick: this.openEditDialog.bind(this),
+                        children: ACMS.i18n("media.edit")
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2("div", { style: { backgroundImage: `url("${preview}")` }, className: "acms-admin-media-thumb" })
+                  ] }),
+                  this.isSvgMedia(this.state, this.props) && /* @__PURE__ */ jsx2("div", { className: "acms-admin-media-thumb-container acms-admin-margin-bottom-small acms-admin-media-thumb-container-assets", children: /* @__PURE__ */ jsx2("div", { className: "acms-admin-media-thumb-assets", style: { width: "80%" }, children: /* @__PURE__ */ jsx2(
+                    "img",
+                    {
+                      src: preview,
+                      style: {
+                        margin: "auto",
+                        display: "block",
+                        width: "auto",
+                        maxWidth: "100%",
+                        objectFit: "contain"
+                      },
+                      alt: ""
+                    }
+                  ) }) }),
+                  this.isFileMedia(this.state, this.props) && (this.isPdfFile(this.state, this.props) ? /* @__PURE__ */ jsxs2("div", { className: "acms-admin-media-thumb-container acms-admin-margin-bottom-small acms-admin-media-thumb-container-assets", children: [
+                    /* @__PURE__ */ jsx2("div", { className: "acms-admin-media-thumb-assets", style: { width: "70%" }, children: /* @__PURE__ */ jsx2(
+                      "img",
+                      {
+                        src: pdfPreviewSrc,
+                        className: "acms-admin-media-thumb-box",
+                        style: {
+                          margin: "auto",
+                          display: "block",
+                          width: "auto",
+                          maxWidth: "100%",
+                          objectFit: "contain"
+                        },
+                        alt: ""
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxs2("div", { style: { marginTop: "5px" }, className: "acms-admin-media-thumb-pager", children: [
+                      pdfHasPrevPage && /* @__PURE__ */ jsxs2(
+                        "button",
+                        {
+                          type: "button",
+                          className: "acms-admin-media-thumb-pager-arrow acms-admin-media-thumb-pager-arrow-left",
+                          onClick: this.pdfPrevPage.bind(this),
+                          children: [
+                            /* @__PURE__ */ jsx2("span", { className: "acms-admin-icon-arrow-small-left" }),
+                            /* @__PURE__ */ jsx2(VisuallyHidden, { children: "\u524D\u30DA\u30FC\u30B8" })
+                          ]
+                        }
+                      ),
+                      pdfHasNextPage && /* @__PURE__ */ jsxs2(
+                        "button",
+                        {
+                          type: "button",
+                          className: "acms-admin-media-thumb-pager-arrow acms-admin-media-thumb-pager-arrow-right",
+                          onClick: this.pdfNextPage.bind(this),
+                          children: [
+                            /* @__PURE__ */ jsx2("span", { className: "acms-admin-icon-arrow-small-right" }),
+                            /* @__PURE__ */ jsx2(VisuallyHidden, { children: "\u6B21\u30DA\u30FC\u30B8" })
+                          ]
+                        }
+                      )
+                    ] })
+                  ] }) : /* @__PURE__ */ jsx2("div", { className: "acms-admin-media-thumb-container acms-admin-margin-bottom-small acms-admin-media-thumb-container-assets", children: /* @__PURE__ */ jsx2("div", { className: "acms-admin-media-thumb-assets", style: { width: "70%" }, children: /* @__PURE__ */ jsx2(
+                    "img",
+                    {
+                      className: "acms-admin-media-thumb-box",
+                      src: preview,
+                      style: { margin: "auto", display: "block", width: "70px" },
+                      alt: ""
+                    }
+                  ) }) }))
+                ] }),
+                /* @__PURE__ */ jsxs2("div", { className: "acms-admin-media-modal-info", children: [
+                  /* @__PURE__ */ jsxs2(Tabs, { children: [
+                    /* @__PURE__ */ jsxs2(TabPanel, { label: ACMS.i18n("media.edit"), id: "media-edit", children: [
+                      /* @__PURE__ */ jsx2(Table, { variant: "unstyled", className: "acms-admin-media-table-edit", children: /* @__PURE__ */ jsxs2(TableBody, { children: [
+                        /* @__PURE__ */ jsxs2(TableRow, { children: [
+                          /* @__PURE__ */ jsxs2(TableHead, { children: [
+                            ACMS.i18n("media.media_change"),
+                            /* @__PURE__ */ jsx2(
+                              "i",
+                              {
+                                className: "acms-admin-icon-tooltip acms-admin-margin-left-mini js-acms-tooltip-hover",
+                                "data-acms-position": "top",
+                                "data-acms-tooltip": ACMS.i18n("media.managed_media_change")
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ jsx2(TableCell, { children: /* @__PURE__ */ jsx2("label", { "aria-label": ACMS.i18n("media.managed_media_change"), children: /* @__PURE__ */ jsx2("input", { type: "file", onChange: this.changeImage.bind(this) }) }) })
+                        ] }),
+                        item.media_type === "file" && /* @__PURE__ */ jsxs2(TableRow, { children: [
+                          /* @__PURE__ */ jsxs2(TableHead, { nowrap: true, children: [
+                            ACMS.i18n("media.status"),
+                            /* @__PURE__ */ jsx2(
+                              "i",
+                              {
+                                className: "acms-admin-icon-tooltip js-acms-tooltip-hover",
+                                "data-acms-position": "top",
+                                "data-acms-tooltip": ACMS.i18n("media.status_settings")
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ jsxs2(TableCell, { children: [
+                            /* @__PURE__ */ jsxs2(
+                              "select",
+                              {
+                                name: "status",
+                                defaultValue: item.media_status,
+                                style: {
+                                  maxWidth: "max-content",
+                                  width: "100%"
+                                },
+                                children: [
+                                  /* @__PURE__ */ jsx2("option", { value: "entry", children: ACMS.i18n("media.follow_media_status") }),
+                                  /* @__PURE__ */ jsx2("option", { value: "open", children: ACMS.i18n("media.open") }),
+                                  /* @__PURE__ */ jsx2("option", { value: "close", children: ACMS.i18n("media.close") }),
+                                  /* @__PURE__ */ jsx2("option", { value: "secret", children: ACMS.i18n("media.secret") })
+                                ]
+                              }
+                            ),
+                            /* @__PURE__ */ jsx2("input", { type: "hidden", name: "media[]", value: "status" })
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ jsxs2(
+                          TableRow,
+                          {
+                            style: {
+                              display: typeof ACMS !== "undefined" && ACMS.Config && ACMS.Config.mediaShowAltAndCaptionOnModal ? "table-row" : "none"
+                            },
+                            children: [
+                              /* @__PURE__ */ jsxs2(TableHead, { nowrap: true, children: [
+                                /* @__PURE__ */ jsx2(
+                                  "label",
+                                  {
+                                    id: `media-modal-filename-label-${item.media_id}`,
+                                    htmlFor: `media-modal-filename-${item.media_id}`,
+                                    children: ACMS.i18n("media.filename")
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx2(
+                                  "i",
+                                  {
+                                    className: "acms-admin-icon-tooltip acms-admin-margin-left-mini js-acms-tooltip-hover",
+                                    "data-acms-position": "top",
+                                    "data-acms-tooltip": ACMS.i18n("media.filename_settings")
+                                  }
+                                )
+                              ] }),
+                              /* @__PURE__ */ jsxs2(TableCell, { children: [
+                                /* @__PURE__ */ jsx2(
+                                  "input",
+                                  {
+                                    ref: this.filenameInputRef,
+                                    type: "text",
+                                    id: `media-modal-filename-${item.media_id}`,
+                                    "aria-labelledby": `media-modal-filename-label-${item.media_id}`,
+                                    defaultValue: item.media_title,
+                                    name: "file_name",
+                                    className: "acms-admin-form-width-full"
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx2("input", { type: "hidden", name: "media[]", value: "file_name" })
+                              ] })
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs2(TableRow, { children: [
+                          /* @__PURE__ */ jsxs2(TableHead, { nowrap: true, children: [
+                            ACMS.i18n("media.tag"),
+                            /* @__PURE__ */ jsx2(
+                              "i",
+                              {
+                                className: "acms-admin-icon-tooltip acms-admin-margin-left-mini js-acms-tooltip-hover",
+                                "data-acms-position": "top",
+                                "data-acms-tooltip": ACMS.i18n("media.managed_tag")
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ jsxs2(TableCell, { children: [
+                            /* @__PURE__ */ jsx2(
+                              CreatableSelect,
+                              {
+                                isMulti: true,
+                                defaultValue: this.makeTags(item.media_label),
+                                className: "acms-admin-form-width-full",
+                                onChange: this.handleTagsChange.bind(this),
+                                options: tags && tags.map((tag) => ({
+                                  label: tag,
+                                  value: tag
+                                })),
+                                placeholder: ACMS.i18n("media.tag_select_placeholder"),
+                                noOptionsMessage: () => ACMS.i18n("media.tag_select_no_options_message"),
+                                formatCreateLabel: (inputValue) => ACMS.i18n("media.add_tag", { name: inputValue }),
+                                isValidNewOption: (inputValue) => inputValue.trim().length > 0,
+                                closeMenuOnSelect: false,
+                                hideSelectedOptions: true
+                              }
+                            ),
+                            /* @__PURE__ */ jsx2(
+                              "input",
+                              {
+                                ref: this.tagsInputRef,
+                                type: "hidden",
+                                defaultValue: item.media_label,
+                                name: "media_label"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx2("input", { type: "hidden", name: "media[]", value: "media_label" })
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ jsxs2(
+                          TableRow,
+                          {
+                            style: {
+                              display: typeof ACMS !== "undefined" && ACMS.Config && ACMS.Config.mediaShowAltAndCaptionOnModal ? "table-row" : "none"
+                            },
+                            children: [
+                              /* @__PURE__ */ jsxs2(TableHead, { nowrap: true, children: [
+                                /* @__PURE__ */ jsx2(
+                                  "label",
+                                  {
+                                    id: `media-modal-caption-label-${item.media_id}`,
+                                    htmlFor: `media-modal-caption-${item.media_id}`,
+                                    children: ACMS.i18n("media.caption")
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx2(
+                                  "i",
+                                  {
+                                    className: "acms-admin-icon-tooltip acms-admin-margin-left-mini js-acms-tooltip-hover",
+                                    "data-acms-position": "top",
+                                    "data-acms-tooltip": ACMS.i18n("media.caption_settings")
+                                  }
+                                )
+                              ] }),
+                              /* @__PURE__ */ jsxs2(TableCell, { children: [
+                                /* @__PURE__ */ jsx2(
+                                  "input",
+                                  {
+                                    type: "text",
+                                    id: `media-modal-caption-${item.media_id}`,
+                                    "aria-labelledby": `media-modal-caption-label-${item.media_id}`,
+                                    defaultValue: item.media_caption,
+                                    name: "field_1",
+                                    className: "acms-admin-form-width-full"
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx2("input", { type: "hidden", name: "media[]", value: "field_1" })
+                              ] })
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs2(
+                          TableRow,
+                          {
+                            style: {
+                              display: typeof ACMS !== "undefined" && ACMS.Config && ACMS.Config.mediaShowAltAndCaptionOnModal ? "table-row" : "none"
+                            },
+                            children: [
+                              /* @__PURE__ */ jsxs2(TableHead, { nowrap: true, children: [
+                                /* @__PURE__ */ jsx2(
+                                  "label",
+                                  {
+                                    id: `media-modal-alt-label-${item.media_id}`,
+                                    htmlFor: `media-modal-alt-${item.media_id}`,
+                                    children: ACMS.i18n("media.alt")
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx2(
+                                  "i",
+                                  {
+                                    className: "acms-admin-icon-tooltip acms-admin-margin-left-mini js-acms-tooltip-hover",
+                                    "data-acms-position": "top",
+                                    "data-acms-tooltip": ACMS.i18n("media.alt_settings")
+                                  }
+                                )
+                              ] }),
+                              /* @__PURE__ */ jsxs2(TableCell, { children: [
+                                /* @__PURE__ */ jsx2(
+                                  AutoResizeTextarea,
+                                  {
+                                    ref: this.altTextareaRef,
+                                    id: `media-modal-alt-${item.media_id}`,
+                                    "aria-labelledby": `media-modal-alt-label-${item.media_id}`,
+                                    defaultValue: item.media_alt,
+                                    name: "field_3",
+                                    className: "acms-admin-form-width-full"
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx2(
+                                  Slot,
+                                  {
+                                    name: "media.edit-modal.field.alt",
+                                    fillProps: {
+                                      item,
+                                      previewSrc: preview,
+                                      getAlt: () => this.altTextareaRef.current?.value ?? "",
+                                      setAlt: (value) => this.altTextareaRef.current?.setValue(value)
+                                    }
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx2("input", { type: "hidden", name: "media[]", value: "field_3" })
+                              ] })
+                            ]
+                          }
+                        ),
+                        item.media_type !== "file" && /* @__PURE__ */ jsxs2(TableRow, { children: [
+                          /* @__PURE__ */ jsxs2(TableHead, { nowrap: true, children: [
+                            /* @__PURE__ */ jsx2(
+                              "label",
+                              {
+                                id: `media-modal-link-label-${item.media_id}`,
+                                htmlFor: `media-modal-link-${item.media_id}`,
+                                children: ACMS.i18n("media.link")
+                              }
+                            ),
+                            /* @__PURE__ */ jsx2(
+                              "i",
+                              {
+                                className: "acms-admin-icon-tooltip acms-admin-margin-left-mini js-acms-tooltip-hover",
+                                "data-acms-position": "top",
+                                "data-acms-tooltip": ACMS.i18n("media.link_settings")
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ jsxs2(TableCell, { children: [
+                            /* @__PURE__ */ jsx2(
+                              "input",
+                              {
+                                type: "text",
+                                id: `media-modal-link-${item.media_id}`,
+                                "aria-labelledby": `media-modal-link-label-${item.media_id}`,
+                                defaultValue: item.media_link,
+                                name: "field_2",
+                                className: "acms-admin-form-width-full"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx2("input", { type: "hidden", name: "media[]", value: "field_2" })
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ jsxs2(TableRow, { children: [
+                          /* @__PURE__ */ jsxs2(TableHead, { nowrap: true, children: [
+                            /* @__PURE__ */ jsx2(
+                              "label",
+                              {
+                                id: `media-modal-memo-label-${item.media_id}`,
+                                htmlFor: `media-modal-memo-${item.media_id}`,
+                                children: ACMS.i18n("media.memo")
+                              }
+                            ),
+                            /* @__PURE__ */ jsx2(
+                              "i",
+                              {
+                                className: "acms-admin-icon-tooltip acms-admin-margin-left-mini js-acms-tooltip-hover",
+                                "data-acms-position": "top",
+                                "data-acms-tooltip": ACMS.i18n("media.memo_settings")
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ jsxs2(TableCell, { children: [
+                            /* @__PURE__ */ jsx2(
+                              "textarea",
+                              {
+                                id: `media-modal-memo-${item.media_id}`,
+                                "aria-labelledby": `media-modal-memo-label-${item.media_id}`,
+                                defaultValue: item.media_text,
+                                name: "field_4",
+                                className: "acms-admin-form-width-full"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx2("input", { type: "hidden", name: "media[]", value: "field_4" })
+                          ] })
+                        ] })
+                      ] }) }),
+                      /* @__PURE__ */ jsx2(Slot, { name: "media.edit-modal.fields", fillProps: { item } })
+                    ] }),
+                    /* @__PURE__ */ jsx2(TabPanel, { label: ACMS.i18n("media.info"), id: "media-info", children: /* @__PURE__ */ jsx2(Table, { variant: "unstyled", className: "acms-admin-media-table-edit", children: /* @__PURE__ */ jsxs2(TableBody, { children: [
+                      /* @__PURE__ */ jsxs2(TableRow, { children: [
+                        /* @__PURE__ */ jsx2(TableHead, { children: ACMS.i18n("media.media_id") }),
+                        /* @__PURE__ */ jsx2(TableCell, { children: /* @__PURE__ */ jsx2("span", { className: "acms-admin-label", children: item.media_id }) })
+                      ] }),
+                      /* @__PURE__ */ jsxs2(TableRow, { children: [
+                        /* @__PURE__ */ jsx2(TableHead, { children: ACMS.i18n("media.upload_date") }),
+                        /* @__PURE__ */ jsxs2(TableCell, { children: [
+                          item.media_datetime,
+                          /* @__PURE__ */ jsx2("input", { type: "hidden", name: "upload_date", value: item.media_datetime }),
+                          /* @__PURE__ */ jsx2("input", { type: "hidden", name: "media[]", value: "upload_date" })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsxs2(TableRow, { children: [
+                        /* @__PURE__ */ jsx2(TableHead, { children: ACMS.i18n("media.user_name") }),
+                        /* @__PURE__ */ jsxs2(TableCell, { children: [
+                          item.media_user_name,
+                          /* @__PURE__ */ jsx2("input", { type: "hidden", name: "user_id", value: item.media_user_id }),
+                          /* @__PURE__ */ jsx2("input", { type: "hidden", name: "media[]", value: "user_id" })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsxs2(TableRow, { children: [
+                        /* @__PURE__ */ jsx2(TableHead, { children: ACMS.i18n("media.last_modified") }),
+                        /* @__PURE__ */ jsx2(TableCell, { children: item.media_last_modified })
+                      ] }),
+                      item.media_last_update_user_name !== "" && /* @__PURE__ */ jsxs2(TableRow, { children: [
+                        /* @__PURE__ */ jsx2(TableHead, { children: ACMS.i18n("media.last_update_user_name") }),
+                        /* @__PURE__ */ jsxs2(TableCell, { children: [
+                          item.media_last_update_user_name,
+                          /* @__PURE__ */ jsx2(
+                            "input",
+                            {
+                              type: "hidden",
+                              name: "last_update_user_id",
+                              value: item.media_last_update_user_id
+                            }
+                          ),
+                          /* @__PURE__ */ jsx2("input", { type: "hidden", name: "media[]", value: "last_update_user_id" })
+                        ] })
+                      ] }),
+                      item.media_type === "image" && /* @__PURE__ */ jsxs2(TableRow, { children: [
+                        /* @__PURE__ */ jsx2(TableHead, { children: ACMS.i18n("media.image_size") }),
+                        /* @__PURE__ */ jsxs2(TableCell, { children: [
+                          item.media_size,
+                          " px"
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsxs2(TableRow, { children: [
+                        /* @__PURE__ */ jsx2(TableHead, { children: ACMS.i18n("media.file_size") }),
+                        /* @__PURE__ */ jsx2(TableCell, { children: formatBytes(item.media_filesize) })
+                      ] })
+                    ] }) }) })
+                  ] }),
+                  /* @__PURE__ */ jsx2("div", { className: "acms-admin-media-clipboard", children: /* @__PURE__ */ jsx2(Table, { variant: "unstyled", className: "acms-admin-table-admin-media-edit", children: /* @__PURE__ */ jsxs2(TableBody, { children: [
+                    this.isFileMedia(this.state, this.props) && /* @__PURE__ */ jsxs2(TableRow, { children: [
+                      /* @__PURE__ */ jsx2(TableHead, { nowrap: true, children: ACMS.i18n("media.entity_path") }),
+                      /* @__PURE__ */ jsxs2(TableCell, { children: [
+                        /* @__PURE__ */ jsxs2("div", { className: "acms-admin-form-input-group", children: [
+                          /* @__PURE__ */ jsx2(
+                            "input",
+                            {
+                              type: "text",
+                              value: decodeURI(item.media_path),
+                              readOnly: true,
+                              className: "acms-admin-form-width-full",
+                              disabled: true,
+                              style: {
+                                cursor: "auto"
+                              }
+                            }
+                          ),
+                          /* @__PURE__ */ jsx2(
+                            CopyToClipboard,
+                            {
+                              text: item.media_path,
+                              tooltipMessage: ACMS.i18n("media.intrinsic_link_copied"),
+                              children: /* @__PURE__ */ jsx2("span", { className: "acms-admin-form-side-btn", children: /* @__PURE__ */ jsx2("button", { type: "button", className: "acms-admin-btn", children: ACMS.i18n("media.copy") }) })
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsx2("p", { style: { fontSize: "12px", marginTop: "5px" }, className: "acms-admin-text-primary", children: ACMS.i18n("media.entity_path_attention") })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs2(TableRow, { children: [
+                      /* @__PURE__ */ jsx2(TableHead, { nowrap: true, children: ACMS.i18n("media.permalink") }),
+                      /* @__PURE__ */ jsxs2(TableCell, { children: [
+                        /* @__PURE__ */ jsxs2("div", { className: "acms-admin-form-input-group", children: [
+                          /* @__PURE__ */ jsx2(
+                            "input",
+                            {
+                              type: "text",
+                              value: item.media_permalink,
+                              readOnly: true,
+                              className: "acms-admin-form-width-full",
+                              disabled: true,
+                              style: {
+                                cursor: "auto"
+                              }
+                            }
+                          ),
+                          /* @__PURE__ */ jsx2(
+                            CopyToClipboard,
+                            {
+                              text: item.media_permalink,
+                              tooltipMessage: ACMS.i18n("media.permalink_copied"),
+                              children: /* @__PURE__ */ jsx2("span", { className: "acms-admin-form-side-btn", children: /* @__PURE__ */ jsx2("button", { type: "button", className: "acms-admin-btn", children: ACMS.i18n("media.copy") }) })
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsx2(
+                          "p",
+                          {
+                            style: { fontSize: "12px", marginTop: "5px", marginBottom: 0 },
+                            className: "acms-admin-text-danger",
+                            children: ACMS.i18n("media.permalink_attention")
+                          }
+                        )
+                      ] })
+                    ] })
+                  ] }) }) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx2("input", { type: "hidden", name: "formToken", value: formToken }),
+              item.media_ext && /* @__PURE__ */ jsx2("input", { type: "hidden", name: "extension", value: item.media_ext.toUpperCase() }),
+              /* @__PURE__ */ jsx2("input", { type: "hidden", name: "type", value: item.media_type }),
+              /* @__PURE__ */ jsx2("input", { type: "hidden", name: "media[]", value: "extension" }),
+              /* @__PURE__ */ jsx2("input", { type: "hidden", name: "media[]", value: "type" }),
+              /* @__PURE__ */ jsx2("input", { type: "hidden", name: "file_size", value: item.media_size }),
+              /* @__PURE__ */ jsx2("input", { type: "hidden", name: "media[]", value: "file_size" }),
+              /* @__PURE__ */ jsx2("input", { type: "hidden", name: "path", value: item.media_path }),
+              /* @__PURE__ */ jsx2("input", { type: "hidden", name: "media[]", value: "path" })
+            ] }) }),
+            /* @__PURE__ */ jsx2(ModalFooter2, { className: "acms-admin-media-modal-footer", children: /* @__PURE__ */ jsxs2(HStack2, { children: [
+              /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "button",
+                  className: "acms-admin-btn acms-admin-media-cancel-btn",
+                  onClick: this.hideModal.bind(this),
+                  children: ACMS.i18n("media.cancel")
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "button",
+                  className: "acms-admin-btn acms-admin-btn-primary",
+                  onClick: () => {
+                    if (item) {
+                      this.uploadAsNew(item);
+                    }
+                  },
+                  children: ACMS.i18n("media.save_as_new")
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "button",
+                  className: "acms-admin-btn acms-admin-btn-primary",
+                  onClick: () => {
+                    if (item) {
+                      this.update(item);
+                    }
+                  },
+                  children: ACMS.i18n("media.save")
+                }
+              ),
+              item && /* @__PURE__ */ jsx2(
+                Slot,
+                {
+                  name: "media.edit-modal.footer",
+                  fillProps: { item, getFormData: () => this.buildFormData("ACMS_POST_Media_Update") }
+                }
+              )
+            ] }) })
+          ]
+        }
+      ),
+      item && /* @__PURE__ */ jsx2(
+        MediaEditModal,
+        {
+          isOpen: isEditDialogOpen,
+          onClose: this.handleEditDialogClose.bind(this),
+          onCrop: this.handleCrop.bind(this),
+          src: preview || item.media_edited,
+          original: item.media_original,
+          focalPoint,
+          width: this.imageWidth(item.media_size),
+          height: this.imageHeight(item.media_size),
+          mediaCropSizes: ACMS.Config.mediaCropSizes,
+          container: this.root
+        }
+      )
+    ] });
+  }
+};
+
+export {
+  actions_exports,
+  MediaModal,
+  reducer_default,
+  rootSaga
+};
+//# sourceMappingURL=chunk-JJTHI4QP.mjs.map