@atlaskit/editor-plugin-extension 0.4.2 → 0.5.1

package/dist/es2019/ui/ConfigPanel/ConfigPanelFieldsLoader.js

@@ -0,0 +1,100 @@
+import React, { useEffect, useState } from 'react';
+import ConfigPanel from './ConfigPanel';
+import { useStateFromPromise } from './use-state-from-promise';
+const getFieldsDefinitionFn = (extensionManifest, nodeKey) => {
+  if (extensionManifest && extensionManifest.modules.nodes && extensionManifest.modules.nodes[nodeKey] && extensionManifest.modules.nodes[nodeKey].getFieldsDefinition) {
+    return extensionManifest.modules.nodes[nodeKey].getFieldsDefinition;
+  }
+};
+
+// having the default value in the props instead of a reference will cause excessive rerenders
+const defaultEmptyObject = {};
+const FieldDefinitionsPromiseResolver = props => {
+  const {
+    extensionManifest,
+    nodeKey,
+    extensionParameters,
+    setErrorMessage
+  } = props;
+  const [fields, setFields] = useState(undefined);
+
+  // Resolve the promise
+  // useStateFromPromise() has an issue which isn't compatible with
+  // DynamicFieldDefinitions when it returns a function as setState()
+  // will immediately run the function returned and pass it the currentState.
+  useEffect(() => {
+    if (!extensionManifest) {
+      return;
+    }
+    const promiseFn = getFieldsDefinitionFn(extensionManifest, nodeKey);
+    if (typeof promiseFn !== 'function') {
+      setFields(undefined);
+      return;
+    }
+    promiseFn(extensionParameters).catch(err => {
+      if (err && typeof err.message === 'string') {
+        setErrorMessage(err.message);
+      }
+      setFields(undefined);
+    }).then(value => {
+      if (Array.isArray(value)) {
+        // value: FieldDefinition[]
+        setFields(value);
+      } else if (typeof value === 'function') {
+        try {
+          // value: DynamicFieldDefinitions
+          const dynamicFields = value(extensionParameters);
+          setFields(dynamicFields);
+        } catch (err) {
+          if (err instanceof Error) {
+            setErrorMessage(err.message);
+          }
+          setFields(undefined);
+        }
+      } else {
+        // value: undefined
+        setFields(undefined);
+      }
+    });
+  }, [extensionManifest, nodeKey, extensionParameters, setErrorMessage]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, props.children(fields));
+};
+export default function FieldsLoader({
+  extensionType,
+  extensionKey,
+  nodeKey,
+  extensionProvider,
+  extensionParameters = defaultEmptyObject,
+  parameters = defaultEmptyObject,
+  autoSave,
+  autoSaveTrigger,
+  autoSaveReject,
+  closeOnEsc,
+  showHeader,
+  featureFlags,
+  onChange,
+  onCancel
+}) {
+  const [extensionManifest] = useStateFromPromise(() => extensionProvider.getExtension(extensionType, extensionKey), [extensionProvider, extensionType, extensionKey]);
+  const [errorMessage, setErrorMessage] = useState(null);
+  return /*#__PURE__*/React.createElement(FieldDefinitionsPromiseResolver, {
+    setErrorMessage: setErrorMessage,
+    extensionManifest: extensionManifest,
+    nodeKey: nodeKey,
+    extensionParameters: extensionParameters
+  }, fields => /*#__PURE__*/React.createElement(ConfigPanel, {
+    extensionManifest: extensionManifest,
+    isLoading: !extensionManifest || errorMessage === null && !fields,
+    fields: fields,
+    parameters: parameters,
+    autoSave: autoSave,
+    autoSaveTrigger: autoSaveTrigger,
+    autoSaveReject: autoSaveReject,
+    closeOnEsc: closeOnEsc,
+    showHeader: showHeader,
+    onChange: onChange,
+    onCancel: onCancel,
+    errorMessage: errorMessage,
+    featureFlags: featureFlags
+  }));
+}

