@edifice.io/react 2.0.0-develop-rc.3

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

@@ -0,0 +1,307 @@
+import { jsx } from "react/jsx-runtime";
+import { useReducer, useRef, useEffect, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import useWorkspaceFile from "../../../core/useWorkspaceFile/useWorkspaceFile.js";
+import { Icon } from "../../../components/Icon/Icon.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(Icon, { name: "record" }),
+      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(Icon, { name: "record-pause" }),
+      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(Icon, { name: "loader", style: {
+        animation: "loading 1s infinite"
+      } }),
+      disabled: !0
+    }
+  }, {
+    type: "icon",
+    name: "play",
+    visibility: isEncoding || playState === "PLAYING" ? "hide" : "show",
+    props: {
+      icon: /* @__PURE__ */ jsx(Icon, { name: "play-filled" }),
+      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(Icon, { name: "pause" }),
+      onClick: handlePlayPause,
+      "aria-label": t("bbm.audio.play.pause")
+    },
+    tooltip: t("bbm.audio.play.pause")
+  }, {
+    type: "icon",
+    name: "stop",
+    props: {
+      icon: /* @__PURE__ */ jsx(Icon, { name: "restart" }),
+      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(Icon, { name: "refresh" }),
+      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(Icon, { name: "save" }),
+      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.d.ts

@@ -0,0 +1,5 @@
+export interface EmbedProps {
+    onSuccess: (resource?: string) => void;
+}
+declare const Embed: ({ onSuccess }: EmbedProps) => import("react/jsx-runtime").JSX.Element;
+export default Embed;

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 TextArea from "../../../components/TextArea/TextArea.js";
+import { Icon } from "../../../components/Icon/Icon.js";
+import FormControl from "../../../components/Form/FormControl.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(Icon, { name: "code", 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") }) })
+  ] });
+}, Embed$1 = Embed;
+export {
+  Embed$1 as default
+};

package/dist/modules/multimedia/Embed/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Embed } from './Embed';
+export * from './Embed';

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

@@ -0,0 +1,27 @@
+interface ImageEditorProps {
+    image: string;
+    isOpen: boolean;
+    legend?: string;
+    altText?: string;
+    onCancel(): void;
+    onSave(arg: {
+        blob: Blob;
+        legend: string;
+        altText: string;
+    }): void | Promise<void>;
+    onError?(err: string): void;
+}
+/**
+ * This component display the Image Editor as a Modal
+ *
+ * @param param.altText the initial alternative text of the image
+ * @param param.legend the initial title text of the image
+ * @param param.image the URL of the image to edit
+ * @param param.isOpen whether the modal is visible
+ * @param param.onCancel callback when the modal is closed without saving
+ * @param param.onError callback when the save action failed
+ * @param param.onSave callback when the save action succeed and receive as params the new image as blob and also the new legend and alt
+ * @returns A React Component
+ */
+declare const ImageEditor: ({ altText: altTextParam, legend: legendParam, image: imageSrc, isOpen, onCancel, onError, onSave, }: ImageEditorProps) => import("react/jsx-runtime").JSX.Element;
+export default ImageEditor;

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,
+        altText,
+        legend
+      });
+    } 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") })
+    ] })
+  ] });
+}, ImageEditor$1 = ImageEditor;
+export {
+  ImageEditor$1 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;

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

@@ -0,0 +1,69 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Icon } from "../../../../components/Icon/Icon.js";
+import Toolbar from "../../../../components/Toolbar/Toolbar.js";
+const ImageEditorToolbar = ({
+  historyCount,
+  handle
+}) => {
+  const {
+    t
+  } = useTranslation(), [action, setAction] = useState(void 0), handleAndSave = (action2) => {
+    setAction(action2), handle(action2);
+  }, ImageEditorItems = [{
+    type: "button",
+    name: "undo",
+    props: {
+      color: "tertiary",
+      leftIcon: /* @__PURE__ */ jsx(Icon, { name: "undo" }),
+      "aria-label": t("cancel"),
+      children: t("cancel"),
+      onClick: () => handleAndSave("UNDO"),
+      disabled: historyCount === 0
+    },
+    tooltip: t("cancel")
+  }, {
+    type: "divider",
+    name: "div-1"
+  }, {
+    type: "button",
+    name: "reset",
+    props: {
+      color: "tertiary",
+      leftIcon: /* @__PURE__ */ jsx(Icon, { name: "reset" }),
+      "aria-label": t("rotate"),
+      children: t("rotate"),
+      onClick: () => handleAndSave("ROTATE")
+    },
+    tooltip: t("rotate")
+  }, {
+    type: "button",
+    name: "crop",
+    props: {
+      color: "tertiary",
+      leftIcon: /* @__PURE__ */ jsx(Icon, { name: "crop" }),
+      "aria-label": t("crop"),
+      children: t("crop"),
+      className: action === "CROP" ? "is-selected" : "",
+      onClick: () => handleAndSave("CROP")
+    },
+    tooltip: t("crop")
+  }, {
+    type: "button",
+    name: "blur",
+    props: {
+      color: "tertiary",
+      leftIcon: /* @__PURE__ */ jsx(Icon, { name: "blur" }),
+      "aria-label": t("blur"),
+      children: t("blur"),
+      className: action === "BLUR" ? "is-selected" : "",
+      onClick: () => handleAndSave("BLUR")
+    },
+    tooltip: t("blur")
+  }];
+  return /* @__PURE__ */ jsx(Toolbar, { variant: "no-shadow", align: "left", isBlock: !0, items: ImageEditorItems });
+};
+export {
+  ImageEditorToolbar as default
+};

