A Mobiledoc editor written using Ember.js UI components and Mobiledoc Kit.
Additionally, ember-mobiledoc-editor supports the creation of Mobiledoc cards as Ember components. This is a significant improvement for developer ergonomics over using Mobiledoc cards directly.
ember install ember-mobiledoc-editor
ember-mobiledoc-editor will install the mobiledoc-kit package as a
dependency and load its assets.
This addon is primarily composed of components used for building an editor UI.
{{mobiledoc-editor}}{{mobiledoc-section-button}}{{mobiledoc-markup-button}}{{mobiledoc-link-button}}{{mobiledoc-toolbar}}
This component is the main entrance point for a mobiledoc editor instance in your Ember app. Used in the most basic form it will render a dummy editor with no toolbar. For example this usage:
Will render a blank Mobiledoc into the following DOM:
The component accepts these arguments:
mobiledoc, a Mobiledoc to be editedcards, an array of available cards for use by the editor. Jump to the section on Component-based cards for more detail on how to use cards with Ember components.atoms, an array of available atoms for use by the editor. Jump to the section on Component-based atoms for more detail on how to use atoms with Ember components.spellcheckbooleanautofocusbooleanshowLinkTooltipsbooleanplaceholderstring -- the placeholder text to display when the mobiledoc is blankoptionshash -- any properties in theoptionshash will be passed to the MobiledocKitEditor constructorserializeVersionstring -- The mobiledoc version to serialize to when firing the on-change action. Default: 0.3.2sectionAttributesConfighash -- information about supported section attributes. defaults to{ 'text-align': { values: ['left', 'center', 'right'], defaultValue: 'left' } }on-change-- Accepts an action that the component will send every time the mobiledoc is updatedwill-create-editor-- Accepts an action that will be sent when the instance of the MobiledocKitEditor is about to be created This action may be fired more than once if the component'smobiledocproperty is set to a new value.did-create-editor-- Accepts an action that will be sent after the instance of the MobiledocKitEditor is created. The action is passed the created editor instance. This action may be fired more than once if the component'smobiledocproperty is set to a new value.
For example, the following index route and template would log before and after creating the MobiledocKitEditor, and every time the user modified the mobiledoc (by typing some text, e.g.).
// routes/index.js
export default Ember.Route.extend({
...,
actions: {
mobiledocWasUpdated(updatedMobiledoc) {
console.log('New mobiledoc:',updatedMobiledoc);
// note that this action will be fired for every changed character,
// so you may want to debounce API calls if you are using it for
// an "autosave" feature.
},
willCreateEditor() {
console.log('about to create the editor');
},
didCreateEditor(editor) {
console.log('created the editor:', editor);
}
}
});Of course often you want to provide a user interface to bold text, create headlines, or otherwise reflect the state of the editor.
Called with a block, the editor param is yielded.
editor has the following properties, useful to inspect the current
state of the editor:
editor, the Mobiledoc kit editor instance itselfactiveSectionTagNames, an object with true values for section tag names in the current selection. For exampleactiveSectionTagNames.isH1.activeMarkupTagNames, an object with true values for markup tag names in the current selection. For exampleactiveMarkupTagNames.isStrong
Additionally editor provides the following actions:
toggleMarkup, toggling the passed markup tag name in the current selection.toggleSection, toggling the passed section tag name in the current selection. Pass a string tagName as an argument. Possible valid values: "h1", "h2", "p", "blockquote". To toggle to-from a list section pass "ul" or "ol".toggleLink, toggling the linking of a selection. The user will be prompted for a URL if required.addCard, passed a card name and payload will add that card at the end of the post.addCardInEditMode, passed a card name and payload will add that card at the end of a post and render it in "edit" mode initially.addAtom, passed an atomName, text, and payload, will add that atom at the cursor position.setAttribute, passed an attribute name and attribute value, will add that attribute to the current section, or remove the attribute if the value is the default value.removeAttribute, passed an attribute name, will remove that attribute from the current section.
The editor object is often used indirectly by passing it to other
components. For example:
Requires two properties:
for, the name of the tageditor, theeditorinstance frommobiledoc-editor
And accepts one optional property:
title, added as thetitleattribute on thebuttonelement
Creates a <button> element that has a class of active when the provided
section tag is used in the current selection. For example:
Alternatively, custom text for the HTML of the button can be yielded:
When clicked, the section tag name will be toggled.
Requires two properties:
for, the name of the tageditor, theeditorinstance frommobiledoc-editor
And accepts one optional property:
title, added as thetitleattribute on thebuttonelement
Creates a <button> element that has a class of active when the provided
markup tag is used in the current selection. For example:
Alternatively, custom text for the HTML of the button can be yielded:
When clicked, the markup tag name will be toggled.
Requires one property:
editor, theeditorinstance frommobiledoc-editor
And accepts one optional property:
title, added as thetitleattribute on thebuttonelement
Creates a <button> element that has a class of active when the an a
tag is used in the current selection. For example:
Custom text for the HTML of the button can be yielded:
When clicked, the presence of a link will be toggled. The user will be prompted for a URL if required.
Requires two properties:
attributeName, the name of the attributeattributeValue, the value of the attributeeditor, theeditorinstance frommobiledoc-editor
And accepts one optional property:
title, added as thetitleattribute on thebuttonelement
Creates a <button> element that has a class of active when the provided
attributeValue is used in the current section. For example:
Alternatively, custom text for the HTML of the button can be yielded:
Requires one property:
editor, theeditorinstance frommobiledoc-editor
This component creates a full-featured toolbar for the Mobiledoc editor. For example:
Mobiledoc supports "cards", blocks of rich content that are embedded into a post. For more details on the API for authoring cards in vanilla JavaScript, see CARDS.md.
ember-mobiledoc-editor comes with a handle helper for using Ember
components as the display and edit modes of a card. Create a list of cards
using the createComponentCard helper:
import Ember from 'ember';
import createComponentCard from 'ember-mobiledoc-editor/utils/create-component-card';
export default Ember.Component.extend({
cards: Ember.computed(function() {
return [
createComponentCard('demo-card')
];
})
});And pass that list into the {{mobiledoc-editor}} component:
When added to the post (or loaded from a passed-in Mobiledoc), these components will be used:
- For display, the
demo-cardcomponent will be called - For edit, the
demo-card-editorcomponent will be called
The component will be provided with the following attrs:
payload, the payload for this card. Note the payload object is disconnected from the card's payload in the serialized mobiledoc. To update the mobiledoc payload, use thesaveCardaction.editCard, an action for toggling this card into edit mode (this action is a no-op if the card is already in edit mode)removeCard, an action for removing this card (see the "remove" Mobiledoc card action)saveCard, an action accepting new payload for the card, then saving that payload and toggling this card into display mode can optionally be passed an extrafalseargument to avoid toggling to display mode (see the "save Mobiledoc card action)cancelCard, an action toggling this card to display mode without saving (this action is a no-op if the card is already in display mode) (see the "cancel Mobiledoc card action)cardNamethe name of this cardeditorA reference to the mobiledoc-kitpostModelA reference to this card's model in the editor's abstract tree. This may be necessary to do programmatic editing (such as moving the card via thepostEditor#moveSectionAPI that Mobiledoc editor provides)
Mobiledoc supports "atoms", inline sections of rich content that are embedded into a line of text in your post. For more details on the API for authoring atoms in vanilla JavaScript, see ATOMS.md.
ember-mobiledoc-editor comes with a handle helper for using Ember
components as an atom. Create a list of atoms using the createComponentAtom helper:
import Ember from 'ember';
import createComponentAtom from 'ember-mobiledoc-editor/utils/create-component-atom';
export default Ember.Component.extend({
atoms: Ember.computed(function() {
return [
createComponentAtom('demo-atom')
];
})
});And pass that list into the {{mobiledoc-editor}} component:
Currently editor lifecycle hooks are available by available by extending the mobiledoc-editor component.
import Component from 'ember-mobiledoc-editor/components/mobiledoc-editor/component';
export default Component.extend({
cursorDidChange(editor) {
this._super(...arguments);
// custom event handling goes here
}
});The following lifecycle hooks are available:
willRenderdidRenderpostDidChangeinputModeDidChangecursorDidChange
ember-mobiledoc-editor exposes two test helpers for use in your acceptance tests:
insertText(editorElement, text)-- inserts text into the editor (at the end)run(editorElement, callback)-- equivalent toeditor.run, it calls the callback with thepostEditor
Example usage:
// acceptance test
import { insertText, run } from '../../helpers/ember-mobiledoc-editor';
import { find } from '@enber/test-helpers';
test('visit /', function(assert) {
visit('/');
andThen(() => {
let editorEl = find('.mobiledoc-editor__editor');
return insertText(editorEl, 'here is some text');
/* Or:
return run(editorEl, (postEditor) => ...);
*/
});
andThen(() => {
// assert text inserted, etc.
});
});Releasing a new version:
This README outlines the details of collaborating on this Ember addon.
git clone <repository-url>this repositorycd ember-mobiledoc-editoryarn install
Run the development server:
ember serve- Visit your app at http://localhost:4200.
yarn test(Runsember try:eachto test your addon against multiple Ember versions)ember testember test --server
ember build
For more information on using ember-cli, visit https://ember-cli.com/.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent