adb-shared 6.2.3 → 6.2.4

package/fesm2022/adb-shared.mjs

@@ -1780,46 +1780,90 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                 }]
         }] });
 
+const FORMAT_MARKERS = {
+    italic: ['*', '_'],
+    bold: ['**', '__']
+};
+const DEFAULT_MARKER = {
+    italic: '*',
+    bold: '**'
+};
 class AdbRichEditorComponent {
     constructor(el) {
         this.el = el;
+        this.text = '';
         this.hasTaxon = false;
         this.hasReference = false;
         this.rows = 3;
-        //ControlValueAccessor
+        // ---------------------------------------
+        // ControlValueAccessor
+        // ---------------------------------------
         this.onChange = () => { };
         this.onTouched = () => { };
     }
+    getTextarea() {
+        return this.el.nativeElement.querySelector('textarea');
+    }
     onDoubleClick() {
-        const textarea = this.el.nativeElement.querySelector('textarea');
-        const selectionStart = textarea.selectionStart;
-        let selectionEnd = textarea.selectionEnd;
-        while (selectionEnd > selectionStart && textarea.value[selectionEnd - 1] === ' ') {
-            selectionEnd--;
+        const textarea = this.getTextarea();
+        if (!textarea)
+            return;
+        const start = textarea.selectionStart;
+        let end = textarea.selectionEnd;
+        while (end > start && textarea.value[end - 1] === ' ') {
+            end--;
         }
-        textarea.setSelectionRange(selectionStart, selectionEnd);
+        textarea.setSelectionRange(start, end);
     }
     onItalicClick() {
-        this.applyFormatting('_');
+        this.applyFormatting('italic');
     }
     onBoldClick() {
-        this.applyFormatting('__');
-    }
-    applyFormatting(marker) {
-        const textarea = this.el.nativeElement.querySelector('textarea');
-        if (textarea) {
-            const selectionStart = textarea.selectionStart;
-            const selectionEnd = textarea.selectionEnd;
-            let currentValue = textarea.value;
-            let modifiedText = selectionStart !== selectionEnd
-                ? `${currentValue.substring(0, selectionStart)}${marker}${currentValue.substring(selectionStart, selectionEnd)}${marker}${currentValue.substring(selectionEnd)}`
-                : `${currentValue.substring(0, selectionStart)}${marker}${marker}${currentValue.substring(selectionStart)}`;
-            this.text = modifiedText;
-            textarea.value = modifiedText;
-            textarea.setSelectionRange(selectionStart !== selectionEnd ? selectionEnd + marker.length * 2 : selectionStart + marker.length, selectionStart !== selectionEnd ? selectionEnd + marker.length * 2 : selectionStart + marker.length);
-            this.onChange(this.text);
+        this.applyFormatting('bold');
+    }
+    applyFormatting(type) {
+        const textarea = this.getTextarea();
+        if (!textarea)
+            return;
+        const start = textarea.selectionStart;
+        const end = textarea.selectionEnd;
+        const value = textarea.value;
+        if (start === end) {
+            const marker = DEFAULT_MARKER[type];
+            const newValue = value.slice(0, start) +
+                marker +
+                marker +
+                value.slice(start);
+            this.updateValue(newValue);
+            const cursor = start + marker.length;
             textarea.focus();
+            textarea.setSelectionRange(cursor, cursor);
+            return;
         }
+        const existingMarker = this.findWrappingMarker(value, start, end, FORMAT_MARKERS[type]);
+        const marker = existingMarker ?? DEFAULT_MARKER[type];
+        const newValue = existingMarker
+            ? value.slice(0, start - marker.length) +
+                value.slice(start, end) +
+                value.slice(end + marker.length)
+            : value.slice(0, start) +
+                marker +
+                value.slice(start, end) +
+                marker +
+                value.slice(end);
+        this.updateValue(newValue);
+        const cursorStart = existingMarker
+            ? start - marker.length
+            : start + marker.length;
+        const cursorEnd = existingMarker
+            ? end - marker.length
+            : end + marker.length;
+        textarea.focus();
+        textarea.setSelectionRange(cursorStart, cursorEnd);
+    }
+    findWrappingMarker(value, start, end, markers) {
+        return (markers.find(marker => value.substring(start - marker.length, start) === marker &&
+            value.substring(end, end + marker.length) === marker) ?? null);
     }
     onTaxonClick() {
         this.replaceMarked('[Name](taxon:0)');
@@ -1828,34 +1872,33 @@ class AdbRichEditorComponent {
         this.replaceMarked('[Name](reference:0)');
     }
     replaceMarked(replaceTag) {
-        const textarea = this.el.nativeElement.querySelector('textarea');
-        if (textarea) {
-            const start = textarea.selectionStart;
-            const end = textarea.selectionEnd;
-            const originalText = textarea.value;
-            const charBefore = start > 0 ? originalText[start - 1] : '';
-            const charAfter = end < originalText.length ? originalText[end] : '';
-            const spaceBefore = charBefore && !/\s/.test(charBefore) ? ' ' : '';
-            const spaceAfter = charAfter && !/\s/.test(charAfter) ? ' ' : '';
-            const newText = originalText.slice(0, start) + spaceBefore + replaceTag + spaceAfter + originalText.slice(end);
-            this.text = newText;
-            this.onChange(this.text);
-            const nameStart = newText.indexOf('Name', start); // Find 'Name' starting from the previous selection start
-            if (nameStart !== -1) {
-                const nameEnd = nameStart + 'Name'.length;
-                // Use setTimeout to make sure the textarea is updated before selecting
-                setTimeout(() => {
-                    textarea.focus();
-                    textarea.setSelectionRange(nameStart, nameEnd); // Select the 'Name' string
-                }, 0);
-            }
-        }
-    }
-    onTextChange() {
-        this.onChange(this.text);
+        const textarea = this.getTextarea();
+        if (!textarea)
+            return;
+        const start = textarea.selectionStart;
+        const end = textarea.selectionEnd;
+        const value = textarea.value;
+        const before = start > 0 ? value[start - 1] : '';
+        const after = end < value.length ? value[end] : '';
+        const spaceBefore = before && !/\s/.test(before) ? ' ' : '';
+        const spaceAfter = after && !/\s/.test(after) ? ' ' : '';
+        const newValue = value.slice(0, start) +
+            spaceBefore +
+            replaceTag +
+            spaceAfter +
+            value.slice(end);
+        this.updateValue(newValue);
+        const nameStart = newValue.indexOf('Name', start);
+        if (nameStart === -1)
+            return;
+        const nameEnd = nameStart + 'Name'.length;
+        requestAnimationFrame(() => {
+            textarea.focus();
+            textarea.setSelectionRange(nameStart, nameEnd);
+        });
     }
     writeValue(value) {
-        this.text = value;
+        this.text = value ?? '';
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -1864,21 +1907,35 @@ class AdbRichEditorComponent {
         this.onTouched = fn;
     }
     setDisabledState(isDisabled) {
+        // Intentionally left minimal
+        // Disabled state should be handled via template binding
     }
-    ngOnDestroy() {
+    onTextChange() {
+        this.onChange(this.text);
+    }
+    updateValue(value) {
+        this.text = value;
+        this.onChange(this.text);
     }
+    ngOnDestroy() { }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AdbRichEditorComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: AdbRichEditorComponent, isStandalone: false, selector: "adb-rich-editor", inputs: { hasTaxon: "hasTaxon", hasReference: "hasReference", rows: "rows" }, providers: [{
-                provide: NG_VALUE_ACCESSOR, useExisting: forwardRef((() => AdbRichEditorComponent)),
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: AdbRichEditorComponent, isStandalone: false, selector: "adb-rich-editor", inputs: { hasTaxon: "hasTaxon", hasReference: "hasReference", rows: "rows" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef((() => AdbRichEditorComponent)),
                 multi: true
-            }], ngImport: i0, template: "<div>\r\n  <div class=\"d-flex justify-content-end gap-3 mb-1\">\r\n    <button class=\"btn btn-secondary\" (click)=\"onItalicClick()\" title=\"Italic\" aria-label=\"Italic\" type=\"button\"><span class=\"fas fa-italic\"></span></button>\r\n    <button class=\"btn btn-secondary\" (click)=\"onBoldClick()\" title=\"Italic\" aria-label=\"strong\" type=\"button\"><span class=\"fas fa-bold\"></span></button>\r\n    @if (hasTaxon) {\r\n      <button class=\"btn btn-secondary\" (click)=\"onTaxonClick()\" title=\"Taxon\" aria-label=\"Taxon\" type=\"button\"><span class=\"fas fa-bug\"></span></button>\r\n    }\r\n    @if (hasReference) {\r\n      <button class=\"btn btn-secondary\" (click)=\"onReferenceClick()\" title=\"Reference\" aria-label=\"Reference\" type=\"button\"><span class=\"fas fa-asterisk\"></span></button>\r\n    }\r\n  </div>\r\n  <textarea class=\"form-control\" [(ngModel)]=\"text\" (ngModelChange)=\"onTextChange()\" [rows]=\"rows\" (dblclick)=\"onDoubleClick()\"></textarea>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+            }
+        ], ngImport: i0, template: "<div>\r\n  <div class=\"d-flex justify-content-end gap-3 mb-1\">\r\n    <button class=\"btn btn-secondary\" (click)=\"onItalicClick()\" title=\"Italic\" aria-label=\"Italic\" type=\"button\"><span class=\"fas fa-italic\"></span></button>\r\n    <button class=\"btn btn-secondary\" (click)=\"onBoldClick()\" title=\"Italic\" aria-label=\"strong\" type=\"button\"><span class=\"fas fa-bold\"></span></button>\r\n    @if (hasTaxon) {\r\n      <button class=\"btn btn-secondary\" (click)=\"onTaxonClick()\" title=\"Taxon\" aria-label=\"Taxon\" type=\"button\"><span class=\"fas fa-bug\"></span></button>\r\n    }\r\n    @if (hasReference) {\r\n      <button class=\"btn btn-secondary\" (click)=\"onReferenceClick()\" title=\"Reference\" aria-label=\"Reference\" type=\"button\"><span class=\"fas fa-asterisk\"></span></button>\r\n    }\r\n  </div>\r\n  <textarea class=\"form-control\" [(ngModel)]=\"text\" (ngModelChange)=\"onTextChange()\" [rows]=\"rows\" (dblclick)=\"onDoubleClick()\"></textarea>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AdbRichEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'adb-rich-editor', providers: [{
-                            provide: NG_VALUE_ACCESSOR, useExisting: forwardRef((() => AdbRichEditorComponent)),
+            args: [{ selector: 'adb-rich-editor', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef((() => AdbRichEditorComponent)),
                             multi: true
-                        }], standalone: false, template: "<div>\r\n  <div class=\"d-flex justify-content-end gap-3 mb-1\">\r\n    <button class=\"btn btn-secondary\" (click)=\"onItalicClick()\" title=\"Italic\" aria-label=\"Italic\" type=\"button\"><span class=\"fas fa-italic\"></span></button>\r\n    <button class=\"btn btn-secondary\" (click)=\"onBoldClick()\" title=\"Italic\" aria-label=\"strong\" type=\"button\"><span class=\"fas fa-bold\"></span></button>\r\n    @if (hasTaxon) {\r\n      <button class=\"btn btn-secondary\" (click)=\"onTaxonClick()\" title=\"Taxon\" aria-label=\"Taxon\" type=\"button\"><span class=\"fas fa-bug\"></span></button>\r\n    }\r\n    @if (hasReference) {\r\n      <button class=\"btn btn-secondary\" (click)=\"onReferenceClick()\" title=\"Reference\" aria-label=\"Reference\" type=\"button\"><span class=\"fas fa-asterisk\"></span></button>\r\n    }\r\n  </div>\r\n  <textarea class=\"form-control\" [(ngModel)]=\"text\" (ngModelChange)=\"onTextChange()\" [rows]=\"rows\" (dblclick)=\"onDoubleClick()\"></textarea>\r\n</div>\r\n" }]
+                        }
+                    ], standalone: false, template: "<div>\r\n  <div class=\"d-flex justify-content-end gap-3 mb-1\">\r\n    <button class=\"btn btn-secondary\" (click)=\"onItalicClick()\" title=\"Italic\" aria-label=\"Italic\" type=\"button\"><span class=\"fas fa-italic\"></span></button>\r\n    <button class=\"btn btn-secondary\" (click)=\"onBoldClick()\" title=\"Italic\" aria-label=\"strong\" type=\"button\"><span class=\"fas fa-bold\"></span></button>\r\n    @if (hasTaxon) {\r\n      <button class=\"btn btn-secondary\" (click)=\"onTaxonClick()\" title=\"Taxon\" aria-label=\"Taxon\" type=\"button\"><span class=\"fas fa-bug\"></span></button>\r\n    }\r\n    @if (hasReference) {\r\n      <button class=\"btn btn-secondary\" (click)=\"onReferenceClick()\" title=\"Reference\" aria-label=\"Reference\" type=\"button\"><span class=\"fas fa-asterisk\"></span></button>\r\n    }\r\n  </div>\r\n  <textarea class=\"form-control\" [(ngModel)]=\"text\" (ngModelChange)=\"onTextChange()\" [rows]=\"rows\" (dblclick)=\"onDoubleClick()\"></textarea>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { hasTaxon: [{
                 type: Input
             }], hasReference: [{
@@ -1891,49 +1948,78 @@ const RICH_MODULE_CONFIG = new InjectionToken('richModule.config');
 
 class RichTextComponent {
     constructor(config) {
-        this.config = config;
         this.text = '';
         this.parts = [];
         this.taxonUrl = config.taxonUrl;
     }
     ngOnChanges() {
-        if (this.text) {
-            this.parts = this.parseCustomMarkdown(this.text);
-        }
+        this.parts = this.text
+            ? this.parseCustomMarkdown(this.text)
+            : [];
     }
     parseCustomMarkdown(input) {
         const parts = [];
-        const italicRegex = /_([^_]+)_/g;
-        const boldRegex = /__([^_]+)__/g;
+        const boldRegex = /(\*\*|__)(.+?)\1/g;
+        const italicRegex = /(\*|_)([^*_]+?)\1/g;
         const taxonRegex = /\[([^\]]+)\]\(taxon:([^)]+)\)/g;
         const termRegex = /\[([^\]]+)\]\(term:([^)]+)\)/g;
         const referenceRegex = /\[([^\]]+)\]\(reference:([^)]+)\)/g;
