prosemirror-editor
This project is intended to provide a re-usable ProseMirror editor for use across our tools. Up front, it aims to replace Scribe-based rich text editors with a React-based prosemirror editor in:
It is also designed to meet the features required by the rich text editor in media-atom-maker.
It aims to provide:
- A
RichTextEditor
serialising to one-to-many<p>
tags containing the markup below - supporting only the requirements of the above editors, at least until we have further use cases. Specifically, from the first three editors:- bold (strong) markup
- italic (em) markup
- links
- unlinking
- strikethrough
- superscript and subscript
-
media-atom-maker
adds some more requirements:- bullet-list
- a 'flat' text editor used for trail text, serialising text as a single paragraph with
tags providing line breaks. - an editor that can be 'copied into' from another editor, e.g. duplicating standfirst to trail text in
media-atom-maker
- A means of specifying a subset of the supported features per editor instance, via the
config
exports - A
transformToLegacyMarkup
method, for transforming the serialised html output by the library. Some of our tools expect<b>
and<i>
tags instead of the semantically preferred<em>
and<strong>
tags. Rather than serialised as<b>
and<i>
internally, within ProseMirror, we provide a transformer to replace<strong>
and<em>
to<b>
and<i>
after the editor updates text.
The interface of RichTextEditor
currently expects:
{
value: string; // Serialised html to initialise the editor with, i.e. a previous saved value for a rich text field
onUpdate: (str: string) => void; // A function to call with updated text on update
config: EditorConfig; // The config for the editor, specifying supported markup, and whether the editor is multi-paragraph or 'flat'
label?: string; // A label for the editor
shouldAcceptCopiedText: boolean; // Whether the editor should programmatic text replacmement from another rich text field
}
Things this repo doesn't have, that we will want to add in future PRs:
- A means of testing changes from this package itself, for example a demo-app that includes the React editor component. Currently this package only builds a component to be used by other packages.
Currently, vanilla css styles are included in the built dist and need to be imported in the target package.
How to run
- Publish this package locally using yarn yalc from the root of the project
- Import into another project using
yalc
Deploying
This package is deployed to npm when branches are deployed to main
, provided the branch name conforms to conventional commits.
Most importantly, a PR name starting with:
-
feat!:
with a commit message startingBREAKING CHANGE:
will trigger a major version -
feat:
will release a major version -
fix:
will release a patch version
Deployment is managed by a GitHub Action defined in .github/workflows