@planningcenter/core-email-editors

Shared React components for rendering email editor form fields across Planning Center products.

Background

People, Groups, and Registrations each maintain their own email_form component directories for building and editing email content. This package centralizes those components as TypeScript so they can be shared and maintained in one place.

Usage

Install the package in your product and import the components you need from @planningcenter/core-email-editors. You'll also need to import this package's stylesheet once, plus @planningcenter/sweetest-alert's stylesheet (a peer dependency used by Editor.ImageButton's error dialog):

import "@planningcenter/core-email-editors/style.css"
import "@planningcenter/sweetest-alert/style.css"

This package also expects trix and @planningcenter/sweetest-alert to be installed directly by the consuming product (both are peer dependencies), since Trix registers global custom elements and shouldn't be duplicated across bundles.

Local Development

This package uses yalc to test local changes against a consuming product before publishing a release.

1. Install yalc globally:

   yarn global add yalc

2. From this package's root, watch for changes and publish them to the local yalc registry:

   yarn dev

3. From the consuming product, pull in the local version:

   yalc add @planningcenter/core-email-editors && yarn install

4. If the consuming product's Vite dev setup uses autoBuild (e.g. People's config/vite.json), it decides whether to rebuild based on a digest of its own watched source paths and lockfiles — a yalc publish only touches files inside node_modules, which isn't watched, so the app can keep silently serving a stale bundle after you publish a new local version. Force a rebuild after each publish, e.g. in People:

   devbox run -- bin/vite build --mode development --force

   Plain bin/vite build isn't enough on its own either — without --mode development it builds the production output (public/assets/vite) instead of the dev one (public/vite-dev) that the dev server actually serves.

Testing

yarn test

yarn test:watch

Storybook

yarn storybook