@atlaskit/editor-plugin-list
Version:
List plugin for @atlaskit/editor-core
151 lines (149 loc) • 6.82 kB
JavaScript
import React from 'react';
import { bulletList, bulletListWithLocalId, listItem, listItemWithFlexibleFirstChildStage0, listItemWithLocalId, orderedListWithOrder, orderedListWithOrderAndLocalId } from '@atlaskit/adf-schema';
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
import { toggleBulletList, toggleOrderedList, tooltip } from '@atlaskit/editor-common/keymaps';
import { listMessages as messages } from '@atlaskit/editor-common/messages';
import { IconList, IconListNumber } from '@atlaskit/editor-common/quick-insert';
import { fg } from '@atlaskit/platform-feature-flags';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { toggleBulletList as toggleBulletListCommand, toggleOrderedList as toggleOrderedListCommand } from './pm-plugins/commands';
import { indentList } from './pm-plugins/commands/indent-list';
import { outdentList } from './pm-plugins/commands/outdent-list';
import inputRulePlugin from './pm-plugins/input-rules';
// Ignored via go/ees005
// eslint-disable-next-line import/no-named-as-default
import keymapPlugin from './pm-plugins/keymap';
import { createPlugin, pluginKey as listPluginKey } from './pm-plugins/main';
import { findRootParentListNode } from './pm-plugins/utils/find';
import { isInsideListItem } from './pm-plugins/utils/selection';
import { getListComponents } from './ui';
/*
Toolbar buttons to bullet and ordered list can be found in
packages/editor/editor-core/src/plugins/toolbar-lists-indentation/ui/Toolbar.tsx
*/
/**
* List plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
* from `@atlaskit/editor-core`.
*/
export const listPlugin = ({
api
}) => {
var _api$featureFlags, _api$analytics;
const featureFlags = (api === null || api === void 0 ? void 0 : (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
const editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
if (editorExperiment('platform_editor_block_menu', true)) {
var _api$blockMenu;
api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.registerBlockMenuComponents(getListComponents(api));
}
return {
name: 'list',
actions: {
isInsideListItem,
findRootParentListNode
},
commands: {
indentList: indentList(editorAnalyticsAPI),
outdentList: inputMethod => outdentList(editorAnalyticsAPI)(inputMethod),
toggleOrderedList: toggleOrderedListCommand(editorAnalyticsAPI),
toggleBulletList: toggleBulletListCommand(editorAnalyticsAPI)
},
getSharedState: editorState => {
if (!editorState) {
return undefined;
}
return listPluginKey.getState(editorState);
},
nodes() {
const getListItemNode = () => {
if (expValEquals('platform_editor_flexible_list_schema', 'isEnabled', true)) {
return listItemWithFlexibleFirstChildStage0;
} else if (fg('platform_editor_adf_with_localid')) {
return listItemWithLocalId;
}
return listItem;
};
return [{
name: 'bulletList',
node: fg('platform_editor_adf_with_localid') ? bulletListWithLocalId : bulletList
}, {
name: 'orderedList',
node: fg('platform_editor_adf_with_localid') ? orderedListWithOrderAndLocalId : orderedListWithOrder
}, {
name: 'listItem',
node: getListItemNode()
}];
},
pmPlugins() {
return [{
name: 'list',
plugin: ({
dispatch
}) => createPlugin(dispatch, featureFlags, api)
}, {
name: 'listInputRule',
plugin: ({
schema
}) => {
var _api$analytics2;
return inputRulePlugin(schema, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions);
}
}, {
name: 'listKeymap',
plugin: () => {
var _api$analytics3;
return keymapPlugin(featureFlags, api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions);
}
}];
},
pluginsOptions: {
quickInsert: ({
formatMessage
}) => {
return [{
id: 'unorderedList',
title: formatMessage(messages.unorderedList),
description: formatMessage(messages.unorderedListDescription),
keywords: ['ul', 'unordered'],
priority: 1100,
keyshortcut: tooltip(toggleBulletList),
icon: () => /*#__PURE__*/React.createElement(IconList, null),
action(insert, state) {
const tr = insert(state.schema.nodes.bulletList.createChecked({}, state.schema.nodes.listItem.createChecked({}, state.schema.nodes.paragraph.createChecked())));
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
action: ACTION.INSERTED,
actionSubject: ACTION_SUBJECT.LIST,
actionSubjectId: ACTION_SUBJECT_ID.FORMAT_LIST_BULLET,
eventType: EVENT_TYPE.TRACK,
attributes: {
inputMethod: INPUT_METHOD.QUICK_INSERT
}
})(tr);
return tr;
}
}, {
id: 'orderedList',
title: formatMessage(messages.orderedList),
description: formatMessage(messages.orderedListDescription),
keywords: ['ol', 'ordered'],
priority: 1200,
keyshortcut: tooltip(toggleOrderedList),
icon: () => /*#__PURE__*/React.createElement(IconListNumber, null),
action(insert, state) {
const tr = insert(state.schema.nodes.orderedList.createChecked({}, state.schema.nodes.listItem.createChecked({}, state.schema.nodes.paragraph.createChecked())));
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
action: ACTION.INSERTED,
actionSubject: ACTION_SUBJECT.LIST,
actionSubjectId: ACTION_SUBJECT_ID.FORMAT_LIST_NUMBER,
eventType: EVENT_TYPE.TRACK,
attributes: {
inputMethod: INPUT_METHOD.QUICK_INSERT
}
})(tr);
return tr;
}
}];
}
}
};
};