botframework-webchat 4.15.3-main.20220706.ecf53f4 → 4.15.3-main.20220720.8c4b995

package/src/adaptiveCards/Attachment/private/renderAdaptiveCard.ts

@@ -0,0 +1,75 @@
+import type {
+  AdaptiveCard,
+  GlobalSettings as GlobalSettingsType,
+  HostConfig as HostConfigType,
+  IMarkdownProcessingResult
+} from 'adaptivecards';
+
+/**
+ * Returns `true`, if the object is a plain object and not a class, otherwise, `false`.
+ */
+function isPlainObject(obj) {
+  return Object.getPrototypeOf(obj) === Object.prototype;
+}
+
+export default function renderAdaptiveCard(
+  adaptiveCard: AdaptiveCard,
+  {
+    adaptiveCardsHostConfig,
+    adaptiveCardsPackage: { GlobalSettings, HostConfig },
+    renderMarkdownAsHTML,
+    setTabIndexAtCardRoot
+  }: {
+    adaptiveCardsHostConfig?: HostConfigType;
+    adaptiveCardsPackage: {
+      GlobalSettings: typeof GlobalSettingsType;
+      HostConfig: typeof HostConfigType;
+    };
+    renderMarkdownAsHTML?: (markdown: string) => string;
+    setTabIndexAtCardRoot: boolean;
+  }
+): { element: HTMLElement } | { errors: Error[] } {
+  // Currently, the only way to set the Markdown engine is to set it thru static member of AdaptiveCard class
+
+  // TODO: [P3] Checks if we could make the "renderMarkdownAsHTML" per card
+  //       This could be limitations from Adaptive Cards package (not supported as of 1.2.5)
+  //       Because there could be timing difference between .parse and .render, we could be using wrong Markdown engine
+
+  // "onProcessMarkdown" is a static function but we are trying to scope it to the current object instead.
+  // eslint-disable-next-line dot-notation
+  adaptiveCard.constructor['onProcessMarkdown'] = (text: string, result: IMarkdownProcessingResult) => {
+    if (renderMarkdownAsHTML) {
+      result.outputHtml = renderMarkdownAsHTML(text);
+      result.didProcess = true;
+    }
+  };
+
+  if (adaptiveCardsHostConfig) {
+    adaptiveCard.hostConfig = isPlainObject(adaptiveCardsHostConfig)
+      ? new HostConfig(adaptiveCardsHostConfig)
+      : adaptiveCardsHostConfig;
+  }
+
+  // For accessibility issue #1340, `tabindex="0"` must not be set for the root container if it is not interactive.
+  GlobalSettings.setTabIndexAtCardRoot = setTabIndexAtCardRoot;
+
+  const { validationEvents } = adaptiveCard.validateProperties();
+
+  if (validationEvents.length) {
+    return { errors: validationEvents.reduce((items, { message }) => [...items, new Error(message)], [] as Error[]) };
+  }
+
+  let element: HTMLElement | undefined;
+
+  try {
+    element = adaptiveCard.render();
+  } catch (error) {
+    return { errors: [error] };
+  }
+
+  if (!element) {
+    return { errors: [new Error('Adaptive Card rendered as empty element')] };
+  }
+
+  return { element };
+}

package/src/adaptiveCards/DOMManipulationWithUndo/addEventListenerWithUndo.ts

@@ -0,0 +1,21 @@
+import noOp from './private/noOp';
+
+import type { UndoFunction } from './types/UndoFunction';
+
+/**
+ * Listens to event. Returns a function, when called, will stop listening.
+ */
+export default function addEventListenerWithUndo(
+  element: HTMLElement | undefined,
+  name: string,
+  handler: EventListener,
+  options?: AddEventListenerOptions | boolean
+): UndoFunction {
+  if (!element) {
+    return noOp;
+  }
+
+  element.addEventListener(name, handler, options);
+
+  return () => element.removeEventListener(name, handler, options);
+}

package/src/adaptiveCards/DOMManipulationWithUndo/bunchUndos.tsx

