onchain-lexical-ui 0.0.1

package/src/ExcalidrawModal.tsx

@@ -0,0 +1,252 @@
+/**
+ * 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.
+ *
+ */
+/* eslint-disable lexical/no-optional-chaining */
+
+import type {
+  AppState,
+  BinaryFiles,
+  ExcalidrawImperativeAPI,
+  ExcalidrawInitialDataState,
+} from '@excalidraw/excalidraw/types';
+import type {JSX} from 'react';
+
+import {Excalidraw} from '@excalidraw/excalidraw';
+import {isDOMNode} from 'lexical';
+import * as React from 'react';
+import {ReactPortal, useEffect, useLayoutEffect, useRef, useState} from 'react';
+import {createPortal} from 'react-dom';
+
+import Button from './Button';
+import Styles from './ExcalidrawModal.module.less';
+import Modal from './Modal';
+
+export type ExcalidrawInitialElements = ExcalidrawInitialDataState['elements'];
+
+type Props = {
+  closeOnClickOutside?: boolean;
+  /**
+   * The initial set of elements to draw into the scene
+   */
+  initialElements: ExcalidrawInitialElements;
+  /**
+   * The initial set of elements to draw into the scene
+   */
+  initialAppState: AppState;
+  /**
+   * The initial set of elements to draw into the scene
+   */
+  initialFiles: BinaryFiles;
+  /**
+   * Controls the visibility of the modal
+   */
+  isShown?: boolean;
+  /**
+   * Callback when closing and discarding the new changes
+   */
+  onClose: () => void;
+  /**
+   * Completely remove Excalidraw component
+   */
+  onDelete: () => void;
+  /**
+   * Callback when the save button is clicked
+   */
+  onSave: (
+    elements: ExcalidrawInitialElements,
+    appState: Partial<AppState>,
+    files: BinaryFiles,
+  ) => void;
+};
+
+export const useCallbackRefState = () => {
+  const [refValue, setRefValue] =
+    React.useState<ExcalidrawImperativeAPI | null>(null);
+  const refCallback = React.useCallback(
+    (value: ExcalidrawImperativeAPI | null) => setRefValue(value),
+    [],
+  );
+  return [refValue, refCallback] as const;
+};
+
+/**
+ * @explorer-desc
+ * A component which renders a modal with Excalidraw (a painting app)
+ * which can be used to export an editable image
+ */
+export default function ExcalidrawModal({
+  closeOnClickOutside = false,
+  onSave,
+  initialElements,
+  initialAppState,
+  initialFiles,
+  isShown = false,
+  onDelete,
+  onClose,
+}: Props): ReactPortal | null {
+  const excaliDrawModelRef = useRef<HTMLDivElement | null>(null);
+  const [excalidrawAPI, excalidrawAPIRefCallback] = useCallbackRefState();
+  const [discardModalOpen, setDiscardModalOpen] = useState(false);
+  const [elements, setElements] =
+    useState<ExcalidrawInitialElements>(initialElements);
+  const [files, setFiles] = useState<BinaryFiles>(initialFiles);
+
+  useEffect(() => {
+    if (excaliDrawModelRef.current !== null) {
+      excaliDrawModelRef.current.focus();
+    }
+  }, []);
+
+  useEffect(() => {
+    let modalOverlayElement: HTMLElement | null = null;
+
+    const clickOutsideHandler = (event: MouseEvent) => {
+      const target = event.target;
+      if (
+        excaliDrawModelRef.current !== null &&
+        isDOMNode(target) &&
+        !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: KeyboardEvent) => {
+      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 && elements.filter((el) => !el.isDeleted).length > 0) {
+      const appState = excalidrawAPI?.getAppState();
+      // We only need a subset of the state
+      const partialState: Partial<AppState> = {
+        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 = () => {
+    setDiscardModalOpen(true);
+  };
+
+  function ShowDiscardDialog(): JSX.Element {
+    return (
+      <Modal
+        title="Discard"
+        onClose={() => {
+          setDiscardModalOpen(false);
+        }}
+        closeOnClickOutside={false}>
+        Are you sure you want to discard the changes?
+        <div className={Styles.ExcalidrawModal__discardModal}>
+          <Button
+            onClick={() => {
+              setDiscardModalOpen(false);
+              onClose();
+            }}>
+            Discard
+          </Button>{' '}
+          <Button
+            onClick={() => {
+              setDiscardModalOpen(false);
+            }}>
+            Cancel
+          </Button>
+        </div>
+      </Modal>
+    );
+  }
+
+  if (isShown === false) {
+    return null;
+  }
+
+  const onChange = (
+    els: ExcalidrawInitialElements,
+    _: AppState,
+    fls: BinaryFiles,
+  ) => {
+    setElements(els);
+    setFiles(fls);
+  };
+
+  return createPortal(
+    <div className={Styles.ExcalidrawModal__overlay} role="dialog">
+      <div
+        className={Styles.ExcalidrawModal__modal}
+        ref={excaliDrawModelRef}
+        tabIndex={-1}>
+        <div className={Styles.ExcalidrawModal__row}>
+          {discardModalOpen && <ShowDiscardDialog />}
+          <Excalidraw
+            onChange={onChange}
+            excalidrawAPI={excalidrawAPIRefCallback}
+            initialData={{
+              appState: initialAppState || {isLoading: false},
+              elements: initialElements,
+              files: initialFiles,
+            }}
+          />
+          <div className={Styles.ExcalidrawModal__actions}>
+            <button className="action-button" onClick={discard}>
+              Discard
+            </button>
+            <button className="action-button" onClick={save}>
+              Save
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}

package/src/FileInput.tsx

@@ -0,0 +1,40 @@
+/**
+ * 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 {JSX} from 'react';
+
+import * as React from 'react';
+
+import Styles from './Input.module.less';
+
+type Props = Readonly<{
+  'data-test-id'?: string;
+  accept?: string;
+  label: string;
+  onChange: (files: FileList | null) => void;
+}>;
+
+export default function FileInput({
+  accept,
+  label,
+  onChange,
+  'data-test-id': dataTestId,
+}: Props): JSX.Element {
+  return (
+    <div className={Styles.Input__wrapper}>
+      <label className={Styles.Input__label}>{label}</label>
+      <input
+        type="file"
+        accept={accept}
+        className={Styles.Input__input}
+        onChange={(e) => onChange(e.target.files)}
+        data-test-id={dataTestId}
+      />
+    </div>
+  );
+}

package/src/FlashMessage.module.less

@@ -0,0 +1,28 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+.FlashMessage__overlay {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  pointer-events: none;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+}
+.FlashMessage__alert {
+  background-color: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 20px;
+  font-size: 1.5rem;
+  border-radius: 1em;
+  padding: 0.5em 1.5em;
+}

package/src/FlashMessage.tsx

@@ -0,0 +1,31 @@
+/**
+ * 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 {JSX} from 'react';
+
+import {ReactNode} from 'react';
+import {createPortal} from 'react-dom';
+
+import Styles from './FlashMessage.module.less';
+
+export interface FlashMessageProps {
+  children: ReactNode;
+}
+
+export default function FlashMessage({
+  children,
+}: FlashMessageProps): JSX.Element {
+  return createPortal(
+    <div className={Styles.FlashMessage__overlay} role="dialog">
+      <p className={Styles.FlashMessage__alert} role="alert">
+        {children}
+      </p>
+    </div>,
+    document.body,
+  );
+}

package/src/Icon/index.module.less

@@ -0,0 +1,4 @@
+.icon {
+  font-size: 16px;
+  color: #666666;
+}

package/src/Icon/index.tsx

@@ -0,0 +1,32 @@
+/**
+ * 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 {IconFontProps} from '@ant-design/icons/lib/components/IconFont';
+
+import {createFromIconfontCN} from '@ant-design/icons';
+import {useSettings} from 'onchain-lexical-context/settings';
+import React from 'react';
+
+import Styles from './index.module.less';
+
+export const AliIconFontFn = (scriptUrl = '/font/iconfont.js') => {
+  return createFromIconfontCN({
+    scriptUrl,
+  });
+};
+
+export const Icon: React.FC<IconFontProps<string>> = ({type, className, ...props}) => {
+  const {extra} = useSettings();
+  const AliIconFont = AliIconFontFn(extra.iconScriptUrl);
+  return (
+    <AliIconFont
+      {...props}
+      className={`${Styles.icon} ${className}`}
+      type={type}
+    />
+  );
+};

package/src/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>
+  );
+}