Note Forge Editor

A React component library that provides a rich text editor with Mermaid diagram support, built on top of BlockNote.

Features

• 📝 Rich text editing with all standard BlockNote features
• 🎨 Built-in Mermaid diagram support with live preview
• 🎭 Multiple Mermaid themes (default, neutral, dark, forest, base)
• 📊 Pre-built templates for common diagram types
• 🖼️ Export diagrams as PNG or SVG
• 🔧 Resizable diagram blocks
• 🌙 Light and dark theme support
• ⚡ CodeMirror-powered code editing with syntax highlighting
• 🎯 Full TypeScript support
• 🚀 Built with modern React hooks and patterns

Installation

npm install note-forge-editor

Dependencies

This package has peer dependencies on React and React DOM:

npm install react@>=18.0.0 react-dom@>=18.0.0

Quick Start

import React, { useState } from 'react';
import { NoteForge } from 'note-forge-editor';
import 'note-forge-editor/dist/index.css';

function App() {
  const [content, setContent] = useState('');

  return (
    <div className="App">
      <NoteForge
        initialContent={content}
        onChange={setContent}
        theme="light"
        placeholder="Start typing or press '/' for commands..."
      />
    </div>
  );
}

export default App;

Usage Examples

Basic Rich Text Editor

import React, { useState } from 'react';
import { NoteForge } from 'note-forge-editor';

function BasicEditor() {
  const [content, setContent] = useState('');

  const handleContentChange = (newContent: string) => {
    console.log('Content updated:', newContent);
    setContent(newContent);
  };

  return (
    <NoteForge
      initialContent={content}
      onChange={handleContentChange}
      theme="light"
      editable={true}
      className="my-editor"
      placeholder="Type '/' for commands, or start typing..."
    />
  );
}

Editor with Initial Content and Mermaid Diagrams

import React, { useState } from 'react';
import { NoteForge } from 'note-forge-editor';

function EditorWithDiagrams() {
  // Content is stored as JSON string
  const initialContent = JSON.stringify([
    {
      type: "paragraph",
      content: [{
        type: "text",
        text: "Welcome to Note Forge! Here's a sample flowchart:",
        styles: {}
      }]
    },
    {
      type: "mermaid",
      props: {
        code: `graph TD
          A[Start] --> B{Decision?}
          B -->|Yes| C[Success]
          B -->|No| D[Try Again]
          C --> E[End]
          D --> B`,
        theme: "default"
      }
    }
  ]);

  const [content, setContent] = useState(initialContent);

  return (
    <div style={{ maxWidth: '800px', margin: '0 auto', padding: '20px' }}>
      <h1>My Document Editor</h1>
      <NoteForge
        initialContent={content}
        onChange={setContent}
        theme="light"
        editable={true}
      />
    </div>
  );
}

Dark Theme Editor

import React, { useState } from 'react';
import { NoteForge } from 'note-forge-editor';

function DarkEditor() {
  const [content, setContent] = useState('');

  return (
    <div style={{ backgroundColor: '#1a1a1a', minHeight: '100vh', padding: '20px' }}>
      <NoteForge
        initialContent={content}
        onChange={setContent}
        theme="dark"
        placeholder="Start writing in dark mode..."
        className="dark-theme-editor"
      />
    </div>
  );
}

API Reference

NoteForge Component

The main editor component with the following props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | initialContent | string | undefined | Initial content as JSON string | | onChange | (content: string) => void | undefined | Callback when content changes, receives JSON string | | theme | "light" \| "dark" | "light" | Editor theme | | editable | boolean | true | Whether the editor is editable | | className | string | "" | CSS class for the editor container | | placeholder | string | "Type '/' for commands..." | Placeholder text when editor is empty |

Working with Mermaid Diagrams

Adding Mermaid Diagrams

Users can add Mermaid diagrams by:

1. Typing /mermaid in the editor
2. Selecting from the available templates
3. Editing the code in the built-in code editor

Available Mermaid Templates

import { mermaidTemplates, getTemplatesByCategory } from 'note-forge-editor';

// Get all templates
console.log(mermaidTemplates);

