Koenig - Added SHIFT+ENTER line break key command

refs https://github.com/TryGhost/Ghost/issues/9311
- pressing <kbd>Shift+Enter</kbd> will create a `soft-return` atom that adds a `<br>` element to the doc
- emulates many rich-text editors that have a similar functionality where it's desirable to add line breaks rather than starting new paragraphs
This commit is contained in:
Kevin Ansfield 2018-01-30 10:58:28 +00:00
parent 3d341e2dd6
commit ded84cf60a
4 changed files with 42 additions and 8 deletions

View File

@ -6,7 +6,9 @@
import Component from '@ember/component';
import Editor from 'mobiledoc-kit/editor/editor';
import Ember from 'ember';
import defaultAtoms from '../options/atoms';
import layout from '../templates/components/koenig-editor';
import registerKeyCommands from '../options/key-commands';
import registerTextExpansions from '../options/text-expansions';
import {MOBILEDOC_VERSION} from 'mobiledoc-kit/renderers/mobiledoc';
import {assign} from '@ember/polyfills';
@ -79,11 +81,17 @@ export default Component.extend({
// merge in named options with the `options` property data-bag
editorOptions: computed(function () {
let options = this.get('options') || {};
let atoms = this.get('atoms') || [];
// add our default atoms, we want the defaults to be first so that they
// can be overridden by any passed-in atoms
atoms = Array.concat(defaultAtoms, atoms);
return assign({
placeholder: this.get('placeholder'),
spellcheck: this.get('spellcheck'),
autofocus: this.get('autofocus')
autofocus: this.get('autofocus'),
atoms
}, options);
}),
@ -136,6 +144,9 @@ export default Component.extend({
editor = new Editor(editorOptions);
// set up key commands and text expansions (MD conversion)
// TODO: this will override any passed in options, we should allow the
// default behaviour to be overridden by addon consumers
registerKeyCommands(editor);
registerTextExpansions(editor);
// set up editor hooks

View File

@ -0,0 +1,14 @@
// Atoms are effectively read-only inline cards
// Full docs: https://github.com/bustle/mobiledoc-kit/blob/master/ATOMS.md
export default [
// soft-return is triggered by SHIFT+ENTER and allows for line breaks
// without creating paragraphs
{
name: 'soft-return',
type: 'dom',
render() {
return document.createElement('br');
}
}
];

View File

@ -0,0 +1,16 @@
// Key commands will run any time a particular key or key combination is pressed
// https://github.com/bustlelabs/mobiledoc-kit#configuring-hot-keys
export default function (editor) {
let softReturnKeyCommand = {
str: 'SHIFT+ENTER',
run(editor) {
editor.run((postEditor) => {
let softReturn = postEditor.builder.createAtom('soft-return');
postEditor.insertMarkers(editor.range.head, [softReturn]);
});
}
};
editor.registerKeyCommand(softReturnKeyCommand);
}

View File

@ -3233,13 +3233,6 @@ ember-cli-string-helpers@1.0.0:
broccoli-funnel "^1.0.1"
ember-cli-babel "^5.1.7"
ember-cli-string-helpers@1.6.0:
version "1.6.0"
resolved "https://registry.yarnpkg.com/ember-cli-string-helpers/-/ember-cli-string-helpers-1.6.0.tgz#dd38cdf3cddaaf8bb62f58d83fcc4e8d47a2e89d"
dependencies:
broccoli-funnel "^1.0.1"
ember-cli-babel "^6.6.0"
"ember-cli-string-helpers@https://github.com/kevinansfield/ember-cli-string-helpers.git#9fda91b34a00e3365833527605b44399f36432d5":
version "1.6.0"
resolved "https://github.com/kevinansfield/ember-cli-string-helpers.git#9fda91b34a00e3365833527605b44399f36432d5"