Fix/y24 w33 (#160)

* chore: update the ai sdk version * chore: update Node.js and pnpm version requirements * fix(grid): disable search functionality and refactor keyboard shortcuts * fix(doc): drag and drop not working as expected * fix(doc): improve useSelection hook * fix(table): field display fixes * fix(doc-list): style * fix(doc): MentionNode render style
mayneyao · Aug 13, 2024 · adc4617 · adc4617
1 parent d6290b8
commit adc4617
Show file tree

Hide file tree

Showing 12 changed files with 197 additions and 99 deletions.
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
diff --git a/components/doc/hooks/useSelection.tsx b/components/doc/hooks/useSelection.tsx
@@ -140,6 +140,8 @@ export function useMouseSelection(
       })
 
       const boxes = getSelectionItems()
+      const newSelectedKeySet = new Set<string>()
+
       Array.from(boxes ?? []).forEach((box) => {
         const rect = box.getBoundingClientRect()
         const boxLeft = rect.left + window.scrollX
@@ -157,14 +159,18 @@ export function useMouseSelection(
             top + height >= boxTop &&
             boxBottom >= top)
         if (isIntersect) {
-          ;(box as HTMLElement).style.backgroundColor = "rgb(173 216 230 / 27%)"
+          ;(box as HTMLElement).style.backgroundColor =
+            "rgba(173, 216, 230, 0.5)"
           const key = (box as HTMLElement).getAttribute("data-key")
           if (key) {
-            selectedKeySet.add(key)
-            setSelectedKeySet(new Set(selectedKeySet))
+            newSelectedKeySet.add(key)
           }
+        } else {
+          ;(box as HTMLElement).style.backgroundColor = ""
         }
       })
