@atlaskit/editor-plugin-extension 1.5.2 → 1.5.3

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

@@ -8,9 +8,9 @@ import { IntlProvider } from 'react-intl-next';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { CodeBlock } from '@atlaskit/code';
 import type {
-  ExtensionModule,
-  ExtensionProvider,
-  Parameters,
+	ExtensionModule,
+	ExtensionProvider,
+	Parameters,
 } from '@atlaskit/editor-common/extensions';
 import { getExtensionKeyAndNodeKey } from '@atlaskit/editor-common/extensions';
 import { Box, xcss } from '@atlaskit/primitives';
@@ -30,189 +30,175 @@ 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: {
-      borderBottom: `1px solid ${colors.N50}`,
-      marginBottom: token('space.200', '16px'),
-    },
-  });
+	css({
+		width: `${width}px`,
+		margin: token('space.200', '16px'),
+		h3: {
+			borderBottom: `1px solid ${colors.N50}`,
+			marginBottom: token('space.200', '16px'),
+		},
+	});
 
 const codeWrapperStyles = css({
-  marginTop: token('space.200', '16px'),
+	marginTop: token('space.200', '16px'),
 });
 
 function ExtensionConfigPanel({
-  extension,
-  node,
-  nodeKey,
-  extensionProvider,
-  parameters: initialParameters = {},
-  item,
+	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 [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;
+	// @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));
+	// @ts-expect-error
+	window.top.location.hash &&
+	// @ts-expect-error
+	decodeURIComponent(window.top.location.hash.slice(1));
 
 export default function ConfigPanelWithExtensionPicker({
-  extensionProvider,
-  parameters = {},
+	extensionProvider,
+	parameters = {},
 }: {
-  extensionProvider: ExtensionProvider;
-  parameters?: 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">
-      <Box xcss={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>
-      </Box>
-    </IntlProvider>
-  );
+	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">
+			<Box xcss={wrapperStyles}>
+				{/* eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766 */}
+				<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>
+				{/* eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766 */}
+				<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>
+			</Box>
+		</IntlProvider>
+	);
 }

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

@@ -3,49 +3,49 @@ import React from 'react';
 import { IntlProvider } from 'react-intl-next';
 
 import type {
-  ExtensionKey,
-  ExtensionProvider,
-  ExtensionType,
-  Parameters,
+	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,
+	extensionKey,
+	nodeKey,
+	extensionProvider,
+	parameters,
+	onChange,
 }: {
-  extensionType: ExtensionType;
-  extensionKey: ExtensionKey;
-  nodeKey: string;
-  extensionProvider: ExtensionProvider;
-  parameters: Parameters;
-  onChange?: (parameters: Parameters) => void;
+	extensionType: ExtensionType;
+	extensionKey: ExtensionKey;
+	nodeKey: string;
+	extensionProvider: ExtensionProvider;
+	parameters: Parameters;
+	onChange?: (parameters: Parameters) => void;
 }) {
-  function _onChange(data: Parameters) {
-    if (onChange) {
-      onChange(data);
-    }
-  }
+	function _onChange(data: Parameters) {
+		if (onChange) {
+			onChange(data);
+		}
+	}
 
-  return (
-    <IntlProvider locale="en">
-      <ConfigPanel
-        api={undefined}
-        extensionType={extensionType}
-        extensionKey={extensionKey}
-        nodeKey={nodeKey}
-        extensionProvider={extensionProvider}
-        parameters={parameters}
-        showHeader
-        onChange={_onChange}
-        // eslint-disable-next-line no-console
-        onCancel={() => console.log('onCancel')}
-      />
-    </IntlProvider>
-  );
+	return (
+		<IntlProvider locale="en">
+			<ConfigPanel
+				api={undefined}
+				extensionType={extensionType}
+				extensionKey={extensionKey}
+				nodeKey={nodeKey}
+				extensionProvider={extensionProvider}
+				parameters={parameters}
+				showHeader
+				onChange={_onChange}
+				// eslint-disable-next-line no-console
+				onCancel={() => console.log('onCancel')}
+			/>
+		</IntlProvider>
+	);
 }