@guardian/prosemirror-editor
TypeScript icon, indicating that this package has built-in type declarations

0.2.0 • Public • Published

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:

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

Readme

Keywords

none

Package Sidebar

Install

npm i @guardian/prosemirror-editor

Weekly Downloads

4

Version

0.2.0

License

MIT

Unpacked Size

2.65 MB

Total Files

49

Last publish

Collaborators

  • joecowton1
  • guardian-developers
  • akash1810
  • reetta
  • sndrs
  • mxdvl