AutoStyleExtension for Medium Editor

AutoStyleExtension for Medium Editor allows auto-styling of words.

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

Playground

Play around with the words CömbineStyleAndClass, CombineStyles, CombineClasses, gräy gräyx, oraNGE oraNGEX, .

(If deleting the content, make sure that the placeholder "Type your text" appears.
The editor seems sometimes to remember the last HTML-color settings. Will look into it.)

Configuration

.combine-class-one {
    border: 2px dotted green;
}
.combine-class-two {
    background-color:gold;
}
    

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: ['ÖÖÖ']
    }
}