coralproject/rte

A Lightweight Rich Text Editor based on React

Coral RTE

Coral RTE is a lightweight and extensible Rich Text Editor based on React and Squire.

Demo

Installation

npm install @coralproject/rte --save-dev

Usage

import { CoralRTE, Bold, Italic, Blockquote } from "@coralproject/rte";
import createDOMPurify from "dompurify";

// See https://github.com/cure53/DOMPurify
const DOMPurify = createDOMPurify(window);

const sanitizeToDOMFragment = (html) => {
  if (!html) {
    return document.createDocumentFragment();
  }
  return DOMPurify.sanitize(html, { RETURN_DOM_FRAGMENT: true });
};

<CoralRTE
  inputID="rte-field"
  className="coral-rte"
  contentClassName="coral-rte-content"
  placeholderClassName="coral-rte-placeholder"
  toolbarClassName="coral-rte-toolbar"
  onChange={(html) => setValue(html)}
  value={value}
  disabled={disabled}
  placeholder={"Enter some content"}
  features={[<Bold />, <Italic />, <Blockquote />]}
  toolbarPosition="bottom"
  sanitizeToDOMFragment={sanitizeToDOMFragment}
/>;

Development

npm run dev

Build

npm run build

Releasing

When you're ready to release a new vesrion of @coralproject/rte, you can do the following:

1. Run npm version --no-git-tag-version (major|minor|patch) to update the version number in package files.
2. Push the changes to a new branch, and submit a PR against main.
3. Once the changes have been approved, and all the code you want to deploy for the version is in main, create a release with the version number: v0.4.0 (Note that the v prefix is required)

CircleCI will run your tests and release the new version for you.

rte's Issues

A protocol-less url is linkified as a relative URL

We've run into some unexpected behaviors on Talk v6.9.1 but around the syncLinkHrefWithContent in this codebase.

Expected behavior:

When a user enters www.example.com and hits the space key, the text should be linkified as <a href="http://www.example.com">www.example.com</a>.

Actual behavior:

The text is linkified as <a href="www.example.com">www.example.com</a>. (relative link)

This doesn't happen in Squire, however syncLinkHrefWithContent doesn't seem to take into account the case when the text content doesn't have a protocol part.

Here's another somewhat related case.

Expected behavior:

When a user enters http://www.example.com and hits the space key, the text is linkified as <a href="http://www.example.com">www.example.com</a> which is good. Then they place a cursor after http:// and delete ://, the href should be updated with href="http://httpwww.example.com".

Actual behavior:

The href is updated with href="httpwww.example.com".

An expected behavior in this case may be controvertible, but generating a relative link doesn't seem to make sense.

Thank you.