Srcroot Editor

A comprehensive, "batteries-included" Rich Text Editor for React based on Slate.js.

Features

• Core: Stable Slate-based editing environment.
• Formatting: Bold, Italic, Underline, Strikethrough, Code.
• Blocks: Headings (H1-H3), Lists (Bulleted, Numbered), Blockquotes.
• Media: Images (URL based) and Links.
• Serialization:
  • Full HTML Import/Export.
  • Markdown Import/Export.
  • Docx Import (via Mammoth) and Export (via docx).
• Plugins: Modular architecture.

Installation

npm install @srcroot/editor
# Optional for serialization
npm install mammoth docx marked escape-html slate-hyperscript

Usage

import React, { useState } from 'react';
import { SrcrootEditor, FormatPlugin, HeadingPlugin, ListPlugin, LinkPlugin, ImagePlugin } from '@srcroot/editor';

const MyEditor = () => {
  const [value, setValue] = useState([]);
  
  const plugins = [
    FormatPlugin, 
    HeadingPlugin, 
    ListPlugin, 
    LinkPlugin, 
    ImagePlugin
  ];

  return (
    <SrcrootEditor 
      plugins={plugins}
      value={value}
      onChange={setValue}
      placeholder="Start typing..."
    />
  );
};

Serialization

import { serializeHTML, serializeMarkdown, exportDocx, importDocx } from 'srcroot-editor';

// HTML
const html = value.map(n => serializeHTML(n)).join('');

// Markdown
const md = value.map(n => serializeMarkdown(n)).join('');

// Docx Export
exportDocx(value).then(blob => {
  // save blob
});

// Docx Import
const buffer = await file.arrayBuffer();
const nodes = await importDocx(buffer);
setValue(nodes);

License

MIT