@banta/sdk 4.6.7 → 4.6.9

package/bundles/banta-sdk.umd.js

@@ -7408,6 +7408,8 @@
             this.overlay = overlay;
             this._selected = new rxjs.Subject();
             this.showEmojiPanel = false;
+            this.overlayX = 'end';
+            this.overlayY = 'top';
         }
         Object.defineProperty(EmojiSelectorButtonComponent.prototype, "selected", {
             get: function () {
@@ -7449,8 +7451,8 @@
                     {
                         originX: 'end',
                         originY: 'bottom',
-                        overlayX: 'end',
-                        overlayY: 'top'
+                        overlayX: this.overlayX,
+                        overlayY: this.overlayY
                     }
                 ])
                     .withFlexibleDimensions(true),
@@ -7485,7 +7487,9 @@
     ]; };
     EmojiSelectorButtonComponent.propDecorators = {
         selectorPanelTemplate: [{ type: core.ViewChild, args: ['selectorPanelTemplate',] }],
-        selected: [{ type: core.Output }]
+        selected: [{ type: core.Output }],
+        overlayX: [{ type: core.Input }],
+        overlayY: [{ type: core.Input }]
     };
 
     var COMPONENTS$1 = [
@@ -10256,8 +10260,6 @@
             this.sending = false;
             this.expandError = false;
             this._text = '';
-            this.attachmentScrapeDebounce = 1500;
-            this.attachmentFragments = new Map();
             this.sendLabel = 'Send';
             this.sendingLabel = 'Sending';
             this.label = 'Post a comment';
@@ -10312,166 +10314,11 @@
                 return this._text;
             },
             set: function (value) {
-                var _this = this;
                 this._text = value;
-                clearTimeout(this.attachmentScrapeTimeout);
-                this.attachmentScrapeTimeout = setTimeout(function () { return _this.scrapeAttachments(); }, this.attachmentScrapeDebounce);
             },
             enumerable: false,
             configurable: true
         });
