diff --git a/lib/koenig-editor/addon/components/koenig-card-image.js b/lib/koenig-editor/addon/components/koenig-card-image.js new file mode 100644 index 000000000..ec7e85739 --- /dev/null +++ b/lib/koenig-editor/addon/components/koenig-card-image.js @@ -0,0 +1,7 @@ +import Component from '@ember/component'; +import layout from '../templates/components/koenig-card-image'; + +export default Component.extend({ + tagName: '', + layout +}); diff --git a/lib/koenig-editor/addon/options/cards.js b/lib/koenig-editor/addon/options/cards.js index b15c214ad..90c8ff0f0 100644 --- a/lib/koenig-editor/addon/options/cards.js +++ b/lib/koenig-editor/addon/options/cards.js @@ -1,5 +1,6 @@ import createComponentCard from '../utils/create-component-card'; export default [ - createComponentCard('koenig-card-hr') + createComponentCard('koenig-card-hr'), + createComponentCard('koenig-card-image') ]; diff --git a/lib/koenig-editor/addon/options/text-expansions.js b/lib/koenig-editor/addon/options/text-expansions.js index 36ffff0b4..987cada19 100644 --- a/lib/koenig-editor/addon/options/text-expansions.js +++ b/lib/koenig-editor/addon/options/text-expansions.js @@ -34,6 +34,7 @@ export default function (editor) { break; case ')': matchLink(postEditor, text); + matchImage(postEditor, text); break; case '~': matchStrikethrough(postEditor, text); @@ -173,6 +174,41 @@ export default function (editor) { } } + function matchImage(editor, text) { + let matches = text.match(/^!\[(.*?)\]\((.*?)\)$/); + if (matches) { + let {range: {head, head: {section}}} = editor; + let src = matches[2]; + let alt = matches[1]; + + // skip if cursor is not at end of section + if (!head.isTail()) { + return; + } + + // mobiledoc lists don't support cards + if (section.isListItem) { + return; + } + + editor.run((postEditor) => { + let card = postEditor.builder.createCardSection('koenig-card-image', {src, alt}); + // need to check the section before replacing else it will always + // add a trailing paragraph + let needsTrailingParagraph = !section.next; + + editor.range.extend(-(matches[0].length)); + postEditor.replaceSection(editor.range.headSection, card); + + if (needsTrailingParagraph) { + let newSection = editor.builder.createMarkupSection('p'); + postEditor.insertSectionAtEnd(newSection); + postEditor.setRange(newSection.tailPosition()); + } + }); + } + } + function matchStrikethrough(editor, text) { let {range} = editor; let matches = text.match(/~(.+?)~$/); diff --git a/lib/koenig-editor/addon/templates/components/koenig-card-image.hbs b/lib/koenig-editor/addon/templates/components/koenig-card-image.hbs new file mode 100644 index 000000000..3ae0f1f6c --- /dev/null +++ b/lib/koenig-editor/addon/templates/components/koenig-card-image.hbs @@ -0,0 +1 @@ +{{payload.alt}} diff --git a/lib/koenig-editor/app/components/koenig-card-image.js b/lib/koenig-editor/app/components/koenig-card-image.js new file mode 100644 index 000000000..646a4881e --- /dev/null +++ b/lib/koenig-editor/app/components/koenig-card-image.js @@ -0,0 +1 @@ +export {default} from 'koenig-editor/components/koenig-card-image'; diff --git a/tests/integration/components/koenig-card-image-test.js b/tests/integration/components/koenig-card-image-test.js new file mode 100644 index 000000000..257e16699 --- /dev/null +++ b/tests/integration/components/koenig-card-image-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-image', function () { + setupComponentTest('koenig-card-image', { + 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-image}} + // template content + // {{/koenig-card-image}} + // `); + + this.render(hbs`{{koenig-card-image}}`); + expect(this.$()).to.have.length(1); + }); +});