or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-udecode--plate-basic-marks

Basic marks plugin for Plate rich text editor providing text formatting capabilities

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

To install, run

npx @tessl/cli install tessl/npm-udecode--plate-basic-marks@49.0.0

index.mddocs/

@udecode/plate-basic-marks

@udecode/plate-basic-marks provides a comprehensive set of basic text formatting mark plugins for the Plate rich text editor. The package includes both base plugins and React-compatible versions, supporting bold, italic, underline, strikethrough, code, subscript, superscript, highlight, and keyboard input formatting.

Note: This package is deprecated as of version 49.0.0. Users should migrate to @platejs/basic-nodes for new projects.

Package Information

  • Package Name: @udecode/plate-basic-marks
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @udecode/plate-basic-marks
  • Status: Deprecated (use @platejs/basic-nodes instead)

Core Imports

Base Plugins

import { 
  BaseBasicMarksPlugin,
  BaseBoldPlugin,
  BaseItalicPlugin,
  BaseUnderlinePlugin,
  BaseStrikethroughPlugin,
  BaseCodePlugin,
  BaseSubscriptPlugin,
  BaseSuperscriptPlugin,
  BaseHighlightPlugin,
  BaseKbdPlugin
} from "@udecode/plate-basic-marks";

React Plugins

import { 
  BasicMarksPlugin,
  BoldPlugin,
  ItalicPlugin,
  UnderlinePlugin,
  StrikethroughPlugin,
  CodePlugin,
  SubscriptPlugin,
  SuperscriptPlugin,
  HighlightPlugin,
  KbdPlugin
} from "@udecode/plate-basic-marks/react";

For CommonJS:

const { BaseBoldPlugin, BaseItalicPlugin } = require("@udecode/plate-basic-marks");
const { BoldPlugin, ItalicPlugin } = require("@udecode/plate-basic-marks/react");

Basic Usage

import { createPlateEditor } from "@udecode/plate-core";
import { 
  BasicMarksPlugin,
  BoldPlugin,
  ItalicPlugin,
  UnderlinePlugin 
} from "@udecode/plate-basic-marks/react";

// Create editor with basic marks
const editor = createPlateEditor({
  plugins: [
    BasicMarksPlugin, // Includes all basic marks
    // Or use individual plugins:
    // BoldPlugin,
    // ItalicPlugin,
    // UnderlinePlugin,
  ]
});

// Toggle marks programmatically
BoldPlugin.toggle();
ItalicPlugin.toggle();

Architecture

The package is organized around the SlatePlugin architecture from the Plate ecosystem:

  • Base Plugins: Core plugin implementations without React dependencies
  • React Plugins: React-compatible versions with component rendering support
  • Plugin Collections: Aggregate plugins (BaseBasicMarksPlugin, BasicMarksPlugin) that bundle all individual mark plugins
  • Toggle Methods: React plugins provide a .toggle() method for applying/removing marks
  • SlatePlugin Interface: All plugins implement the standard SlatePlugin interface for consistent integration

Capabilities

Plugin Collections

Aggregate plugins that include all basic mark functionality in a single import.

/**
 * Base plugin collection containing all basic mark plugins
 */
const BaseBasicMarksPlugin: SlatePlugin;

/**
 * React plugin collection containing all basic mark plugins with React components
 */
const BasicMarksPlugin: SlatePlugin;

Bold Formatting

Enables bold text formatting with keyboard shortcuts and toggle functionality.

/**
 * Base bold formatting plugin
 */
const BaseBoldPlugin: SlatePlugin;

/**
 * React bold formatting plugin with component rendering
 */
const BoldPlugin: SlatePlugin & {
  /** Toggle bold mark on current selection */
  toggle(): void;
};

Italic Formatting

Enables italic text formatting with keyboard shortcuts and toggle functionality.

/**
 * Base italic formatting plugin
 */
const BaseItalicPlugin: SlatePlugin;

/**
 * React italic formatting plugin with component rendering
 */
const ItalicPlugin: SlatePlugin & {
  /** Toggle italic mark on current selection */
  toggle(): void;
};

Underline Formatting

Enables underline text formatting with keyboard shortcuts and toggle functionality.

/**
 * Base underline formatting plugin
 */
