@zm-editor/core

Core Tiptap extensions and utilities for zm-editor - a Notion-style rich text editor.

English | 한국어

Installation

npm install @zm-editor/core

Note: This package is typically used together with @zm-editor/react. For most use cases, install both:

npm install @zm-editor/core @zm-editor/react

What's Included

Tiptap Extensions

• StarterKit - Pre-configured Tiptap starter kit with common extensions
• SlashCommand - Notion-style slash command menu
• Mention - @ mention support
• CodeBlockLowlight - Syntax highlighting for 26+ languages
• Table - Table support with cell merging and background colors
• Image - Enhanced image extension with resize and alignment
• Custom Nodes - 28+ custom node extensions (Callout, Toggle, Embed, Mermaid, etc.)

Security Utilities

import {
  isSafeLinkUrl,
  isSafeImageUrl,
  sanitizeUrl,
  checkSsrf,
  isPrivateIP,
} from '@zm-editor/core';

// Validate URLs
isSafeLinkUrl('https://example.com'); // true
isSafeLinkUrl('javascript:alert(1)'); // false

// SSRF protection
checkSsrf('http://192.168.1.1'); // { safe: false, reason: 'Private IP' }
checkSsrf('https://example.com'); // { safe: true }

i18n Types

import type { ZmEditorLocale } from '@zm-editor/core';

const customLocale: ZmEditorLocale = {
  editor: {
    placeholder: 'Start writing...',
  },
  // ... other locale keys
};

Usage with @zm-editor/react

import { ZmEditor } from '@zm-editor/react';

export default function MyEditor() {
  return (
    <ZmEditor
      initialContent="<p>Hello, world!</p>"
      onChange={(editor) => console.log(editor.getJSON())}
    />
  );
}

Peer Dependencies

• @tiptap/core ^2.11.0
• @tiptap/pm ^2.11.0

Related Packages

| Package | Description | |---------|-------------| | @zm-editor/react | React components and hooks |

Links

• GitHub Repository
• Documentation

License

MIT