From a0f33bad064c881c184fd27363a05a3684ec1e80 Mon Sep 17 00:00:00 2001 From: Kevin Ansfield Date: Wed, 18 Apr 2018 15:52:45 +0100 Subject: [PATCH] Move mobiledoc knowledge out of {{gh-markdown-editor}} no issue - pre-requisite for using `{{gh-markdown-editor}}` inside a Koenig card - switch to passing markdown into `{{gh-markdown-editor}}` - move markdown->mobiledoc logic into the `editor` controller --- .../app/components/gh-markdown-editor.js | 34 +++---------------- ghost/admin/app/controllers/editor.js | 18 ++++++++++ ghost/admin/app/models/post.js | 24 ++++++++++--- ghost/admin/app/templates/editor.hbs | 4 +-- 4 files changed, 43 insertions(+), 37 deletions(-) diff --git a/ghost/admin/app/components/gh-markdown-editor.js b/ghost/admin/app/components/gh-markdown-editor.js index f2d3dbc5f8..db06e7054f 100644 --- a/ghost/admin/app/components/gh-markdown-editor.js +++ b/ghost/admin/app/components/gh-markdown-editor.js @@ -4,27 +4,11 @@ import ctrlOrCmd from 'ghost-admin/utils/ctrl-or-cmd'; import formatMarkdown from 'ghost-admin/utils/format-markdown'; import {assign} from '@ember/polyfills'; import {computed} from '@ember/object'; -import {copy} from '@ember/object/internals'; import {htmlSafe} from '@ember/string'; import {isEmpty, typeOf} from '@ember/utils'; import {run} from '@ember/runloop'; import {inject as service} from '@ember/service'; -const MOBILEDOC_VERSION = '0.3.1'; - -export const BLANK_DOC = { - version: MOBILEDOC_VERSION, - markups: [], - atoms: [], - cards: [ - ['card-markdown', { - cardName: 'card-markdown', - markdown: '' - }] - ], - sections: [[10, 0]] -}; - export default Component.extend(ShortcutsMixin, { config: service(), @@ -41,7 +25,7 @@ export default Component.extend(ShortcutsMixin, { autofocus: false, imageMimeTypes: null, isFullScreen: false, - mobiledoc: null, + markdown: null, options: null, placeholder: '', showMarkdownHelp: false, @@ -49,9 +33,6 @@ export default Component.extend(ShortcutsMixin, { shortcuts: null, - // Internal attributes - markdown: null, - // Private _editor: null, _editorFocused: false, @@ -187,7 +168,6 @@ export default Component.extend(ShortcutsMixin, { // extract markdown content from single markdown card didReceiveAttrs() { this._super(...arguments); - let mobiledoc = this.get('mobiledoc') || copy(BLANK_DOC, true); let uploadedImageUrls = this.get('uploadedImageUrls'); if (!isEmpty(uploadedImageUrls) && uploadedImageUrls !== this._uploadedImageUrls) { @@ -200,14 +180,10 @@ export default Component.extend(ShortcutsMixin, { }); } - // eslint-disable-next-line ember-suave/prefer-destructuring - let markdown = mobiledoc.cards[0][1].markdown; - this.set('markdown', markdown); - // focus the editor when the markdown value changes, this is necessary // because both the autofocus and markdown values can change without a // re-render, eg. navigating from edit->new - if (this._editor && markdown !== this._editor.value() && this.get('autofocus')) { + if (this.get('autofocus') && this._editor && this.get('markdown') !== this._editor.value()) { this.send('focusEditor'); } @@ -255,11 +231,9 @@ export default Component.extend(ShortcutsMixin, { }, actions: { - // put the markdown into a new mobiledoc card, trigger external update + // trigger external update, any mobiledoc updates are handled there updateMarkdown(markdown) { - let mobiledoc = copy(BLANK_DOC, true); - mobiledoc.cards[0][1].markdown = markdown; - this.onChange(mobiledoc); + this.onChange(markdown); }, // store a reference to the simplemde editor so that we can handle diff --git a/ghost/admin/app/controllers/editor.js b/ghost/admin/app/controllers/editor.js index e712195e01..c41ff05a00 100644 --- a/ghost/admin/app/controllers/editor.js +++ b/ghost/admin/app/controllers/editor.js @@ -3,9 +3,11 @@ import Ember from 'ember'; import PostModel from 'ghost-admin/models/post'; import boundOneWay from 'ghost-admin/utils/bound-one-way'; import isNumber from 'ghost-admin/utils/isNumber'; +import {BLANK_MARKDOWN} from 'ghost-admin/models/post'; import {alias, mapBy, reads} from '@ember/object/computed'; import {computed} from '@ember/object'; import {inject as controller} from '@ember/controller'; +import {copy} from '@ember/object/internals'; import {htmlSafe} from '@ember/string'; import {isBlank} from '@ember/utils'; import {isArray as isEmberArray} from '@ember/array'; @@ -122,6 +124,14 @@ export default Controller.extend({ _tagNames: mapBy('post.tags', 'name'), + markdown: computed('post.mobiledoc', function () { + if (this.get('post').isCompatibleWithMarkdownEditor()) { + let mobiledoc = this.get('post.mobiledoc'); + let markdown = mobiledoc.cards[0][1].markdown; + return markdown; + } + }), + // computed.apply is a bit of an ugly hack, but necessary to watch all the // post's attributes and more without having to be explicit and remember // to update the watched props list every time we add a new post attr @@ -157,6 +167,14 @@ export default Controller.extend({ this.get('_timedSave').perform(); }, + // TODO: Only used by the markdown editor, ensure it's removed when + // we switch to Koenig + updateMarkdown(markdown) { + let mobiledoc = copy(BLANK_MARKDOWN, true); + mobiledoc.cards[0][1].markdown = markdown; + this.send('updateScratch', mobiledoc); + }, + updateTitleScratch(title) { this.set('post.titleScratch', title); }, diff --git a/ghost/admin/app/models/post.js b/ghost/admin/app/models/post.js index e8c8cac90c..d24ac4a2a9 100644 --- a/ghost/admin/app/models/post.js +++ b/ghost/admin/app/models/post.js @@ -4,19 +4,33 @@ import ValidationEngine from 'ghost-admin/mixins/validation-engine'; import attr from 'ember-data/attr'; import boundOneWay from 'ghost-admin/utils/bound-one-way'; import moment from 'moment'; -import {BLANK_DOC as BLANK_MARKDOWN} from 'ghost-admin/components/gh-markdown-editor'; import {BLANK_DOC as BLANK_MOBILEDOC} from 'koenig-editor/components/koenig-editor'; import {belongsTo, hasMany} from 'ember-data/relationships'; import {compare} from '@ember/utils'; -import {computed} from '@ember/object'; +import {computed, observer} from '@ember/object'; +import {copy} from '@ember/object/internals'; import {equal, filterBy} from '@ember/object/computed'; import {isBlank} from '@ember/utils'; -import {observer} from '@ember/object'; import {inject as service} from '@ember/service'; // ember-cli-shims doesn't export these so we must get them manually const {Comparable} = Ember; +// for our markdown-only editor we need to build a blank mobiledoc +const MOBILEDOC_VERSION = '0.3.1'; +export const BLANK_MARKDOWN = { + version: MOBILEDOC_VERSION, + markups: [], + atoms: [], + cards: [ + ['card-markdown', { + cardName: 'card-markdown', + markdown: '' + }] + ], + sections: [[10, 0]] +}; + function statusCompare(postA, postB) { let status1 = postA.get('status'); let status2 = postB.get('status'); @@ -129,9 +143,9 @@ export default Model.extend(Comparable, ValidationEngine, { let defaultValue; if (this.get('feature.koenigEditor')) { - defaultValue = BLANK_MOBILEDOC; + defaultValue = copy(BLANK_MOBILEDOC, true); } else { - defaultValue = BLANK_MARKDOWN; + defaultValue = copy(BLANK_MARKDOWN, true); } // using this.set() adds the property to the changedAttributes list diff --git a/ghost/admin/app/templates/editor.hbs b/ghost/admin/app/templates/editor.hbs index af29b785fe..c51e86053a 100644 --- a/ghost/admin/app/templates/editor.hbs +++ b/ghost/admin/app/templates/editor.hbs @@ -68,9 +68,9 @@ placeholder="Begin writing your story..." autofocus=shouldFocusEditor uploadedImageUrls=editor.uploadedImageUrls - mobiledoc=(readonly post.scratch) + markdown=(readonly markdown) isFullScreen=editor.isFullScreen - onChange=(action "updateScratch") + onChange=(action "updateMarkdown") onFullScreenToggle=(action editor.toggleFullScreen) onPreviewToggle=(action editor.togglePreview) onSplitScreenToggle=(action editor.toggleSplitScreen)