@matrix-org/matrix-wysiwyg

React Matrix Rich Text Editor

The Matrix Rich Text Editor is a React library.

TODO NPM / Usage documentation

The wysiwyg composer API is a react hook.

const { ref, isWysiwygReady, wysiwyg } = useWysiwyg();

return (
    <div>
        <button type="button" onClick={wysiwyg.bold}>
            bold
        </button>
        <div ref={ref} contentEditable={isWysiwygReady} />
    </div>
);

Contribute

Install

Generate WASM bindings

The composer uses a cross-platform rust library. In order to work as intended, the WASM bindings must be generated according to the Matrix Rich Text Editor README.md

Yarn install

Requirements:

• node >= 8.X
• yarn 1.X

yarn install

Dev

Folder structure

• Inside the lib folder, the wysiwyg composer library files are located with useWysiwyg as en entrypoint
• Inside the src folder, the demo page of the composer is located.

Dev mode

Launch:

yarn dev

A dev server with hot reload is launched on http://localhost:5173/ by default.

For more information, see Vite for more information.

Build

Vite is the Wysiwyg Composer builder.

To build:

yarn build

The builded files are located in the dist folder

Testing

The tests are powered by Vitest.

To run them, different options are available:

• Classic run

yarn test

• Watch mode

yarn test:watch

• Code coverage

yarn coverage

The coverage report is located in the coverage folder.