@abcum/ember-editables NPM

ember-editables

A collection of inline editable text components for Ember.js for text, html, and code.

Usage

Installation

ember install @abcum/ember-editables

Usage examples

editable-text

The editable-text component enables inline editing of a contenteditable div, while removing all additional html markup (e.g. bold, italics).

{{editable-text value=model.name on-change=(action (mut model.name)) placeholder="Enter your fullname..."}}

To display placeholder text inside the editable-text component add the following code to your css, less, or sass files.

[contentEditable="true"][placeholder]:empty:not(:focus):before {
    color:#B6B6B6; /* Specify your placeholder colour */
}

editable-html

The editable-html component enables inline editing of a contenteditable div, while keeping any additional html markup (e.g. bold, italics).

{{editable-html value=model.name on-change=(action (mut model.name)) placeholder="Enter your fullname..."}}

To display placeholder text inside the editable-html component add the following code to your css, less, or sass files.

[contentEditable="true"][placeholder]:empty:not(:focus):before {
    color:#B6B6B6; /* Specify your placeholder colour */
}

editable-code

The editable-code component provides an editable code area powered by Codemirror.

{{editable-code value=model.code on-change=(action (mut model.code))}}

Install options

The plugins, themes, and language modes that will be bundled with the application source code can be configured from the application environment file,

// config/environment.js
module.exports = function(environment) {
    return {
        editables: {
            codemirror: true,
            includeTags: true,
            includeComments: true,
            includeBrackets: true,
            includeWhitespace: true,
            modes: [ "htmlmixed", "css",  "sass",  "javascript",  "markdown",  "handlebars" ],
            themes: [ "base16-dark", "base16-light", "bespin", "dracula", "eclipse" ],
        },
    }
};

Editor options

Additional configuration options can be passed to the editable-code instance allowing for further customisation of the editor.

Attribute	Default	Description
`autoCloseBrackets`	`true`	Whether to automatically close brackets and quotes when typed.
`autofocus`	`false`	Can be used to make CodeMirror focus itself on initialization
`commentBlankLines`	`false`	Whether to also comment empty lines when adding line comments.
`cursorBlinkRate`	`530`	Half-period in milliseconds used for cursor blinking.
`electricChars`	`true`	Whether the editor should re-indent when characters are changed.
`firstLineNumber`	`1`	At which number to start counting lines.
`historyEventDelay`	`1250`	How many milliseconds of inactivity until a new history event is started.
`indentUnit`	`4`	How many spaces a block should be indented.
`indentWithTabs`	`false`	Whether tabs or spaces should be used to indent.
`lineNumbers`	`true`	Whether to show line numbers to the left of the editor.
`lineWrapping`	`false`	Whether CodeMirror should scroll or wrap for long lines.
`matchBrackets`	`true`	Whether to highlight matching brackets when the cursor is next to them.
`mode`	`"htmlmixed"`	The language mode to use in the editor.
`readOnly`	`false`	This disables editing of the editor content by the user.
`smartIndent`	`true`	Whether to use the context-sensitive indentation that the mode provides.
`tabSize`	`4`	The width of a tab character.
`theme`	`"default"`	The name of the the css theme to use with the editor.
`undoDepth`	`200`	The maximum number of content or selection changes that are stored.
`viewportMargin`	`10`	How many lines are rendered above and below the visible lines.