Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
ember-mobiledoc-editor
Advanced tools
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}}
{{mobiledoc-editor}}
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:
{{mobiledoc-editor}}
Will render a blank Mobiledoc into the following DOM:
<article class="mobiledoc-editor">
<div class="mobiledoc-editor__editor-wrapper">
<div class="mobiledoc-editor__editor"></div>
</div>
</article>
The components 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.spellcheck
booleanautofocus
booleanplaceholder
string -- the placeholder text to display when the mobiledoc is blankoptions
hash -- any properties in the options
hash will be passed to the MobiledocKitEditor constructorserializeVersion
string -- The mobiledoc version to serialize to when firing the on-change action. Default: 0.3.0on-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's mobiledoc
property 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's mobiledoc
property 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);
}
}
});
{{! index.hbs }}
{{mobiledoc-editor
on-change=(action 'mobiledocWasUpdated')
will-create-editor=(action 'willCreateEditor')
did-create-editor=(action 'didCreateEditor')
}}
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.
{{#mobiledoc-editor mobiledoc=someDoc as |editor|}}
{{/mobiledoc-editor}}
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 example activeSectionTagNames.isH1
.activeMarkupTagNames
, an object with true values for markup tag names in
the current selection. For example activeMarkupTagNames.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.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 ofaddCardInEditMode
, passed a card name and payload will add that card at the end of
a post and render it in "edit" mode initially.createListSection
, changing selected content into list items.The editor
object is often used indirectly by passing it to other
components. For example:
{{#mobiledoc-editor as |editor|}}
<div class="toolbar">
{{mobiledoc-markup-button editor=editor for="strong"}}
{{mobiledoc-link-button editor=editor}}
</div>
{{/mobiledoc-editor}}
{{mobiledoc-section-button}}
Requires two properties:
for
, the name of the tageditor
, the editor
instance from mobiledoc-editor
Creates a <button>
element that has a class of active
when the provided
section tag is used in the current selection. For example:
{{mobiledoc-section-button editor=editor for="h2"}}
Alternatively, custom text for the HTML of the button can be yielded:
{{#mobiledoc-section-button editor=editor for="h2"}}
Headline 2
{{/mobiledoc-section-button}}
When clicked, the section tag name will be toggled.
{{mobiledoc-markup-button}}
Requires two properties:
for
, the name of the tageditor
, the editor
instance from mobiledoc-editor
Creates a <button>
element that has a class of active
when the provided
markup tag is used in the current selection. For example:
{{mobiledoc-markup-button editor=editor for="em"}}
Alternatively, custom text for the HTML of the button can be yielded:
{{#mobiledoc-markup-button editor=editor for="em"}}
Italicize
{{/mobiledoc-markup-button}}
When clicked, the markup tag name will be toggled.
{{mobiledoc-link-button}}
Requires one property:
editor
, the editor
instance from mobiledoc-editor
Creates a <button>
element that has a class of active
when the an a
tag is used in the current selection. For example:
{{mobiledoc-link-button editor=editor}}
Custom text for the HTML of the button can be yielded:
{{#mobiledoc-link-button editor=editor}}
Toggle Link
{{/mobiledoc-link-button}}
When clicked, the presence of a link will be toggled. The user will be prompted for a URL if required.
{{mobiledoc-toolbar}}
Requires one property:
editor
, the editor
instance from mobiledoc-editor
This component creates a full-featured toolbar for the Mobiledoc editor. For example:
{{#mobiledoc-editor as |editor|}}
{{mobiledoc-toolbar editor=editor}}
{{/mobiledoc-editor}}
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:
{{mobiledoc-editor cards=cards}}
When added to the post (or loaded from a passed-in Mobiledoc), these components will be used:
demo-card
component will be calleddemo-card-editor
component will be calledThe 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 the saveCard
action.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 extra false
argument 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)cardName
the name of this cardeditor
A reference to the mobiledoc-kitpostModel
A 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 the postEditor#moveSection
API that Mobiledoc editor provides)Releasing a new version:
package.json
and addon/version.js
npm run update-changelog
git commit -m "v<versionNumber>"
git tag v<versionNumber>
git push origin --tags
npm publish
To get started:
git clone
this repositorynpm install
bower install
Run the development server:
ember server
Run tests:
ember test
ember test --server
Build to dist/
:
ember build
For more information on using ember-cli, visit http://www.ember-cli.com/.
FAQs
A Mobiledoc editor for Ember.js apps
We found that ember-mobiledoc-editor demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.