Start to add a new modal for notes

packages/web/components/patterns/HighlightNotes.tsx

@@ -18,6 +18,13 @@ import throttle from 'lodash/throttle'
 import { updateHighlightMutation } from '../../lib/networking/mutations/updateHighlightMutation'
 import { Highlight } from '../../lib/networking/fragments/highlightFragment'
 import { Button } from '../elements/Button'
+import {
+  ModalContent,
+  ModalOverlay,
+  ModalRoot,
+} from '../elements/ModalPrimitives'
+import { CloseButton } from '../elements/CloseButton'
+import { StyledText } from '../elements/StyledText'
 
 const mdParser = new MarkdownIt()
 
@@ -326,3 +333,111 @@ export function MarkdownNote(props: MarkdownNote): JSX.Element {
     </>
   )
 }
+
+type MarkdownModalProps = {
+  placeHolder: string
+  mode: 'edit' | 'preview'
+
+  sizeMode: 'normal' | 'maximized'
+  setEditMode: (set: 'edit' | 'preview') => void
+
+  text: string | undefined
+  saveText: (text: string, completed: (success: boolean) => void) => void
+}
+
+export function MarkdownModal(props: MarkdownModalProps): JSX.Element {
+  const [lastSaved, setLastSaved] = useState<Date | undefined>(undefined)
+
+  const saveText = useCallback(
+    (text, updateTime) => {
+      props.saveText(text, (success) => {
+        if (success) {
+          setLastSaved(updateTime)
+        }
+      })
+    },
+    [props]
+  )
+
+  const handleClose = useCallback(() => {
+    console.log('onOpenChange')
+  }, [])
+
+  return (
+    <ModalRoot
+      defaultOpen
+      onOpenChange={handleClose}
+      css={{ width: '100%', height: '100%' }}
+    >
+      <ModalOverlay css={{ width: '100%', height: '100%' }} />
+      <ModalContent
+        css={{
+          bg: '$grayBg',
+          zIndex: '30',
+          width: '100%',
+          height: '100%',
+          maxHeight: 'unset',
+          maxWidth: 'unset',
+        }}
+      >
+        <VStack>
+          <HStack
+            distribution="between"
+            alignment="center"
+            css={{
+              width: '100%',
+              position: 'sticky',
+              top: '0px',
+              height: '50px',
+              p: '20px',
+              bg: '$grayBg',
+              zIndex: 10,
+            }}
+          >
+            <StyledText style="modalHeadline" css={{ color: '$thTextSubtle2' }}>
+              Edit Note
+            </StyledText>
+            <HStack
+              css={{
+                ml: 'auto',
+                cursor: 'pointer',
+                gap: '15px',
+                mr: '-5px',
+              }}
+              distribution="center"
+              alignment="center"
+            >
+              {/* <Dropdown triggerElement={<MenuTrigger />}>
+              <DropdownOption
+                onSelect={() => {
+                  exportHighlights()
+                }}
+                title="Export Notebook"
+              />
+              <DropdownOption
+                onSelect={() => {
+                  setShowConfirmDeleteNote(true)
+                }}
+                title="Delete Document Note"
+              />
+            </Dropdown> */}
+              <CloseButton close={handleClose} />
+            </HStack>
+          </HStack>
+          <SpanBox css={{ padding: '20px', width: '100%', height: '100%' }}>
+            <MarkdownNote
+              placeHolder={props.placeHolder}
+              mode={props.mode}
+              sizeMode={props.sizeMode}
+              setEditMode={props.setEditMode}
+              text={props.text}
+              saveText={saveText}
+              lastSaved={lastSaved}
+              fillBackground={false}
+            />
+          </SpanBox>
+        </VStack>
+      </ModalContent>
+    </ModalRoot>
+  )
+}

packages/web/components/patterns/HighlightView.tsx

@@ -11,7 +11,7 @@ import {
   HStack,
 } from '../elements/LayoutPrimitives'
 import { styled } from '../tokens/stitches.config'
-import { HighlightViewNote } from './HighlightNotes'
+import { HighlightViewNote, MarkdownModal } from './HighlightNotes'
 import ReactMarkdown from 'react-markdown'
 
 type HighlightViewProps = {

packages/web/components/templates/article/HighlightViewItem.tsx

@@ -29,7 +29,7 @@ export function HighlightViewItem(props: HighlightViewItemProps): JSX.Element {
 
   return (
     <HStack
-      css={{ width: '100%', py: '20px', cursor: 'pointer' }}
+      css={{ width: '100%', py: '20px' }}
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
     >

packages/web/components/templates/article/HighlightsLayer.tsx

@@ -29,6 +29,7 @@ import { Label } from '../../../lib/networking/fragments/labelFragment'
 import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery'
 import { ReadableItem } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
 import { useRouter } from 'next/router'
+import { MarkdownModal } from '../../patterns/HighlightNotes'
 
 type HighlightsLayerProps = {
   viewer: UserBasicData

packages/web/components/templates/article/Notebook.tsx

@@ -16,7 +16,7 @@ import { createHighlightMutation } from '../../../lib/networking/mutations/creat
 import { v4 as uuidv4 } from 'uuid'
 import { nanoid } from 'nanoid'
 import { deleteHighlightMutation } from '../../../lib/networking/mutations/deleteHighlightMutation'
-import { HighlightNoteBox } from '../../patterns/HighlightNotes'
+import { HighlightNoteBox, MarkdownNote } from '../../patterns/HighlightNotes'
 import { HighlightViewItem } from './HighlightViewItem'
 import { ConfirmationModal } from '../../patterns/ConfirmationModal'
 import { TrashIcon } from '../../elements/images/TrashIcon'

packages/web/components/templates/article/NotebookModal.tsx

@@ -3,7 +3,7 @@ import {
   ModalOverlay,
   ModalContent,
 } from '../../elements/ModalPrimitives'
-import { HStack } from '../../elements/LayoutPrimitives'
+import { HStack, SpanBox } from '../../elements/LayoutPrimitives'
 import { Button } from '../../elements/Button'
 import { StyledText } from '../../elements/StyledText'
 import { theme } from '../../tokens/stitches.config'
@@ -19,6 +19,7 @@ import 'react-markdown-editor-lite/lib/index.css'
 import { Notebook } from './Notebook'
 import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery'
 import { ReadableItem } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
+import { MarkdownNote } from '../../patterns/HighlightNotes'
 
 type NotebookModalProps = {
   viewer: UserBasicData
@@ -183,6 +184,7 @@ function CloseButton(props: { close: () => void }): JSX.Element {
     </Button>
   )
 }
+
 function SizeToggle(props: SizeToggleProps): JSX.Element {
   return (
     <Button