onchain-lexical-ui 0.0.13 → 0.0.14

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "onchain-lexical-ui",
   "license": "MIT",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "sideEffects": false,
   "dependencies": {
     "@ant-design/icons": "^6.0.0",
@@ -10,7 +10,8 @@
     "@lexical/utils": "^0.30.0",
     "katex": "^0.16.22",
     "lexical": "0.30.0",
-    "onchain-lexical-context": "^0.0.13",
+    "onchain-lexical-context": "^0.0.14",
+    "onchain-utility": "^0.0.15",
     "react-draggable": "^4.5.0"
   },
   "browser": {

package/src/Button.module.less

@@ -6,20 +6,40 @@
  *
  *
  */
+@import './const.less';
 
 .Button__root {
-  padding-top: 10px;
-  padding-bottom: 10px;
-  padding-left: 15px;
-  padding-right: 15px;
+  color: #333;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-left: 5px;
+  padding-right: 5px;
   border: 0px;
-  background-color: #eee;
   border-radius: 2px;
   cursor: pointer;
-  font-size: 14px;
-}
-.Button__root:hover {
-  background-color: #ddd;
+  font-size: 12px;
+  height: 30px;
+  min-width: 72px;
+  transition: background-color 0.3s;
+  &:hover {
+    background-color: #ddd;
+  }
+  &[data-type='primary'] {
+    color: #fff;
+    background-color: @themeColor;
+    &:hover {
+      background-color: @themeColorHover;
+    }
+  }
+
+  &.Button__disabled {
+    color: #999;
+    cursor: not-allowed;
+    &[data-type='primary'],
+    &:hover {
+      background-color: #eee;
+    }
+  }
 }
 .Button__small {
   padding-top: 5px;
@@ -28,9 +48,3 @@
   padding-right: 10px;
   font-size: 13px;
 }
-.Button__disabled {
-  cursor: not-allowed;
-}
-.Button__disabled:hover {
-  background-color: #eee;
-}

package/src/Button.tsx

@@ -22,6 +22,7 @@ export default function Button({
   disabled,
   small,
   title,
+  type,
 }: {
   'data-test-id'?: string;
   children: ReactNode;
@@ -30,6 +31,7 @@ export default function Button({
   onClick: () => void;
   small?: boolean;
   title?: string;
+  type?: 'primary';
 }): JSX.Element {
   return (
     <button
@@ -43,6 +45,7 @@ export default function Button({
       onClick={onClick}
       title={title}
       aria-label={title}
+      data-type={type}
       {...(dataTestId && {'data-test-id': dataTestId})}>
       {children}
     </button>

package/src/ColorPicker.tsx

@@ -44,7 +44,7 @@ const basicColors = [
   '#ffffff',
 ];
 
-const WIDTH = 214;
+const WIDTH = 267;
 const HEIGHT = 150;
 
 export default function ColorPicker({
@@ -116,7 +116,7 @@ export default function ColorPicker({
 
   return (
     <div
-      className={Styles['color-picker-wrapper']}
+      className={`${Styles['color-picker-wrapper']} color-picker-wrapper`}
       style={{width: WIDTH}}
       ref={innerDivRef}>
       <TextInput label="Hex" onChange={onSetHex} value={inputColor} />

package/src/Dialog.module.less

@@ -18,6 +18,8 @@
   flex-direction: column;
   justify-content: right;
   button {
-    margin-bottom: 20px;
+    &:not(:nth-last-child(1)) {
+      margin-bottom: 20px;
+    }
   }
 }

package/src/DropDown.tsx

@@ -194,6 +194,25 @@ function DropDownItems({
   );
 }
 
+export type ShouldUpdateFunc<T> = (prev?: T, next?: T) => boolean;
+
+const defaultShouldUpdate = <T,>(a?: T, b?: T) => !Object.is(a, b);
+
+function usePrevious<T>(
+  state: T,
+  shouldUpdate: ShouldUpdateFunc<T> = defaultShouldUpdate,
+): T | undefined {
+  const prevRef = useRef<T>();
+  const curRef = useRef<T>();
+
+  if (shouldUpdate(curRef.current, state)) {
+    prevRef.current = curRef.current;
+    curRef.current = state;
+  }
+
+  return prevRef.current;
+}
+
 export default function DropDown({
   disabled = false,
   showIcon = true,
@@ -226,6 +245,7 @@ export default function DropDown({
   const [showDropDown, setShowDropDown] = useState(false);
   const {extra} = useSettings();
   const [zIndex, setZIndex] = useState(100);
+  const previousShowDropDown = usePrevious(showDropDown);
 
   const handleClose = () => {
     setShowDropDown(false);
@@ -235,13 +255,15 @@ export default function DropDown({
   };
 
   useEffect(() => {
-    if (showDropDown) {
-      if (extra.getZIndex) {
-        setZIndex(extra.getZIndex());
-      }
-    } else {
-      if (extra.reduceZIndex) {
-        extra.reduceZIndex();
+    if (Boolean(previousShowDropDown) !== showDropDown) {
+      if (showDropDown) {
+        if (extra.getZIndex) {
+          setZIndex(extra.getZIndex());
+        }
+      } else {
+        if (extra.reduceZIndex) {
+          extra.reduceZIndex();
+        }
       }
     }
   }, [showDropDown]);

package/src/EditorShellStyles/index.module.less

@@ -4,7 +4,7 @@
   width: 100%;
   // border-radius: 2px;
   // max-width: 1100px;
-  color: #000;
+  color: #333;
   position: relative;
   font-weight: 400;
   height: 100%;

package/src/FileInput.tsx

@@ -6,15 +6,15 @@
  *
  */
 
-import type {JSX} from 'react';
-
-import * as React from 'react';
+import {DeleteOutlined, UploadOutlined} from '@ant-design/icons';
+import {type JSX, useState} from 'react';
 
 import Styles from './Input.module.less';
 
 type Props = Readonly<{
   'data-test-id'?: string;
   accept?: string;
+  placeholder?: string;
   label: string;
   onChange: (files: FileList | null) => void;
 }>;
@@ -22,19 +22,46 @@ type Props = Readonly<{
 export default function FileInput({
   accept,
   label,
+  placeholder = '选择文件',
   onChange,
   'data-test-id': dataTestId,
 }: Props): JSX.Element {
+  const [files, setFiles] = useState<File[]>([]);
   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 className={`${Styles.Input__input} ${Styles.file}`}>
+        {!files.length ? (
+          <label htmlFor="file-upload">
+            <UploadOutlined />
+            {placeholder}
+          </label>
+        ) : (
+          <span className={Styles.content}>
+            <span className={Styles.name}>
+              {files.map((file) => file.name)}
+            </span>
+            <span className={Styles.delete}>
+              <DeleteOutlined
+                onClick={() => {
+                  onChange(null);
+                  setFiles([]);
+                }}
+              />
+            </span>
+          </span>
+        )}
+        <input
+          id="file-upload"
+          type="file"
+          accept={accept}
+          onChange={(e) => {
+            setFiles(Array.from(e.target.files || []));
+            onChange(e.target.files);
+          }}
+          data-test-id={dataTestId}
+        />
+      </div>
     </div>
   );
 }

package/src/Input.module.less

@@ -6,7 +6,7 @@
  *
  *
  */
- @import './const.less';
+@import './const.less';
 
 .Input__wrapper {
   display: flex;
@@ -16,23 +16,72 @@
 }
 .Input__label {
   display: flex;
-  flex: 1;
+  width: 80px;
+  flex-shrink: 0;
   color: #666;
+  font-size: 14px;
+  &::after {
+    content: ':';
+  }
 }
 .Input__input {
   display: flex;
-  flex: 2;
+  width: 100%;
+  color: #333;
   border: 1px solid #999;
-  padding-top: 7px;
-  padding-bottom: 7px;
-  padding-left: 10px;
-  padding-right: 10px;
-  font-size: 16px;
-  border-radius: 0px;
+  padding: 7px 10px;
+  font-size: 12px;
+  border-radius: 2px;
   min-width: 0;
   height: @inputHeight;
+  &.file {
+    border: none;
+    padding: 0;
+    align-items: center;
+    justify-content: flex-start;
+    > input[type='file'] {
+      display: none;
+    }
+    > label {
+      display: inline-block;
+      border: none;
+      height: 30px;
+      line-height: 20px;
+      padding: 5px 0px;
+      cursor: pointer;
+      color: #333;
+      border-radius: 2px;
+      transition: background-color 0.3s;
+      &:hover {
+        color: @themeColor;
+      }
+      > span:nth-of-type(1) {
+        margin-right: 2px;
+      }
+    }
+    > .content {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      >.name {
+        max-width: 160px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .delete {
+        &:hover {
+          color: @themeColor;
+        }
+      }
+    }
+  }
   &:focus-visible {
     outline: none;
     border-color: @themeColor;
-  };
+  }
+  &[type='file'] {
+    padding-top: 5px !important;
+  }
 }

package/src/KatexEquationAlterer.module.less

@@ -6,14 +6,56 @@
  *
  *
  */
+@import './const.less';
 
 .KatexEquationAlterer_defaultRow {
+  width: 260px;
   display: flex;
   flex-direction: row;
   margin-top: 10px;
   margin-bottom: 10px;
   justify-content: space-between;
   overflow: hidden;
+  font-size: 14px;
+  input[type='checkbox'] {
+    appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    width: 16px;
+    height: 16px;
+    border: 1px solid #ccc;
+    border-radius: 2px;
+    background-color: #fff;
+    cursor: pointer;
+    position: relative;
+    &:checked {
+      &::before {
+        content: '';
+        position: absolute;
+        top: -1px;
+        left: -1px;
+        width: 16px;
+        height: 16px;
+        background-color: @themeColor;
+        border-radius: 2px;
+      }
+      &::after {
+        content: '';
+        cursor: pointer;
+        border-color: #fff;
+        border-style: solid;
+        position: absolute;
+        display: block;
+        top: 2px;
+        width: 3px;
+        left: 5px;
+        right: 7px;
+        height: 6px;
+        transform: rotate(45deg);
+        border-width: 0 2px 2px 0;
+      }
+    }
+  }
 }
 
 .KatexEquationAlterer_dialogActions {
@@ -26,16 +68,26 @@
 }
 
 .KatexEquationAlterer_centerRow {
+  width: 260px;
   display: flex;
   flex-direction: 'row';
   margin-top: 10px;
   margin-bottom: 10px;
   justify-content: center;
   overflow: hidden;
+  font-size: 12px;
+  &.preview {
+    overflow-x: auto;
+    height: 58px;
+  }
+  &.empty * {
+    color: #8a8a8a !important;
+  }
 }
 
 .KatexEquationAlterer_textArea {
   width: 100%;
   resize: none;
   padding: 7px;
+  min-height: 50px;
 }

package/src/KatexEquationAlterer.tsx

@@ -9,7 +9,7 @@
 import type {JSX} from 'react';
 
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import * as React from 'react';
+import {translateI18n} from 'onchain-utility/language';
 import {useCallback, useState} from 'react';
 import {ErrorBoundary} from 'react-error-boundary';
 
@@ -38,46 +38,61 @@ export default function KatexEquationAlterer({
     setInline(!inline);
   }, [setInline, inline]);
 
+  const placeholder = translateI18n('[TODO] Please enter a equation', {
+    placeholder: '请输入方程式',
+  });
+
   return (
     <>
       <div className={Styles.KatexEquationAlterer_defaultRow}>
-        Inline
+        <span>
+          {translateI18n('[TODO] Inline', {
+            placeholder: '行内方程式',
+          })}
+          :
+        </span>
         <input type="checkbox" checked={inline} onChange={onCheckboxChange} />
       </div>
-      <div className={Styles.KatexEquationAlterer_defaultRow}>Equation </div>
+      <div className={Styles.KatexEquationAlterer_defaultRow}>
+        {translateI18n('[TODO] Equation', {
+          placeholder: '方程式',
+        })}
+        :
+      </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}
-          />
-        )}
+        <textarea
+          onChange={(event) => {
+            setEquation(event.target.value);
+          }}
+          value={equation}
+          placeholder={placeholder}
+          className={Styles.KatexEquationAlterer_textArea}
+        />
       </div>
       <div className={Styles.KatexEquationAlterer_defaultRow}>
-        Visualization{' '}
+        {translateI18n('[TODO] Visualization', {
+          placeholder: '预览',
+        })}
+        :
       </div>
-      <div className={Styles.KatexEquationAlterer_centerRow}>
+      <div
+        className={`${Styles.KatexEquationAlterer_centerRow} ${
+          Styles.preview
+        } ${equation ? '' : Styles.empty}`}>
         <ErrorBoundary onError={(e) => editor._onError(e)} fallback={null}>
           <KatexRenderer
-            equation={equation}
+            equation={equation || placeholder}
             inline={false}
             onDoubleClick={() => null}
           />
         </ErrorBoundary>
       </div>
       <div className={Styles.KatexEquationAlterer_dialogActions}>
-        <Button onClick={onClick}>Confirm</Button>
+        <Button type="primary" onClick={onClick}>
+          {translateI18n('[TODO] Confirm', {
+            placeholder: '确认',
+          })}
+        </Button>
       </div>
     </>
   );

package/src/Modal.module.less

@@ -39,13 +39,18 @@
   align-items: center;
   height: 40px;
   justify-content: space-between;
-  padding: 0 20px;
+  padding: 0 16px;
   cursor: all-scroll;
   border-bottom: 1px solid #ccc;
   background-color: @themeColor;
 }
 .Modal__contentBox {
-  padding: 24px 20px;
+  padding: 16px 16px;
+  :global {
+    .color-picker-wrapper {
+      padding: 0;
+    }
+  }
 }
 .Modal__title {
   color: #fff;
@@ -62,4 +67,5 @@
   text-align: center;
   cursor: pointer;
   background-color: transparent;
+  padding: 0;
 }

package/src/TextInput.tsx

@@ -16,6 +16,7 @@ import Styles from './Input.module.less';
 type Props = Readonly<{
   'data-test-id'?: string;
   label: string;
+  labelWidth?: number;
   onChange: (val: string) => void;
   placeholder?: string;
   value: string;
@@ -24,6 +25,7 @@ type Props = Readonly<{
 
 export default function TextInput({
   label,
+  labelWidth,
   value,
   onChange,
   placeholder = '',
@@ -32,7 +34,9 @@ export default function TextInput({
 }: Props): JSX.Element {
   return (
     <div className={Styles.Input__wrapper}>
-      <label className={Styles.Input__label}>{label}</label>
+      <label style={{width: labelWidth}} className={Styles.Input__label}>
+        {label}
+      </label>
       <input
         type={type}
         className={Styles.Input__input}