@atlaskit/editor-plugin-extension 0.4.2 → 0.5.1

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

@@ -0,0 +1,63 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+import React, { useState } from 'react';
+
+import { FieldDefinition } from '@atlaskit/editor-common/extensions';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ButtonItem, HeadingItem, MenuGroup, Section } from '@atlaskit/menu';
+
+export default function ExtensionNodePicker({
+  fields,
+  selectedField,
+  onSelect,
+}: {
+  fields: FieldDefinition[];
+  selectedField?: string;
+  onSelect: (field: FieldDefinition) => void;
+}) {
+  const [hasSelection, setHasSelection] = useState<boolean>(false);
+
+  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 a field</HeadingItem>
+          {(fields || []).map(field => {
+            const isSelected = selectedField === field.name;
+
+            const doSelect = () => onSelect(field);
+
+            if (isSelected && isSelected !== hasSelection) {
+              doSelect();
+              setHasSelection(isSelected);
+            }
+
+            const label = field.isRequired
+              ? `${field.label} (Required)`
+              : field.label;
+
+            return (
+              <ButtonItem
+                isSelected={isSelected}
+                key={field.name}
+                onClick={doSelect}
+                description={field.type}
+              >
+                {label}
+              </ButtonItem>
+            );
+          })}
+        </Section>
+      </MenuGroup>
+    </div>
+  );
+}

package/example-utils/config-panel/example-manifest-all-fields.ts

@@ -0,0 +1,86 @@
+import type {
+  ExtensionManifest,
+  ExtensionModule,
+  ExtensionModuleNodes,
+} from '@atlaskit/editor-common/extensions';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { mockFieldResolver } from '@atlaskit/editor-core/example-helpers/confluence-macros//confluence-fields-data-providers';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import {
+  cqlDeserializer,
+  cqlSerializer,
+} from '@atlaskit/editor-core/example-helpers/confluence-macros/cql-helpers';
+
+import { customFields, nativeFields } from './fields';
+
+const exampleFields = [...nativeFields, ...customFields];
+
+const key = 'allFields';
+
+const quickInsert: ExtensionModule[] = [
+  {
+    key,
+    title: 'All fields',
+    icon: () =>
+      import(
+        /* webpackChunkName: "@atlaskit-internal_icon-code" */ '@atlaskit/icon/glyph/editor/code'
+      ).then(mod => mod.default),
+    action: {
+      type: 'node',
+      key,
+      parameters: {},
+    },
+  },
+];
+
+const nodes: ExtensionModuleNodes = {
+  [key]: {
+    type: 'extension',
+    render: () => Promise.resolve(() => null),
+    getFieldsDefinition: () => Promise.resolve(exampleFields),
+  },
+};
+
+const manifest: ExtensionManifest = {
+  title: 'Editor fields example',
+  type: 'twp.editor.example',
+  key: 'example-fields',
+  description: 'Example of fields supported by the editor',
+  icons: {
+    '48': () =>
+      import(
+        /* webpackChunkName: "@atlaskit-internal_icon-code" */ '@atlaskit/icon/glyph/editor/code'
+      ).then(mod => mod.default),
+  },
+  modules: {
+    quickInsert,
+    nodes,
+    fields: {
+      custom: {
+        'mock-resolver': {
+          resolver: mockFieldResolver,
+        },
+      },
+      fieldset: {
+        cql: {
+          serializer: cqlSerializer,
+          deserializer: cqlDeserializer,
+        },
+      },
+      user: {
+        'user-jdog-provider': {
+          provider: async () => {
+            return {
+              siteId: '49d8b9d6-ee7d-4931-a0ca-7fcae7d1c3b5',
+              principalId: 'Context',
+              fieldId: 'storybook',
+              productKey: 'jira',
+            };
+          },
+        },
+      },
+    },
+  },
+};
+
+export default manifest;

package/example-utils/config-panel/example-manifest-individual-fields.ts

@@ -0,0 +1,85 @@
+import type {
+  ExtensionManifest,
+  ExtensionModule,
+  ExtensionModuleNodes,
+} from '@atlaskit/editor-common/extensions';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { mockFieldResolver } from '@atlaskit/editor-core/example-helpers/confluence-macros/confluence-fields-data-providers';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import {
+  cqlDeserializer,
+  cqlSerializer,
+} from '@atlaskit/editor-core/example-helpers/confluence-macros/cql-helpers';
+
+import { customFields, nativeFields } from './fields';
+
+const exampleFields = [...nativeFields, ...customFields];
+
+const quickInsert: ExtensionModule[] = exampleFields.map(field => ({
+  key: field.name,
+  title: field.label,
+  description: `type: ${field.type} (${field.name})`,
+  icon: () =>
+    import(
+      /* webpackChunkName: "@atlaskit-internal_icon-code" */ '@atlaskit/icon/glyph/editor/code'
+    ).then(mod => mod.default),
+  action: {
+    type: 'node',
+    key: field.name,
+    parameters: {},
+  },
+}));
+
+const nodes = exampleFields.reduce<ExtensionModuleNodes>((curr, field) => {
+  curr[field.name] = {
+    type: 'extension',
+    render: async () => () => null,
+    getFieldsDefinition: async () => [field],
+  };
+
+  return curr;
+}, {});
+
+const manifest: ExtensionManifest = {
+  title: 'Editor fields example',
+  type: 'twp.editor.example',
+  key: 'all-fields',
+  description: 'Example of fields supported by the editor',
+  icons: {
+    '48': () =>
+      import(
+        /* webpackChunkName: "@atlaskit-internal_icon-code" */ '@atlaskit/icon/glyph/editor/code'
+      ).then(mod => mod.default),
+  },
+  modules: {
+    quickInsert,
+    nodes,
+    fields: {
+      custom: {
+        'mock-resolver': {
+          resolver: mockFieldResolver,
+        },
+      },
+      fieldset: {
+        cql: {
+          serializer: cqlSerializer,
+          deserializer: cqlDeserializer,
+        },
+      },
+      user: {
+        'user-jdog-provider': {
+          provider: async () => {
+            return {
+              siteId: '49d8b9d6-ee7d-4931-a0ca-7fcae7d1c3b5',
+              principalId: 'Context',
+              fieldId: 'storybook',
+              productKey: 'jira',
+            };
+          },
+        },
+      },
+    },
+  },
+};
+
+export default manifest;