package/dist/es2019/ui/ConfigPanel/ConfigPanelLoader.js

@@ -0,0 +1,7 @@
+import Loadable from 'react-loadable';
+import LoadingState from './LoadingState';
+export default Loadable({
+  loader: () => import( /* webpackChunkName: "@atlaskit-internal_editor-core-config-panel" */
+  './ConfigPanelFieldsLoader').then(module => module.default),
+  loading: LoadingState
+});

package/dist/es2019/ui/ConfigPanel/ErrorMessage/ErrorImage.js

@@ -0,0 +1,66 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+// Quality Ticket: https://product-fabric.atlassian.net/browse/DSP-4249
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/react';
+const imageContainerStyles = css({
+  margin: `0 auto ${"var(--ds-space-300, 24px)"}`,
+  height: '80px'
+});
+const ErrorImage = () => jsx("div", {
+  css: imageContainerStyles
+}, jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 163.28 218",
+  height: "80"
+}, jsx("defs", null, jsx("linearGradient", {
+  id: "linear-gradient",
+  x1: "133.86",
+  x2: "-2.79",
+  y1: "136.43",
+  y2: "200.15",
+  gradientUnits: "userSpaceOnUse"
+}, jsx("stop", {
+  offset: "0",
+  stopColor: "#ffd740"
+}), jsx("stop", {
+  offset: "1",
+  stopColor: "#ffab00"
+})), jsx("clipPath", {
+  id: "clip-path"
+}, jsx("path", {
+  id: "_Polygon_",
+  d: "M94.78 80.16l66.44 115.08A15.17 15.17 0 01148.08 218H15.2a15.17 15.17 0 01-13.14-22.76L68.5 80.16a15.17 15.17 0 0126.28 0z",
+  className: "cls-1",
+  "data-name": "<Polygon>"
+})), jsx("style", null, `.cls-1{fill:url(#linear-gradient)}.cls-2{fill:#253858}.cls-6{fill:none;stroke-linecap:round;stroke-miterlimit:10;stroke-width:2px;stroke:#5e6c84}`)), jsx("g", {
+  id: "Layer_2",
+  "data-name": "Layer 2"
+}, jsx("g", {
+  id: "Software"
+}, jsx("path", {
+  id: "_Polygon_2",
+  d: "M94.78 80.16l66.44 115.08A15.17 15.17 0 01148.08 218H15.2a15.17 15.17 0 01-13.14-22.76L68.5 80.16a15.17 15.17 0 0126.28 0z",
+  className: "cls-1",
+  "data-name": "<Polygon>"
+}), jsx("path", {
+  d: "M87.22 163.71l2.88-44.35a9.18 9.18 0 00-9.16-9.78 9.18 9.18 0 00-9.16 9.78l2.88 44.35a6.3 6.3 0 006.28 5.89 6.3 6.3 0 006.28-5.89zM71.38 187.25a9.53 9.53 0 0010.39 9.58 9.68 9.68 0 00-.9-19.32 9.64 9.64 0 00-9.49 9.74z",
+  className: "cls-2"
+}), jsx("path", {
+  fill: "#ffc400",
+  d: "M91.7 27.17L84.29.45A.61.61 0 0083.1.5l-4.66 25.1-5.8-1.08a.61.61 0 00-.7.76L79.35 52a.61.61 0 001.19 0l4.66-25.1 5.8 1.03a.61.61 0 00.7-.76z"
+}), jsx("path", {
+  fill: "#ffab00",
+  d: "M65.12 41.81l-10.88-8.55a.27.27 0 00-.41.33L59.36 45l-2.66 1.31a.27.27 0 000 .45l10.87 8.55a.27.27 0 00.41-.33l-5.57-11.43 2.66-1.29a.27.27 0 00.05-.45z"
+}), jsx("path", {
+  fill: "none",
+  stroke: "#344563",
+  strokeLinecap: "round",
+  strokeMiterlimit: "10",
+  strokeWidth: "2",
+  d: "M115.15 36.6c-1.17 1.59-11-5.6-12.16-4s8.66 8.79 7.5 10.39-11-5.6-12.17-4 8.66 8.79 7.49 10.39-11-5.6-12.17-4 8.66 8.79 7.49 10.39"
+}), jsx("path", {
+  d: "M119.92 64.19c-1.46 1.33-7.05-4.78-8.51-3.44s4.13 7.45 2.67 8.78-7.05-4.78-8.51-3.44c-.68.62.16 2.27 1.11 4M44.8 64c1.82.77 5-6.87 6.86-6.1s-1.39 8.4.43 9.17 5-6.87 6.86-6.1c.85.36.61 2.19.29 4.13",
+  className: "cls-6"
+})))));
+export default ErrorImage;

