@atlaskit/editor-plugin-extension 0.4.2 → 0.5.1

package/dist/types-ts4.5/ui/ConfigPanel/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const ALLOWED_LOGGED_MACRO_PARAMS: Record<string, Array<string>>;
+export declare const ALLOWED_PARAM_TYPES: string[];

package/dist/types-ts4.5/ui/ConfigPanel/index.d.ts

@@ -0,0 +1,2 @@
+import ConfigPanelLoader from './ConfigPanelLoader';
+export default ConfigPanelLoader;

package/dist/types-ts4.5/ui/ConfigPanel/messages.d.ts

@@ -0,0 +1,92 @@
+export declare const messages: {
+    submit: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    cancel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    close: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    required: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    invalid: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    isMultipleAndRadio: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    addField: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    removeField: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    createOption: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    documentation: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    help: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    custom: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    from: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    to: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    expand: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    collapse: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    errorBoundaryTitle: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    errorBoundaryNote: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/types-ts4.5/ui/ConfigPanel/transformers.d.ts

@@ -0,0 +1,9 @@
+import type { ExtensionManifest, FieldDefinition, Parameters, ParametersWithDuplicateFields } from '@atlaskit/editor-common/extensions';
+interface SerializeOptions {
+    depth?: number;
+    parentType?: 'fieldset' | 'tab' | 'expand';
+}
+export declare const findDuplicateFields: (fields: FieldDefinition[]) => FieldDefinition | undefined;
+export declare const serialize: (manifest: ExtensionManifest, data: Parameters, fields: FieldDefinition[], options?: SerializeOptions) => Promise<Parameters>;
+export declare const deserialize: (manifest: ExtensionManifest, data: Parameters | ParametersWithDuplicateFields, fields: FieldDefinition[], depth?: number) => Promise<Parameters>;
+export {};

package/dist/types-ts4.5/ui/ConfigPanel/types.d.ts

@@ -0,0 +1,39 @@
+import type { ExtensionManifest, FieldDefinition, Parameters } from '@atlaskit/editor-common/extensions';
+import type { ContextIdentifierProvider } from '@atlaskit/editor-common/provider-factory';
+import type { FeatureFlags } from '@atlaskit/editor-common/types';
+export declare enum ValidationError {
+    Required = "required",
+    Invalid = "invalid"
+}
+export declare enum FieldTypeError {
+    isMultipleAndRadio = "isMultipleAndRadio"
+}
+export type Entry<T> = [
+    string,
+    T
+];
+export type OnFieldChange = (name: string, isDirty: boolean) => void;
+export interface ValidationErrors {
+    [key: string]: any;
+}
+export interface FieldComponentProps {
+    field: FieldDefinition;
+    parameters: Parameters;
+    parentName?: string;
+    extensionManifest: ExtensionManifest;
+    firstVisibleFieldName?: string;
+    onFieldChange: OnFieldChange;
+    featureFlags?: FeatureFlags;
+}
+export interface FormContentProps {
+    fields: FieldDefinition[];
+    parentName?: string;
+    parameters?: Parameters;
+    extensionManifest: ExtensionManifest;
+    canRemoveFields?: boolean;
+    onClickRemove?: (fieldName: string) => void;
+    onFieldChange: OnFieldChange;
+    firstVisibleFieldName?: string;
+    contextIdentifierProvider?: ContextIdentifierProvider;
+    featureFlags?: FeatureFlags;
+}

package/dist/types-ts4.5/ui/ConfigPanel/use-abortable-effect/index.d.ts

@@ -0,0 +1,16 @@
+import type React from 'react';
+type AbortableEffectWithCancel = (signal: AbortSignal) => () => void;
+type AbortableEffect = (signal: AbortSignal) => void;
+/**
+ * Similar to useEffect but integrated with the AbortController to make it useful for async operations.
+ * On unmount, the abort function will be called and the signal will be passed down to the function so
+ * we get the chance to cancel any operation we want.
+ *
+ * Note: This hook follows the signature of useEffect so it can be linted if enabled through the
+ * `additionalHooks` config.
+ *
+ * @param callback
+ * @param deps
+ */
+export declare function useAbortableEffect(callback: AbortableEffectWithCancel | AbortableEffect, deps: React.DependencyList): void;
+export {};

package/dist/types-ts4.5/ui/ConfigPanel/use-state-from-promise/index.d.ts

@@ -0,0 +1,18 @@
+import type React from 'react';
+type AbortableEffect<T> = () => Promise<T> | undefined;
+/**
+ * Similar to useState but deals with async values.
+ * Simply pass a promise and it will set the state when it resolves. It won't try to set if
+ * the component unmounts
+ *
+ * Note: This hook follows the signature of useEffect so it can be linted if enabled through the
+ * `additionalHooks` config.
+ *
+ * @param callback
+ * @param deps
+ */
+export declare function useStateFromPromise<S>(callback: AbortableEffect<S>, deps: React.DependencyList, initialValue?: S): [
+    S | undefined,
+    React.Dispatch<React.SetStateAction<S | undefined>>
+];
+export {};

package/dist/types-ts4.5/ui/ConfigPanel/utils.d.ts

@@ -0,0 +1,16 @@
+import type { GroupBase } from 'react-select';
+import type { FieldDefinition, Option, Parameters } from '@atlaskit/editor-common/extensions';
+import { ValidationError } from './types';
+export declare const validate: <T>(field: Partial<FieldDefinition>, value: T) => ValidationError | undefined;
+type ValidationProps = {
+    isRequired?: boolean;
+    isMultiple?: boolean;
+};
+export declare const validateRequired: <T>({ isRequired, isMultiple }: ValidationProps, value: T) => ValidationError | undefined;
+export declare const getOptionFromValue: (options: Option[] | GroupBase<Option>[], value: string | string[] | undefined) => Option | Option[] | undefined;
+export declare const getSafeParentedName: (name: string, parentName?: string) => string;
+export declare const isDuplicateField: (key: string) => boolean;
+export declare const getNameFromDuplicateField: (key: string) => string;
+export declare const parseParamType: (paramValue: Parameters[string], paramField?: FieldDefinition) => any;
+export declare const getLoggedParameters: (macroKey: string, currentParams: Parameters, macroFields?: FieldDefinition[]) => {};
+export {};

package/dist/types-ts4.5/ui/SaveIndicator/SaveIndicator.d.ts

@@ -0,0 +1,4 @@
+/** @jsx jsx */
+import type { FunctionComponent } from 'react';
+import type { SaveIndicatorProps } from './types';
+export declare const SaveIndicator: FunctionComponent<SaveIndicatorProps>;

package/dist/types-ts4.5/ui/SaveIndicator/messages.d.ts

@@ -0,0 +1,7 @@
+export declare const messages: {
+    saveIndicator: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/types-ts4.5/ui/SaveIndicator/types.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+interface SaveIndicatorRenderOptions {
+    onSaveStarted: () => void;
+    onSaveEnded: () => void;
+}
+export interface SaveIndicatorProps {
+    children: (options: SaveIndicatorRenderOptions) => ReactNode;
+    duration: number;
+    visible?: boolean;
+}
+export {};

package/dist/types-ts4.5/utils.d.ts

@@ -0,0 +1,15 @@
+import type { Mark, Node as PMNode, Schema } from '@atlaskit/editor-prosemirror/model';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { DomAtPos, NodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+export declare const getSelectedExtension: (state: EditorState, searchParent?: boolean) => import("prosemirror-utils/dist/types").ContentNodeWithPos | undefined;
+export declare const findExtensionWithLocalId: (state: EditorState, localId?: string) => NodeWithPos | undefined;
+export declare const getSelectedDomElement: (schema: Schema, domAtPos: DomAtPos, selectedExtensionNode: NodeWithPos) => HTMLElement;
+export declare const getDataConsumerMark: (newNode: PMNode) => Mark | undefined;
+export declare const getNodeTypesReferenced: (ids: string[], state: EditorState) => string[];
+export declare const findNodePosWithLocalId: (state: EditorState, localId: string) => NodeWithPos | undefined;
+export interface Position {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+}

package/example-utils/config-panel/ConfigPanelWithExtensionPicker.tsx

@@ -0,0 +1,217 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+/** @jsx jsx */
+import { useEffect, useState } from 'react';
+
+import { css, jsx } from '@emotion/react';
+import { IntlProvider } from 'react-intl-next';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { CodeBlock } from '@atlaskit/code';
+import type {
+  ExtensionModule,
+  ExtensionProvider,
+  Parameters,
+} from '@atlaskit/editor-common/extensions';
+import { getExtensionKeyAndNodeKey } from '@atlaskit/editor-common/extensions';
+import TextArea from '@atlaskit/textarea';
+import * as colors from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
+
+import { useStateFromPromise } from '../../src/ui/ConfigPanel/use-state-from-promise';
+
+import ConfigPanelWithProviders from './ConfigPanelWithProviders';
+import type { CallbackParams } from './ExtensionNodePicker';
+import ExtensionNodePicker from './ExtensionNodePicker';
+
+const wrapperStyles = css({ margin: token('space.200', '16px') });
+
+const exampleWrapperStyles = css({ display: 'flex', flexDirection: 'row' });
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+const column = (width: number | string) => css`
+  width: ${width}px;
+  margin: ${token('space.200', '16px')};
+
+  h3 {
+    border-bottom: 1px solid ${colors.N50};
+    margin-bottom: ${token('space.200', '16px')};
+  }
+`;
+
+const codeWrapperStyles = css({
+  marginTop: token('space.200', '16px'),
+});
+
+function ExtensionConfigPanel({
+  extension,
+  node,
+  nodeKey,
+  extensionProvider,
+  parameters: initialParameters = {},
+  item,
+}: { extensionProvider: ExtensionProvider; nodeKey: string } & CallbackParams) {
+  const [fields] = useStateFromPromise(
+    function getFields() {
+      if (node && typeof node.getFieldsDefinition === 'function') {
+        return node.getFieldsDefinition({});
+      }
+    },
+    [node],
+    [],
+  );
+
+  const [parametersJson, setParametersJson] = useState(() =>
+    JSON.stringify(initialParameters),
+  );
+
+  const [parameters, setParameters] = useState(initialParameters);
+
+  const onChangeParametersJson: React.ChangeEventHandler<
+    HTMLTextAreaElement
+  > = event => {
+    setParametersJson(event.target.value);
+  };
+
+  useEffect(() => {
+    try {
+      setParameters({
+        ...parameters,
+        ...JSON.parse(parametersJson),
+      });
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(
+        'Invalid JSON Parameters',
+        e instanceof Error ? e.message : String(e),
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [parametersJson]);
+
+  if (!extension || !node || !item) {
+    return null;
+  }
+
+  return (
+    <div css={exampleWrapperStyles}>
+      {/* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */}
+      <div css={column(400)} key="config-panel">
+        <h3>Config panel:</h3>
+        <ConfigPanelWithProviders
+          extensionType={extension.type}
+          extensionKey={extension.key}
+          nodeKey={nodeKey}
+          extensionProvider={extensionProvider}
+          parameters={parameters}
+          onChange={setParameters}
+        />
+      </div>
+      {/* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */}
+      <div css={column(500)} key="parameters">
+        <h3>Initial Parameters:</h3>
+        <div css={codeWrapperStyles}>
+          {parameters && (
+            <TextArea
+              onChange={onChangeParametersJson}
+              value={parametersJson}
+            />
+          )}
+        </div>
+        <h3>State:</h3>
+        <div css={codeWrapperStyles}>
+          {parameters && (
+            <CodeBlock
+              language="json"
+              text={JSON.stringify(parameters, null, 4)}
+              showLineNumbers={false}
+            />
+          )}
+        </div>
+      </div>
+      {/* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */}
+      <div css={column(500)} key="fields-definition">
+        <h3>Fields definition:</h3>
+        <div css={codeWrapperStyles}>
+          <CodeBlock
+            language="json"
+            text={JSON.stringify(fields, null, 4)}
+            showLineNumbers={false}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const addHashToTheUrl = (extensionPath: string): void => {
+  // @ts-expect-error
+  window.top.location.hash = extensionPath;
+};
+
+const getHashFromUrl = (): string =>
+  // @ts-expect-error
+  window.top.location.hash &&
+  // @ts-expect-error
+  decodeURIComponent(window.top.location.hash.slice(1));
+
+export default function ConfigPanelWithExtensionPicker({
+  extensionProvider,
+  parameters = {},
+}: {
+  extensionProvider: ExtensionProvider;
+  parameters?: Parameters;
+}) {
+  const [hash, setHash] = useState<string>(getHashFromUrl());
+  const [extensionNode, setNodeAndParameters] = useState<CallbackParams>();
+  const [item, setItem] = useState<ExtensionModule>();
+  const [extensionKey, nodeKey] = getExtensionKeyAndNodeKey(
+    hash,
+    extensionNode && extensionNode.extension
+      ? extensionNode.extension.type
+      : '',
+  );
+
+  const actualParameters =
+    extensionNode &&
+    extensionNode.parameters &&
+    Object.keys(extensionNode.parameters).length > 0
+      ? extensionNode.parameters
+      : parameters;
+
+  return (
+    <IntlProvider locale="en-AU">
+      <div css={wrapperStyles}>
+        <div style={{ float: 'left' }} key="panel">
+          {extensionNode?.node && item && (
+            <ExtensionConfigPanel
+              key={hash}
+              extension={extensionNode.extension}
+              extensionProvider={extensionProvider}
+              nodeKey={nodeKey}
+              node={extensionNode.node}
+              item={item}
+              parameters={actualParameters}
+            />
+          )}
+        </div>
+        <div style={{ float: 'right' }} key="picker">
+          <ExtensionNodePicker
+            selectedExtension={extensionKey}
+            selectedNode={nodeKey}
+            extensionProvider={extensionProvider}
+            onSelect={params => {
+              setNodeAndParameters(params);
+              setItem(params.item);
+
+              if (params.extension) {
+                const hash = `${params.extension.key}:${params.nodeKey}`;
+                addHashToTheUrl(hash);
+                setHash(hash);
+              }
+            }}
+          />
+        </div>
+      </div>
+    </IntlProvider>
+  );
+}

package/example-utils/config-panel/ConfigPanelWithProviders.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { IntlProvider } from 'react-intl-next';
+
+import {
+  ExtensionKey,
+  ExtensionProvider,
+  ExtensionType,
+  Parameters,
+} from '@atlaskit/editor-common/extensions';
+
+import ConfigPanel from '../../src/ui/ConfigPanel';
+
+export default function ConfigPanelWithProviders({
+  extensionType,
+  extensionKey,
+  nodeKey,
+  extensionProvider,
+  parameters,
+  onChange,
+}: {
+  extensionType: ExtensionType;
+  extensionKey: ExtensionKey;
+  nodeKey: string;
+  extensionProvider: ExtensionProvider;
+  parameters: Parameters;
+  onChange?: (parameters: Parameters) => void;
+}) {
+  function _onChange(data: Parameters) {
+    if (onChange) {
+      onChange(data);
+    }
+  }
+
+  return (
+    <IntlProvider locale="en">
+      <ConfigPanel
+        extensionType={extensionType}
+        extensionKey={extensionKey}
+        nodeKey={nodeKey}
+        extensionProvider={extensionProvider}
+        parameters={parameters}
+        showHeader
+        autoSave
+        onChange={_onChange}
+        // eslint-disable-next-line no-console
+        onCancel={() => console.log('onCancel')}
+      />
+    </IntlProvider>
+  );
+}

package/example-utils/config-panel/ExtensionNodePicker.tsx

@@ -0,0 +1,141 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+import type { ReactNode } from 'react';
+import React, { useState } from 'react';
+
+import Loadable from 'react-loadable';
+
+import type {
+  ExtensionManifest,
+  ExtensionModule,
+  ExtensionModuleActionObject,
+  ExtensionModuleNode,
+  ExtensionProvider,
+  Parameters,
+} from '@atlaskit/editor-common/extensions';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ButtonItem, HeadingItem, MenuGroup, Section } from '@atlaskit/menu';
+
+import { useStateFromPromise } from '../../src/ui/ConfigPanel/use-state-from-promise';
+
+export type CallbackParams = {
+  extension?: ExtensionManifest;
+  nodeKey?: string;
+  item: ExtensionModule;
+  node?: ExtensionModuleNode;
+  parameters?: Parameters;
+};
+
+export default function ExtensionNodePicker({
+  selectedExtension,
+  selectedNode,
+  extensionProvider,
+  onSelect,
+}: {
+  selectedExtension?: string;
+  selectedNode?: string;
+  extensionProvider: ExtensionProvider;
+  onSelect: (nodeParams: CallbackParams) => void;
+}) {
+  const [hasSelection, setHasSelection] = useState<boolean>(false);
+
+  // AFP-2511 TODO: Fix automatic suppressions below
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const [extensions] = useStateFromPromise(extensionProvider.getExtensions, [
+    extensionProvider,
+  ]);
+
+  return (
+    <div
+      style={{
+        border: `1px solid #ccc`,
+        boxShadow:
+          '0px 4px 8px rgba(9, 30, 66, 0.25), 0px 0px 1px rgba(9, 30, 66, 0.31)',
+        borderRadius: 4,
+        maxWidth: 320,
+        maxHeight: '90vh',
+        overflow: 'auto',
+      }}
+    >
+      <MenuGroup>
+        <Section>
+          <HeadingItem>Select an extension</HeadingItem>
+          {(extensions || []).map((extension, extensionIndex) => {
+            return (
+              extension.modules &&
+              extension.modules.quickInsert &&
+              extension.modules.quickInsert
+                .map((item, nodeIndex) => {
+                  if (
+                    typeof item.action === 'object' &&
+                    item.action.type === 'node'
+                  ) {
+                    const action = item.action as ExtensionModuleActionObject;
+
+                    const nodes =
+                      (extension.modules && extension.modules.nodes) || {};
+
+                    const node = nodes[action.key];
+
+                    let isSelected = false;
+
+                    if (
+                      !selectedExtension &&
+                      extensionIndex === 0 &&
+                      nodeIndex === 0
+                    ) {
+                      isSelected = true;
+                    } else if (
+                      selectedExtension === extension.key &&
+                      selectedNode === item.key
+                    ) {
+                      isSelected = true;
+                    }
+
+                    const doSelect = () =>
+                      onSelect({
+                        extension: extension,
+                        nodeKey: action.key,
+                        node,
+                        parameters: action.parameters || {},
+                        item,
+                      });
+
+                    if (isSelected && isSelected !== hasSelection) {
+                      doSelect();
+                      setHasSelection(isSelected);
+                    }
+
+                    let iconProp: { elemBefore?: ReactNode } = {};
+
+                    if (item.icon) {
+                      const ExtensionIcon = Loadable<{ label: string }, never>({
+                        loader: item.icon,
+                        loading: () => null,
+                      });
+
+                      iconProp['elemBefore'] = (
+                        <ExtensionIcon label={action.key} />
+                      );
+                    }
+
+                    return (
+                      <ButtonItem
+                        isSelected={isSelected}
+                        key={item.key}
+                        onClick={doSelect}
+                        description={item.description}
+                        {...iconProp}
+                      >
+                        {item.title} ({extension.key})
+                      </ButtonItem>
+                    );
+                  }
+                })
+                .filter(a => a)
+            );
+          })}
+        </Section>
+      </MenuGroup>
+    </div>
+  );
+}