build: add pnpm

apps/builder/components/shared/Graph/Edges/DrawingEdge.tsx

@@ -1,4 +1,4 @@
-import { useEventListener } from '@chakra-ui/hooks'
+import { useEventListener } from '@chakra-ui/react'
 import assert from 'assert'
 import {
   useGraph,

apps/builder/components/shared/Graph/Edges/Edges.tsx

@@ -1,4 +1,4 @@
-import { chakra } from '@chakra-ui/system'
+import { chakra } from '@chakra-ui/react'
 import { colors } from 'libs/theme'
 import { Edge as EdgeProps } from 'models'
 import React from 'react'

apps/builder/components/shared/Graph/Nodes/BlockNode/TextBubbleEditor/TextBubbleEditor.tsx

@@ -3,7 +3,6 @@ import React, { useEffect, useMemo, useRef, useState } from 'react'
 import {
   Plate,
   selectEditor,
-  serializeHtml,
   TEditor,
   TElement,
   Value,
@@ -16,6 +15,7 @@ import { parseHtmlStringToPlainText } from 'services/utils'
 import { defaultTextBubbleContent, TextBubbleContent, Variable } from 'models'
 import { VariableSearchInput } from 'components/shared/VariableSearchInput'
 import { ReactEditor } from 'slate-react'
+import { serializeHtml } from '@udecode/plate-serializer-html'
 
 type Props = {
   initialValue: TElement[]
@@ -98,7 +98,7 @@ export const TextBubbleEditor = ({ initialValue, onClose }: Props) => {
     setValue(val)
     setIsVariableDropdownOpen(false)
   }
-  const handleKeyDown = (e: React.KeyboardEvent) => {
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
     if (e.shiftKey) return
     if (e.key === 'Enter') closeEditor()
   }

apps/builder/components/shared/Graph/Nodes/BlockNode/TextBubbleEditor/ToolBar.tsx

@@ -1,4 +1,4 @@
-import { StackProps, HStack, Button } from '@chakra-ui/react'
+import { StackProps, HStack, Button, IconButton } from '@chakra-ui/react'
 import {
   MARK_BOLD,
   MARK_ITALIC,
@@ -7,7 +7,13 @@ import {
 import { getPluginType, PlateEditor, Value } from '@udecode/plate-core'
 import { LinkToolbarButton } from '@udecode/plate-ui-link'
 import { MarkToolbarButton } from '@udecode/plate-ui-toolbar'
-import { BoldIcon, ItalicIcon, UnderlineIcon, LinkIcon } from 'assets/icons'
+import {
+  BoldIcon,
+  ItalicIcon,
+  UnderlineIcon,
+  LinkIcon,
+  UserIcon,
+} from 'assets/icons'
 
 type Props = {
   editor: PlateEditor<Value>
@@ -33,9 +39,12 @@ export const ToolBar = ({
       borderBottomWidth={1}
       {...props}
     >
-      <Button size="sm" onMouseDown={handleVariablesButtonMouseDown}>
-        Variables
-      </Button>
+      <IconButton
+        aria-label="Insert variable"
+        size="sm"
+        onMouseDown={handleVariablesButtonMouseDown}
+        icon={<UserIcon />}
+      />
       <span data-testid="bold-button">
         <MarkToolbarButton
           type={getPluginType(editor, MARK_BOLD)}