package/dist/es2019/ui/ConfigPanel/ErrorMessage/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { defineMessages, injectIntl } from 'react-intl-next';
+import EmptyState from '@atlaskit/empty-state';
+import ErrorImage from './ErrorImage';
+const messages = defineMessages({
+  configFailedToLoad: {
+    id: 'fabric.editor.configFailedToLoad',
+    defaultMessage: 'Failed to load',
+    description: 'Displayed when the config panel fails to load fields'
+  }
+});
+const ConfigPanelErrorMessage = ({
+  errorMessage,
+  intl
+}) => {
+  return /*#__PURE__*/React.createElement(EmptyState, {
+    header: intl.formatMessage(messages.configFailedToLoad),
+    description: errorMessage,
+    renderImage: () => /*#__PURE__*/React.createElement(ErrorImage, null),
+    size: "narrow",
+    imageHeight: 80,
+    testId: "config-panel-error-message"
+  });
+};
+export default injectIntl(ConfigPanelErrorMessage);

package/dist/es2019/ui/ConfigPanel/FieldMessages.js

@@ -0,0 +1,101 @@
+import React, { Fragment, useMemo } from 'react';
+import { injectIntl } from 'react-intl-next';
+import { ErrorMessage, HelperMessage } from '@atlaskit/form';
+import { messages } from './messages';
+import { FieldTypeError, ValidationError } from './types';
+
+// sidestep XSS issues
+function makeMarkup(fragment, key) {
+  const {
+    nodeName,
+    nodeType,
+    childNodes,
+    textContent
+  } = fragment;
+  if (nodeType === Node.TEXT_NODE) {
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: key
+    }, textContent);
+  }
+
+  // NOTE: NodeList doesn't have .map
+  const children = [];
+  childNodes.forEach((childNode, i) => {
+    const markup = makeMarkup(childNode, String(i));
+    if (markup) {
+      children.push(markup);
+    }
+  });
+  switch (nodeName) {
+    case 'B':
+      return /*#__PURE__*/React.createElement("b", {
+        key: key
+      }, children);
+    case 'I':
+      return /*#__PURE__*/React.createElement("i", {
+        key: key
+      }, children);
+    case 'STRONG':
+      return /*#__PURE__*/React.createElement("strong", {
+        key: key
+      }, children);
+    case 'EM':
+      return /*#__PURE__*/React.createElement("em", {
+        key: key
+      }, children);
+    case 'CODE':
+      return /*#__PURE__*/React.createElement("code", {
+        key: key
+      }, children);
+  }
+  if (children.length === 1) {
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: key
+    }, children[0]);
+  }
+  if (children.length) {
+    return /*#__PURE__*/React.createElement("span", {
+      key: key
+    }, children);
+  }
+  return null;
+}
+function Description({
+  description
+}) {
+  const markup = useMemo(() => {
+    const dom = new DOMParser().parseFromString(description, 'text/html');
+    return makeMarkup(dom);
+  }, [description]);
+  return /*#__PURE__*/React.createElement(HelperMessage, {
+    testId: "field-message-description"
+  }, markup);
+}
+const FieldMessages = function ({
+  error,
+  description,
+  intl
+}) {
+  if (!error && description) {
+    return /*#__PURE__*/React.createElement(Description, {
+      description: description
+    });
+  }
+  switch (error) {
+    case ValidationError.Required:
+      return /*#__PURE__*/React.createElement(ErrorMessage, {
+        testId: "config-panel-error-message"
+      }, intl.formatMessage(messages.required));
+    case ValidationError.Invalid:
+      return /*#__PURE__*/React.createElement(ErrorMessage, {
+        testId: "config-panel-error-message"
+      }, intl.formatMessage(messages.invalid));
+    case FieldTypeError.isMultipleAndRadio:
+      return /*#__PURE__*/React.createElement(ErrorMessage, {
+        testId: "config-panel-error-message"
+      }, intl.formatMessage(messages.isMultipleAndRadio));
+    default:
+      return null;
+  }
+};
+export default injectIntl(FieldMessages);

