qms-angular 1.0.86 → 1.0.89

package/src/assets/qms-ckeditor-plugin/package.json

@@ -38,7 +38,6 @@
     "@ckeditor/ckeditor5-dev-webpack-plugin": "^24.4.2",
     "@ckeditor/ckeditor5-editor-classic": "^27.1.0",
     "@ckeditor/ckeditor5-essentials": "^27.1.0",
-    "@ckeditor/ckeditor5-heading": "^27.1.0",
     "@ckeditor/ckeditor5-image": "^27.1.0",
     "@ckeditor/ckeditor5-indent": "^27.1.0",
     "@ckeditor/ckeditor5-inspector": "^2.2.2",
@@ -47,7 +46,6 @@
     "@ckeditor/ckeditor5-media-embed": "^27.1.0",
     "@ckeditor/ckeditor5-paragraph": "^27.1.0",
     "@ckeditor/ckeditor5-paste-from-office": "^27.1.0",
-    "@ckeditor/ckeditor5-table": "^27.1.0",
     "@ckeditor/ckeditor5-theme-lark": "^27.1.0",
     "@ckeditor/ckeditor5-word-count": "^27.1.0",
     "@ckeditor/ckeditor5-find-and-replace": "^28.0.1",

package/src/assets/qms-ckeditor-plugin/src/ckeditor.js

@@ -14,7 +14,7 @@ import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder.js';
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor.js';
 import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials.js';
 import Font from '@ckeditor/ckeditor5-font/src/font.js';
-import Heading from '@ckeditor/ckeditor5-heading/src/heading.js';
+import Heading from './plugins/heading/heading.js';
 import Image from '@ckeditor/ckeditor5-image/src/image.js';
 import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption.js';
 import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize.js';
@@ -24,11 +24,11 @@ import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload.js';
 import List from '@ckeditor/ckeditor5-list/src/list.js';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph.js';
 import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
-import Table from '@ckeditor/ckeditor5-table/src/table.js';
-import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties';
-import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties.js';
-import TableSelection from '@ckeditor/ckeditor5-table/src/tableselection.js';
-import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar.js';
+import Table from './plugins/table/table.js';
+import TableProperties from './plugins/table/tableproperties';
+import TableCellProperties from './plugins/table/tablecellproperties.js';
+import TableSelection from './plugins/table/tableselection.js';
+import TableToolbar from './plugins/table/tabletoolbar.js';
 import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation.js';
 import WordCount from '@ckeditor/ckeditor5-word-count/src/wordcount';
 import Anchor from './plugins/anchor/anchor.js';
@@ -67,7 +67,7 @@ import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock';
 import HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline';
 import ToggleToolbar from './plugins/toggletoolbar/toggletoolbar.js';
 import QMSCKEditorBpmnPlugin from './plugins/bpmn/qmsCKEditorBpmnPlugin.js';
-//import QMSCKEditorFlowchartPlugin from './plugins/flowchart/qmsCKEditorFlowchartPlugin.js';
+import QMSCKEditorFlowchartPlugin from './plugins/flowchart/qmsCKEditorFlowchartPlugin.js';
 import TableOfContents from './plugins/tableofcontents/tableofcontents';
 import AboutCKEditor from './plugins/aboutckeditor/aboutckeditor.js';
 //import WProofreader from '@webspellchecker/wproofreader-ckeditor5/src/wproofreader';
@@ -142,7 +142,7 @@ Editor.builtinPlugins = [
 	HorizontalLine,
 	QMSCKEditorBpmnPlugin,
 	AboutCKEditor,
-	//QMSCKEditorFlowchartPlugin,
+	QMSCKEditorFlowchartPlugin,
 	ToggleToolbar,
 	TableOfContents,
 	//WProofreader,

package/src/assets/qms-ckeditor-plugin/src/plugins/common/qmsCKEditorService.js

@@ -80,6 +80,15 @@ export function bpmnNotify(value) {
   );
 }
 
