chore(release): publish

- @standardnotes/[email protected].5
 - @standardnotes/[email protected]
 - @standardnotes/[email protected].7
 - @standardnotes/[email protected]
 - @standardnotes/[email protected]
 - @standardnotes/[email protected].2
 - @standardnotes/[email protected].7
 - @standardnotes/[email protected].0
 - @standardnotes/[email protected]
 - @standardnotes/[email protected].4
 - @standardnotes/[email protected].4
 - @standardnotes/[email protected].0
 - @standardnotes/[email protected].0

packages/api/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.26.5](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2023-05-04)
+
+**Note:** Version bump only for package @standardnotes/api
+
 ## [1.26.4](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2023-04-26)
 
 **Note:** Version bump only for package @standardnotes/api

packages/api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/api",
-  "version": "1.26.4",
+  "version": "1.26.5",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },

packages/clipper/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.45](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2023-05-04)
+
+**Note:** Version bump only for package @standardnotes/clipper
+
+## [1.0.44](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2023-05-04)
+
+**Note:** Version bump only for package @standardnotes/clipper
+
 ## [1.0.43](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2023-05-04)
 
 **Note:** Version bump only for package @standardnotes/clipper

packages/clipper/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@standardnotes/clipper",
   "description": "Web clipper browser extension for Standard Notes",
-  "version": "1.0.43",
+  "version": "1.0.45",
   "private": true,
   "scripts": {
     "build-mv2": "yarn clean && webpack --config ./webpack.config.prod.js",

packages/desktop/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.106.7](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2023-05-04)
+
+**Note:** Version bump only for package @standardnotes/desktop
+
+## [3.106.6](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2023-05-04)
+
+**Note:** Version bump only for package @standardnotes/desktop
+
 ## [3.106.5](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2023-05-04)
 
 **Note:** Version bump only for package @standardnotes/desktop

packages/desktop/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@standardnotes/desktop",
   "main": "./app/dist/index.js",
-  "version": "3.106.5",
+  "version": "3.106.7",
   "license": "AGPL-3.0-or-later",
   "author": "Standard Notes.",
   "private": true,

packages/encryption/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.21.33](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2023-05-04)
+
+**Note:** Version bump only for package @standardnotes/encryption
+
 ## [1.21.32](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2023-04-26)
 
 **Note:** Version bump only for package @standardnotes/encryption

packages/encryption/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/encryption",
-  "version": "1.21.32",
+  "version": "1.21.33",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },

packages/filepicker/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.28.40](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2023-05-04)
+
+**Note:** Version bump only for package @standardnotes/filepicker
+
 ## [1.28.39](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2023-05-02)
 
 **Note:** Version bump only for package @standardnotes/filepicker

packages/filepicker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/filepicker",
-  "version": "1.28.39",
+  "version": "1.28.40",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },

packages/files/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.15.2](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2023-05-04)
+
+**Note:** Version bump only for package @standardnotes/files
+
 ## [1.15.1](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2023-05-02)
 
 ### Bug Fixes

packages/files/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/files",
-  "version": "1.15.1",
+  "version": "1.15.2",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },

packages/mobile/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.53.7](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2023-05-04)
+
+**Note:** Version bump only for package @standardnotes/mobile
+
+## [3.53.6](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2023-05-04)
+
+**Note:** Version bump only for package @standardnotes/mobile
+
 ## [3.53.5](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2023-05-04)
 
 **Note:** Version bump only for package @standardnotes/mobile

packages/mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/mobile",
-  "version": "3.53.5",
+  "version": "3.53.7",
   "author": "Standard Notes.",
   "private": true,
   "license": "AGPL-3.0-or-later",

