@acorex/cdk 22.1.8 → 22.2.0-next.0

package/fesm2022/acorex-cdk-wysiwyg.mjs

@@ -1,88 +1,740 @@
 import { isPlatformBrowser } from '@angular/common';
-import { signal, inject, PLATFORM_ID } from '@angular/core';
+import * as i0 from '@angular/core';
+import { signal, inject, PLATFORM_ID, Injectable } from '@angular/core';
+import { Extension, Node, mergeAttributes } from '@tiptap/core';
+
+const AX_WYSIWYG_FONT_SIZE_VALUES = {
+    small: '0.75em',
+    large: '1.5em',
+    huge: '2.5em',
+};
+const AXWysiwygFontSizeExtension = Extension.create({
+    name: 'axWysiwygFontSize',
+    addGlobalAttributes() {
+        return [
+            {
+                types: ['textStyle'],
+                attributes: {
+                    fontSize: {
+                        default: null,
+                        parseHTML: (element) => element.style.fontSize?.replace(/['"]+/g, '') || null,
+                        renderHTML: (attributes) => {
+                            if (!attributes['fontSize']) {
+                                return {};
+                            }
+                            return { style: `font-size: ${attributes['fontSize']}` };
+                        },
+                    },
+                },
+            },
+        ];
+    },
+    addCommands() {
+        return {
+            setAxWysiwygFontSize: (size) => ({ chain }) => {
+                if (!size) {
+                    return chain().focus().unsetMark('textStyle').run();
+                }
+                const cssSize = AX_WYSIWYG_FONT_SIZE_VALUES[size];
+                return chain().focus().setMark('textStyle', { fontSize: cssSize }).run();
+            },
+        };
+    },
+});
+
+const AX_DEFAULT_WYSIWYG_FEATURES = {
+    textAlign: true,
+    image: true,
+    link: true,
+    video: true,
+    color: true,
+    highlight: true,
+    placeholder: true,
+    fontSize: true,
+    textDirection: true,
+};
+const AX_EMPTY_WYSIWYG_STATE = {
+    bold: false,
+    italic: false,
+    underline: false,
+    strike: false,
+    code: false,
+    codeBlock: false,
+    headingLevel: null,
+    bulletList: false,
+    orderedList: false,
+    blockquote: false,
+    textAlign: null,
+    textColor: null,
+    highlightColor: null,
+    linkHref: null,
+    fontSize: null,
+    textDirection: null,
+    canUndo: false,
+    canRedo: false,
+    isEmpty: true,
+    isFocused: false,
+};
+
+const AXWysiwygTextDirectionExtension = Extension.create({
+    name: 'axWysiwygTextDirection',
+    addGlobalAttributes() {
+        return [
+            {
+                types: ['paragraph', 'heading'],
+                attributes: {
+                    dir: {
+                        default: null,
+                        parseHTML: (element) => element.getAttribute('dir'),
+                        renderHTML: (attributes) => {
+                            if (!attributes['dir']) {
+                                return {};
+                            }
+                            return { dir: attributes['dir'] };
+                        },
+                    },
+                },
+            },
+        ];
+    },
+    addCommands() {
+        return {
+            setAxWysiwygTextDirection: (direction) => ({ chain }) => chain()
+                .focus()
+                .updateAttributes('paragraph', { dir: direction })
+                .updateAttributes('heading', { dir: direction })
+                .run(),
+        };
+    },
+});
+
+function toEmbedSrc(src) {
+    const trimmed = src.trim();
+    if (!trimmed) {
+        return trimmed;
+    }
+    try {
+        const url = new URL(trimmed);
+        if (url.hostname.includes('youtube.com') && url.searchParams.get('v')) {
+            return `https://www.youtube.com/embed/${url.searchParams.get('v')}`;
+        }
+        if (url.hostname === 'youtu.be') {
+            return `https://www.youtube.com/embed/${url.pathname.slice(1)}`;
+        }
+    }
+    catch {
+        return trimmed;
+    }
+    return trimmed;
+}
+const AXWysiwygVideoExtension = Node.create({
+    name: 'video',
+    group: 'block',
+    atom: true,
+    addOptions() {
+        return {
+            inline: false,
+            allowBase64: false,
+            HTMLAttributes: {},
+        };
+    },
+    addAttributes() {
+        return {
+            src: {
+                default: null,
+            },
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: 'div[data-wysiwyg-video] iframe',
+            },
+            {
+                tag: 'iframe[src]',
+            },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        const src = HTMLAttributes['src'];
+        return [
+            'div',
+            mergeAttributes(this.options.HTMLAttributes, { 'data-wysiwyg-video': '' }),
+            [
+                'iframe',
+                mergeAttributes({
+                    src,
+                    frameborder: '0',
+                    allowfullscreen: 'true',
+                    allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',
+                }),
+            ],
+        ];
+    },
+    addCommands() {
+        return {
+            setVideo: ({ src }) => ({ commands }) => commands.insertContent({
+                type: this.name,
+                attrs: { src: toEmbedSrc(src) },
+            }),
+        };
+    },
+});
+
+async function loadAXWysiwygExtensions(options) {
+    const features = { ...AX_DEFAULT_WYSIWYG_FEATURES, ...options?.features };
+    const [starterKitMod, textStyleMod, colorMod, highlightMod, underlineMod] = await Promise.all([
+        import('@tiptap/starter-kit'),
+        import('@tiptap/extension-text-style'),
+        import('@tiptap/extension-color'),
+        import('@tiptap/extension-highlight'),
+        import('@tiptap/extension-underline'),
+    ]);
+    const extensions = [
+        starterKitMod.default.configure({
+            link: features.link ? { openOnClick: false } : false,
+        }),
+        underlineMod.default,
+    ];
+    if (features.color || features.fontSize) {
+        extensions.push(textStyleMod.TextStyle);
+    }
+    if (features.color) {
+        extensions.push(colorMod.Color);
+    }
+    if (features.highlight) {
+        extensions.push(highlightMod.default.configure({ multicolor: true }));
+    }
+    if (features.fontSize) {
+        extensions.push(AXWysiwygFontSizeExtension);
+    }
+    if (features.textDirection) {
+        extensions.push(AXWysiwygTextDirectionExtension);
+    }
+    if (features.textAlign) {
+        const textAlignMod = await import('@tiptap/extension-text-align');
+        extensions.push(textAlignMod.default.configure({
+            types: ['heading', 'paragraph'],
+        }));
+    }
+    if (features.image) {
+        const imageMod = await import('@tiptap/extension-image');
+        extensions.push(imageMod.default.configure({
+            inline: true,
+            allowBase64: true,
+        }));
+    }
+    if (features.video) {
+        extensions.push(AXWysiwygVideoExtension);
+    }
+    if (features.placeholder && options?.placeholder) {
+        const { Placeholder } = await import('@tiptap/extensions');
+        extensions.push(Placeholder.configure({
+            placeholder: options.placeholder,
+        }));
+    }
+    return extensions;
+}
 
 class AXWysiwyg {
     constructor() {
-        this.quillObj = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "quillObj" }] : /* istanbul ignore next */ []));
+        this.editor = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editor" }] : /* istanbul ignore next */ []));
+        this.state = signal(AX_EMPTY_WYSIWYG_STATE, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+        this.ready = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ready" }] : /* istanbul ignore next */ []));
         this.platformId = inject(PLATFORM_ID);
+        this.destroyed = false;
+        this.applyingContent = false;
     }
