Update editor library

frontend/apps/site/pages/g/[groupId]/index.tsx

@@ -3,36 +3,37 @@ import {
   GetServerSidePropsContext,
   InferGetServerSidePropsType,
 } from 'next'
+import Head from 'next/head'
 import {setAllowAnyHostGetCORS} from 'server/cors'
 import {getPageProps, serverHelpers} from 'server/ssr-helpers'
-import Head from 'next/head'
 import {SiteHead} from '../../../site-head'
 
-import {trpc} from '../../../trpc'
-import {
-  PageSection,
-  Text,
-  YStack,
-  Footer,
-  ButtonText,
-  Button,
-  SideSectionTitle,
-  SideSection,
-  View,
-} from '@mintter/ui'
-import {HMGroup, HMPublication} from '../../../server/json-hm'
-import {ReactElement} from 'react'
-import {GestureResponderEvent} from 'react-native'
 import {Timestamp} from '@bufbuild/protobuf'
 import {
+  createHmId,
+  createPublicWebHmUrl,
   formattedDate,
   unpackHmId,
-  createPublicWebHmUrl,
-  createHmId,
 } from '@mintter/shared'
+import {
+  Button,
+  ButtonText,
+  Footer,
+  PageSection,
+  SideSection,
+  SideSectionTitle,
+  Text,
+  Tooltip,
+  View,
+  YStack,
+} from '@mintter/ui'
 import {AccountAvatarLink, AccountRow} from 'components/account-row'
 import {format} from 'date-fns'
+import {ReactElement} from 'react'
+import {GestureResponderEvent} from 'react-native'
 import {Paragraph} from 'tamagui'
