This package has been deprecated

    Author message:

    Package no longer supported. Use github.com/abcum/ascua instead.

    @abcum/ember-editables

    1.0.2 • Public • Published

    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.

    Development

    • make install (install bower and ember-cli dependencies)
    • make upgrade (upgrade ember-cli to the specified version)
    • make tests (run all tests defined in the package)

    Keywords

    Install

    npm i @abcum/ember-editables

    DownloadsWeekly Downloads

    35

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    18.6 kB

    Total Files

    18

    Last publish

    Collaborators

    • tobiemh