Creating Extensions

import { Extensions } from '@harbour-enterprises/superdoc';
const { Extension } = Extensions;

const MyExtension = Extension.create({
  name: 'myExtension',
  
  addCommands() {
    return {
      myCommand: () => ({ commands }) => {
        console.log('Command executed');
        return true;
      }
    };
  }
});

// Use it
editor.commands.myCommand();

import { Extensions } from '@harbour-enterprises/superdoc';

const { Node } = Extensions;
const CustomBlock = Node.create({
  name: 'customBlock',
  group: 'block',
  content: 'inline*',
  
  parseHTML() {
    return [{ tag: 'div[data-custom]' }];
  },
  
  renderHTML({ HTMLAttributes }) {
    return ['div', { 'data-custom': '' }, 0];
  }
});

import { Extensions } from '@harbour-enterprises/superdoc';

const { Mark } = Extensions;
const Highlight = Mark.create({
  name: 'highlight',
  
  addCommands() {
    return {
      toggleHighlight: () => ({ commands }) => {
        return commands.toggleMark(this.name);
      }
    };
  }
});

addCommands() {
  return {
    simpleCommand: () => ({ commands }) => {
      return commands.insertContent('Hello');
    },
    
    complexCommand: (text) => ({ state, dispatch }) => {
      dispatch(state.tr.insertText(text));
      return true;
    }
  };
}

addKeyboardShortcuts() {
  return {
    'Mod-Shift-h': () => this.editor.commands.toggleHighlight()
  };
}

const ConfigurableExt = Extension.create({
  addOptions() {
    return {
      color: '#0000FF',
      enabled: true
    };
  },
  
  addCommands() {
    return {
      applyColor: () => () => {
        // Use this.options.color
      }
    };
  }
});

// Configure when using
ConfigurableExt.configure({ color: '#FF0000' });

new SuperDoc({
  selector: '#editor',
  document: 'document.docx',
  editorExtensions: [
    MyExtension,
  ]
});