// Get templates by category
const flowcharts = getTemplatesByCategory('Flowchart');
const sequenceDiagrams = getTemplatesByCategory('Sequence');

Template categories include:

• Flowchart: Basic and process flowcharts
• Sequence: Sequence diagrams for interactions
• Class: UML class diagrams
• State: State machine diagrams
• Gantt: Project timeline charts
• Git: Git flow diagrams
• ER: Entity relationship diagrams

Export Functionality

import { exportDiagram, isExportSupported } from 'note-forge-editor';

// Check if export is supported in current environment
if (isExportSupported()) {
  const diagramElement = document.querySelector('.mermaid-diagram');
  
  if (diagramElement) {
    // Export as PNG
    await exportDiagram(diagramElement, {
      format: 'png',
      filename: 'my-diagram',
      scale: 2,
      backgroundColor: '#ffffff'
    });

    // Export as SVG
    await exportDiagram(diagramElement, {
      format: 'svg',
      filename: 'my-diagram'
    });
  }
}

Custom Schema Usage

For advanced use cases, you can use the editor schema directly:

import { editorSchema, MermaidBlock } from 'note-forge-editor';
import { useCreateBlockNote } from '@blocknote/react';
import { BlockNoteView } from '@blocknote/mantine';

function CustomEditor() {
  const editor = useCreateBlockNote({
    schema: editorSchema,
    // Your custom configuration
  });

  return <BlockNoteView editor={editor} />;
}

Styling and Customization

CSS Import

Make sure to import the required styles:

import 'note-forge-editor/dist/index.css';

Custom Styling

You can customize the appearance using these CSS classes:

/* Editor container */
.mermaid-editor-container {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

/* Mermaid block container */
.mermaid-block {
  margin: 16px 0;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* Mermaid diagram */
.mermaid-diagram {
  padding: 16px;
  text-align: center;
}

/* Code editor */
.cm-editor {
  font-family: 'Monaco', 'Courier New', monospace;
}

Theme Customization

The editor supports light and dark themes out of the box. For custom themes, you can override CSS variables:

.custom-theme {
  --mantine-primary-color-filled: #your-color;
  --mantine-color-text: #your-text-color;
  /* Add more custom variables */
}

Integration Examples

Next.js Integration

// pages/editor.tsx or app/editor/page.tsx
import dynamic from 'next/dynamic';
import { useState } from 'react';

// Dynamic import to avoid SSR issues
const NoteForge = dynamic(
  () => import('note-forge-editor').then(mod => mod.NoteForge),
  { ssr: false }
);

export default function EditorPage() {
  const [content, setContent] = useState('');

  return (
    <div>
      <h1>My Document Editor</h1>
      <NoteForge
        initialContent={content}
        onChange={setContent}
        theme="light"
      />
    </div>
  );
}

React + TypeScript

import React, { useState, useCallback } from 'react';
import { NoteForge } from 'note-forge-editor';
import type { ExportOptions } from 'note-forge-editor';

interface DocumentEditorProps {
  documentId: string;
  onSave?: (content: string) => void;
}

const DocumentEditor: React.FC<DocumentEditorProps> = ({
  documentId,
  onSave
}) => {
  const [content, setContent] = useState<string>('');
  const [isDirty, setIsDirty] = useState<boolean>(false);

  const handleContentChange = useCallback((newContent: string) => {
    setContent(newContent);
    setIsDirty(true);
  }, []);

  const handleSave = useCallback(() => {
    if (onSave && isDirty) {
      onSave(content);
      setIsDirty(false);
    }
  }, [content, isDirty, onSave]);

  return (
    <div className="document-editor">
      <div className="editor-toolbar">
        <button onClick={handleSave} disabled={!isDirty}>
          {isDirty ? 'Save Changes' : 'Saved'}
        </button>
      </div>
      
      <NoteForge
        initialContent={content}
        onChange={handleContentChange}
        theme="light"
        placeholder="Start writing your document..."
      />
    </div>
  );
};

export default DocumentEditor;

Development

To build the package locally:

# Install dependencies
npm install

# Build the package
npm run build

# Run in development mode
npm run dev

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

If you encounter any issues or have questions, please file an issue on the GitHub repository.