From 521b9dbb997f37b3691b8be93a0c9442377b6047 Mon Sep 17 00:00:00 2001 From: Kevin Ansfield Date: Wed, 31 Jan 2018 08:32:27 +0000 Subject: [PATCH] Koenig - Textarea-only markdown card refs https://github.com/TryGhost/Ghost/issues/9311 - add `{{koenig-card-markdown}}` component that renders an auto expanding textarea with the markdown card value - add `{{card-markdown}}` that is an alias of `{{koenig-card-markdown}}` for backwards compatibility - all of our pre-1.0 alpha cards and our current markdown implementation do not have the `koenig-` prefix in their card names --- ghost/admin/app/styles/components/koenig.css | 7 ++++++ .../addon/components/card-markdown.js | 5 ++++ .../addon/components/koenig-card-markdown.js | 23 ++++++++++++++++++ .../lib/koenig-editor/addon/options/cards.js | 5 +++- .../components/koenig-card-markdown.hbs | 5 ++++ .../app/components/card-markdown.js | 1 + .../app/components/koenig-card-markdown.js | 1 + .../components/koenig-card-markdown-test.js | 24 +++++++++++++++++++ 8 files changed, 70 insertions(+), 1 deletion(-) create mode 100644 ghost/admin/lib/koenig-editor/addon/components/card-markdown.js create mode 100644 ghost/admin/lib/koenig-editor/addon/components/koenig-card-markdown.js create mode 100644 ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-markdown.hbs create mode 100644 ghost/admin/lib/koenig-editor/app/components/card-markdown.js create mode 100644 ghost/admin/lib/koenig-editor/app/components/koenig-card-markdown.js create mode 100644 ghost/admin/tests/integration/components/koenig-card-markdown-test.js diff --git a/ghost/admin/app/styles/components/koenig.css b/ghost/admin/app/styles/components/koenig.css index ba26c389bc..bb3c687dcb 100644 --- a/ghost/admin/app/styles/components/koenig.css +++ b/ghost/admin/app/styles/components/koenig.css @@ -204,6 +204,12 @@ /* Menu items --------------------------------------------------------------- */ +/* Cards -------------------------------------------------------------------- */ + +textarea.koenig-card-markdown { + max-width: 100%; +} + /* mobiledoc-kit base styles ------------------------------------------------ * NOTE: adapted from https://github.com/bustle/mobiledoc-kit/blob/master/src/css/mobiledoc-kit.css */ @@ -285,6 +291,7 @@ * Cards */ + /** * Tooltips */ diff --git a/ghost/admin/lib/koenig-editor/addon/components/card-markdown.js b/ghost/admin/lib/koenig-editor/addon/components/card-markdown.js new file mode 100644 index 0000000000..af3cb4dc11 --- /dev/null +++ b/ghost/admin/lib/koenig-editor/addon/components/card-markdown.js @@ -0,0 +1,5 @@ +import KoenigCardMarkdownComponent from './koenig-card-markdown'; + +export default KoenigCardMarkdownComponent.extend({ + // this is just an alias for backwards compatibility +}); diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-markdown.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-markdown.js new file mode 100644 index 0000000000..28289ca01a --- /dev/null +++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-markdown.js @@ -0,0 +1,23 @@ +import Component from '@ember/component'; +import layout from '../templates/components/koenig-card-markdown'; +import {set} from '@ember/object'; + +export default Component.extend({ + tagName: '', + layout, + + payload: null, + saveCard: null, + + actions: { + updateMarkdown(markdown) { + let payload = this.get('payload'); + let save = this.get('saveCard'); + + set(payload, 'markdown', markdown); + + // update the mobiledoc and stay in edit mode + save(payload, false); + } + } +}); diff --git a/ghost/admin/lib/koenig-editor/addon/options/cards.js b/ghost/admin/lib/koenig-editor/addon/options/cards.js index 90c8ff0f07..420b9f4946 100644 --- a/ghost/admin/lib/koenig-editor/addon/options/cards.js +++ b/ghost/admin/lib/koenig-editor/addon/options/cards.js @@ -2,5 +2,8 @@ import createComponentCard from '../utils/create-component-card'; export default [ createComponentCard('koenig-card-hr'), - createComponentCard('koenig-card-image') + createComponentCard('koenig-card-image'), + createComponentCard('koenig-card-markdown'), + // alias of koenig-card-markdown for backwards compat + createComponentCard('card-markdown') ]; diff --git a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-markdown.hbs b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-markdown.hbs new file mode 100644 index 0000000000..e38438857b --- /dev/null +++ b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-markdown.hbs @@ -0,0 +1,5 @@ +{{gh-textarea + class="koenig-card-markdown" + value=payload.markdown + update=(action "updateMarkdown") + autoExpand=".gh-koenig-editor"}} diff --git a/ghost/admin/lib/koenig-editor/app/components/card-markdown.js b/ghost/admin/lib/koenig-editor/app/components/card-markdown.js new file mode 100644 index 0000000000..7bddabd4dc --- /dev/null +++ b/ghost/admin/lib/koenig-editor/app/components/card-markdown.js @@ -0,0 +1 @@ +export {default} from 'koenig-editor/components/card-markdown'; diff --git a/ghost/admin/lib/koenig-editor/app/components/koenig-card-markdown.js b/ghost/admin/lib/koenig-editor/app/components/koenig-card-markdown.js new file mode 100644 index 0000000000..af177de9a8 --- /dev/null +++ b/ghost/admin/lib/koenig-editor/app/components/koenig-card-markdown.js @@ -0,0 +1 @@ +export {default} from 'koenig-editor/components/koenig-card-markdown'; diff --git a/ghost/admin/tests/integration/components/koenig-card-markdown-test.js b/ghost/admin/tests/integration/components/koenig-card-markdown-test.js new file mode 100644 index 0000000000..f8f290f827 --- /dev/null +++ b/ghost/admin/tests/integration/components/koenig-card-markdown-test.js @@ -0,0 +1,24 @@ +import hbs from 'htmlbars-inline-precompile'; +import {describe, it} from 'mocha'; +import {expect} from 'chai'; +import {setupComponentTest} from 'ember-mocha'; + +describe('Integration: Component: koenig-card-markdown', function () { + setupComponentTest('koenig-card-markdown', { + integration: true + }); + + it('renders', function () { + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.on('myAction', function(val) { ... }); + // Template block usage: + // this.render(hbs` + // {{#koenig-card-markdown}} + // template content + // {{/koenig-card-markdown}} + // `); + + this.render(hbs`{{koenig-card-markdown}}`); + expect(this.$()).to.have.length(1); + }); +});