@@ -0,0 +1,12 @@
+import type { UndoFunction } from './types/UndoFunction';
+
+export default function bunchUndos(fns: UndoFunction[]): UndoFunction {
+  let called: boolean;
+
+  return () => {
+    if (!called) {
+      called = true;
+      [...fns].reverse().forEach(fn => fn?.());
+    }
+  };
+}

package/src/adaptiveCards/DOMManipulationWithUndo/durableAddClassWithUndo.ts

@@ -0,0 +1,28 @@
+import { addClass } from './private/addClass';
+import noOp from './private/noOp';
+
+import type { UndoFunction } from './types/UndoFunction';
+
+/**
+ * Adds a class to the `HTMLElement` and re-add on mutations.
+ *
+ * @returns {function} A function, when called, will restore to previous state.
+ */
+export default function durableAddClassWithUndo(element: HTMLElement | undefined, className: string): UndoFunction {
+  if (element) {
+    addClass(element, className);
+
+    // After we add the class, keep observing the element to make sure the class is not removed.
+    const observer = new MutationObserver(() => addClass(element, className));
+
+    observer.observe(element, { attributes: true, attributeFilter: ['class'] });
+
+    return () => {
+      element.classList.remove(className);
+
+      observer.disconnect();
+    };
+  }
+
+  return noOp;
+}

package/src/adaptiveCards/DOMManipulationWithUndo/durableDisableInputElementAccessiblyWithUndo.ts

@@ -0,0 +1,84 @@
+import addEventListenerWithUndo from './addEventListenerWithUndo';
+import bunchUndos from './bunchUndos';
+import noOp from './private/noOp';
+import setOrRemoveAttributeIfFalseWithUndo from './setOrRemoveAttributeIfFalseWithUndo';
+
+import type { UndoFunction } from './types/UndoFunction';
+
+/**
+ * An event handler for disabling event bubbling and propagation.
+ */
+function disabledHandler(event: Event): void {
+  event.preventDefault();
+  event.stopImmediatePropagation();
+  event.stopPropagation();
+}
+
+function disable(element: HTMLElement, undoStack: UndoFunction[]): void {
+  const tag = element.nodeName.toLowerCase();
+
+  /* eslint-disable-next-line default-case */
+  switch (tag) {
+    case 'button':
+    case 'input':
+    case 'select':
+    case 'textarea':
+      undoStack.push(
+        // "click" handler in capture phase to make sure we can block as much "click" event listeners as possible.
+        addEventListenerWithUndo(element, 'click', disabledHandler, { capture: true }),
+        setOrRemoveAttributeIfFalseWithUndo(element, 'aria-disabled', 'true'),
+        setOrRemoveAttributeIfFalseWithUndo(element, 'tabindex', '-1')
+      );
+
+      if (tag === 'input' || tag === 'textarea') {
+        undoStack.push(setOrRemoveAttributeIfFalseWithUndo(element, 'readonly', 'readonly'));
+      } else if (tag === 'select') {
+        undoStack.push(
+          ...Array.from(element.querySelectorAll('option') as NodeListOf<HTMLOptionElement>).map(option =>
+            setOrRemoveAttributeIfFalseWithUndo(option, 'disabled', 'disabled')
+          )
+        );
+      }
+
+      break;
+  }
+}
+
+/**
+ * Disables an input element in accessible fashion with undo function.
+ *
+ * This is designed for accessibility and mimick the behavior of `disabled` attribute in accessible form:
+ *
+ * - Take away from focus ring;
+ *   - If currently focused, do not move focus;
+ * - Mark content as readonly.
+ *
+ * Thus, it should not impact hyperlinks or other contents which are not affected by `disabled` attribute.
+ *
+ * For simplicity, currently, we did not disable element with `contenteditable` attribute.
+ *
+ * We only disable these elements: `<button>`, `<input>`, `<select>`, `<textarea>`.
+ *
+ * We need durability as Adaptive Cards occasionally reset `tabindex="0"`.
+ *
+ * @returns {function} A function, when called, will restore to previous state.
+ */
+export default function durableDisableInputElementAccessiblyWithUndo(element: HTMLElement | undefined): UndoFunction {
+  if (!element) {
+    return noOp;
+  }
+
+  const undoStack: UndoFunction[] = [];
+
+  const apply = () => disable(element, undoStack);
+
+  apply();
+
+  const observer = new MutationObserver(apply);
+
+  observer.observe(element, { attributeFilter: ['tabindex'] });
+
+  undoStack.push(() => observer.disconnect());
+
+  return bunchUndos(undoStack);
+}

