PxDoc Editor Core

The core functionality for the PxDoc editor, built on top of Tiptap.

Installation

npm install @px-doc/editor-core

Usage

Basic Usage

import PxEditorCore from '@px-doc/editor-core';

const editor = new PxEditorCore({
  content: '<p>Hello world!</p>'
});

// Create the editor in a DOM element
const element = document.getElementById('editor');
editor.create(element);

// Get content
const html = editor.getHTML();
const json = editor.getJSON();
const text = editor.getText();

// Set content
editor.setContent('<p>New content</p>');

// Control editor state
editor.setEditable(false);
editor.focus();
editor.blur();

// Cleanup
editor.destroy();

With Custom Extensions

import PxEditorCore from '@px-doc/editor-core';
import Bold from '@tiptap/extension-bold';
import Italic from '@tiptap/extension-italic';

const editor = new PxEditorCore({
  content: '<p>Hello world!</p>',
  extensions: [Bold, Italic]
});

const element = document.getElementById('editor');
editor.create(element);

Event Handlers

import PxEditorCore from '@px-doc/editor-core';

const editor = new PxEditorCore({
  content: '<p>Hello world!</p>',
  onCreate: () => {
    console.log('Editor created');
  },
  onUpdate: () => {
    console.log('Content updated');
  },
  onFocus: () => {
    console.log('Editor focused');
  },
  onBlur: () => {
    console.log('Editor blurred');
  }
});

const element = document.getElementById('editor');
editor.create(element);

API

Constructor

new PxEditorCore(config)

Config Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | content | string | '' | Initial content | | editable | boolean | true | Whether the editor is editable | | autofocus | boolean | false | Whether to autofocus the editor | | extensions | array | [] | Custom extensions to add | | onBeforeCreate | function | undefined | Called before editor creation | | onCreate | function | undefined | Called when editor is created | | onUpdate | function | undefined | Called when content changes | | onSelectionUpdate | function | undefined | Called when selection changes | | onTransaction | function | undefined | Called on every transaction | | onFocus | function | undefined | Called when editor gains focus | | onBlur | function | undefined | Called when editor loses focus | | onDestroy | function | undefined | Called when editor is destroyed |

Methods

| Method | Parameters | Return | Description | |--------|------------|--------|-------------| | create | element: HTMLElement | void | Create the editor in the given element | | destroy | - | void | Destroy the editor | | getHTML | - | string | Get content as HTML | | getJSON | - | object | Get content as JSON | | getText | - | string | Get content as plain text | | setContent | content: string/object | void | Set editor content | | focus | - | void | Focus the editor | | blur | - | void | Blur the editor | | setEditable | editable: boolean | void | Set editable state | | isEditable | - | boolean | Get editable state | | isEmpty | - | boolean | Check if editor is empty | | editorInstance | - | Editor/null | Get the underlying Tiptap editor instance |

Browser Support

The core package works in all modern browsers that support ES2018+.

License

MIT