@standardnotes/markdown-visual 1.3.0 → 1.3.1

package/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.3.1](https://github.com/standardnotes/plugins/compare/@standardnotes/markdown-visual@1.3.0...@standardnotes/markdown-visual@1.3.1) (2023-02-13)
+
+### Bug Fixes
+
+* markdown alternative width issue on mobile ([94a080a](https://github.com/standardnotes/plugins/commit/94a080a381e4e7c1acea95ebe7824e947ce3834b))
+
 # [1.3.0](https://github.com/standardnotes/plugins/compare/@standardnotes/markdown-visual@1.2.3...@standardnotes/markdown-visual@1.3.0) (2023-01-20)
 
 ### Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/markdown-visual",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "author": "Standard Notes.",
   "description": "A lightweight WYSIWYG markdown editor for Standard Notes, derived from Milkdown.",
   "keywords": [
@@ -102,5 +102,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "952d7103d2d1b68a46435daab1bec5b35a2d3497"
+  "gitHead": "088dd04552f474d9e0a61cb86f1d75f9d405906e"
 }

package/src/index.tsx

@@ -20,6 +20,7 @@ enum TextChangeSource {
 type AppProps = {}
 type AppState = {
   splitView: boolean
+  splitViewDirection: SplitViewDirection
   editable: boolean
   spellcheck: boolean
   isLoading: boolean
@@ -37,14 +38,22 @@ class AppWrapper extends Component<AppProps, AppState> {
 
     this.state = {
       splitView: false,
+      splitViewDirection: this.getSplitViewDirection(),
       editable: true,
       spellcheck: true,
       isLoading: true,
     }
+
+    this.handleSplitViewDirectionChange = this.handleSplitViewDirectionChange.bind(this)
   }
 
   componentDidMount() {
     this.configureEditorKit()
+    window.matchMedia('(max-width: 768px)').addEventListener('change', this.handleSplitViewDirectionChange)
+  }
+
+  componentWillUnmount(): void {
+    window.matchMedia('(max-width: 768px)').removeEventListener('change', this.handleSplitViewDirectionChange)
   }
 
   private configureEditorKit() {
@@ -146,13 +155,15 @@ class AppWrapper extends Component<AppProps, AppState> {
     })
   }
 
-  private getSplitViewDirection = (environment: string): SplitViewDirection => {
-    const environmentDirectionMap: Record<string, SplitViewDirection> = {
-      web: SplitViewDirection.Horizontal,
-      desktop: SplitViewDirection.Horizontal,
-      mobile: SplitViewDirection.Vertical,
-    }
-    return environmentDirectionMap[environment]
+  private getSplitViewDirection = (): SplitViewDirection => {
+    const isMobile = window.innerWidth < 768
+    return isMobile ? SplitViewDirection.Vertical : SplitViewDirection.Horizontal
+  }
+
+  private handleSplitViewDirectionChange = (event: MediaQueryListEvent) => {
+    this.setState({
+      splitViewDirection: this.getSplitViewDirection(),
+    })
   }
 
   private truncateString(text: string, limit = 90) {
@@ -163,15 +174,12 @@ class AppWrapper extends Component<AppProps, AppState> {
   }
 
   render() {
-    const { splitView, editable, spellcheck, isLoading } = this.state
+    const { splitView, splitViewDirection, editable, spellcheck, isLoading } = this.state
 
     if (isLoading) {
       return null
     }
 
-    const environment = this.editorKit?.environment ?? 'web'
-    const splitViewDirection = this.getSplitViewDirection(environment)
-
     const customMenu: MenuConfig = [
       ...menuConfig,
       [