substance/forms

Web forms with Substance.

Substance.js

Substance is a JavaScript library for web-based content editing. It provides building blocks for realizing custom text editors and web-based publishing system. It is developed to power our online editing platform Substance.

Development

Install the dev dependencies.

npm install

Run the dev server.

npm start

Navigate to http://localhost:4001/test for the running the browser test suite. The test suite is rebuilt as you make changes to the source files.

To run the test-suite headless.

$ npm test

forms's Issues

Allow toolbar to be displayed at the top of the editable area

We have a need to place the toolbar at the top of the textarea rather than in a dynamic position close to the user's selection. I think this would be valuable to provide as an option to the div element to allow users to choose the location of the toolbar.

For example:

<div id="about" editable data-type="area" menu-position="[fixed|inline]">
    <p>Tell us <strong>something</strong> about <em>you</em></p>
</div>

Web Accessibility issues

The following are some basic web accessibility issues our UX team discovered with substance-forms.

• The toolbar does not have enough color contrast to support. Converting to a simple black and white color scheme would solve this issue
• Screen readers describe each of the toolbar icons as 'button'
• When text is highlighted there is no prompt to the screen reader that lets the user know that a toolbar appeared
• When the user clicks on the comment icon there is no audible indication that a comment area appeared

Allow users to select more than one line in editable area

You cannot currently select more than one line within the editable area. This can be confusing to an end user who wants to format a paragraph or select multiple lines when adding a comment.