commit after pnpm format

frontend/app/src/components/conversations.tsx

@@ -630,4 +630,4 @@ function CommentBlock({comment}: {comment: Block}) {
       <Text alt>{comment.text}</Text>
     </Box>
   )
-}
+}

frontend/app/src/drag-context.tsx

@@ -1,8 +1,8 @@
 import {dragMachine} from '@app/drag-machine'
-import { useSelector } from '@xstate/react'
+import {useSelector} from '@xstate/react'
 import {useContext, createContext, PropsWithChildren} from 'react'
 import {InterpreterFrom} from 'xstate'
-import { createInterpreterContext } from './utils/machine-utils'
+import {createInterpreterContext} from './utils/machine-utils'
 
 /**
  * we are not using the machine-utils here because we want the `useDrag` hook to be able to return undefined. this is because we should not be able to drag any block inside a publication, and we are calling this hook on each paragraph

frontend/app/src/drag-machine.ts

@@ -1,5 +1,3 @@
-import {Empty} from '@bufbuild/protobuf'
-import {FlowContent} from './../../shared/src/mttast/types'
 import {Group, isFlowContent, isGroupContent} from '@mintter/shared'
 import React from 'react'
 import {

frontend/app/src/editor/blockquote/blockquote.tsx

@@ -13,7 +13,7 @@ import {
 } from '@mintter/shared'
 import {Editor, Path, Transforms} from 'slate'
 import {RenderElementProps} from 'slate-react'
-import { ElementDrag } from '../drag-section'
+import {ElementDrag} from '../drag-section'
 import type {EditorPlugin} from '../types'
 import {resetFlowContent, useBlockFlash} from '../utils'
 
@@ -88,11 +88,7 @@ function BlockQuote({
   }
 
   return (
-    <ElementDrag
-      element={element}
-      attributes={attributes}
-      mode={mode}
-    >
+    <ElementDrag element={element} attributes={attributes} mode={mode}>
       {children}
       {/* <BlockTools block={element as BlockquoteType} /> */}
       <span contentEditable={false}>

frontend/app/src/editor/blocktools.tsx

@@ -31,13 +31,7 @@ import {
   video,
 } from '@mintter/shared'
 import {useSelector} from '@xstate/react'
-import {
-  Fragment,
-  MouseEvent,
-  ReactNode,
-  useMemo,
-  useState,
-} from 'react'
+import {Fragment, MouseEvent, ReactNode, useMemo, useState} from 'react'
 import toast from 'react-hot-toast'
 import {Editor, Node, NodeEntry, Transforms} from 'slate'
 import {ReactEditor, useSlate} from 'slate-react'

frontend/app/src/editor/code/code.tsx

@@ -28,7 +28,7 @@ import {findPath, lowerPoint, resetFlowContent, useBlockFlash} from '../utils'
 import {useBlockConversations} from '@app/editor/comments/conversations-context'
 import {ConversationBlockBubble} from '@components/conversation-block-bubble'
 import {BlockTools} from '@app/editor/blocktools'
-import { ElementDrag } from '../drag-section'
+import {ElementDrag} from '../drag-section'
 
 export const ELEMENT_CODE = 'code'
 const LEAF_TOKEN = 'codeToken'