-        CommentFieldComponent.prototype.scrapeAttachments = function () {
-            var e_1, _b, e_2, _c, e_3, _d, e_4, _e, e_5, _f;
-            var _this = this;
-            var message = {
-                likes: 0,
-                message: this._text,
-                sentAt: undefined,
-                user: this.user,
-                attachments: this.chatMessageAttachments
-            };
-            var foundFragments = [];
-            try {
-                for (var _g = __values(this.chatBackend.attachmentScrapers), _h = _g.next(); !_h.done; _h = _g.next()) {
-                    var scraper = _h.value;
-                    var fragments = scraper.findFragments(message);
-                    if (!fragments) {
-                        console.error("Attachment fragment scraper " + scraper.constructor.name + " is implemented incorrectly: Returned null instead of array");
-                        continue;
-                    }
-                    try {
-                        for (var fragments_1 = (e_2 = void 0, __values(fragments)), fragments_1_1 = fragments_1.next(); !fragments_1_1.done; fragments_1_1 = fragments_1.next()) {
-                            var fragment = fragments_1_1.value;
-                            foundFragments.push(fragment.text);
-                            if (!this.attachmentFragments.has(fragment.text)) {
-                                console.log("Scraped new fragment:");
-                                console.dir(fragment);
-                                this.attachmentFragments.set(fragment.text, {
-                                    fragment: fragment,
-                                    resolution: undefined
-                                });
-                            }
-                        }
-                    }
-                    catch (e_2_1) { e_2 = { error: e_2_1 }; }
-                    finally {
-                        try {
-                            if (fragments_1_1 && !fragments_1_1.done && (_c = fragments_1.return)) _c.call(fragments_1);
-                        }
-                        finally { if (e_2) throw e_2.error; }
-                    }
-                }
-            }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
-            finally {
-                try {
-                    if (_h && !_h.done && (_b = _g.return)) _b.call(_g);
-                }
-                finally { if (e_1) throw e_1.error; }
-            }
-            // Remove fragments that are no longer in the message.
-            var removedFragments = [];
-            try {
-                for (var _j = __values(this.attachmentFragments), _k = _j.next(); !_k.done; _k = _j.next()) {
-                    var _l = __read(_k.value, 1), key = _l[0];
-                    if (!foundFragments.includes(key))
-                        removedFragments.push(key);
-                }
-            }
-            catch (e_3_1) { e_3 = { error: e_3_1 }; }
-            finally {
-                try {
-                    if (_k && !_k.done && (_d = _j.return)) _d.call(_j);
-                }
-                finally { if (e_3) throw e_3.error; }
-            }
-            try {
-                for (var removedFragments_1 = __values(removedFragments), removedFragments_1_1 = removedFragments_1.next(); !removedFragments_1_1.done; removedFragments_1_1 = removedFragments_1.next()) {
-                    var removedFragment = removedFragments_1_1.value;
-                    console.log("Removed fragment: " + removedFragment);
-                    this.attachmentFragments.delete(removedFragment);
-                }
-            }
-            catch (e_4_1) { e_4 = { error: e_4_1 }; }
-            finally {
-                try {
-                    if (removedFragments_1_1 && !removedFragments_1_1.done && (_e = removedFragments_1.return)) _e.call(removedFragments_1);
-                }
-                finally { if (e_4) throw e_4.error; }
-            }
-            var _loop_1 = function (key, state) {
-                if (state.resolution)
-                    return "continue";
-                state.resolution = new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-                    var _b, _c, resolver, attachment, e_6, e_7_1;
-                    var e_7, _d;
-                    return __generator(this, function (_e) {
-                        switch (_e.label) {
-                            case 0:
-                                console.log("Resolving fragment " + key);
-                                _e.label = 1;
-                            case 1:
-                                _e.trys.push([1, 8, 9, 10]);
-                                _b = __values(this.chatBackend.attachmentResolvers), _c = _b.next();
-                                _e.label = 2;
-                            case 2:
-                                if (!!_c.done) return [3 /*break*/, 7];
-                                resolver = _c.value;
-                                console.log("- Trying resolver " + resolver.constructor.name + "...");
-                                _e.label = 3;
-                            case 3:
-                                _e.trys.push([3, 5, , 6]);
-                                return [4 /*yield*/, resolver.resolveFragment(message, state.fragment)];
-                            case 4:
-                                attachment = _e.sent();
-                                if (attachment) {
-                                    console.log("Resolved fragment " + key + " into attachment:");
-                                    console.dir(attachment);
-                                    this.chatMessageAttachments.push(attachment);
-                                    resolve(attachment);
-                                    return [3 /*break*/, 7];
-                                }
-                                return [3 /*break*/, 6];
-                            case 5:
-                                e_6 = _e.sent();
-                                console.error("Caught error during attachment resolver " + resolver.constructor.name + ":");
-                                console.error(e_6);
-                                return [3 /*break*/, 6];
-                            case 6:
-                                _c = _b.next();
-                                return [3 /*break*/, 2];
-                            case 7: return [3 /*break*/, 10];
-                            case 8:
-                                e_7_1 = _e.sent();
-                                e_7 = { error: e_7_1 };
-                                return [3 /*break*/, 10];
-                            case 9:
-                                try {
-                                    if (_c && !_c.done && (_d = _b.return)) _d.call(_b);
-                                }
-                                finally { if (e_7) throw e_7.error; }
-                                return [7 /*endfinally*/];
-                            case 10: return [2 /*return*/];
-                        }
-                    });
-                }); });
-            };
-            try {
-                // Process any fragments that are not yet resolved (or being 
-                // resolved)
-                for (var _m = __values(this.attachmentFragments), _o = _m.next(); !_o.done; _o = _m.next()) {
-                    var _p = __read(_o.value, 2), key = _p[0], state = _p[1];
-                    _loop_1(key, state);
-                }
-            }
-            catch (e_5_1) { e_5 = { error: e_5_1 }; }
-            finally {
-                try {
-                    if (_o && !_o.done && (_f = _m.return)) _f.call(_m);
-                }
-                finally { if (e_5) throw e_5.error; }
-            }
-        };
         Object.defineProperty(CommentFieldComponent.prototype, "userAvatarUrl", {
             get: function () {
                 var _a;
@@ -10705,7 +10552,7 @@
         };
         CommentFieldComponent.prototype.sendMessage = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var text, message, e_8;
+                var text, message, e_1;
                 var _this = this;
                 return __generator(this, function (_b) {
                     switch (_b.label) {
@@ -10738,11 +10585,11 @@
                             this.chatMessageAttachments = [];
                             return [3 /*break*/, 6];
                         case 4:
-                            e_8 = _b.sent();
+                            e_1 = _b.sent();
                             return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(function () { return resolve(); }, 1000); })];
                         case 5:
                             _b.sent();
-                            this.indicateError(e_8.message);
+                            this.indicateError(e_1.message);
                             return [3 /*break*/, 6];
                         case 6: return [3 /*break*/, 8];
                         case 7:
@@ -10780,7 +10627,7 @@
     CommentFieldComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'banta-comment-field',
-                    template: "<form class=\"new-message\" (submit)=\"sendMessage()\">\r\n    <div class=\"avatar-container\">\r\n        <a  href=\"javascript:;\"\r\n            class=\"avatar\"\r\n            (click)=\"showEditAvatar()\"\r\n            [style.background-image]=\"'url(' + userAvatarUrl + ')'\"\r\n            ></a>\r\n    </div>\r\n    <div class=\"text-container\">\r\n        <div class=\"field-container\">\r\n            <div class=\"field-row\">\r\n                <mat-form-field class=\"message-field\" appearance=\"outline\" floatLabel=\"always\">\r\n                    <mat-label>{{label}}</mat-label>\r\n                    <textarea\r\n                        #textarea\r\n                        name=\"message\"\r\n                        [placeholder]=\"placeholder\"\r\n                        matInput\r\n                        cdkTextareaAutosize\r\n                        [maxlength]=\"maxLength\"\r\n                        (keydown)=\"onKeyDown($event)\"\r\n                        (blur)=\"onBlur()\"\r\n                        [disabled]=\"sending\"\r\n                        [(ngModel)]=\"text\"></textarea>\r\n                </mat-form-field>\r\n                <div class=\"options-line\">\r\n                    <mat-spinner *ngIf=\"sending\" class=\"icon loading\" diameter=\"18\" strokeWidth=\"2\"></mat-spinner>\r\n                    <div *ngIf=\"sendError\" class=\"error-message\" [class.expanded]=\"expandError\" [matTooltip]=\"sendError.message\" (click)=\"alertError()\">\r\n                        <mat-icon *ngIf=\"sendError\">error</mat-icon>\r\n                        {{sendError.message}}\r\n                    </div>\r\n                    <div *ngIf=\"!sendError && transientMessage\" class=\"transient-message\" [class.expanded]=\"true\" [matTooltip]=\"transientMessage\" (click)=\"alertError()\">\r\n                        <mat-spinner [inline]=\"true\" [diameter]=\"15\"></mat-spinner>\r\n                        {{transientMessage}}\r\n                    </div>\r\n                    <div class=\"spacer\"></div>\r\n                    <div class=\"custom\">\r\n                        <ng-content></ng-content>\r\n                    </div>\r\n                    <banta-attachment-button \r\n                        *ngIf=\"allowAttachments\"\r\n                        (addedAttachment)=\"addedAttachment($event)\"\r\n                        (attachmentError)=\"attachmentError($event)\"\r\n                        ></banta-attachment-button>\r\n                    <emoji-selector-button (selected)=\"insertEmoji($event)\"></emoji-selector-button>\r\n                </div>\r\n                \r\n            </div>\r\n            <div #autocompleteContainer class=\"autocomplete-container\">\r\n                <div #autocomplete class=\"autocomplete\" [class.visible]=\"autocompleteVisible\">\r\n\r\n                    <div>\r\n                        <strong>{{completionPrefix}}</strong>...\r\n                    </div>\r\n                    <a\r\n                        mat-button\r\n                        *ngFor=\"let option of autocompleteOptions; index as index\"\r\n                        (click)=\"activateAutoComplete(option)\"\r\n                        [class.active]=\"autoCompleteSelected === index\"\r\n                        >\r\n                        {{option.label}}\r\n                    </a>\r\n                </div>\r\n            </div>\r\n\r\n            <banta-attachments \r\n                [attachments]=\"chatMessageAttachments\"\r\n                [editing]=\"true\"\r\n                (remove)=\"removeAttachment($event)\"\r\n                ></banta-attachments>\r\n        </div>\r\n    </div>\r\n    <div class=\"actions\">\r\n        <ng-container *ngIf=\"!user\">\r\n            <button\r\n                mat-raised-button\r\n                color=\"primary\"\r\n                type=\"button\"\r\n                (click)=\"showSignIn()\"\r\n                >{{signInLabel}}</button>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"user\">\r\n            <button\r\n                mat-raised-button\r\n                class=\"send\"\r\n                color=\"primary\"\r\n                [disabled]=\"!sendButtonEnabled\"\r\n                >\r\n                <ng-container *ngIf=\"canComment\">\r\n                    <mat-icon *ngIf=\"!sending\">chevron_right</mat-icon>\r\n                    <mat-spinner *ngIf=\"sending\" class=\"icon\" diameter=\"18\" strokeWidth=\"2\"></mat-spinner>\r\n                </ng-container>\r\n                <span class=\"label\">\r\n                    <ng-container *ngIf=\"!canComment\">\r\n                        {{permissionDeniedLabel}}\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"canComment\">\r\n                        <ng-container *ngIf=\"!sending\">\r\n                            {{sendLabel}}\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"sending\">\r\n                            {{sendingLabel}}\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </span>\r\n            </button>\r\n        </ng-container>\r\n    </div>\r\n</form>",
+                    template: "<form class=\"new-message\" (submit)=\"sendMessage()\">\r\n    <div class=\"avatar-container\">\r\n        <a  href=\"javascript:;\"\r\n            class=\"avatar\"\r\n            (click)=\"showEditAvatar()\"\r\n            [style.background-image]=\"'url(' + userAvatarUrl + ')'\"\r\n            ></a>\r\n    </div>\r\n    <div class=\"text-container\">\r\n        <div class=\"field-container\">\r\n            <div class=\"field-row\">\r\n                <mat-form-field class=\"message-field\" appearance=\"outline\" floatLabel=\"always\">\r\n                    <mat-label>{{label}}</mat-label>\r\n                    <textarea\r\n                        #textarea\r\n                        name=\"message\"\r\n                        attachmentScraper\r\n                        (attachmentsChanged)=\"chatMessageAttachments = $event\"\r\n                        [placeholder]=\"placeholder\"\r\n                        matInput\r\n                        cdkTextareaAutosize\r\n                        [maxlength]=\"maxLength\"\r\n                        (keydown)=\"onKeyDown($event)\"\r\n                        (blur)=\"onBlur()\"\r\n                        [disabled]=\"sending\"\r\n                        [(ngModel)]=\"text\"></textarea>\r\n                </mat-form-field>\r\n                <div class=\"options-line\">\r\n                    <mat-spinner *ngIf=\"sending\" class=\"icon loading\" diameter=\"18\" strokeWidth=\"2\"></mat-spinner>\r\n                    <div *ngIf=\"sendError\" class=\"error-message\" [class.expanded]=\"expandError\" [matTooltip]=\"sendError.message\" (click)=\"alertError()\">\r\n                        <mat-icon *ngIf=\"sendError\">error</mat-icon>\r\n                        {{sendError.message}}\r\n                    </div>\r\n                    <div *ngIf=\"!sendError && transientMessage\" class=\"transient-message\" [class.expanded]=\"true\" [matTooltip]=\"transientMessage\" (click)=\"alertError()\">\r\n                        <mat-spinner [inline]=\"true\" [diameter]=\"15\"></mat-spinner>\r\n                        {{transientMessage}}\r\n                    </div>\r\n                    <div class=\"spacer\"></div>\r\n                    <div class=\"custom\">\r\n                        <ng-content></ng-content>\r\n                    </div>\r\n                    <banta-attachment-button \r\n                        *ngIf=\"allowAttachments\"\r\n                        (addedAttachment)=\"addedAttachment($event)\"\r\n                        (attachmentError)=\"attachmentError($event)\"\r\n                        ></banta-attachment-button>\r\n                    <emoji-selector-button (selected)=\"insertEmoji($event)\"></emoji-selector-button>\r\n                </div>\r\n                \r\n            </div>\r\n            <div #autocompleteContainer class=\"autocomplete-container\">\r\n                <div #autocomplete class=\"autocomplete\" [class.visible]=\"autocompleteVisible\">\r\n\r\n                    <div>\r\n                        <strong>{{completionPrefix}}</strong>...\r\n                    </div>\r\n                    <a\r\n                        mat-button\r\n                        *ngFor=\"let option of autocompleteOptions; index as index\"\r\n                        (click)=\"activateAutoComplete(option)\"\r\n                        [class.active]=\"autoCompleteSelected === index\"\r\n                        >\r\n                        {{option.label}}\r\n                    </a>\r\n                </div>\r\n            </div>\r\n\r\n            <banta-attachments \r\n                [attachments]=\"chatMessageAttachments\"\r\n                [editing]=\"true\"\r\n                (remove)=\"removeAttachment($event)\"\r\n                ></banta-attachments>\r\n        </div>\r\n    </div>\r\n    <div class=\"actions\">\r\n        <ng-container *ngIf=\"!user\">\r\n            <button\r\n                mat-raised-button\r\n                color=\"primary\"\r\n                type=\"button\"\r\n                (click)=\"showSignIn()\"\r\n                >{{signInLabel}}</button>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"user\">\r\n            <button\r\n                mat-raised-button\r\n                class=\"send\"\r\n                color=\"primary\"\r\n                [disabled]=\"!sendButtonEnabled\"\r\n                >\r\n                <ng-container *ngIf=\"canComment\">\r\n                    <mat-icon *ngIf=\"!sending\">chevron_right</mat-icon>\r\n                    <mat-spinner *ngIf=\"sending\" class=\"icon\" diameter=\"18\" strokeWidth=\"2\"></mat-spinner>\r\n                </ng-container>\r\n                <span class=\"label\">\r\n                    <ng-container *ngIf=\"!canComment\">\r\n                        {{permissionDeniedLabel}}\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"canComment\">\r\n                        <ng-container *ngIf=\"!sending\">\r\n                            {{sendLabel}}\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"sending\">\r\n                            {{sendingLabel}}\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </span>\r\n            </button>\r\n        </ng-container>\r\n    </div>\r\n</form>",
                     styles: ["@-webkit-keyframes comment-field-appear{0%{transform:translateY(128px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes comment-field-appear{0%{transform:translateY(128px);opacity:0}to{transform:translate(0);opacity:1}}:host{margin:0 2em 0 0;display:block;-webkit-animation-name:comment-field-appear;animation-name:comment-field-appear;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-delay:.4s;animation-delay:.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both;position:relative;z-index:20}.avatar-container{width:calc(48px + 1.75em);display:flex;justify-content:flex-end;flex-shrink:0}.avatar-container .avatar{width:48px;height:48px;background:#000;border-radius:100%;background-size:cover;background-repeat:no-repeat;background-position:50%;margin-top:.75em;margin-right:.75em}form{display:flex;padding:.5em;align-items:center}form .text-container{position:relative;display:flex;flex-grow:1;min-width:0}form .text-container textarea{font-size:14pt;width:100%}form .text-container textarea[disabled]{opacity:.5}form .text-container mat-spinner.loading{position:absolute;left:.5em;bottom:.5em}form .text-container .options-line{display:flex;align-items:center}form .text-container .options-line>*{flex-shrink:0}form .text-container .options-line .transient-message{display:flex;flex-direction:row;align-items:center;gap:.5em}form .text-container .options-line .error-message{left:.5em;bottom:.5em;color:#683333;overflow-x:hidden;max-width:1.5em;white-space:nowrap;transition:max-width 2s ease-in-out;text-overflow:ellipsis;overflow:hidden;flex-shrink:1}form .text-container .options-line .error-message.expanded,form .text-container .options-line .error-message:hover{max-width:100%}form .text-container .options-line .error-message mat-icon{vertical-align:middle}form input[type=text]{background:#000;color:#fff;border:1px solid #333;width:100%;height:1em}form .actions{margin-left:1em;flex-shrink:0}form button{display:block;margin:0 0 0 auto}form.new-message{display:flex;align-items:flex-start;min-width:0}form.new-message .field-container{flex-grow:1;display:flex;flex-direction:column;min-width:0}form.new-message mat-form-field{width:100%}form.new-message mat-form-field ::ng-deep .mat-form-field-wrapper{padding-bottom:0}form.new-message button{margin:1.25em 0 0}button.send{min-width:9em}textarea{max-height:7em}.autocomplete-container{width:calc(100% - 2em);position:relative;pointer-events:none;top:-2em}.autocomplete{visibility:hidden;pointer-events:none;position:absolute;background:#333;padding:.5em;display:flex;flex-direction:column;z-index:100}.autocomplete.visible{visibility:visible;pointer-events:auto}.autocomplete a{width:100%;text-align:left}.autocomplete a.active{background:#555}.image-attachments-container{display:flex;gap:20px}.image-attachments-container .image-attachment{width:300px;position:relative;text-align:center}.image-attachments-container .image-attachment.with-border{outline:1px solid #333;padding:1em 0}.image-attachments-container .image-attachment mat-spinner{display:block;margin:0 auto .5em;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.image-attachments-container .image-attachment mat-icon.error{display:block;font-size:48px;width:48px;height:48px;margin:0 auto .5em}.image-attachments-container .image-attachment .error{color:#b76363}.image-attachments-container .image-attachment img{width:300px;border-radius:10px}.image-attachments-container .image-attachment .remove-img{position:absolute;right:10px;top:10px;margin:0}.card-attachment,.field-row{position:relative}.card-attachment a{display:flex;align-items:flex-start;gap:1em;width:100%;border:1px solid #666;border-radius:4px;padding:2em;box-sizing:border-box;background-color:#191919}.card-attachment a img{width:300px;aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover;border-radius:10px}.card-attachment a h1{margin:0;font-size:30px}.card-attachment .remove-img{position:absolute;right:10px;top:10px;margin:0}@media (max-width:500px){:host{margin:0}.avatar-container{width:auto;flex-shrink:0}.avatar-container .avatar{width:32px;height:32px;margin-top:1.5em}:host.can-comment button.send .label,:host:not(.can-comment) .text-container,:host:not(.can-comment) mat-form-field.message-field{display:none}button.send{min-width:auto;margin-top:1.5em}}:host-context(.banta-mobile) :host{margin:0}:host-context(.banta-mobile) .avatar-container{width:auto;flex-shrink:0}:host-context(.banta-mobile) .avatar-container .avatar{width:32px;height:32px;margin-top:1.5em}:host-context(.banta-mobile) :host.can-comment button.send .label,:host-context(.banta-mobile) :host:not(.can-comment) .text-container,:host-context(.banta-mobile) :host:not(.can-comment) mat-form-field.message-field{display:none}:host-context(.banta-mobile) button.send{min-width:auto;margin-top:1.5em}"]
                 },] }
     ];