+
+      setSelectedKeySet(newSelectedKeySet)
     }
 
     function handleMouseUp(e: MouseEvent) {

diff --git a/components/doc/nodes/MentionNode/MentionComponent.tsx b/components/doc/nodes/MentionNode/MentionComponent.tsx
@@ -49,28 +49,33 @@ export const MentionComponent = (props: { id: string; title?: string }) => {
         <TooltipTrigger>
           <span
             className={cn(
-              "inline-flex shrink-0 cursor-pointer gap-1",
-              "items-center rounded-sm px-1 underline  hover:bg-secondary",
+              "inline-flex shrink-0 cursor-pointer",
+              "items-baseline rounded-sm px-1 underline hover:bg-secondary",
               {
                 "text-red-400": node?.is_deleted,
               }
             )}
             id={id}
             onClick={onClick}
           >
-            {node && node.icon ? (
-              <NodeIconEditor
-                icon={node.icon}
-                nodeId={node.id}
-                disabled
-                size="1rem"
-              />
-            ) : (
-              <ItemIcon type={node?.type ?? ""} className="h-4 w-4" />
-            )}
-            <p className="!my-0 max-w-[18rem] truncate">
+            <span className="inline-flex items-center mr-1">
+              {node && node.icon ? (
+                <NodeIconEditor
+                  icon={node.icon}
+                  nodeId={node.id}
+                  disabled
+                  size="1rem"
+                />
+              ) : (
+                <ItemIcon
+                  type={node?.type ?? ""}
+                  className="h-4 w-4 translate-y-[0.1em]"
+                />
+              )}
+            </span>
+            <span className="!my-0 max-w-[18rem] truncate">
               {node ? node.name || "Untitled" : props.title || "loading"}
-            </p>
+            </span>
           </span>
         </TooltipTrigger>
         <TooltipContent

diff --git a/components/doc/plugins/DraggableBlockPlugin/index.tsx b/components/doc/plugins/DraggableBlockPlugin/index.tsx
@@ -21,21 +21,21 @@ import {
   DRAGOVER_COMMAND,
   DROP_COMMAND,
   LexicalEditor,
-  LexicalNode,
   NodeKey,
 } from "lexical"
 import { Trash2Icon } from "lucide-react"
 import { createPortal } from "react-dom"
 
-import "./index.css"
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 
-import { AudioMenu } from "../../nodes/AudioNode/AudioMenu"
+import "./index.css"
+import { useAppStore } from "@/lib/store/app-store"
+
 import { isHTMLElement } from "../../utils/guard"
 import { Point } from "../../utils/point"
 import { Rect } from "../../utils/rect"
@@ -217,7 +217,8 @@ function useDraggableBlockMenu(
   isEditable: boolean
 ): JSX.Element {
   const scrollerElem = anchorElem?.parentElement
-
+  // don't remove next line, otherwise the drag will not work, idk why (
+  const { isFileManagerOpen } = useAppStore()
   const menuRef = useRef<HTMLDivElement>(null)
   const targetLineRef = useRef<HTMLDivElement>(null)
   const isDraggingBlockRef = useRef<boolean>(false)
@@ -369,6 +370,7 @@ function useDraggableBlockMenu(
       return
     }
     setDragImage(dataTransfer, draggableBlockElem)
+    console.log("onDragStart setDragImage", draggableBlockElem)
     let nodeKey = ""
     editor.update(() => {
       const node = $getNearestNodeFromDOMNode(draggableBlockElem)

diff --git a/components/keyboard-shortcuts/const.ts b/components/keyboard-shortcuts/const.ts
@@ -71,8 +71,9 @@ export const TableKeyboardShortcuts = [
   },
   {
     key: "Ctrl/Cmd + F",
-    description: "Opens the search interface.",
+    description: "Opens the search interface.(disabled for now)",
     flag: "search",
+    disabled: true,
   },
   {
     key: "Ctrl/Cmd + Home/End",

diff --git a/components/keyboard-shortcuts/index.tsx b/components/keyboard-shortcuts/index.tsx
@@ -19,21 +19,25 @@ export function KeyboardShortCuts() {
       <DialogTrigger>
         <div></div>
       </DialogTrigger>
-      <DialogContent className=" flex h-[90%] !max-w-max shrink gap-4">
-        <div className="flex flex-col gap-5">
-          <ShortcutTable
-            shortcuts={CommonKeyboardShortcuts}
-            title="Common Keyboard Shortcuts"
-          />
-          <ShortcutTable
-            shortcuts={DocumentKeyboardShortcuts}
-            title="Document Keyboard Shortcuts"
-          />
+      <DialogContent className="flex h-[90%] !max-w-max shrink gap-4 overflow-hidden">
+        <div className="flex flex-1 overflow-y-auto">
+          <div className="flex flex-col gap-5 p-4">
+            <ShortcutTable
+              shortcuts={CommonKeyboardShortcuts}
+              title="Common Keyboard Shortcuts"
+            />
+            <ShortcutTable
+              shortcuts={DocumentKeyboardShortcuts}
+              title="Document Keyboard Shortcuts"
+            />
+          </div>
+          <div className="flex-shrink-0 p-4">
+            <ShortcutTable
+              shortcuts={TableKeyboardShortcuts}
+              title="Table(Grid View) Keyboard Shortcuts"
+            />
+          </div>
         </div>
-        <ShortcutTable
-          shortcuts={TableKeyboardShortcuts}
-          title="Table(Gird View) Keyboard Shortcuts"
-        />
       </DialogContent>
     </Dialog>
   )

diff --git a/components/keyboard-shortcuts/shortcut-table.tsx b/components/keyboard-shortcuts/shortcut-table.tsx
@@ -9,7 +9,7 @@ import {
 } from "@/components/ui/table"
 
 interface ShortcutTableProps {
-  shortcuts: { key: string; description: string }[]
+  shortcuts: { key: string; description: string; disabled?: boolean }[]
   title?: string
 }
 export const ShortcutTable = ({ shortcuts, title }: ShortcutTableProps) => {
@@ -38,7 +38,11 @@ export const ShortcutTable = ({ shortcuts, title }: ShortcutTableProps) => {
                   ))}
                 </div>
               </TableCell>
-              <TableCell className="p-[6px] text-muted-foreground">
+              <TableCell
+                className={`p-[6px] ${
+                  shortcut.disabled ? "text-gray-400" : "text-muted-foreground"
+                }`}
+              >
                 {shortcut.description}
               </TableCell>
             </TableRow>

diff --git a/components/table/views/doc-list/index.tsx b/components/table/views/doc-list/index.tsx
@@ -63,7 +63,7 @@ export function DocListView(props: IDocListViewProps) {
   return (
     <div className="flex h-full shrink-0 gap-4 p-2">
       <ScrollArea
-        className={cn(" h-full  w-[300px] overflow-y-auto border-r")}
+        className={cn(" h-full  w-[300px] overflow-y-auto border-r shrink-0")}
         ref={containerRef}
       >
         <div className="w-full p-2">

diff --git a/components/table/views/grid/index.tsx b/components/table/views/grid/index.tsx
@@ -327,7 +327,7 @@ export default function GridView(props: IGridProps) {
               onDrop={onDrop}
               onDragOverCell={onDragOverCell}
               highlightRegions={highlightRegions}
-              showSearch={showSearch}
+              // showSearch={showSearch}
               gridSelection={selection}
               onItemHovered={onItemHovered}
               // getRowThemeOverride={getRowThemeOverride}

diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^0.0.13",
+    "@ai-sdk/openai": "^0.0.45",
     "@aws-crypto/sha256-browser": "^5.2.0",
     "@eidos.space/types": "workspace:*",
     "@emoji-mart/data": "^1.1.2",
@@ -82,7 +82,7 @@
     "@uiw/react-heat-map": "^2.2.1",
     "@xenova/transformers": "^2.17.1",
     "ahooks": "^3.7.8",
-    "ai": "^3.1.9",
+    "ai": "^3.3.6",
     "aws-sdk": "^2.1526.0",
     "aws4fetch": "^1.0.17",
     "bufferutil": "^4.0.7",
@@ -196,6 +196,10 @@
     "vitest": "^2.0.3",
     "workbox-window": "^7.0.0"
   },
+  "engines": {
+    "node": ">=18.0.0",
+    "pnpm": ">=8.5.0"
+  },
   "pnpm": {
     "peerDependencyRules": {
       "ignoreMissing": [