@atlaskit/editor-core 180.0.0 → 181.0.0

package/dist/es2019/labs/next/internal/hooks/use-editor/create-dispatch-transaction.js

@@ -1,10 +1,9 @@
 import { Node } from 'prosemirror-model';
-import { ACTION, ACTION_SUBJECT, EVENT_TYPE, getAnalyticsEventsFromTransaction } from '../../../../../plugins/analytics';
+import { analyticsEventKey } from '@atlaskit/editor-common/utils';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, getAnalyticsEventsFromTransaction } from '@atlaskit/editor-common/analytics';
 import { findChangedNodesFromTransaction, validateNodes, validNode } from '../../../../../utils/nodes';
 import { compose, toJSON } from '../../../../../utils';
 import { getDocStructure } from '../../../../../utils/document-logger';
-import { analyticsEventKey } from '../../../../../plugins/analytics/consts';
-
 // Helper to assure correct payload when dispatch analytics
 function dispatchAnalytics(dispatch, payload) {
   dispatch(analyticsEventKey, payload);

package/dist/es2019/labs/next/presets/create-stub-internal-apis.js

@@ -0,0 +1,105 @@
+import React from 'react';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { tablesPlugin } from '@atlaskit/editor-plugin-table';
+import { createEditorSelectionAPI } from '../../../selection-api/api';
+import { createInsertNodeAPI } from '../../../insert-api/api';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { attachPayloadIntoTransaction } from '../../../analytics-api/attach-payload-into-transaction';
+import { FabricChannel } from '@atlaskit/analytics-listeners';
+
+/**
+ * DO NOT USE THIS FUNCTION
+ *
+ * IT IS A TEMPORARY PLACEHOLDER UNTIL THOSE TICKETS XX-11111 XX-22222 are done
+ **/
+export const createStubInternalApis = () => {
+  const editorViewRef = {
+    current: null
+  };
+  const createAnalyticsEventRef = {
+    current: null
+  };
+
+  // @ts-ignore
+  const createAnalyticsEvent = payload => {
+    // That means the AnalyticsNext context is being used
+    if (createAnalyticsEventRef.current) {
+      return createAnalyticsEventRef.current(payload);
+    }
+
+    // That means, there is no createAnalyticsEvent available at all.
+    // This should not happen, but if it does, we will send a mock function to avoid
+    // regression on SmartLinks (they are the only one using this function directly)
+    // eslint-disable-next-line no-console
+    console.error('This should never be called, if it does we have a problem');
+    return {
+      fire: () => {}
+    };
+  };
+  const editorSelectionAPI = createEditorSelectionAPI();
+  const editorAnalyticsAPI = {
+    attachAnalyticsEvent: payload => tr => {
+      const editorView = editorViewRef.current;
+      if (!tr || !createAnalyticsEvent || !editorView) {
+        return false;
+      }
+      attachPayloadIntoTransaction({
+        tr,
+        editorState: editorView.state,
+        payload,
+        channel: FabricChannel.editor
+      });
+      return true;
+    }
+  };
+  const insertNodeAPI = createInsertNodeAPI({
+    getEditorView: () => {
+      return editorViewRef.current;
+    },
+    getEditorPlugins: () => {
+      const fakeTablePlugin = tablesPlugin();
+      if (!(fakeTablePlugin !== null && fakeTablePlugin !== void 0 && fakeTablePlugin.pluginsOptions)) {
+        return [];
+      }
+      return [fakeTablePlugin];
+    }
+  });
+  const MountCreateAnalyticsEventRef = () => {
+    const {
+      createAnalyticsEvent
+    } = useAnalyticsEvents();
+    React.useLayoutEffect(() => {
+      createAnalyticsEventRef.current = createAnalyticsEvent;
+    }, [createAnalyticsEvent]);
+    return null;
+  };
+  const stubInternalApisPlugin = () => ({
+    name: 'stubInternalApisPlugin',
+    pmPlugins() {
+      return [{
+        name: 'stubInternalApisPMPlugin',
+        plugin: () => new SafePlugin({
+          view: editorView => {
+            editorViewRef.current = editorView;
+            return {
+              destroy() {
+                editorViewRef.current = null;
+                createAnalyticsEventRef.current = null;
+              }
+            };
+          }
+        })
+      }];
+    },
+    contentComponent: () => {
+      return /*#__PURE__*/React.createElement(MountCreateAnalyticsEventRef);
+    }
+  });
+  return {
+    editorSelectionAPI,
+    insertNodeAPI,
+    editorAnalyticsAPI,
+    createAnalyticsEvent,
+    stubInternalApisPlugin
+  };
+};

package/dist/es2019/labs/next/presets/cxhtml.js

@@ -1,7 +1,5 @@
 // #region Imports
 import React from 'react';
-import { tablesPlugin } from '@atlaskit/editor-plugin-table';
-import { panelPlugin, listPlugin, textColorPlugin, breakoutPlugin, jiraIssuePlugin, extensionPlugin, rulePlugin, datePlugin, layoutPlugin, indentationPlugin, cardPlugin, statusPlugin, mediaPlugin, mentionsPlugin, tasksAndDecisionsPlugin, insertBlockPlugin, basePlugin, placeholderPlugin } from '../../../plugins';
 import { PresetProvider } from '../Editor';
 import { useDefaultPreset } from './default';
 // #endregion
@@ -12,59 +10,62 @@ export function useCXHTMLPreset({
   placeholder,
   featureFlags
 }) {
-  const [preset] = useDefaultPreset({
+  const [defaultPreset] = useDefaultPreset({
     featureFlags,
     paste: {}
   });
-  preset.add([basePlugin, {
-    allowInlineCursorTarget: true,
-    allowScrollGutter: {
-      getScrollElement: _view => document.querySelector('.fabric-editor-popup-scroll-parent') || null
-    }
-  }]);
-  preset.add([tablesPlugin, {
-    tableOptions: {
-      advanced: true
-    }
-  }]);
-  preset.add([panelPlugin, {
-    allowCustomPanel: true
-  }]);
-  preset.add(listPlugin);
-  preset.add(textColorPlugin);
-  preset.add(breakoutPlugin);
-  preset.add(jiraIssuePlugin);
-  preset.add(extensionPlugin);
-  preset.add(rulePlugin);
-  preset.add(datePlugin);
-  preset.add(layoutPlugin);
-  preset.add(indentationPlugin);
-  preset.add([cardPlugin, {
-    allowBlockCards: true,
-    platform: 'web'
-  }]);
-  preset.add([statusPlugin, {
-    menuDisabled: false
-  }]);
-  preset.add(tasksAndDecisionsPlugin);
-  preset.add(insertBlockPlugin);
-  preset.add([placeholderPlugin, {
-    placeholder
-  }]);
-  if (mentionProvider) {
-    preset.add(mentionsPlugin);
-  }
-  if (mediaProvider) {
-    preset.add([mediaPlugin, {
-      provider: mediaProvider,
-      allowMediaSingle: true,
-      allowMediaGroup: true,
-      allowResizing: true,
-      allowLinking: true,
-      allowResizingInTables: true,
-      allowAltTextOnImages: true
-    }]);
-  }
+  const preset = defaultPreset;
+  //.add([
+  //  basePlugin,
+  //  {
+  //    allowInlineCursorTarget: true,
+  //    allowScrollGutter: {
+  //      getScrollElement: (_view) =>
+  //        document.querySelector('.fabric-editor-popup-scroll-parent') ||
+  //        null,
+  //    },
+  //  },
+  //])
+  //.add([tablesPlugin, { tableOptions: { advanced: true } }])
+  //.add([panelPlugin, { allowCustomPanel: true }])
+  //.add(listPlugin)
+  //.add(textColorPlugin)
+  //.add(breakoutPlugin)
+  //.add(jiraIssuePlugin)
+  //.add(extensionPlugin)
+  //.add(rulePlugin)
+  //.add(datePlugin)
+  //.add(layoutPlugin)
+  //.add(indentationPlugin)
+  //.add([cardPlugin, { allowBlockCards: true, platform: 'web' }])
+  //.add([statusPlugin, { menuDisabled: false }])
+  //.add(tasksAndDecisionsPlugin)
+  //.add(insertBlockPlugin)
+  ////.add([placeholderPlugin, { placeholder }])
+  //.maybeAdd(mentionsPlugin, (plugin, builder) => {
+  //  if (mentionProvider) {
+  //    return builder.add(plugin);
+  //  }
+  //  return builder;
+  //})
+  //.maybeAdd(mediaPlugin, (plugin, builder) => {
+  //  if (mediaProvider) {
+  //    preset.add([
+  //      plugin,
+  //      {
+  //        provider: mediaProvider,
+  //        allowMediaSingle: true,
+  //        allowMediaGroup: true,
+  //        allowResizing: true,
+  //        allowLinking: true,
+  //        allowResizingInTables: true,
+  //        allowAltTextOnImages: true,
+  //      },
+  //    ]);
+  //  }
+  //  return builder;
+  //});
+
   return [preset];
 }
 export function EditorPresetCXHTML(props) {
@@ -73,7 +74,9 @@ export function EditorPresetCXHTML(props) {
     excludes
   } = props;
   const [preset] = useCXHTMLPreset(props);
-  const plugins = preset.getEditorPlugins(excludes);
+  const plugins = preset.build({
+    excludePlugins: excludes
+  });
   return /*#__PURE__*/React.createElement(PresetProvider, {
     value: plugins
   }, children);

package/dist/es2019/labs/next/presets/default.js

@@ -1,5 +1,5 @@
 // #region Imports
-import React from 'react';
+
 import pastePlugin from '../../../plugins/paste';
 import blockTypePlugin from '../../../plugins/block-type';
 import clearMarksOnChangeToEmptyDocumentPlugin from '../../../plugins/clear-marks-on-change-to-empty-document';
@@ -14,8 +14,6 @@ import submitEditorPlugin from '../../../plugins/submit-editor';
 import fakeTextCursorPlugin from '../../../plugins/fake-text-cursor';
 import featureFlagsContextPlugin from '../../../plugins/feature-flags-context';
 import floatingToolbarPlugin from '../../../plugins/floating-toolbar';
-import { PresetProvider } from '../Editor';
-import { Preset } from './preset';
 import clipboardPlugin from '../../../plugins/clipboard';
 import placeholderPlugin from '../../../plugins/placeholder';
 import annotationPlugin from '../../../plugins/annotation';
@@ -23,40 +21,29 @@ import quickInsertPlugin from '../../../plugins/quick-insert';
 import selectionPlugin from '../../../plugins/selection';
 import codeBlockPlugin from '../../../plugins/code-block';
 import undoRedoPlugin from '../../../plugins/undo-redo';
+import { EditorPresetBuilder } from '@atlaskit/editor-common/preset';
+// #endregion
+
 /**
  * Note: The order that presets are added determines
  * their placement in the editor toolbar
  */
 export function createDefaultPreset(options) {
-  var _options$featureFlags;
-  const preset = new Preset();
-  preset.add([pastePlugin, options.paste]);
-  preset.add(clipboardPlugin);
-  preset.add([basePlugin, options.base]);
-  if ((_options$featureFlags = options.featureFlags) !== null && _options$featureFlags !== void 0 && _options$featureFlags.undoRedoButtons) {
-    preset.add(undoRedoPlugin);
-  }
-  preset.add([blockTypePlugin, options.blockType]);
-  preset.add([placeholderPlugin, options.placeholder]);
-  preset.add(clearMarksOnChangeToEmptyDocumentPlugin);
-  if (options.annotationProviders) {
-    preset.add([annotationPlugin, options.annotationProviders]);
-  }
-  preset.add([hyperlinkPlugin, options.hyperlinkOptions]);
-  preset.add([textFormattingPlugin, options.textFormatting]);
-  preset.add(widthPlugin);
-  preset.add([quickInsertPlugin, options.quickInsert]);
-  preset.add([typeAheadPlugin, options.typeAhead || {
+  const preset = new EditorPresetBuilder().add([pastePlugin, options.paste]).add(clipboardPlugin).add([basePlugin, options.base]).maybeAdd(undoRedoPlugin, (p, builder) => {
+    var _options$featureFlags;
+    // The undo redo plugin needs to be add before the blockTypePlugin
+    if ((_options$featureFlags = options.featureFlags) !== null && _options$featureFlags !== void 0 && _options$featureFlags.undoRedoButtons) {
+      return builder.add(p);
+    }
+    return builder;
+  }).add([blockTypePlugin, options.blockType]).add([placeholderPlugin, options.placeholder]).add(clearMarksOnChangeToEmptyDocumentPlugin).maybeAdd(annotationPlugin, (p, builder) => {
+    if (options.annotationProviders) {
+      return builder.add([p, options.annotationProviders]);
+    }
+    return builder;
+  }).add([hyperlinkPlugin, options.hyperlinkOptions]).add([textFormattingPlugin, options.textFormatting]).add(widthPlugin).add([quickInsertPlugin, options.quickInsert]).add([typeAheadPlugin, options.typeAhead || {
     createAnalyticsEvent: options.createAnalyticsEvent
-  }]);
-  preset.add(unsupportedContentPlugin);
-  preset.add(editorDisabledPlugin);
-  preset.add([submitEditorPlugin, options.submitEditor]);
-  preset.add(fakeTextCursorPlugin);
-  preset.add(floatingToolbarPlugin);
-  preset.add([featureFlagsContextPlugin, options.featureFlags || {}]);
-  preset.add([selectionPlugin, options.selection]);
-  preset.add([codeBlockPlugin, options.codeBlock || {
+  }]).add(unsupportedContentPlugin).add(editorDisabledPlugin).add([submitEditorPlugin, options.submitEditor]).add(fakeTextCursorPlugin).add(floatingToolbarPlugin).add([featureFlagsContextPlugin, options.featureFlags || {}]).add([selectionPlugin, options.selection]).add([codeBlockPlugin, options.codeBlock || {
     appearance: 'full-page'
   }]);
   return preset;
@@ -64,11 +51,4 @@ export function createDefaultPreset(options) {
 export function useDefaultPreset(props) {
   const preset = createDefaultPreset(props);
   return [preset];
-}
-export function EditorPresetDefault(props) {
-  const [preset] = useDefaultPreset(props);
-  const plugins = preset.getEditorPlugins();
-  return /*#__PURE__*/React.createElement(PresetProvider, {
-    value: plugins
-  }, props.children);
 }

package/dist/es2019/labs/next/presets/mobile.js

@@ -1,31 +1,33 @@
 // #region Imports
 import React from 'react';
-import { useProvider, useProviderFactory } from '@atlaskit/editor-common/provider-factory';
-import analyticsPlugin from '../../../plugins/analytics';
-import basePlugin from '../../../plugins/base';
-import cardPlugin from '../../../plugins/card';
-import datePlugin from '../../../plugins/date';
-import emojiPlugin from '../../../plugins/emoji';
-import extensionPlugin from '../../../plugins/extension';
-import layoutPlugin from '../../../plugins/layout';
-import listPlugin from '../../../plugins/list';
-import mediaPlugin from '../../../plugins/media';
-import mentionsPlugin from '../../../plugins/mentions';
-import mobileDimensionsPlugin from '../../../plugins/mobile-dimensions';
-import panelPlugin from '../../../plugins/panel';
-import placeholderPlugin from '../../../plugins/placeholder';
-import rulePlugin from '../../../plugins/rule';
-import statusPlugin from '../../../plugins/status';
-import { tablesPlugin } from '@atlaskit/editor-plugin-table';
-import tasksAndDecisionsPlugin from '../../../plugins/tasks-and-decisions';
-import textColorPlugin from '../../../plugins/text-color';
-import maxContentSizePlugin from '../../../plugins/max-content-size';
-import expandPlugin from '../../../plugins/expand';
-import selectionPlugin from '../../../plugins/selection';
+import {
+// useProvider,
+useProviderFactory } from '@atlaskit/editor-common/provider-factory';
+//import analyticsPlugin from '../../../plugins/analytics';
+//import basePlugin from '../../../plugins/base';
+//import cardPlugin from '../../../plugins/card';
+//import datePlugin from '../../../plugins/date';
+//import emojiPlugin from '../../../plugins/emoji';
+//import extensionPlugin from '../../../plugins/extension';
+//import layoutPlugin from '../../../plugins/layout';
+//import listPlugin from '../../../plugins/list';
+
+//import mentionsPlugin from '../../../plugins/mentions';
+//import mobileDimensionsPlugin from '../../../plugins/mobile-dimensions';
+//import panelPlugin from '../../../plugins/panel';
+//import placeholderPlugin from '../../../plugins/placeholder';
+//import rulePlugin from '../../../plugins/rule';
+//import statusPlugin from '../../../plugins/status';
+//import { tablesPlugin } from '@atlaskit/editor-plugin-table';
+//import tasksAndDecisionsPlugin from '../../../plugins/tasks-and-decisions';
+//import textColorPlugin from '../../../plugins/text-color';
+//import maxContentSizePlugin from '../../../plugins/max-content-size';
+//import expandPlugin from '../../../plugins/expand';
+//import selectionPlugin from '../../../plugins/selection';
 import { PresetProvider } from '../Editor';
 import { useDefaultPreset } from './default';
 import { addExcludesFromProviderFactory } from './utils';
-import { quickInsertPlugin } from '../../../plugins';
+//import { quickInsertPlugin } from '../../../plugins';
 
 // #endregion
 
@@ -36,74 +38,70 @@ export function useMobilePreset({
   createAnalyticsEvent,
   featureFlags
 }) {
-  const mediaProvider = useProvider('mediaProvider');
-  const [preset] = useDefaultPreset({
+  //const mediaProvider = useProvider('mediaProvider');
+  const [defaultPreset] = useDefaultPreset({
     featureFlags,
     paste: {}
   });
-  preset.add([basePlugin, {
-    allowScrollGutter: {
-      getScrollElement: () => document.body,
-      allowCustomScrollHandler: false
-    }
-  }]);
-  preset.add([analyticsPlugin, createAnalyticsEvent]);
-  preset.add([tablesPlugin, {
-    tableOptions: {
-      allowControls: false
-    }
-  }]);
-  preset.add(panelPlugin);
-  preset.add(listPlugin);
-  preset.add(textColorPlugin);
-  preset.add(extensionPlugin);
-  preset.add(rulePlugin);
-  preset.add(datePlugin);
-  preset.add(layoutPlugin);
-  preset.add([quickInsertPlugin, {
-    headless: true,
-    disableDefaultItems: true
-  }]);
-  preset.add([statusPlugin, {
-    menuDisabled: false
-  }]);
-  preset.add([placeholderPlugin, {
-    placeholder
-  }]);
-  preset.add(mobileDimensionsPlugin);
-  preset.add(expandPlugin);
-  preset.add([selectionPlugin, {
-    useLongPressSelection: false
-  }]);
-  // Begin -> This would be exclude if the provider doesnt exist in the factory
-  preset.add(tasksAndDecisionsPlugin);
-  preset.add([cardPlugin, {
-    allowBlockCards: true,
-    platform: 'mobile'
-  }]);
-  preset.add(mentionsPlugin);
-  preset.add(emojiPlugin);
-  // End
+  const preset = defaultPreset;
+  //.add([
+  //  basePlugin,
+  //  {
+  //    allowScrollGutter: {
+  //      getScrollElement: () => document.body,
+  //      allowCustomScrollHandler: false,
+  //    },
+  //  },
+  //])
+  //.add([analyticsPlugin, createAnalyticsEvent])
+  //.add([tablesPlugin, { tableOptions: { allowControls: false } }])
+  //.add(panelPlugin)
+  //.add(listPlugin)
+  //.add(textColorPlugin)
+  //.add(extensionPlugin)
+  //.add(rulePlugin)
+  //.add(datePlugin)
+  //.add(layoutPlugin)
+  //.add([quickInsertPlugin, { headless: true, disableDefaultItems: true }])
+  //.add([statusPlugin, { menuDisabled: false }])
+  //.add([placeholderPlugin, { placeholder }])
+  //.add(mobileDimensionsPlugin)
+  //.add(expandPlugin)
+  ////.add([selectionPlugin, { useLongPressSelection: false }])
+  //// Begin -> This would be exclude if the provider doesnt exist in the factory
+  //.add(tasksAndDecisionsPlugin)
+  //.add([cardPlugin, { allowBlockCards: true, platform: 'mobile' }])
+  //.add(mentionsPlugin)
+  //.add(emojiPlugin)
+  //// End
+  //.maybeAdd(maxContentSizePlugin, (plugin, builder) => {
+  //  if (maxContentSize) {
+  //    return builder.add([plugin, maxContentSize as any]);
+  //  }
+  //  return builder;
+  //})
+  //.maybeAdd(mediaPlugin, (plugin, builder) => {
+  //  if (media) {
+  //    return builder.add([
+  //      plugin,
+  //      {
+  //        provider: mediaProvider,
+  //        customMediaPicker: media.picker,
+  //        fullWidthEnabled: false,
+  //        allowMediaSingle: true,
+  //        allowLazyLoading: false,
+  //        allowMediaSingleEditable: false,
+  //        allowRemoteDimensionsFetch: false,
+  //        allowMarkingUploadsAsIncomplete: true,
+  //        allowAltTextOnImages: true,
+  //        allowTemplatePlaceholders: { allowInserting: true },
+  //      },
+  //    ]);
+  //  }
+
+  //  return builder;
+  //});
 
-  if (maxContentSize) {
-    preset.add([maxContentSizePlugin, maxContentSize]);
-  }
-  if (media) {
-    preset.add([mediaPlugin, {
-      provider: mediaProvider,
-      customMediaPicker: media.picker,
-      fullWidthEnabled: false,
-      allowMediaSingle: true,
-      allowLazyLoading: false,
-      allowMediaSingleEditable: false,
-      allowRemoteDimensionsFetch: false,
-      allowMarkingUploadsAsIncomplete: true,
-      allowAltTextOnImages: true,
-      allowTemplatePlaceholders: {
-        allowInserting: true
-      }
-    }]);
-  }
   return [preset];
 }
 export function EditorPresetMobile(props) {
@@ -113,7 +111,9 @@ export function EditorPresetMobile(props) {
   } = props;
   const [preset] = useMobilePreset(props);
   const providerFactory = useProviderFactory();
-  const plugins = preset.getEditorPlugins(addExcludesFromProviderFactory(providerFactory, excludes));
+  const plugins = preset.build({
+    excludePlugins: addExcludesFromProviderFactory(providerFactory, excludes)
+  });
   return /*#__PURE__*/React.createElement(PresetProvider, {
     value: plugins
   }, children);