@collabchron/notiq 0.2.0

package/src/components/editor/nodes/ExcalidrawNode/ExcalidrawComponent.tsx

@@ -0,0 +1,228 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {ExcalidrawInitialElements} from '@/components/ui/excalidraw/ExcalidrawModal';
+import type {AppState, BinaryFiles} from '@excalidraw/excalidraw/types';
+import type {NodeKey} from 'lexical';
+import type {JSX} from 'react';
+
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {useLexicalEditable} from '@lexical/react/useLexicalEditable';
+import {useLexicalNodeSelection} from '@lexical/react/useLexicalNodeSelection';
+import {mergeRegister} from '@lexical/utils';
+import {
+  $getNodeByKey,
+  CLICK_COMMAND,
+  COMMAND_PRIORITY_LOW,
+  isDOMNode,
+} from 'lexical';
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import * as React from 'react';
+
+import ExcalidrawModal from '@/components/ui/excalidraw/ExcalidrawModal';
+import {$isExcalidrawNode} from '.';
+import ExcalidrawImage from './ExcalidrawImage';
+import ImageResizer from './ImageResizer';
+
+export default function ExcalidrawComponent({
+  nodeKey,
+  data,
+  width,
+  height,
+}: {
+  data: string;
+  nodeKey: NodeKey;
+  width: 'inherit' | number;
+  height: 'inherit' | number;
+}): JSX.Element {
+  const [editor] = useLexicalComposerContext();
+  const isEditable = useLexicalEditable();
+  const [isModalOpen, setModalOpen] = useState<boolean>(
+    data === '[]' && editor.isEditable(),
+  );
+  const imageContainerRef = useRef<HTMLDivElement | null>(null);
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+  const captionButtonRef = useRef<HTMLButtonElement | null>(null);
+  const [isSelected, setSelected, clearSelection] =
+    useLexicalNodeSelection(nodeKey);
+  const [isResizing, setIsResizing] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (!isEditable) {
+      if (isSelected) {
+        clearSelection();
+      }
+      return;
+    }
+    return mergeRegister(
+      editor.registerCommand(
+        CLICK_COMMAND,
+        (event: MouseEvent) => {
+          const buttonElem = buttonRef.current;
+          const eventTarget = event.target;
+
+          if (isResizing) {
+            return true;
+          }
+
+          if (
+            buttonElem !== null &&
+            isDOMNode(eventTarget) &&
+            buttonElem.contains(eventTarget)
+          ) {
+            if (!event.shiftKey) {
+              clearSelection();
+            }
+            setSelected(!isSelected);
+            if (event.detail > 1) {
+              setModalOpen(true);
+            }
+            return true;
+          }
+
+          return false;
+        },
+        COMMAND_PRIORITY_LOW,
+      ),
+    );
+  }, [clearSelection, editor, isSelected, isResizing, setSelected, isEditable]);
+
+  const deleteNode = useCallback(() => {
+    setModalOpen(false);
+    return editor.update(() => {
+      const node = $getNodeByKey(nodeKey);
+      if (node) {
+        node.remove();
+      }
+    });
+  }, [editor, nodeKey]);
+
+  const setData = (
+    els: ExcalidrawInitialElements,
+    aps: Partial<AppState>,
+    fls: BinaryFiles,
+  ) => {
+    return editor.update(() => {
+      const node = $getNodeByKey(nodeKey);
+      if ($isExcalidrawNode(node)) {
+        if ((els && els.length > 0) || Object.keys(fls).length > 0) {
+          node.setData(
+            JSON.stringify({
+              appState: aps,
+              elements: els,
+              files: fls,
+            }),
+          );
+        } else {
+          node.remove();
+        }
+      }
+    });
+  };
+
+  const onResizeStart = () => {
+    setIsResizing(true);
+  };
+
+  const onResizeEnd = (
+    nextWidth: 'inherit' | number,
+    nextHeight: 'inherit' | number,
+  ) => {
+    // Delay hiding the resize bars for click case
+    setTimeout(() => {
+      setIsResizing(false);
+    }, 200);
+
+    editor.update(() => {
+      const node = $getNodeByKey(nodeKey);
+
+      if ($isExcalidrawNode(node)) {
+        node.setWidth(nextWidth);
+        node.setHeight(nextHeight);
+      }
+    });
+  };
+
+  const openModal = useCallback(() => {
+    setModalOpen(true);
+  }, []);
+
+  const {
+    elements = [],
+    files = {},
+    appState = {},
+  } = useMemo(() => JSON.parse(data), [data]);
+
+  const closeModal = useCallback(() => {
+    setModalOpen(false);
+    if (elements.length === 0) {
+      editor.update(() => {
+        const node = $getNodeByKey(nodeKey);
+        if (node) {
+          node.remove();
+        }
+      });
+    }
+  }, [editor, nodeKey, elements.length]);
+
+  return (
+    <>
+      {isEditable && isModalOpen && (
+        <ExcalidrawModal
+          initialElements={elements}
+          initialFiles={files}
+          initialAppState={appState}
+          isShown={isModalOpen}
+          onDelete={deleteNode}
+          onClose={closeModal}
+          onSave={(els, aps, fls) => {
+            setData(els, aps, fls);
+            setModalOpen(false);
+          }}
+          closeOnClickOutside={false}
+        />
+      )}
+      {elements.length > 0 && (
+        <button
+          ref={buttonRef}
+          className={`excalidraw-button ${isSelected ? 'selected' : ''}`}>
+          <ExcalidrawImage
+            imageContainerRef={imageContainerRef}
+            className="image"
+            elements={elements}
+            files={files}
+            appState={appState}
+            width={width}
+            height={height}
+          />
+          {isSelected && isEditable && (
+            <div
+              className="image-edit-button"
+              role="button"
+              tabIndex={0}
+              onMouseDown={(event) => event.preventDefault()}
+              onClick={openModal}
+            />
+          )}
+          {(isSelected || isResizing) && isEditable && (
+            <ImageResizer
+              buttonRef={captionButtonRef}
+              showCaption={true}
+              setShowCaption={() => null}
+              imageRef={imageContainerRef}
+              editor={editor}
+              onResizeStart={onResizeStart}
+              onResizeEnd={onResizeEnd}
+              captionsEnabled={true}
+            />
+          )}
+        </button>
+      )}
+    </>
+  );
+}

