qms-angular 1.1.70 → 1.1.72

package/src/assets/qms-ckeditor-plugin/src/plugins/clipboard/clipboardPlugin.js

@@ -0,0 +1,161 @@
+import Plugin from "@ckeditor/ckeditor5-core/src/plugin";
+import ButtonView from "@ckeditor/ckeditor5-ui/src/button/buttonview";
+import cut from "../../themes/icons/cut.svg";
+import copy from "../../themes/icons/copy.svg";
+import paste from "../../themes/icons/paste.svg";
+import pasteText from "../../themes/icons/pasteText.svg";
+import pasteWord from "../../themes/icons/pasteWord.svg";
+import QMSClipboardCommand from "./qms-clipboardcommand";
+import QMSClipboardCommandPaste from "./qms-clipboardcommand-paste";
+
+export default class QMSClipboardPlugin extends Plugin {
+
+    init() {
+        const editor = this.editor;
+        const t = this.editor.locale.t;
+        editor.commands.add('QMSClipboard', new QMSClipboardCommand(editor));
+        editor.commands.add('QMSClipboardPaste', new QMSClipboardCommandPaste(editor));
+
+        //COPY
+        editor.ui.componentFactory.add('copy', locale => {
+            const view = new ButtonView(locale);
+            view.set({
+                label: t('Copy'),
+                icon: copy,
+                tooltip: true,
+            });
+            view.bind('isEnabled').to(editor.commands.get('QMSClipboard'));
+
+            const viewDocument = editor.editing.view.document;
+            viewDocument.on('keydown', (event, data) => {
+                if (data.ctrlKey && data.keyCode === 67) {
+                    document.execCommand('copy');
+                }
+            });
+            view.on('execute', () => {
+                editor.editing.view.focus();
+                document.execCommand('copy');
+            });
+            return view;
+        });
+
+        //CUT
+        editor.ui.componentFactory.add('cut', locale => {
+            const view = new ButtonView(locale);
+            view.set({
+                label: t('Cut'),
+                icon: cut,
+                tooltip: true,
+            });
+            view.bind('isEnabled').to(editor.commands.get('QMSClipboard'));
+
+            const viewDocument = editor.editing.view.document;
+            viewDocument.on('keydown', (event, data) => {
+                if (data.ctrlKey && data.keyCode === 88) {
+                    document.execCommand('cut');
+                }
+            });
+            view.on('execute', () => {
+                document.execCommand('cut');
+            });
+            return view;
+        });
+
+        //PASTE
+        editor.ui.componentFactory.add('paste', locale => {
+            const view = new ButtonView(locale);
+            view.set({
+                label: t('Paste'),
+                icon: paste,
+                tooltip: true,
+            });
+            view.bind('isEnabled').to(editor.commands.get('QMSClipboardPaste'));
+
+            view.on('execute', async () => {
+                editor.editing.view.focus();
+                const clipboardData = await navigator.clipboard.read();
+
+                clipboardData.forEach(item => {
+                    if (item.types.includes('text/html')) {
+                        item.getType('text/html').then(blob => {
+                            const reader = new FileReader();
+                            reader.onload = () => {
+                                let htmlString = reader.result;
+                                const fragment = editor.data.processor.toView(htmlString);
+                                const modelFragment = editor.data.toModel(fragment);
+                                editor.model.insertContent(modelFragment);
+                            };
+                            reader.readAsText(blob);
+                        });
+                    }
+                });
+            });
+            return view;
+        });
+
+        //PASTE TEXT
+        editor.ui.componentFactory.add('pasteText', locale => {
+            const view = new ButtonView(locale);
+            view.set({
+                label: t('Paste as plain text'),
+                icon: pasteText,
+                tooltip: true,
+            });
+
+            view.bind('isEnabled').to(editor.commands.get('QMSClipboardPaste'));
+
+            view.on('execute', async () => {
+                editor.editing.view.focus();
+                const htmlString = await navigator.clipboard.readText();
+                if (htmlString) {
+                    const lines = htmlString.split('\n');
+                    editor.model.change(writer => {
+                        const fragment = writer.createDocumentFragment();
+                        lines.forEach((line, index) => {
+                            writer.appendText(line, fragment);
+                            if (index < lines.length - 1) {
+                                const softBreak = writer.createElement('softBreak');
+                                writer.append(softBreak, fragment);
+                            }
+                        });
+                        editor.model.insertContent(fragment, editor.model.document.selection);
+                    });
+                }
+            });
+            return view;
+        });
+
+        //PASTE WORD
+        editor.ui.componentFactory.add('pasteWord', locale => {
+            const view = new ButtonView(locale);
+            view.set({
+                label: t('Paste from Word'),
+                icon: pasteWord,
+                tooltip: true,
+            });
+
+            view.bind('isEnabled').to(editor.commands.get('QMSClipboardPaste'));
+
+            view.on('execute', async () => {
+                editor.editing.view.focus();
+                const clipboardData = await navigator.clipboard.read();
+
+                clipboardData.forEach(item => {
+                    if (item.types.includes('text/html')) {
+                        item.getType('text/html').then(blob => {
+                            const reader = new FileReader();
+                            reader.onload = () => {
+                                let htmlString = reader.result;
+                                const fragment = editor.data.processor.toView(htmlString);
+                                const modelFragment = editor.data.toModel(fragment);
+                                editor.model.insertContent(modelFragment);
+                            };
+                            reader.readAsText(blob);
+                        });
+                    }
+                });
+            });
+            return view;
+        });
+    }
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/clipboard/qms-clipboardcommand-paste.js

@@ -0,0 +1,20 @@
+import { Command } from '@ckeditor/ckeditor5-core';
+
+export default class QMSClipboardCommandPaste extends Command {
+
+    constructor(editor) {
+        super(editor);
+
+    }
+
+    refresh() {
+        const selection = this.editor.model.document.selection;
+        this.isEnabled = !this.editor.isReadOnly;
+    }
+
+    // disable button in toolbar
+    execute() {
+
+    }
+}
+

package/src/assets/qms-ckeditor-plugin/src/plugins/clipboard/qms-clipboardcommand.js

@@ -0,0 +1,21 @@
+import { Command } from '@ckeditor/ckeditor5-core';
+
+export default class QMSClipboardCommand extends Command {
+
+    constructor(editor) {
+        super(editor);
+
+    }
+
+    refresh() {
+        const selection = this.editor.model.document.selection;
+        this.isEnabled = !this.editor.isReadOnly && !selection.isCollapsed;
+    }
+
+    // disable button in toolbar
+    execute() {
+
+    }
+}
+
+

package/src/assets/qms-ckeditor-plugin/src/plugins/showBlocks/showBlocksPlugin.js

@@ -0,0 +1,131 @@
+import Plugin from "@ckeditor/ckeditor5-core/src/plugin";
+import ButtonView from "@ckeditor/ckeditor5-ui/src/button/buttonview";
+import showblocksIcon from "../../themes/icons/show-blocks.svg";
+import ShowBlockscommand from "./showBlockscommand";
+
+export default class ShowBlocksnPlugin extends Plugin {
+    init() {
+        const editor = this.editor;
+        const t = this.editor.locale.t;
+        editor.commands.add('showblocks', new ShowBlockscommand(editor));
+        this.isActive = false;
+        //
+        editor.ui.componentFactory.add('showblocks', locale => {
+            const view = new ButtonView(locale);
+            view.set({
+                label: t('Showblocks'),
+                icon: showblocksIcon,
+                tooltip: true,
+            });
+            view.bind('isEnabled').to(editor.commands.get('showblocks'));
+            this.updateButtonIcon(view);
+
+            view.on('execute', () => {
+                this.isActive = !this.isActive;
+                editor.editing.view.focus();
+                this.executeEvent(editor);
+                this.updateButtonIcon(view);
+            });
+            return view;
+        });
+
+    }
+
+    executeEvent(editor) {
+        // If "Show Blocks" is active, add classes to outline blocks.
+        if (this.isActive) {
+            editor.editing.view.change(writer => {
+                for (const element of editor.editing.view.document.getRoot().getChildren()) {
+                    if (this.isBlockElement(element)) {
+                        writer.addClass('show-block-outline', element);
+
+                        const labelText = this.getBlockLabel(element);
+                        const labelElement = writer.createUIElement('span', {
+                            class: 'block-label'
+                        }, function (domDocument) {
+                            const domElement = this.toDomElement(domDocument);
+                            domElement.textContent = labelText;
+                            return domElement;
+                        });
+
+                        writer.insert(writer.createPositionAt(element, 0), labelElement);
+                    }
+
+                    var childs = Array.from(element.getChildren());
+                    if (childs.length > 0) {
+                        for (const child of childs) {
+                            if (this.isBlockElement(child) && Array.from(child.getChildren()).length > 0) {
+                                writer.addClass('show-block-outline', child);
+
+                                const labelText = this.getBlockLabel(child);
+                                const labelElement = writer.createUIElement('span', {
+                                    class: 'block-label'
+                                }, function (domDocument) {
+                                    const domElement = this.toDomElement(domDocument);
+                                    domElement.textContent = labelText;
+                                    return domElement;
+                                });
+
+                                writer.insert(writer.createPositionAt(child, 0), labelElement);
+                            }
+                        }
+                    }
+                }
+            });
+        } else {
+            // Remove classes to hide block outlines.
+            editor.editing.view.change(writer => {
+                for (const element of editor.editing.view.document.getRoot().getChildren()) {
+                    writer.removeClass('show-block-outline', element);
+
+                    for (const child of element.getChildren()) {
+                        if (child.hasClass && child.hasClass('block-label')) {
+                            writer.remove(child);
+                        }
+                    }
+                    var childs = Array.from(element.getChildren());
+                    if (childs.length > 0) {
+                        for (const children of childs) {
+                            if (children.hasClass && children.hasClass('show-block-outline')) {
+                                writer.removeClass('show-block-outline', children);
+                                const items = Array.from(children.getChildren());
+                                if (items.length > 0) {
+                                    for (const item of items) {
+                                        if (item.hasClass && item.hasClass('block-label')) {
+                                            writer.remove(item);
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+        }
+    }
+
+    isBlockElement(element) {
+        // Define which elements are considered blocks.
+        return ['p', 'h1', 'h2', 'h3', 'div', 'blockquote', 'table'].includes(element.name);
+    }
+
+    getBlockLabel(element) {
+        const labels = {
+            paragraph: 'P',
+            heading1: 'H1',
+            heading2: 'H2',
+            heading3: 'H3',
+            div: 'DIV',
+            blockquote: 'BLOCKQUOTE'
+        };
+        return labels[element.name] || element.name.toUpperCase();
+    }
+
+    updateButtonIcon(view) {
+        if (this.isActive) {
+            view.class = 'show-block-button-active';
+        } else {
+            view.class = 'show-block-button';
+        }
+    }
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/showBlocks/showBlockscommand.js

@@ -0,0 +1,13 @@
+import { Command } from '@ckeditor/ckeditor5-core';
+
+export default class ShowBlockscommand extends Command {
+
+    constructor(editor) {
+        super(editor);
+
+    }
+    // disable button in toolbar
+    execute() {
+
+    }
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/softHyphen/softHyphenPlugin.js

@@ -0,0 +1,91 @@
+import Plugin from "@ckeditor/ckeditor5-core/src/plugin";
+import ButtonView from "@ckeditor/ckeditor5-ui/src/button/buttonview";
+import softHyphenIcon from "../../themes/icons/soft-hyphen.svg";
+import SoftHyphenCommand from "./softHyphencommand";
+
+export default class SoftHyphenPlugin extends Plugin {
+    init() {
+        const editor = this.editor;
+        const t = this.editor.locale.t;
+        editor.commands.add('softHyphen', new SoftHyphenCommand(editor));
+        
+        // Step 1: Define the 'span' element in the schema
+        editor.model.schema.register('span', {
+            inheritAllFrom: '$inlineObject',
+            allowContentOf: '$block',
+            allowWhere: '$text',
+            allowAttributes: ['class'],
+            isInline: true,
+            isObject: false
+        });
+
+        // Step 2: Handle upcast (when content is loaded into the editor)
+        editor.conversion.for('upcast').elementToElement({
+            view: {
+                name: 'span',
+                classes: 'shy'
+            },
+            model: (viewElement, { writer }) => {
+                return writer.createElement('span', { class: 'shy' });
+            }
+        });
+        // Step 3: Handle downcast (when content is exported from the editor)
+        editor.conversion.for('downcast').elementToElement({
+            model: 'span',
+            view: (modelElement, { writer }) => {
+                return writer.createContainerElement('span', { class: 'shy' });
+            }
+        });
+
+        editor.ui.componentFactory.add("softHyphen", (locale) => {
+            const view = new ButtonView(locale);
+            view.set({
+                label: t('SoftHyphen'),
+                icon: softHyphenIcon,
+                tooltip: true
+            });
+            view.bind('isEnabled').to(editor.commands.get('softHyphen'));
+
+            const viewDocument = editor.editing.view.document;
+            viewDocument.on('keydown', (event, data) => {
+                // Step 4: Insert the 'span' and move cursor after it
+                if (data.ctrlKey && data.shiftKey && data.keyCode === 189) {
+                    this.executeEvent(editor);
+                    data.preventDefault();
+                    event.stop();
+                }
+                if (data.keyCode === 8 || data.keyCode === 46) { //  backspace: 8 //delete: 46
+                    const selection = editor.model.document.selection;
+                    const position = selection.getFirstPosition();
+                    const shyElement = data.keyCode === 46
+                        ? position.nodeAfter
+                        : position.nodeBefore;
+                    if (shyElement && shyElement.is('element', 'span') && shyElement.getAttribute('class') === 'shy') {
+                        data.preventDefault();    // Prevent default delete/backspace action
+                        editor.model.change(writer => {
+                            writer.remove(shyElement); // Remove the shy span element
+                        });
+                    }
+                }
+            });
+            view.on("execute", (event, data) => {
+                this.executeEvent(editor);
+            });
+            return view;
+        });
+    }
+
+    executeEvent(editor) {
+        editor.model.change(writer => {
+            const shySpan = writer.createElement('span', { class: 'shy' });
+            const shyText = writer.createText('\u00AD');
+            writer.insert(shyText, shySpan);
+
+            const selectionPosition = editor.model.document.selection.getFirstPosition();
+            writer.insert(shySpan, selectionPosition);
+
+            const positionAfterSpan = writer.createPositionAfter(shySpan);
+            writer.setSelection(positionAfterSpan);
+        });
+    }
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/softHyphen/softHyphencommand.js

@@ -0,0 +1,13 @@
+import { Command } from '@ckeditor/ckeditor5-core';
+
+export default class SoftHyphenCommand extends Command {
+
+    constructor(editor) {
+        super(editor);
+
+    }
+    // disable button in toolbar
+    execute() {
+
+    }
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/table/verticalAlign/verticalAlignPlugin.js

@@ -0,0 +1,102 @@
+import Plugin from "@ckeditor/ckeditor5-core/src/plugin";
+import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
+import ButtonView from "@ckeditor/ckeditor5-ui/src/button/buttonview";
+import { icons } from 'ckeditor5/src/core';
+import VerticalAligncommand from "./verticalAligncommand";
+
+const ALIGNMENT_ICONS = {
+    top: icons.alignTop,
+    middle: icons.alignMiddle,
+    bottom: icons.alignBottom
+};
+
+export default class VerticalAlignPlugin extends Plugin {
+    init() {
+        const editor = this.editor;
+        const t = this.editor.locale.t;
+        editor.commands.add('verticalAlign', new VerticalAligncommand(editor));
+
+        editor.model.schema.extend('tableCell', {
+            allowAttributes: 'verticalAlign'
+        });
+
+        editor.conversion.for('downcast').attributeToAttribute({
+            model: 'verticalAlign',
+            view: (alignment) => {
+                return {
+                    key: 'style',
+                    value: {
+                        'vertical-align': alignment
+                    }
+                };
+            },
+            converterPriority: 'low'
+        });
+        let items = [
+            { label: t('Vertical Align Top'), value: 'top', icon: ALIGNMENT_ICONS.top, class: 'qms-verticalAlign-selected' },
+            { label: t('Vertical Align Middle'), value: 'middle', icon: ALIGNMENT_ICONS.middle, class: 'qms-verticalAlign' },
+            { label: t('Vertical Align Bottom'), value: 'bottom', icon: ALIGNMENT_ICONS.bottom, class: 'qms-verticalAlign' }
+        ];
+
+        editor.ui.componentFactory.add("verticalAlign", (locale) => {
+            const dropdownView = createDropdown(locale);
+            dropdownView.buttonView.set({
+                label: t('Vertical Alignment'),
+                icon: ALIGNMENT_ICONS.top,
+                tooltip: true
+            });
+            dropdownView.bind('isEnabled').to(editor.commands.get('verticalAlign'));
+
+            items.forEach(item => {
+                const buttonView = new ButtonView(locale);
+                buttonView.set({
+                    label: item.label,
+                    icon: item.icon,
+                    tooltip: true,
+                    class: item.class,
+                });
+
+                buttonView.on('execute', () => {
+                    dropdownView.buttonView.icon = item.icon;
+                    dropdownView.panelView.children._items.forEach(btn => {
+                        btn.class = 'qms-verticalAlign';
+                    });
+                    buttonView.class = 'qms-verticalAlign-selected';
+
+                    const model = editor.model;
+                    const selection = model.document.selection;
+
+                    for (const range of selection.getRanges()) {
+
+                        // on focus cell <td>
+                        let targetElement = range.start.parent;
+                        while (targetElement && !targetElement.is('element', 'tableCell')) {
+                            targetElement = targetElement.parent;
+                        }
+                        if (targetElement) {
+                            model.change(writer => {
+                                writer.setAttribute('verticalAlign', item.value, targetElement);
+                            });
+                            break;
+                        }
+
+                        // on select <tr>
+                        for (const cell of range.getItems()) {
+                            if (cell.is('element', 'tableCell')) {
+                                model.change(writer => {
+                                    writer.setAttribute('verticalAlign', item.value, cell);
+                                });
+                            }
+                        }
+                    }
+
+                    dropdownView.isOpen = false;
+                });
+
+                dropdownView.panelView.children.add(buttonView);
+            });
+            return dropdownView;
+        });
+
+    }
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/table/verticalAlign/verticalAligncommand.js

@@ -0,0 +1,13 @@
+import { Command } from '@ckeditor/ckeditor5-core';
+
+export default class VerticalAligncommand extends Command {
+
+    constructor(editor) {
+        super(editor);
+
+    }
+    // disable button in toolbar
+    execute() {
+
+    }
+}