@edifice.io/react 2.0.0-develop-rc.13 → 2.0.0-develop-rc.15

package/dist/modules/multimedia/AudioRecorder/useAudioRecorder.js

@@ -0,0 +1,314 @@
+import { jsx } from "react/jsx-runtime";
+import { useReducer, useRef, useEffect, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import SvgIconLoader from "../../icons/components/IconLoader.js";
+import SvgIconPause from "../../icons/components/IconPause.js";
+import SvgIconPlayFilled from "../../icons/components/IconPlayFilled.js";
+import SvgIconRecordPause from "../../icons/components/IconRecordPause.js";
+import SvgIconRecord from "../../icons/components/IconRecord.js";
+import SvgIconRefresh from "../../icons/components/IconRefresh.js";
+import SvgIconRestart from "../../icons/components/IconRestart.js";
+import SvgIconSave from "../../icons/components/IconSave.js";
+import useWorkspaceFile from "../../../hooks/useWorkspaceFile/useWorkspaceFile.js";
+function useAudioRecorder(onSaveSuccess, onUpdateRecord, hideSaveAction = !1, visibility = "protected", application = "media-library") {
+  var _a;
+  function audioReducer(state, action) {
+    return {
+      ...state,
+      ...action.updatedState
+    };
+  }
+  const [{
+    recordState,
+    playState,
+    micStream,
+    micStreamAudioSourceNode,
+    audioWorkletNode,
+    audioContext,
+    encoderWorker,
+    maxDuration,
+    recordTime,
+    isEncoding
+  }, dispatch] = useReducer(audioReducer, {
+    recordState: "IDLE",
+    isEncoding: !1,
+    playState: "IDLE",
+    recordTime: 0,
+    maxDuration: 180
+    // max duration in s (3 minutes by default)
+  }), audioNameRef = useRef(null), audioRef = useRef(null), leftChannelRef = useRef(), rightChannelRef = useRef(), {
+    t
+  } = useTranslation(), {
+    create
+  } = useWorkspaceFile(), BUFFER_SIZE = 128, DEFAULT_SAMPLE_RATE = 48e3;
+  useEffect(() => {
+    const encoderWorker2 = new Worker("/infra/public/js/audioEncoder.js");
+    return dispatch({
+      type: "update",
+      updatedState: {
+        encoderWorker: encoderWorker2
+      }
+    }), encoderWorker2.postMessage(["init", (audioContext == null ? void 0 : audioContext.sampleRate) || DEFAULT_SAMPLE_RATE]), () => {
+      closeAudioStream(), encoderWorker2.terminate();
+    };
+  }, []);
+  const handleAudioWorkletNodeMessage = (event) => {
+    var _a2, _b;
+    const leftChannel = event.data.inputs[0][0];
+    let rightChannel = event.data.inputs[0][1];
+    (!rightChannel || rightChannel.filter((data) => data !== void 0).length === 0) && (rightChannel = leftChannel), (_a2 = leftChannelRef.current) == null || _a2.push(leftChannel), (_b = rightChannelRef.current) == null || _b.push(rightChannel);
+  }, closeAudioStream = useCallback(() => {
+    micStream == null || micStream.getTracks().forEach((track) => track.stop()), micStreamAudioSourceNode == null || micStreamAudioSourceNode.disconnect(), audioWorkletNode == null || audioWorkletNode.port.removeEventListener("message", handleAudioWorkletNodeMessage), audioWorkletNode == null || audioWorkletNode.port.close(), audioWorkletNode == null || audioWorkletNode.disconnect(), audioContext == null || audioContext.close();
+  }, [audioContext, audioWorkletNode, micStream, micStreamAudioSourceNode]), initRecording = async () => {
+    const micStream2 = await navigator.mediaDevices.getUserMedia({
+      audio: !0
+    }), audioContext2 = new AudioContext({
+      sampleRate: DEFAULT_SAMPLE_RATE
+    }), micStreamAudioSourceNode2 = audioContext2.createMediaStreamSource(micStream2);
+    try {
+      await audioContext2.audioWorklet.addModule("/infra/public/js/audio-recorder-processor.js");
+    } catch (err) {
+      console.error(err);
+    }
+    const audioWorkletNode2 = new AudioWorkletNode(audioContext2, "audio-recorder-processor");
+    audioWorkletNode2.port.addEventListener("message", handleAudioWorkletNodeMessage), dispatch({
+      type: "update",
+      updatedState: {
+        micStream: micStream2,
+        micStreamAudioSourceNode: micStreamAudioSourceNode2,
+        audioContext: audioContext2,
+        recordTime: 0,
+        audioWorkletNode: audioWorkletNode2,
+        recordState: "RECORDING",
+        playState: "IDLE"
+      }
+    }), rightChannelRef.current = [], leftChannelRef.current = [], audioWorkletNode2.port.start(), micStreamAudioSourceNode2.connect(audioWorkletNode2), audioWorkletNode2.connect(audioContext2.destination);
+  }, handleRecord = useCallback(async () => {
+    audioRef.current && (audioRef.current.currentTime = 0, audioRef.current.pause()), recordState === "PAUSED" ? (dispatch({
+      type: "update",
+      updatedState: {
+        recordState: "RECORDING",
+        playState: "IDLE"
+      }
+    }), audioContext == null || audioContext.resume(), onUpdateRecord == null || onUpdateRecord(void 0)) : initRecording();
+  }, [recordState, audioContext, audioRef]), handleRecordPause = useCallback(() => {
+    dispatch({
+      type: "update",
+      updatedState: {
+        recordState: "PAUSED",
+        playState: "IDLE",
+        isEncoding: !0
+      }
+    }), audioContext == null || audioContext.suspend(), encoderWorker && leftChannelRef.current && rightChannelRef.current && (encoderWorker.postMessage(["wav", rightChannelRef.current, leftChannelRef.current, rightChannelRef.current.length * BUFFER_SIZE]), encoderWorker.onmessage = (event) => {
+      const audioUrl = window.URL.createObjectURL(event.data);
+      dispatch({
+        type: "update",
+        updatedState: {
+          isEncoding: !1
+        }
+      }), audioRef.current && (audioRef.current.src = audioUrl), onUpdateRecord && onUpdateRecord(audioUrl);
+    });
+  }, [audioContext, encoderWorker, onUpdateRecord]), handlePlay = useCallback(() => {
+    var _a2;
+    dispatch({
+      type: "update",
+      updatedState: {
+        playState: "PLAYING"
+      }
+    }), ((_a2 = audioRef == null ? void 0 : audioRef.current) != null && _a2.currentTime || audioRef.current) && audioRef.current.play();
+  }, [audioRef]), handlePlayPause = useCallback(() => {
+    var _a2;
+    (_a2 = audioRef == null ? void 0 : audioRef.current) == null || _a2.pause(), dispatch({
+      type: "update",
+      updatedState: {
+        playState: "PAUSED"
+      }
+    });
+  }, [audioRef]), handleReset = useCallback(() => {
+    closeAudioStream(), dispatch({
+      type: "update",
+      updatedState: {
+        playState: "IDLE",
+        recordState: "IDLE"
+      }
+    }), rightChannelRef.current = [], leftChannelRef.current = [], onUpdateRecord && onUpdateRecord(void 0);
+  }, [closeAudioStream, onUpdateRecord]), handleSave = useCallback(async () => {
+    var _a2;
+    const audioName = (_a2 = audioNameRef.current) == null ? void 0 : _a2.value;
+    if (!audioName) {
+      console.error("Audio name is required");
+      return;
+    }
+    return audioRef.current && (audioRef.current.pause(), audioRef.current.currentTime = 0), dispatch({
+      type: "update",
+      updatedState: {
+        recordState: "SAVING",
+        playState: "IDLE"
+      }
+    }), new Promise((resolve, reject) => {
+      try {
+        encoderWorker && leftChannelRef.current && rightChannelRef.current && (encoderWorker.postMessage(["mp3", rightChannelRef.current, leftChannelRef.current, rightChannelRef.current.length * BUFFER_SIZE]), encoderWorker.onmessage = async (event) => {
+          if (event.data instanceof Blob) {
+            const file = new File([event.data], audioName, {
+              type: "audio/mp3"
+            }), resourceAudio = await create(file, {
+              application,
+              visibility
+            });
+            resourceAudio && onSaveSuccess && onSaveSuccess(resourceAudio), dispatch({
+              type: "update",
+              updatedState: {
+                recordState: "SAVED"
+              }
+            }), resolve(resourceAudio);
+          }
+        });
+      } catch (error) {
+        dispatch({
+          type: "update",
+          updatedState: {
+            playState: "IDLE",
+            recordState: "IDLE"
+          }
+        }), console.error("Error while saving", error), reject();
+      }
+    });
+  }, [recordState, onSaveSuccess, closeAudioStream]), handlePlayStop = useCallback(() => {
+    audioRef != null && audioRef.current && (audioRef.current.pause(), audioRef.current.currentTime = 0), dispatch({
+      type: "update",
+      updatedState: {
+        playState: "IDLE"
+      }
+    });
+  }, [audioRef]), handlePlayEnded = useCallback(() => {
+    dispatch({
+      type: "update",
+      updatedState: {
+        playState: "PAUSED"
+      }
+    }), audioRef.current && (audioRef.current.currentTime = 0);
+  }, [audioRef]);
+  useEffect(() => {
+    if (recordState === "RECORDING" && audioContext) {
+      const timer = window.setInterval(
+        // Compute exact elapsed time by diffing the start time.
+        () => {
+          dispatch({
+            type: "update",
+            updatedState: {
+              recordTime: audioContext.currentTime
+            }
+          }), audioContext.currentTime >= maxDuration && (handleRecordPause(), window.clearInterval(timer));
+        },
+        100
+      );
+      return () => window.clearInterval(timer);
+    }
+  }, [audioContext, handleRecordPause, maxDuration, recordState]);
+  const recordText = t(recordState === "IDLE" ? "bbm.audio.record.start" : "bbm.audio.record.resume"), toolbarItems = [{
+    type: "icon",
+    name: "record",
+    visibility: recordState === "RECORDING" ? "hide" : "show",
+    props: {
+      icon: /* @__PURE__ */ jsx(SvgIconRecord, {}),
+      color: "danger",
+      disabled: recordState !== "IDLE" && recordState !== "PAUSED" || recordTime >= maxDuration,
+      onClick: handleRecord,
+      "aria-label": recordText
+    },
+    tooltip: recordText
+  }, {
+    type: "icon",
+    name: "recordPause",
+    visibility: recordState === "RECORDING" ? "show" : "hide",
+    props: {
+      icon: /* @__PURE__ */ jsx(SvgIconRecordPause, {}),
+      color: "danger",
+      disabled: recordState !== "RECORDING",
+      onClick: handleRecordPause,
+      "aria-label": t("bbm.audio.record.pause")
+    },
+    tooltip: t("bbm.audio.record.pause")
+  }, {
+    type: "divider"
+  }, {
+    type: "icon",
+    name: "encoding",
+    visibility: isEncoding ? "show" : "hide",
+    props: {
+      icon: /* @__PURE__ */ jsx(SvgIconLoader, { style: {
+        animation: "loading 1s infinite"
+      } }),
+      disabled: !0
+    }
+  }, {
+    type: "icon",
+    name: "play",
+    visibility: isEncoding || playState === "PLAYING" ? "hide" : "show",
+    props: {
+      icon: /* @__PURE__ */ jsx(SvgIconPlayFilled, {}),
+      disabled: recordState !== "RECORDED" && recordState !== "PAUSED" && recordState !== "SAVED",
+      onClick: handlePlay,
+      "aria-label": t("bbm.audio.play.start")
+    },
+    tooltip: t("bbm.audio.play.start")
+  }, {
+    type: "icon",
+    name: "playPause",
+    visibility: !isEncoding && playState === "PLAYING" ? "show" : "hide",
+    props: {
+      icon: /* @__PURE__ */ jsx(SvgIconPause, {}),
+      onClick: handlePlayPause,
+      "aria-label": t("bbm.audio.play.pause")
+    },
+    tooltip: t("bbm.audio.play.pause")
+  }, {
+    type: "icon",
+    name: "stop",
+    props: {
+      icon: /* @__PURE__ */ jsx(SvgIconRestart, {}),
+      disabled: playState !== "PLAYING" && playState !== "PAUSED",
+      onClick: handlePlayStop,
+      "aria-label": t("bbm.audio.play.stop")
+    },
+    tooltip: t("bbm.audio.play.stop")
+  }, {
+    type: "divider"
+  }, {
+    type: "icon",
+    name: "reset",
+    props: {
+      icon: /* @__PURE__ */ jsx(SvgIconRefresh, {}),
+      disabled: recordState !== "RECORDED" && recordState !== "PAUSED" && playState !== "PLAYING" && playState !== "PAUSED",
+      onClick: handleReset,
+      "aria-label": t("bbm.audio.record.reset")
+    },
+    tooltip: t("bbm.audio.record.reset")
+  }, {
+    type: "icon",
+    name: "save",
+    visibility: hideSaveAction ? "hide" : "show",
+    props: {
+      icon: /* @__PURE__ */ jsx(SvgIconSave, {}),
+      disabled: recordState !== "RECORDED" && recordState !== "PAUSED" && playState !== "PLAYING" && playState !== "PAUSED" || recordState === "SAVED" || !((_a = audioNameRef.current) != null && _a.value),
+      onClick: handleSave,
+      "aria-label": t("bbm.audio.record.save")
+    },
+    tooltip: t("bbm.audio.record.save")
+  }];
+  return {
+    recordState,
+    playState,
+    audioContext,
+    recordTime: recordTime * 1e3,
+    maxDuration: maxDuration * 1e3,
+    audioRef,
+    audioNameRef,
+    toolbarItems,
+    handlePlayEnded,
+    handleSave
+  };
+}
+export {
+  useAudioRecorder as default
+};

package/dist/modules/multimedia/Embed/Embed.js

@@ -0,0 +1,32 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import SvgIconCode from "../../icons/components/IconCode.js";
+import FormControl from "../../../components/Form/FormControl.js";
+import TextArea from "../../../components/TextArea/TextArea.js";
+const Embed = ({
+  onSuccess
+}) => {
+  const {
+    t
+  } = useTranslation(), [htmlContent, setHTMLContent] = useState();
+  function handleContentChange(event) {
+    const HTMLContent = event.target.value;
+    setHTMLContent(HTMLContent), HTMLContent != null && HTMLContent.length ? onSuccess(HTMLContent) : onSuccess();
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "d-flex flex-column flex-fill", children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-32", children: t("bbm.embed.description") }),
+    /* @__PURE__ */ jsxs("div", { className: "mb-8 d-flex", children: [
+      /* @__PURE__ */ jsx(SvgIconCode, { className: "me-8" }),
+      t("bbm.embed.title")
+    ] }),
+    /* @__PURE__ */ jsx(FormControl, { id: "iframeContent", children: /* @__PURE__ */ jsx(TextArea, { size: "md", height: "sm", placeholder: t("bbm.embed.placeholder"), onChange: handleContentChange }) }),
+    !!(htmlContent != null && htmlContent.length) && /* @__PURE__ */ jsx("div", { className: "embed-preview mt-12", dangerouslySetInnerHTML: {
+      __html: htmlContent
+    } }),
+    !(htmlContent != null && htmlContent.length) && /* @__PURE__ */ jsx("div", { className: "embed-preview mt-12 d-flex align-items-center justify-content-center bg-gray-300 text-black-50 rounded-3", children: /* @__PURE__ */ jsx("strong", { children: t("bbm.embed.preview") }) })
+  ] });
+};
+export {
+  Embed as default
+};

