Create Custom Plugins for Editora

<script src="https://unpkg.com/@editora/core@1.0.1"></script>
<script src="https://unpkg.com/my-callout-plugin@1.0.0"></script>

<editora-editor
  plugins="[window.MyCalloutPlugin.CalloutPlugin()]"
  toolbar-items="['bold', 'italic', 'callout']"
></editora-editor>

import React from 'react';
import { EditoraEditor } from '@editora/react';
import { CalloutPlugin } from 'my-callout-plugin';

export const App = () => {
  return (
    <EditoraEditor
      plugins={[CalloutPlugin()]}
      toolbarItems={['bold', 'italic', 'callout']}
    />
  );
};

export const keyboardShortcuts = {
  'Ctrl-Shift-K': insertCalloutCommand('info', ''),
  'Ctrl-Shift-W': insertCalloutCommand('warning', ''),
  'Ctrl-Shift-S': insertCalloutCommand('success', '')
};

export interface CalloutConfig {
  types?: string[];
  defaultType?: 'info' | 'warning' | 'success' | 'error';
  showIcon?: boolean;
  customStyles?: Record<string, string>;
}

export const CalloutPlugin = (config: CalloutConfig = {}): Plugin => ({
  name: 'callout',

  // Configurable node definition
  nodes: {
    callout: {
      group: 'block',
      atom: true,
      attrs: {
        type: { default: config.defaultType || 'info' },
        message: { default: '' }
      },
      parseDOM: [
        {
          tag: 'div.callout',
          getAttrs(dom: HTMLElement) {
            return {
              type: dom.getAttribute('data-type') || config.defaultType || 'info',
              message: dom.textContent || ''
            };
          }
        }
      ],
      toDOM(node) {
        return [
          'div',
          {
            class: `callout callout-${node.attrs.type}`,
            data-type: node.attrs.type
          },
          ['p', node.attrs.message]
        ];
      }
    }
  },

  // Configurable toolbar
  toolbar: config.showIcon !== false ? [
    {
      label: 'Callout Box',
      command: 'insertCallout',
      icon: '💬'
    }
  ] : [],

  // Commands with config
  commands: {
    insertCallout: (type?: 'info' | 'warning' | 'success' | 'error') => {
      const calloutType = type || config.defaultType || 'info';
      const message = prompt('Enter callout message:');
      if (!message) return false;

      const calloutHtml = `<div class="callout callout-${calloutType}" data-type="${calloutType}"><p>${message}</p></div>`;
      document.execCommand('insertHTML', false, calloutHtml);
      return true;
    }
  },

  // Keyboard shortcuts
  keymap: {
    'Mod-Shift-C': () => 'insertCallout'
  }
});

export const CounterPlugin = (): Plugin => {
  let count = 0;

  return {
    name: 'counter',

    // Mark for text highlighting
    marks: {
      highlight: {
        parseDOM: [{ tag: 'mark' }],
        toDOM() { return ['mark', { class: 'highlight' }, 0]; }
      }
    },

    // Commands that use state
    commands: {
      highlightText: () => {
        count++;
        document.execCommand('insertHTML', false, `<mark class="highlight">Highlighted ${count}</mark>`);
        return true;
      }
    },

    toolbar: [
      {
        label: 'Highlight',
        command: 'highlightText',
        icon: '🖍️'
      }
    ],

    keymap: {
      'Mod-Shift-H': () => 'highlightText'
    }
  };
};

export { CalloutPlugin } from './CalloutPlugin';
export type { CalloutConfig } from './CalloutPlugin';

import { describe, it, expect } from 'vitest';
import { CalloutPlugin } from './CalloutPlugin';

describe('Callout Plugin', () => {
  it('should create plugin object', () => {
    const plugin = CalloutPlugin();
    expect(plugin).toBeDefined();
    expect(plugin.name).toBe('callout');
    expect(plugin.nodes).toHaveProperty('callout');
    expect(plugin.commands).toHaveProperty('insertCallout');
  });

  it('should accept configuration', () => {
    const plugin = CalloutPlugin({ defaultType: 'warning' });
    expect(plugin.nodes.callout.attrs.type.default).toBe('warning');
  });

  it('should have toolbar configuration', () => {
    const plugin = CalloutPlugin();
    expect(plugin.toolbar).toHaveLength(1);
    expect(plugin.toolbar[0].command).toBe('insertCallout');
  });
});

// MyPlugin.ts
import { Node } from 'prosemirror-model';

export const MyPluginNode = {
  name: 'my-plugin',
  group: 'block', // or 'inline'
  atom: true, // non-editable by default
  
  attrs: {
    // Define attributes
  },

  toDOM(node) {
    return ['div', {}, 'Content'];
  },

  parseDOM: [
    { tag: 'div' }
  ]
};

export const insertMyPluginCommand = () => ({ tr, dispatch }) => {
  const node = tr.doc.type.schema.nodes['my-plugin'].create();
  if (dispatch) dispatch(tr.replaceRangeWith(tr.selection.$from.pos, tr.selection.$from.pos, node));
  return true;
};