Koenig Editor Engine

CSS

• Framework: Use Tailwind classes where possible.
• Scoping: All styles are scoped under the .koenig-lexical class to prevent collisions. PostCSS nesting is supported.
• Inclusion: Styles in src/styles/ are included in the final built module. Styles in demo/*.css are only for the demo and are excluded from the build.
• Packaging: Styles are bundled inside the JS file to allow for a single module import.

SVGs

• SVGs can be imported as React components (similar to create-react-app).
• Files are typically stored in src/assets/.
• All SVGs are optimized via SVGO during the build process.

Unlike the standard lexical-html package from Facebook, this renderer is designed for different constraints:

1. Output Target: It targets rendered web pages or emails rather than an interactive editor. This means node handling (especially DecoratorNodes) is optimized for static output.
2. Target-specific Output: The HTML structure varies based on the target option (e.g., using <table> for 'email').
3. Environment: It is primarily intended for server-side usage.

You can install the @tryghost/kg-default-cards package using npm or yarn to include the default Koenig cards in your project.

npm install @tryghost/kg-default-cards --save
# or
yarn add @tryghost/kg-default-cards

You can install the @tryghost/kg-utils package using npm or yarn.

npm install @tryghost/kg-utils --save
# or
yarn add @tryghost/kg-utils

You can install the @tryghost/kg-clean-basic-html package using npm or yarn.

npm install @tryghost/kg-clean-basic-html --save
# or
yarn add @tryghost/kg-clean-basic-html

Use standalone mode to run a demo version of the editor that does not depend on Ghost. This is useful for isolated development of editor features.

1. Run the development command.
2. Access the editor at http://localhost:5173.

The command renders the demo app located in demo/demo.jsx using the index.html file.

yarn dev

Install the @tryghost/kg-default-transforms package using npm or yarn to access the default Lexical Node transforms used across Koenig packages.

npm install @tryghost/kg-default-transforms --save
# or
yarn add @tryghost/kg-default-transforms

Since this is a monorepo managed with Lerna, you must follow the top-level repository instructions for full setup.

1. Clone the repository and navigate to the root.
2. Run yarn to install top-level dependencies.

To run the development environment, use: yarn dev

You can install the Koenig Card Factory package using npm or yarn.

npm install @tryghost/kg-card-factory --save
# or
yarn add @tryghost/kg-card-factory

This package is part of a monorepo managed with Lerna. To develop locally, you must first clone the top-level repository and run yarn to install all dependencies.

Once the environment is set up, you can use the following commands:

• yarn dev: Starts the development environment.
• yarn lint: Runs ESLint to check for code style and errors.
• yarn test: Runs both linting and the test suite.