-    async init(container, option) {
-        if (!isPlatformBrowser(this.platformId))
+    async init(container, options = {}) {
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        const element = typeof container === 'string' ? document.querySelector(container) : container;
+        if (!element) {
             return;
-        await import('quill').then((e) => {
-            const wysiwygObject = new e.default(container, option);
-            this.quillObj.set(wysiwygObject);
+        }
+        this.destroyed = false;
+        const editable = options.readOnly === true ? false : (options.editable ?? true);
+        const extensions = await loadAXWysiwygExtensions({
+            features: options.features,
+            placeholder: options.placeholder,
         });
+        if (this.destroyed) {
+            return;
+        }
+        const { Editor } = await import('@tiptap/core');
+        if (this.destroyed) {
+            return;
+        }
+        const allExtensions = [...extensions, ...(options.extensions ?? [])];
+        const editor = new Editor({
+            element,
+            extensions: allExtensions,
+            content: options.content ?? '',
+            editable,
+            editorProps: {
+                attributes: {
+                    class: 'tiptap',
+                },
+            },
+            onUpdate: ({ editor: ed }) => {
+                this.refreshState(ed);
+                if (!this.applyingContent) {
+                    options.onUpdate?.(ed);
+                }
+            },
+            onSelectionUpdate: ({ editor: ed }) => {
+                this.refreshState(ed);
+                options.onSelectionUpdate?.(ed);
+            },
+            onFocus: ({ editor: ed }) => {
+                this.refreshState(ed);
+                options.onFocus?.(ed);
+            },
+            onBlur: ({ editor: ed }) => {
+                this.refreshState(ed);
+                options.onBlur?.(ed);
+            },
+        });
+        this.editor.set(editor);
+        this.ready.set(true);
+        this.refreshState(editor);
+    }
+    destroy() {
+        this.destroyed = true;
+        const ed = this.editor();
+        ed?.destroy();
+        this.editor.set(null);
+        this.ready.set(false);
+        this.state.set(AX_EMPTY_WYSIWYG_STATE);
+    }
+    setContent(value, emit = false) {
+        const ed = this.editor();
+        if (!ed) {
+            return;
+        }
+        const html = value?.trim() ? value : '';
+        this.applyingContent = true;
+        try {
+            ed.commands.setContent(html, { emitUpdate: emit });
+            this.refreshState(ed);
+        }
+        finally {
+            this.applyingContent = false;
+        }
+    }
+    getHTML() {
+        return this.editor()?.getHTML() ?? '';
+    }
+    get JSONoutput() {
+        return this.editor()?.getJSON() ?? null;
+    }
+    getText() {
+        return this.editor()?.getText() ?? '';
+    }
+    isEmpty() {
+        return this.editor()?.isEmpty ?? true;
+    }
+    setEditable(editable) {
+        this.editor()?.setEditable(editable);
+        const ed = this.editor();
+        if (ed) {
+            this.refreshState(ed);
+        }
+    }
+    get HTMLoutput() {
+        return this.getHTML();
     }
     bold(value) {
-        this.quillObj().format('bold', value);
+        this.setMarkActive('bold', value);
     }
     italic(value) {
-        this.quillObj().format('italic', value);
+        this.setMarkActive('italic', value);
     }
     underLine(value) {
-        this.quillObj().format('underline', value);
+        this.setMarkActive('underline', value);
     }
     strike(value) {
-        this.quillObj().format('strike', value);
+        this.setMarkActive('strike', value);
     }
     color(value) {
-        this.quillObj().format('color', value);
+        if (value) {
+            this.setColor(value);
+        }
+        else {
+            this.unsetColor();
+        }
     }
     header(value) {
-        this.quillObj().format('header', value);
+        const ed = this.editor();
+        if (!ed) {
+            return;
+        }
+        if (value >= 1 && value <= 6) {
+            ed.chain()
+                .focus()
+                .toggleHeading({ level: value })
+                .run();
+        }
+        else {
+            ed.chain().focus().setParagraph().run();
+        }
     }
     list(value) {
-        this.quillObj().format('list', value);
+        const ed = this.editor();
+        if (!ed) {
+            return;
+        }
+        const chain = ed.chain().focus();
+        if (value === 'bullet') {
+            chain.toggleBulletList().run();
+        }
+        else if (value === 'ordered') {
+            chain.toggleOrderedList().run();
+        }
+        else {
+            chain.liftListItem('listItem').run();
+        }
     }
     align(value) {
         if (value === 'left') {
-            this.quillObj().format('align', '');
+            this.setTextAlign('left');
         }
         else {
-            this.quillObj().format('align', value);
+            this.setTextAlign(value);
         }
     }
     direction(value) {
-        this.quillObj().format('direction', value);
+        this.setTextDirection(value);
     }
     fontSize(value, range) {
-        this.quillObj().formatText(range.index, range.length, 'size', value);
+        const ed = this.editor();
+        if (!ed || !range) {
+            return;
+        }
+        const from = range.index;
+        const to = range.index + range.length;
+        if (value === false) {
+            ed.chain().focus().setTextSelection({ from, to }).setAxWysiwygFontSize(null).run();
+            return;
+        }
+        ed.chain().focus().setTextSelection({ from, to }).setAxWysiwygFontSize(value).run();
     }
-    get HTMLoutput() {
-        return this.quillObj().root.innerHTML;
+    background(value) {
+        if (value) {
+            this.setHighlight(value);
+        }
+        else {
+            this.unsetHighlight();
+        }
+    }
+    addImage(value) {
+        this.insertImage(value);
+    }
+    insertVideo(src) {
+        this.editor()?.chain().focus().setVideo({ src }).run();
+    }
+    codeBlock(range, status) {
+        const ed = this.editor();
+        if (!ed || !range) {
+            return;
+        }
+        const from = range.index;
+        const to = range.index + range.length;
+        if (status) {
+            ed.chain().focus().setTextSelection({ from, to }).toggleCodeBlock().run();
+        }
+        else {
+            ed.chain().focus().setTextSelection({ from, to }).setParagraph().run();
+        }
+    }
+    focus() {
+        this.editor()?.commands.focus();
+    }
+    blur() {
+        this.editor()?.commands.blur();
+    }
+    toggleBold() {
+        this.editor()?.chain().focus().toggleBold().run();
+    }
+    toggleItalic() {
+        this.editor()?.chain().focus().toggleItalic().run();
+    }
+    toggleUnderline() {
+        this.editor()?.chain().focus().toggleUnderline().run();
+    }
+    toggleStrike() {
+        this.editor()?.chain().focus().toggleStrike().run();
+    }
+    toggleCode() {
+        this.editor()?.chain().focus().toggleCode().run();
+    }
+    toggleCodeBlock() {
+        this.editor()?.chain().focus().toggleCodeBlock().run();
+    }
+    toggleHeading(level) {
+        this.editor()?.chain().focus().toggleHeading({ level }).run();
+    }
+    setParagraph() {
+        this.editor()?.chain().focus().setParagraph().run();
+    }
+    toggleBulletList() {
+        this.editor()?.chain().focus().toggleBulletList().run();
+    }
+    toggleOrderedList() {
+        this.editor()?.chain().focus().toggleOrderedList().run();
+    }
+    toggleBlockquote() {
+        this.editor()?.chain().focus().toggleBlockquote().run();
+    }
+    setTextAlign(align) {
+        this.editor()?.chain().focus().setTextAlign(align).run();
+    }
+    setTextDirection(direction) {
+        this.editor()?.chain().focus().setAxWysiwygTextDirection(direction).run();
+    }
+    setFontSize(size) {
+        this.editor()?.chain().focus().setAxWysiwygFontSize(size).run();
+    }
+    setColor(color) {
+        this.editor()?.chain().focus().setColor(color).run();
+    }
+    unsetColor() {
+        this.editor()?.chain().focus().unsetColor().run();
+    }
+    setHighlight(color) {
+        this.editor()?.chain().focus().setHighlight({ color }).run();
+    }
+    unsetHighlight() {
+        this.editor()?.chain().focus().unsetHighlight().run();
+    }
+    setLink(href) {
+        this.editor()?.chain().focus().extendMarkRange('link').setLink({ href }).run();
+    }
+    unsetLink() {
+        this.editor()?.chain().focus().unsetLink().run();
+    }
+    insertImage(src, alt) {
+        this.editor()?.chain().focus().setImage({ src, alt }).run();
     }
     undo() {
-        this.quillObj().history.undo();
+        const ed = this.editor();
+        if (!ed) {
+            return;
+        }
+        ed.chain().focus().undo().run();
+        this.refreshState(ed);
     }
     redo() {
-        this.quillObj().history.redo();
+        const ed = this.editor();
+        if (!ed) {
+            return;
+        }
+        ed.chain().focus().redo().run();
+        this.refreshState(ed);
     }
-    background(value) {
-        this.quillObj().format('background', value);
+    clearFormatting() {
+        this.editor()?.chain().focus().clearNodes().unsetAllMarks().run();
     }
-    addImage(value) {
-        const range = this.quillObj().getSelection();
-        const currentIndex = range?.index;
-        this.quillObj().insertEmbed(currentIndex, 'image', value);
+    execute(command, payload) {
+        switch (command) {
+            case 'bold':
+                this.toggleBold();
+                break;
+            case 'italic':
+                this.toggleItalic();
+                break;
+            case 'underline':
+                this.toggleUnderline();
+                break;
+            case 'strike':
+                this.toggleStrike();
+                break;
+            case 'code':
+                this.toggleCode();
+                break;
+            case 'codeBlock':
+                this.toggleCodeBlock();
+                break;
+            case 'heading':
+                if (typeof payload === 'number') {
+                    this.toggleHeading(payload);
+                }
+                break;
+            case 'paragraph':
+                this.setParagraph();
+                break;
+            case 'bulletList':
+                this.toggleBulletList();
+                break;
+            case 'orderedList':
+                this.toggleOrderedList();
+                break;
+            case 'blockquote':
+                this.toggleBlockquote();
+                break;
+            case 'textAlign':
+                if (typeof payload === 'string') {
+                    this.setTextAlign(payload);
+                }
+                break;
+            case 'direction':
+                if (payload === 'rtl' || payload === 'ltr') {
+                    this.setTextDirection(payload);
+                }
+                break;
+            case 'fontSize':
+                if (payload === null) {
+                    this.setFontSize(null);
+                }
+                else if (payload === 'small' || payload === 'large' || payload === 'huge') {
+                    this.setFontSize(payload);
+                }
+                break;
+            case 'color':
+                if (typeof payload === 'string') {
+                    this.setColor(payload);
+                }
+                else {
+                    this.unsetColor();
+                }
+                break;
+            case 'highlight':
+                if (typeof payload === 'string') {
+                    this.setHighlight(payload);
+                }
+                else {
+                    this.unsetHighlight();
+                }
+                break;
+            case 'link':
+                if (typeof payload === 'string' && payload) {
+                    this.setLink(payload);
+                }
+                else {
+                    this.unsetLink();
+                }
+                break;
+            case 'image':
+                if (typeof payload === 'string') {
+                    this.insertImage(payload);
+                }
+                break;
+            case 'video':
+                if (typeof payload === 'string') {
+                    this.insertVideo(payload);
+                }
+                break;
+            case 'undo':
+                this.undo();
+                break;
+            case 'redo':
+                this.redo();
+                break;
+            case 'clearFormatting':
+                this.clearFormatting();
+                break;
+        }
     }
-    focus() {
-        this.quillObj().focus();
+    isActive(name, attrs) {
+        return this.editor()?.isActive(name, attrs) ?? false;
     }
-    blur() {
-        this.quillObj().blur();
+    can(command) {
+        const ed = this.editor();
+        if (!ed) {
+            return false;
+        }
+        if (command === 'undo') {
+            return ed.can().undo();
+        }
+        return ed.can().redo();
     }
-    codeBlock(range, status) {
-        if (!range)
+    setMarkActive(name, active) {
+        const ed = this.editor();
+        if (!ed) {
             return;
-        this.quillObj().formatLine(range.index, range.length, 'code-block', status);
+        }
+        const chain = ed.chain().focus();
+        switch (name) {
+            case 'bold':
+                active ? chain.setBold().run() : chain.unsetBold().run();
+                break;
+            case 'italic':
+                active ? chain.setItalic().run() : chain.unsetItalic().run();
+                break;
+            case 'underline':
+                active ? chain.setUnderline().run() : chain.unsetUnderline().run();
+                break;
+            case 'strike':
+                active ? chain.setStrike().run() : chain.unsetStrike().run();
+                break;
+        }
+    }
+    refreshState(editor) {
+        const textColor = editor.getAttributes('textStyle')['color'];
+        const fontSizeCss = editor.getAttributes('textStyle')['fontSize'];
+        const highlightColor = editor.getAttributes('highlight')['color'];
+        const linkHref = editor.getAttributes('link')['href'];
+        const dir = (editor.getAttributes('paragraph')['dir'] || editor.getAttributes('heading')['dir']);
+        let headingLevel = null;
+        for (let level = 1; level <= 6; level++) {
+            if (editor.isActive('heading', { level })) {
+                headingLevel = level;
+                break;
+            }
+        }
+        let textAlign = null;
+        for (const align of ['left', 'center', 'right', 'justify']) {
+            if (editor.isActive({ textAlign: align })) {
+                textAlign = align;
+                break;
+            }
+        }
+        let fontSize = null;
+        if (fontSizeCss) {
+            for (const [token, css] of Object.entries(AX_WYSIWYG_FONT_SIZE_VALUES)) {
+                if (fontSizeCss === css) {
+                    fontSize = token;
+                    break;
+                }
+            }
+        }
+        this.state.set({
+            bold: editor.isActive('bold'),
+            italic: editor.isActive('italic'),
+            underline: editor.isActive('underline'),
+            strike: editor.isActive('strike'),
+            code: editor.isActive('code'),
+            codeBlock: editor.isActive('codeBlock'),
+            headingLevel,
+            bulletList: editor.isActive('bulletList'),
+            orderedList: editor.isActive('orderedList'),
+            blockquote: editor.isActive('blockquote'),
+            textAlign,
+            textColor: textColor ?? null,
+            highlightColor: highlightColor ?? null,
+            linkHref: linkHref ?? null,
+            fontSize,
+            textDirection: dir ?? null,
+            canUndo: editor.can().undo(),
+            canRedo: editor.can().redo(),
+            isEmpty: editor.isEmpty,
+            isFocused: editor.isFocused,
+        });
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXWysiwyg, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXWysiwyg }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXWysiwyg, decorators: [{
+            type: Injectable
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AXWysiwyg };
+export { AXWysiwyg, AX_DEFAULT_WYSIWYG_FEATURES, AX_EMPTY_WYSIWYG_STATE, loadAXWysiwygExtensions };
 //# sourceMappingURL=acorex-cdk-wysiwyg.mjs.map