@entake/particle 19.1.2 → 19.1.3

package/app/shared/components/rich-text/rich-text.component.d.ts

@@ -32,6 +32,7 @@ export declare class RichTextComponent implements ControlValueAccessor, AfterVie
     private _value;
     private _editable;
     protected readonly window: Window & typeof globalThis;
+    private CustomLink;
     editor: Editor;
     get value(): any;
     set value(value: string);

package/fesm2022/entake-particle.mjs

@@ -3825,16 +3825,35 @@ class RichTextComponent {
     _value = null;
     _editable = true;
     window = window;
+    CustomLink = Link.extend({
+        renderHTML({ HTMLAttributes }) {
+            const href = HTMLAttributes.href;
+            if (href) {
+                try {
+                    const linkUrl = new URL(href, window.location.origin);
+                    const currentHost = window.location.hostname;
+                    if (linkUrl.hostname !== currentHost) {
+                        HTMLAttributes.target = '_blank';
+                        HTMLAttributes.rel = 'noopener noreferrer nofollow';
+                    }
+                    else {
+                        HTMLAttributes.target = '_self';
+                        HTMLAttributes.rel = undefined;
+                    }
+                }
+                catch (e) {
+                    console.warn('Invalid URL: ' + href);
+                    console.warn(e);
+                }
+            }
+            return ['a', HTMLAttributes, 0];
+        }
+    });
     editor = new Editor({
         extensions: [
             StarterKit,
-            Link.configure({
-                openOnClick: false,
-                HTMLAttributes: {
-                    class: 'rich-text-link',
-                    target: '_blank',
-                    ref: 'noopener'
-                },
+            this.CustomLink.configure({
+                openOnClick: false
             }),
             TextAlign.configure({
                 types: ['heading', 'paragraph'],
@@ -5699,19 +5718,16 @@ class DropdownComponent {
      * @private
      */
     positionDropdownList() {
-        let { left, right, top, bottom } = this.dropdown.nativeElement.getBoundingClientRect();
-        if (right - left < this.dropdownBoxMinWidth()) {
-            left = left - (this.dropdownBoxMinWidth() - (right - left));
-        }
+        const { left, right, top, bottom } = this.dropdown.nativeElement.getBoundingClientRect();
         const { offsetHeight } = this.dropdownList.nativeElement;
-        const datePickerBottomLeftAnchor = bottom;
-        const availableBottomSpace = window.innerHeight - datePickerBottomLeftAnchor;
+        const bottomLeftAnchor = bottom;
+        const availableBottomSpace = window.innerHeight - bottomLeftAnchor;
         const availableTopSpace = top;
         const offsetListHeight = offsetHeight + DropdownComponent.DROPDOWN_LIST_OFFSET;
         let transformOrigin, positionTop;
         if (availableBottomSpace > offsetListHeight) {
             transformOrigin = 'top left';
-            positionTop = `${datePickerBottomLeftAnchor + DropdownComponent.DROPDOWN_LIST_OFFSET}px`;
+            positionTop = `${bottomLeftAnchor + DropdownComponent.DROPDOWN_LIST_OFFSET}px`;
         }
         else if (availableTopSpace > offsetListHeight) {
             transformOrigin = 'bottom left';
@@ -5728,8 +5744,16 @@ class DropdownComponent {
             transformOrigin = 'top left';
         }
         this.renderer.setStyle(this.dropdownList.nativeElement, 'transform-origin', transformOrigin);
-        this.renderer.setStyle(this.dropdownList.nativeElement, 'left', `${left}px`);
         this.renderer.setStyle(this.dropdownList.nativeElement, 'top', positionTop);
+        const buttonWidth = right - left;
+        const width = buttonWidth < this.dropdownBoxMinWidth() ? this.dropdownBoxMinWidth() : buttonWidth;
+        if (left + width > window.innerWidth) {
+            const newLeft = left - (this.dropdownBoxMinWidth() - buttonWidth);
+            this.renderer.setStyle(this.dropdownList.nativeElement, 'left', `${newLeft}px`);
+        }
+        else {
+            this.renderer.setStyle(this.dropdownList.nativeElement, 'left', `${left}px`);
+        }
     }
     /**
      * Match the dropdown list width to the dropdown's width