JSPM

@explita/editor is a versatile, modern rich-text editor built on TipTap for seamless integration into React applications. It provides extensive customization options and advanced features to cater to diverse content creation needs.

This editor is designed for flexibility and ease of use, featuring powerful extensions like:

• Starter Kit for essential editing tools.
• Line Height and Font Size controls for text customization.
• Text Alignment for fine-tuned layouts.
• Advanced Link Support with autolinking and protocol presets.
• Highlighting with multicolor options.
• Font Family, Underline, and Color Picker for unique styling.
• Image Resizing for dynamic media control.
• Task Lists with nested tasks.
• Table Editing with resizable rows and columns.
• Page Breaks and Horizontal Rules for better document organization.
• Superscript and Subscript for advanced typography.

Whether you're building a CMS, blog platform, or any content-focused application, @explita/editor delivers the tools you need for an exceptional text editing experience.

Features:

• Lightweight and performant.
• Fully customizable and extensible.
• Built on React and TipTap for developer-friendly configuration.
• Includes advanced tools for text styling, media, and tables.

Installation

npm install @explita/editor

Basic Example

import React from "react";
import { Editor } from "@explita/editor";

const App = () => {
  const initialContent = {
    type: "doc",
    content: [
      {
        type: "paragraph",
        content: [{ type: "text", text: "Hello, Editor!" }],
      },
    ],
  };

  const handleHTMLContent = (html) => console.log("HTML Content:", html);
  const handleJSONContent = (json) => console.log("JSON Content:", json);
  const handleTextContent = (text) => console.log("Plain Text Content:", text);
  const handleSave = (content) => console.log("Saved Content:", content);
  const handleCreateNew = () => console.log("Create New Document");
  const handleClose = () => console.log("Editor closed");
  const getEditorOpts = (opts) => console.log("Editor Options:", opts);

  return (
    <Editor
      initialContent={initialContent}
      getHTMLContent={handleHTMLContent}
      getJSONContent={handleJSONContent}
      getTextContent={handleTextContent}
      onSave={handleSave}
      onCreateNew={handleCreateNew}
      onClose={handleClose}
      getEditorOpts={getEditorOpts}
      toolbarRight={<></>}
      hideToolbar={false} //optional
      hideMenubar={false} //optional
      readOnly={false} // Set to true for non-editable mode
    />
  );
};

export default App;

Note: If you are using the getJSONContent output as initialContent, there's no need to explicitly pass editorOpts. We recommend saving editor content as JSON (getJSONContent) whenever possible for better flexibility and consistency.

Props

Advanced Usage

1. Retain Page Margins/Padding:

   • Retrieve editor options using the getEditorOpts callback.
   • Save these options and pass them back to the Editor component alongside the content (if there’s initialContent). Do this only when the Editor is initialized, avoiding unnecessary updates on every keypress.
     Note: you can double-click the ruler anytime to modify page paddings.

2. Custom Toolbar: Use toolbarRight to inject custom components like buttons or additional actions.

   
   

3. Flexible Content Management: Supports retrieving and saving content in multiple formats: HTML, JSON, and plain text.

This ensures consistent styling and layout for documents created or modified in the editor.

@explita/editor offers a feature-rich, user-friendly, and developer-focused solution for all your text editing needs.

Why Choose @explita/editor?

• Lightweight and performant for modern web applications.
• Fully customizable and extensible to meet various requirements.
• Built with React and TipTap, ensuring easy configuration for developers.
• Ideal for applications ranging from basic editors to advanced CMS platforms.