@@ -10942,6 +10789,207 @@
         attachmentError: [{ type: core.Output }]
     };
 
+    var AttachmentScraperDirective = /** @class */ (function () {
+        function AttachmentScraperDirective(elementRef, chatBackend) {
+            this.elementRef = elementRef;
+            this.chatBackend = chatBackend;
+            this.attachments = [];
+            this.attachmentsChanged = new rxjs.BehaviorSubject([]);
+            this.scrapeDebounce = 1500;
+            this.fragments = new Map();
+        }
+        AttachmentScraperDirective.prototype.ngOnInit = function () {
+            var _this = this;
+            if (typeof window === 'undefined')
+                return;
+            this.element.addEventListener('keydown', function () {
+                clearTimeout(_this.scrapeTimeout);
+                _this.scrapeTimeout = setTimeout(function () { return _this.scrape(); }, _this.scrapeDebounce);
+            });
+        };
+        Object.defineProperty(AttachmentScraperDirective.prototype, "element", {
+            get: function () {
+                var _a;
+                return (_a = this.elementRef) === null || _a === void 0 ? void 0 : _a.nativeElement;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AttachmentScraperDirective.prototype, "text", {
+            get: function () {
+                return this.element.value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AttachmentScraperDirective.prototype.scrape = function () {
+            var e_1, _b, e_2, _c, e_3, _d, e_4, _e, e_5, _f;
+            var _this = this;
+            var message = {
+                likes: 0,
+                message: this.text,
+                sentAt: undefined,
+                user: null,
+                attachments: this.attachments
+            };
+            var foundFragments = [];
+            try {
+                for (var _g = __values(this.chatBackend.attachmentScrapers), _h = _g.next(); !_h.done; _h = _g.next()) {
+                    var scraper = _h.value;
+                    var fragments = scraper.findFragments(message);
+                    if (!fragments) {
+                        console.error("Attachment fragment scraper " + scraper.constructor.name + " is implemented incorrectly: Returned null instead of array");
+                        continue;
+                    }
+                    try {
+                        for (var fragments_1 = (e_2 = void 0, __values(fragments)), fragments_1_1 = fragments_1.next(); !fragments_1_1.done; fragments_1_1 = fragments_1.next()) {
+                            var fragment = fragments_1_1.value;
+                            foundFragments.push(fragment.text);
+                            if (!this.fragments.has(fragment.text)) {
+                                console.log("Scraped new fragment:");
+                                console.dir(fragment);
+                                this.fragments.set(fragment.text, {
+                                    fragment: fragment,
+                                    resolution: undefined
+                                });
+                            }
+                        }
+                    }
+                    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                    finally {
+                        try {
+                            if (fragments_1_1 && !fragments_1_1.done && (_c = fragments_1.return)) _c.call(fragments_1);
+                        }
+                        finally { if (e_2) throw e_2.error; }
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_h && !_h.done && (_b = _g.return)) _b.call(_g);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            // Remove fragments that are no longer in the message.
+            var removedFragments = [];
+            try {
+                for (var _j = __values(this.fragments), _k = _j.next(); !_k.done; _k = _j.next()) {
+                    var _l = __read(_k.value, 1), key = _l[0];
+                    if (!foundFragments.includes(key))
+                        removedFragments.push(key);
+                }
+            }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            finally {
+                try {
+                    if (_k && !_k.done && (_d = _j.return)) _d.call(_j);
+                }
+                finally { if (e_3) throw e_3.error; }
+            }
+            try {
+                for (var removedFragments_1 = __values(removedFragments), removedFragments_1_1 = removedFragments_1.next(); !removedFragments_1_1.done; removedFragments_1_1 = removedFragments_1.next()) {
+                    var removedFragment = removedFragments_1_1.value;
+                    console.log("Removed fragment: " + removedFragment);
+                    this.fragments.delete(removedFragment);
+                }
+            }
+            catch (e_4_1) { e_4 = { error: e_4_1 }; }
+            finally {
+                try {
+                    if (removedFragments_1_1 && !removedFragments_1_1.done && (_e = removedFragments_1.return)) _e.call(removedFragments_1);
+                }
+                finally { if (e_4) throw e_4.error; }
+            }
+            var _loop_1 = function (key, state) {
+                if (state.resolution)
+                    return "continue";
+                state.resolution = new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
+                    var _b, _c, resolver, attachment, e_6, e_7_1;
+                    var e_7, _d;
+                    return __generator(this, function (_e) {
+                        switch (_e.label) {
+                            case 0:
+                                console.log("Resolving fragment " + key);
+                                _e.label = 1;
+                            case 1:
+                                _e.trys.push([1, 8, 9, 10]);
+                                _b = __values(this.chatBackend.attachmentResolvers), _c = _b.next();
+                                _e.label = 2;
+                            case 2:
+                                if (!!_c.done) return [3 /*break*/, 7];
+                                resolver = _c.value;
+                                console.log("- Trying resolver " + resolver.constructor.name + "...");
+                                _e.label = 3;
+                            case 3:
+                                _e.trys.push([3, 5, , 6]);
+                                return [4 /*yield*/, resolver.resolveFragment(message, state.fragment)];
+                            case 4:
+                                attachment = _e.sent();
+                                if (attachment) {
+                                    console.log("Resolved fragment " + key + " into attachment:");
+                                    console.dir(attachment);
+                                    this.attachments.push(attachment);
+                                    this.attachmentsChanged.next(this.attachments.slice());
+                                    resolve(attachment);
+                                    return [3 /*break*/, 7];
+                                }
+                                return [3 /*break*/, 6];
+                            case 5:
+                                e_6 = _e.sent();
+                                console.error("Caught error during attachment resolver " + resolver.constructor.name + ":");
+                                console.error(e_6);
+                                return [3 /*break*/, 6];
+                            case 6:
+                                _c = _b.next();
+                                return [3 /*break*/, 2];
+                            case 7: return [3 /*break*/, 10];
+                            case 8:
+                                e_7_1 = _e.sent();
+                                e_7 = { error: e_7_1 };
+                                return [3 /*break*/, 10];
+                            case 9:
+                                try {
+                                    if (_c && !_c.done && (_d = _b.return)) _d.call(_b);
+                                }
+                                finally { if (e_7) throw e_7.error; }
+                                return [7 /*endfinally*/];
+                            case 10: return [2 /*return*/];
+                        }
+                    });
+                }); });
+            };
+            try {
+                // Process any fragments that are not yet resolved (or being 
+                // resolved)
+                for (var _m = __values(this.fragments), _o = _m.next(); !_o.done; _o = _m.next()) {
+                    var _p = __read(_o.value, 2), key = _p[0], state = _p[1];
+                    _loop_1(key, state);
+                }
+            }
+            catch (e_5_1) { e_5 = { error: e_5_1 }; }
+            finally {
+                try {
+                    if (_o && !_o.done && (_f = _m.return)) _f.call(_m);
+                }
+                finally { if (e_5) throw e_5.error; }
+            }
+        };
+        return AttachmentScraperDirective;
+    }());
+    AttachmentScraperDirective.decorators = [
+        { type: core.Directive, args: [{
+                    selector: '[attachmentScraper]'
+                },] }
+    ];
+    AttachmentScraperDirective.ctorParameters = function () { return [
+        { type: core.ElementRef },
+        { type: ChatBackendBase }
+    ]; };
+    AttachmentScraperDirective.propDecorators = {
+        attachmentsChanged: [{ type: core.Output }]
+    };
+
     var COMPONENTS$3 = [
         CommentComponent,
         CommentViewComponent,
@@ -10950,7 +10998,8 @@
         CommentFieldComponent,
         CommentSortComponent,
         AttachmentButtonComponent,
-        BantaReplySendOptionsDirective
+        BantaReplySendOptionsDirective,
+        AttachmentScraperDirective
     ];
     var CommentsModule = /** @class */ (function () {
         function CommentsModule() {
@@ -11675,6 +11724,7 @@
      */
 
     exports.AttachmentButtonComponent = AttachmentButtonComponent;
+    exports.AttachmentScraperDirective = AttachmentScraperDirective;
     exports.BANTA_SDK_OPTIONS = BANTA_SDK_OPTIONS;
     exports.BantaAttachmentComponent = BantaAttachmentComponent;
     exports.BantaAttachmentsComponent = BantaAttachmentsComponent;