package/dist/modules/multimedia/FileCard/FileCard._.d.ts

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as FileCard } from './FileCard';
+declare const meta: Meta<typeof FileCard>;
+export default meta;
+type Story = StoryObj<typeof FileCard>;
+export declare const Base: Story;
+export declare const AudioFile: Story;
+export declare const ImageFile: Story;
+export declare const VideoFile: Story;
+export declare const TextFile: Story;
+export declare const DocFile: Story;
+export declare const PptFile: Story;
+export declare const PdfFile: Story;
+export declare const ZipFile: Story;
+export declare const CsvFile: Story;
+export declare const XlsFile: Story;
+export declare const MdFile: Story;

package/dist/modules/multimedia/FileCard/FileCard.d.ts

@@ -0,0 +1,13 @@
+import { WorkspaceElement } from '@edifice.io/ts-client';
+import { CardProps } from '../../../components';
+export interface FileCardProps extends CardProps {
+    /**
+     * WorkspaceElement
+     * */
+    doc: WorkspaceElement;
+}
+declare const FileCard: {
+    ({ doc, isClickable, isSelectable, isSelected, onClick, className, }: FileCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default FileCard;

package/dist/modules/multimedia/FileCard/FileCard.js

@@ -0,0 +1,94 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { DocumentHelper, odeServices } from "@edifice.io/ts-client";
+import clsx from "clsx";
+import SvgIconLandscape from "../../icons/components/IconLandscape.js";
+import SvgIconMic from "../../icons/components/IconMic.js";
+import SvgIconTextPage from "../../icons/components/IconTextPage.js";
+import SvgIconVideo from "../../icons/components/IconVideo.js";
+import FileIcon from "./FileIcon.js";
+import useThumbnail from "../../../hooks/useThumbnail/useThumbnail.js";
+import Card from "../../../components/Card/Card.js";
+const FileCard = ({
+  doc,
+  isClickable = !0,
+  isSelectable = !1,
+  isSelected = !1,
+  onClick,
+  className
+}) => {
+  var _a;
+  const ref = useRef(null), type = DocumentHelper.getRole(doc);
+  function getRoleMap(type2) {
+    const roleMappings = {
+      csv: {
+        icon: ".CSV",
+        color: "bg-orange-200"
+      },
+      xls: {
+        icon: ".XLS",
+        color: "bg-green-200"
+      },
+      doc: {
+        icon: ".DOC",
+        color: "bg-blue-200"
+      },
+      txt: {
+        icon: ".TXT",
+        color: "bg-blue-200"
+      },
+      pdf: {
+        icon: ".PDF",
+        color: "bg-red-200"
+      },
+      audio: {
+        icon: /* @__PURE__ */ jsx(SvgIconMic, { width: 22, height: 22 }),
+        color: "bg-red-200"
+      },
+      ppt: {
+        icon: ".PPT",
+        color: "bg-yellow-200"
+      },
+      img: {
+        icon: /* @__PURE__ */ jsx(SvgIconLandscape, { width: 22, height: 22 }),
+        color: "bg-green-200"
+      },
+      video: {
+        icon: /* @__PURE__ */ jsx(SvgIconVideo, { width: 22, height: 22 }),
+        color: "bg-purple-200"
+      },
+      zip: {
+        icon: ".ZIP",
+        color: "bg-gray-300"
+      },
+      md: {
+        icon: ".MD",
+        color: "bg-blue-200"
+      },
+      unknown: {
+        icon: /* @__PURE__ */ jsx(SvgIconTextPage, { width: 22, height: 22 }),
+        color: "bg-gray-300"
+      }
+    };
+    return roleMappings[type2] || roleMappings.unknown;
+  }
+  const file = clsx("file position-relative rounded", ((_a = getRoleMap(type ?? "default")) == null ? void 0 : _a.color) ?? "bg-yellow-200"), mediaSrc = type === "img" || type === "video" ? odeServices.workspace().getThumbnailUrl(doc) : null, hasThumbnail = useThumbnail(mediaSrc, {
+    ref
+  }), imageStyles = hasThumbnail && {
+    backgroundImage: `url(${mediaSrc})`,
+    backgroundSize: "cover"
+  };
+  return /* @__PURE__ */ jsx(Card, { className: clsx("card-file", className), isClickable, isSelectable, isSelected, onClick, children: /* @__PURE__ */ jsxs(Card.Body, { space: "8", children: [
+    /* @__PURE__ */ jsx("div", { ref, className: file, style: {
+      aspectRatio: "16/10",
+      ...imageStyles
+    }, children: type !== "img" || type === "img" && !hasThumbnail ? /* @__PURE__ */ jsx(FileIcon, { type, roleMap: getRoleMap(type) }) : null }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+      /* @__PURE__ */ jsx(Card.Text, { children: doc.name }),
+      /* @__PURE__ */ jsx(Card.Text, { className: "text-black-50", children: doc == null ? void 0 : doc.ownerName })
+    ] })
+  ] }) });
+};
+export {
+  FileCard as default
+};

