onchain-lexical-ui 0.0.2 → 0.0.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "onchain-lexical-ui",
   "license": "MIT",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "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.2",
+    "onchain-lexical-context": "^0.0.4",
     "react-draggable": "^4.5.0"
   },
   "browser": {

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

@@ -73,12 +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>[]>();
@@ -143,9 +147,9 @@ function DropDownItems({
   return (
     <DropDownContext.Provider value={contextValue}>
       <div
-        className={`${Styles.dropdown}`}
+        className={`${Styles.dropdown} ${arrow ? Styles.arrow : ''}`}
         ref={dropDownRef}
-        style={{zIndex}}
+        style={{left: arrowX, zIndex}}
         onKeyDown={handleKeyDown}>
         {children}
       </div>
@@ -156,12 +160,15 @@ function DropDownItems({
 export default function DropDown({
   disabled = false,
   showIcon = true,
+  arrow = false,
+  arrowX,
   buttonLabel,
   buttonAriaLabel,
   buttonClassName,
   buttonIconClassName,
   children,
   stopCloseOnClickSelf,
+  onOpen,
 }: {
   disabled?: boolean;
   buttonAriaLabel?: string;
@@ -171,6 +178,9 @@ export default function DropDown({
   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);
@@ -259,6 +269,26 @@ 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
@@ -280,6 +310,8 @@ export default function DropDown({
           <DropDownItems
             dropDownRef={dropDownRef}
             zIndex={zIndex}
+            arrow={arrow}
+            arrowX={arrowX}
             onClose={handleClose}>
             {children}
           </DropDownItems>,

package/src/EditorShellStyles/index.module.less

@@ -1,3 +1,5 @@
+@import './const.less';
+
 .editor-shell {
   width: 100%;
   // border-radius: 2px;
@@ -61,361 +63,360 @@ div.editor-shell {
   line-height: 1.7;
 }
 :global {
+  i.add-comment {
+    background-size: cover !important;
+    background-image: url(/richText/chat-left-text.svg);
+  }
+
   i.palette {
-    background-image: url(../images/icons/palette.svg);
+    background-image: url(/richText/palette.svg);
   }
 
   i.bucket {
-    background-image: url(../images/icons/paint-bucket.svg);
+    background-image: url(/richText/paint-bucket.svg);
   }
 
   i.bold {
-    background-image: url(../images/icons/type-bold.svg);
+    background-image: url(/richText/type-bold.svg);
   }
 
   i.italic {
-    background-image: url(../images/icons/type-italic.svg);
+    background-image: url(/richText/type-italic.svg);
   }
 
   i.clear {
-    background-image: url(../images/icons/trash.svg);
+    background-image: url(/richText/trash.svg);
   }
 
   i.code {
-    background-image: url(../images/icons/code.svg);
+    background-image: url(/richText/code.svg);
   }
 
   i.underline {
-    background-image: url(../images/icons/type-underline.svg);
+    background-image: url(/richText/type-underline.svg);
   }
 
   i.uppercase {
-    background-image: url(../images/icons/type-uppercase.svg);
+    background-image: url(/richText/type-uppercase.svg);
   }
 
   i.lowercase {
-    background-image: url(../images/icons/type-lowercase.svg);
+    background-image: url(/richText/type-lowercase.svg);
   }
 
   i.capitalize {
-    background-image: url(../images/icons/type-capitalize.svg);
+    background-image: url(/richText/type-capitalize.svg);
   }
 
   i.strikethrough {
-    background-image: url(../images/icons/type-strikethrough.svg);
+    background-image: url(/richText/type-strikethrough.svg);
   }
 
   i.subscript {
-    background-image: url(../images/icons/type-subscript.svg);
+    background-image: url(/richText/type-subscript.svg);
   }
 
   i.superscript {
-    background-image: url(../images/icons/type-superscript.svg);
+    background-image: url(/richText/type-superscript.svg);
   }
 
   i.highlight {
-    background-image: url(../images/icons/highlighter.svg);
+    background-image: url(/richText/highlighter.svg);
   }
 
   i.link {
-    background-image: url(../images/icons/link.svg);
+    background-image: url(/richText/link.svg);
   }
 
   i.horizontal-rule {
-    background-image: url(../images/icons/horizontal-rule.svg);
+    background-image: url(/richText/horizontal-rule.svg);
   }
 
   .icon.plus {
-    background-image: url(../images/icons/plus.svg);
+    background-image: url(/richText/plus.svg);
   }
 
   .icon.caret-right {
-    background-image: url(../images/icons/caret-right-fill.svg);
+    background-image: url(/richText/caret-right-fill.svg);
   }
 
   .icon.dropdown-more {
-    background-image: url(../images/icons/dropdown-more.svg);
+    background-image: url(/richText/dropdown-more.svg);
   }
 
   .icon.font-color {
-    background-image: url(../images/icons/font-color.svg);
-  }
-
-  .icon.font-family {
-    background-image: url(../images/icons/font-family.svg);
+    background-image: url(/richText/font-color.svg);
+    mask-repeat: no-repeat;
+    -webkit-mask-repeat: no-repeat;
+    mask-size: contain;
+    -webkit-mask-size: contain;
   }
 
   .icon.bg-color {
-    background-image: url(../images/icons/bg-color.svg);
+    background-image: url(/richText/bg-color.svg);
   }
 
-  .icon.table {
-    background-color: #6c757d;
-    mask-image: url(../images/icons/table.svg);
-    -webkit-mask-image: url(../images/icons/table.svg);
-    mask-repeat: no-repeat;
-    -webkit-mask-repeat: no-repeat;
-    mask-size: contain;
-    -webkit-mask-size: contain;
+  .icon.font-family {
+    background-image: url(/richText/font-family.svg);
   }
 
   i.image {
-    background-image: url(../images/icons/file-image.svg);
+    background-image: url(/richText/file-image.svg);
   }
 
   i.table {
-    background-image: url(../images/icons/table.svg);
+    background-image: url(/richText/table.svg);
   }
 
   i.close {
-    background-image: url(../images/icons/close.svg);
+    background-image: url(/richText/close.svg);
   }
 
   i.figma {
-    background-image: url(../images/icons/figma.svg);
+    background-image: url(/richText/figma.svg);
   }
 
   i.poll {
-    background-image: url(../images/icons/card-checklist.svg);
+    background-image: url(/richText/card-checklist.svg);
   }
 
   i.columns {
-    background-image: url(../images/icons/3-columns.svg);
+    background-image: url(/richText/3-columns.svg);
   }
 
   i.x {
-    background-image: url(../images/icons/x.svg);
+    background-image: url(/richText/x.svg);
   }
 
   i.youtube {
-    background-image: url(../images/icons/youtube.svg);
+    background-image: url(/richText/youtube.svg);
   }
 
   .icon.left-align,
   i.left-align {
-    background-image: url(../images/icons/text-left.svg);
+    background-image: url(/richText/text-left.svg);
   }
 
   .icon.center-align,
   i.center-align {
-    background-image: url(../images/icons/text-center.svg);
+    background-image: url(/richText/text-center.svg);
   }
 
   .icon.right-align,
   i.right-align {
-    background-image: url(../images/icons/text-right.svg);
+    background-image: url(/richText/text-right.svg);
   }
 
   .icon.justify-align,
   i.justify-align {
-    background-image: url(../images/icons/justify.svg);
+    background-image: url(/richText/justify.svg);
   }
 
   .icon.vertical-top,
   i.left-align {
-    background-image: url(../images/icons/vertical-top.svg);
+    background-image: url(/richText/vertical-top.svg);
   }
 
   .icon.vertical-middle,
   i.center-align {
-    background-image: url(../images/icons/vertical-middle.svg);
+    background-image: url(/richText/vertical-middle.svg);
   }
 
   .icon.vertical-bottom,
   i.right-align {
-    background-image: url(../images/icons/vertical-bottom.svg);
+    background-image: url(/richText/vertical-bottom.svg);
   }
 
   i.indent {
-    background-image: url(../images/icons/indent.svg);
+    background-image: url(/richText/indent.svg);
   }
 
   i.markdown {
-    background-image: url(../images/icons/markdown.svg);
+    background-image: url(/richText/markdown.svg);
   }
 
   i.outdent {
-    background-image: url(../images/icons/outdent.svg);
+    background-image: url(/richText/outdent.svg);
   }
 
   i.undo {
-    background-image: url(../images/icons/arrow-counterclockwise.svg);
+    background-image: url(/richText/arrow-counterclockwise.svg);
   }
 
   i.redo {
-    background-image: url(../images/icons/arrow-clockwise.svg);
+    background-image: url(/richText/arrow-clockwise.svg);
   }
 
   i.sticky {
-    background-image: url(../images/icons/sticky.svg);
+    background-image: url(/richText/sticky.svg);
   }
 
   i.mic {
-    background-image: url(../images/icons/mic.svg);
+    background-image: url(/richText/mic.svg);
   }
 
   i.import {
-    background-image: url(../images/icons/upload.svg);
+    background-image: url(/richText/upload.svg);
   }
 
   i.export {
-    background-image: url(../images/icons/download.svg);
+    background-image: url(/richText/download.svg);
   }
 
   i.share {
-    background-image: url(../images/icons/send.svg);
+    background-image: url(/richText/send.svg);
   }
 
   i.diagram-2 {
-    background-image: url(../images/icons/diagram-2.svg);
+    background-image: url(/richText/diagram-2.svg);
   }
 
   i.user {
-    background-image: url(../images/icons/user.svg);
+    background-image: url(/richText/user.svg);
   }
 
   i.equation {
-    background-image: url(../images/icons/plus-slash-minus.svg);
+    background-image: url(/richText/plus-slash-minus.svg);
   }
 
   i.gif {
-    background-image: url(../images/icons/filetype-gif.svg);
+    background-image: url(/richText/filetype-gif.svg);
   }
 
   i.copy {
-    background-image: url(../images/icons/copy.svg);
+    background-image: url(/richText/copy.svg);
   }
 
   i.success {
-    background-image: url(../images/icons/success.svg);
+    background-image: url(/richText/success.svg);
   }
 
   i.prettier {
-    background-image: url(../images/icons/prettier.svg);
+    background-image: url(/richText/prettier.svg);
   }
 
   i.prettier-error {
-    background-image: url(../images/icons/prettier-error.svg);
+    background-image: url(/richText/prettier-error.svg);
   }
 
   i.page-break,
   .icon.page-break {
-    background-image: url(../images/icons/scissors.svg);
+    background-image: url(/richText/scissors.svg);
   }
 
   .actions i.indent {
-    background-image: url(../images/icons/indent.svg);
+    background-image: url(/richText/indent.svg);
   }
 
   .actions i.outdent {
-    background-image: url(../images/icons/outdent.svg);
+    background-image: url(/richText/outdent.svg);
   }
 
   .actions i.lock {
-    background-image: url(../images/icons/lock-fill.svg);
+    background-image: url(/richText/lock-fill.svg);
   }
 
   .actions i.image {
-    background-image: url(../images/icons/file-image.svg);
+    background-image: url(/richText/file-image.svg);
   }
 
   .actions i.table {
-    background-image: url(../images/icons/table.svg);
+    background-image: url(/richText/table.svg);
   }
 
   .actions i.unlock {
-    background-image: url(../images/icons/lock.svg);
+    background-image: url(/richText/lock.svg);
   }
 
   .actions i.left-align {
-    background-image: url(../images/icons/text-left.svg);
+    background-image: url(/richText/text-left.svg);
   }
 
   .actions i.center-align {
-    background-image: url(../images/icons/text-center.svg);
+    background-image: url(/richText/text-center.svg);
   }
 
   .actions i.right-align {
-    background-image: url(../images/icons/text-right.svg);
+    background-image: url(/richText/text-right.svg);
   }
 
   .actions i.justify-align {
-    background-image: url(../images/icons/justify.svg);
+    background-image: url(/richText/justify.svg);
   }
 
   .actions i.disconnect {
-    background-image: url(../images/icons/plug.svg);
+    background-image: url(/richText/plug.svg);
   }
 
   .actions i.connect {
-    background-image: url(../images/icons/plug-fill.svg);
+    background-image: url(/richText/plug-fill.svg);
   }
   .link-editor div.link-edit {
-    background-image: url(../images/icons/pencil-fill.svg);
+    background-image: url(/richText/pencil-fill.svg);
   }
 
   .link-editor div.link-trash {
-    background-image: url(../images/icons/trash.svg);
+    background-image: url(/richText/trash.svg);
   }
 
   .link-editor div.link-cancel {
-    background-image: url(../images/icons/close.svg);
+    background-image: url(/richText/close.svg);
   }
 
   .link-editor div.link-confirm {
-    background-image: url(../images/icons/success-alt.svg);
+    background-image: url(/richText/success-alt.svg);
   }
   i.chevron-down {
-    background-image: url(../images/icons/chevron-down.svg);
+    background-image: url(/richText/chevron-down.svg);
   }
   .icon.paragraph {
-    background-image: url(../images/icons/text-paragraph.svg);
+    background-image: url(/richText/text-paragraph.svg);
   }
 
   .icon.h1 {
-    background-image: url(../images/icons/type-h1.svg);
+    background-image: url(/richText/type-h1.svg);
   }
 
   .icon.h2 {
-    background-image: url(../images/icons/type-h2.svg);
+    background-image: url(/richText/type-h2.svg);
   }
 
   .icon.h3 {
-    background-image: url(../images/icons/type-h3.svg);
+    background-image: url(/richText/type-h3.svg);
   }
 
   .icon.h4 {
-    background-image: url(../images/icons/type-h4.svg);
+    background-image: url(/richText/type-h4.svg);
   }
 
   .icon.h5 {
-    background-image: url(../images/icons/type-h5.svg);
+    background-image: url(/richText/type-h5.svg);
   }
 
   .icon.h6 {
-    background-image: url(../images/icons/type-h6.svg);
+    background-image: url(/richText/type-h6.svg);
   }
 
   .icon.bullet-list,
   .icon.bullet {
-    background-image: url(../images/icons/list-ul.svg);
+    background-image: url(/richText/list-ul.svg);
   }
 
   .icon.check-list,
   .icon.check {
-    background-image: url(../images/icons/square-check.svg);
+    background-image: url(/richText/square-check.svg);
   }
 
   .icon.numbered-list,
   .icon.number {
-    background-image: url(../images/icons/list-ol.svg);
+    background-image: url(/richText/list-ol.svg);
   }
 
   .icon.quote {
-    background-image: url(../images/icons/chat-square-quote.svg);
+    background-image: url(/richText/chat-square-quote.svg);
   }
 
   .icon.code {
-    background-image: url(../images/icons/code.svg);
+    background-image: url(/richText/code.svg);
   }
 }

package/src/Icon/index.tsx

@@ -9,7 +9,7 @@ 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 React, {useMemo} from 'react';
 
 import Styles from './index.module.less';
 
@@ -26,11 +26,36 @@ export const Icon: React.FC<IconFontProps<string>> = ({
 }) => {
   const {extra} = useSettings();
   const AliIconFont = AliIconFontFn(extra.iconScriptUrl);
-  return (
-    <AliIconFont
-      {...props}
-      className={`${Styles.icon} ${className}`}
-      type={type}
-    />
-  );
+  const staticIcon = useMemo(() => {
+    return (
+      <AliIconFont
+        {...props}
+        className={`${Styles.icon} ${className}`}
+        type={type}
+      />
+    );
+  }, []);
+
+  return staticIcon;
+};
+
+export const StaticIcon: React.FC<IconFontProps<string>> = ({
+  type,
+  className,
+  ...props
+}) => {
+  const {extra} = useSettings();
+  const AliIconFont = AliIconFontFn(extra.iconScriptUrl);
+
+  const staticIcon = useMemo(() => {
+    return (
+      <AliIconFont
+        {...props}
+        className={`${Styles.icon} ${className}`}
+        type={type}
+      />
+    );
+  }, []);
+
+  return staticIcon;
 };