@launchnotes/editor-extensions NPM

Editor Extensisons

This package exists to serve as a source of truth for our TipTap extensions between the frontend spa and cotent api. It is not a standalone and is instead just a module to house our extensions for the editor. In some cases, the frontend directory will extend extensions here for additional editing and UI menu capabilities, but the core parsing/rendering and naming will exist here.

Before beginning work on a new extensions, read through https://tiptap.dev/guide/custom-extensions

In general, our extensions will either be extensions of existing standard TipTap extensions or through the creation of enitrely new extensions via the base Node extension. In general we should only reach for a custom extension if there is a need that a standard extension does not satisfy. Many of the standard extenisions have configuration options that may solve your issue, so please be sure that the functionality you are seeking does not already exist.

What goes in here?

The extensions in this file should comprise the functionality that needs to be shared between the content service and our frontend SPA. Generally that means, at minimum, the name, parseHTML, and renderHTML functions will need to be defined in the extensions here. What does not need to be defined here are functions for uploading content, bubble menu UI's for editing text or media, or any other functionality that is beyond the scope of presenting the content. Editing specific functionality can live inside the SPA.

To publish

The steps are pretty straightforward. yarn tsc && yarn publish If you are removing or renaming an entire extension it needs to be a major version bump. Otherwise minor is fine. Removing or renaming extensions will break existing pieces of content in the app and should be treated with caution.

TODO: Use the private npm directory from gitlab. https://docs.gitlab.com/ee/user/packages/npm_registry/

Adding a new extension

Create folder in src/extensions
Add a node.ts or mark.ts file depending on what you are building.
Add your extension to LaunchNotesEditorExtensionsBase in index.ts
Run the publish commands.
Bump the package version in content and frontend.

Local Development

To avoid publishing many updates to the package, you can simply copy the extension to the frontend or content directory and reference it there to build new functionality. Once complete, you can publish an update to the package.
Tests for these extensions are covered by the content tests and frontend integration tests. To test changes to extensions rely on testing in those directories.