event.preventDefault()}
+ onClick={openModal}
+ />
+ )}
+ {(isSelected || isResizing) && (
+
null}
+ imageRef={imageContainerRef}
+ editor={editor}
+ onResizeStart={onResizeStart}
+ onResizeEnd={onResizeEnd}
+ captionsEnabled={true}
+ />
+ )}
+
+ )}
+
+ );
+}
diff --git a/src/pages/Note/Hlexical/nodes/ExcalidrawNode/ExcalidrawImage.jsx b/src/pages/Note/Hlexical/nodes/ExcalidrawNode/ExcalidrawImage.jsx
new file mode 100644
index 0000000..9d8dfcd
--- /dev/null
+++ b/src/pages/Note/Hlexical/nodes/ExcalidrawNode/ExcalidrawImage.jsx
@@ -0,0 +1,60 @@
+import {exportToSvg} from '@excalidraw/excalidraw';
+import * as React from 'react';
+import {useEffect, useState} from 'react';
+
+const removeStyleFromSvg_HACK = (svg) => {
+ const styleTag = svg?.firstElementChild?.firstElementChild;
+
+ // Generated SVG is getting double-sized by height and width attributes
+ // We want to match the real size of the SVG element
+ const viewBox = svg.getAttribute('viewBox');
+ if (viewBox != null) {
+ const viewBoxDimensions = viewBox.split(' ');
+ svg.setAttribute('width', viewBoxDimensions[2]);
+ svg.setAttribute('height', viewBoxDimensions[3]);
+ }
+
+ if (styleTag && styleTag.tagName === 'style') {
+ styleTag.remove();
+ }
+};
+
+/**
+ * @explorer-desc
+ * A component for rendering Excalidraw elements as a static image
+ */
+export default function ExcalidrawImage({
+ elements,
+ files,
+ imageContainerRef,
+ appState,
+ rootClassName = null,
+}) {
+ const [Svg, setSvg] = useState(null);
+
+ useEffect(() => {
+ const setContent = async () => {
+ const svg = await exportToSvg({
+ appState,
+ elements,
+ files,
+ });
+ removeStyleFromSvg_HACK(svg);
+
+ svg.setAttribute('width', '100%');
+ svg.setAttribute('height', '100%');
+ svg.setAttribute('display', 'block');
+
+ setSvg(svg);
+ };
+ setContent();
+ }, [elements, files, appState]);
+
+ return (
+
+ );
+}
diff --git a/src/pages/Note/Hlexical/nodes/ExcalidrawNode/ExcalidrawModal.jsx b/src/pages/Note/Hlexical/nodes/ExcalidrawNode/ExcalidrawModal.jsx
new file mode 100644
index 0000000..47e7335
--- /dev/null
+++ b/src/pages/Note/Hlexical/nodes/ExcalidrawNode/ExcalidrawModal.jsx
@@ -0,0 +1,196 @@
+import './ExcalidrawModal.less';
+
+import {Excalidraw} from '@excalidraw/excalidraw';
+import * as React from 'react';
+import {ReactPortal, useEffect, useLayoutEffect, useRef, useState} from 'react';
+import {createPortal} from 'react-dom';
+
+import Button from '../../plugins/Input/Button';
+import Modal from '../../plugins/Input/Modal';
+
+export const useCallbackRefState = () => {
+ const [refValue, setRefValue] =
+ React.useState(null);
+ const refCallback = React.useCallback(
+ (value) => setRefValue(value),
+ [],
+ );
+ return [refValue, refCallback];
+};
+export default function ExcalidrawModal({
+ closeOnClickOutside = false,
+ onSave,
+ initialElements,
+ initialAppState,
+ initialFiles,
+ isShown = false,
+ onDelete,
+ onClose,
+}) {
+ const excaliDrawModelRef = useRef(null);
+ const [excalidrawAPI, excalidrawAPIRefCallback] = useCallbackRefState();
+ const [discardModalOpen, setDiscardModalOpen] = useState(false);
+ const [elements, setElements] =
+ useState(initialElements);
+ const [files, setFiles] = useState(initialFiles);
+
+ useEffect(() => {
+ if (excaliDrawModelRef.current !== null) {
+ excaliDrawModelRef.current.focus();
+ }
+ }, []);
+
+ useEffect(() => {
+ let modalOverlayElement= null;
+
+ const clickOutsideHandler = (event) => {
+ const target = event.target;
+ if (
+ excaliDrawModelRef.current !== null &&
+ !excaliDrawModelRef.current.contains(target) &&
+ closeOnClickOutside
+ ) {
+ onDelete();
+ }
+ };
+
+ if (excaliDrawModelRef.current !== null) {
+ modalOverlayElement = excaliDrawModelRef.current?.parentElement;
+ if (modalOverlayElement !== null) {
+ modalOverlayElement?.addEventListener('click', clickOutsideHandler);
+ }
+ }
+
+ return () => {
+ if (modalOverlayElement !== null) {
+ modalOverlayElement?.removeEventListener('click', clickOutsideHandler);
+ }
+ };
+ }, [closeOnClickOutside, onDelete]);
+
+ useLayoutEffect(() => {
+ const currentModalRef = excaliDrawModelRef.current;
+
+ const onKeyDown = (event) => {
+ if (event.key === 'Escape') {
+ onDelete();
+ }
+ };
+
+ if (currentModalRef !== null) {
+ currentModalRef.addEventListener('keydown', onKeyDown);
+ }
+
+ return () => {
+ if (currentModalRef !== null) {
+ currentModalRef.removeEventListener('keydown', onKeyDown);
+ }
+ };
+ }, [elements, files, onDelete]);
+
+ const save = () => {
+ if (elements.filter((el) => !el.isDeleted).length > 0) {
+ const appState = excalidrawAPI?.getAppState();
+ // We only need a subset of the state
+ const partialState = {
+ exportBackground: appState.exportBackground,
+ exportScale: appState.exportScale,
+ exportWithDarkMode: appState.theme === 'dark',
+ isBindingEnabled: appState.isBindingEnabled,
+ isLoading: appState.isLoading,
+ name: appState.name,
+ theme: appState.theme,
+ viewBackgroundColor: appState.viewBackgroundColor,
+ viewModeEnabled: appState.viewModeEnabled,
+ zenModeEnabled: appState.zenModeEnabled,
+ zoom: appState.zoom,
+ };
+ onSave(elements, partialState, files);
+ } else {
+ // delete node if the scene is clear
+ onDelete();
+ }
+ };
+
+ const discard = () => {
+ if (elements.filter((el) => !el.isDeleted).length === 0) {
+ // delete node if the scene is clear
+ onDelete();
+ } else {
+ //Otherwise, show confirmation dialog before closing
+ setDiscardModalOpen(true);
+ }
+ };
+
+ function ShowDiscardDialog() {
+ return (
+ {
+ setDiscardModalOpen(false);
+ }}
+ closeOnClickOutside={false}>
+ Are you sure you want to discard the changes?
+
+ {' '}
+
+
+
+ );
+ }
+
+ if (isShown === false) {
+ return null;
+ }
+
+ const onChange = (
+ els,
+ _,
+ fls,
+ ) => {
+ setElements(els);
+ setFiles(fls);
+ };
+
+ return createPortal(
+
+
+
+ {discardModalOpen &&
}
+
+
+
+
+
+
+
+