const BaseUnderlinePlugin: SlatePlugin;

/**
 * React underline formatting plugin with component rendering
 */
const UnderlinePlugin: SlatePlugin & {
  /** Toggle underline mark on current selection */
  toggle(): void;
};

Strikethrough Formatting

Enables strikethrough text formatting with keyboard shortcuts and toggle functionality.

/**
 * Base strikethrough formatting plugin
 */
const BaseStrikethroughPlugin: SlatePlugin;

/**
 * React strikethrough formatting plugin with component rendering
 */
const StrikethroughPlugin: SlatePlugin & {
  /** Toggle strikethrough mark on current selection */
  toggle(): void;
};

Code Formatting

Enables inline code text formatting with keyboard shortcuts and toggle functionality.

/**
 * Base code formatting plugin
 */
const BaseCodePlugin: SlatePlugin;

/**
 * React code formatting plugin with component rendering
 */
const CodePlugin: SlatePlugin & {
  /** Toggle code mark on current selection */
  toggle(): void;
};

Subscript Formatting

Enables subscript text positioning with keyboard shortcuts and toggle functionality.

/**
 * Base subscript formatting plugin
 */
const BaseSubscriptPlugin: SlatePlugin;

/**
 * React subscript formatting plugin with component rendering
 */
const SubscriptPlugin: SlatePlugin & {
  /** Toggle subscript mark on current selection */
  toggle(): void;
};

Superscript Formatting

Enables superscript text positioning with keyboard shortcuts and toggle functionality.

/**
 * Base superscript formatting plugin
 */
const BaseSuperscriptPlugin: SlatePlugin;

/**
 * React superscript formatting plugin with component rendering
 */
const SuperscriptPlugin: SlatePlugin & {
  /** Toggle superscript mark on current selection */
  toggle(): void;
};

Highlight Formatting

Enables text highlighting/background color with keyboard shortcuts and toggle functionality.

/**
 * Base highlight formatting plugin
 */
const BaseHighlightPlugin: SlatePlugin;

/**
 * React highlight formatting plugin with component rendering
 */
const HighlightPlugin: SlatePlugin & {
  /** Toggle highlight mark on current selection */
  toggle(): void;
};

Keyboard Input Formatting

Enables keyboard input representation formatting with keyboard shortcuts and toggle functionality.

/**
 * Base keyboard input formatting plugin
 */
const BaseKbdPlugin: SlatePlugin;

/**
 * React keyboard input formatting plugin with component rendering
 */
const KbdPlugin: SlatePlugin & {
  /** Toggle kbd mark on current selection */
  toggle(): void;
};

Types

/**
 * Base plugin interface from @udecode/plate-core
 */
interface SlatePlugin {
  /** Plugin identifier */
  key: string;
  /** Plugin configuration and handlers */
  [key: string]: any;
}

Usage Examples

Individual Plugin Usage

import { BoldPlugin, ItalicPlugin } from "@udecode/plate-basic-marks/react";

// Toggle formatting programmatically
const handleBoldClick = () => {
  BoldPlugin.toggle();
};

const handleItalicClick = () => {
  ItalicPlugin.toggle();
};

Full Plugin Collection Usage

import { createPlateEditor } from "@udecode/plate-core";
import { BasicMarksPlugin } from "@udecode/plate-basic-marks/react";

// Use all basic marks at once
const editor = createPlateEditor({
  plugins: [
    BasicMarksPlugin, // Includes all formatting options
  ]
});

Base Plugin Usage (No React)

import { BaseBoldPlugin, BaseItalicPlugin } from "@udecode/plate-basic-marks";

// For server-side or non-React environments
const editor = createPlateEditor({
  plugins: [
    BaseBoldPlugin,
    BaseItalicPlugin,
  ]
});

Migration Information

This package is deprecated. To migrate to the new @platejs/basic-nodes package:

  1. Replace @udecode/plate-basic-marks with @platejs/basic-nodes
  2. Update import paths from @udecode/plate-basic-marks to @platejs/basic-nodes
  3. Review API changes in the new package documentation
  4. Test mark functionality to ensure compatibility

The core functionality remains similar, but the package structure and some APIs may have evolved in the new namespace.