Opengraphica-text-editor NPM

OpenGraphica Text Editor

This is the rich text editor used in the OpenGraphica graphic design program. It has been separated into its own repository because it may be useful for applications outside of OpenGraphica.

This text editor uses the HTML5 Canvas to render text for easy integration with graphics-centered programs. This library is NOT designed to be used in a content management application, as it has no support for linking, image insertion, and other basic web features.

The rich text source is defined in a similar syntax to BBCode, however there are slight modifications due to text rendering being more complex than HTML:

Syntax	Description
bbolded text/b	bolded text
iitalicized text/i	italicized text
uunderlined text/u	underlined text
sstrikethrough text/s	~~strikethrough text~~
leftleft align text/left	left align text
rightright align text/right	right align text
centercenter align text/center	center align text
style font="Arial"font name/style	specify font name
style size="30px"font size/style	30px font size
style fill-color=#FF00FFFFpurple text fill/style	text fill color with RGBA hex code
style fill-color="linear-gradient(0deg, #FF00FFFF 10%, #00FF00FF 80%)"purple to green gradient fill/style	text fill color with linear gradient
style stroke-color=#FF00FFFFpurple text stroke/style	text stroke color with RGBA hex code
style stroke-width="1px"stroke width/style	specifies width of text stroke
style shadow="0px 0px 10px 0px #000000FF outset"text shadow/style	shadow on text with props in order: h-offset, v-offset, blur, spread, color, inset/outset
style kerning="1px"text kerning/style	kerning between letters
style baseline="5px"text baseline/style	additional space at baseline of letters

ALPHA RELEASE

This software is still in alpha state. Features are actively being developed.

Text rendering
- LTR
- RTL
- Bolded
- Italicized
- Underlined
- Strikethrough
- Left align
- Right align
- Center align
- Justify align
- Vertical alignment options (for entire document)
  - Baseline (default)
  - Meanline
  - Top
  - Bottom
  - Middle
- Font name
- Font size
- Fill color
  - Solid
  - Linear gradient
  - Radial gradient
- Stroke color
  - Solid
  - Linear gradient
  - Radial gradient
- Stroke width
- Shadow
- Kerning
  - Interpret from font
  - Custom offsets
- Baseline offset
- Text Wrapping
  - Indent/Wrap based on custom shape
Text selection
- Expand selection
  - Left
  - Right
  - Up
  - Down
- Respect document bounds
- Double click select word
- Triple click select line
- Select all (ctrl + a)
Text navigation
- Arrow keys
  - Navigate one character at time
  - Shift - select
  - Ctrl - navigation one word at time
  - Scrolling
- Home/End keys - line start/end
- Mouse/touch
  - Mouse/touch down place cursor
  - Mouse/touch move to expand selection
  - Scrolling
    - While expanding selection
    - With click/touch of scroll bar
    - With mouse wheel
Text insertion
- Typing
  - Empty selection
  - Replace selection
- Pasting (ctrl + v)
- Drag and drop
Text deletion
- Backspace key
  - Empty selection - delete previous single character
  - Delete selection
- Delete key
  - Empty selection - delete next single character
  - Delete selection
- Cut (ctrl + x)
Text buffer
- Copy (ctrl + c)
Text style toolbar
- API to control order/display
- Bolded
- Italicized
- Underlined
- Strikethrough
- Horizontal alignment
- Vertical alignment
- Font name
  - Ability to specify available fonts
  - Load from Google fonts?
- Font size
- Fill color
  - Solid
  - Linear gradient
  - Radial gradient
- Stroke color
  - Solid
  - Linear gradient
  - Radial gradient
- Stroke width
- Shadow
- Kerning
- Baseline offset
Color selection widget
- API to substitute with custom widget
Gradient selection widget
- API to substitute with custom widget
Programming API
- Constructor
  - Set value
  - Specify selection text/background colors
  - Specify default styles
  - Padding
  - Readonly
- Set value after initialization
- Get value
  - As BBCode string
  - As HTML string (as compatible as possible)
- Scrolling
- Trigger events
  - Touchstart/mousedown
  - Touchmove/mousemove
  - Wheel
- Emit events
  - Input
  - Change
  - Focus
  - Blur
- Rendering to separate, remote canvas
- Enable/disable resize control
- Enable/disable auto resize
Accessibility
- Research necessary aria attributes
- Test with screen readers
Resize Controls
- Height resizing
- Width resizing
History
- Undo (Ctrl + Z)
- Redo (Ctrl + Y)

Usage

As a global library on the page:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="dist/opengraphica-text-editor.css">
        <script src="dist/opengraphica-text-editor.js"></script>
    </head>
    <body>
        <script>
            const editor = new OpenGraphicaTextEditor();
            document.body.appendChild(editor.domElement);
            editor.init();
        </script>
    </body>
</html>

As an NPM module, assuming you have Webpack and Babel set up:

import OpenGraphicaTextEditor from 'opengraphica-text-editor';
import 'opengraphica-text-editor/dist/opengraphica-text-editor.css';

const editor = new OpenGraphicaTextEditor();
document.body.appendChild(editor.domElement);
editor.init();

If you want to move the editor to a different place in the DOM, move editor.domElement manually then call init() again.

document.body.appendChild(editor.domElement);
editor.init();

When you're completely done with the editor, destroy it.

editor.destroy();

Configuration

The OpenGraphicaTextEditor constructor accepts a configuration object, defined as follows:

new OpenGraphicaTextEditor({

    // Horizontal padding when the editor is not read-only.
    paddingHorizontal: 10,

    // Vertical padding when the editor is not read-only.
    paddingVertical: 6,

    // Removes all editing styling and toolbars and displays
    // the text editor as if it were regular text in the document.
    readonly: false,

    // Size of the scrollbar in pixels.
    scrollbarSize: 12,

    // Color of the scrollbar thumb/handle (Hex code).
    scrollbarThumbColor: '#787C7D',

    // Color of the scrollbar thumb/handle when the mouse cursor is hovering over it.
    scrollbarThumbColorHover: '#535859',

    // Color of the scrollbar thumb/handle when the mouse cursor is dragging it.
    scrollbarThumbColorActive: '#1C79C4',

    // Amount of pixel spacing between the scrollbar thumb and track
    // A higher number means a smaller thumb.
    scrollbarThumbPadding: 2,

    // Style of the ends of the scrollbar thumb/handle, 'round' or 'square'.
    scrollbarThumbStyle: 'round',

    // Color of the scrollbar track/background (Hex code).
    scrollbarTrackColor: '#C3C4C4',

    // When selecting text with the mouse and dragging to the edge,
    // this is how many pixels close to the edge the mouse needs to be
    // in order to automatically scroll.
    scrollBoundSize: 15

    // How many pixels the editor will scroll per mouse wheel click.
    // This number can vary across browser, operating system, and device.
    scrollPixels: 16,

    // Background color for text selection (Hex code).
    selectionBackgroundColor: '#1C79C4',

    // Text color for text selection (Hex code).
    selectionTextColor: '#FFFFFF',

    // The initial text that shows inside the editor.
    // This uses the BBCode-like syntax defined above.
    value: 'Text value [b]with syntax defined above[/b].'

});