fix: Render super note content in revision history modal

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

@@ -1,10 +1,14 @@
 import { WebApplication } from '@/Application/Application'
-import { ContentType, SNNote } from '@standardnotes/snjs'
+import { ContentType, NoteType, SNNote } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useEffect, useMemo } from 'react'
 import ComponentView from '@/Components/ComponentView/ComponentView'
 import { NotesController } from '@/Controllers/NotesController/NotesController'
 import { NoteHistoryController } from '@/Controllers/NoteHistory/NoteHistoryController'
+import { ErrorBoundary } from '@/Utils/ErrorBoundary'
+import { BlocksEditorComposer, BlocksEditor } from '@standardnotes/blocks-editor'
+import { FileNode } from '../NoteView/SuperEditor/Plugins/EncryptedFilePlugin/Nodes/FileNode'
+import { BubbleNode } from '../NoteView/SuperEditor/Plugins/ItemBubblePlugin/Nodes/BubbleNode'
 
 const ABSOLUTE_CENTER_CLASSNAME = 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'
 
@@ -54,7 +58,27 @@ const SelectedRevisionContent: FunctionComponent<SelectedRevisionContentProps> =
       <div className="w-full p-4 text-base font-bold">
         <div className="title">{selectedRevision?.payload.content.title}</div>
       </div>
-      {!componentViewer && (
+      {componentViewer ? (
+        <div className="component-view">
+          <ComponentView key={componentViewer.identifier} componentViewer={componentViewer} application={application} />
+        </div>
+      ) : note?.noteType === NoteType.Super ? (
+        <ErrorBoundary>
+          <div className="blocks-editor w-full flex-grow overflow-hidden overflow-y-auto p-4">
+            <BlocksEditorComposer
+              readonly
+              initialValue={selectedRevision?.payload.content.text}
+              nodes={[FileNode, BubbleNode]}
+            >
+              <BlocksEditor
+                readonly
+                className="relative resize-none text-base focus:shadow-none focus:outline-none"
+                spellcheck={note.spellcheck}
+              ></BlocksEditor>
+            </BlocksEditorComposer>
+          </div>
+        </ErrorBoundary>
+      ) : (
         <div className="relative min-h-0 flex-grow overflow-hidden">
           {selectedRevision?.payload.content.text.length ? (
             <textarea
@@ -67,11 +91,6 @@ const SelectedRevisionContent: FunctionComponent<SelectedRevisionContentProps> =
           )}
         </div>
       )}
-      {componentViewer && (
-        <div className="component-view">
-          <ComponentView key={componentViewer.identifier} componentViewer={componentViewer} application={application} />
-        </div>
-      )}
     </div>
   )
 }