Skip to content
This repository has been archived by the owner on Nov 28, 2022. It is now read-only.

Commit

Permalink
Move mobiledoc knowledge out of {{gh-markdown-editor}}
Browse files Browse the repository at this point in the history
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
  • Loading branch information
kevinansfield committed Apr 20, 2018
1 parent 92d1454 commit f6ec2f2
Show file tree
Hide file tree
Showing 4 changed files with 43 additions and 37 deletions.
34 changes: 4 additions & 30 deletions app/components/gh-markdown-editor.js
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand All @@ -41,17 +25,14 @@ export default Component.extend(ShortcutsMixin, {
autofocus: false,
imageMimeTypes: null,
isFullScreen: false,
mobiledoc: null,
markdown: null,
options: null,
placeholder: '',
showMarkdownHelp: false,
uploadedImageUrls: null,

shortcuts: null,

// Internal attributes
markdown: null,

// Private
_editor: null,
_editorFocused: false,
Expand Down Expand Up @@ -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) {
Expand All @@ -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');
}

Expand Down Expand Up @@ -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
Expand Down
18 changes: 18 additions & 0 deletions app/controllers/editor.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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);
},
Expand Down
24 changes: 19 additions & 5 deletions app/models/post.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions app/templates/editor.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down

0 comments on commit f6ec2f2

Please sign in to comment.