@nectary/components 4.6.9 → 4.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "4.6.9",
+  "version": "4.7.0",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/rich-text/index.js

@@ -2,7 +2,7 @@ import { getEmojiBaseUrl } from '../emoji/utils';
 import '../emoji';
 import '../code-tag';
 import '../link';
-import { defineCustomElement, NectaryElement, getLiteralAttribute, updateLiteralAttribute, getAttribute, updateAttribute, parseMarkdown } from '../utils';
+import { defineCustomElement, NectaryElement, getLiteralAttribute, updateLiteralAttribute, getAttribute, updateAttribute, parseMarkdown, getReactEventHandler } from '../utils';
 const templateHTML = '<style>:host{display:block;--sinch-comp-rich-text-font:var(--sinch-sys-font-body-m)}:host([size="s"]){--sinch-comp-rich-text-font:var(--sinch-sys-font-body-s)}:host([size=xs]){--sinch-comp-rich-text-font:var(--sinch-sys-font-body-xs)}:host([size=xxs]){--sinch-comp-rich-text-font:var(--sinch-sys-font-body-xxs)}#wrapper{font:var(--sinch-comp-rich-text-font);color:var(--sinch-global-color-text,var(--sinch-sys-color-text-default))}.em1{font-style:italic}.em2{font-weight:var(--sinch-ref-typography-font-weight-700)}.strikethrough{text-decoration:line-through}.link{font:var(--sinch-comp-link-default-font-initial);color:var(--sinch-comp-link-color-default-text-initial);text-decoration:underline}.link:hover{color:var(--sinch-comp-link-color-default-text-hover);text-decoration:none}.code{font:var(--sinch-comp-code-tag-font-text);line-height:inherit;font-size:inherit;border:1px solid var(--sinch-comp-code-tag-color-default-border-initial);background-color:var(--sinch-comp-code-tag-color-default-background-initial);padding:0 .25em;border-radius:var(--sinch-comp-code-tag-shape-radius)}.emoji{--sinch-global-size-icon:1em;--sinch-comp-emoji-vertical-align:-0.2em}.ol,.p,.ul{margin:0}.ol,.ul{padding-left:1.5em}.ol+.p,.p+.ol,.p+.p,.p+.ul,.ul+.p{margin-top:.5em}.li>.p+.ol,.li>.p+.ul{margin-top:0}</style><div id="wrapper"></div>';
 import { createParseVisitor, sizeValues } from './utils';
 const template = document.createElement('template');
@@ -10,6 +10,7 @@ template.innerHTML = templateHTML;
 defineCustomElement('sinch-rich-text', class extends NectaryElement {
   #wrapper;
   #parseVisitor;
+  #controller = null;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -29,12 +30,26 @@ defineCustomElement('sinch-rich-text', class extends NectaryElement {
     this.#parseVisitor = createParseVisitor(shadowRoot);
   }
   connectedCallback() {
+    this.#controller = new AbortController();
+    const {
+      signal
+    } = this.#controller;
     super.connectedCallback();
     this.setAttribute('role', 'paragraph');
     this.#parseVisitor.updateEmojiBaseUrl(getEmojiBaseUrl(this));
     this.#updateText();
+    this.#wrapper.addEventListener('click', this.#handleElementClick, {
+      signal
+    });
+    this.addEventListener('-element-click', this.#onClickReactHandler, {
+      signal
+    });
   }
   disconnectedCallback() {
+    this.#controller?.abort();
+    this.#controller = null;
+    this.#wrapper.removeEventListener('click', this.#handleElementClick);
+    this.removeEventListener('-element-click', this.#onClickReactHandler);
     super.disconnectedCallback();
   }
   static get observedAttributes() {
@@ -61,6 +76,14 @@ defineCustomElement('sinch-rich-text', class extends NectaryElement {
   set text(value) {
     updateAttribute(this, 'text', value);
   }
+  #handleElementClick = e => {
+    const eventTarget = e.target;
+    const elementClickEvent = new CustomEvent('-element-click');
+    Object.defineProperty(elementClickEvent, 'currentTarget', {
+      value: eventTarget
+    });
+    this.dispatchEvent(elementClickEvent);
+  };
   #updateText() {
     if (!this.isDomConnected) {
       return;
@@ -72,4 +95,7 @@ defineCustomElement('sinch-rich-text', class extends NectaryElement {
       this.#wrapper.replaceChildren(parseMarkdown(text, this.#parseVisitor.createVisitor()));
     }
   }
+  #onClickReactHandler = e => {
+    getReactEventHandler(this, 'on-element-click')?.(e);
+  };
 });

package/rich-text/types.d.ts

@@ -1,14 +1,21 @@
 import type { TSinchTextType } from '../text/types';
 import type { TSinchElementReact } from '../types';
+export type ElementClickedEvent = CustomEvent & {
+    currentTarget: HTMLElement;
+};
 export type TSinchRichTextElement = HTMLElement & {
     size: TSinchTextType;
     text: string;
     setAttribute(name: 'size', value: TSinchTextType): void;
     setAttribute(name: 'text', value: string): void;
+    /** Click event */
+    addEventListener(type: '-element-click', listener: (e: ElementClickedEvent) => void): void;
 };
 export type TSinchRichTextReact = TSinchElementReact<TSinchRichTextElement> & {
     size?: TSinchTextType;
     text: string;
+    /** Click event handler */
+    'on-element-click'?: (e: ElementClickedEvent) => void;
 } & {
     style?: {
         '--sinch-comp-rich-text-font'?: string;

package/rich-text/utils.js

@@ -53,7 +53,13 @@ export const createParseVisitor = doc => {
           $link.href = href;
           if (attributes != null) {
             attributes.forEach(attr => {
+              if (attr.startsWith('#')) {
+                $link.id = attr.slice(1);
+              }
               switch (attr) {
+                case 'prevent-default':
+                  $link.preventDefault = true;
+                  break;
                 case 'use-history':
                   $link['use-history'] = true;
                   break;