packages/models/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.45.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2023-05-04)
+
+### Features
+
+* Replaced margin resizers with "Editor width" options. You can set it globally from Preferences > Appearance or per-note from the note options menu ([#2324](https://github.com/standardnotes/app/issues/2324)) ([9fbb845](https://github.com/standardnotes/app/commit/9fbb845b1d3b1ca6a4b064f3b63bdae1cf7777e8))
+
 ## [1.44.3](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2023-04-26)
 
 **Note:** Version bump only for package @standardnotes/models

packages/models/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/models",
-  "version": "1.44.3",
+  "version": "1.45.0",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },

packages/models/src/Domain/Syncable/Note/Note.ts

@@ -5,6 +5,7 @@ import { DecryptedItem } from '../../Abstract/Item/Implementations/DecryptedItem
 import { ItemInterface } from '../../Abstract/Item/Interfaces/ItemInterface'
 import { DecryptedPayloadInterface } from '../../Abstract/Payload/Interfaces/DecryptedPayload'
 import { NoteContent, NoteContentSpecialized } from './NoteContent'
+import { EditorLineWidth } from '../UserPrefs'
 
 export const isNote = (x: ItemInterface): x is SNNote => x.content_type === ContentType.Note
 
@@ -15,6 +16,7 @@ export class SNNote extends DecryptedItem<NoteContent> implements NoteContentSpe
   public readonly preview_plain: string
   public readonly preview_html: string
   public readonly spellcheck?: boolean
+  public readonly editorWidth?: EditorLineWidth
   public readonly noteType?: NoteType
   public readonly authorizedForListed: boolean
 
@@ -30,6 +32,7 @@ export class SNNote extends DecryptedItem<NoteContent> implements NoteContentSpe
     this.preview_plain = String(this.payload.content.preview_plain || '')
     this.preview_html = String(this.payload.content.preview_html || '')
     this.spellcheck = this.payload.content.spellcheck
+    this.editorWidth = this.payload.content.editorWidth
     this.noteType = this.payload.content.noteType
     this.editorIdentifier = this.payload.content.editorIdentifier
     this.authorizedForListed = this.payload.content.authorizedForListed || false

packages/models/src/Domain/Syncable/Note/NoteContent.ts

@@ -1,5 +1,6 @@
 import { FeatureIdentifier, NoteType } from '@standardnotes/features'
 import { ItemContent } from '../../Abstract/Content/ItemContent'
+import { EditorLineWidth } from '../UserPrefs'
 
 export interface NoteContentSpecialized {
   title: string
@@ -8,6 +9,7 @@ export interface NoteContentSpecialized {
   preview_plain?: string
   preview_html?: string
   spellcheck?: boolean
+  editorWidth?: EditorLineWidth
   noteType?: NoteType
   editorIdentifier?: FeatureIdentifier | string
   authorizedForListed?: boolean

packages/models/src/Domain/Syncable/Note/NoteMutator.ts

@@ -5,6 +5,7 @@ import { NoteToNoteReference } from '../../Abstract/Reference/NoteToNoteReferenc
 import { ContentType } from '@standardnotes/common'
 import { ContentReferenceType } from '../../Abstract/Item'
 import { FeatureIdentifier, NoteType } from '@standardnotes/features'
+import { EditorLineWidth } from '../UserPrefs'
 
 export class NoteMutator extends DecryptedItemMutator<NoteContent> {
   set title(title: string) {
@@ -31,6 +32,10 @@ export class NoteMutator extends DecryptedItemMutator<NoteContent> {
     this.mutableContent.spellcheck = spellcheck
   }
 
+  set editorWidth(editorWidth: EditorLineWidth) {
+    this.mutableContent.editorWidth = editorWidth
+  }
+
   set noteType(noteType: NoteType) {
     this.mutableContent.noteType = noteType
   }

packages/models/src/Domain/Syncable/UserPrefs/PrefKey.ts

@@ -12,6 +12,7 @@ export enum PrefKey {
   EditorSpellcheck = 'spellcheck',
   EditorResizersEnabled = 'marginResizersEnabled',
   EditorLineHeight = 'editorLineHeight',
+  EditorLineWidth = 'editorLineWidth',
   EditorFontSize = 'editorFontSize',
   SortNotesBy = 'sortBy',
   SortNotesReverse = 'sortReverse',
@@ -65,6 +66,13 @@ export enum EditorLineHeight {
   Loose = 'Loose',
 }
 
+export enum EditorLineWidth {
+  Narrow = 'Narrow',
+  Wide = 'Wide',
+  Dynamic = 'Dynamic',
+  FullWidth = 'FullWidth',
+}
+
 export enum EditorFontSize {
   ExtraSmall = 'ExtraSmall',
   Small = 'Small',
@@ -107,6 +115,7 @@ export type PrefValue = {
   [PrefKey.NewNoteTitleFormat]: NewNoteTitleFormat
   [PrefKey.CustomNoteTitleFormat]: string
   [PrefKey.EditorLineHeight]: EditorLineHeight
+  [PrefKey.EditorLineWidth]: EditorLineWidth
   [PrefKey.EditorFontSize]: EditorFontSize
   [PrefKey.UpdateSavingStatusIndicator]: boolean
   [PrefKey.DarkMode]: boolean

packages/releases/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.4.275](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2023-05-04)
+
+**Note:** Version bump only for package @standardnotes/releases
+
+## [1.4.274](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2023-05-04)
+
+**Note:** Version bump only for package @standardnotes/releases
+
 ## [1.4.273](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2023-05-04)
 
 **Note:** Version bump only for package @standardnotes/releases

packages/releases/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/releases",
-  "version": "1.4.273",
+  "version": "1.4.275",
   "license": "AGPL-3.0-or-later",
   "main": "dist/releases.json",
   "types": "dist/index.d.ts",

packages/services/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.59.4](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2023-05-04)
+
+**Note:** Version bump only for package @standardnotes/services
+
+## [1.59.3](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2023-05-04)
+
+### Bug Fixes
+
+* workspace names now default to account email after signing in. It can later be changed from the workspace switcher menu. ([8385b4e](https://github.com/standardnotes/app/commit/8385b4e89fa0fc3204532adda9d085d9c0fd7996))
+
 ## [1.59.2](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2023-05-03)
 
 **Note:** Version bump only for package @standardnotes/services

packages/services/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/services",
-  "version": "1.59.2",
+  "version": "1.59.4",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },

packages/services/src/Domain/Application/ApplicationInterface.ts

@@ -16,6 +16,7 @@ import { StorageValueModes } from '../Storage/StorageTypes'
 import { DeinitMode } from './DeinitMode'
 import { DeinitSource } from './DeinitSource'
 import { UserClientInterface } from '../User/UserClientInterface'
+import { SessionsClientInterface } from '../Session/SessionsClientInterface'
 
 export interface ApplicationInterface {
   deinit(mode: DeinitMode, source: DeinitSource): void
@@ -51,6 +52,7 @@ export interface ApplicationInterface {
   get files(): FilesClientInterface
   get subscriptions(): SubscriptionClientInterface
   get fileBackups(): BackupServiceInterface | undefined
+  get sessions(): SessionsClientInterface
   readonly identifier: ApplicationIdentifier
   readonly platform: Platform
   deviceInterface: DeviceInterface

packages/snjs/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.168.4](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2023-05-04)
+
+**Note:** Version bump only for package @standardnotes/snjs
+
+## [2.168.3](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2023-05-04)
+
+### Bug Fixes
+
+* workspace names now default to account email after signing in. It can later be changed from the workspace switcher menu. ([8385b4e](https://github.com/standardnotes/app/commit/8385b4e89fa0fc3204532adda9d085d9c0fd7996))
+
 ## [2.168.2](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2023-05-03)
 
 **Note:** Version bump only for package @standardnotes/snjs

packages/snjs/lib/ApplicationGroup/ApplicationGroup.ts

@@ -8,6 +8,7 @@ import {
   InternalEventBus,
   InternalEventBusInterface,
   RawStorageKey,
+  ApplicationEvent,
 } from '@standardnotes/services'
 import { UuidGenerator } from '@standardnotes/utils'
 import { AppGroupCallback } from './AppGroupCallback'
@@ -72,6 +73,13 @@ export class SNApplicationGroup<D extends DeviceInterface = DeviceInterface> ext
 
     this.primaryApplication = application
 
+    application.addEventObserver(async () => {
+      this.renameDescriptor(
+        primaryDescriptor as ApplicationDescriptor,
+        application.sessions.getWorkspaceDisplayIdentifier(),
+      )
+    }, ApplicationEvent.SignedIn)
+
     await this.notifyEvent(ApplicationGroupEvent.PrimaryApplicationSet, { application: application })
   }
 

packages/snjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/snjs",
-  "version": "2.168.2",
+  "version": "2.168.4",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },

packages/ui-services/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.26.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2023-05-04)
+
+### Features
+
+* Replaced margin resizers with "Editor width" options. You can set it globally from Preferences > Appearance or per-note from the note options menu ([#2324](https://github.com/standardnotes/app/issues/2324)) ([9fbb845](https://github.com/standardnotes/app/commit/9fbb845b1d3b1ca6a4b064f3b63bdae1cf7777e8))
+
+## [1.25.10](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2023-05-04)
+
+**Note:** Version bump only for package @standardnotes/ui-services
+
 ## [1.25.9](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2023-05-03)
 
 **Note:** Version bump only for package @standardnotes/ui-services

packages/ui-services/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/ui-services",
-  "version": "1.25.9",
+  "version": "1.26.0",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },

packages/ui-services/src/Keyboard/KeyboardCommands.ts

@@ -37,3 +37,5 @@ export const SUPER_EXPORT_JSON = createKeyboardCommand('SUPER_EXPORT_JSON')
 export const SUPER_EXPORT_MARKDOWN = createKeyboardCommand('SUPER_EXPORT_MARKDOWN')
 export const SUPER_EXPORT_HTML = createKeyboardCommand('SUPER_EXPORT_HTML')
 export const OPEN_PREFERENCES_COMMAND = createKeyboardCommand('OPEN_PREFERENCES_COMMAND')
+
+export const CHANGE_EDITOR_WIDTH_COMMAND = createKeyboardCommand('CHANGE_EDITOR_WIDTH_COMMAND')

packages/ui-services/src/Keyboard/getKeyboardShortcuts.ts

@@ -29,6 +29,7 @@ import {
   SUPER_SEARCH_NEXT_RESULT,
   SUPER_SEARCH_PREVIOUS_RESULT,
   SUPER_SEARCH_TOGGLE_REPLACE_MODE,
+  CHANGE_EDITOR_WIDTH_COMMAND,
 } from './KeyboardCommands'
 import { KeyboardKey } from './KeyboardKey'
 import { KeyboardModifier } from './KeyboardModifier'
@@ -182,5 +183,11 @@ export function getKeyboardShortcuts(platform: Platform, _environment: Environme
       modifiers: [primaryModifier],
       preventDefault: true,
     },
+    {
+      command: CHANGE_EDITOR_WIDTH_COMMAND,
+      key: 'j',
+      modifiers: [primaryModifier, KeyboardModifier.Shift],
+      preventDefault: true,
+    },
   ]
 }

packages/web/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.157.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2023-05-04)
+
+### Features
+
+* Replaced margin resizers with "Editor width" options. You can set it globally from Preferences > Appearance or per-note from the note options menu ([#2324](https://github.com/standardnotes/app/issues/2324)) ([9fbb845](https://github.com/standardnotes/app/commit/9fbb845b1d3b1ca6a4b064f3b63bdae1cf7777e8))
+
+## [3.156.4](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2023-05-04)
+
+### Bug Fixes
+
+* workspace names now default to account email after signing in. It can later be changed from the workspace switcher menu. ([8385b4e](https://github.com/standardnotes/app/commit/8385b4e89fa0fc3204532adda9d085d9c0fd7996))
+
 ## [3.156.3](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2023-05-04)
 
 **Note:** Version bump only for package @standardnotes/web

packages/web/CHANGELOG.md.json

@@ -1,5 +1,33 @@
 {
   "versions": [
+    {
+      "version": "3.157.0",
+      "title": "[3.157.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2023-05-04)",
+      "date": null,
+      "body": "### Features\n\n* Replaced margin resizers with \"Editor width\" options. You can set it globally from Preferences > Appearance or per-note from the note options menu ([#2324](https://github.com/standardnotes/app/issues/2324)) ([9fbb845](https://github.com/standardnotes/app/commit/9fbb845b1d3b1ca6a4b064f3b63bdae1cf7777e8))",
+      "parsed": {
+        "_": [
+          "Replaced margin resizers with \"Editor width\" options. You can set it globally from Preferences > Appearance or per-note from the note options menu (#2324) (9fbb845)"
+        ],
+        "Features": [
+          "Replaced margin resizers with \"Editor width\" options. You can set it globally from Preferences > Appearance or per-note from the note options menu (#2324) (9fbb845)"
+        ]
+      }
+    },
+    {
+      "version": "3.156.4",
+      "title": "[3.156.4](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2023-05-04)",
+      "date": null,
+      "body": "### Bug Fixes\n\n* workspace names now default to account email after signing in. It can later be changed from the workspace switcher menu. ([8385b4e](https://github.com/standardnotes/app/commit/8385b4e89fa0fc3204532adda9d085d9c0fd7996))",
+      "parsed": {
+        "_": [
+          "workspace names now default to account email after signing in. It can later be changed from the workspace switcher menu. (8385b4e)"
+        ],
+        "Bug Fixes": [
+          "workspace names now default to account email after signing in. It can later be changed from the workspace switcher menu. (8385b4e)"
+        ]
+      }
+    },
     {
       "version": "3.156.3",
       "title": "[3.156.3](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2023-05-04)",

packages/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/web",
-  "version": "3.156.3",
+  "version": "3.157.0",
   "license": "AGPL-3.0-or-later",
   "main": "dist/app.js",
   "author": "Standard Notes",

packages/web/src/javascripts/App.tsx

@@ -19,7 +19,7 @@ declare global {
     platform?: Platform
 
     application?: WebApplication
-    mainApplicationGroup?: ApplicationGroup
+    mainApplicationGroup?: WebApplicationGroup
     MSStream?: unknown
   }
 }
@@ -30,9 +30,9 @@ import { DesktopManagerInterface, Platform, SNLog } from '@standardnotes/snjs'
 import ApplicationGroupView from './Components/ApplicationGroupView/ApplicationGroupView'
 import { WebDevice } from './Application/Device/WebDevice'
 import { StartApplication } from './Application/Device/StartApplication'
-import { ApplicationGroup } from './Application/ApplicationGroup'
+import { WebApplicationGroup } from './Application/WebApplicationGroup'
 import { WebOrDesktopDevice } from './Application/Device/WebOrDesktopDevice'
-import { WebApplication } from './Application/Application'
+import { WebApplication } from './Application/WebApplication'
 import { createRoot, Root } from 'react-dom/client'
 import { ElementIds } from './Constants/ElementIDs'
 import { setDefaultMonospaceFont } from './setDefaultMonospaceFont'

packages/web/src/javascripts/Application/WebApplication.spec.ts

@@ -13,7 +13,7 @@ import {
   SNLog,
   SNTag,
 } from '@standardnotes/snjs'
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { WebOrDesktopDevice } from './Device/WebOrDesktopDevice'
 
 describe('web application', () => {

packages/web/src/javascripts/Application/WebApplicationGroup.ts

@@ -1,4 +1,4 @@
-import { WebApplication } from './Application'
+import { WebApplication } from './WebApplication'
 import { ApplicationDescriptor, SNApplicationGroup } from '@standardnotes/snjs'
 import { getPlatform, isDesktopApplication } from '@/Utils'
 import { WebOrDesktopDevice } from '@/Application/Device/WebOrDesktopDevice'
@@ -23,7 +23,7 @@ const createApplication = (
   return application
 }
 
-export class ApplicationGroup extends SNApplicationGroup<WebOrDesktopDevice> {
+export class WebApplicationGroup extends SNApplicationGroup<WebOrDesktopDevice> {
   constructor(private defaultSyncServerHost: string, device: WebOrDesktopDevice, private webSocketUrl: string) {
     super(device)
   }

packages/web/src/javascripts/Components/Abstract/PureComponent.tsx

@@ -1,5 +1,5 @@
 import { ApplicationEvent } from '@standardnotes/snjs'
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { autorun, IReactionDisposer, IReactionPublic } from 'mobx'
 import { Component } from 'react'

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

@@ -1,8 +1,8 @@
 import { observer } from 'mobx-react-lite'
 import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { useCallback, FunctionComponent, KeyboardEventHandler } from 'react'
-import { ApplicationGroup } from '@/Application/ApplicationGroup'
+import { WebApplicationGroup } from '@/Application/WebApplicationGroup'
 import { AccountMenuPane } from './AccountMenuPane'
 import MenuPaneSelector from './MenuPaneSelector'
 import { KeyboardKey } from '@standardnotes/ui-services'
@@ -11,7 +11,7 @@ export type AccountMenuProps = {
   viewControllerManager: ViewControllerManager
   application: WebApplication
   onClickOutside: () => void
-  mainApplicationGroup: ApplicationGroup
+  mainApplicationGroup: WebApplicationGroup
 }
 
 const AccountMenu: FunctionComponent<AccountMenuProps> = ({

packages/web/src/javascripts/Components/AccountMenu/AdvancedOptions.tsx

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { observer } from 'mobx-react-lite'
 import { ChangeEventHandler, FunctionComponent, ReactNode, useCallback, useEffect, useState } from 'react'

packages/web/src/javascripts/Components/AccountMenu/ConfirmPassword.tsx

@@ -1,5 +1,5 @@
 import { STRING_NON_MATCHING_PASSWORDS } from '@/Constants/Strings'
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { observer } from 'mobx-react-lite'
 import {

packages/web/src/javascripts/Components/AccountMenu/CreateAccount.tsx

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { observer } from 'mobx-react-lite'
 import {

packages/web/src/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { observer } from 'mobx-react-lite'
 import Icon from '@/Components/Icon/Icon'
@@ -10,7 +10,7 @@ import Menu from '@/Components/Menu/Menu'
 import MenuItem from '@/Components/Menu/MenuItem'
 import MenuItemSeparator from '@/Components/Menu/MenuItemSeparator'
 import WorkspaceSwitcherOption from './WorkspaceSwitcher/WorkspaceSwitcherOption'
-import { ApplicationGroup } from '@/Application/ApplicationGroup'
+import { WebApplicationGroup } from '@/Application/WebApplicationGroup'
 import { formatLastSyncDate } from '@/Utils/DateUtils'
 import Spinner from '@/Components/Spinner/Spinner'
 import { MenuItemIconSize } from '@/Constants/TailwindClassNames'
@@ -18,7 +18,7 @@ import { MenuItemIconSize } from '@/Constants/TailwindClassNames'
 type Props = {
   viewControllerManager: ViewControllerManager
   application: WebApplication
-  mainApplicationGroup: ApplicationGroup
+  mainApplicationGroup: WebApplicationGroup
   setMenuPane: (pane: AccountMenuPane) => void
   closeMenu: () => void
 }

packages/web/src/javascripts/Components/AccountMenu/MenuPaneSelector.tsx

@@ -1,5 +1,5 @@
-import { WebApplication } from '@/Application/Application'
-import { ApplicationGroup } from '@/Application/ApplicationGroup'
+import { WebApplication } from '@/Application/WebApplication'
+import { WebApplicationGroup } from '@/Application/WebApplicationGroup'
 import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useState } from 'react'
@@ -12,7 +12,7 @@ import SignInPane from './SignIn'
 type Props = {
   viewControllerManager: ViewControllerManager
   application: WebApplication
-  mainApplicationGroup: ApplicationGroup
+  mainApplicationGroup: WebApplicationGroup
   menuPane: AccountMenuPane
   setMenuPane: (pane: AccountMenuPane) => void
   closeMenu: () => void

packages/web/src/javascripts/Components/AccountMenu/SignIn.tsx

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { isDev } from '@/Utils'
 import { observer } from 'mobx-react-lite'

packages/web/src/javascripts/Components/AccountMenu/User.tsx

@@ -1,6 +1,6 @@
 import { observer } from 'mobx-react-lite'
 import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { User as UserType } from '@standardnotes/snjs'
 
 type Props = {

packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx

@@ -1,4 +1,4 @@
-import { ApplicationGroup } from '@/Application/ApplicationGroup'
+import { WebApplicationGroup } from '@/Application/WebApplicationGroup'
 import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { ApplicationDescriptor, ApplicationGroupEvent, ButtonType } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
@@ -10,7 +10,7 @@ import MenuItemSeparator from '@/Components/Menu/MenuItemSeparator'
 import WorkspaceMenuItem from './WorkspaceMenuItem'
 
 type Props = {
-  mainApplicationGroup: ApplicationGroup
+  mainApplicationGroup: WebApplicationGroup
   viewControllerManager: ViewControllerManager
   isOpen: boolean
   hideWorkspaceOptions?: boolean

packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx

@@ -1,5 +1,5 @@
 import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
-import { ApplicationGroup } from '@/Application/ApplicationGroup'
+import { WebApplicationGroup } from '@/Application/WebApplicationGroup'
 import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useCallback, useRef, useState } from 'react'
@@ -10,7 +10,7 @@ import Popover from '@/Components/Popover/Popover'
 import { MenuItemIconSize } from '@/Constants/TailwindClassNames'
 
 type Props = {
-  mainApplicationGroup: ApplicationGroup
+  mainApplicationGroup: WebApplicationGroup
   viewControllerManager: ViewControllerManager
 }
 

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

@@ -1,5 +1,5 @@
-import { ApplicationGroup } from '@/Application/ApplicationGroup'
-import { WebApplication } from '@/Application/Application'
+import { WebApplicationGroup } from '@/Application/WebApplicationGroup'
+import { WebApplication } from '@/Application/WebApplication'
 import { Component } from 'react'
 import ApplicationView from '@/Components/ApplicationView/ApplicationView'
 import { WebOrDesktopDevice } from '@/Application/Device/WebOrDesktopDevice'
@@ -38,7 +38,7 @@ const renderDialog = (message: string) => {
 
 class ApplicationGroupView extends Component<Props, State> {
   applicationObserverRemover?: () => void
-  private group?: ApplicationGroup
+  private group?: WebApplicationGroup
   private application?: WebApplication
 
   constructor(props: Props) {
@@ -52,7 +52,7 @@ class ApplicationGroupView extends Component<Props, State> {
       return
     }
 
-    this.group = new ApplicationGroup(props.server, props.device, props.websocketUrl)
+    this.group = new WebApplicationGroup(props.server, props.device, props.websocketUrl)
 
     window.mainApplicationGroup = this.group
 

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

@@ -1,7 +1,7 @@
 import { ReactNode, createContext, useContext, memo } from 'react'
 
 import { observer } from 'mobx-react-lite'
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 
 const ApplicationContext = createContext<WebApplication | undefined>(undefined)
 

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

@@ -1,8 +1,8 @@
-import { ApplicationGroup } from '@/Application/ApplicationGroup'
+import { WebApplicationGroup } from '@/Application/WebApplicationGroup'
 import { getPlatformString, isIOS } from '@/Utils'
 import { ApplicationEvent, Challenge, removeFromArray, WebAppEvent } from '@standardnotes/snjs'
 import { alertDialog, RouteType } from '@standardnotes/ui-services'
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import Footer from '@/Components/Footer/Footer'
 import SessionsModal from '@/Components/SessionsModal/SessionsModal'
 import PreferencesViewWrapper from '@/Components/Preferences/PreferencesViewWrapper'
@@ -30,10 +30,11 @@ import DotOrgNotice from './DotOrgNotice'
 import LinkingControllerProvider from '@/Controllers/LinkingControllerProvider'
 import ImportModal from '../ImportModal/ImportModal'
 import IosKeyboardClose from '../IosKeyboardClose/IosKeyboardClose'
+import EditorWidthSelectionModalWrapper from '../EditorWidthSelectionModal/EditorWidthSelectionModal'
 
 type Props = {
   application: WebApplication
-  mainApplicationGroup: ApplicationGroup
+  mainApplicationGroup: WebApplicationGroup
 }
 
 const LazyLoadedClipperView = lazy(() => import('../ClipperView/ClipperView'))
@@ -268,6 +269,7 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
                     <ToastContainer />
                     <FilePreviewModalWrapper application={application} viewControllerManager={viewControllerManager} />
                     <PermissionsModalWrapper application={application} />
+                    <EditorWidthSelectionModalWrapper />
                     <ConfirmDeleteAccountContainer
                       application={application}
                       viewControllerManager={viewControllerManager}

packages/web/src/javascripts/Components/ChallengeModal/BiometricsPrompt.tsx

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { ChallengePrompt } from '@standardnotes/services'
 import { RefObject, useState } from 'react'
 import Button from '../Button/Button'

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

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import {
   ButtonType,
   Challenge,
@@ -14,7 +14,7 @@ import Button from '@/Components/Button/Button'
 import Icon from '@/Components/Icon/Icon'
 import ChallengeModalPrompt from './ChallengePrompt'
 import LockscreenWorkspaceSwitcher from './LockscreenWorkspaceSwitcher'
-import { ApplicationGroup } from '@/Application/ApplicationGroup'
+import { WebApplicationGroup } from '@/Application/WebApplicationGroup'
 import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { ChallengeModalValues } from './ChallengeModalValues'
 import { InputValue } from './InputValue'
@@ -27,7 +27,7 @@ import { useAutoElementRect } from '@/Hooks/useElementRect'
 type Props = {
   application: WebApplication
   viewControllerManager: ViewControllerManager
-  mainApplicationGroup: ApplicationGroup
+  mainApplicationGroup: WebApplicationGroup
   challenge: Challenge
   onDismiss?: (challenge: Challenge) => void
 }

packages/web/src/javascripts/Components/ChallengeModal/ChallengePrompt.tsx

@@ -8,7 +8,7 @@ import { FunctionComponent, useCallback, useEffect, useRef } from 'react'
 import DecoratedInput from '@/Components/Input/DecoratedInput'
 import DecoratedPasswordInput from '@/Components/Input/DecoratedPasswordInput'
 import { ChallengeModalValues } from './ChallengeModalValues'
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { InputValue } from './InputValue'
 import BiometricsPrompt from './BiometricsPrompt'
 import U2FPrompt from './U2FPrompt'

packages/web/src/javascripts/Components/ChallengeModal/LockscreenWorkspaceSwitcher.tsx

@@ -1,4 +1,4 @@
-import { ApplicationGroup } from '@/Application/ApplicationGroup'
+import { WebApplicationGroup } from '@/Application/WebApplicationGroup'
 import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { FunctionComponent, useCallback, useRef, useState } from 'react'
 import WorkspaceSwitcherMenu from '@/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu'
@@ -7,7 +7,7 @@ import Icon from '@/Components/Icon/Icon'
 import Popover from '../Popover/Popover'
 
 type Props = {
-  mainApplicationGroup: ApplicationGroup
+  mainApplicationGroup: WebApplicationGroup
   viewControllerManager: ViewControllerManager
 }
 

packages/web/src/javascripts/Components/ChallengeModal/U2FPrompt.tsx

@@ -2,7 +2,7 @@ import { Username } from '@standardnotes/snjs'
 import { ChallengePrompt } from '@standardnotes/services'
 import { RefObject, useState } from 'react'
 
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { isAndroid } from '@/Utils'
 
 import Button from '../Button/Button'

packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx

@@ -2,7 +2,7 @@ import Icon from '@/Components/Icon/Icon'
 import Menu from '@/Components/Menu/Menu'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
 import { STRING_EDIT_LOCKED_ATTEMPT } from '@/Constants/Strings'
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { ComponentArea, NoteMutator, NoteType, PrefKey, SNComponent, SNNote } from '@standardnotes/snjs'
 import { Fragment, FunctionComponent, useCallback, useEffect, useMemo, useState } from 'react'
 import { EditorMenuGroup } from '@/Components/NotesOptions/EditorMenuGroup'

packages/web/src/javascripts/Components/ChangeEditor/ChangeMultipleButton.tsx

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { NotesController } from '@/Controllers/NotesController/NotesController'
 import { useRef, useState } from 'react'
 import RoundIconButton from '../Button/RoundIconButton'

packages/web/src/javascripts/Components/ChangeEditor/ChangeMultipleMenu.tsx

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { STRING_EDIT_LOCKED_ATTEMPT } from '@/Constants/Strings'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
 import { createEditorMenuGroups } from '@/Utils/createEditorMenuGroups'

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

@@ -1,4 +1,4 @@
-import { ApplicationGroup } from '@/Application/ApplicationGroup'
+import { WebApplicationGroup } from '@/Application/WebApplicationGroup'
 import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { SNLogoFull } from '@standardnotes/icons'
 import { useCallback, useEffect, useState } from 'react'
@@ -48,7 +48,7 @@ const ClipperView = ({
   applicationGroup,
 }: {
   viewControllerManager: ViewControllerManager
-  applicationGroup: ApplicationGroup
+  applicationGroup: WebApplicationGroup
 }) => {
   const application = useApplication()
 

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

@@ -7,7 +7,7 @@ import {
   ComponentViewerEvent,
   ComponentViewerError,
 } from '@standardnotes/snjs'
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
 import { observer } from 'mobx-react-lite'
 import OfflineRestricted from '@/Components/ComponentView/OfflineRestricted'

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

@@ -3,7 +3,7 @@ import { ViewControllerManager } from '@Controllers/ViewControllerManager'
 import { useCallback, useRef } from 'react'
 import { STRING_DELETE_ACCOUNT_CONFIRMATION } from '@/Constants/Strings'
 import Button from '@/Components/Button/Button'
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import Icon from '../Icon/Icon'
 import AlertDialog from '../AlertDialog/AlertDialog'
 

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

@@ -1,9 +1,9 @@
 import { FunctionComponent, useCallback, useRef } from 'react'
 import { STRING_SIGN_OUT_CONFIRMATION } from '@/Constants/Strings'
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { observer } from 'mobx-react-lite'
-import { ApplicationGroup } from '@/Application/ApplicationGroup'
+import { WebApplicationGroup } from '@/Application/WebApplicationGroup'
 import { isDesktopApplication } from '@/Utils'
 import Button from '@/Components/Button/Button'
 import Icon from '../Icon/Icon'
@@ -13,7 +13,7 @@ import HorizontalSeparator from '../Shared/HorizontalSeparator'
 type Props = {
   application: WebApplication
   viewControllerManager: ViewControllerManager
-  applicationGroup: ApplicationGroup
+  applicationGroup: WebApplicationGroup
 }
 
 const ConfirmSignoutModal: FunctionComponent<Props> = ({ application, viewControllerManager, applicationGroup }) => {

packages/web/src/javascripts/Components/ContentListView/ContentList.tsx

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { KeyboardKey } from '@standardnotes/ui-services'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, KeyboardEventHandler, UIEventHandler, useCallback } from 'react'

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

@@ -7,7 +7,7 @@ import {
   SEARCH_KEYBOARD_COMMAND,
   SELECT_ALL_ITEMS_KEYBOARD_COMMAND,
 } from '@standardnotes/ui-services'
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { PANEL_NAME_NOTES } from '@/Constants/Constants'
 import { FileItem, PrefKey, WebAppEvent } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'

packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { memo, useCallback, useMemo, useRef, useState } from 'react'
 import Icon from '../../Icon/Icon'
 import { classNames } from '@standardnotes/utils'

packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenuProps.tsx

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { AnyTag } from '@/Controllers/Navigation/AnyTagType'
 import { PaneController } from '@/Controllers/PaneController/PaneController'
 

packages/web/src/javascripts/Components/ContentListView/Header/NewNotePreferences.tsx

@@ -13,7 +13,7 @@ import { ChangeEventHandler, FunctionComponent, useCallback, useEffect, useRef,
 import { PrefDefaults } from '@/Constants/PrefDefaults'
 import Dropdown from '@/Components/Dropdown/Dropdown'
 import { DropdownItem } from '@/Components/Dropdown/DropdownItem'
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { AnyTag } from '@/Controllers/Navigation/AnyTagType'
 import { PreferenceMode } from './PreferenceMode'
 import dayjs from 'dayjs'

packages/web/src/javascripts/Components/ContentListView/Types/AbstractListItemProps.ts

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { FilesController } from '@/Controllers/FilesController'
 import { NotesController } from '@/Controllers/NotesController/NotesController'
 import { SortableItem, SNTag, Uuids } from '@standardnotes/snjs'

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

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { FilesController } from '@/Controllers/FilesController'
 import { formatDateForContextMenu } from '@/Utils/DateUtils'
 import { getIconForFileType } from '@/Utils/Items/Icons/getIconForFileType'

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

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { PrefDefaults } from '@/Constants/PrefDefaults'
 import { ApplicationEvent, PrefKey } from '@standardnotes/snjs'
 import { useEffect } from 'react'

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

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, ReactNode } from 'react'
 

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

@@ -4,7 +4,6 @@ import { DropdownItem } from './DropdownItem'
 import { classNames } from '@standardnotes/snjs'
 import {
   Select,
-  SelectArrow,
   SelectItem,
   SelectLabel,
   SelectPopover,
@@ -102,7 +101,7 @@ const Dropdown = ({
           ) : null}
           <div className="text-base lg:text-sm">{currentItem?.label}</div>
         </div>
-        <SelectArrow className={classNames('text-passive-1', isExpanded && 'rotate-180')} />
+        <Icon type="chevron-down" size="normal" className={isExpanded ? 'rotate-180' : ''} />
       </Select>
       <SelectPopover
         store={select}

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

@@ -0,0 +1,216 @@
+import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
+import { classNames, EditorLineWidth, PrefKey, SNNote } from '@standardnotes/snjs'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import Button from '../Button/Button'
+import Modal, { ModalAction } from '../Modal/Modal'
+import ModalDialogButtons from '../Modal/ModalDialogButtons'
+import RadioButtonGroup from '../RadioButtonGroup/RadioButtonGroup'
+import { EditorMargins, EditorMaxWidths } from './EditorWidths'
+import { useApplication } from '../ApplicationProvider'
+import ModalOverlay from '../Modal/ModalOverlay'
+import { CHANGE_EDITOR_WIDTH_COMMAND, ESCAPE_COMMAND } from '@standardnotes/ui-services'
+import { PrefDefaults } from '@/Constants/PrefDefaults'
+import { observer } from 'mobx-react-lite'
+import Switch from '../Switch/Switch'
+
+const DoubleSidedArrow = ({ className }: { className?: string }) => {
+  return (
+    <div
+      className={classNames(
+        'relative h-[2px] w-full bg-current',
+        'before:absolute before:-left-px before:top-1/2 before:h-0 before:w-0 before:-translate-y-1/2 before:border-r-[6px] before:border-t-[6px] before:border-b-[6px] before:border-current before:border-b-transparent before:border-t-transparent',
+        'after:absolute after:-right-px after:top-1/2 after:h-0 after:w-0 after:-translate-y-1/2 after:border-l-[6px] after:border-t-[6px] after:border-b-[6px] after:border-current after:border-b-transparent after:border-t-transparent',
+        className,
+      )}
+    />
+  )
+}
+
+const EditorWidthSelectionModal = ({
+  initialValue,
+  handleChange,
+  close,
+  note,
+}: {
+  initialValue: EditorLineWidth
+  handleChange: (value: EditorLineWidth, setGlobally: boolean) => void
+  close: () => void
+  note: SNNote | undefined
+}) => {
+  const application = useApplication()
+  const isMobileScreen = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
+
+  const [value, setValue] = useState<EditorLineWidth>(() => initialValue)
+  const [setGlobally, setSetGlobally] = useState(false)
+
+  const options = useMemo(
+    () => [
+      {
+        label: 'Narrow',
+        value: EditorLineWidth.Narrow,
+      },
+      {
+        label: 'Wide',
+        value: EditorLineWidth.Wide,
+      },
+      {
+        label: 'Dynamic',
+        value: EditorLineWidth.Dynamic,
+      },
+      {
+        label: 'Full width',
+        value: EditorLineWidth.FullWidth,
+      },
+    ],
+    [],
+  )
+
+  const accept = useCallback(() => {
+    handleChange(value, setGlobally)
+    close()
+  }, [close, handleChange, setGlobally, value])
+
+  const actions = useMemo(
+    (): ModalAction[] => [
+      {
+        label: 'Cancel',
+        type: 'cancel',
+        onClick: close,
+        mobileSlot: 'left',
+      },
+      {
+        label: 'Done',
+        type: 'primary',
+        onClick: accept,
+        mobileSlot: 'right',
+      },
+    ],
+    [accept, close],
+  )
+
+  useEffect(() => {
+    return application.keyboardService.addCommandHandler({
+      command: ESCAPE_COMMAND,
+      onKeyDown() {
+        close()
+        return
+      },
+    })
+  }, [application.keyboardService, close])
+
+  const DynamicMargin = (
+    <div className="text-center text-sm text-passive-2">
+      <div className={value !== EditorLineWidth.Dynamic ? 'hidden' : ''}>
+        <div className="mb-2">{EditorMargins[value]}</div>
+        <DoubleSidedArrow />
+      </div>
+    </div>
+  )
+
+  return (
+    <Modal
+      title="Set editor width"
+      close={close}
+      customHeader={<></>}
+      customFooter={<></>}
+      disableCustomHeader={isMobileScreen}
+      actions={actions}
+      className={{
+        content: 'select-none md:min-w-[40vw]',
+        description: 'flex min-h-[50vh] flex-col',
+      }}
+    >
+      <div className="flex min-h-0 flex-grow flex-col overflow-hidden rounded bg-passive-5 p-4 pb-0">
+        <div
+          className={classNames(
+            'grid flex-grow grid-cols-[0fr_1fr_0fr] gap-3 rounded rounded-b-none bg-default px-2 pt-4 shadow-[0_1px_4px_rgba(0,0,0,0.12),0_2px_8px_rgba(0,0,0,0.04)] transition-all duration-200 md:px-4',
+            value === EditorLineWidth.Narrow && 'md:grid-cols-[1fr_60%_1fr]',
+            value === EditorLineWidth.Wide && 'md:grid-cols-[1fr_70%_1fr]',
+            value === EditorLineWidth.Dynamic && 'md:grid-cols-[1fr_80%_1fr]',
+            value === EditorLineWidth.FullWidth && 'md:grid-cols-[1fr_95%_1fr]',
+          )}
+        >
+          {DynamicMargin}
+          <div className="flex flex-col text-info">
+            <div className="mb-2 text-center text-sm">
+              {value === EditorLineWidth.Narrow || value === EditorLineWidth.Wide
+                ? `Max. ${EditorMaxWidths[value]}`
+                : EditorMaxWidths[value]}
+            </div>
+            <DoubleSidedArrow />
+            <div className="w-full flex-grow bg-[linear-gradient(transparent_50%,var(--sn-stylekit-info-color)_50%)] bg-[length:100%_2.5rem] bg-repeat-y opacity-10" />
+          </div>
+          {DynamicMargin}
+        </div>
+      </div>
+      {!!note && (
+        <div className="border-t border-border bg-default px-4 py-2">
+          <label className="flex items-center gap-2">
+            <Switch checked={setGlobally} onChange={setSetGlobally} />
+            Set globally {note.editorWidth != undefined && '(will not apply to current note)'}
+          </label>
+        </div>
+      )}
+      <ModalDialogButtons className="justify-center md:justify-between">
+        <RadioButtonGroup items={options} value={value} onChange={(value) => setValue(value as EditorLineWidth)} />
+        <div className="hidden items-center gap-2 md:flex">
+          <Button onClick={close}>Cancel</Button>
+          <Button onClick={accept} primary>
+            Apply
+          </Button>
+        </div>
+      </ModalDialogButtons>
+    </Modal>
+  )
+}
+
+const EditorWidthSelectionModalWrapper = () => {
+  const application = useApplication()
+  const { notesController } = application.getViewControllerManager()
+
+  const [isOpen, setIsOpen] = useState(false)
+  const [isGlobal, setIsGlobal] = useState(false)
+
+  const note = notesController.selectedNotesCount === 1 && !isGlobal ? notesController.selectedNotes[0] : undefined
+
+  const lineWidth = note
+    ? notesController.getEditorWidthForNote(note)
+    : application.getPreference(PrefKey.EditorLineWidth, PrefDefaults[PrefKey.EditorLineWidth])
+
+  const setLineWidth = useCallback(
+    (lineWidth: EditorLineWidth, setGlobally: boolean) => {
+      if (note && !setGlobally) {
+        notesController.setNoteEditorWidth(note, lineWidth).catch(console.error)
+      } else {
+        application.setPreference(PrefKey.EditorLineWidth, lineWidth).catch(console.error)
+      }
+    },
+    [application, note, notesController],
+  )
+
+  const toggle = useCallback(() => {
+    setIsOpen((open) => !open)
+  }, [])
+
+  useEffect(() => {
+    return application.keyboardService.addCommandHandler({
+      command: CHANGE_EDITOR_WIDTH_COMMAND,
+      onKeyDown: (_, data) => {
+        if (typeof data === 'boolean' && data) {
+          setIsGlobal(data)
+        } else {
+          setIsGlobal(false)
+        }
+        toggle()
+      },
+    })
+  }, [application, toggle])
+
+  return (
+    <ModalOverlay isOpen={isOpen}>
+      <EditorWidthSelectionModal initialValue={lineWidth} handleChange={setLineWidth} close={toggle} note={note} />
+    </ModalOverlay>
+  )
+}
+
+export default observer(EditorWidthSelectionModalWrapper)

packages/web/src/javascripts/Components/EditorWidthSelectionModal/EditorWidths.ts

@@ -0,0 +1,15 @@
+import { EditorLineWidth } from '@standardnotes/snjs'
+
+export const EditorMaxWidths: { [k in EditorLineWidth]: string } = {
+  [EditorLineWidth.Narrow]: '512px',
+  [EditorLineWidth.Wide]: '720px',
+  [EditorLineWidth.Dynamic]: '80%',
+  [EditorLineWidth.FullWidth]: '100%',
+}
+
+export const EditorMargins: { [k in EditorLineWidth]: string } = {
+  [EditorLineWidth.Narrow]: 'auto',
+  [EditorLineWidth.Wide]: 'auto',
+  [EditorLineWidth.Dynamic]: '10%',
+  [EditorLineWidth.FullWidth]: '0',
+}

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

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { FeaturesController } from '@/Controllers/FeaturesController'
 import { FilesController } from '@/Controllers/FilesController'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'

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

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { concatenateUint8Arrays } from '@/Utils'
 import {
   ApplicationEvent,

packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { FunctionComponent, KeyboardEventHandler, useCallback, useMemo, useRef, useState } from 'react'
 import { getFileIconComponent } from './getFileIconComponent'
 import Icon from '@/Components/Icon/Icon'

packages/web/src/javascripts/Components/FilePreview/PreviewComponent.tsx

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { getBase64FromBlob } from '@/Utils'
 import { FileItem } from '@standardnotes/snjs'
 import { FunctionComponent, useCallback, useEffect, useMemo, useRef } from 'react'

packages/web/src/javascripts/Components/FileView/FileViewProps.tsx

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { FileItem } from '@standardnotes/snjs'
 

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

@@ -1,5 +1,5 @@
-import { WebApplication } from '@/Application/Application'
-import { ApplicationGroup } from '@/Application/ApplicationGroup'
+import { WebApplication } from '@/Application/WebApplication'
+import { WebApplicationGroup } from '@/Application/WebApplicationGroup'
 import { AbstractComponent } from '@/Components/Abstract/PureComponent'
 import { destroyAllObjectProperties, preventRefreshing } from '@/Utils'
 import { ApplicationEvent, ApplicationDescriptor, WebAppEvent } from '@standardnotes/snjs'
@@ -24,7 +24,7 @@ import PreferencesButton from './PreferencesButton'
 
 type Props = {
   application: WebApplication
-  applicationGroup: ApplicationGroup
+  applicationGroup: WebApplicationGroup
 }
 
 type State = {

packages/web/src/javascripts/Components/Footer/QuickSettingsButton.tsx

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { QuickSettingsController } from '@/Controllers/QuickSettingsController'
 import { FeatureIdentifier, SNTheme } from '@standardnotes/snjs'
 import { TOGGLE_DARK_MODE_COMMAND } from '@standardnotes/ui-services'

packages/web/src/javascripts/Components/Footer/UpgradeNow.tsx

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { FeaturesController } from '@/Controllers/FeaturesController'
 import { SubscriptionController } from '@/Controllers/Subscription/SubscriptionController'
 import { observer } from 'mobx-react-lite'

packages/web/src/javascripts/Components/Icon/IconNameToSvgMapping.tsx

@@ -42,6 +42,7 @@ export const IconNameToSvgMapping = {
   'hashtag-off': icons.HashtagOffIcon,
   'keyboard-close': icons.KeyboardCloseIcon,
   'link-off': icons.LinkOffIcon,
+  'line-width': icons.LineWidthIcon,
   'list-bulleted': icons.ListBulleted,
   'list-numbered': icons.ListNumbered,
   'lock-filled': icons.LockFilledIcon,

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

@@ -1,7 +1,7 @@
 import { IlNotesIcon } from '@standardnotes/icons'
 import { observer } from 'mobx-react-lite'
 import NotesOptionsPanel from '@/Components/NotesOptions/NotesOptionsPanel'
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import PinNoteButton from '@/Components/PinNoteButton/PinNoteButton'
 import Button from '../Button/Button'
 import { useCallback } from 'react'

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

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { classNames } from '@standardnotes/utils'
 import Button from '../Button/Button'
 import Icon from '../Icon/Icon'

packages/web/src/javascripts/Components/NoteGroupView/EditorPane.tsx

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { PaneLayout } from '@/Controllers/PaneController/PaneLayout'
 import { mergeRefs } from '@/Hooks/mergeRefs'
 import { ForwardedRef, forwardRef } from 'react'

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

@@ -1,6 +1,6 @@
 import { FileItem } from '@standardnotes/snjs'
 import { AbstractComponent } from '@/Components/Abstract/PureComponent'
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import MultipleSelectedNotes from '@/Components/MultipleSelectedNotes/MultipleSelectedNotes'
 import MultipleSelectedFiles from '../MultipleSelectedFiles/MultipleSelectedFiles'
 import { AppPaneId } from '../Panes/AppPaneMetadata'

packages/web/src/javascripts/Components/NoteView/Controller/ItemGroupController.ts

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { removeFromArray } from '@standardnotes/utils'
 import { FileItem, SNNote } from '@standardnotes/snjs'
 import { NoteViewController } from './NoteViewController'

packages/web/src/javascripts/Components/NoteView/Controller/NoteViewController.spec.ts

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { ContentType } from '@standardnotes/common'
 import {
   MutatorService,

packages/web/src/javascripts/Components/NoteView/Controller/NoteViewController.ts

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { noteTypeForEditorIdentifier } from '@standardnotes/features'
 import { SNNote, SNTag, NoteContent, DecryptedItemInterface, PayloadEmitSource, PrefKey } from '@standardnotes/models'
 import { UuidString } from '@standardnotes/snjs'

packages/web/src/javascripts/Components/NoteView/NoteView.test.ts

@@ -2,7 +2,7 @@
  * @jest-environment jsdom
  */
 
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { NotesController } from '@/Controllers/NotesController/NotesController'
 import {
@@ -35,6 +35,7 @@ describe('NoteView', () => {
     notesController = {} as jest.Mocked<NotesController>
     notesController.setShowProtectedWarning = jest.fn()
     notesController.getSpellcheckStateForNote = jest.fn()
+    notesController.getEditorWidthForNote = jest.fn()
 
     viewControllerManager = {
       notesController: notesController,

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

@@ -2,20 +2,20 @@ import { AbstractComponent } from '@/Components/Abstract/PureComponent'
 import ChangeEditorButton from '@/Components/ChangeEditor/ChangeEditorButton'
 import ComponentView from '@/Components/ComponentView/ComponentView'
 import NotesOptionsPanel from '@/Components/NotesOptions/NotesOptionsPanel'
-import PanelResizer, { PanelResizeType, PanelSide } from '@/Components/PanelResizer/PanelResizer'
 import PinNoteButton from '@/Components/PinNoteButton/PinNoteButton'
 import ProtectedItemOverlay from '@/Components/ProtectedItemOverlay/ProtectedItemOverlay'
 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, isTabletOrMobileScreen } from '@/Utils'
+import { debounce, isDesktopApplication, isMobileScreen } from '@/Utils'
 import { classNames } from '@standardnotes/utils'
 import {
   ApplicationEvent,
   ComponentArea,
   ComponentViewerInterface,
   ContentType,
+  EditorLineWidth,
   isPayloadSourceInternalChange,
   isPayloadSourceRetrieved,
   NoteType,
@@ -26,7 +26,7 @@ import {
   SNNote,
 } from '@standardnotes/snjs'
 import { confirmDialog, DELETE_NOTE_KEYBOARD_COMMAND, KeyboardKey } from '@standardnotes/ui-services'
-import { ChangeEventHandler, createRef, KeyboardEventHandler, RefObject } from 'react'
+import { ChangeEventHandler, createRef, CSSProperties, KeyboardEventHandler, RefObject } from 'react'
 import { SuperEditor } from '../SuperEditor/SuperEditor'
 import IndicatorCircle from '../IndicatorCircle/IndicatorCircle'
 import LinkedItemBubblesContainer from '../LinkedItems/LinkedItemBubblesContainer'
@@ -44,6 +44,7 @@ import {
 import { SuperEditorContentId } from '../SuperEditor/Constants'
 import { NoteViewController } from './Controller/NoteViewController'
 import { PlainEditor, PlainEditorInterface } from './PlainEditor/PlainEditor'
+import { EditorMargins, EditorMaxWidths } from '../EditorWidthSelectionModal/EditorWidths'
 
 const MinimumStatusDuration = 400
 
@@ -58,7 +59,7 @@ type State = {
   editorStateDidLoad: boolean
   editorTitle: string
   isDesktop?: boolean
-  marginResizersEnabled?: boolean
+  editorLineWidth: EditorLineWidth
   noteLocked: boolean
   noteStatus?: NoteStatus
   saveError?: boolean
@@ -68,10 +69,6 @@ type State = {
   syncTakingTooLong: boolean
   monospaceFont?: boolean
   plainEditorFocused?: boolean
-  leftResizerWidth: number
-  leftResizerOffset: number
-  rightResizerWidth: number
-  rightResizerOffset: number
 
   updateSavingIndicator?: boolean
   editorFeatureIdentifier?: string
@@ -112,6 +109,7 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
       availableStackComponents: [],
       editorStateDidLoad: false,
       editorTitle: '',
+      editorLineWidth: PrefDefaults[PrefKey.EditorLineWidth],
       isDesktop: isDesktopApplication(),
       noteStatus: undefined,
       noteLocked: this.controller.item.locked,
@@ -119,10 +117,6 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
       spellcheck: true,
       stackComponentViewers: [],
       syncTakingTooLong: false,
-      leftResizerWidth: 0,
-      leftResizerOffset: 0,
-      rightResizerWidth: 0,
-      rightResizerOffset: 0,
       editorFeatureIdentifier: this.controller.item.editorIdentifier,
       noteType: this.controller.item.noteType,
     }
@@ -280,6 +274,8 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
 
     this.reloadSpellcheck().catch(console.error)
 
+    this.reloadLineWidth()
+
     const isTemplateNoteInsertedToBeInteractableWithEditor = source === PayloadEmitSource.LocalInserted && note.dirty
     if (isTemplateNoteInsertedToBeInteractableWithEditor) {
       return
@@ -660,6 +656,14 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
     }
   }
 
+  reloadLineWidth() {
+    const editorLineWidth = this.viewControllerManager.notesController.getEditorWidthForNote(this.note)
+
+    this.setState({
+      editorLineWidth,
+    })
+  }
+
   async reloadPreferences() {
     log(LoggingDomain.NoteView, 'Reload preferences')
     const monospaceFont = this.application.getPreference(
@@ -667,10 +671,6 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
       PrefDefaults[PrefKey.EditorMonospaceEnabled],
     )
 
-    const marginResizersEnabled =
-      !isTabletOrMobileScreen() &&
-      this.application.getPreference(PrefKey.EditorResizersEnabled, PrefDefaults[PrefKey.EditorResizersEnabled])
-
     const updateSavingIndicator = this.application.getPreference(
       PrefKey.UpdateSavingStatusIndicator,
       PrefDefaults[PrefKey.UpdateSavingStatusIndicator],
@@ -678,30 +678,14 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
 
     await this.reloadSpellcheck()
 
+    this.reloadLineWidth()
+
     this.setState({
       monospaceFont,
-      marginResizersEnabled,
       updateSavingIndicator,
     })
 
     reloadFont(monospaceFont)
-
-    if (marginResizersEnabled) {
-      const width = this.application.getPreference(PrefKey.EditorWidth, PrefDefaults[PrefKey.EditorWidth])
-      if (width != null) {
-        this.setState({
-          leftResizerWidth: width,
-          rightResizerWidth: width,
-        })
-      }
-      const left = this.application.getPreference(PrefKey.EditorLeft, PrefDefaults[PrefKey.EditorLeft])
-      if (left != null) {
-        this.setState({
-          leftResizerOffset: left,
-          rightResizerOffset: left,
-        })
-      }
-    }
   }
 
   async reloadStackComponents() {
@@ -896,24 +880,18 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
 
         <div
           id={ElementIds.EditorContent}
-          className={`${ElementIds.EditorContent} z-editor-content overflow-auto`}
+          className={classNames(
+            ElementIds.EditorContent,
+            'z-editor-content overflow-auto [&>*]:mx-[var(--editor-margin)] [&>*]:max-w-[var(--editor-max-width)]',
+          )}
+          style={
+            {
+              '--editor-margin': EditorMargins[this.state.editorLineWidth],
+              '--editor-max-width': EditorMaxWidths[this.state.editorLineWidth],
+            } as CSSProperties
+          }
           ref={this.editorContentRef}
         >
-          {this.state.marginResizersEnabled && this.editorContentRef.current ? (
-            <PanelResizer
-              minWidth={300}
-              hoverable={true}
-              collapsable={false}
-              panel={this.editorContentRef.current}
-              side={PanelSide.Left}
-              type={PanelResizeType.OffsetAndWidth}
-              left={this.state.leftResizerOffset}
-              width={this.state.leftResizerWidth}
-              resizeFinishCallback={this.onPanelResizeFinish}
-              modifyElementWidth={true}
-            />
-          ) : null}
-
           {editorMode === 'component' && this.state.editorComponentViewer && (
             <div className="component-view flex-grow">
               <ComponentView
@@ -950,21 +928,6 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
               />
             </div>
           )}
-
-          {this.state.marginResizersEnabled && this.editorContentRef.current ? (
-            <PanelResizer
-              minWidth={300}
-              hoverable={true}
-              collapsable={false}
-              panel={this.editorContentRef.current}
-              side={PanelSide.Right}
-              type={PanelResizeType.OffsetAndWidth}
-              left={this.state.rightResizerOffset}
-              width={this.state.rightResizerWidth}
-              resizeFinishCallback={this.onPanelResizeFinish}
-              modifyElementWidth={true}
-            />
-          ) : null}
         </div>
 
         <div id="editor-pane-component-stack">

packages/web/src/javascripts/Components/NoteView/NoteViewProps.ts

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { NoteViewController } from './Controller/NoteViewController'
 
 export interface NoteViewProps {

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

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { usePrevious } from '@/Components/ContentListView/Calendar/usePrevious'
 import { ElementIds } from '@/Constants/ElementIDs'
 import { PrefDefaults } from '@/Constants/PrefDefaults'

packages/web/src/javascripts/Components/NotesOptions/ChangeEditorOption.tsx

@@ -1,5 +1,5 @@
 import { CHANGE_EDITOR_COMMAND, KeyboardKey } from '@standardnotes/ui-services'
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { SNNote } from '@standardnotes/snjs'
 import { FunctionComponent, useCallback, useMemo, useRef, useState } from 'react'
 import Icon from '@/Components/Icon/Icon'

packages/web/src/javascripts/Components/NotesOptions/Listed/ListedActionsMenu.tsx

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { Action, SNNote } from '@standardnotes/snjs'
 import { Fragment, useCallback, useEffect, useState } from 'react'
 import Icon from '@/Components/Icon/Icon'

packages/web/src/javascripts/Components/NotesOptions/Listed/ListedActionsOption.tsx

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/WebApplication'
 import { SNNote } from '@standardnotes/snjs'
 import { FunctionComponent, useCallback, useRef, useState } from 'react'
 import Icon from '@/Components/Icon/Icon'