package/dist/modules/multimedia/ImageEditor/effects/blur.d.ts

@@ -0,0 +1,19 @@
+import * as PIXI from 'pixi.js';
+/**
+ * This function start the blur controler
+ * - drawing cursor
+ * - listening mouse move to move cursor
+ * - listening
+ *
+ * @param application
+ * @param param1
+ */
+export declare function start(application: PIXI.Application, { spriteName }: {
+    spriteName: string;
+}): void;
+/**
+ * This function remove cursor and all mouse event listeners
+ *
+ * @param application the PIXI.Application context
+ */
+export declare function stop(application: PIXI.Application): void;

package/dist/modules/multimedia/ImageEditor/effects/blur.js

@@ -0,0 +1,72 @@
+import * as PIXI from "pixi.js";
+import { getApplicationScale } from "./misc.js";
+import { aggregate } from "../utils/aggregate.js";
+const BRUSH_SIZE = 20, DEBOUNCE = 50, CURSOR_NAME = "BRUSH_CURSOR";
+function drawBrush(points, scale) {
+  const container = new PIXI.Graphics();
+  for (const point of points)
+    point && (container.beginFill(16777215, 1), container.drawCircle(point.x, point.y, BRUSH_SIZE / scale), container.lineStyle(0), container.endFill());
+  return container;
+}
+function drawBlurListener(application, {
+  spriteName
+}) {
+  return aggregate(DEBOUNCE, (event) => application.stage.toLocal(event.global), (points) => {
+    const child = application.stage.getChildByName(spriteName), scale = getApplicationScale(application);
+    if (child == null) return;
+    const newSprite = new PIXI.Sprite(child.texture);
+    newSprite.filters = [
+      new PIXI.BlurFilter(
+        8,
+        // PIXI Default value for strength of the blur effect
+        4,
+        // Quality of the blur effect depending on the scale (4 is the PIXI default value)
+        Math.min(scale, 1)
+      )
+      // Resolution of the blur effect depending on the scale
+    ], newSprite.width = child.width, newSprite.height = child.height, newSprite.scale = new PIXI.Point(1, 1), newSprite.anchor = child.anchor, newSprite.mask = drawBrush(points, scale), child.addChild(newSprite);
+  });
+}
+function drawCursor(application) {
+  removeCursor(application);
+  const scale = getApplicationScale(application), circle = new PIXI.Graphics();
+  return circle.lineStyle(Math.max(1, 1 / scale), 16711680), circle.drawCircle(0, 0, BRUSH_SIZE / scale), circle.endFill(), circle.name = CURSOR_NAME, application.stage.addChild(circle), circle;
+}
+function removeCursor(application) {
+  const child = application.stage.getChildByName(CURSOR_NAME);
+  child && child.removeFromParent();
+}
+function moveCursorListener(application) {
+  return (event) => {
+    if (!application) return;
+    const point = application.stage.toLocal(event.global), child = application.stage.getChildByName(CURSOR_NAME, !0);
+    child && (child.position.x = point.x, child.position.y = point.y);
+  };
+}
+function start(application, {
+  spriteName
+}) {
+  application.stage.interactive = !0;
+  const cursor = drawCursor(application), cursorListener = moveCursorListener(application);
+  application.stage.on("pointermove", cursorListener);
+  const blurListener = drawBlurListener(application, {
+    spriteName
+  });
+  application.stage.on("pointerdown", () => {
+    application.stage.on("pointermove", blurListener);
+  });
+  const stopListening = () => {
+    var _a;
+    (_a = application == null ? void 0 : application.stage) == null || _a.off("pointermove", blurListener);
+  };
+  globalThis.addEventListener("pointerup", stopListening), cursor.once("destroyed", () => {
+    globalThis.removeEventListener("pointerup", stopListening);
+  });
+}
+function stop(application) {
+  removeCursor(application), application.stage.off("pointerdown"), application.stage.off("pointermove");
+}
+export {
+  start,
+  stop
+};