refactor: readonly note content

packages/web/src/javascripts/Components/ApplicationView/ApplicationView.tsx

@@ -236,7 +236,6 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
                     <RevisionHistoryModal
                       application={application}
                       historyModalController={viewControllerManager.historyModalController}
-                      notesController={viewControllerManager.notesController}
                       selectionController={viewControllerManager.selectionController}
                       subscriptionController={viewControllerManager.subscriptionController}
                     />

packages/web/src/javascripts/Components/NoteView/NoteConflictResolutionModal/NoteConflictResolutionModal.tsx

@@ -24,7 +24,7 @@ import Spinner from '../../Spinner/Spinner'
 import Switch from '../../Switch/Switch'
 import StyledTooltip from '../../StyledTooltip/StyledTooltip'
 import { DiffView } from './DiffView'
-import { NoteContent } from './NoteContent'
+import { ReadonlyNoteContent } from '../ReadonlyNoteContent'
 import { ConflictListItem } from './ConflictListItem'
 
 type ConflictAction = 'move-to-trash' | 'delete-permanently'
@@ -315,8 +315,9 @@ const NoteConflictResolutionModal = ({
             style={!isMobileScreen ? { gridTemplateColumns: `repeat(${selectedNotes.length}, 1fr)` } : undefined}
           >
             {selectedNotes.map((note) => (
-              <NoteContent
+              <ReadonlyNoteContent
                 note={note}
+                content={note.content}
                 key={note.uuid}
                 scrollPos={comparisonScrollPos}
                 shouldSyncScroll={shouldSyncComparisonScroll}

packages/web/src/javascripts/Components/NoteView/ReadonlyNoteContent.tsx

@@ -1,24 +1,28 @@
-import { ContentType, NoteType, SNNote } from '@standardnotes/snjs'
+import { ContentType, NoteContent, NoteType, SNNote, classNames } from '@standardnotes/snjs'
 import { UIEventHandler, useEffect, useMemo, useRef } from 'react'
 import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
-import { useApplication } from '../../ApplicationProvider'
+import { useApplication } from '../ApplicationProvider'
-import ComponentView from '../../ComponentView/ComponentView'
+import ComponentView from '../ComponentView/ComponentView'
 import { ErrorBoundary } from '@/Utils/ErrorBoundary'
-import { BlocksEditor } from '../../SuperEditor/BlocksEditor'
+import { BlocksEditor } from '../SuperEditor/BlocksEditor'
-import { BlocksEditorComposer } from '../../SuperEditor/BlocksEditorComposer'
+import { BlocksEditorComposer } from '../SuperEditor/BlocksEditorComposer'
 import { useLinkingController } from '@/Controllers/LinkingControllerProvider'
-import LinkedItemBubblesContainer from '../../LinkedItems/LinkedItemBubblesContainer'
+import LinkedItemBubblesContainer from '../LinkedItems/LinkedItemBubblesContainer'
 
-export const NoteContent = ({
+export const ReadonlyNoteContent = ({
   note,
+  content,
+  showLinkedItems = true,
   scrollPos,
   shouldSyncScroll,
   onScroll,
 }: {
   note: SNNote
-  scrollPos: number
+  content: NoteContent
-  shouldSyncScroll: boolean
+  showLinkedItems?: boolean
-  onScroll: UIEventHandler
+  scrollPos?: number
+  shouldSyncScroll?: boolean
+  onScroll?: UIEventHandler
 }) => {
   const application = useApplication()
   const linkingController = useLinkingController()
@@ -73,28 +77,30 @@ export const NoteContent = ({
 
   return (
     <div className="flex h-full flex-grow flex-col overflow-hidden" ref={containerRef}>
-      <div className="w-full px-4 pt-4 text-base font-bold">
+      <div className={classNames('w-full px-4 pt-4 text-base font-bold', componentViewer && 'pb-4')}>
-        <div className="title">{note.title}</div>
+        <div className="title">{content.title}</div>
       </div>
-      <LinkedItemBubblesContainer
+      {showLinkedItems && (
-        item={note}
+        <LinkedItemBubblesContainer
-        linkingController={linkingController}
+          item={note}
-        readonly
+          linkingController={linkingController}
-        className={{ base: 'mt-2 px-4', withToggle: '!mt-1 !pt-0' }}
+          readonly
-        isCollapsedByDefault={isMobileScreen}
+          className={{ base: 'mt-2 px-4', withToggle: '!mt-1 !pt-0' }}
-      />
+          isCollapsedByDefault={isMobileScreen}
+        />
+      )}
       {componentViewer ? (
         <div className="component-view">
           <ComponentView key={componentViewer.identifier} componentViewer={componentViewer} application={application} />
         </div>
-      ) : note?.noteType === NoteType.Super ? (
+      ) : content.noteType === NoteType.Super ? (
         <ErrorBoundary>
           <div className="w-full flex-grow overflow-hidden overflow-y-auto">
-            <BlocksEditorComposer readonly initialValue={note.text}>
+            <BlocksEditorComposer readonly initialValue={content.text}>
               <BlocksEditor
                 readonly
                 className="blocks-editor relative h-full resize-none p-4 text-base focus:shadow-none focus:outline-none"
-                spellcheck={note.spellcheck}
+                spellcheck={content.spellcheck}
                 onScroll={onScroll}
               ></BlocksEditor>
             </BlocksEditorComposer>
@@ -102,11 +108,11 @@ export const NoteContent = ({
         </ErrorBoundary>
       ) : (
         <div className="relative mt-3 min-h-0 flex-grow overflow-hidden">
-          {note.text.length ? (
+          {content.text.length ? (
             <textarea
               readOnly={true}
               className="font-editor h-full w-full resize-none border-0 bg-default p-4 pt-0 text-editor text-text"
-              value={note.text}
+              value={content.text}
               onScroll={onScroll}
             />
           ) : (

packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalContentPane.tsx

@@ -1,26 +1,19 @@
 import RevisionContentLocked from './RevisionContentLocked'
-import SelectedRevisionContent from './SelectedRevisionContent'
 import { observer } from 'mobx-react-lite'
-import { WebApplication } from '@/Application/WebApplication'
-import { NotesController } from '@/Controllers/NotesController/NotesController'
 import { SubscriptionController } from '@/Controllers/Subscription/SubscriptionController'
 import { NoteHistoryController, RevisionContentState } from '@/Controllers/NoteHistory/NoteHistoryController'
 import Spinner from '@/Components/Spinner/Spinner'
+import { ReadonlyNoteContent } from '../NoteView/ReadonlyNoteContent'
+import { SNNote } from '@standardnotes/snjs'
 
 type Props = {
-  application: WebApplication
   noteHistoryController: NoteHistoryController
-  notesController: NotesController
+  note: SNNote
   subscriptionController: SubscriptionController
 }
 
-const HistoryModalContentPane = ({
+const HistoryModalContentPane = ({ noteHistoryController, subscriptionController, note }: Props) => {
-  application,
+  const { selectedRevision, contentState } = noteHistoryController
-  noteHistoryController,
-  notesController,
-  subscriptionController,
-}: Props) => {
-  const { contentState } = noteHistoryController
 
   switch (contentState) {
     case RevisionContentState.Idle:
@@ -32,13 +25,10 @@ const HistoryModalContentPane = ({
     case RevisionContentState.Loading:
       return <Spinner className="absolute top-1/2 left-1/2 h-5 w-5 -translate-x-1/2 -translate-y-1/2" />
     case RevisionContentState.Loaded:
-      return (
+      if (!selectedRevision) {
-        <SelectedRevisionContent
+        return null
-          application={application}
+      }
-          notesController={notesController}
+      return <ReadonlyNoteContent note={note} content={selectedRevision.payload.content} showLinkedItems={false} />
-          noteHistoryController={noteHistoryController}
-        />
-      )
     case RevisionContentState.NotEntitled:
       return <RevisionContentLocked subscriptionController={subscriptionController} />
     default:

packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialogContent.tsx

@@ -15,7 +15,6 @@ import MobileModalHeader from '../Modal/MobileModalHeader'
 const HistoryModalDialogContent = ({
   application,
   dismissModal,
-  notesController,
   subscriptionController,
   note,
   selectionController,
@@ -89,9 +88,8 @@ const HistoryModalDialogContent = ({
           )}
         >
           <HistoryModalContentPane
-            application={application}
             noteHistoryController={noteHistoryController}
-            notesController={notesController}
+            note={note}
             subscriptionController={subscriptionController}
           />
         </div>

packages/web/src/javascripts/Components/RevisionHistoryModal/RevisionHistoryModal.tsx

@@ -9,7 +9,6 @@ import { useModalAnimation } from '../Modal/useModalAnimation'
 const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps> = ({
   application,
   historyModalController,
-  notesController,
   selectionController,
   subscriptionController,
 }) => {
@@ -49,7 +48,6 @@ const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps> = ({
           application={application}
           dismissModal={historyModalController.dismissModal}
           note={historyModalController.note}
-          notesController={notesController}
           selectionController={selectionController}
           subscriptionController={subscriptionController}
         />

packages/web/src/javascripts/Components/RevisionHistoryModal/RevisionHistoryModalProps.tsx

@@ -1,13 +1,11 @@
 import { WebApplication } from '@/Application/WebApplication'
 import { HistoryModalController } from '@/Controllers/NoteHistory/HistoryModalController'
-import { NotesController } from '@/Controllers/NotesController/NotesController'
 import { SelectedItemsController } from '@/Controllers/SelectedItemsController'
 import { SubscriptionController } from '@/Controllers/Subscription/SubscriptionController'
 import { SNNote } from '@standardnotes/snjs'
 
 type CommonProps = {
   application: WebApplication
-  notesController: NotesController
   selectionController: SelectedItemsController
   subscriptionController: SubscriptionController
 }