onchain-lexical-ui 0.0.1

package/src/Input.module.less

@@ -0,0 +1,38 @@
+/**
+ * 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 './const.less';
+
+.Input__wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.Input__label {
+  display: flex;
+  flex: 1;
+  color: #666;
+}
+.Input__input {
+  display: flex;
+  flex: 2;
+  border: 1px solid #999;
+  padding-top: 7px;
+  padding-bottom: 7px;
+  padding-left: 10px;
+  padding-right: 10px;
+  font-size: 16px;
+  border-radius: 0px;
+  min-width: 0;
+  height: @inputHeight;
+  &:focus-visible {
+    outline: none;
+    border-color: @themeColor;
+  };
+}

package/src/KatexEquationAlterer.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.
+ *
+ *
+ */
+
+.KatexEquationAlterer_defaultRow {
+  display: flex;
+  flex-direction: row;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  justify-content: space-between;
+  overflow: hidden;
+}
+
+.KatexEquationAlterer_dialogActions {
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+  margin-top: 20px;
+  margin-bottom: 0;
+  justify-content: right;
+}
+
+.KatexEquationAlterer_centerRow {
+  display: flex;
+  flex-direction: 'row';
+  margin-top: 10px;
+  margin-bottom: 10px;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.KatexEquationAlterer_textArea {
+  width: 100%;
+  resize: none;
+  padding: 7px;
+}

package/src/KatexEquationAlterer.tsx

@@ -0,0 +1,84 @@
+/**
+ * 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 {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import * as React from 'react';
+import {useCallback, useState} from 'react';
+import {ErrorBoundary} from 'react-error-boundary';
+
+import Button from './Button';
+import Styles from './KatexEquationAlterer.module.less';
+import KatexRenderer from './KatexRenderer';
+
+type Props = {
+  initialEquation?: string;
+  onConfirm: (equation: string, inline: boolean) => void;
+};
+
+export default function KatexEquationAlterer({
+  onConfirm,
+  initialEquation = '',
+}: Props): JSX.Element {
+  const [editor] = useLexicalComposerContext();
+  const [equation, setEquation] = useState<string>(initialEquation);
+  const [inline, setInline] = useState<boolean>(true);
+
+  const onClick = useCallback(() => {
+    onConfirm(equation, inline);
+  }, [onConfirm, equation, inline]);
+
+  const onCheckboxChange = useCallback(() => {
+    setInline(!inline);
+  }, [setInline, inline]);
+
+  return (
+    <>
+      <div className={Styles.KatexEquationAlterer_defaultRow}>
+        Inline
+        <input type="checkbox" checked={inline} onChange={onCheckboxChange} />
+      </div>
+      <div className={Styles.KatexEquationAlterer_defaultRow}>Equation </div>
+      <div className={Styles.KatexEquationAlterer_centerRow}>
+        {inline ? (
+          <input
+            onChange={(event) => {
+              setEquation(event.target.value);
+            }}
+            value={equation}
+            className={Styles.KatexEquationAlterer_textArea}
+          />
+        ) : (
+          <textarea
+            onChange={(event) => {
+              setEquation(event.target.value);
+            }}
+            value={equation}
+            className={Styles.KatexEquationAlterer_textArea}
+          />
+        )}
+      </div>
+      <div className={Styles.KatexEquationAlterer_defaultRow}>
+        Visualization{' '}
+      </div>
+      <div className={Styles.KatexEquationAlterer_centerRow}>
+        <ErrorBoundary onError={(e) => editor._onError(e)} fallback={null}>
+          <KatexRenderer
+            equation={equation}
+            inline={false}
+            onDoubleClick={() => null}
+          />
+        </ErrorBoundary>
+      </div>
+      <div className={Styles.KatexEquationAlterer_dialogActions}>
+        <Button onClick={onClick}>Confirm</Button>
+      </div>
+    </>
+  );
+}

package/src/KatexRenderer.tsx

@@ -0,0 +1,73 @@
+/**
+ * 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 katex from 'katex';
+import * as React from 'react';
+import {useEffect, useRef} from 'react';
+
+export default function KatexRenderer({
+  equation,
+  inline,
+  height,
+  onDoubleClick,
+}: Readonly<{
+  equation: string;
+  inline: boolean;
+  height?: React.CSSProperties['height'];
+  onDoubleClick: () => void;
+}>): JSX.Element {
+  const katexElementRef = useRef(null);
+
+  useEffect(() => {
+    const katexElement = katexElementRef.current;
+
+    if (katexElement !== null) {
+      katex.render(equation, katexElement, {
+        displayMode: !inline, // true === block display //
+        errorColor: '#cc0000',
+        output: 'html',
+        strict: 'warn',
+        throwOnError: false,
+        trust: false,
+      });
+    }
+  }, [equation, inline]);
+
+  return (
+    // We use an empty image tag either side to ensure Android doesn't try and compose from the
+    // inner text from Katex. There didn't seem to be any other way of making this work,
+    // without having a physical space.
+    <>
+      <img
+        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+        width="0"
+        height="0"
+        alt=""
+      />
+      <span
+        role="button"
+        tabIndex={-1}
+        onDoubleClick={onDoubleClick}
+        ref={katexElementRef}
+        style={{
+          display: 'inline-block',
+          height,
+          width: !inline ? '100%' : undefined,
+        }}
+      />
+      <img
+        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+        width="0"
+        height="0"
+        alt=""
+      />
+    </>
+  );
+}

package/src/Modal.module.less

@@ -0,0 +1,65 @@
+/**
+ * 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 './const.less';
+
+.Modal__overlay {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  flex-direction: column;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  background-color: transparent;
+  flex-grow: 0px;
+  flex-shrink: 1px;
+  z-index: 999;
+}
+.Modal__modal {
+  min-height: 100px;
+  min-width: 300px;
+  display: flex;
+  flex-grow: 0px;
+  background-color: #fff;
+  flex-direction: column;
+  position: relative;
+  box-shadow: 0 0 10px 0px #00000024;
+  border: 1px solid @themeColor;;
+}
+.Modal__titleBox {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  justify-content: space-between;
+  padding: 0 20px;
+  cursor: all-scroll;
+  border-bottom: 1px solid #ccc;
+  background-color: @themeColor;
+}
+.Modal__contentBox {
+  padding: 24px 20px;
+}
+.Modal__title {
+  color: #fff;
+  font-size: 13px;
+  font-weight: 600;
+  margin: 0px;
+}
+.Modal__closeButton {
+  color: #fff;
+  border: 0px;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  text-align: center;
+  cursor: pointer;
+  background-color: transparent;
+}

package/src/Modal.tsx

@@ -0,0 +1,176 @@
+/**
+ * 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 @typescript-eslint/no-unused-vars */
+/* eslint-disable lexical/no-optional-chaining */
+
+import type {JSX} from 'react';
+
+import {isDOMNode} from 'lexical';
+import * as React from 'react';
+import {ReactNode, useEffect, useRef} from 'react';
+import {createPortal} from 'react-dom';
+import Draggable, {DraggableData, DraggableEvent} from 'react-draggable';
+
+import Styles from './Modal.module.less';
+
+function PortalImpl({
+  onClose,
+  children,
+  title,
+  closeOnClickOutside,
+}: {
+  children: ReactNode;
+  closeOnClickOutside: boolean;
+  onClose: () => void;
+  title: string;
+}) {
+  const modalRef = useRef<HTMLDivElement>(null);
+  const [fixed, setFixed] = React.useState(true);
+  const [disabled, setDisabled] = React.useState(true);
+  const [bounds, setBounds] = React.useState({
+    bottom: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+  });
+  useEffect(() => {
+    if (modalRef.current !== null) {
+      modalRef.current.focus();
+    }
+  }, []);
+  const onStart = React.useCallback(
+    (event: DraggableEvent, uiData: DraggableData) => {
+      const {clientWidth, clientHeight} = window.document.documentElement;
+      const targetRect = modalRef.current?.getBoundingClientRect();
+      if (!targetRect) {
+        return;
+      }
+      setBounds({
+        bottom: clientHeight - (targetRect.bottom - uiData.y),
+        left: -targetRect.left + uiData.x,
+        right: clientWidth - (targetRect.right - uiData.x),
+        top: -targetRect.top + uiData.y,
+      });
+    },
+    [],
+  );
+  useEffect(() => {
+    let modalOverlayElement: HTMLElement | null = null;
+    const handler = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+    const clickOutsideHandler = (event: MouseEvent) => {
+      const target = event.target;
+      if (
+        modalRef.current !== null &&
+        isDOMNode(target) &&
+        !modalRef.current.contains(target) &&
+        closeOnClickOutside
+      ) {
+        onClose();
+      }
+    };
+    const modelElement = modalRef.current;
+    if (modelElement !== null) {
+      modalOverlayElement = modelElement.parentElement;
+      if (modalOverlayElement !== null) {
+        modalOverlayElement.addEventListener('click', clickOutsideHandler);
+      }
+    }
+
+    window.addEventListener('keydown', handler);
+
+    return () => {
+      window.removeEventListener('keydown', handler);
+      if (modalOverlayElement !== null) {
+        modalOverlayElement?.removeEventListener('click', clickOutsideHandler);
+      }
+    };
+  }, [closeOnClickOutside, onClose]);
+
+  const onDialog = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    const target = e.target;
+    if (
+      target instanceof HTMLDivElement &&
+      target.getAttribute('data-modal-root') &&
+      !fixed
+    ) {
+      onClose();
+    }
+  };
+
+  return (
+    <div
+      className={Styles.Modal__overlay}
+      data-modal-root={true}
+      role="presentation"
+      onClick={onDialog}>
+      <Draggable bounds={bounds} disabled={disabled} onStart={onStart}>
+        <div className={Styles.Modal__modal} tabIndex={-1} ref={modalRef}>
+          <div
+            className={Styles.Modal__titleBox}
+            onMouseEnter={() => {
+              if (disabled) {
+                setDisabled(false);
+              }
+            }}
+            onMouseLeave={() => {
+              setDisabled(true);
+            }}>
+            {' '}
+            <span className={Styles.Modal__title}>{title}</span>
+            <button
+              className={Styles.Modal__closeButton}
+              aria-label="Close modal"
+              type="button"
+              onClick={onClose}>
+              <svg
+                fill-rule="evenodd"
+                viewBox="64 64 896 896"
+                focusable="false"
+                data-icon="close"
+                width="1em"
+                height="1em"
+                fill="currentColor"
+                aria-hidden="true">
+                <path d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z" />
+              </svg>
+            </button>
+          </div>
+          <div className={Styles.Modal__contentBox}>
+            <div className={Styles.Modal__content}>{children}</div>
+          </div>
+        </div>
+      </Draggable>
+    </div>
+  );
+}
+
+export default function Modal({
+  onClose,
+  children,
+  title,
+  closeOnClickOutside = false,
+}: {
+  children: ReactNode;
+  closeOnClickOutside?: boolean;
+  onClose: () => void;
+  title: string;
+}): JSX.Element {
+  return createPortal(
+    <PortalImpl
+      onClose={onClose}
+      title={title}
+      closeOnClickOutside={closeOnClickOutside}>
+      {children}
+    </PortalImpl>,
+    document.body,
+  );
+}

