feat: add note width modes

src/components/editor-content/EditorContentLayout.tsx

@@ -32,8 +32,8 @@ type BreadcrumbActions = Pick<
   | 'onArchiveNote'
   | 'onUnarchiveNote'
   | 'onRenameFilename'
-  | 'noteLayout'
-  | 'onToggleNoteLayout'
+  | 'noteWidth'
+  | 'onToggleNoteWidth'
 >
 
 function EditorLoadingSkeleton() {
@@ -86,17 +86,21 @@ function RawModeEditorSection({
   if (!rawMode || !activeTab) return null
 
   return (
-    <RawEditorView
-      key={activeTab.entry.path}
-      content={rawModeContent ?? activeTab.content}
-      path={activeTab.entry.path}
-      entries={entries}
-      onContentChange={onRawContentChange ?? (() => {})}
-      onSave={onSave ?? (() => {})}
-      latestContentRef={rawLatestContentRef}
-      vaultPath={vaultPath}
-      locale={locale}
-    />
+    <div className="editor-scroll-area">
+      <div className="editor-content-wrapper editor-content-wrapper--raw">
+        <RawEditorView
+          key={activeTab.entry.path}
+          content={rawModeContent ?? activeTab.content}
+          path={activeTab.entry.path}
+          entries={entries}
+          onContentChange={onRawContentChange ?? (() => {})}
+          onSave={onSave ?? (() => {})}
+          latestContentRef={rawLatestContentRef}
+          vaultPath={vaultPath}
+          locale={locale}
+        />
+      </div>
+    </div>
   )
 }
 
@@ -143,8 +147,8 @@ function ActiveTabBreadcrumb({
       onArchive={bindPath(actions.onArchiveNote, path)}
       onUnarchive={bindPath(actions.onUnarchiveNote, path)}
       onRenameFilename={actions.onRenameFilename}
-      noteLayout={actions.noteLayout}
-      onToggleNoteLayout={actions.onToggleNoteLayout}
+      noteWidth={actions.noteWidth}
+      onToggleNoteWidth={actions.onToggleNoteWidth}
       locale={locale}
     />
   )
@@ -248,12 +252,12 @@ export function EditorContentLayout(model: EditorContentModel) {
     isDeletedPreview,
     rawLatestContentRef,
     rawModeContent,
-    noteLayout,
+    noteWidth,
     locale,
   } = model
   const rootClassName = cn(
     'flex flex-1 flex-col min-w-0 min-h-0',
-    noteLayout === 'left' ? 'editor-content-layout--left' : 'editor-content-layout--centered',
+    noteWidth === 'wide' ? 'editor-content-width--wide' : 'editor-content-width--normal',
   )
 
   if (!activeTab) {
@@ -292,8 +296,8 @@ export function EditorContentLayout(model: EditorContentModel) {
           onArchiveNote: model.onArchiveNote,
           onUnarchiveNote: model.onUnarchiveNote,
           onRenameFilename: model.onRenameFilename,
-          noteLayout: model.noteLayout,
-          onToggleNoteLayout: model.onToggleNoteLayout,
+          noteWidth: model.noteWidth,
+          onToggleNoteWidth: model.onToggleNoteWidth,
         }}
       />
       <EditorChrome