package/dist/es2019/ui/ConfigPanel/Fields/Boolean.js

@@ -0,0 +1,138 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import React, { Fragment } from 'react';
+import { css, jsx } from '@emotion/react';
+import { Checkbox as AKCheckbox } from '@atlaskit/checkbox';
+import { Field } from '@atlaskit/form';
+import AKToggle from '@atlaskit/toggle';
+import FieldMessages from '../FieldMessages';
+import { ValidationError } from '../types';
+import { requiredIndicator } from './common/RequiredIndicator';
+const toggleFieldWrapperStyles = css({
+  display: 'flex'
+});
+const toggleLabelStyles = css({
+  display: 'flex',
+  padding: '3px 3px 3px 0px',
+  flexGrow: 1
+});
+function validate(value, isRequired) {
+  if (isRequired && !value) {
+    return ValidationError.Required;
+  }
+}
+function parseBoolean(value) {
+  if (typeof value === 'boolean') {
+    return value;
+  }
+  return value === 'true';
+}
+function handleOnChange(onChange, onFieldChange, event) {
+  var _event$target;
+  onChange((event === null || event === void 0 ? void 0 : (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.checked) || false);
+  // Note: prior to bumping typescript to version 2.4.2 onFieldChange
+  // was being called with a global variable (which had a value of '')
+  // While this was not intended, the code still worked as expected.
+  // In typescript 2.4.2 accessing the global variable name has been
+  // deprecated, so this has been replaced with the value it was
+  // previously passing.
+  onFieldChange('', true);
+}
+function Checkbox({
+  name,
+  field,
+  onFieldChange
+}) {
+  const {
+    label,
+    description,
+    isRequired = false,
+    defaultValue = false
+  } = field;
+  return jsx(Field, {
+    name: name,
+    isRequired: isRequired,
+    validate: value => validate(value, isRequired),
+    defaultValue: defaultValue
+  }, ({
+    fieldProps,
+    error
+  }) => {
+    const {
+      value: isChecked,
+      ...restFieldProps
+    } = fieldProps;
+    return jsx(Fragment, null, jsx(AKCheckbox, _extends({}, restFieldProps, {
+      label: label,
+      onChange: event => handleOnChange(fieldProps.onChange, onFieldChange, event),
+      isChecked: parseBoolean(isChecked)
+    })), jsx(FieldMessages, {
+      error: error,
+      description: description
+    }));
+  });
+}
+function Toggle({
+  name,
+  field,
+  onFieldChange
+}) {
+  const {
+    label,
+    description,
+    isRequired = false,
+    defaultValue = false
+  } = field;
+  return jsx(Field, {
+    name: name,
+    isRequired: isRequired,
+    validate: value => validate(value, isRequired),
+    defaultValue: defaultValue,
+    testId: `config-panel-toggle-${name}`
+  }, ({
+    fieldProps,
+    error
+  }) => {
+    const {
+      id,
+      value: isChecked,
+      ...restFieldProps
+    } = fieldProps;
+    return jsx(Fragment, null, jsx("div", {
+      css: toggleFieldWrapperStyles
+    }, jsx("label", {
+      css: toggleLabelStyles,
+      id: id,
+      htmlFor: id
+    }, label, isRequired ?
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    jsx("span", {
+      css: requiredIndicator,
+      "aria-hidden": "true"
+    }, "*") : null), jsx(AKToggle, _extends({}, restFieldProps, {
+      onChange: event => handleOnChange(fieldProps.onChange, onFieldChange, event),
+      isChecked: parseBoolean(isChecked)
+    }))), jsx(FieldMessages, {
+      error: error,
+      description: description
+    }));
+  });
+}
+export default function Boolean({
+  name,
+  field,
+  onFieldChange
+}) {
+  if (field.style === 'toggle') {
+    return jsx(Toggle, {
+      name: name,
+      field: field,
+      onFieldChange: onFieldChange
+    });
+  }
+  return jsx(Checkbox, {
+    name: name,
+    field: field,
+    onFieldChange: onFieldChange
+  });
+}

package/dist/es2019/ui/ConfigPanel/Fields/CheckboxGroup.js

@@ -0,0 +1,96 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+
+import { Fragment, useCallback } from 'react';
+import { css, jsx } from '@emotion/react';
+import { Checkbox as AKCheckbox } from '@atlaskit/checkbox';
+import { Fieldset as AKFieldset, Field } from '@atlaskit/form';
+import FieldMessages from '../FieldMessages';
+import { ValidationError } from '../types';
+function validate(value, isRequired) {
+  if (isRequired && !(value !== null && value !== void 0 && value.length)) {
+    return ValidationError.Required;
+  }
+}
+const requiredIndicatorStyles = css({
+  color: "var(--ds-text-danger, #bf2600)"
+});
+function CheckboxGroupInner({
+  label,
+  description,
+  onFieldChange,
+  options,
+  error,
+  fieldProps
+}) {
+  const {
+    onChange,
+    value,
+    ...restFieldProps
+  } = fieldProps;
+  function _onChange(optionValue, isChecked) {
+    const active = new Set(value ? value : []);
+    if (isChecked) {
+      active.add(optionValue);
+    } else {
+      active.delete(optionValue);
+    }
+    onChange([...active]);
+    onFieldChange();
+  }
+  return jsx(Fragment, null, jsx(AKFieldset, {
+    legend: label
+  }, options.map(({
+    label: optionLabel,
+    value: optionValue
+  }, i) => {
+    const isChecked = value && value.includes(optionValue);
+    const onOptionChange = event => {
+      _onChange(optionValue, event.target.checked);
+    };
+    return jsx(AKCheckbox, _extends({
+      key: i
+    }, restFieldProps, {
+      isRequired: false,
+      label: optionLabel,
+      isChecked: isChecked,
+      onChange: onOptionChange
+    }));
+  })), jsx(FieldMessages, {
+    error: error,
+    description: description
+  }));
+}
+export default function CheckboxGroup({
+  name,
+  field,
+  onFieldChange
+}) {
+  const {
+    label: labelBase,
+    description,
+    defaultValue,
+    isRequired = false,
+    items: options
+  } = field;
+  const label = jsx(Fragment, null, labelBase, isRequired ? jsx("span", {
+    css: requiredIndicatorStyles,
+    "aria-hidden": "true"
+  }, ' ', "*") : null);
+  const _onFieldChange = useCallback(() => {
+    onFieldChange(name, true);
+  }, [name, onFieldChange]);
+  return jsx(Field, {
+    name: name,
+    isRequired: isRequired,
+    defaultValue: defaultValue,
+    validate: value => validate(value, isRequired)
+  }, props => {
+    return jsx(CheckboxGroupInner, _extends({
+      label: label,
+      description: description,
+      options: options,
+      onFieldChange: _onFieldChange
+    }, props));
+  });
+}