CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-udecode--plate-common

Common utility package that serves as a centralized re-export hub for core Plate rich-text editor functionality

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

editor-core.mddocs/

Editor Core System

Core editor creation, configuration, and management functionality that provides the foundation for building rich text editors with Plate's plugin system.

Capabilities

SlateEditor Creation

Creates a new Slate editor instance with Plate-specific enhancements and plugin support.

/**
 * Creates a new Slate editor instance with Plate enhancements
 * @param options - Configuration options for the editor
 * @returns Configured SlateEditor instance
 */
function createSlateEditor<T extends AnySlatePlugin[]>(
  options?: CreateSlateEditorOptions<T>
): SlateEditor<T>;

interface CreateSlateEditorOptions<T extends AnySlatePlugin[] = AnySlatePlugin[]> {
  /** Unique identifier for the editor instance */
  id?: string;
  /** Array of plugins to register with the editor */
  plugins?: T;
  /** Initial value for the editor */
  value?: TElement[];
  /** Whether to normalize on initialization */
  normalize?: boolean;
  /** Custom selection configuration */
  selection?: TRange | null;
}

Usage Examples:

import { createSlateEditor, createSlatePlugin } from "@udecode/plate-common";

// Basic editor
const editor = createSlateEditor({
  id: 'my-editor',
  value: [
    {
      type: 'p',
      children: [{ text: 'Hello world' }],
    },
  ],
});

// Editor with plugins
const editorWithPlugins = createSlateEditor({
  plugins: [
    createSlatePlugin({
      key: 'paragraph',
      node: { type: 'p' }
    })
  ]
});

SlateEditor Interface

The enhanced editor interface that extends the base Slate editor with Plate functionality.

/**
 * Enhanced Slate editor with Plate functionality
 */
interface SlateEditor<T extends AnySlatePlugin[] = AnySlatePlugin[]> 
  extends BaseEditor {
  /** Unique key for the editor instance */
  key: string;
  /** Unique identifier for the editor instance */
  id: string;
  /** Array of registered plugins */
  plugins: T;
}

interface BaseEditor extends TEditor {
  /** Get API methods for a specific plugin */
  getApi<P extends AnySlatePlugin = AnySlatePlugin>(
    plugin: P
  ): InferApi<P>;

  /** Get injectable properties for a plugin */
  getInjectProps<P extends AnySlatePlugin>(
    plugin: P
  ): InjectNodeProps<P>;

  /** Get a specific option value from a plugin */
  getOption<
    P extends AnySlatePlugin,
    K extends keyof InferOptions<P>
  >(
    plugin: P,
    optionKey: K
  ): InferOptions<P>[K];

  /** Get all options for a plugin */
  getOptions<P extends AnySlatePlugin>(
    plugin: P
  ): InferOptions<P>;

  /** Get the options store for a plugin */
  getOptionsStore<P extends AnySlatePlugin>(
    plugin: P
  ): StoreApi<P['key'], InferOptions<P>>;

  /** Get transform methods for a plugin */
  getTransforms<P extends AnySlatePlugin>(
    plugin: P
  ): InferTransforms<P>;

  /** Set a specific option value for a plugin */
  setOption<
    P extends AnySlatePlugin,
    K extends keyof InferOptions<P>
  >(
    plugin: P,
    optionKey: K,
    value: InferOptions<P>[K]
  ): void;

  /** Set multiple options for a plugin */
  setOptions<P extends AnySlatePlugin>(
    plugin: P,
    options: Partial<InferOptions<P>>
  ): void;

  /** React hook to use a plugin option (React only) */
  useOption<
    P extends AnySlatePlugin,
    K extends keyof InferOptions<P>
  >(
    plugin: P,
    optionKey: K
  ): InferOptions<P>[K];
}

Slate Enhancement

HOC that enhances a base Slate editor with Plate functionality.

/**
 * Higher-order component that enhances editor with Slate functionality
 * @param editor - Base editor to enhance
 * @param options - Configuration options
 * @returns Enhanced editor with Slate capabilities
 */
function withSlate<T extends TEditor>(
  editor: T, 
  options?: WithSlateOptions
): T & SlateEditor;

interface WithSlateOptions {
  plugins?: AnySlatePlugin[];
  id?: string;
}

Usage Example:

import { createEditor } from 'slate';
import { withSlate } from "@udecode/plate-common";

// Enhance a basic Slate editor
const baseEditor = createEditor();
const enhancedEditor = withSlate(baseEditor);

Editor State Management

Core functionality for managing editor state and configuration.

/**
 * Reset the editor to initial state
 * @param editor - Editor instance to reset
 * @param options - Reset options
 */
function resetEditor(
  editor: SlateEditor,
  options?: ResetEditorOptions
): void;

interface ResetEditorOptions {
  /** Value to reset to */
  value?: TElement[];
  /** Whether to clear selection */
  clearSelection?: boolean;
  /** Whether to clear history */
  clearHistory?: boolean;
}

/**
 * Get current editor value
 * @param editor - Editor instance
 * @returns Current editor content
 */
function getEditorValue(editor: SlateEditor): TElement[];

/**
 * Set editor value
 * @param editor - Editor instance
 * @param value - New value to set
 */
function setEditorValue(
  editor: SlateEditor, 
  value: TElement[]
): void;

Core Types

/**
 * Store API interface for plugin state management
 */
interface StoreApi<K extends string, T> {
  get: () => T;
  set: (value: T | ((prev: T) => T)) => void;
  subscribe: (listener: (value: T) => void) => () => void;
}

/**
 * Injectable node properties for plugin rendering
 */
interface InjectNodeProps<P extends AnySlatePlugin> {
  /** Element properties to inject */
  element?: Record<string, any>;
  /** Text properties to inject */
  text?: Record<string, any>;
  /** Additional props for the node */
  props?: Record<string, any>;
}

/**
 * Core plugin type
 */
type AnySlatePlugin = SlatePlugin<string>;

/**
 * Type inference helpers for plugin configuration
 */
type InferOptions<P extends AnySlatePlugin> = 
  P extends { options: infer O } ? O : {};

type InferApi<P extends AnySlatePlugin> = 
  P extends { api: infer A } ? A : {};

type InferTransforms<P extends AnySlatePlugin> = 
  P extends { transforms: infer T } ? T : {};

docs

editor-core.md

index.md

plugin-system.md

react-components.md

react-hooks.md

slate-operations.md

utility-functions.md

tile.json