A “what-you-see-is-what-you-get” editor built on React & Slate.
A running demonstration can be found here.
The project can be built using webpack by running npm run build
which will assemble the distribution under the ./dist directory. This
directory can be cleaned by running npm run clean.
The webpack-dev-server is installed for development purposes and
can be run with the command npm run dev. This will start the development
server at http://localhost:8080 and open it in your browser, with
inline mode and hot module replacement enabled.
This project is available under the terms of the ISC license. See the
LICENSE file for the copyright information and licensing terms.
- Smart typography utilizes typographic ligatures where appropriate and provides intuitive shorthand replacements for common symbols and units.
- The floating rich editor menu allows for easy document edits to insert blocks and toggle formatting.
- A persistent document state is saved to the browser’s local storage, allowing document edits to continue across sessions. Once finished, the document may be serialized and downloaded as a semantic HTML5 file.
Straight quotes surrounding a piece of text (e.g. 'single' or "double") are substituted for their correct curly quotation marks.
| Before | After |
|---|---|
| "Hello world" | “Hello world” |
| 'Hello world' | ‘Hello world’ |
Hyphens that occur immediately after a numerical value are substituted for an endash. Hyphens delimited by spaces are substituted for an emdash, with the spaces being substituted for hair spaces.
| Before | After |
|---|---|
| In the range of 10-20. | In the range of 10–20. |
| Upon discovering the errors - all 124 of them - the publisher immediately recalled the books. | Upon discovering the errors — all 124 of them — the publisher immediately recalled the books. |
Straight quotes that occur immediately after a numerical value are substituted with primes.
| Before | After |
|---|---|
| He stood 6'1" tall. | He stood 6′1″ tall. |
Three consecutive periods are substituted for an ellipsis.
| Before | After |
|---|---|
| A long time ago in a galaxy far, far away... | A long time ago in a galaxy far, far away… |
When writing mathematical expressions the editor will substitute commonly used symbols for their correct replacements. This includes replacing asterisks with the multiplication symbol and consecutive forward slashes with the division symbol, as well as supporting fractions, roman numerals, and the numero symbol.
| Before | After |
|---|---|
| 5 * 5 // 5 = 5 | 5 × 5 ÷ 5 = 5 |
| 5 != 10 | 5 ≠ 10 |
| 5.1 ~~ 5 | 5.1 ≈ 5 |
| 1 // 1000 = 1%% | 1 ÷ 1000 = 1‰ |
| x >= y | x ≥ y |
| No.10 | №10 |
| 1 // 10 = 1/10 | 1 ÷ 10 = ⅒ |
| sqrt(4) = 2 | √4 = 2 |
| 360(deg) = 2(pi) rad | 360° = 2π rad |
The editor can automatically replace decimal number inputs with the equivalent in roman numerals.
| Before | After |
|---|---|
| roman(2016) | ⅯⅯⅩⅤⅠ |
| roman(22) | ⅩⅩⅡ |
| roman(87) | ⅬⅩⅩⅩⅦ |
| roman(808) | ⅮⅭⅭⅭⅧ |
Shorthands for currency characters are also available.
| Before | After |
|---|---|
| (euro) | € |
| (yen) | ¥ |
| (cent) | ¢ |
Various symbols can be inserted with common shorthands, such as (c) for the © symbol.
| Before | After |
|---|---|
| (c) | © |
| (r) | ® |
| (tm) | ™ |
| <-- | ← |
| ..> | ⇢ |
| <3 | ♡ |
| (check) | ✓ |
| (cross) | ✗ |
| (male) | ♂ |
| (female) | ♀ |
Symbol shorthands are also included for common symbols found on a keyboard.
| Before | After |
|---|---|
| (enter) | ↩ |
| (cmd) | ⌘ |
| (alt) | ⌥ |
| (tab) | ⇥ |
| (undo) | ↺ |
| (redo) | ↻ |