Merge pull request #145 from milikhin/update-codemirror-6.0

- update Codemirror to v6.0.1
- add support for Sailfish OS v4.4.0.68

.gitignore

@@ -8,7 +8,7 @@ harbour-seabass/qml/html/
 harbour-seabass/qml/generic/
 harbour-seabass/qml/py-backend/
 harbour-seabass/qml/py-libs/
-harbour-seabass/harbour-seabass.pro.user
+harbour-seabass/harbour-seabass.pro.user*
 
 ubports-seabass/build
 ubports-seabass/html/dist

editor/__tests__/app/model.test.js

@@ -12,7 +12,9 @@ describe('SeabassAppModel', () => {
 
       expect(model._editors).toEqual(new Map())
       expect(model._preferences).toEqual({
-        isDarkTheme: false,
+        isDarkTheme: false
+      })
+      expect(model._viewport).toEqual({
         verticalHtmlOffset: 0
       })
       expect(model.sailfishPreferences).toEqual({ isToolbarOpened: true })
@@ -158,13 +160,26 @@ describe('SeabassAppModel', () => {
       const model = new SeabassAppModel()
 
       const options = {
-        isDarkTheme: true,
-        verticalHtmlOffset: Math.random()
+        isDarkTheme: true
       }
       model.setPreferences(options)
 
       expect(model._preferences).toEqual({
-        isDarkTheme: options.isDarkTheme,
+        isDarkTheme: options.isDarkTheme
+      })
+    })
+  })
+
+  describe('#setViewportOptions', () => {
+    it('should set viewport options', () => {
+      const model = new SeabassAppModel()
+
+      const options = {
+        verticalHtmlOffset: Math.random()
+      }
+      model.setViewportOptions(options)
+
+      expect(model._viewport).toEqual({
         verticalHtmlOffset: options.verticalHtmlOffset
       })
     })

editor/src/api/api.ts

@@ -1,4 +1,4 @@
-import { InputPreferences, SeabassSailfishPreferences } from '../app/model'
+import { InputPreferences, SeabassSailfishPreferences, ViewportOptions } from '../app/model'
 import { KeyDownOptions } from '../editor/editor'
 import {
   API_TRANSPORT,
@@ -11,6 +11,7 @@ export interface IncomingMessagePayload {
   closeFile: FileActionOptions
   fileSaved: undefined
   keyDown: KeyDownOptions
+  viewportChange: ViewportOptions
   loadFile: FileLoadOptions
   openFile: FileActionOptions
   oskVisibilityChanged: undefined
@@ -61,7 +62,8 @@ export default class SeabassApi extends EventTarget {
     'setPreferences',
     'setSailfishPreferences',
     'toggleReadOnly',
-    'undo'
+    'undo',
+    'viewportChange'
   ])
 
   constructor ({ transport }: ApiOptions) {

editor/src/app/app.css

@@ -6,10 +6,13 @@ html {
   right: 0;
   padding: 0;
   margin: 0;
+  overflow: auto;
 }
 
 body {
   margin: 0;
+  overflow: auto;
+  height: 100%;
 }
 
 #root {

editor/src/app/app.ts

@@ -9,7 +9,8 @@ import SeabassView from './view'
 import SeabassAppModel, {
   EditorStateChangeOptions,
   InputPreferences,
-  SeabassSailfishPreferences
+  SeabassSailfishPreferences,
+  ViewportOptions
 } from './model'
 
 import './app.css'
@@ -64,6 +65,7 @@ class SeabassApp {
     this._api.addEventListener('setSailfishPreferences', this._onSetSailfishPreferences.bind(this))
     this._api.addEventListener('toggleReadOnly', this._forwardEvent.bind(this))
     this._api.addEventListener('undo', this._forwardEvent.bind(this))
+    this._api.addEventListener('viewportChange', this._onViewportChange.bind(this))
 
     this._model.addEventListener('stateChange', this._onStateChange.bind(this))
     this._model.addEventListener('log', this._onLog.bind(this))
@@ -109,6 +111,15 @@ class SeabassApp {
     this._model.closeFile(evt.detail.filePath)
   }
 
+  /**
+   * Loads saved SailfishOS-specific preferences
+   * @param evt setTheme event
+   */
+  _onViewportChange (evt: CustomEvent<ViewportOptions>): void {
+    this._model.setViewportOptions(evt.detail)
+    this._forwardEvent(evt)
+  }
+
   /**
    * Requests file saving
    * @param evt requestFileSave event

editor/src/app/model.ts

@@ -19,20 +19,24 @@ export interface SeabassHtmlTheme {
 export interface SeabassCommonPreferences {
   /** Required to set metching editor theme */
   isDarkTheme: boolean
-  /** HTML page's offset from the bottom of webView. Used as a workaround to SfOS rendering issues */
-  verticalHtmlOffset: number
 }
 
 export interface SeabassSailfishPreferences {
   /** Bottom toolbar state */
   isToolbarOpened: boolean
 }
 
+export interface ViewportOptions {
+  /** HTML page's offset from the bottom of webView. Used as a workaround to SfOS rendering issues */
+  verticalHtmlOffset: number
+}
+
 export type InputPreferences = SeabassHtmlTheme & Partial<SeabassCommonPreferences>
 
 interface AppEvents {
   htmlThemeChange: CustomEvent<SeabassHtmlTheme>
   closeFile: CustomEvent<FileActionOptions>
+  viewportChange: CustomEvent<ViewportOptions>
   loadFile: CustomEvent<FileLoadOptions>
   log: CustomEvent<unknown>
   preferencesChange: CustomEvent<SeabassCommonPreferences>
@@ -56,26 +60,29 @@ export default class SeabassAppModel extends EventTarget {
   /** App preferences */
   _preferences: {
     isDarkTheme: boolean
-    verticalHtmlOffset: number
   }
 
   /** SailfishOS-specific preferences */
   _sailfish: {
     isToolbarOpened: boolean
   }
 
+  _viewport: {
+    verticalHtmlOffset: number
+  }
+
   SFOS_TOOLBAR_LOCAL_STORAGE_KEY = 'sailfish__isToolbarOpened'
 
   constructor () {
     super()
     this._editors = new Map()
-    this._preferences = {
-      isDarkTheme: false,
-      verticalHtmlOffset: 0
-    }
+    this._preferences = { isDarkTheme: false }
     this._sailfish = {
       isToolbarOpened: localStorage.getItem(this.SFOS_TOOLBAR_LOCAL_STORAGE_KEY) === 'true'
     }
+    this._viewport = {
+      verticalHtmlOffset: 0
+    }
   }
 
   get sailfishPreferences (): SeabassSailfishPreferences {
@@ -162,6 +169,13 @@ export default class SeabassAppModel extends EventTarget {
     this.dispatchEvent(new CustomEvent('stateChange', { detail: editor.getUiState() }))
   }
 
+  setViewportOptions (options: ViewportOptions): void {
+    this._viewport = {
+      verticalHtmlOffset: options.verticalHtmlOffset ?? 0
+    }
+    this.dispatchEvent(new CustomEvent('viewportChange', { detail: this._viewport }))
+  }
+
   /**
    * Sets app preferences
    * @param options app preferences
@@ -174,8 +188,7 @@ export default class SeabassAppModel extends EventTarget {
     }
 
     this._preferences = {
-      isDarkTheme: options.isDarkTheme ?? false,
-      verticalHtmlOffset: options.verticalHtmlOffset ?? 0
+      isDarkTheme: options.isDarkTheme ?? false
     }
 
     for (const editor of this._editors.values()) {

editor/src/app/view.ts

@@ -1,4 +1,4 @@
-import SeabassAppModel, { SeabassHtmlTheme, SeabassCommonPreferences } from './model'
+import SeabassAppModel, { SeabassHtmlTheme, ViewportOptions } from './model'
 
 interface SeabassViewOptions {
   model: SeabassAppModel
@@ -49,16 +49,16 @@ export default class SeabassView {
     ;(rules.item(2) as CSSStyleRule).style.color = options.highlightColor
   }
 
-  _onPreferencesChange (options: SeabassCommonPreferences): void {
+  _onViewportChange (options: ViewportOptions): void {
     document.documentElement.style.bottom = `${options.verticalHtmlOffset}px`
   }
 
   _registerEventListeners (): void {
     this._model.addEventListener('htmlThemeChange', evt => {
       this._onHtmlThemeChange(evt.detail)
     })
-    this._model.addEventListener('preferencesChange', evt => {
-      this._onPreferencesChange(evt.detail)
+    this._model.addEventListener('viewportChange', evt => {
+      this._onViewportChange(evt.detail)
     })
     this._model.addEventListener('loadFile', () => {
       this.showTabs()

editor/src/editor/editor.ts

@@ -1,4 +1,5 @@
-import { EditorState, EditorView } from '@codemirror/basic-setup'
+import { EditorView } from 'codemirror'
+import { EditorState } from '@codemirror/state'
 import { oneDark } from '@codemirror/theme-one-dark'
 import { undoDepth, redoDepth, undo, redo } from '@codemirror/commands'
 import { runScopeHandlers } from '@codemirror/view'

editor/src/editor/setup.ts

@@ -1,6 +1,6 @@
-import { EditorView, EditorState, basicSetup } from '@codemirror/basic-setup'
+import { EditorView, basicSetup } from 'codemirror'
 import { indentUnit } from '@codemirror/language'
-import { Compartment, Extension, Facet, StateEffect } from '@codemirror/state'
+import { Compartment, EditorState, Extension, Facet, StateEffect } from '@codemirror/state'
 import { keymap } from '@codemirror/view'
 import { history, historyKeymap, indentWithTab } from '@codemirror/commands'
 import { oneDark } from '@codemirror/theme-one-dark'

generic/qml/EditorState.qml

@@ -28,7 +28,7 @@ QtObject {
     textColorChanged.connect(loadTheme)
     fontSizeChanged.connect(loadTheme)
     useWrapModeChanged.connect(loadTheme)
-    verticalHtmlOffsetChanged.connect(loadTheme)
+    verticalHtmlOffsetChanged.connect(updateViewport)
   }
 
   onIsReadOnlyChanged: {
@@ -45,6 +45,11 @@ QtObject {
       textColor: textColor,
       fontSize: fontSize,
       useWrapMode: useWrapMode,
+    })
+  }
+
+  function updateViewport() {
+    api.postMessage('viewportChange', {
       verticalHtmlOffset: verticalHtmlOffset
     })
   }

harbour-seabass/html/index.html

@@ -23,6 +23,19 @@
 
 <body>
   <div id="welcome">
+    <p>v0.9.2:</p>
+    <ul>
+      <li>
+        Add support for Sailfish OS v4.4.0.68:
+        fix editor resizing and scroll-into-view when opening on-screen keyboard
+      </li>
+      <li>
+        Update codemirror to v6.0.1
+      </li>
+      <li>
+        Supported Sailfish OS versions: v4.4.0.68
+      </li>
+    </ul>
     <p>v0.9.1:</p>
     <ul>
       <li>
@@ -32,6 +45,9 @@
       <li>
         Fix switching between dark/light ambiances
       </li>
+      <li>
+        Supported Sailfish OS versions: v4.2 &ndash; 4.4.0.64
+      </li>
     </ul>
     <p>v0.9.0:</p>
     <ul>

harbour-seabass/qml/pages/About.qml

@@ -9,7 +9,7 @@ Page {
         anchors.fill: parent
         header: PageHeader {
             id: header
-            title: qsTr('Seabass v%1').arg('0.9.1')
+            title: qsTr('Seabass v%1').arg('0.9.2')
         }
         model: ListModel {
             ListElement {

harbour-seabass/qml/pages/Editor.qml

@@ -78,14 +78,15 @@ WebViewPage {
             page: page
             title: hasOpenedFile
                 ? ((editorState.hasChanges ? '*' : '') + QmlJs.getFileName(filePath))
-                : qsTr('Seabass v%1').arg('0.9.1')
+                : qsTr('Seabass v%1').arg('0.9.2')
             description: hasOpenedFile
                 ? QmlJs.getPrintableDirPath(QmlJs.getDirPath(filePath), api.homeDir)
                 : qsTr('Release notes')
 
             onHeightChanged: {
                 headerHeight = height
             }
+
             // Show divider between page header and editor when file is opened
             Rectangle {
                 anchors.bottom: parent.bottom
@@ -100,6 +101,12 @@ WebViewPage {
         webView.url: '../html/index.html'
         webView.viewportHeight: getEditorHeight()
 
+        Component.onCompleted: {
+            Qt.inputMethod.visibleChanged.connect(function() {
+                api.oskVisibilityChanged(Qt.inputMethod.visible)
+            })
+        }
+
         // Initialize API transport method for Sailfish OS
         webView.onViewInitialized: {
             webView.loadFrameScript(Qt.resolvedUrl("../html/framescript.js"));
@@ -118,12 +125,6 @@ WebViewPage {
             Qt.openUrlExternally(url)
         }
 
-        Component.onCompleted: {
-            Qt.inputMethod.visibleChanged.connect(function() {
-                api.oskVisibilityChanged(Qt.inputMethod.visible)
-            })
-        }
-
         PullDownMenu {
             busy: api.isSaveInProgress
             visible: isMenuEnabled
@@ -280,10 +281,14 @@ WebViewPage {
     }
 
     function getEditorHeight() {
-        const dockHeight = toolbar.open ? toolbar.height : 0
-        const windowHeight = page.orientation & Orientation.PortraitMask
+        const isPortrait = page.orientation & Orientation.PortraitMask
+        const screenHeight = isPortrait
             ? Screen.height
             : Screen.width
-        return windowHeight - dockHeight
+        const keyboardHeight = isPortrait
+            ? Qt.inputMethod.keyboardRectangle.height
+            : Qt.inputMethod.keyboardRectangle.width
+        const toolbarHeight = toolbar.open ? toolbar.height : 0
+        return screenHeight - keyboardHeight - toolbarHeight
     }
 }

harbour-seabass/rpm/harbour-seabass.spec

@@ -9,7 +9,7 @@ Name:       harbour-seabass
 # << macros
 
 Summary:    Seabass
-Version:    0.9.1
+Version:    0.9.2
 Release:    1
 Group:      Qt/Qt
 License:    LICENSE

harbour-seabass/rpm/harbour-seabass.yaml

@@ -1,6 +1,6 @@
 Name: harbour-seabass
 Summary: Seabass
-Version: 0.9.1
+Version: 0.9.2
 Release: 1
 # The contents of the Group field should be one of the groups listed here:
 # https://github.com/mer-tools/spectacle/blob/master/data/GROUPS