medium-editor-auto-style-extension

AutoStyleExtension for Medium Editor

Version 2.0.0 is not backwards compatible.

AutoStyleExtension for Medium Editor allows auto-styling of words. The auto-styling is defined by a configuration object, which gets passed to the constructur.

In detail:

• Words and the CSS style to be applied to these words.
• Words and the CSS class to be applied to these words.
• Whether case matching is to be performed.
• Whether words only are matched, or substrings, too.

Try out the live example.

Installation

npm install medium-editor
npm install medium-editor-auto-style-extension

Usage (via NPM)

index.js

MediumEditor = require('medium-editor');
AutoStyleExtension = require('medium-editor-auto-style-extension');

Usage (via Header)

index.html

<script type="text/javascript" src="<path>/medium-editor.js"></script>
<script type="text/javascript" src="<path>/auto-style.js"></script>

<style type="text/css">
    .combine-class-one {
        border: 2px dotted green;
    }
    .combine-class-two {
        background-color:gold;
    }
</style>

<div class="editable">CömbineStyleAndClass, CombineStyles, CombineClasses, gräy gräyx, oraNGE oraNGEX, ÖÖÖ</div>

<script type="text/javascript">
var editor = new MediumEditor('.editable', {
    extensions: {
        'auto-highlight': new AutoStyleExtension({

            config: {
                sectionA: {
                    matchcase: false,
                    wordsonly: false,
                    class: 'combine-class-one',
                    style: 'color:red;',
                    words: ['CömbineStyleAndClass']
                },
                sectionB: {
                    matchcase: false,
                    wordsonly: false,
                    style: 'background-color:#aaa;',
                    words: ['gräy']
                },
                sectionC: {
                    matchcase: true,
                    wordsonly: true,
                    style: 'background-color:orange;',
                    words: ['oraNGE']
                },
                sectionD: {
                    matchcase: true,
                    wordsonly: true,
                    class: 'combine-class-one',
                    words: ['CombineClasses']
                },
                sectionE: {
                    matchcase: true,
                    wordsonly: true,
                    class: 'combine-class-two',
                    words: ['CombineClasses']
                },
                sectionF: {
                    matchcase: true,
                    wordsonly: true,
                    style: 'border: 2px dotted green;',
                    words: ['CombineStyles']
                },
                sectionG: {
                    matchcase: true,
                    wordsonly: true,
                    style: 'background-color:gold;',
                    words: ['CombineStyles']
                },
                sectionH: {
                    matchcase: false,
                    wordsonly: false,
                    style: 'background-color:silver;',
                    words: ['ÖÖÖ']
                }
            }

        })
    }
});
</script>

Configuration at Runtime

Additional methods allow manipulation of sections during runtime

getConfig: function() {
  ...
},
setConfig: function(config) {
 ...
},
removeConfigSection: function(sectionName) {
  ...
},
setConfigSection: function(sectionName, sectionObject) {
  ...
},

// Applies all config styles to the text.
// Useful for triggering via external code.
applyStyles: function() {
  ...
}

Configuration at Runtime: Example

Changing the configuration does not cause re-evaluation of the content implicitly. Call the function applyStyles() manually to re-evaluate the style of the content.

var extension = editor.getExtensionByName('auto-style');

extension.setConfigSection('your-section-name', {
    matchcase: false,
    wordsonly: true,
    //class: 'a-class',
    style: 'color:red;',
    words: ['some','red','words']
});

extension.applyStyles();

Changelog

2.0.0

• Call extension.applyStyles() to apply configuration modification made during runtime
• Tried to fix some weired unicode behavious during word matching.

1.1.0

• Allows for CSS- and Class-combination of words present in more than one section.

1.0.0

• Reworked configuration structure
• Added unicode support
• Added configuration modification during runtime

Contributers

This implementation is based on the inbuild AutoLink plugin of Medium Editor.

License

MIT