refactor: readonly note content

2023-06-26 16:12:17 +05:30
parent 28a52cb998
commit 59fbf6f4c3
7 changed files with 43 additions and 53 deletions
--- a/packages/web/src/javascripts/Components/ApplicationView/ApplicationView.tsx
+++ b/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}
                    />
--- a/packages/web/src/javascripts/Components/NoteView/NoteConflictResolutionModal/NoteConflictResolutionModal.tsx
+++ b/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}
--- a/packages/web/src/javascripts/Components/NoteView/NoteConflictResolutionModal/NoteContent.tsx
+++ b/packages/web/src/javascripts/Components/NoteView/NoteConflictResolutionModal/NoteContent.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 ComponentView from '../../ComponentView/ComponentView'
+import { useApplication } from '../ApplicationProvider'
+import ComponentView from '../ComponentView/ComponentView'
 import { ErrorBoundary } from '@/Utils/ErrorBoundary'
-import { BlocksEditor } from '../../SuperEditor/BlocksEditor'
-import { BlocksEditorComposer } from '../../SuperEditor/BlocksEditorComposer'
+import { BlocksEditor } from '../SuperEditor/BlocksEditor'
+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
-  shouldSyncScroll: boolean
-  onScroll: UIEventHandler
+  content: NoteContent
+  showLinkedItems?: boolean
+  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="title">{note.title}</div>
+      <div className={classNames('w-full px-4 pt-4 text-base font-bold', componentViewer && 'pb-4')}>
+        <div className="title">{content.title}</div>
      </div>
-      <LinkedItemBubblesContainer
-        item={note}
-        linkingController={linkingController}
-        readonly
-        className={{ base: 'mt-2 px-4', withToggle: '!mt-1 !pt-0' }}
-        isCollapsedByDefault={isMobileScreen}
-      />
+      {showLinkedItems && (
+        <LinkedItemBubblesContainer
+          item={note}
+          linkingController={linkingController}
+          readonly
+          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}
            />
          ) : (
--- a/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalContentPane.tsx
+++ b/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 = ({
-  application,
-  noteHistoryController,
-  notesController,
-  subscriptionController,
-}: Props) => {
-  const { contentState } = noteHistoryController
+const HistoryModalContentPane = ({ noteHistoryController, subscriptionController, note }: Props) => {
+  const { selectedRevision, 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 (
-        <SelectedRevisionContent
-          application={application}
-          notesController={notesController}
-          noteHistoryController={noteHistoryController}
-        />
-      )
+      if (!selectedRevision) {
+        return null
+      }
+      return <ReadonlyNoteContent note={note} content={selectedRevision.payload.content} showLinkedItems={false} />
    case RevisionContentState.NotEntitled:
      return <RevisionContentLocked subscriptionController={subscriptionController} />
    default:
--- a/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialogContent.tsx
+++ b/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>
--- a/packages/web/src/javascripts/Components/RevisionHistoryModal/RevisionHistoryModal.tsx
+++ b/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}
        />
--- a/packages/web/src/javascripts/Components/RevisionHistoryModal/RevisionHistoryModalProps.tsx
+++ b/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
 }