frontend: moving editor to app

frontend/apps/desktop/vite.main.config.ts

@@ -70,7 +70,17 @@ export default defineConfig(({command, mode}) => {
             }),
             _tamaguiPlugin,
           ]
-        : [tsConfigPaths(), _tamaguiPlugin],
+        : [
+            tsConfigPaths(),
+            _tamaguiPlugin,
+            // {
+            //   name: 'log-files',
+            //   transform(code, id) {
+            //     console.log('Processing file:', id)
+            //     return code
+            //   },
+            // },
+          ],
     alias: {
       'react-native': 'react-native-web',
     },

frontend/packages/app/components/app-embeds.tsx

@@ -9,13 +9,13 @@ import {
   InlineEmbedComponentProps,
   PublicationCardView,
   UnpackedHypermediaId,
-  blockStyles,
   createHmId,
   formattedDateMedium,
   getBlockNodeById,
   unpackHmId,
-  usePublicationContentContext
+  usePublicationContentContext,
 } from '@shm/shared'
+import {blockStyles} from '@shm/shared/src/publication-content'
 import {
   Button,
   ButtonText,
@@ -26,7 +26,7 @@ import {
   XStack,
   YStack,
 } from '@shm/ui'
-import { ArrowUpRightSquare } from '@tamagui/lucide-icons'
+import {ArrowUpRightSquare} from '@tamagui/lucide-icons'
 import {
   ComponentProps,
   PropsWithChildren,
@@ -36,17 +36,17 @@ import {
   useRef,
   useState,
 } from 'react'
-import { YStackProps } from 'tamagui'
-import { useAccount, useAccounts } from '../models/accounts'
-import { useComment } from '../models/comments'
-import { usePublication } from '../models/documents'
-import { usePublicationVariant } from '../models/publication'
-import { getAvatarUrl } from '../utils/account-url'
-import { useNavRoute } from '../utils/navigation'
-import { getRouteContext, useOpenInContext } from '../utils/route-context'
-import { useNavigate } from '../utils/useNavigate'
-import { BaseAccountLinkAvatar } from './account-link-avatar'
-import { Avatar } from './avatar'
+import {YStackProps} from 'tamagui'
+import {useAccount, useAccounts} from '../models/accounts'
+import {useComment} from '../models/comments'
+import {usePublication} from '../models/documents'
+import {usePublicationVariant} from '../models/publication'
+import {getAvatarUrl} from '../utils/account-url'
+import {useNavRoute} from '../utils/navigation'
+import {getRouteContext, useOpenInContext} from '../utils/route-context'
+import {useNavigate} from '../utils/useNavigate'
+import {BaseAccountLinkAvatar} from './account-link-avatar'
+import {Avatar} from './avatar'
 
 function EmbedWrapper({
   hmRef,
@@ -174,23 +174,23 @@ function EmbedWrapper({
       onPress={
         !disableEmbedClick
           ? () => {
-            // if (comment && route.key == 'publication' && route.documentId == )
-            // open(hmRef, true)
-            if (comment) {
-              if (
-                route.key == 'publication' &&
-                unpackRef?.qid == route.documentId
-              ) {
-                navigate({
-                  ...route,
-                  blockId: unpackRef?.blockRef!,
-                  versionId: unpackRef?.version!,
-                })
+              // if (comment && route.key == 'publication' && route.documentId == )
+              // open(hmRef, true)
+              if (comment) {
+                if (
+                  route.key == 'publication' &&
+                  unpackRef?.qid == route.documentId
+                ) {
+                  navigate({
+                    ...route,
+                    blockId: unpackRef?.blockRef!,
+                    versionId: unpackRef?.version!,
+                  })
+                }
+              } else {
+                open(hmRef, parentBlockId)
               }
-            } else {
-              open(hmRef, parentBlockId)
             }
-          }
           : undefined
       }
       {...props}
@@ -230,19 +230,19 @@ export function useSizeObserver(onRect: (rect: DOMRect) => void) {
 
 const EmbedSideAnnotation = forwardRef<
   HTMLDivElement,
-  { hmId: string; sidePos: 'bottom' | 'right' }
->(function EmbedSideAnnotation({ hmId, sidePos }, ref) {
+  {hmId: string; sidePos: 'bottom' | 'right'}
+>(function EmbedSideAnnotation({hmId, sidePos}, ref) {
   const unpacked = unpackHmId(hmId)
 
   // @ts-expect-error
   const sideStyles: YStackProps =
     sidePos == 'right'
       ? {
-        position: 'absolute',
-        top: 32,
-        right: -16,
-        transform: 'translateX(100%)',
-      }
+          position: 'absolute',
+          top: 32,
+          right: -16,
+          transform: 'translateX(100%)',
+        }
       : {}
 
   if (unpacked && unpacked.type == 'c')
@@ -318,7 +318,7 @@ const EmbedSideAnnotation = forwardRef<
         size="$1"
         color="$blue9"
         opacity={0}
-        $group-item-hover={{ opacity: 1 }}
+        $group-item-hover={{opacity: 1}}
       >
         Go to Document →
       </SizableText>
@@ -327,7 +327,7 @@ const EmbedSideAnnotation = forwardRef<
 })
 
 const CommentSideAnnotation = forwardRef(function CommentSideAnnotation(
-  props: { unpackedRef?: UnpackedHypermediaId; sideStyles: YStackProps },
+  props: {unpackedRef?: UnpackedHypermediaId; sideStyles: YStackProps},
   ref,
 ) {
   const comment = useComment(props.unpackedRef?.id)
@@ -414,7 +414,7 @@ const CommentSideAnnotation = forwardRef(function CommentSideAnnotation(
           size="$1"
           color="$blue9"
           opacity={0}
-          $group-item-hover={{ opacity: 1 }}
+          $group-item-hover={{opacity: 1}}
         >
           Go to Document →
         </SizableText>
@@ -442,8 +442,8 @@ export function EmbedPublicationContent(props: EntityComponentProps) {
       showReferenced && props.version
         ? props.version
         : props.latest
-          ? undefined
-          : props.version || undefined,
+        ? undefined
+        : props.version || undefined,
     variants: props.variants || undefined,
     enabled: !!documentId,
   })
@@ -627,8 +627,8 @@ export function EmbedComment(props: EntityComponentProps) {
   )
 }
 
-function AvatarComponent({ accountId }: { accountId: string }) {
-  let { data: account } = useAccount(accountId)
+function AvatarComponent({accountId}: {accountId: string}) {
+  let {data: account} = useAccount(accountId)
   return (
     <Avatar
       label={account?.profile?.alias}
@@ -638,7 +638,6 @@ function AvatarComponent({ accountId }: { accountId: string }) {
   )
 }
 
-
 export function EmbedInline(props: InlineEmbedComponentProps) {
   if (props?.type == 'a') {
     return <AccountInlineEmbed {...props} />
@@ -659,7 +658,7 @@ function AccountInlineEmbed(props: InlineEmbedComponentProps) {
   return (
     <InlineEmbedButton
       dataRef={props?.id}
-      onPress={() => navigate({ key: 'account', accountId })}
+      onPress={() => navigate({key: 'account', accountId})}
     >
       {(accountId &&
         accountQuery.status == 'success' &&
@@ -669,7 +668,6 @@ function AccountInlineEmbed(props: InlineEmbedComponentProps) {
   )
 }
 
-
 function PublicationInlineEmbed(props: InlineEmbedComponentProps) {
   const pubId = props?.type == 'd' ? props.qid : undefined
   if (!pubId) throw new Error('Invalid props at PublicationInlineEmbed (pubId)')

frontend/packages/shared/src/editor/autocomplete.tsx → frontend/packages/app/editor/autocomplete.tsx

@@ -1,17 +1,17 @@
-import { Entity } from '@shm/shared/src/client/.generated/entities/v1alpha/entities_pb'
-import { keyboardStack, useKeyboard } from '@shm/shared/src/editor'
-import { Button, ButtonProps, SizableText, XStack, YStack } from '@shm/ui'
-import { Fragment, NodeSpec } from '@tiptap/pm/model'
-import { Decoration, DecorationSet } from '@tiptap/pm/view'
-import { keymap } from 'prosemirror-keymap'
-import { NodeSelection, Plugin, PluginKey } from 'prosemirror-state'
+import {Entity} from '@shm/shared/src/client/.generated/entities/v1alpha/entities_pb'
+import {Button, ButtonProps, SizableText, XStack, YStack} from '@shm/ui'
+import {Fragment, NodeSpec} from '@tiptap/pm/model'
+import {Decoration, DecorationSet} from '@tiptap/pm/view'
+import {keymap} from 'prosemirror-keymap'
+import {NodeSelection, Plugin, PluginKey} from 'prosemirror-state'
 import React, {
   useEffect,
   useLayoutEffect,
   useMemo,
   useRef,
   useState,
 } from 'react'
+import {keyboardStack, useKeyboard} from './keyboard-helpers'
 
 export function createAutoCompletePlugin<N extends string, T>(args: {
   nodeName: N

frontend/packages/editor/src/blocknote/core/BlockNoteEditor.ts → frontend/packages/app/editor/blocknote/core/BlockNoteEditor.ts

@@ -35,7 +35,7 @@ import {
 import {Selection} from './extensions/Blocks/api/selectionTypes'
 import {getBlockInfoFromPos} from './extensions/Blocks/helpers/getBlockInfoFromPos'
 
-import {HMBlockSchema, hmBlockSchema} from '@/schema'
+import {HMBlockSchema, hmBlockSchema} from '../../schema'
 import {FormattingToolbarProsemirrorPlugin} from './extensions/FormattingToolbar/FormattingToolbarPlugin'
 import {HyperlinkToolbarProsemirrorPlugin} from './extensions/HyperlinkToolbar/HyperlinkToolbarPlugin'
 import {LinkMenuProsemirrorPlugin} from './extensions/LinkMenu/LinkMenuPlugin'

frontend/packages/editor/src/blocknote/core/BlockNoteExtensions.ts → frontend/packages/app/editor/blocknote/core/BlockNoteExtensions.ts

@@ -1,38 +1,38 @@
-import { HMBlockSchema } from '@/schema'
-import { Extensions, extensions } from '@tiptap/core'
+import {Extensions, extensions} from '@tiptap/core'
+import {HMBlockSchema} from '../../schema'
 
-import { BlockNoteEditor } from './BlockNoteEditor'
+import {BlockNoteEditor} from './BlockNoteEditor'
 
-import { DiffExtension } from '@/diffExtension'
-import { createInlineEmbedNode } from '@/mentions-plugin'
-import Link from '@/tiptap-extension-link'
-import { LocalMediaPastePlugin } from '@shm/shared/src/editor'
-import { Bold } from '@tiptap/extension-bold'
-import { Code } from '@tiptap/extension-code'
+import {LocalMediaPastePlugin} from '@shm/app/editor/handle-local-media-paste-plugin'
+import {Bold} from '@tiptap/extension-bold'
+import {Code} from '@tiptap/extension-code'
 import Collaboration from '@tiptap/extension-collaboration'
 import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
-import { Dropcursor } from '@tiptap/extension-dropcursor'
-import { Gapcursor } from '@tiptap/extension-gapcursor'
-import { HardBreak } from '@tiptap/extension-hard-break'
-import { History } from '@tiptap/extension-history'
-import { Italic } from '@tiptap/extension-italic'
-import { Strike } from '@tiptap/extension-strike'
-import { Text } from '@tiptap/extension-text'
-import { Underline } from '@tiptap/extension-underline'
+import {Dropcursor} from '@tiptap/extension-dropcursor'
+import {Gapcursor} from '@tiptap/extension-gapcursor'
+import {HardBreak} from '@tiptap/extension-hard-break'
+import {History} from '@tiptap/extension-history'
+import {Italic} from '@tiptap/extension-italic'
+import {Strike} from '@tiptap/extension-strike'
+import {Text} from '@tiptap/extension-text'
+import {Underline} from '@tiptap/extension-underline'
 import * as Y from 'yjs'
+import {DiffExtension} from '../../diffExtension'
+import {createInlineEmbedNode} from '../../mentions-plugin'
+import Link from '../../tiptap-extension-link'
 import styles from './editor.module.css'
-import { BackgroundColorExtension } from './extensions/BackgroundColor/BackgroundColorExtension'
-import { BackgroundColorMark } from './extensions/BackgroundColor/BackgroundColorMark'
-import { BlockManipulationExtension } from './extensions/BlockManipulation/BlockManipulationExtension'
-import { BlockContainer, BlockGroup, Doc } from './extensions/Blocks'
-import { BlockNoteDOMAttributes } from './extensions/Blocks/api/blockTypes'
-import { CustomBlockSerializerExtension } from './extensions/Blocks/api/serialization'
+import {BackgroundColorExtension} from './extensions/BackgroundColor/BackgroundColorExtension'
+import {BackgroundColorMark} from './extensions/BackgroundColor/BackgroundColorMark'
+import {BlockManipulationExtension} from './extensions/BlockManipulation/BlockManipulationExtension'
+import {BlockContainer, BlockGroup, Doc} from './extensions/Blocks'
+import {BlockNoteDOMAttributes} from './extensions/Blocks/api/blockTypes'
+import {CustomBlockSerializerExtension} from './extensions/Blocks/api/serialization'
 import blockStyles from './extensions/Blocks/nodes/Block.module.css'
-import { Placeholder } from './extensions/Placeholder/PlaceholderExtension'
-import { TextAlignmentExtension } from './extensions/TextAlignment/TextAlignmentExtension'
-import { TextColorExtension } from './extensions/TextColor/TextColorExtension'
-import { TextColorMark } from './extensions/TextColor/TextColorMark'
-import { TrailingNode } from './extensions/TrailingNode/TrailingNodeExtension'
+import {Placeholder} from './extensions/Placeholder/PlaceholderExtension'
+import {TextAlignmentExtension} from './extensions/TextAlignment/TextAlignmentExtension'
+import {TextColorExtension} from './extensions/TextColor/TextColorExtension'
+import {TextColorMark} from './extensions/TextColor/TextColorMark'
+import {TrailingNode} from './extensions/TrailingNode/TrailingNodeExtension'
 import UniqueID from './extensions/UniqueID/UniqueID'
 
 /**

frontend/packages/editor/src/blocknote/core/extensions/BlockManipulation/BlockManipulationExtension.ts → frontend/packages/app/editor/blocknote/core/extensions/BlockManipulation/BlockManipulationExtension.ts

@@ -1,4 +1,3 @@
-import {findNextBlock, findPreviousBlock} from '@/block-utils'
 import {Extension} from '@tiptap/core'
 import {ResolvedPos} from '@tiptap/pm/model'
 import {EditorView} from '@tiptap/pm/view'
@@ -9,6 +8,7 @@ import {
   PluginKey,
   TextSelection,
 } from 'prosemirror-state'
+import {findNextBlock, findPreviousBlock} from '../../../../block-utils'
 import {getBlockInfoFromPos} from '../Blocks/helpers/getBlockInfoFromPos'
 
 export const BlockManipulationExtension = Extension.create({

frontend/packages/editor/src/blocknote/core/extensions/Blocks/api/inlineContentTypes.ts → frontend/packages/app/editor/blocknote/core/extensions/Blocks/api/inlineContentTypes.ts

@@ -22,7 +22,7 @@ export type StyledText = {
   styles: Styles
 }
 
-export type Link = {
+export type BNLink = {
   type: 'link'
   href: string
   content: StyledText[]
@@ -33,9 +33,9 @@ export type InlineEmbed = {
   ref: string
 }
 
-export type PartialLink = Omit<Link, 'content'> & {
-  content: string | Link['content']
+export type PartialLink = Omit<BNLink, 'content'> & {
+  content: string | BNLink['content']
 }
 
-export type InlineContent = StyledText | Link | InlineEmbed
+export type InlineContent = StyledText | BNLink | InlineEmbed
 export type PartialInlineContent = StyledText | PartialLink

frontend/packages/editor/src/blocknote/core/extensions/DragMedia/DragExtension.ts → frontend/packages/app/editor/blocknote/core/extensions/DragMedia/DragExtension.ts

@@ -1,8 +1,8 @@
-import {HMBlockSchema} from '@/schema'
 import {API_FILE_UPLOAD_URL} from '@shm/shared'
 import {toast} from '@shm/ui'
 import {Extension} from '@tiptap/core'
 import {Plugin, PluginKey} from 'prosemirror-state'
+import {HMBlockSchema} from '../../../../schema'
 import {BlockNoteEditor} from '../../BlockNoteEditor'
 import {getBlockInfoFromPos} from '../Blocks/helpers/getBlockInfoFromPos'
 

frontend/packages/editor/src/blocknote/core/extensions/LinkMenu/defaultLinkMenuItems.tsx → frontend/packages/app/editor/blocknote/core/extensions/LinkMenu/defaultLinkMenuItems.tsx

@@ -1,3 +1,4 @@
+import {youtubeParser} from '@shm/app/editor/utils'
 import {
   HYPERMEDIA_ENTITY_TYPES,
   StateStream,
@@ -6,12 +7,11 @@ import {
   isPublicGatewayLink,
   normalizeHmId,
 } from '@shm/shared'
-import { youtubeParser } from '@shm/shared/src/editor'
-import { Globe, Link, Spinner, SquareAsterisk, TwitterXIcon } from '@shm/ui'
-import { Node } from '@tiptap/pm/model'
-import { BlockNoteEditor } from '../../BlockNoteEditor'
-import { getBlockInfoFromPos } from '../Blocks/helpers/getBlockInfoFromPos'
-import { LinkMenuItem } from './LinkMenuItem'
+import {Globe, Link, Spinner, SquareAsterisk, TwitterXIcon} from '@shm/ui'
+import {Node} from '@tiptap/pm/model'
+import {BlockNoteEditor} from '../../BlockNoteEditor'
+import {getBlockInfoFromPos} from '../Blocks/helpers/getBlockInfoFromPos'
+import {LinkMenuItem} from './LinkMenuItem'
 
 export function getLinkMenuItems({
   isLoading,