-        const combinedRegex = new RegExp(`${italicRegex.source}|${boldRegex.source}|${taxonRegex.source}|${termRegex.source}|${referenceRegex.source}`, 'g');
+        const combinedRegex = new RegExp([
+            boldRegex.source,
+            italicRegex.source,
+            taxonRegex.source,
+            termRegex.source,
+            referenceRegex.source
+        ].join('|'), 'g');
         let lastIndex = 0;
         let match;
         while ((match = combinedRegex.exec(input)) !== null) {
             if (match.index > lastIndex) {
-                parts.push({ type: 'text', content: input.slice(lastIndex, match.index) });
-            }
-            if (match[1]) {
-                parts.push({ type: 'italic', content: match[1] });
+                parts.push({
+                    type: 'text',
+                    content: input.slice(lastIndex, match.index)
+                });
             }
-            else if (match[2]) {
-                parts.push({ type: 'bold', content: match[2] });
+            if (match[2]) {
+                parts.push({
+                    type: 'bold',
+                    content: match[2]
+                });
             }
-            else if (match[3]) {
-                parts.push({ type: 'taxon', content: match[3], id: match[4] });
+            else if (match[4]) {
+                parts.push({
+                    type: 'italic',
+                    content: match[4]
+                });
             }
             else if (match[5]) {
-                parts.push({ type: 'term', content: match[5], id: match[6] });
+                parts.push({
+                    type: 'taxon',
+                    content: match[5],
+                    id: match[6]
+                });
             }
             else if (match[7]) {
-                parts.push({ type: 'reference', content: match[7], id: match[8] });
+                parts.push({
+                    type: 'term',
+                    content: match[7],
+                    id: match[8]
+                });
+            }
+            else if (match[9]) {
+                parts.push({
+                    type: 'reference',
+                    content: match[9],
+                    id: match[10]
+                });
             }
             lastIndex = combinedRegex.lastIndex;
         }
         if (lastIndex < input.length) {
-            parts.push({ type: 'text', content: input.slice(lastIndex) });
+            parts.push({
+                type: 'text',
+                content: input.slice(lastIndex)
+            });
         }
         return parts;
     }