refactor: extract components to plugin repo (#1933)

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

@@ -9,7 +9,7 @@ import { ElementIds } from '@/Constants/ElementIDs'
 import { PrefDefaults } from '@/Constants/PrefDefaults'
 import { StringDeleteNote, STRING_DELETE_LOCKED_ATTEMPT, STRING_DELETE_PLACEHOLDER_ATTEMPT } from '@/Constants/Strings'
 import { log, LoggingDomain } from '@/Logging'
-import { debounce, isDesktopApplication, isMobileScreen, isTabletScreen } from '@/Utils'
+import { debounce, isDesktopApplication, isDev, isMobileScreen, isTabletScreen } from '@/Utils'
 import { classNames } from '@/Utils/ConcatenateClassNames'
 import {
   ApplicationEvent,
@@ -32,6 +32,7 @@ import {
 import { confirmDialog, KeyboardKey, KeyboardModifier } from '@standardnotes/ui-services'
 import { ChangeEventHandler, createRef, KeyboardEventHandler, RefObject } from 'react'
 import { EditorEventSource } from '../../Types/EditorEventSource'
+import { BlockEditor } from '../BlockEditor/BlockEditor'
 import IndicatorCircle from '../IndicatorCircle/IndicatorCircle'
 import LinkedItemBubblesContainer from '../LinkedItems/LinkedItemBubblesContainer'
 import LinkedItemsButton from '../LinkedItems/LinkedItemsButton'
@@ -54,6 +55,8 @@ function sortAlphabetically(array: SNComponent[]): SNComponent[] {
   return array.sort((a, b) => (a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1))
 }
 
+const IsBlocksEnabled = isDev
+
 type State = {
   availableStackComponents: SNComponent[]
   editorComponentViewer?: ComponentViewerInterface
@@ -1024,6 +1027,15 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
 
     const renderHeaderOptions = isMobileScreen() ? !this.state.plaintextEditorFocused : true
 
+    const editorMode =
+      IsBlocksEnabled && this.note.title.toLowerCase().includes('blocks')
+        ? 'blocks'
+        : this.state.editorStateDidLoad && !this.state.editorComponentViewer && !this.state.textareaUnloading
+        ? 'plain'
+        : this.state.editorComponentViewer
+        ? 'component'
+        : 'plain'
+
     return (
       <div aria-label="Note" className="section editor sn-component h-full md:max-h-full" ref={this.noteViewElementRef}>
         {this.note && (
@@ -1117,7 +1129,7 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
 
         <div
           id={ElementIds.EditorContent}
-          className={`${ElementIds.EditorContent} z-editor-content`}
+          className={`${ElementIds.EditorContent} z-editor-content overflow-scroll`}
           ref={this.editorContentRef}
         >
           {this.state.marginResizersEnabled && this.editorContentRef.current ? (
@@ -1134,7 +1146,7 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
             />
           ) : null}
 
-          {this.state.editorComponentViewer && (
+          {editorMode === 'component' && this.state.editorComponentViewer && (
             <div className="component-view">
               <ComponentView
                 key={this.state.editorComponentViewer.identifier}
@@ -1146,7 +1158,7 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
             </div>
           )}
 
-          {this.state.editorStateDidLoad && !this.state.editorComponentViewer && !this.state.textareaUnloading && (
+          {editorMode === 'plain' && (
             <textarea
               autoComplete="off"
               dir="auto"
@@ -1166,6 +1178,12 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
             ></textarea>
           )}
 
+          {editorMode === 'blocks' && (
+            <div className={classNames('blocks-editor w-full flex-grow overflow-hidden overflow-y-scroll')}>
+              <BlockEditor key={this.note.uuid} application={this.application} note={this.note} />
+            </div>
+          )}
+
           {this.state.marginResizersEnabled && this.editorContentRef.current ? (
             <PanelResizer
               minWidth={300}