scribe-plugin-span-style

scribe-plugin-span-style

A Scribe Plugin for adding inline styles through <span> elements.

The description <span> is probably not accurate anymore. From 0.2.0 on, the plugin will now use any available tags it can find, that includes <b>,<i>,<strong>,<em>,<li>,etc. Only if it is not able to use one of those will it create a <span> to wrap the selection into.

Example:

import Scribe from 'scribe-editor';
import ScribeSpanStyleCommand from 'scribe-plugin-span-style';

// ...............

let scribe = new Scribe(document.querySelector('#my-editor'));
scribe.use(ScribeSpanStyleCommand('color'));
scribe.use(ScribeSpanStyleCommand('fontSize'));
scribe.use(ScribeSpanStyleCommand('fontFamily'));

// ...............

let command = scribe.getCommand('fontSize');
command.execute('24px');

// ...............

let command = scribe.getCommand('fontSize');
let originalRange = scribe.selection.range;

// Some more code that causes the selection to lose focus...

command.execute({
    value: '24px',
    range: originalRange
});

Requirements

• Scribe should always put <p> or <div> tags as the root nodes of your lines

Known Issues / Todo

• Heavily nested <span> nodes sometimes do not get unwrapped properly
• Untested performance on a lot of text ("logical" algorithm might be a bit slow for that)
• Untested in older browsers

Changelog

v0.2.0

• Complete code makeover
• Multi-line selections are supported mostly reliable now (even cross browser)
• Implemented "logical" algorithm to keep the nesting as clean as possible
• Supports the passing of an object as value now ({value: '12px', range: originalRange}) to support input elements that might cause losing the selection before execution of the command