Skip to main content

Extensions Overview

BlockSlides provides a rich ecosystem of extensions that add functionality to your editor. All extensions are modular and can be enabled or disabled as needed.

Extension Kit​

The @blockslides/extension-kit package bundles the most commonly used extensions. All extensions are enabled by default for convenience.

import { ExtensionKit } from "@blockslides/extension-kit";

const editor = useEditor({
  extensions: [ExtensionKit.configure({})],
});

Core Extensions​

Document & Slide Structure​

  • Document (@blockslides/extension-document) - Root document node
  • Slide (@blockslides/extension-slide) - Individual slide container
  • Row (@blockslides/extension-row) - Horizontal layout container
  • Column (@blockslides/extension-column) - Vertical content container

Text & Formatting​

  • Paragraph (@blockslides/extension-paragraph) - Basic paragraph blocks
  • Heading (@blockslides/extension-heading) - Heading levels 1-6
  • Text (@blockslides/extension-text) - Inline text node
  • Bold (@blockslides/extension-bold) - Bold text mark
  • Italic (@blockslides/extension-italic) - Italic text mark
  • Underline (@blockslides/extension-underline) - Underline text mark
  • Strike (@blockslides/extension-strike) - Strikethrough text mark
  • Code (@blockslides/extension-code) - Inline code mark

Lists​

  • BulletList (@blockslides/extension-bullet-list) - Unordered lists
  • OrderedList (@blockslides/extension-ordered-list) - Numbered lists
  • List (@blockslides/extension-list) - Base list functionality

Rich Content​

  • Image (@blockslides/extension-image) - Basic image support
  • ImageBlock (@blockslides/extension-image-block) - Advanced image blocks with layouts
  • YouTube (@blockslides/extension-youtube) - YouTube video embeds
  • CodeBlock (@blockslides/extension-code-block) - Code blocks with syntax highlighting
  • Blockquote (@blockslides/extension-blockquote) - Quoted content
  • Table (@blockslides/extension-table) - Data tables
  • HorizontalRule (@blockslides/extension-horizontal-rule) - Dividers

Advanced Features​

  • Link (@blockslides/extension-link) - Hyperlinks
  • Color (@blockslides/extension-color) - Text color control
  • Highlight (@blockslides/extension-highlight) - Text highlighting
  • TextAlign (@blockslides/extension-text-align) - Text alignment
  • FontFamily (@blockslides/extension-font-family) - Font selection
  • Mathematics (@blockslides/extension-mathematics) - LaTeX math equations
  • Placeholder (@blockslides/extension-placeholder) - Empty state hints
  • UniqueId (@blockslides/extension-unique-id) - Automatic ID generation
  • TableOfContents (@blockslides/extension-table-of-contents) - TOC generation

UI Components​

  • BubbleMenu (@blockslides/extension-bubble-menu) - Contextual formatting menu
  • FloatingMenu (@blockslides/extension-floating-menu) - Floating action menu
  • AddSlideButton (@blockslides/extension-add-slide-button) - Quick slide addition
  • DragHandle (@blockslides/extension-drag-handle-react) - Drag-and-drop support

Utilities​

  • Typography (@blockslides/extension-typography) - Smart typography improvements
  • FileHandler (@blockslides/extension-file-handler) - File upload handling
  • HardBreak (@blockslides/extension-hard-break) - Line breaks
  • Details (@blockslides/extension-details) - Expandable sections

Configuring Extensions​

You can selectively enable/disable or configure extensions:

const editor = useEditor({
  extensions: [
    ExtensionKit.configure({
      // Disable specific extensions
      mathematics: false,
      youtube: false,
      
      // Configure specific extensions
      heading: {
        levels: [1, 2, 3], // Only allow H1-H3
      },
      
      placeholder: {
        placeholder: 'Start typing your slide content...',
      },
      
      codeBlock: {
        lowlight: hljs, // Provide syntax highlighter
      },
    }),
  ],
});

Individual Extensions​

You can also import and use extensions individually for more control:

import { useEditor } from "@blockslides/react";
import Document from "@blockslides/extension-document";
import Slide from "@blockslides/extension-slide";
import Paragraph from "@blockslides/extension-paragraph";
import Text from "@blockslides/extension-text";
import Bold from "@blockslides/extension-bold";

const editor = useEditor({
  extensions: [
    Document,
    Slide,
    Paragraph,
    Text,
    Bold.configure({
      // Custom configuration
    }),
  ],
});

Creating Custom Extensions​

BlockSlides extensions follow the ProseMirror extension pattern. You can create custom extensions to add your own functionality:

import { Node } from "@blockslides/core";

export const CustomNode = Node.create({
  name: "customNode",
  
  group: "block",
  
  content: "inline*",
  
  parseHTML() {
    return [{ tag: "div.custom-node" }];
  },
  
  renderHTML({ HTMLAttributes }) {
    return ["div", { class: "custom-node", ...HTMLAttributes }, 0];
  },
  
  addCommands() {
    return {
      setCustomNode: () => ({ commands }) => {
        return commands.setNode(this.name);
      },
    };
  },
});

Next Steps​

  • Explore the API Reference for detailed API documentation
  • Check out Schema Overview to understand the document structure
  • See extension source code in the packages/extension-* directories