qbank_dam-8.x-1.4/js/ckeditor5_plugins/qbank/src/qbankmediaediting.js

import { Plugin } from 'ckeditor5/src/core';
import InsertQBankMediaCommand from './insertqbankmediacommand';
import { toWidget, toWidgetEditable } from 'ckeditor5/src/widget';

export default class QBankMediaEditing extends Plugin {


  init() {
    this._defineSchema();
    this._defineConverters();
    this.editor.commands.add(
      'insertQBankMedia',
      new InsertQBankMediaCommand(this.editor),
    );
  }

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

    schema.register('qbankMedia', {
      isObject: true,
      allowWhere: '$block',
      allowAttributes: ['alt', 'src', 'data-entity-type', 'data-entity-uuid'],
      allowContent: 'source'
    });

    schema.register('qbankVideo', {
      isObject: true,
      allowWhere: '$block',
      allowAttributes: ['width', 'height', 'controls', 'data-entity-type', 'data-entity-uuid']
    });

    schema.register('qbankAudio', {
      isObject: true,
      allowWhere: '$block',
      allowAttributes: ['controls', 'data-entity-type', 'data-entity-uuid']
    });

    schema.register('qbankSource', {
      isInline: true,
      allowWhere: '$block',
      allowAttributes: ['type', 'src']
    });

    schema.register('qbankLink', {
      allowIn: '$root',
      allowChildren: '$text',
      isContent: true,
      isInline: true,
      allowAttributes: ['href', 'target', 'data-entity-type', 'data-entity-uuid'],
    });

  }

  //Convert component into HTML
  _defineConverters() {
    const { conversion } = this.editor;

    //Store model data including attributes into view
    conversion.for('dataDowncast').elementToElement({
      model: 'qbankMedia',
      view: {
        name: 'img'
      },
    }).attributeToAttribute({
      view: {
        name: 'img',
        key: 'src'
      },
      model: 'src'
    }).attributeToAttribute({
      view: {
        name: 'img',
        key: 'data-entity-uuid'
      },
      model: 'data-entity-uuid'
    }).attributeToAttribute({
      view: {
        name: 'img',
        key: 'data-entity-type'
      },
      model: 'data-entity-type'
    });

    conversion.for('dataDowncast').elementToElement({
      model: 'qbankVideo',
      view: {
        name: 'video'
      },
    }).attributeToAttribute({
      view: {
        name: 'video',
        key: 'width'
      },
      model: 'width'
    }).attributeToAttribute({
      view: {
        name: 'video',
        key: 'height'
      },
      model: 'height'
    }).attributeToAttribute({
      view: {
        name: 'video',
        key: 'controls'
      },
      model: 'controls'
    }).attributeToAttribute({
      view: {
        name: 'video',
        key: 'data-entity-uuid'
      },
      model: 'data-entity-uuid'
    }).attributeToAttribute({
      view: {
        name: 'video',
        key: 'data-entity-type'
      },
      model: 'data-entity-type'
    });

    conversion.for('dataDowncast').elementToElement({
      model: 'qbankAudio',
      view: {
        name: 'audio'
      },
    }).attributeToAttribute({
      view: {
        name: 'audio',
        key: 'controls'
      },
      model: 'controls'
    }).attributeToAttribute({
      view: {
        name: 'audio',
        key: 'data-entity-uuid'
      },
      model: 'data-entity-uuid'
    }).attributeToAttribute({
      view: {
        name: 'audio',
        key: 'data-entity-type'
      },
      model: 'data-entity-type'
    });

    //Store model data including attributes into view
    conversion.for('dataDowncast').elementToElement({
      model: 'qbankSource',
      view: {
        name: 'source'
      },
    }).attributeToAttribute({
      view: {
        name: 'source',
        key: 'src'
      },
      model: 'src'
    }).attributeToAttribute({
      view: {
        name: 'source',
        key: 'type'
      },
      model: 'type'
    });

    conversion.for('dataDowncast').elementToElement({
      model: 'qbankLink',
      view: {
        name: 'a'
      },
    }).attributeToAttribute({
      view: {
        name: 'a',
        key: 'target'
      },
      model: 'target'
    }).attributeToAttribute({
      view: {
        name: 'a',
        key: 'href'
      },
      model: 'href'
    }).attributeToAttribute({
      view: {
        name: 'a',
        key: 'data-entity-uuid'
      },
      model: 'data-entity-uuid'
    }).attributeToAttribute({
      view: {
        name: 'a',
        key: 'data-entity-type'
      },
      model: 'data-entity-type'
    });


    //Convert to HTML tag
    conversion.for('editingDowncast').elementToElement({
      model: 'qbankMedia',
      view: (modelElement, { writer: viewWriter }) => {
        const media = viewWriter.createEmptyElement('img', {
          src: modelElement.getAttribute('src'),
          "data-entity-uuid": modelElement.getAttribute('data-entity-uuid'),
          "data-entity-type": modelElement.getAttribute('data-entity-type')
        });

        return media;
      },
    });

    conversion.for('editingDowncast').elementToElement({
      model: 'qbankVideo',
      view: (modelElement, { writer: viewWriter }) => {
        const video = viewWriter.createContainerElement('video', {
          width: modelElement.getAttribute('width'),
          height: modelElement.getAttribute('height'),
          controls: modelElement.getAttribute('controls'),
          "data-entity-uuid": modelElement.getAttribute('data-entity-uuid'),
          "data-entity-type": modelElement.getAttribute('data-entity-type')
        });

        return video;
      },
    });

    conversion.for('editingDowncast').elementToElement({
      model: 'qbankAudio',
      view: (modelElement, { writer: viewWriter }) => {
        const audio = viewWriter.createContainerElement('audio', {
          controls: modelElement.getAttribute('controls'),
          "data-entity-uuid": modelElement.getAttribute('data-entity-uuid'),
          "data-entity-type": modelElement.getAttribute('data-entity-type')
        });

        return audio;
      },
    });

    conversion.for('editingDowncast').elementToElement({
      model: 'qbankSource',
      view: (modelElement, { writer: viewWriter }) => {
        const source = viewWriter.createEmptyElement('source', {
          src: modelElement.getAttribute('src'),
          type: modelElement.getAttribute('type'),
        });

        return source;
      },
    });

    conversion.for('editingDowncast').elementToElement({
      model: 'qbankLink',
      view: (modelElement, { writer: viewWriter }) => {
        const link = viewWriter.createContainerElement('a', {
          href: modelElement.getAttribute('href'),
          target: modelElement.getAttribute('target'),
          "data-entity-uuid": modelElement.getAttribute('data-entity-uuid'),
          "data-entity-type": modelElement.getAttribute('data-entity-type')
        });

        return toWidgetEditable(link, viewWriter);
      },
    });

  }
}