@guardian/prosemirror-editor

prosemirror-editor

View package on npm.

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:

• tagmanager
• atom-workshop
• targeting

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 starting BREAKING 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