@nectary/components 0.48.1 → 0.49.0

package/utils/markdown.js

@@ -0,0 +1,128 @@
+import { filterXSS } from 'xss';
+const contextTags = {
+  em1: ['<span class="em1">', '</span>'],
+  em2: ['<span class="em2">', '</span>'],
+  em3: ['<span class="em3">', '</span>'],
+  s: ['<span class="strikethrough">', '</span>'],
+  p: ['<p class="paragraph">', '</p>']
+};
+const getContextTags = token => {
+  switch (token) {
+    case '_':
+    case '*':
+      return contextTags.em1;
+    case '__':
+    case '**':
+      return contextTags.em2;
+    case '___':
+    case '***':
+      return contextTags.em3;
+    case '~~':
+      return contextTags.s;
+    case 'p':
+      return contextTags.p;
+    default:
+      return null;
+  }
+};
+const encodeAttr = str => {
+  return `${str}`.replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+};
+const tokenizer = /(?<em>___|\*\*\*|__|\*\*|[_*]|~~)|(?:!?\[(?<linktext>[^\]]*?)\]\((?<linkhref>[^)]+?)\))|(?:`(?<code>[^`].*?)`)|(?<paragraph>\n{2,})|(?<newline>\n)/gm;
+export const parseMarkdown = md => {
+  const context = [];
+  let out = '';
+  let lastIndex = 0;
+  const isContextEnd = token => {
+    return context.length > 0 && context.at(-1).token === token;
+  };
+  const pushContext = token => {
+    const desc = getContextTags(token);
+    if (desc === null) {
+      return;
+    }
+    context.push({
+      token,
+      out: ''
+    });
+  };
+  const popContext = (token, prev) => {
+    const desc = getContextTags(token);
+    if (desc === null) {
+      return token;
+    }
+    const ctx = context.pop();
+    return `${desc[0]}${ctx.out}${prev}${desc[1]}`;
+  };
+  const flushContext = prev => {
+    let str = '';
+    while (context.length > 1) {
+      const ctx = context.pop();
+      str = `${ctx.token}${ctx.out}${str}`;
+    }
+    if (context.length === 0) {
+      pushContext('p');
+    }
+    return popContext(context.at(-1).token, str + prev);
+  };
+  md = md.trim();
+  while (true) {
+    const tokens = tokenizer.exec(md);
+    if (tokens === null) {
+      break;
+    }
+    let prev = md.substring(lastIndex, tokens.index);
+    let chunk = tokens[0];
+    const groups = tokens.groups;
+    lastIndex = tokenizer.lastIndex;
+    if (context.length === 0) {
+      pushContext('p');
+    }
+    if (prev.match(/[^\\](\\\\)*\\$/) != null) {
+      prev = prev.substring(0, prev.length - 1);
+      context.at(-1).out += prev + chunk;
+      continue;
+    }
+    if (groups.em != null) {
+      const isCloseTag = isContextEnd(groups.em);
+      if (isCloseTag) {
+        chunk = popContext(groups.em, prev);
+        context.at(-1).out += chunk;
+        continue;
+      }
+      context.at(-1).out += prev;
+      pushContext(groups.em);
+      continue;
+    }
+    if (groups.linkhref != null) {
+      const href = groups.linkhref;
+      const text = groups.linktext.length > 0 ? groups.linktext : href;
+      chunk = `<a class="link" target="_blank" href="${encodeAttr(href)}">${encodeAttr(text)}</a>`;
+      context.at(-1).out += prev + chunk;
+      continue;
+    }
+    if (groups.code != null) {
+      chunk = `<span class="code">${encodeAttr(groups.code)}</span>`;
+      context.at(-1).out += prev + chunk;
+      continue;
+    }
+    if (groups.newline != null) {
+      chunk = '<br/>';
+      context.at(-1).out += prev + chunk;
+      continue;
+    }
+    if (groups.paragraph != null) {
+      out += flushContext(prev);
+      continue;
+    }
+  }
+  out = (out + flushContext(md.substring(lastIndex))).trim();
+  return filterXSS(out, {
+    whiteList: {
+      p: ['class'],
+      span: ['class'],
+      a: ['href', 'class', 'target'],
+      br: []
+    }
+  });
+};

package/utils/rect.js

@@ -16,7 +16,6 @@ export const getRect = el => {
 export const rectOverlap = (targetRect, contentRect) => {
   return targetRect.x < contentRect.x + contentRect.width && targetRect.x + targetRect.width > contentRect.x && targetRect.y < contentRect.y + contentRect.height && targetRect.y + targetRect.height > contentRect.y;
 };
-
 export const getTargetRect = slot => {
   const item = getFirstSlotElement(slot, true);
   if (item === null) {

package/utils/size.d.ts

@@ -1,10 +1,10 @@
-export declare type TSinchSize = 'l' | 'm' | 's';
-export declare type TSinchSizeEx = TSinchSize | 'xs';
+export type TSinchSize = 'l' | 'm' | 's';
+export type TSinchSizeEx = TSinchSize | 'xs';
 export declare const DEFAULT_SIZE: TSinchSize;
 export declare const sizeValues: readonly TSinchSize[];
 export declare const sizeExValues: readonly TSinchSizeEx[];
-declare type TAssertSize = (value: string | null, name: string) => asserts value is TSinchSize;
+type TAssertSize = (value: string | null, name: string) => asserts value is TSinchSize;
 export declare const assertSize: TAssertSize;
-declare type TAssertSizeEx = (value: string | null, name: string) => asserts value is TSinchSizeEx;
+type TAssertSizeEx = (value: string | null, name: string) => asserts value is TSinchSizeEx;
 export declare const assertSizeEx: TAssertSizeEx;
 export {};

package/vertical-stepper/types.d.ts

@@ -1,11 +1,11 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchVerticalStepperElement = HTMLElement & {
+export type TSinchVerticalStepperElement = HTMLElement & {
     /** Current item index, starting from 1 */
     index: string;
     /** Current item index, starting from 1 */
     setAttribute(name: 'index', value: string): void;
 };
-export declare type TSinchVerticalStepperReact = TSinchElementReact<TSinchVerticalStepperElement> & {
+export type TSinchVerticalStepperReact = TSinchElementReact<TSinchVerticalStepperElement> & {
     /** Current item index, starting from 1 */
     index: string;
     /** Label that is used for a11y */

package/vertical-stepper-item/types.d.ts

@@ -1,6 +1,6 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchVerticalStepperStatusType = 'error' | 'skip';
-export declare type TSinchVerticalStepperItemElement = HTMLElement & {
+export type TSinchVerticalStepperStatusType = 'error' | 'skip';
+export type TSinchVerticalStepperItemElement = HTMLElement & {
     /** Label */
     label: string;
     /** Description */
@@ -14,7 +14,7 @@ export declare type TSinchVerticalStepperItemElement = HTMLElement & {
     /** Status */
     setAttribute(name: 'status', value: TSinchVerticalStepperStatusType): void;
 };
-export declare type TSinchVerticalStepperItemReact = TSinchElementReact<TSinchVerticalStepperItemElement> & {
+export type TSinchVerticalStepperItemReact = TSinchElementReact<TSinchVerticalStepperItemElement> & {
     /** Label */
     label: string;
     /** Description */