r2columns4-plugin.js

import { Core, UI } from "@typo3/ckeditor5-bundle.js";


export default class R2columns4 extends Core.Plugin {
  static pluginName = 'R2columns4';

  init() {
    const editor = this.editor;

    this._defineSchema();
    this._defineConverters();

    // The button must be registered among the UI components of the editor
    // to be displayed in the toolbar.
    editor.ui.componentFactory.add(R2columns4.pluginName, () => {
      // The button will be an instance of ButtonView.
      const button = new UI.ButtonView();

      button.set({
        label: 'Vierspalter',
        withText: true,
        icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" xml:space="preserve"><rect x="0" y="0" width="4" height="20"></rect><rect x="5" y="0" width="4" height="20"></rect><rect x="10" y="0" width="4" height="20"></rect><rect x="15" y="0" width="4" height="20"></rect></svg>'
      });

      //Execute a callback function when the button is clicked
      button.on('execute', () => {
        editor.model.change(writer => {
          editor.model.insertObject(createR2columns4(writer));
        });

      });

      return button;
    });
  }

  _defineSchema() {
    const schema = this.editor.model.schema;

    schema.register('fourColumns', {
      // Behaves like a self-contained block object (e.g. a block image)
      // allowed in places where other blocks are allowed (e.g. directly in the root).
      inheritAllFrom: '$blockObject'
    });

    schema.register('fourColumnsCol1', {
      // Cannot be split or left by the caret.
      isLimit: true,
      allowIn: 'fourColumns',
      // Allow content which is allowed in blocks (i.e. text with attributes).
      allowContentOf: '$root'
    });

    schema.register('fourColumnsCol2', {
      // Cannot be split or left by the caret.
      isLimit: true,
      allowIn: 'fourColumns',
      // Allow content which is allowed in the root (e.g. paragraphs).
      allowContentOf: '$root'
    });

    schema.register('fourColumnsCol3', {
      // Cannot be split or left by the caret.
      isLimit: true,
      allowIn: 'fourColumns',
      // Allow content which is allowed in the root (e.g. paragraphs).
      allowContentOf: '$root'
    });

    schema.register('fourColumnsCol4', {
      // Cannot be split or left by the caret.
      isLimit: true,
      allowIn: 'fourColumns',
      // Allow content which is allowed in the root (e.g. paragraphs).
      allowContentOf: '$root'
    });

    schema.addChildCheck((context, childDefinition) => {
      if (context.endsWith('fourColumnsCol4') && childDefinition.name == 'fourColumns') {
        return false;
      }
    });
  }

  _defineConverters() {
    const conversion = this.editor.conversion;

    conversion.elementToElement({
      model: 'fourColumns',
      view: {
        name: 'div',
        classes: 'r2columns4'
      }
    });

    conversion.elementToElement({
      model: 'fourColumnsCol1',
      view: {
        name: 'div',
        classes: 'r2col4-1'
      }
    });

    conversion.elementToElement({
      model: 'fourColumnsCol2',
      view: {
        name: 'div',
        classes: 'r2col4-2'
      }
    });

    conversion.elementToElement({
      model: 'fourColumnsCol3',
      view: {
        name: 'div',
        classes: 'r2col4-3'
      }
    });

    conversion.elementToElement({
      model: 'fourColumnsCol4',
      view: {
        name: 'div',
        classes: 'r2col4-4'
      }
    });

  }
}

function createR2columns4(writer) {
  const fourColumns = writer.createElement('fourColumns');
  const fourColumnsCol1 = writer.createElement('fourColumnsCol1');
  const fourColumnsCol2 = writer.createElement('fourColumnsCol2');
  const fourColumnsCol3 = writer.createElement('fourColumnsCol3');
  const fourColumnsCol4 = writer.createElement('fourColumnsCol4');

  writer.append(fourColumnsCol1, fourColumns);
  writer.append(fourColumnsCol2, fourColumns);
  writer.append(fourColumnsCol3, fourColumns);
  writer.append(fourColumnsCol4, fourColumns);

  // There must be at least one paragraph for the description to be editable.
  // See https://github.com/ckeditor/ckeditor5/issues/1464.
  writer.appendElement('paragraph', fourColumnsCol1);
  writer.appendElement('paragraph', fourColumnsCol2);
  writer.appendElement('paragraph', fourColumnsCol3);
  writer.appendElement('paragraph', fourColumnsCol4);

  return fourColumns;
}