@atlaskit/editor-plugin-extension

import type { FieldDefinition } from '@atlaskit/editor-common/extensions'; export const nativeFields: FieldDefinition[] = [ { type: 'tab-group', label: 'Tab type', name: 'tabGroup', fields: [ { type: 'tab', label: 'Tab A', name: 'optionA', fields: [ { name: 'expandField', type: 'expand', label: 'awesome expand field', isExpanded: true, fields: [ { name: 'textFieldOne', type: 'string', label: 'Free text', }, ], }, { name: 'textFieldThree', type: 'string', label: 'Free text', }, ], }, { type: 'tab', label: 'Tab B', name: 'optionB', fields: [ { name: 'textFieldTwo', type: 'string', label: 'Free text', }, ], }, ], }, { name: 'text-field', type: 'string', label: 'Free text', isRequired: true, description: 'Add any text', defaultValue: 'I am the default text', }, { name: 'text-field-multiline', type: 'string', label: 'Free text', isRequired: true, description: 'Add any text across multiple lines', defaultValue: 'I am the default multiline text', style: 'multiline', }, { name: 'text-field-optional', type: 'string', label: 'Text', isRequired: false, description: 'Leave it empty', placeholder: 'Text goes here', }, { name: 'text-field-hidden', type: 'string', label: 'Hidden text field', defaultValue: 'this is a hidden value passed to the extension', isHidden: true, }, { name: 'number-field', type: 'number', label: 'Number', isRequired: true, placeholder: 'Number goes here', }, { name: 'boolean-field-required', type: 'boolean', label: 'Needs to be checked', description: 'A checkbox that can be <code>true</code> or false (by design)', isRequired: true, }, { name: 'boolean-field-optional', type: 'boolean', label: 'Do you want free shipping?', description: 'True or FALSE (should be bolded)', }, { name: 'boolean-field-toggle', type: 'boolean', label: 'Turn on the Wi-Fi?', description: 'On or Off', style: 'toggle', defaultValue: true, }, { name: 'date-start', type: 'date', label: 'Date', description: `Nothing of <a onclick="alert('something is wrong')">interest</a>`, placeholder: 'Date goes here', }, { name: 'enum-select', type: 'enum', label: 'Select one', isRequired: true, description: 'Pick one', style: 'select', isMultiple: false, placeholder: 'Selected option goes here', items: [ { label: 'Option A', value: 'a' }, { label: 'Option B', value: 'b' }, ], }, { name: 'enum-select-icon', type: 'enum', label: 'Select with icons', description: 'Pick one', style: 'select', isMultiple: false, items: [ { label: 'Option A', value: 'a', description: 'Recommended', icon: 'https://i.picsum.photos/id/237/24/24.jpg', }, { label: 'Option B with a really really really really really really long label', value: 'b', description: 'One of the best options out there', icon: 'https://i.picsum.photos/id/240/24/24.jpg', }, ], }, { name: 'enum-select-icon-multiple', type: 'enum', label: 'Select with icons (multiple)', description: 'Pick many', defaultValue: ['a', 'b', 'long'], style: 'select', placeholder: 'Selected options go here', isMultiple: true, items: [ { label: 'Option A', value: 'a', description: 'Our most popular pick', icon: 'https://i.picsum.photos/id/237/24/24.jpg', }, { label: 'Option B', value: 'b', description: 'Many people like this one', icon: 'https://i.picsum.photos/id/240/24/24.jpg', }, { label: 'Option Long, a really long label (longer than we expected)', value: 'long', description: 'Many people like this one', icon: 'https://i.picsum.photos/id/240/24/24.jpg', }, ], }, { name: 'enum-select-multiple', type: 'enum', label: 'Select 1 or many', description: '1 required, no default', style: 'select', isRequired: true, isMultiple: true, items: [ { label: 'Option A', value: 'a' }, { label: 'Option B', value: 'b' }, { label: 'Option C', value: 'c' }, { label: 'Option D', value: 'd' }, { label: 'Option E', value: 'e' }, ], }, { name: 'enum-radio-required', type: 'enum', label: 'Select one', description: 'One is always required', style: 'radio', isRequired: true, isMultiple: false, items: [ { label: 'Option A', value: 'a' }, { label: 'Option B', value: 'b' }, { label: 'Option C', value: 'c' }, { label: 'Option D', value: 'd' }, { label: 'Option E', value: 'e' }, ], }, { name: 'enum-radio-defaulted', type: 'enum', label: 'Select one (defaulted)', description: 'One is always required, but we default it', style: 'radio', isRequired: false, defaultValue: 'a', items: [ { label: 'Option A', value: 'a' }, { label: 'Option B', value: 'b' }, { label: 'Option C', value: 'c' }, { label: 'Option D', value: 'd' }, { label: 'Option E', value: 'e' }, ], }, { name: 'enum-checkbox-multiple', type: 'enum', label: 'Select 1 or many, or none', description: 'Nothing required, no default', style: 'checkbox', isRequired: false, isMultiple: true, items: [ { label: 'Option A', value: 'a', description: 'tooltip description for a', }, { label: 'Option B', value: 'b', description: 'tooltip description for b', }, { label: 'Option C', value: 'c', description: 'tooltip description for c', }, { label: 'Option D', value: 'd', description: 'tooltip description for d', }, { label: 'Option E', value: 'e', description: 'tooltip description for e', }, ], }, { name: 'enum-checkbox-multiple-required', type: 'enum', label: 'Select 1 or many', description: 'Something required', style: 'checkbox', isRequired: true, isMultiple: true, items: [ { label: 'Option A', value: 'a', description: 'tooltip description for a', }, { label: 'Option B', value: 'b', description: 'tooltip description for b', }, { label: 'Option C', value: 'c', description: 'tooltip description for c', }, { label: 'Option D', value: 'd', description: 'tooltip description for d', }, { label: 'Option E', value: 'e', description: 'tooltip description for e', }, ], }, { name: 'unhandled', // eslint-disable-next-line @typescript-eslint/no-explicit-any type: 'foobar' as any, label: 'Unknown type', }, { name: 'fieldset-cql', type: 'fieldset', label: 'CQL', options: { isDynamic: true, transformer: { type: 'cql', }, }, fields: [ { name: 'created-at', type: 'date-range', label: 'Created at', description: `This is how we select date range in the cql component`, items: [ { label: 'Any date', value: '' }, { label: 'Last 24 hours', value: 'now(-1d)' }, { label: 'Last week', value: 'now(-1w)' }, { label: 'Last month', value: 'now(-1M)' }, { label: 'Last year', value: 'now(-1y)' }, ], }, { name: 'last-modified', type: 'date-range', label: 'Last modified', items: [ { label: 'Today', value: 'now(-1d)' }, { label: 'This week', value: 'now(-1w)' }, { label: 'This month', value: 'now(-1M)' }, { label: 'This year', value: 'now(-1y)' }, ], }, { name: 'query', type: 'string', label: 'Search term', }, { name: 'custom', type: 'custom', label: 'Custom: Select anything', isRequired: true, options: { resolver: { type: 'mock-resolver', }, }, }, { name: 'content', type: 'enum', label: 'Content Type', isRequired: false, style: 'checkbox', isMultiple: true, items: [ { label: 'Page', value: 'page', }, { label: 'Blogpost', value: 'blogpost', }, { label: 'Question', value: 'question', }, ], }, ], }, { name: 'fieldset-without-label', type: 'fieldset', label: 'Fieldset without label', options: { isDynamic: true, showTitle: false, transformer: { type: 'cql', }, }, fields: [ { name: 'inner-text', type: 'string', label: 'Search term', }, ], }, { name: 'fieldset-jira-filter', type: 'fieldset', label: 'Issues filter', options: { isDynamic: true, transformer: { type: 'cql', }, }, fields: [ { name: 'keywords', type: 'string', label: 'Keywords', }, { name: 'project', type: 'enum', label: 'Project', isRequired: false, style: 'select', items: [ { label: 'Editor platform', value: 'editor-platform', }, { label: 'Editor experiences', value: 'editor-experiences', }, ], }, { name: 'status', type: 'enum', label: 'Status', isRequired: false, style: 'select', items: [ { label: 'To do', value: 'to-do', }, { label: 'In Progress', value: 'in-progress', }, { label: 'Done', value: 'Done', }, ], }, ], }, { name: 'expand field', type: 'expand', label: 'awesome expand field', fields: [ { name: 'enum-select-expand', type: 'enum', label: 'Select one', isRequired: true, description: 'Pick one', style: 'select', isMultiple: false, placeholder: 'Selected option goes here', items: [ { label: 'Option A', value: 'a' }, { label: 'Option B', value: 'b' }, ], }, { name: 'enum-select-icon-expand', type: 'enum', label: 'Select with icons', description: 'Pick one', style: 'select', isMultiple: false, items: [ { label: 'Option A', value: 'a', description: 'Recommended', }, { label: 'Option B with a really really really really really really long label', value: 'b', description: 'One of the best options out there', }, ], }, ], }, { name: 'color-picker', label: 'Color Picker', type: 'color', description: 'Pick your color', defaultValue: '#7AB2FF', }, { name: 'color-picker-req', label: 'Color Picker Required', type: 'color', isRequired: true, description: 'Pick your color', defaultValue: '#7AB2FF', }, ]; export const customFields: FieldDefinition[] = [ { name: 'custom-required', type: 'custom', label: 'Custom: Required', description: 'Select the option', isRequired: true, options: { resolver: { type: 'mock-resolver', }, }, }, { name: 'custom-optional', type: 'custom', label: 'Custom: Optional', description: 'Select the option, maybe', options: { resolver: { type: 'mock-resolver', }, }, }, { name: 'custom-required-create', type: 'custom', label: 'Custom: Create an option', description: 'Select or create an option', isRequired: true, options: { isCreatable: true, resolver: { type: 'mock-resolver', }, }, }, { name: 'custom-create-multiple', type: 'custom', label: 'Custom: Create option(s)', description: 'Select or create option(s)', isMultiple: true, options: { isCreatable: true, resolver: { type: 'mock-resolver', }, }, }, { name: 'custom-format-create-label', type: 'custom', label: 'Custom: Customized create label', description: 'Select or create an option with a custom label', options: { isCreatable: true, formatCreateLabel: (value: string) => { return `Add "${value}" to the list`; }, resolver: { type: 'mock-resolver', }, }, }, { name: 'unsupported', type: 'custom', label: 'Custom: Missing provider', options: { resolver: { type: 'missing-type', }, }, }, { name: 'user-jdog', type: 'user', label: 'JDog User', options: { provider: { type: 'user-jdog-provider', }, }, }, { name: 'user-jdog-required', type: 'user', label: 'JDog User (Required)', isRequired: true, options: { provider: { type: 'user-jdog-provider', }, }, }, { name: 'user-jdog-multiple', type: 'user', label: 'JDog User (Multiple, Required)', isRequired: true, isMultiple: true, options: { provider: { type: 'user-jdog-provider', }, }, }, ];