asksuite-citrus 3.16.24-beta.2 → 3.16.25

package/fesm2022/asksuite-citrus.mjs

@@ -2106,13 +2106,34 @@ function areObjectsEqual(obj1, obj2) {
 
 const URL_REGEX = /https?:\/\/[a-zA-Z0-9.-]+(?::\d+)?(?:\/[^\s]*)?/gi;
 
+const Inline = Quill.import('blots/inline');
+const EMOJI_REGEX = /(?:[\u{1F600}-\u{1F64F}]|[\u{1F300}-\u{1F5FF}]|[\u{1F680}-\u{1F6FF}]|[\u{1F1E0}-\u{1F1FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]|[\u{1F900}-\u{1F9FF}]|[\u{1F018}-\u{1F270}]|[\u{238C}-\u{2454}]|[\u{20D0}-\u{20FF}]|[\u{FE0F}]|[\u{200D}]|[\u{E000}-\u{F8FF}]|[\u{1F004}]|[\u{1F0CF}]|[\u{1F170}-\u{1F251}]|[\u{1F004}-\u{1F0CF}]|[\u{1F004}]|[\u{203C}\u{2049}]|[\u{2122}\u{2139}]|[\u{2194}-\u{2199}]|[\u{21A9}-\u{21AA}]|[\u{231A}-\u{231B}]|[\u{2328}]|[\u{23CF}]|[\u{23E9}-\u{23F3}]|[\u{23F8}-\u{23FA}]|[\u{24C2}]|[\u{25AA}-\u{25AB}]|[\u{25B6}]|[\u{25C0}]|[\u{25FB}-\u{25FE}]|[\u{2934}-\u{2935}]|[\u{2B05}-\u{2B07}]|[\u{2B1B}-\u{2B1C}]|[\u{2B50}]|[\u{2B55}]|[\u{3030}]|[\u{303D}]|[\u{3297}]|[\u{3299}]|[\u{1FA70}-\u{1FAFF}]|[\u{1F7E0}-\u{1F7EB}]|[\u{1F90C}-\u{1F93A}]|[\u{1F93C}-\u{1F945}]|[\u{1F947}-\u{1F9FF}]|[\u{1F30D}-\u{1F567}]|[\u{2190}-\u{21FF}]|[\u{2200}-\u{22FF}]|[\u{2300}-\u{23FF}]|[\u{2460}-\u{24FF}]|[\u{25A0}-\u{25FF}]|[\u{2600}-\u{27EF}]|[\u{2900}-\u{297F}]|[\u{2B00}-\u{2BFF}]|[\u{4DC0}-\u{4DFF}]|[\u{A490}-\u{A4CF}]|[\u{2000}-\u{206F}]|[\u{2070}-\u{209F}]|[\u{20A0}-\u{20CF}]|[\u{2100}-\u{214F}]|[\u{2150}-\u{218F}]|[\u{2190}-\u{21FF}]|[\u{2200}-\u{22FF}]|[\u{2300}-\u{23FF}]|[\u{2400}-\u{243F}]|[\u{2440}-\u{245F}]|[\u{2460}-\u{24FF}]|[\u{2500}-\u{257F}]|[\u{2580}-\u{259F}]|[\u{25A0}-\u{25FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]|[\u{27C0}-\u{27EF}]|[\u{27F0}-\u{27FF}]|[\u{2800}-\u{28FF}]|[\u{2900}-\u{297F}]|[\u{2980}-\u{29FF}]|[\u{2A00}-\u{2AFF}]|[\u{2B00}-\u{2BFF}])(?:[\u{FE0E}\u{FE0F}])?(?:\u{200D}(?:[\u{1F600}-\u{1F64F}]|[\u{1F300}-\u{1F5FF}]|[\u{1F680}-\u{1F6FF}]|[\u{1F1E0}-\u{1F1FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]|[\u{1F900}-\u{1F9FF}]|[\u{1F018}-\u{1F270}]|[\u{238C}-\u{2454}]|[\u{20D0}-\u{20FF}]|[\u{FE0F}]|[\u{200D}]|[\u{E000}-\u{F8FF}]|[\u{2640}]|[\u{2642}]|[\u{2695}]|[\u{26F9}]|[\u{2708}]))?/gu;
+class EmojiBlot extends Inline {
+    static { this.blotName = 'emoji'; }
+    static { this.tagName = 'span'; }
+    static { this.className = 'quill-emoji'; }
+    static create(value) {
+        if (!value)
+            return super.create(false);
+        const node = super.create(value);
+        node.classList.add(EmojiBlot.className);
+        node.style.fontSize = '20px';
+        return node;
+    }
+    static formats(node) {
+        return node;
+    }
+    static value(node) {
+        return node;
+    }
+}
+
 class RichtextWrapper {
     get state() {
         return this.stateSub.value;
     }
     get listenTextChanges$() {
-        return fromEvent(this.quill, 'text-change')
-            .pipe(map(() => this.quill.root.innerHTML));
+        return fromEvent(this.quill, 'text-change').pipe(map(() => this.quill.root.innerHTML));
     }
     get listenOnTouched$() {
         return fromEvent(this.quill, 'selection-change').pipe(filter(() => Boolean(this.quill.getSelection(false))), map(() => null));
@@ -2142,13 +2163,16 @@ class RichtextWrapper {
                 justify_center: false,
                 justify_right: false,
             },
-            disabledTools: []
+            disabledTools: [],
         });
         this.esc$ = new Subject();
         this.enter$ = new Subject();
         this.maxLength = -1;
         this.breakOnEnter = false;
         this.allowImages = false;
+        this.isFormatting = false;
+        this.pendingFormat = false;
+        this.lastKeyCombination = null;
         this.quillFormats = [
             'background',
             'bold',
@@ -2170,10 +2194,11 @@ class RichtextWrapper {
             'code-block',
             'formula',
             'image',
-            'htmlPanel'
+            'htmlPanel',
+            'emoji',
             // 'video'
         ];
-        this.textChangeHandler = () => {
+        this.textChangeHandler = (delta, oldDelta, source) => {
             this.update();
         };
         this.selectionChangeHandler = (value, oldRange, source) => {
@@ -2203,15 +2228,15 @@ class RichtextWrapper {
                 handler: () => {
                     this.esc$.next(true);
                     return false;
-                }
+                },
             },
             enter: {
                 key: 'enter',
                 handler: () => {
                     this.enter$.next(true);
                     return this.breakOnEnter;
-                }
-            }
+                },
+            },
         };
         this.state$ = this.stateSub.asObservable();
         const editorId = `editor-${new Date().getTime()}`;
@@ -2223,15 +2248,42 @@ class RichtextWrapper {
                     matchers: [
                         [Node.TEXT_NODE, this.urlMatcher.bind(this)],
                         ['IMG', this.imageMatcher.bind(this)],
-                        [Node.ELEMENT_NODE, this.htmlPanelMatcher.bind(this)]
+                        [Node.ELEMENT_NODE, this.htmlPanelMatcher.bind(this)],
+                        [Node.TEXT_NODE, this.emojiMatcher.bind(this)],
                     ],
                 },
                 keyboard: { bindings: this.bindings },
             },
-            formats: this.quillFormats
+            formats: this.quillFormats,
         });