package/dist/modules/multimedia/FileCard/FileIcon.d.ts

@@ -0,0 +1,6 @@
+import { Role } from '@edifice.io/ts-client';
+declare const FileIcon: ({ type, roleMap, }: {
+    type: Role | "unknown";
+    roleMap?: Record<string, string | JSX.Element>;
+}) => import("react/jsx-runtime").JSX.Element;
+export default FileIcon;

package/dist/modules/multimedia/FileCard/FileIcon.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import SvgIconPaperclip from "../../icons/components/IconPaperclip.js";
+const FileIcon = ({
+  type,
+  roleMap
+}) => {
+  const hasNoShadow = typeof (roleMap == null ? void 0 : roleMap.icon) != "string" && type !== "unknown", fileicon = clsx("position-absolute top-50 start-50 translate-middle", {
+    "p-12 rounded-circle shadow": hasNoShadow
+  }, roleMap == null ? void 0 : roleMap.color);
+  return /* @__PURE__ */ jsx("div", { className: fileicon, children: (roleMap == null ? void 0 : roleMap.icon) ?? /* @__PURE__ */ jsx(SvgIconPaperclip, {}) });
+};
+export {
+  FileIcon as default
+};

package/dist/modules/multimedia/ImageEditor/components/ImageEditor.js

