onchain-lexical-ui 0.0.1 → 0.0.3

package/package.json

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

package/src/ContentEditable.module.less

@@ -8,7 +8,7 @@
  */
 .ContentEditable__root {
   border: 0;
-  font-size: 15px;
+  font-size: 12px;
   display: block;
   position: relative;
   outline: 0;
@@ -19,7 +19,7 @@
     background-color: #f9f9f9;
     border-left: 26px solid #e6e6e6;
     padding: 0 10px;
-    margin-bottom: 6px;
+    padding-bottom: 6px;
     > [number='true'] {
       left: 10px;
     }
@@ -29,8 +29,9 @@
       }
     }
     & [instance='true'] {
-      border-top: 6px solid transparent;
+      border-top: 12px solid transparent;
       &::before {
+        pointer-events: none;
         content: '';
         display: block;
         background-color: #fff;
@@ -47,6 +48,9 @@
         }
       }
     }
+    &:not(:nth-of-type(1)) {
+      margin-top: 6px;
+    }
   }
 }
 /* @media (max-width: 1025px) {

package/src/DropDown.module.less

@@ -1,3 +1,19 @@
+.arrow {
+  position: relative;
+  &::before {
+    content: '';
+    display: block;
+    width: 8px;
+    height: 8px;
+    position: absolute;
+    top: -2px;
+    left: 4px;
+    background-color: #fff;
+    z-index: -1;
+    transform: rotate(45deg);
+  }
+}
+
 .dropdown {
   z-index: 100;
   display: block;
@@ -7,13 +23,13 @@
     0 2px 4px 0 rgba(0, 0, 0, 0.1),
     inset 0 0 0 1px rgba(255, 255, 255, 0.5);
   // border-radius: 8px;
-  min-height: 40px;
+  // min-height: 40px;
   background-color: #fff;
   z-index: 1000;
   :global {
     .item {
-      margin: 0 8px 0 8px;
-      padding: 8px;
+      margin: 0 6px 0 6px;
+      padding: 6px;
       color: #050505;
       cursor: pointer;
       line-height: 16px;
@@ -25,15 +41,16 @@
       justify-content: space-between;
       background-color: #fff;
       // border-radius: 8px;
+      font-size: 14px;
       border: 0;
       max-width: 250px;
       min-width: 100px;
       &:first-child {
-        margin-top: 8px;
+        margin-top: 6px;
       }
 
       &:last-child {
-        margin-bottom: 8px;
+        margin-bottom: 6px;
       }
 
       &:hover {
@@ -74,8 +91,8 @@
 
       .icon {
         display: flex;
-        width: 20px;
-        height: 20px;
+        width: 18px;
+        height: 18px;
         user-select: none;
         margin-right: 12px;
         line-height: 16px;

package/src/DropDown.tsx

@@ -9,6 +9,7 @@
 import type {JSX} from 'react';
 
 import {isDOMNode} from 'lexical';
+import {useSettings} from 'onchain-lexical-context/settings';
 import * as React from 'react';
 import {
   ReactNode,
@@ -37,7 +38,7 @@ export function DropDownItem({
   title,
 }: {
   children: React.ReactNode;
-  className: string;
+  className?: string;
   onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
   title?: string;
 }) {
@@ -59,7 +60,7 @@ export function DropDownItem({
 
   return (
     <button
-      className={className}
+      className={className ?? 'item'}
       onClick={onClick}
       ref={ref}
       title={title}
@@ -72,10 +73,16 @@ export function DropDownItem({
 function DropDownItems({
   children,
   dropDownRef,
+  arrow = false,
+  zIndex = 100,
+  arrowX,
   onClose,
 }: {
   children: React.ReactNode;
   dropDownRef: React.Ref<HTMLDivElement>;
+  zIndex?: number;
+  arrow?: boolean;
+  arrowX?: number;
   onClose: () => void;
 }) {
   const [items, setItems] = useState<React.RefObject<HTMLButtonElement>[]>();
@@ -140,8 +147,9 @@ function DropDownItems({
   return (
     <DropDownContext.Provider value={contextValue}>
       <div
-        className={`${Styles.dropdown}`}
+        className={`${Styles.dropdown} ${arrow ? Styles.arrow : ''}`}
         ref={dropDownRef}
+        style={{left: arrowX, zIndex}}
         onKeyDown={handleKeyDown}>
         {children}
       </div>
@@ -151,24 +159,34 @@ function DropDownItems({
 
 export default function DropDown({
   disabled = false,
+  showIcon = true,
+  arrow = false,
+  arrowX,
   buttonLabel,
   buttonAriaLabel,
   buttonClassName,
   buttonIconClassName,
   children,
   stopCloseOnClickSelf,
+  onOpen,
 }: {
   disabled?: boolean;
   buttonAriaLabel?: string;
-  buttonClassName: string;
+  buttonClassName?: string;
   buttonIconClassName?: string;
-  buttonLabel?: string;
+  buttonLabel?: React.ReactNode;
+  showIcon?: boolean;
   children: ReactNode;
   stopCloseOnClickSelf?: boolean;
+  arrow?: boolean;
+  arrowX?: number;
+  onOpen?: (value: boolean) => void;
 }): JSX.Element {
   const dropDownRef = useRef<HTMLDivElement>(null);
   const buttonRef = useRef<HTMLButtonElement>(null);
   const [showDropDown, setShowDropDown] = useState(false);
+  const {extra} = useSettings();
+  const [zIndex, setZIndex] = useState(100);
 
   const handleClose = () => {
     setShowDropDown(false);
@@ -177,6 +195,18 @@ export default function DropDown({
     }
   };
 
+  useEffect(() => {
+    if (showDropDown) {
+      if (extra.getZIndex) {
+        setZIndex(extra.getZIndex());
+      }
+    } else {
+      if (extra.reduceZIndex) {
+        extra.reduceZIndex();
+      }
+    }
+  }, [showDropDown]);
+
   useEffect(() => {
     const button = buttonRef.current;
     const dropDown = dropDownRef.current;
@@ -239,25 +269,50 @@ export default function DropDown({
     };
   }, [buttonRef, dropDownRef, showDropDown]);
 
+  useEffect(() => {
+    const wheel = (e: WheelEvent) => {
+      if (e.target instanceof HTMLElement) {
+        if (!e.target.closest(`.${Styles.dropdown}`)) {
+          setShowDropDown(false);
+        }
+      }
+    };
+    window.addEventListener('wheel', wheel);
+    return () => {
+      window.removeEventListener('wheel', wheel);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (onOpen) {
+      onOpen(showDropDown);
+    }
+  }, [showDropDown]);
+
   return (
     <>
       <button
         type="button"
         disabled={disabled}
-        aria-label={buttonAriaLabel || buttonLabel}
-        className={buttonClassName}
+        aria-label={buttonAriaLabel}
+        className={buttonClassName ?? 'down'}
         onClick={() => setShowDropDown(!showDropDown)}
         ref={buttonRef}>
         {buttonIconClassName && <span className={buttonIconClassName} />}
         {buttonLabel && (
           <span className="text dropdown-button-text">{buttonLabel}</span>
         )}
-        <i className="chevron-down" />
+        {showIcon ? <i className="chevron-down" /> : null}
       </button>
 
       {showDropDown &&
         createPortal(
-          <DropDownItems dropDownRef={dropDownRef} onClose={handleClose}>
+          <DropDownItems
+            dropDownRef={dropDownRef}
+            zIndex={zIndex}
+            arrow={arrow}
+            arrowX={arrowX}
+            onClose={handleClose}>
             {children}
           </DropDownItems>,
           document.body,

package/src/DropdownColorPicker.tsx

@@ -30,12 +30,25 @@ export default function DropdownColorPicker({
   onChange,
   ...rest
 }: Props) {
+  const timeout = React.useRef(0);
+  const debounce = React.useCallback(
+    (value: string, skipHistoryStack: boolean) => {
+      clearTimeout(timeout.current);
+      timeout.current = window.setTimeout(() => {
+        if (onChange) {
+          onChange(value, skipHistoryStack);
+        }
+      }, 100);
+    },
+    [onChange],
+  );
+
   return (
     <DropDown
       {...rest}
       disabled={disabled}
       stopCloseOnClickSelf={stopCloseOnClickSelf}>
-      <ColorPicker color={color} onChange={onChange} />
+      <ColorPicker color={color} onChange={debounce} />
     </DropDown>
   );
 }