@@ -240,11 +240,7 @@ function Code({
   }
 
   return (
-    <ElementDrag
-      element={element}
-      attributes={attributes}
-      mode={mode}
-    >
+    <ElementDrag element={element} attributes={attributes} mode={mode}>
       {children}
       {/* <BlockTools block={element as CodeType} /> */}
       {mode == EditorMode.Draft ? (

frontend/app/src/editor/comments/comments.tsx

@@ -18,6 +18,7 @@ export function createCommentsPlugin(): EditorPlugin {
       ({attributes, children, leaf}) => {
         let {highlights} = useConversations()
         let ref = useRef<HTMLSpanElement>(null)
+
         function emitSelectorClick(e) {
           e.preventDefault()
           appWindow.emit('selector_click', {
@@ -26,15 +27,9 @@ export function createCommentsPlugin(): EditorPlugin {
         }
         let highlight = useMemo(
           () => highlights.some((c) => leaf.conversations?.includes(c)),
-          [highlights],
+          [highlights, leaf.conversations],
         )
 
-        useEffect(() => {
-          if (highlight && ref.current) {
-            ref.current.scrollIntoView({behavior: 'smooth'})
-          }
-        }, [highlights])
-
         if (typeof leaf.conversations !== 'undefined' && leaf.text) {
           return (
             <span
@@ -160,4 +155,4 @@ function isObjectEmpty(obj: unknown) {
     Object.keys(obj).length === 0 &&
     Object.getPrototypeOf(obj) === Object.prototype
   )
-}
+}

frontend/app/src/editor/drag-section.tsx

@@ -1,15 +1,13 @@
-import { useDrag } from '@app/drag-context';
-import { dragMachine } from '@app/drag-machine';
-import { useMouse } from '@app/mouse-context';
-import { FlowContent } from '@mintter/shared';
-import React from 'react';
-import { Editor, Transforms, Element as SlateElement, Node } from 'slate';
-import { ReactEditor, RenderElementProps, useSlate } from 'slate-react';
-import { BlockTools } from './blocktools';
-import { useBlockProps } from './editor-node-props';
-import { useBlockFlash } from './utils';
-
-export type DndState = { fromPath: number[] | null; toPath: number[] | null };
+import {useDrag} from '@app/drag-context'
+import {useMouse} from '@app/mouse-context'
+import {FlowContent} from '@mintter/shared'
+import React from 'react'
+import {RenderElementProps} from 'slate-react'
+import {BlockTools} from './blocktools'
+import {useBlockProps} from './editor-node-props'
+import {useBlockFlash} from './utils'
+
+export type DndState = {fromPath: number[] | null; toPath: number[] | null}
 
 const ElementDrag = ({children, element, attributes}: RenderElementProps) => {
   let dragService = useDrag()
@@ -42,4 +40,4 @@ const ElementDrag = ({children, element, attributes}: RenderElementProps) => {
   )
 }
 
-export {ElementDrag}
+export {ElementDrag}

frontend/app/src/editor/heading/heading.tsx

@@ -13,7 +13,7 @@ import {
 } from '@mintter/shared'
 import {Editor, NodeEntry, Transforms} from 'slate'
 import {RenderElementProps} from 'slate-react'
-import { ElementDrag } from '../drag-section'
+import {ElementDrag} from '../drag-section'
 import {MintterEditor} from '../mintter-changes/plugin'
 import type {EditorPlugin} from '../types'
 import {isFirstChild, resetFlowContent, useBlockFlash} from '../utils'
@@ -123,11 +123,7 @@ function Heading({
   }
 
   return (
-    <ElementDrag
-      element={element}
-      attributes={attributes}
-      mode={mode}
-    >
+    <ElementDrag element={element} attributes={attributes} mode={mode}>
       {children}
       {/* <BlockTools block={element as HeadingType} /> */}
       <span contentEditable={false}>

frontend/app/src/editor/paragraph/paragraph.tsx

@@ -17,8 +17,8 @@ import {Editor, Node, Path, Transforms} from 'slate'
 import {ReactEditor, RenderElementProps, useSlate} from 'slate-react'
 import {EditorMode} from '../plugin-utils'
 import type {EditorPlugin} from '../types'
-import { red } from '@radix-ui/colors'
-import { useActor, useSelector } from '@xstate/react'
+import {red} from '@radix-ui/colors'
+import {useActor, useSelector} from '@xstate/react'
 
 export const ELEMENT_PARAGRAPH = 'paragraph'
 
@@ -70,14 +70,14 @@ function Paragraph({
 }: RenderElementProps & {mode: EditorMode; element: ParagraphType}) {
   let editor = useSlate()
   let {elementProps, parentNode, parentPath} = usePhrasingProps(editor, element)
-// dragProps
+  // dragProps
   let pRef = useRef<HTMLElement | undefined>()
   let otherProps = {
     ref: mergeRefs([attributes.ref, pRef]),
   }
   useBlockObserve(mode, pRef)
-  let mouseService = useMouse();
-  let dragService = useDrag();
+  let mouseService = useMouse()
+  let dragService = useDrag()
 
   let mouseProps =
     mode != EditorMode.Discussion
@@ -94,29 +94,29 @@ function Paragraph({
         }
       : {}
 
-    const onDragOver = (e: React.DragEvent) => {
-      e.preventDefault()
-      // const domNode = ReactEditor.toDOMNode(editor, element)
-      const path = ReactEditor.findPath(editor, element)
+  const onDragOver = (e: React.DragEvent) => {
+    e.preventDefault()
+    // const domNode = ReactEditor.toDOMNode(editor, element)
+    const path = ReactEditor.findPath(editor, element)
 
-      const parentBlock = Editor.above<FlowContent>(editor, {
-        match: isFlowContent,
-        mode: 'lowest',
-        at: path,
-      })
+    const parentBlock = Editor.above<FlowContent>(editor, {
+      match: isFlowContent,
+      mode: 'lowest',
+      at: path,
+    })
 
-      if (parentBlock) {
-        const [node, ancestorPath] = parentBlock;
+    if (parentBlock) {
+      const [node, ancestorPath] = parentBlock
 
-        const domNode = ReactEditor.toDOMNode(editor, node)
+      const domNode = ReactEditor.toDOMNode(editor, node)
 
-        dragService?.send({
-          type: 'DRAG.OVER',
-          toPath: ancestorPath,
-          element: domNode as HTMLLIElement,
-        })
-      }
+      dragService?.send({
+        type: 'DRAG.OVER',
+        toPath: ancestorPath,
+        element: domNode as HTMLLIElement,
+      })
     }
+  }
 
   if (mode == EditorMode.Embed) {
     return (

frontend/app/src/editor/plugin-utils.tsx

@@ -78,7 +78,7 @@ export function buildRenderElementHook(
   return function SlateElement(props: RenderElementProps) {
     for (const {name, renderElement} of filteredPlugins) {
       try {
-        const element = renderElement(editor)(props);
+        const element = renderElement(editor)(props)
         if (element) return element
       } catch (e) {
         error(`[${name}] ${e} in renderElement hook`)

frontend/app/src/editor/statement/statement.tsx

@@ -19,7 +19,7 @@ import {
 } from '@mintter/shared'
 import {Editor, Node, NodeEntry, Path, Transforms} from 'slate'
 import {RenderElementProps} from 'slate-react'
-import { ElementDrag } from '../drag-section'
+import {ElementDrag} from '../drag-section'
 import {EditorMode} from '../plugin-utils'
 import type {EditorPlugin} from '../types'
 import {isFirstChild, useBlockFlash} from '../utils'
@@ -246,10 +246,7 @@ function Statement({
   }
 
   return (
-    <ElementDrag
-      element={element}
-      attributes={attributes}
-    >
+    <ElementDrag element={element} attributes={attributes}>
       {children}
       <span contentEditable={false}>
         <ConversationBlockBubble block={element as StatementType} />

frontend/app/src/editor/styles/editor.scss

@@ -34,12 +34,12 @@ li::marker {
 
 [data-action='dragged-over'] {
   &::after {
-    content: "";
+    content: '';
     position: absolute;
     bottom: -7px;
     height: 3px;
     width: 100%;
-    background-color: #007AFF;
+    background-color: #007aff;
     left: 50%;
     transform: translateX(-50%);
   }

frontend/app/src/pages/draft.tsx

@@ -13,12 +13,19 @@ import {Text} from '@components/text'
 import {useActor, useInterpret} from '@xstate/react'
 import {useEffect} from 'react'
 import {ErrorBoundary} from 'react-error-boundary'
-import {Editor as SlateEditor, Path, Transforms, Node, NodeEntry, Descendant} from 'slate'
+import {
+  Editor as SlateEditor,
+  Path,
+  Transforms,
+  Node,
+  NodeEntry,
+  Descendant,
+} from 'slate'
 import {ReactEditor} from 'slate-react'
 import {ScrollArea} from '@app/components/scroll-area'
 import {Box} from '@components/box'
-import { createDragMachine } from '@app/drag-machine'
-import { DragProvider } from '@app/drag-context'
+import {createDragMachine} from '@app/drag-machine'
+import {DragProvider} from '@app/drag-context'
 
 type DraftPageProps = {
   draftActor: DraftActor
@@ -33,7 +40,7 @@ export default function DraftPage({draftActor, editor}: DraftPageProps) {
   window.mouseService = mouseService
 
   useInitialFocus(editor)
-  
+
   // console.log('🚀 ~ file: draft.tsx:36 ~ DraftPage ~ state', state)
 
   if (state.matches('errored')) {