@vector-im/matrix-wysiwyg v2.38.1

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

If your environment supports the experimental ES Module Integration Proposal for WebAssembly, you can instead use that, by setting the matrix-org:wasm-esm custom export condition. This is only supported when the library is imported as an ES Module. For example:

• In Webpack, set experiments.asyncWebAssembly to true and resolve.conditionNames to ["matrix-org:wasm-esm", "..."] (the "..." preserves default condition names).

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.