or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-udecode--plate-juice

HTML juice plugin for Plate that inlines CSS properties into style attributes

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@udecode/plate-juice@49.0.x

To install, run

npx @tessl/cli install tessl/npm-udecode--plate-juice@49.0.0

index.mddocs/

Plate Juice Plugin

Plate Juice Plugin provides HTML processing functionality for the Plate rich text editor framework. It integrates the juice library to automatically inline CSS properties into HTML style attributes during HTML parsing, making it ideal for contexts that don't support external stylesheets like email templates or embedded content.

Package Information

  • Package Name: @udecode/plate-juice
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @udecode/plate-juice

Core Imports

import { JuicePlugin } from "@udecode/plate-juice";

For CommonJS:

const { JuicePlugin } = require("@udecode/plate-juice");

Basic Usage

import { createPlateEditor } from "@udecode/plate";
import { JuicePlugin } from "@udecode/plate-juice";

// Create editor with juice plugin
const editor = createPlateEditor({
  plugins: [
    // ... other plugins
    JuicePlugin,
  ],
});

// The plugin automatically processes HTML content during parsing
// CSS in <style> tags gets inlined into style attributes

Architecture

The Plate Juice Plugin integrates with Plate's plugin architecture through these key components:

  • Plugin Integration: Uses createSlatePlugin to create a standard Plate plugin
  • HTML Parser Injection: Hooks into the HTML plugin's parser to process HTML content
  • CSS Inlining: Uses the juice library to convert CSS rules to inline styles
  • Edit-Only Mode: Only active during editing, not during rendering

Capabilities

JuicePlugin

Main plugin that provides CSS inlining functionality for HTML content in Plate editors.

/**
 * Plate plugin that inlines CSS properties into HTML style attributes
 * Uses the juice library to process HTML content during parsing
 * Created via createSlatePlugin with configuration for HTML parsing integration
 */
export const JuicePlugin: PlatePlugin<'juice'>;

The plugin configuration includes:

interface JuicePluginConfig {
  /** Plugin identifier key */
  key: 'juice';
  /** Only active in edit mode, not render mode */
  editOnly: true;
  /** Plugin injection configuration */
  inject: {
    plugins: {
      /** HTML plugin integration */
      [KEYS.html]: {
        parser: {
          /** HTML transformation function */
          transformData: ({ data }: { data: string }) => string;
        };
      };
    };
  };
}

HTML Transformation Process

The plugin processes HTML content through the following steps:

  1. Comment Cleanup: Removes <!-- markers that appear after <style> tags using the regex pattern /<style>\s*<!--/g (workaround for juice library limitation)
  2. CSS Inlining: Applies the juice() function to convert CSS rules in <style> tags to inline style attributes
  3. Content Return: Returns the processed HTML with inlined styles

Input Example:

<style>
  .highlight { background-color: yellow; }
</style>
<p class="highlight">This text will be highlighted</p>

Output Example:

<p class="highlight" style="background-color: yellow;">This text will be highlighted</p>

Plugin Integration

Dependencies

The plugin integrates with these Plate framework components:

/** Plate plugin creation utility from @udecode/plate */
function createSlatePlugin<K extends string>(
  config: PlatePluginConfig & { key: K }
): PlatePlugin<K>;

/** Plate plugin keys constants from @udecode/plate */
const KEYS: PlateKeys;

/** CSS inlining library from juice package */
function juice(html: string): string;

Usage in Plugin Array

import { createPlateEditor } from "@udecode/plate";
import { HtmlPlugin } from "@udecode/plate-html";
import { JuicePlugin } from "@udecode/plate-juice";

const editor = createPlateEditor({
  plugins: [
    // HTML plugin must be included for juice plugin to work
    HtmlPlugin,
    JuicePlugin,
    // ... other plugins
  ],
});

Error Handling

The plugin handles common CSS processing issues:

  • Comment markers: Automatically removes <!-- patterns that interfere with CSS parsing
  • Invalid CSS: Relies on the juice library's error handling for malformed CSS
  • Missing HTML plugin: Requires the HTML plugin to be present in the plugin array

Types

/** Main plugin export type */
type JuicePlugin = PlatePlugin<'juice'>;

/** HTML transformation function signature */
type TransformDataFunction = ({ data }: { data: string }) => string;

/** Plugin configuration structure */
interface PlatePluginConfig {
  key: string;
  editOnly?: boolean;
  inject?: {
    plugins?: Record<string, any>;
  };
}

/** Plate plugin base type */
interface PlatePlugin<K extends string = string> {
  key: K;
  editOnly?: boolean;
  inject?: {
    plugins?: Record<string, any>;
  };
}

/** Plate KEYS constants type */
interface PlateKeys {
  juice: 'juice';
  html: 'html';
  [key: string]: string | string[];
}