package/src/Select.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.
+ *
+ */
+
+:root {
+  --select-border: #393939;
+  --select-focus: #101484;
+  --select-arrow: var(--select-border);
+}
+
+.select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-color: transparent;
+  border: none;
+  padding: 0 1em 0 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  cursor: inherit;
+  line-height: inherit;
+
+  z-index: 1;
+  outline: none;
+
+  min-width: 160px;
+  max-width: 290px;
+  border: 1px solid var(--select-border);
+  border-radius: 0.25em;
+  padding: 0.25em 0.5em;
+  font-size: 1rem;
+  cursor: pointer;
+  line-height: 1.4;
+  background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
+
+}

package/src/Select.tsx

@@ -0,0 +1,37 @@
+/**
+ * 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';
+import SelectStyles from './Select.module.less';
+
+type SelectIntrinsicProps = JSX.IntrinsicElements['select'];
+interface SelectProps extends SelectIntrinsicProps {
+  label: string;
+}
+
+export default function Select({
+  children,
+  label,
+  className,
+  ...other
+}: SelectProps): JSX.Element {
+  return (
+    <div className={Styles.Input__wrapper}>
+      <label style={{marginTop: '-1em'}} className={Styles.Input__label}>
+        {label}
+      </label>
+      <select {...other} className={className || SelectStyles.select}>
+        {children}
+      </select>
+    </div>
+  );
+}

package/src/Skeleton.module.less

@@ -0,0 +1,67 @@
+.skeleton {
+  display: inline-block;
+  :global {
+    div {
+      display: inline-block;
+    }
+    div[data-type='avatar'] {
+      width: 60px;
+      height: 60px;
+      border-radius: 50%;
+      background: #e0e0e0;
+    }
+
+    div[data-type='block'] {
+      height: 15px;
+      background: #e0e0e0;
+      border-radius: 2px;
+      position: relative;
+      overflow: hidden;
+    }
+
+    div[data-type='rect'] {
+      height: 120px;
+      border-radius: 2px;
+      background: #e0e0e0;
+    }
+
+    div[data-type='title'] {
+      height: 25px;
+      background: #e0e0e0;
+      border-radius: 2px;
+    }
+
+    div[data-type='text'] {
+      height: 16px;
+      background: #e0e0e0;
+      border-radius: 2px;
+    }
+
+    div[data-type='button'] {
+      height: 36px;
+      width: 100px;
+      border-radius: 50%;
+      background: #e0e0e0;
+    }
+    
+    div.animated  :local  {
+      background: linear-gradient(
+        90deg,
+        #f0f0f0 25%,
+        #e0e0e0 50%,
+        #f0f0f0 75%
+      );
+      background-size: 200% 100%;
+      animation: shimmer 1.5s infinite;
+      @keyframes shimmer {
+        from {
+          background-position: -200% 0;
+        }
+  
+        to {
+          background-position: 200% 0;
+        }
+      }
+    }
+  }
+}

package/src/Skeleton.tsx

@@ -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.
+ *
+ */
+import Styles from './Skeleton.module.less';
+
+interface SkeletonProps extends BaseComponentProps {
+  type: 'avatar' | 'block' | 'text' | 'button' | 'rect' | 'title';
+}
+
+export default function Skeleton({
+  className,
+  style,
+  type,
+}: SkeletonProps): JSX.Element {
+  return (
+    <div className={Styles.skeleton}>
+      <div
+        data-type={type}
+        className={`${className ?? ''} ${Styles.skeleton} animated`}
+        style={style}
+      />
+    </div>
+  );
+}

package/src/Switch.tsx

@@ -0,0 +1,38 @@
+/**
+ * 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 {useMemo} from 'react';
+
+export default function Switch({
+  checked,
+  onClick,
+  text,
+  id,
+}: Readonly<{
+  checked: boolean;
+  id?: string;
+  onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  text: string;
+}>): JSX.Element {
+  const buttonId = useMemo(() => 'id_' + Math.floor(Math.random() * 10000), []);
+  return (
+    <div className="switch" id={id}>
+      <label htmlFor={buttonId}>{text}</label>
+      <button
+        role="switch"
+        aria-checked={checked}
+        id={buttonId}
+        onClick={onClick}>
+        <span />
+      </button>
+    </div>
+  );
+}