package/src/adaptiveCards/DOMManipulationWithUndo/private/addClass.tsx

@@ -0,0 +1,13 @@
+/**
+ * Adds a class to the `HTMLElement`. Returns `true` if the class is added, otherwise, `undefined`.
+ */
+
+export function addClass(element: HTMLElement, className: string): true | undefined {
+  const { classList } = element;
+
+  if (!classList.contains(className)) {
+    classList.add(className);
+
+    return true;
+  }
+}

package/src/adaptiveCards/DOMManipulationWithUndo/private/getAttributeOrFalse.ts

@@ -0,0 +1,8 @@
+/**
+ * Gets the value of an attribute from an element.
+ *
+ * @returns {false | string} The value of the attribute. `false` if the attribute was not set.
+ */
+export default function getAttributeOrFalse(element: HTMLElement, qualifiedName: string): false | string {
+  return !!element && element.hasAttribute(qualifiedName) && (element.getAttribute(qualifiedName) || '');
+}

package/src/adaptiveCards/DOMManipulationWithUndo/private/noOp.ts

@@ -0,0 +1,5 @@
+// This is intended. This is a no-op function and intended to do nothing.
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noOp: () => void = () => {};
+
+export default noOp;

package/src/adaptiveCards/DOMManipulationWithUndo/private/setOrRemoveAttributeIfFalse.ts

@@ -0,0 +1,18 @@
+/**
+ * Sets or removes an attribute from an element.
+ *
+ * @param {HTMLElement} element - The element to set or remove attribute from.
+ * @param {string} qualifiedName - The name of the attribute.
+ * @param {false | string} value - The value of the attribute. When passing `false`, remove the attribute.
+ */
+export default function setOrRemoveAttributeIfFalse(
+  element: HTMLElement | undefined,
+  qualifiedName: string,
+  value: false | string
+): void {
+  if (value === false) {
+    element?.removeAttribute(qualifiedName);
+  } else {
+    element?.setAttribute(qualifiedName, value);
+  }
+}

package/src/adaptiveCards/DOMManipulationWithUndo/setOrRemoveAttributeIfFalseWithUndo.ts

@@ -0,0 +1,34 @@
+import getAttributeOrFalse from './private/getAttributeOrFalse';
+import noOp from './private/noOp';
+import setOrRemoveAttributeIfFalse from './private/setOrRemoveAttributeIfFalse';
+
+import type { UndoFunction } from './types/UndoFunction';
+
+/**
+ * Sets or removes an attribute from an element with an undo function.
+ *
+ * @param {HTMLElement} element - The element to set or remove attribute from.
+ * @param {string} qualifiedName - The name of the attribute.
+ * @param {false | string} value - The value of the attribute. When passing `false`, remove the attribute.
+ *
+ * @returns {() => void} An undo function, when called, will undo all manipulations by restoring values recorded at the time of the function call.
+ */
+export default function setOrRemoveAttributeIfFalseWithUndo(
+  element: HTMLElement | undefined,
+  qualifiedName: string,
+  value: false | string
+): UndoFunction {
+  if (!element) {
+    return noOp;
+  }
+
+  const prevValue = getAttributeOrFalse(element, qualifiedName);
+
+  if (prevValue === value) {
+    return noOp;
+  }
+
+  setOrRemoveAttributeIfFalse(element, qualifiedName, value);
+
+  return () => setOrRemoveAttributeIfFalse(element, qualifiedName, prevValue);
+}

package/src/adaptiveCards/DOMManipulationWithUndo/types/UndoFunction.ts

@@ -0,0 +1,3 @@
+type UndoFunction = () => void;
+
+export type { UndoFunction };