@collabchron/notiq 0.2.0 → 1.0.0

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

@@ -1,228 +0,0 @@
-/**
- * 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

@@ -1,137 +0,0 @@
-/**
- * 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

@@ -1,317 +0,0 @@
-/**
- * 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>
-  );
-}