+        this.setupEmojiDetection();
+        this.setupKeyListeners();
         this.listenEditorChanges();
     }
+    emojiMatcher(node, delta) {
+        if (node.nodeType === Node.TEXT_NODE) {
+            const text = node.textContent || '';
+            const matches = [...text.matchAll(EMOJI_REGEX)];
+            if (matches && matches.length > 0) {
+                const ops = [];
+                let lastIndex = 0;
+                for (const match of matches) {
+                    const emoji = match[0];
+                    const index = match.index;
+                    if (index > lastIndex) {
+                        ops.push({ insert: text.substring(lastIndex, index) });
+                    }
+                    ops.push({ insert: emoji, attributes: { emoji: true } });
+                    lastIndex = index + emoji.length;
+                }
+                if (lastIndex < text.length) {
+                    ops.push({ insert: text.substring(lastIndex) });
+                }
+                return { ops };
+            }
+        }
+        return delta;
+    }
     setItalic() {
         if (this.isToolDisabled('italic'))
             return;
@@ -2348,16 +2400,16 @@ class RichtextWrapper {
         this.maxLength = length;
         this.maxLengthSubscription?.unsubscribe();
         if (this.maxLength > 0)
-            this.maxLengthSubscription =
-                fromEvent(this.quill, 'text-change')
-                    .pipe(filter(() => this.quill.getLength() > this.maxLength))
-                    .subscribe(() => {
-                    this.quill.deleteText(this.maxLength - 1, this.quill.getLength());
-                });
+            this.maxLengthSubscription = fromEvent(this.quill, 'text-change')
+                .pipe(filter(() => this.quill.getLength() > this.maxLength))
+                .subscribe(() => {
+                this.quill.deleteText(this.maxLength - 1, this.quill.getLength());
+            });
     }
     setDisabledTools(tools) {
-        if (JSON.stringify(tools) !== JSON.stringify(this.stateSub.value.disabledTools))
-            this.stateSub.next({ ...this.stateSub.value, disabledTools: tools, });
+        if (JSON.stringify(tools) !==
+            JSON.stringify(this.stateSub.value.disabledTools))
+            this.stateSub.next({ ...this.stateSub.value, disabledTools: tools });
     }
     setEditorClass(className) {
         if (!className)
@@ -2444,6 +2496,14 @@ class RichtextWrapper {
         this.quill.on('selection-change', this.selectionChangeHandler);
         this.quill.on('text-change', this.textChangeHandler);
     }
+    setupKeyListeners() {
+        this.quill.root.addEventListener('keydown', (event) => {
+            this.lastKeyCombination = {
+                key: event.key,
+                shiftKey: event.shiftKey,
+            };
+        });
+    }
     update() {
         let bounds;
         let formatsArr;
@@ -2471,21 +2531,134 @@ class RichtextWrapper {
             hasSelection,
             formats,
             bounds,
-            hasFocus
+            hasFocus,
         };
         this.ngZone.run(() => {
             this.stateSub.next(newState);
             this.cd.markForCheck();
         });
     }
+    setupEmojiDetection() {
+        this.quill.on('text-change', (_delta, _oldDelta, _source) => {
+            if (_source !== 'user' || this.isFormatting) {
+                if (_source === 'user')
+                    this.pendingFormat = true;
+                return;
+            }
+            this.formatEmoji();
+        });
+    }
+    formatEmoji() {
+        if (this.isFormatting) {
+            this.pendingFormat = true;
+            return;
+        }
+        this.isFormatting = true;
+        try {
+            const selection = this.quill.getSelection();
+            const contents = this.quill.getContents();
+            const ops = [];
+            let hasChanges = false;
+            if (!contents.ops?.length) {
+                this.isFormatting = false;
+                return;
+            }
+            const processedPositions = new Set();
+            contents.ops.forEach((op) => {
+                if (typeof op.insert === 'string') {
+                    const text = op.insert;
+                    const matches = [...text.matchAll(EMOJI_REGEX)];
+                    if (matches.length > 0) {
+                        hasChanges = true;
+                        let lastIndex = 0;
+                        for (const match of matches) {
+                            const emoji = match[0];
+                            const index = match.index;
+                            if (index > lastIndex) {
+                                const beforeText = text.substring(lastIndex, index);
+                                ops.push({
+                                    insert: beforeText,
+                                    attributes: { ...op.attributes, emoji: false },
+                                });
+                            }
+                            const position = ops.reduce((acc, op) => acc + (op.insert?.length || 0), 0);
+                            if (!processedPositions.has(position)) {
+                                ops.push({
+                                    insert: emoji,
+                                    attributes: { ...op.attributes, emoji: true },
+                                });
+                                processedPositions.add(position);
+                            }
+                            else {
+                                ops.push({
+                                    insert: emoji,
+                                    attributes: { ...op.attributes, },
+                                });
+                            }
+                            lastIndex = index + emoji.length;
+                        }
+                        if (lastIndex < text.length) {
+                            ops.push({
+                                insert: text.substring(lastIndex),
+                                attributes: { ...op.attributes, emoji: false },
+                            });
+                        }
+                    }
+                    else {
+                        ops.push({
+                            insert: op.insert,
+                            attributes: { ...op.attributes, emoji: false },
+                        });
+                    }
+                }
+                else {
+                    ops.push(op);
+                }
+            });
+            if (hasChanges) {
+                this.quill.setContents(new (Quill.import('delta'))(ops), 'api');
+                requestAnimationFrame(() => {
+                    try {
+                        if (selection) {
+                            const wasShiftEnter = this.lastKeyCombination?.key.toLocaleLowerCase() === 'enter' &&
+                                this.lastKeyCombination?.shiftKey;
+                            this.quill.setSelection(wasShiftEnter ? selection.index + 1 : selection.index, selection.length);
+                        }
+                    }
+                    catch (e) {
+                        console.warn('Erro ao restaurar seleção:', e);
+                    }
+                    finally {
+                        this.isFormatting = false;
+                        if (this.pendingFormat) {
+                            this.pendingFormat = false;
+                            setTimeout(() => {
+                                if (!this.isFormatting) {
+                                    this.formatEmoji();
+                                }
+                            }, 0);
+                        }
+                    }
+                });
+            }
+            else {
+                this.isFormatting = false;
+            }
+        }
+        catch (error) {
+            console.error('Erro ao formatar emojis:', error);
+            this.isFormatting = false;
+            this.pendingFormat = false;
+        }
+    }
 }
-//to work around testing problems 
+//to work around testing problems
 const QuillProxy = {
-    Quill
+    Quill,
 };
-//to work around testing problems 
+//to work around testing problems
 const RichtextWrapperProxy = {
-    RichtextWrapper
+    RichtextWrapper,
 };
 
 const TOOL_FUNCTION_MAP = {
@@ -4262,6 +4435,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
             }] } });
 
 Quill.register(HTMLPanelQuillBlot);
+Quill.register(EmojiBlot);
 function initMyLib(myLibService) {
     return new StorageUtilService(myLibService);
 }