+export function flowchartNotify(value) {
+    window.postMessage(
+        {
+            eventName: constant.QMSCK_FLOWCHART_PLUGIN_MSG,
+            value
+        },
+        '*'
+    );
+}
 
 export function uploadVideoNotify(value) {
     window.postMessage(

package/src/assets/qms-ckeditor-plugin/src/plugins/flowchart/flowchartdialogcommand.js

@@ -0,0 +1,47 @@
+import { Command } from '@ckeditor/ckeditor5-core';
+import * as QMSCKEditorConstant from '../common/qmsCKEditorConstant';
+import * as QMSCKEditorService from '../common/qmsCKEditorService';
+
+export default class FlowchartDialogCommand extends Command {
+	execute() {
+    const editor = this.editor;
+    const isFlowchart = this.isFlowchartImage(editor.editing.view.document.selection.getSelectedElement(), editor.plugins.get('Image'))
+    if (isFlowchart) {
+      const parentElement = editor.editing.view.document.selection.getSelectedElement();
+      const altAtr = parentElement.getChild(0).getAttribute('alt');
+      const arrAtr = altAtr.split("#");
+      const id = arrAtr[1];
+      QMSCKEditorService.flowchartNotify(id);
+    }
+    else {
+      QMSCKEditorService.flowchartNotify('');
+    }
+    window.addEventListener(QMSCKEditorConstant.QMSCK_FLOWCHART_PLUGIN_RESP, function (evt) {
+      editor.model.change( writer => {
+          const imageElement = writer.createElement( 'image', {
+              src: evt.detail.values,
+              alt: evt.detail.key
+          } );
+          // Insert the image in the current selection location.
+          editor.model.insertContent( imageElement, editor.model.document.selection );
+      });
+    }, { once: true });
+	}
+
+  isFlowchartImage( element, image ) {
+    const isImage = element && image.isImageWidget( element );
+
+    if ( !isImage ) {
+      return false;
+    }
+
+    const altAtr = element.getChild(0).getAttribute('alt')
+    if (altAtr && altAtr.includes(QMSCKEditorConstant.QMSCK_FLOWCHART)) {
+      return true;
+    }
+    else {
+      return false;
+    }
+  }
+}
+

package/src/assets/qms-ckeditor-plugin/src/plugins/flowchart/qmsCKEditorFlowchartPlugin.js

@@ -0,0 +1,30 @@
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import FlowchartIcon from '../../themes/icons/flowchart.svg';
+import FlowchartDialogCommand from './flowchartdialogcommand';
+
+export default class QMSCKEditorFlowchartPlugin extends Plugin {
+    init() {
+        const editor = this.editor;
+        const t = editor.t;
+        editor.ui.componentFactory.add('qmsFlowchart', locale => {
+            const view = new ButtonView(locale);
+            const command = editor.commands.get('flowchartDialog');
+            view.set({
+                label: t('Flowchart'),
+                icon: FlowchartIcon,
+                tooltip: true
+            });
+
+            view.bind('isEnabled').to(command);
+
+            view.on('execute', () => {
+              command.execute();
+            });
+
+            return view;
+        });
+
+        editor.commands.add('flowchartDialog', new FlowchartDialogCommand(editor));
+    }
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/heading/heading.js

@@ -0,0 +1,119 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module heading/heading
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+
+import HeadingEditing from './headingediting';
+import HeadingUI from './headingui';
+
+import './theme/heading.css';
+
+/**
+ * The headings feature.
+ *
+ * For a detailed overview, check the {@glink features/headings Headings feature documentation}
+ * and the {@glink api/heading package page}.
+ *
+ * This is a "glue" plugin which loads the {@link module:heading/headingediting~HeadingEditing heading editing feature}
+ * and {@link module:heading/headingui~HeadingUI heading UI feature}.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class Heading extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ HeadingEditing, HeadingUI ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'Heading';
+	}
+}
+
+/**
+ * The configuration of the heading feature. Introduced by the {@link module:heading/headingediting~HeadingEditing} feature.
+ *
+ * Read more in {@link module:heading/heading~HeadingConfig}.
+ *
+ * @member {module:heading/heading~HeadingConfig} module:core/editor/editorconfig~EditorConfig#heading
+ */
+
+/**
+ * The configuration of the heading feature.
+ * The option is used by the {@link module:heading/headingediting~HeadingEditing} feature.
+ *
+ *		ClassicEditor
+ *			.create( {
+ * 				heading: ... // Heading feature config.
+ *			} )
+ *			.then( ... )
+ *			.catch( ... );
+ *
+ * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
+ *
+ * @interface HeadingConfig
+ */
+
+/**
+ * The available heading options.
+ *
+ * The default value is:
+ *
+ *		const headingConfig = {
+ *			options: [
+ *				{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
+ *				{ model: 'heading1', view: 'h2', title: 'Heading 1', class: 'ck-heading_heading1' },
+ *				{ model: 'heading2', view: 'h3', title: 'Heading 2', class: 'ck-heading_heading2' },
+ *				{ model: 'heading3', view: 'h4', title: 'Heading 3', class: 'ck-heading_heading3' }
+ *			]
+ *		};
+ *
+ * It defines 3 levels of headings. In the editor model they will use `heading1`, `heading2`, and `heading3` elements.
+ * Their respective view elements (so the elements output by the editor) will be: `h2`, `h3`, and `h4`. This means that
+ * if you choose "Heading 1" in the headings dropdown the editor will turn the current block to `<heading1>` in the model
+ * which will result in rendering (and outputting to data) the `<h2>` element.
+ *
+ * The `title` and `class` properties will be used by the `headings` dropdown to render available options.
+ * Usually, the first option in the headings dropdown is the "Paragraph" option, hence it's also defined on the list.
+ * However, you don't need to define its view representation because it's handled by
+ * the {@link module:paragraph/paragraph~Paragraph} feature (which is required by
+ * the {@link module:heading/headingediting~HeadingEditing} feature).
+ *
+ * You can **read more** about configuring heading levels and **see more examples** in
+ * the {@glink features/headings Headings} guide.
+ *
+ * Note: In the model you should always start from `heading1`, regardless of how the headings are represented in the view.
+ * That's assumption is used by features like {@link module:autoformat/autoformat~Autoformat} to know which element
+ * they should use when applying the first level heading.
+ *
+ * The defined headings are also available as values passed to the `'heading'` command under their model names.
+ * For example, the below code will apply `<heading1>` to the current selection:
+ *
+ *		editor.execute( 'heading', { value: 'heading1' } );
+ *
+ * @member {Array.<module:heading/heading~HeadingOption>} module:heading/heading~HeadingConfig#options
+ */
+
+/**
+ * Heading option descriptor.
+ *
+ * @typedef {Object} module:heading/heading~HeadingOption
+ * @property {String} model Name of the model element to convert.
+ * @property {module:engine/view/elementdefinition~ElementDefinition} view Definition of a view element to convert from/to.
+ * @property {String} title The user-readable title of the option.
+ * @property {String} class The class which will be added to the dropdown item representing this option.
+ * @property {String} [icon] Icon used by {@link module:heading/headingbuttonsui~HeadingButtonsUI}. It can be omitted when using
+ * the default configuration.
+ * @extends module:engine/conversion/conversion~ConverterDefinition
+ */

package/src/assets/qms-ckeditor-plugin/src/plugins/heading/headingbuttonsui.js

@@ -0,0 +1,103 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module heading/headingbuttonsui
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+import { ButtonView } from 'ckeditor5/src/ui';
+
+import { getLocalizedOptions } from './utils';
+import iconHeading1 from './theme/icons/heading1.svg';
+import iconHeading2 from './theme/icons/heading2.svg';
+import iconHeading3 from './theme/icons/heading3.svg';
+import iconHeading4 from './theme/icons/heading4.svg';
+import iconHeading5 from './theme/icons/heading5.svg';
+import iconHeading6 from './theme/icons/heading6.svg';
+
+const defaultIcons = {
+	heading1: iconHeading1,
+	heading2: iconHeading2,
+	heading3: iconHeading3,
+	heading4: iconHeading4,
+	heading5: iconHeading5,
+	heading6: iconHeading6
+};
+
+/**
+ * The `HeadingButtonsUI` plugin defines a set of UI buttons that can be used instead of the
+ * standard drop down component.
+ *
+ * This feature is not enabled by default by the {@link module:heading/heading~Heading} plugin and needs to be
+ * installed manually to the editor configuration.
+ *
+ * Plugin introduces button UI elements, which names are same as `model` property from {@link module:heading/heading~HeadingOption}.
+ *
+ *		ClassicEditor
+ *			.create( {
+ *				plugins: [ ..., Heading, Paragraph, HeadingButtonsUI, ParagraphButtonUI ]
+ *				heading: {
+ *					options: [
+ *						{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
+ *						{ model: 'heading1', view: 'h2', title: 'Heading 1', class: 'ck-heading_heading1' },
+ *						{ model: 'heading2', view: 'h3', title: 'Heading 2', class: 'ck-heading_heading2' },
+ *						{ model: 'heading3', view: 'h4', title: 'Heading 3', class: 'ck-heading_heading3' }
+ *					]
+ * 				},
+ * 				toolbar: [ 'paragraph', 'heading1', 'heading2', 'heading3' ]
+ *			} )
+ *			.then( ... )
+ *			.catch( ... );
+ *
+ * NOTE: The `'paragraph'` button is defined in by the {@link module:paragraph/paragraphbuttonui~ParagraphButtonUI} plugin
+ * which needs to be loaded manually as well.
+ *
+ * It is possible to use custom icons by providing `icon` config option in {@link module:heading/heading~HeadingOption}.
+ * For the default configuration standard icons are used.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class HeadingButtonsUI extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const options = getLocalizedOptions( this.editor );
+
+		options
+			.filter( item => item.model !== 'paragraph' )
+			.map( item => this._createButton( item ) );
+	}
+
+	/**
+	 * Creates single button view from provided configuration option.
+	 *
+	 * @private
+	 * @param {Object} option
+	 */
+	_createButton( option ) {
+		const editor = this.editor;
+
+		editor.ui.componentFactory.add( option.model, locale => {
+			const view = new ButtonView( locale );
+			const command = editor.commands.get( 'heading' );
+
+			view.label = option.title;
+			view.icon = option.icon || defaultIcons[ option.model ];
+			view.tooltip = true;
+			view.isToggleable = true;
+			view.bind( 'isEnabled' ).to( command );
+			view.bind( 'isOn' ).to( command, 'value', value => value == option.model );
+
+			view.on( 'execute', () => {
+				editor.execute( 'heading', { value: option.model } );
+				editor.editing.view.focus();
+			} );
+
+			return view;
+		} );
+	}
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/heading/headingcommand.js

@@ -0,0 +1,96 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module heading/headingcommand
+ */
+
+import { Command } from 'ckeditor5/src/core';
+import { first } from 'ckeditor5/src/utils';
+
+/**
+ * The heading command. It is used by the {@link module:heading/heading~Heading heading feature} to apply headings.
+ *
+ * @extends module:core/command~Command
+ */
+export default class HeadingCommand extends Command {
+	/**
+	 * Creates an instance of the command.
+	 *
+	 * @param {module:core/editor/editor~Editor} editor Editor instance.
+	 * @param {Array.<String>} modelElements Names of the element which this command can apply in the model.
+	 */
+	constructor( editor, modelElements ) {
+		super( editor );
+
+		/**
+		 * If the selection starts in a heading (which {@link #modelElements is supported by this command})
+		 * the value is set to the name of that heading model element.
+		 * It is  set to `false` otherwise.
+		 *
+		 * @observable
+		 * @readonly
+		 * @member {Boolean|String} #value
+		 */
+
+		/**
+		 * Set of defined model's elements names that this command support.
+		 * See {@link module:heading/heading~HeadingOption}.
+		 *
+		 * @readonly
+		 * @member {Array.<String>}
+		 */
+		this.modelElements = modelElements;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	refresh() {
+		const block = first( this.editor.model.document.selection.getSelectedBlocks() );
+
+		this.value = !!block && this.modelElements.includes( block.name ) && block.name;
+		this.isEnabled = !!block && this.modelElements.some( heading => checkCanBecomeHeading( block, heading, this.editor.model.schema ) );
+	}
+
+	/**
+	 * Executes the command. Applies the heading to the selected blocks or, if the first selected
+	 * block is a heading already, turns selected headings (of this level only) to paragraphs.
+	 *
+	 * @param {Object} options
+	 * @param {String} options.value Name of the element which this command will apply in the model.
+	 * @fires execute
+	 */
+	execute( options ) {
+		const model = this.editor.model;
+		const document = model.document;
+
+		const modelElement = options.value;
+
+		model.change( writer => {
+			const blocks = Array.from( document.selection.getSelectedBlocks() )
+				.filter( block => {
+					return checkCanBecomeHeading( block, modelElement, model.schema );
+				} );
+
+			for ( const block of blocks ) {
+				if ( !block.is( 'element', modelElement ) ) {
+					writer.rename( block, modelElement );
+				}
+			}
+		} );
+	}
+}
+
+// Checks whether the given block can be replaced by a specific heading.
+//
+// @private
+// @param {module:engine/model/element~Element} block A block to be tested.
+// @param {module:heading/headingcommand~HeadingCommand#modelElement} heading Command element name in the model.
+// @param {module:engine/model/schema~Schema} schema The schema of the document.
+// @returns {Boolean}
+function checkCanBecomeHeading( block, heading, schema ) {
+	return schema.checkChild( block.parent, heading ) && !schema.isObject( block );
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/heading/headingediting.js

@@ -0,0 +1,163 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module heading/headingediting
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+import { Paragraph } from 'ckeditor5/src/paragraph';
+import { priorities } from 'ckeditor5/src/utils';
+
+import HeadingCommand from './headingcommand';
+
+const defaultModelElement = 'paragraph';
+
+/**
+ * The headings engine feature. It handles switching between block formats – headings and paragraph.
+ * This class represents the engine part of the heading feature. See also {@link module:heading/heading~Heading}.
+ * It introduces `heading1`-`headingN` commands which allow to convert paragraphs into headings.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class HeadingEditing extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'HeadingEditing';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	constructor( editor ) {
+		super( editor );
+
+		editor.config.define( 'heading', {
+			options: [
+				{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
+				{ model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
+				{ model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
+				{ model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' }
+			]
+		} );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ Paragraph ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+		const options = editor.config.get( 'heading.options' );
+
+		const modelElements = [];
+
+		for ( const option of options ) {
+			// Skip paragraph - it is defined in required Paragraph feature.
+			if ( option.model !== defaultModelElement ) {
+				// Schema.
+				editor.model.schema.register( option.model, {
+					allowIn: '$root',
+					inheritAllFrom: '$block'
+				} );
+
+				editor.conversion.elementToElement( option );
+
+				modelElements.push( option.model );
+			}
+		}
+
+		this._addClassToAllHeading( editor );
+
+		// Register the heading command for this option.
+		editor.commands.add( 'heading', new HeadingCommand( editor, modelElements ) );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	afterInit() {
+		// If the enter command is added to the editor, alter its behavior.
+		// Enter at the end of a heading element should create a paragraph.
+		const editor = this.editor;
+		const enterCommand = editor.commands.get( 'enter' );
+		const options = editor.config.get( 'heading.options' );
+
+		if ( enterCommand ) {
+			this.listenTo( enterCommand, 'afterExecute', ( evt, data ) => {
+				const positionParent = editor.model.document.selection.getFirstPosition().parent;
+				const isHeading = options.some( option => positionParent.is( 'element', option.model ) );
+
+				if ( isHeading && !positionParent.is( 'element', defaultModelElement ) && positionParent.childCount === 0 ) {
+					data.writer.rename( positionParent, defaultModelElement );
+				}
+			} );
+		}
+	}
+
+	/**
+	 * Adds default conversion for `h1` -> `heading1` with a low priority.
+	 *
+	 * @private
+	 * @param {module:core/editor/editor~Editor} editor Editor instance on which to add the `h1` conversion.
+	 */
+	_addDefaultH1Conversion( editor ) {
+		editor.conversion.for( 'upcast' ).elementToElement( {
+			model: 'heading1',
+			view: 'h1',
+			// With a `low` priority, `paragraph` plugin autoparagraphing mechanism is executed. Make sure
+			// this listener is called before it. If not, `h1` will be transformed into a paragraph.
+			converterPriority: priorities.get( 'low' ) + 1
+		} )
+	}
+
+	/**
+	 *  This plugin brings customization to the downcast pipeline of the editor.
+	 *
+	 * @private
+	 * @param {module:core/editor/editor~Editor} editor
+	 */
+	_addClassToAllHeading( editor ) {
+		// Both the data and the editing pipelines are affected by this conversion.
+		editor.conversion.for( 'downcast' ).add( dispatcher => {
+			// Headings are represented in the model as a "heading1" element.
+			// Use the "low" listener priority to apply the changes after the headings feature.
+			dispatcher.on( 'insert:heading1', ( evt, data, conversionApi ) => {
+				const viewWriter = conversionApi.writer;
+	
+				viewWriter.addClass( 'radEdH1', conversionApi.mapper.toViewElement( data.item ) );
+			}, { priority: 'low' } );
+		} );
+
+		editor.conversion.for( 'downcast' ).add( dispatcher => {
+			// Headings are represented in the model as a "heading2" element.
+			// Use the "low" listener priority to apply the changes after the headings feature.
+			dispatcher.on( 'insert:heading2', ( evt, data, conversionApi ) => {
+				const viewWriter = conversionApi.writer;
+	
+				viewWriter.addClass( 'radEdH2', conversionApi.mapper.toViewElement( data.item ) );
+			}, { priority: 'low' } );
+		} );
+
+		editor.conversion.for( 'downcast' ).add( dispatcher => {
+			// Headings are represented in the model as a "heading3" element.
+			// Use the "low" listener priority to apply the changes after the headings feature.
+			dispatcher.on( 'insert:heading3', ( evt, data, conversionApi ) => {
+				const viewWriter = conversionApi.writer;
+	
+				viewWriter.addClass( 'radEdH3', conversionApi.mapper.toViewElement( data.item ) );
+			}, { priority: 'low' } );
+		} );
+	}
+	
+}