align-kit

PreviousNext
Docs
platecomponent

Preview

Loading preview…
registry/components/editor/plugins/align-kit.tsx
'use client';

import { TextAlignPlugin } from '@platejs/basic-styles/react';
import { KEYS } from 'platejs';

export const AlignKit = [
  TextAlignPlugin.configure({
    inject: {
      nodeProps: {
        defaultNodeValue: 'start',
        nodeKey: 'align',
        styleKey: 'textAlign',
        validNodeValues: ['start', 'left', 'center', 'right', 'end', 'justify'],
      },
      targetPlugins: [...KEYS.heading, KEYS.p, KEYS.img, KEYS.mediaEmbed],
    },
  }),
];

Installation

npx shadcn@latest add @plate/align-kit

Usage

import { AlignKit } from "@/components/align-kit"
<AlignKit />