Koenig - Enable line-wrapping for HTML card's CodeMirror instance

refs https://github.com/TryGhost/Ghost/issues/9505
- pass `lineWrapping` option through to CodeMirror in `{{gh-cm-editor}}`
- add cascade overrides for the `pre` line-wrapping styles needed by CodeMirror

ghost/admin/app/components/gh-cm-editor.js

@@ -16,11 +16,12 @@ const CmEditorComponent = Component.extend({
     isInitializingCodemirror: true,
 
     // options for the editor
-    lineNumbers: true,
+    autofocus: false,
     indentUnit: 4,
+    lineNumbers: true,
+    lineWrapping: false,
     mode: 'htmlmixed',
     theme: 'xq-light',
-    autofocus: false,
 
     _editor: null, // reference to CodeMirror editor
 
@@ -74,7 +75,7 @@ const CmEditorComponent = Component.extend({
     }),
 
     _initCodeMirror() {
-        let options = this.getProperties('lineNumbers', 'indentUnit', 'mode', 'theme', 'autofocus');
+        let options = this.getProperties('lineNumbers', 'lineWrapping', 'indentUnit', 'mode', 'theme', 'autofocus');
         assign(options, {value: this.get('_value')});
 
         let textarea = this.element.querySelector('textarea');

ghost/admin/app/styles/components/koenig.css

@@ -307,6 +307,14 @@
     margin-right: 0;
 }
 
+.koenig-card-html--editor .CodeMirror pre {
+    white-space: pre;
+}
+
+.koenig-card-html--editor .CodeMirror-wrap pre {
+    white-space: pre-wrap;
+}
+
 /* Markdown */
 
 .koenig-editor .gh-markdown-editor {

ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-html.hbs

@@ -11,6 +11,7 @@
         {{gh-cm-editor payload.html
             class="koenig-card-html--editor"
             autofocus=true
+            lineWrapping=true
             update=(action "updateHtml")
         }}