diff --git a/ghost/admin/app/styles/components/koenig.css b/ghost/admin/app/styles/components/koenig.css index e0ffc6f587..ba26c389bc 100644 --- a/ghost/admin/app/styles/components/koenig.css +++ b/ghost/admin/app/styles/components/koenig.css @@ -277,14 +277,14 @@ max-width: 100%; } +.__mobiledoc-editor hr { + margin: 0.5em 0; +} + /** * Cards */ -.__mobiledoc-card { - display: inline-block; -} - /** * Tooltips */ diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-hr.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-hr.js new file mode 100644 index 0000000000..3d1a926c1f --- /dev/null +++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-hr.js @@ -0,0 +1,7 @@ +import Component from '@ember/component'; +import layout from '../templates/components/koenig-card-hr'; + +export default Component.extend({ + tagName: '', + layout +}); diff --git a/ghost/admin/lib/koenig-editor/addon/options/cards.js b/ghost/admin/lib/koenig-editor/addon/options/cards.js index 2004d5b379..b15c214ad7 100644 --- a/ghost/admin/lib/koenig-editor/addon/options/cards.js +++ b/ghost/admin/lib/koenig-editor/addon/options/cards.js @@ -1,4 +1,5 @@ import createComponentCard from '../utils/create-component-card'; export default [ + createComponentCard('koenig-card-hr') ]; diff --git a/ghost/admin/lib/koenig-editor/addon/options/text-expansions.js b/ghost/admin/lib/koenig-editor/addon/options/text-expansions.js index 4849bdc292..36ffff0b46 100644 --- a/ghost/admin/lib/koenig-editor/addon/options/text-expansions.js +++ b/ghost/admin/lib/koenig-editor/addon/options/text-expansions.js @@ -64,6 +64,38 @@ export default function (editor) { } }); + editor.onTextInput({ + name: 'md_hr', + match: /^---$/, + run(editor) { + let {range: {head, head: {section}}} = editor; + + // Skip if cursor is not at end of section + if (!head.isTail()) { + return; + } + + // Skip if section is a list item + if (section.isListItem) { + return; + } + + editor.run((postEditor) => { + let card = postEditor.builder.createCardSection('koenig-card-hr'); + let needsTrailingParagraph = !section.next; + + postEditor.replaceSection(section, card); + + // add an empty paragraph after if necessary so writing can continue + if (needsTrailingParagraph) { + let newSection = postEditor.builder.createMarkupSection('p'); + postEditor.insertSectionAtEnd(newSection); + postEditor.setRange(newSection.tailPosition()); + } + }); + } + }); + /* inline markdown ------------------------------------------------------ */ function matchStrongStar(editor, text) { diff --git a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-hr.hbs b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-hr.hbs new file mode 100644 index 0000000000..e123ba7e3e --- /dev/null +++ b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-hr.hbs @@ -0,0 +1 @@ +
diff --git a/ghost/admin/lib/koenig-editor/app/components/koenig-card-hr.js b/ghost/admin/lib/koenig-editor/app/components/koenig-card-hr.js new file mode 100644 index 0000000000..697d605e5a --- /dev/null +++ b/ghost/admin/lib/koenig-editor/app/components/koenig-card-hr.js @@ -0,0 +1 @@ +export {default} from 'koenig-editor/components/koenig-card-hr';