lkmill / spytext

An HTML5 editor using contentEditable.

Spytext - The Tiny HTML5 Editor

Spytext is an HTML5 editor, not a Rich Text Editor, weighing in at 8.6 kb.

Spytext is built contentEditable, but most browsers handle handling line breaks, new sections, backspaces, deletes, formatting etc very differently. As a result, Spytext uses it's own DOM manipulating commands (through dollr), selection management (through selektr) and DOM undo/redo (through snapback). The only parts contentEditable still handles are actual type inputs and text traversal (arrow buttons, page up, etc).

Despite all this, the entire library (including ALL dependencies) is tiny.

Demo

There is a Plunker demo at: https://embed.plnkr.co/sJNI4kVqX7VEgA0mY2UJ/

Usage

NPM

$ npm install spytext

import Spytext from 'spytext'

const spytext = new Spytext({ el: document.getElementById('#spytext-field') })

spytext.deactivate()

spytext.activate()

CDN (UMD build)

<div id='spytext-field'></div>

<script src='https://unpkg.com/[email protected]/dist/spytext.min.js'></script>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const spytext = new Spytext({ el: document.getElementById('#spytext-field') })
}, false)
</script>

Functionality

• Styling text with italic, bold, underline or strike-trough
• Change between P, H1, H2, H3, H4, H5 and H6 blocks for text
• Align/justify text blocks
• Create ordered and unordered lists
• Indent/outdent these lists and
• Selection management
• Undo/redo (including remembering selections positions)

Spytext is Tiny

	Minified	Compressed
Spytext (UMD build, all deps)	29 kb	8.6 kb

Compatibility

	Quirky	Without Undo	Full
Chrome	9	16	18
IE	N/A	9	N/A
Firefox	1	3.6	14
Safari	Unknown	Unknown	6
Opera	Unknown	Unknown	15

spytext's Issues

Non breaking active styles error

Only outputs error in console, does not break any functionality.

caught TypeError: Cannot read property 'formats' of undefined
format.active @ commands.js:507(anonymous function)
@ toolbar.js:60m.extend.each
@ jquery.js:384m.fn.m.each
@ jquery.js:136module.exports.require.extend.setActiveStyles
@ toolbar.js:52(anonymous function)
@ events.js:187

CMD + V paste does not work in OS X

Key shortcut does not seem to work in OS X, but drop down menu > paste works.

Join two adjacent lists on delete

Snapback undo/redo does not call change event

Calling (native) undo when spytext field is not selected will undo input in said field, confusing the snapback undo stack.

Spytext implements its own undo library, snapback. When the spytext field is not selected and the user uses Ctrl+Z to call the browsers native undo, the browser will try undo any inputs it has registered in spytext.

Calling newSection in section with BR's produces weird results.

Especially if there are trailing BR's.

Deleting from empty section, then calling block command gets undefined rng.

This does not seem to break anything, including the undo/redo. However, the selection gets unset (user needs to click in spytext field again to continue working).

Uncaught TypeError: Cannot read property 'commonAncestorContainer' of null
module.exports.updateContained @ selectron.js:558
module.exports.update @ selectron.js:499
module.exports.restore @ selectron.js:453
block @ commands.js:122
module.exports.require.extend.command @ field.js:132
module.exports.require.extend.listCommand @ toolbar.js:90
m.event.dispatch @ jquery.js:4670
r.handle @ jquery.js:4338
selectron.js:282

Formatting algorithm is far from optimal.

When adding formatting it has a tendency of creating to many formatting (eg. <strong>) elements. When removing formatting of a perticular type it sometimes removes other types of formatting.

Selecting all text in a list item and deleting or typing produces weird results

Reproduce:

1. Select some text in a list item (double click or drag)
2. Type