@@ -0,0 +1,116 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Stage } from "@pixi/react";
+import { useTranslation } from "react-i18next";
+import useImageEditor from "../hooks/useImageEditor.js";
+import ImageEditorToolbar from "./ImageEditorToolbar.js";
+import Modal from "../../../../components/Modal/Modal.js";
+import LoadingScreen from "../../../../components/LoadingScreen/LoadingScreen.js";
+import FormControl from "../../../../components/Form/FormControl.js";
+import Label from "../../../../components/Label/Label.js";
+import Input from "../../../../components/Input/Input.js";
+import Button from "../../../../components/Button/Button.js";
+const ImageEditor = ({
+  altText: altTextParam,
+  legend: legendParam,
+  image: imageSrc,
+  isOpen,
+  onCancel,
+  onError,
+  onSave
+}) => {
+  const {
+    t
+  } = useTranslation(), [currentOperation, setCurrentOperation] = useState(void 0), [isSaving, setSaving] = useState(!1), [altText, setAltText] = useState(altTextParam ?? ""), [legend, setLegend] = useState(legendParam ?? ""), [dirty, setDirty] = useState(!1), {
+    toBlob,
+    setApplication,
+    startBlur,
+    stopBlur,
+    restore,
+    rotate,
+    startCrop,
+    stopCrop,
+    startResize,
+    stopResize,
+    historyCount,
+    loading
+  } = useImageEditor({
+    imageSrc
+  }), stopAll = () => {
+    stopBlur(), stopCrop(currentOperation === "CROP"), stopResize(currentOperation === "RESIZE");
+  }, handleSave = async () => {
+    try {
+      setSaving(!0), stopAll();
+      const blob = await toBlob();
+      blob && await onSave({
+        blob,
+        legend,
+        altText
+      });
+    } catch (e) {
+      onError == null || onError(`${e}`);
+    } finally {
+      setSaving(!1);
+    }
+  }, handleCancel = () => {
+    onCancel();
+  }, handleOperation = async (operation) => {
+    switch (stopAll(), setCurrentOperation(operation), setDirty(!0), operation) {
+      case "ROTATE": {
+        await rotate();
+        break;
+      }
+      case "UNDO": {
+        await restore();
+        break;
+      }
+      case "CROP": {
+        startCrop();
+        break;
+      }
+      case "RESIZE": {
+        await startResize();
+        break;
+      }
+      case "BLUR": {
+        await startBlur();
+        break;
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs(Modal, { id: "image-editor", isOpen, onModalClose: handleCancel, size: "lg", children: [
+    /* @__PURE__ */ jsx(Modal.Header, { onModalClose: handleCancel, children: /* @__PURE__ */ jsx("span", { className: "h2", children: t("imageeditor.title") }) }),
+    /* @__PURE__ */ jsx(Modal.Body, { className: "d-flex flex-column align-items-center", children: /* @__PURE__ */ jsxs("div", { className: "d-flex flex-column gap-12 w-100 flex-grow-1", children: [
+      /* @__PURE__ */ jsx(ImageEditorToolbar, { handle: handleOperation, historyCount }),
+      /* @__PURE__ */ jsxs("div", { className: "position-relative d-flex flex-column align-items-center justify-content-center flex-grow-1 w-100 image-editor", children: [
+        /* @__PURE__ */ jsx(Stage, { onMount: (app) => setApplication(app), options: {
+          preserveDrawingBuffer: !0,
+          backgroundAlpha: 0,
+          resolution: 1
+        } }),
+        !!loading && /* @__PURE__ */ jsx("div", { className: "position-absolute top-0 start-0 bottom-0 end-0 m-10 d-flex align-items-center justify-content-center bg-black opacity-25", children: /* @__PURE__ */ jsx(LoadingScreen, {}) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "d-flex flex-column flex-md-row m-10 gap-12 w-100", children: [
+        /* @__PURE__ */ jsxs(FormControl, { id: "alt", className: "flex-grow-1", children: [
+          /* @__PURE__ */ jsx(Label, { children: t("alttext") }),
+          /* @__PURE__ */ jsx(Input, { value: altText, onChange: (e) => {
+            setDirty(!0), setAltText(e.target.value);
+          }, placeholder: t("alttext.help"), size: "md", type: "text" })
+        ] }),
+        /* @__PURE__ */ jsxs(FormControl, { id: "legend", className: "flex-grow-1", children: [
+          /* @__PURE__ */ jsx(Label, { children: t("legend") }),
+          /* @__PURE__ */ jsx(Input, { value: legend, onChange: (e) => {
+            setDirty(!0), setLegend(e.target.value);
+          }, placeholder: t("legend.help"), size: "md", type: "text" })
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs(Modal.Footer, { children: [
+      /* @__PURE__ */ jsx(Button, { color: "tertiary", onClick: handleCancel, type: "button", variant: "ghost", children: t("imageeditor.cancel") }),
+      /* @__PURE__ */ jsx(Button, { color: "primary", onClick: handleSave, type: "button", variant: "filled", isLoading: isSaving, disabled: isSaving || !dirty, children: t("imageeditor.save") })
+    ] })
+  ] });
+};
+export {
+  ImageEditor as default
+};

package/dist/modules/multimedia/ImageEditor/components/ImageEditorToolbar.d.ts

@@ -0,0 +1,7 @@
+export type ImageEditorAction = "ROTATE" | "UNDO" | "CROP" | "BLUR" | "RESIZE";
+interface ImageEditorToolbarProps {
+    historyCount: number;
+    handle(operation: ImageEditorAction): void;
+}
+declare const ImageEditorToolbar: ({ historyCount, handle, }: ImageEditorToolbarProps) => import("react/jsx-runtime").JSX.Element;
+export default ImageEditorToolbar;