package/src/components/editor/nodes/ExcalidrawNode/ExcalidrawImage.tsx

@@ -0,0 +1,137 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {
+  ExcalidrawElement,
+  NonDeleted,
+} from '@excalidraw/excalidraw/element/types';
+import type {AppState, BinaryFiles} from '@excalidraw/excalidraw/types';
+import type {JSX} from 'react';
+
+import {exportToSvg} from '@excalidraw/excalidraw';
+import * as React from 'react';
+import {useEffect, useState} from 'react';
+
+type ImageType = 'svg' | 'canvas';
+
+type Dimension = 'inherit' | number;
+
+type Props = {
+  /**
+   * Configures the export setting for SVG/Canvas
+   */
+  appState: AppState;
+  /**
+   * The css class applied to image to be rendered
+   */
+  className?: string;
+  /**
+   * The Excalidraw elements to be rendered as an image
+   */
+  elements: NonDeleted<ExcalidrawElement>[];
+  /**
+   * The Excalidraw files associated with the elements
+   */
+  files: BinaryFiles;
+  /**
+   * The height of the image to be rendered
+   */
+  height?: Dimension;
+  /**
+   * The ref object to be used to render the image
+   */
+  imageContainerRef: React.MutableRefObject<HTMLDivElement | null>;
+  /**
+   * The type of image to be rendered
+   */
+  imageType?: ImageType;
+  /**
+   * The css class applied to the root element of this component
+   */
+  rootClassName?: string | null;
+  /**
+   * The width of the image to be rendered
+   */
+  width?: Dimension;
+};
+
+// exportToSvg has fonts from excalidraw.com
+// We don't want them to be used in open source
+const removeStyleFromSvg_HACK = (svg: SVGElement) => {
+  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,
+  width = 'inherit',
+  height = 'inherit',
+}: Props): JSX.Element {
+  const [Svg, setSvg] = useState<SVGElement | null>(null);
+
+  useEffect(() => {
+    const setContent = async () => {
+      const svg: SVGElement = 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]);
+
+  const containerStyle: React.CSSProperties = {};
+  if (width !== 'inherit') {
+    containerStyle.width = `${width}px`;
+  }
+  if (height !== 'inherit') {
+    containerStyle.height = `${height}px`;
+  }
+
+  return (
+    <div
+      ref={(node) => {
+        if (node) {
+          if (imageContainerRef) {
+            imageContainerRef.current = node;
+          }
+        }
+      }}
+      className={rootClassName ?? ''}
+      style={containerStyle}
+      dangerouslySetInnerHTML={{__html: Svg?.outerHTML ?? ''}}
+    />
+  );
+}

package/src/components/editor/nodes/ExcalidrawNode/ImageResizer.tsx

@@ -0,0 +1,317 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {LexicalEditor} from 'lexical';
+import type {JSX} from 'react';
+
+import {calculateZoomLevel} from '@lexical/utils';
+import * as React from 'react';
+import {useRef} from 'react';
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(Math.max(value, min), max);
+}
+
+const Direction = {
+  east: 1 << 0,
+  north: 1 << 3,
+  south: 1 << 1,
+  west: 1 << 2,
+};
+
+export default function ImageResizer({
+  onResizeStart,
+  onResizeEnd,
+  buttonRef,
+  imageRef,
+  maxWidth,
+  editor,
+  showCaption,
+  setShowCaption,
+  captionsEnabled,
+}: {
+  editor: LexicalEditor;
+  buttonRef: {current: null | HTMLButtonElement};
+  imageRef: {current: null | HTMLElement};
+  maxWidth?: number;
+  onResizeEnd: (width: 'inherit' | number, height: 'inherit' | number) => void;
+  onResizeStart: () => void;
+  setShowCaption: (show: boolean) => void;
+  showCaption: boolean;
+  captionsEnabled: boolean;
+}): JSX.Element {
+  const controlWrapperRef = useRef<HTMLDivElement>(null);
+  const userSelect = useRef({
+    priority: '',
+    value: 'default',
+  });
+  const positioningRef = useRef<{
+    currentHeight: 'inherit' | number;
+    currentWidth: 'inherit' | number;
+    direction: number;
+    isResizing: boolean;
+    ratio: number;
+    startHeight: number;
+    startWidth: number;
+    startX: number;
+    startY: number;
+  }>({
+    currentHeight: 0,
+    currentWidth: 0,
+    direction: 0,
+    isResizing: false,
+    ratio: 0,
+    startHeight: 0,
+    startWidth: 0,
+    startX: 0,
+    startY: 0,
+  });
+  const editorRootElement = editor.getRootElement();
+  // Find max width, accounting for editor padding.
+  const maxWidthContainer = maxWidth
+    ? maxWidth
+    : editorRootElement !== null
+      ? editorRootElement.getBoundingClientRect().width - 20
+      : 100;
+  const maxHeightContainer =
+    editorRootElement !== null
+      ? editorRootElement.getBoundingClientRect().height - 20
+      : 100;
+
+  const minWidth = 100;
+  const minHeight = 100;
+
+  const setStartCursor = (direction: number) => {
+    const ew = direction === Direction.east || direction === Direction.west;
+    const ns = direction === Direction.north || direction === Direction.south;
+    const nwse =
+      (direction & Direction.north && direction & Direction.west) ||
+      (direction & Direction.south && direction & Direction.east);
+
+    const cursorDir = ew ? 'ew' : ns ? 'ns' : nwse ? 'nwse' : 'nesw';
+
+    if (editorRootElement !== null) {
+      editorRootElement.style.setProperty(
+        'cursor',
+        `${cursorDir}-resize`,
+        'important',
+      );
+    }
+    if (document.body !== null) {
+      document.body.style.setProperty(
+        'cursor',
+        `${cursorDir}-resize`,
+        'important',
+      );
+      userSelect.current.value = document.body.style.getPropertyValue(
+        '-webkit-user-select',
+      );
+      userSelect.current.priority = document.body.style.getPropertyPriority(
+        '-webkit-user-select',
+      );
+      document.body.style.setProperty(
+        '-webkit-user-select',
+        `none`,
+        'important',
+      );
+    }
+  };
+
+  const setEndCursor = () => {
+    if (editorRootElement !== null) {
+      editorRootElement.style.setProperty('cursor', 'text');
+    }
+    if (document.body !== null) {
+      document.body.style.setProperty('cursor', 'default');
+      document.body.style.setProperty(
+        '-webkit-user-select',
+        userSelect.current.value,
+        userSelect.current.priority,
+      );
+    }
+  };
+
+  const handlePointerDown = (
+    event: React.PointerEvent<HTMLDivElement>,
+    direction: number,
+  ) => {
+    if (!editor.isEditable()) {
+      return;
+    }
+
+    const image = imageRef.current;
+    const controlWrapper = controlWrapperRef.current;
+
+    if (image !== null && controlWrapper !== null) {
+      event.preventDefault();
+      const {width, height} = image.getBoundingClientRect();
+      const zoom = calculateZoomLevel(image);
+      const positioning = positioningRef.current;
+      positioning.startWidth = width;
+      positioning.startHeight = height;
+      positioning.ratio = width / height;
+      positioning.currentWidth = width;
+      positioning.currentHeight = height;
+      positioning.startX = event.clientX / zoom;
+      positioning.startY = event.clientY / zoom;
+      positioning.isResizing = true;
+      positioning.direction = direction;
+
+      setStartCursor(direction);
+      onResizeStart();
+
+      controlWrapper.classList.add('image-control-wrapper--resizing');
+      image.style.height = `${height}px`;
+      image.style.width = `${width}px`;
+
+      document.addEventListener('pointermove', handlePointerMove);
+      document.addEventListener('pointerup', handlePointerUp);
+    }
+  };
+  const handlePointerMove = (event: PointerEvent) => {
+    const image = imageRef.current;
+    const positioning = positioningRef.current;
+
+    const isHorizontal =
+      positioning.direction & (Direction.east | Direction.west);
+    const isVertical =
+      positioning.direction & (Direction.south | Direction.north);
+
+    if (image !== null && positioning.isResizing) {
+      const zoom = calculateZoomLevel(image);
+      // Corner cursor
+      if (isHorizontal && isVertical) {
+        let diff = Math.floor(positioning.startX - event.clientX / zoom);
+        diff = positioning.direction & Direction.east ? -diff : diff;
+
+        const width = clamp(
+          positioning.startWidth + diff,
+          minWidth,
+          maxWidthContainer,
+        );
+
+        const height = width / positioning.ratio;
+        image.style.width = `${width}px`;
+        image.style.height = `${height}px`;
+        positioning.currentHeight = height;
+        positioning.currentWidth = width;
+      } else if (isVertical) {
+        let diff = Math.floor(positioning.startY - event.clientY / zoom);
+        diff = positioning.direction & Direction.south ? -diff : diff;
+
+        const height = clamp(
+          positioning.startHeight + diff,
+          minHeight,
+          maxHeightContainer,
+        );
+
+        image.style.height = `${height}px`;
+        positioning.currentHeight = height;
+      } else {
+        let diff = Math.floor(positioning.startX - event.clientX / zoom);
+        diff = positioning.direction & Direction.east ? -diff : diff;
+
+        const width = clamp(
+          positioning.startWidth + diff,
+          minWidth,
+          maxWidthContainer,
+        );
+
+        image.style.width = `${width}px`;
+        positioning.currentWidth = width;
+      }
+    }
+  };
+  const handlePointerUp = () => {
+    const image = imageRef.current;
+    const positioning = positioningRef.current;
+    const controlWrapper = controlWrapperRef.current;
+    if (image !== null && controlWrapper !== null && positioning.isResizing) {
+      const width = positioning.currentWidth;
+      const height = positioning.currentHeight;
+      positioning.startWidth = 0;
+      positioning.startHeight = 0;
+      positioning.ratio = 0;
+      positioning.startX = 0;
+      positioning.startY = 0;
+      positioning.currentWidth = 0;
+      positioning.currentHeight = 0;
+      positioning.isResizing = false;
+
+      controlWrapper.classList.remove('image-control-wrapper--resizing');
+
+      setEndCursor();
+      onResizeEnd(width, height);
+
+      document.removeEventListener('pointermove', handlePointerMove);
+      document.removeEventListener('pointerup', handlePointerUp);
+    }
+  };
+  return (
+    <div ref={controlWrapperRef}>
+      {!showCaption && captionsEnabled && (
+        <button
+          className="image-caption-button"
+          ref={buttonRef}
+          onClick={() => {
+            setShowCaption(!showCaption);
+          }}>
+          Add Caption
+        </button>
+      )}
+      <div
+        className="image-resizer image-resizer-n"
+        onPointerDown={(event) => {
+          handlePointerDown(event, Direction.north);
+        }}
+      />
+      <div
+        className="image-resizer image-resizer-ne"
+        onPointerDown={(event) => {
+          handlePointerDown(event, Direction.north | Direction.east);
+        }}
+      />
+      <div
+        className="image-resizer image-resizer-e"
+        onPointerDown={(event) => {
+          handlePointerDown(event, Direction.east);
+        }}
+      />
+      <div
+        className="image-resizer image-resizer-se"
+        onPointerDown={(event) => {
+          handlePointerDown(event, Direction.south | Direction.east);
+        }}
+      />
+      <div
+        className="image-resizer image-resizer-s"
+        onPointerDown={(event) => {
+          handlePointerDown(event, Direction.south);
+        }}
+      />
+      <div
+        className="image-resizer image-resizer-sw"
+        onPointerDown={(event) => {
+          handlePointerDown(event, Direction.south | Direction.west);
+        }}
+      />
+      <div
+        className="image-resizer image-resizer-w"
+        onPointerDown={(event) => {
+          handlePointerDown(event, Direction.west);
+        }}
+      />
+      <div
+        className="image-resizer image-resizer-nw"
+        onPointerDown={(event) => {
+          handlePointerDown(event, Direction.north | Direction.west);
+        }}
+      />
+    </div>
+  );
+}