+import {HMGroup, HMPublication} from '../../../server/json-hm'
+import {trpc} from '../../../trpc'
 
 function GroupOwnerSection({owner}: {owner: string}) {
   return (
@@ -64,13 +65,11 @@ function LastUpdateSection({time}: {time: string}) {
     <SideSection>
       <SideSectionTitle>Last Update:</SideSectionTitle>
 
-      <SimpleTooltip
-        content={format(new Date(time), 'MMMM do yyyy, HH:mm:ss z')}
-      >
+      <Tooltip content={format(new Date(time), 'MMMM do yyyy, HH:mm:ss z')}>
         <Paragraph color="$blue11">
           {format(new Date(time), 'EEEE, MMMM do, yyyy')}
         </Paragraph>
-      </SimpleTooltip>
+      </Tooltip>
     </SideSection>
   )
 }

frontend/apps/site/publication-metadata.tsx

@@ -13,6 +13,7 @@ import {
   SideSectionTitle,
   SizableText,
   Text,
+  Tooltip,
   XStack,
   YStack,
 } from '@mintter/ui'
@@ -30,7 +31,7 @@ function IDLabelRow({id, label}: {id?: string; label: string}) {
   return (
     <XStack>
       <SizableText opacity={0.5}>{label}:&nbsp;</SizableText>
-      <SimpleTooltip
+      <Tooltip
         content={
           <>
             <Clipboard size={12} /> Copy: {id}
@@ -47,7 +48,7 @@ function IDLabelRow({id, label}: {id?: string; label: string}) {
         >
           {abbreviateCid(id)}
         </Button>
-      </SimpleTooltip>
+      </Tooltip>
     </XStack>
   )
 }
@@ -552,7 +553,7 @@ function LatestVersionBanner({
         {publishTimeRelative}
       </SizableText>
 
-      <SimpleTooltip
+      <Tooltip
         content={format(
           new Date(record.publishTime),
           'MMMM do yyyy, HH:mm:ss z',
@@ -561,7 +562,7 @@ function LatestVersionBanner({
         <Paragraph color="$blue11">
           {format(new Date(record.publishTime), 'EEEE, MMMM do, yyyy')}
         </Paragraph>
-      </SimpleTooltip>
+      </Tooltip>
     </NextLink>
   )
 }

frontend/packages/app/src/components/citations-context.tsx

@@ -60,10 +60,10 @@ export function useCitationsForBlock(blockId: string) {
   let context = useContext(citationsContext)
   let citations = useMemo(() => {
     if (!context) return []
-    return context.citations.data?.links.filter((link) => {
+    return context.citations?.data?.links.filter((link) => {
       return link.target?.blockId == blockId
     })
-  }, [blockId, context.citations])
+  }, [blockId, context])
 
   return {
     citations,

frontend/packages/app/src/models/documents.ts

@@ -4,7 +4,6 @@ import {
   useListen,
   useQueryInvalidator,
 } from '@mintter/app/src/app-context'
-import {fetchWebLink} from './web-links'
 import {editorBlockToServerBlock} from '@mintter/app/src/client/editor-to-server'
 import {serverChildrenToEditorChildren} from '@mintter/app/src/client/server-to-editor'
 import {useOpenUrl} from '@mintter/app/src/open-url'
@@ -16,14 +15,11 @@ import {
   HMBlockSchema,
   InlineContent,
   PartialBlock,
-  RightsideWidget,
-  createHyperdocsDocLinkPlugin,
-  defaultReactSlashMenuItems,
-  formattingToolbarFactory,
+  createHypermediaDocLinkPlugin,
   hmBlockSchema,
-  insertFile,
-  insertImage,
-  insertVideo,
+  // insertFile,
+  // insertImage,
+  // insertVideo,
   useBlockNote,
 } from '@mintter/editor'
 import {
@@ -37,7 +33,6 @@ import {
   normlizeHmId,
   unpackDocId,
 } from '@mintter/shared'
-import {useWidgetViewFactory} from '@prosemirror-adapter/react'
 import {
   FetchQueryOptions,
   UseMutationOptions,
@@ -48,12 +43,13 @@ import {
 } from '@tanstack/react-query'
 import {Editor, Extension, findParentNode} from '@tiptap/core'
 import {Node} from 'prosemirror-model'
-import {useEffect, useRef} from 'react'
+import {memo, useEffect, useRef} from 'react'
 import {useGRPCClient} from '../app-context'
 import {PublicationRouteContext, useNavRoute} from '../utils/navigation'
+import {pathNameify} from '../utils/path'
 import {usePublicationInContext} from './publication'
 import {queryKeys} from './query-keys'
-import {pathNameify} from '../utils/path'
+import {fetchWebLink} from './web-links'
 
 export type HMBlock = Block<typeof hmBlockSchema>
 export type HMPartialBlock = PartialBlock<typeof hmBlockSchema>
@@ -592,17 +588,15 @@ export function useDraftEditor(
     blocks: Block<typeof hmBlockSchema>[],
     parentId: string,
   ) {
-    if (isReady.current) {
-      blocks.forEach((block, index) => {
-        const leftSibling = index === 0 ? '' : blocks[index - 1]?.id
-        lastBlockParent.current[block.id] = parentId
-        lastBlockLeftSibling.current[block.id] = leftSibling
-        lastBlocks.current[block.id] = block
-        if (block.children) {
-          prepareBlockObservations(block.children, block.id)
-        }
-      })
-    }
+    blocks.forEach((block, index) => {
+      const leftSibling = index === 0 ? '' : blocks[index - 1]?.id
+      lastBlockParent.current[block.id] = parentId
+      lastBlockLeftSibling.current[block.id] = leftSibling
+      lastBlocks.current[block.id] = block
+      if (block.children) {
+        prepareBlockObservations(block.children, block.id)
+      }
+    })
   }
 
   function getBlockGroup(blockId: BlockIdentifier) {
@@ -661,6 +655,7 @@ export function useDraftEditor(
     ])
 
     // this is to populate the blocks we use to compare changes
+
     prepareBlockObservations(editor.topLevelBlocks, '')
     isReady.current = true
     handleAfterReady()
@@ -669,6 +664,7 @@ export function useDraftEditor(
   const editor = useBlockNote<typeof hmBlockSchema>({
     onEditorContentChange(editor: BlockNoteEditor<typeof hmBlockSchema>) {
       opts?.onEditorState?.(editor.topLevelBlocks)
+      if (!isReady.current) return
       if (!readyThings.current[0] || !readyThings.current[1]) return
 
       // trim empty blocks from the end of the document before treating them.
@@ -784,25 +780,22 @@ export function useDraftEditor(
       readyThings.current[0] = e
       handleMaybeReady()
     },
-    uiFactories: {
-      formattingToolbarFactory,
-    },
     blockSchema: hmBlockSchema,
-    // @ts-expect-error
-    slashCommands: [
-      ...defaultReactSlashMenuItems.slice(0, 2),
-      insertImage,
-      insertFile,
-      insertVideo,
-      ...defaultReactSlashMenuItems.slice(2),
-    ],
+    // slashCommands: [
+    //   ...defaultReactSlashMenuItems.slice(0, 2),
+    //   insertImage,
+    //   insertFile,
+    //   insertVideo,
+    //   ...defaultReactSlashMenuItems.slice(2),
+    // ],
+
     _tiptapOptions: {
       extensions: [
         Extension.create({
-          name: 'hyperdocs-link',
+          name: 'hypermedia-link',
           addProseMirrorPlugins() {
             return [
-              createHyperdocsDocLinkPlugin({
+              createHypermediaDocLinkPlugin({
                 queryClient,
                 fetchWebLink,
               }).plugin,
@@ -970,8 +963,6 @@ export function usePublicationEditor(
     },
   })
 
-  const widgetViewFactory = useWidgetViewFactory()
-
   // both the publication data and the editor are asyncronously loaded
   // using a ref to avoid extra renders, and ensure the editor is available and ready
   const readyThings = useRef<[HyperDocsEditor | null, Publication | null]>([
@@ -1021,12 +1012,6 @@ export function usePublicationEditor(
         applyPubToEditor(e, readyPub)
       }
     },
-    uiFactories: {
-      rightsideFactory: widgetViewFactory({
-        component: RightsideWidget,
-        as: 'div',
-      }),
-    },
   })
 
   return {

frontend/packages/app/src/pages/publication.tsx

@@ -10,11 +10,10 @@ import {useNavigate} from '@mintter/app/src/utils/useNavigate'
 import {
   MttLink,
   features,
-  formattedDateMedium,
   formattedDateLong,
+  formattedDateMedium,
   pluralS,
 } from '@mintter/shared'
-import {ProsemirrorAdapterProvider} from '@prosemirror-adapter/react'
 import {
   Button,
   ButtonText,
@@ -32,25 +31,20 @@ import 'allotment/dist/style.css'
 import {useState} from 'react'
 import {ErrorBoundary} from 'react-error-boundary'
 
+import {Timestamp} from '@bufbuild/protobuf'
 import {AppError} from '@mintter/app/src/components/app-error'
 import {CitationsProvider} from '@mintter/app/src/components/citations-context'
 import {DebugData} from '@mintter/app/src/components/debug-data'
 import {HMEditorContainer, HyperMediaEditorView} from '@mintter/editor'
-import {useLatestPublication} from '../models/documents'
-import {DocumentPlaceholder} from './document-placeholder'
-import {getAvatarUrl} from '../utils/account-url'
 import {AccountLinkAvatar} from '../components/account-link-avatar'
 import {useAccount} from '../models/accounts'
-import {NavRoute} from '../utils/navigation'
-import {Timestamp} from '@bufbuild/protobuf'
 import {useChange} from '../models/changes'
+import {useLatestPublication} from '../models/documents'
+import {NavRoute} from '../utils/navigation'
+import {DocumentPlaceholder} from './document-placeholder'
 
 export default function PublicationPage() {
-  return (
-    <ProsemirrorAdapterProvider>
-      <PublicationPageEditor />
-    </ProsemirrorAdapterProvider>
-  )
+  return <PublicationPageEditor />
 }
 
 function AuthorLink({author}: {author: string}) {

frontend/packages/editor/package.json

@@ -20,8 +20,6 @@
     "@mantine/hooks": "6.0.13",
     "@mintter/shared": "workspace:*",
     "@mintter/ui": "workspace:*",
-    "@prosemirror-adapter/core": "0.2.6",
-    "@prosemirror-adapter/react": "0.2.6",
     "@radix-ui/colors": "0.1.9",
     "@sentry/tracing": "7.49.0",
     "@tamagui/lucide-icons": "1.61.1",
@@ -58,6 +56,7 @@
     "remark-rehype": "10.1.0",
     "remark-stringify": "10.0.2",
     "unified": "10.1.2",
+    "use-prefers-color-scheme": "^1.1.3",
     "y-prosemirror": "1.2.1",
     "y-protocols": "1.0.5",
     "yjs": "13.6.4"