onchain-lexical-ui 0.0.1

package/src/DropDown.tsx

@@ -0,0 +1,267 @@
+/**
+ * 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 {isDOMNode} from 'lexical';
+import * as React from 'react';
+import {
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {createPortal} from 'react-dom';
+
+import Styles from './DropDown.module.less';
+
+type DropDownContextType = {
+  registerItem: (ref: React.RefObject<HTMLButtonElement>) => void;
+};
+
+const DropDownContext = React.createContext<DropDownContextType | null>(null);
+
+const dropDownPadding = 4;
+
+export function DropDownItem({
+  children,
+  className,
+  onClick,
+  title,
+}: {
+  children: React.ReactNode;
+  className: string;
+  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  title?: string;
+}) {
+  const ref = useRef<HTMLButtonElement>(null);
+
+  const dropDownContext = React.useContext(DropDownContext);
+
+  if (dropDownContext === null) {
+    throw new Error('DropDownItem must be used within a DropDown');
+  }
+
+  const {registerItem} = dropDownContext;
+
+  useEffect(() => {
+    if (ref && ref.current) {
+      registerItem(ref);
+    }
+  }, [ref, registerItem]);
+
+  return (
+    <button
+      className={className}
+      onClick={onClick}
+      ref={ref}
+      title={title}
+      type="button">
+      {children}
+    </button>
+  );
+}
+
+function DropDownItems({
+  children,
+  dropDownRef,
+  onClose,
+}: {
+  children: React.ReactNode;
+  dropDownRef: React.Ref<HTMLDivElement>;
+  onClose: () => void;
+}) {
+  const [items, setItems] = useState<React.RefObject<HTMLButtonElement>[]>();
+  const [highlightedItem, setHighlightedItem] =
+    useState<React.RefObject<HTMLButtonElement>>();
+
+  const registerItem = useCallback(
+    (itemRef: React.RefObject<HTMLButtonElement>) => {
+      setItems((prev) => (prev ? [...prev, itemRef] : [itemRef]));
+    },
+    [setItems],
+  );
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (!items) {
+      return;
+    }
+
+    const key = event.key;
+
+    if (['Escape', 'ArrowUp', 'ArrowDown', 'Tab'].includes(key)) {
+      event.preventDefault();
+    }
+
+    if (key === 'Escape' || key === 'Tab') {
+      onClose();
+    } else if (key === 'ArrowUp') {
+      setHighlightedItem((prev) => {
+        if (!prev) {
+          return items[0];
+        }
+        const index = items.indexOf(prev) - 1;
+        return items[index === -1 ? items.length - 1 : index];
+      });
+    } else if (key === 'ArrowDown') {
+      setHighlightedItem((prev) => {
+        if (!prev) {
+          return items[0];
+        }
+        return items[items.indexOf(prev) + 1];
+      });
+    }
+  };
+
+  const contextValue = useMemo(
+    () => ({
+      registerItem,
+    }),
+    [registerItem],
+  );
+
+  useEffect(() => {
+    if (items && !highlightedItem) {
+      setHighlightedItem(items[0]);
+    }
+
+    if (highlightedItem && highlightedItem.current) {
+      highlightedItem.current.focus();
+    }
+  }, [items, highlightedItem]);
+
+  return (
+    <DropDownContext.Provider value={contextValue}>
+      <div
+        className={`${Styles.dropdown}`}
+        ref={dropDownRef}
+        onKeyDown={handleKeyDown}>
+        {children}
+      </div>
+    </DropDownContext.Provider>
+  );
+}
+
+export default function DropDown({
+  disabled = false,
+  buttonLabel,
+  buttonAriaLabel,
+  buttonClassName,
+  buttonIconClassName,
+  children,
+  stopCloseOnClickSelf,
+}: {
+  disabled?: boolean;
+  buttonAriaLabel?: string;
+  buttonClassName: string;
+  buttonIconClassName?: string;
+  buttonLabel?: string;
+  children: ReactNode;
+  stopCloseOnClickSelf?: boolean;
+}): JSX.Element {
+  const dropDownRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const [showDropDown, setShowDropDown] = useState(false);
+
+  const handleClose = () => {
+    setShowDropDown(false);
+    if (buttonRef && buttonRef.current) {
+      buttonRef.current.focus();
+    }
+  };
+
+  useEffect(() => {
+    const button = buttonRef.current;
+    const dropDown = dropDownRef.current;
+
+    if (showDropDown && button !== null && dropDown !== null) {
+      const {top, left} = button.getBoundingClientRect();
+      dropDown.style.top = `${top + button.offsetHeight + dropDownPadding}px`;
+      dropDown.style.left = `${Math.min(
+        left,
+        window.innerWidth - dropDown.offsetWidth - 20,
+      )}px`;
+    }
+  }, [dropDownRef, buttonRef, showDropDown]);
+
+  useEffect(() => {
+    const button = buttonRef.current;
+
+    if (button !== null && showDropDown) {
+      const handle = (event: MouseEvent) => {
+        const target = event.target;
+        if (!isDOMNode(target)) {
+          return;
+        }
+        if (stopCloseOnClickSelf) {
+          if (dropDownRef.current && dropDownRef.current.contains(target)) {
+            return;
+          }
+        }
+        if (!button.contains(target)) {
+          setShowDropDown(false);
+        }
+      };
+      document.addEventListener('click', handle);
+
+      return () => {
+        document.removeEventListener('click', handle);
+      };
+    }
+  }, [dropDownRef, buttonRef, showDropDown, stopCloseOnClickSelf]);
+
+  useEffect(() => {
+    const handleButtonPositionUpdate = () => {
+      if (showDropDown) {
+        const button = buttonRef.current;
+        const dropDown = dropDownRef.current;
+        if (button !== null && dropDown !== null) {
+          const {top} = button.getBoundingClientRect();
+          const newPosition = top + button.offsetHeight + dropDownPadding;
+          if (newPosition !== dropDown.getBoundingClientRect().top) {
+            dropDown.style.top = `${newPosition}px`;
+          }
+        }
+      }
+    };
+
+    document.addEventListener('scroll', handleButtonPositionUpdate);
+
+    return () => {
+      document.removeEventListener('scroll', handleButtonPositionUpdate);
+    };
+  }, [buttonRef, dropDownRef, showDropDown]);
+
+  return (
+    <>
+      <button
+        type="button"
+        disabled={disabled}
+        aria-label={buttonAriaLabel || buttonLabel}
+        className={buttonClassName}
+        onClick={() => setShowDropDown(!showDropDown)}
+        ref={buttonRef}>
+        {buttonIconClassName && <span className={buttonIconClassName} />}
+        {buttonLabel && (
+          <span className="text dropdown-button-text">{buttonLabel}</span>
+        )}
+        <i className="chevron-down" />
+      </button>
+
+      {showDropDown &&
+        createPortal(
+          <DropDownItems dropDownRef={dropDownRef} onClose={handleClose}>
+            {children}
+          </DropDownItems>,
+          document.body,
+        )}
+    </>
+  );
+}

package/src/DropdownColorPicker.tsx

@@ -0,0 +1,41 @@
+/**
+ * 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 * as React from 'react';
+
+import ColorPicker from './ColorPicker';
+import DropDown from './DropDown';
+
+type Props = {
+  disabled?: boolean;
+  buttonAriaLabel?: string;
+  buttonClassName: string;
+  buttonIconClassName?: string;
+  buttonLabel?: string;
+  title?: string;
+  stopCloseOnClickSelf?: boolean;
+  color: string;
+  onChange?: (color: string, skipHistoryStack: boolean) => void;
+};
+
+export default function DropdownColorPicker({
+  disabled = false,
+  stopCloseOnClickSelf = true,
+  color,
+  onChange,
+  ...rest
+}: Props) {
+  return (
+    <DropDown
+      {...rest}
+      disabled={disabled}
+      stopCloseOnClickSelf={stopCloseOnClickSelf}>
+      <ColorPicker color={color} onChange={onChange} />
+    </DropDown>
+  );
+}

package/src/EditorShellStyles/index.module.less

@@ -0,0 +1,43 @@
+.editor-shell {
+  width: 100%;
+  border-radius: 2px;
+  max-width: 1100px;
+  color: #000;
+  position: relative;
+  font-weight: 400;
+
+  :global {
+    .editor-container {
+      background: #fff;
+      position: relative;
+      display: block;
+      // border-bottom-left-radius: 10px;
+      // border-bottom-right-radius: 10px;
+      max-height: calc(100vh - 200px);
+      overflow-y: auto;
+    }
+
+    .editor-container.tree-view {
+      border-radius: 0;
+    }
+
+    .editor-container.plain-text {
+      border-top-left-radius: 10px;
+      border-top-right-radius: 10px;
+    }
+    .chevron-down {
+      background-color: transparent;
+      background-size: contain;
+      display: inline-block;
+      height: 8px;
+      width: 8px;
+    }
+    .keyword {
+      color: rgb(241, 118, 94);
+      font-weight: bold;
+    }
+  }
+}
+div.editor-shell {
+  line-height: 1.7;
+}

package/src/EditorShellStyles/index.tsx

@@ -0,0 +1,18 @@
+/**
+ * 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 * as React from 'react';
+
+import Styles from './index.module.less';
+
+const EditorShellStyles: React.FC<{
+  children: React.ReactNode;
+}> = ({children}) => {
+  return <div className={Styles['editor-shell']}>{children}</div>;
+};
+
+export default EditorShellStyles;

package/src/EquationEditor.module.less

@@ -0,0 +1,41 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+.EquationEditor_inlineEditor {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  outline: 0;
+  color: #8421a2;
+  background-color: inherit;
+  resize: none;
+}
+
+.EquationEditor_blockEditor {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  outline: 0;
+  color: #8421a2;
+  background-color: inherit;
+  resize: none;
+  width: 100%;
+}
+
+.EquationEditor_inputBackground {
+  background-color: #eee;
+  padding: 0 4px;
+  margin: 0 2px;
+  border-radius: 2px;
+}
+
+.EquationEditor_dollarSign {
+  text-align: left;
+  color: #b0b0b0;
+}

package/src/EquationEditor.tsx

@@ -0,0 +1,49 @@
+/**
+ * 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, Ref, RefObject} from 'react';
+
+import {ChangeEvent, forwardRef} from 'react';
+
+import Styles from './EquationEditor.module.less';
+
+type BaseEquationEditorProps = {
+  equation: string;
+  inline: boolean;
+  setEquation: (equation: string) => void;
+};
+
+function EquationEditor(
+  {equation, setEquation, inline}: BaseEquationEditorProps,
+  forwardedRef: Ref<HTMLInputElement | HTMLTextAreaElement>,
+): JSX.Element {
+  const onChange = (event: ChangeEvent) => {
+    setEquation((event.target as HTMLInputElement).value);
+  };
+
+  return (
+    <div className={Styles.EquationEditor_inputBackground}>
+      <span className={Styles.EquationEditor_dollarSign}>
+        {inline ? '' : '$'}
+        {'$'}
+      </span>
+      <textarea
+        className={Styles.EquationEditor_blockEditor}
+        value={equation}
+        onChange={onChange}
+        ref={forwardedRef as RefObject<HTMLTextAreaElement>}
+      />
+      <span className={Styles.EquationEditor_dollarSign}>
+        {'$'}
+        {inline ? '' : '$'}
+      </span>
+    </div>
+  );
+}
+
+export default forwardRef(EquationEditor);

package/src/ExcalidrawModal.module.less

@@ -0,0 +1,62 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+.ExcalidrawModal__overlay {
+  display: flex;
+  align-items: center;
+  position: fixed;
+  flex-direction: column;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  flex-grow: 0px;
+  flex-shrink: 1px;
+  z-index: 100;
+  background-color: rgba(40, 40, 40, 0.6);
+}
+.ExcalidrawModal__actions {
+  text-align: end;
+  position: absolute;
+  right: 5px;
+  top: 5px;
+  z-index: 1;
+}
+.ExcalidrawModal__actions button {
+  background-color: #fff;
+  border-radius: 5px;
+}
+.ExcalidrawModal__row {
+  position: relative;
+  padding: 40px 5px 5px;
+  width: 70vw;
+  height: 70vh;
+  border-radius: 8px;
+  box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
+}
+.ExcalidrawModal__row > div {
+  border-radius: 5px;
+}
+.ExcalidrawModal__modal {
+  position: relative;
+  z-index: 10;
+  top: 50px;
+  width: auto;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  background-color: #eee;
+}
+.ExcalidrawModal__discardModal {
+  margin-top: 60px;
+  text-align: center;
+}