@atlaskit/editor-core 186.0.0 → 187.0.0

package/dist/es2019/labs/next/full-page.js

@@ -1,192 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-/** @jsx jsx */
-import rafSchedule from 'raf-schd';
-import React from 'react';
-import { css, jsx } from '@emotion/react';
-import { N30 } from '@atlaskit/theme/colors';
-import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { BaseTheme } from '@atlaskit/editor-common/ui';
-import { akEditorMenuZIndex, akEditorToolbarKeylineHeight } from '@atlaskit/editor-shared-styles';
-import ContentStyles from '../../ui/ContentStyles';
-import { ClickAreaBlock } from '../../ui/Addon';
-import { scrollbarStyles } from '../../ui/styles';
-import { tableFullPageEditorStyles } from '@atlaskit/editor-plugin-table/ui/common-styles';
-import AvatarsWithPluginState from '../../plugins/collab-edit/ui';
-import { Editor, EditorContent, useEditorSharedConfig } from './Editor';
-import { Toolbar } from './Toolbar';
-import { ContentComponents } from './ContentComponents';
-import { useCreateAnalyticsHandler } from './internal/hooks/use-analytics';
-import { ContextPanelWidthProvider } from '@atlaskit/editor-common/ui';
-const fullPageEditorWrapper = css`
-  min-width: 340px;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-`;
-const scrollContainer = css`
-  flex-grow: 1;
-  overflow-y: scroll;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  scroll-behavior: smooth;
-  ${scrollbarStyles};
-`;
-const GUTTER_PADDING = 32;
-const GUTTER_STYLE = {
-  padding: `0 ${GUTTER_PADDING}px`
-};
-const contentArea = css`
-  display: flex;
-  flex-direction: row;
-  height: 100%;
-  box-sizing: border-box;
-`;
-const editorContentArea = theme => css`
-  line-height: 24px;
-  height: 100%;
-  width: 100%;
-  max-width: ${theme.layoutMaxWidth + GUTTER_PADDING * 2}px;
-  padding-top: 50px;
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  padding-bottom: 55px;
-
-  & .ProseMirror {
-    flex-grow: 1;
-    box-sizing: border-box;
-  }
-
-  && .ProseMirror {
-    & > * {
-      clear: both;
-    }
-    > p,
-    > ul,
-    > ol,
-    > h1,
-    > h2,
-    > h3,
-    > h4,
-    > h5,
-    > h6 {
-      clear: none;
-    }
-  }
-  ${tableFullPageEditorStyles};
-`;
-const mainToolbar = css`
-  position: relative;
-  align-items: center;
-  box-shadow: 'none';
-
-  transition: box-shadow 200ms;
-  z-index: ${akEditorMenuZIndex};
-  display: flex;
-  height: 80px;
-  flex-shrink: 0;
-  background-color: ${"var(--ds-surface, white)"};
-
-  & object {
-    height: 0 !important;
-  }
-`;
-const mainToolbarWithKeyline = css`
-  ${mainToolbar}
-  box-shadow: 0 ${akEditorToolbarKeylineHeight}px 0 0 ${`var(--ds-border, ${N30})`}
-`;
-const mainToolbarCustomComponentsSlot = css`
-  display: flex;
-  justify-content: flex-end;
-  flex-grow: 1;
-`;
-const sidebarArea = css`
-  height: 100%;
-  box-sizing: border-box;
-`;
-function useKeyline() {
-  const [showKeyline, setShowKeyline] = React.useState(false);
-  const scrollContainerRef = React.useRef(null);
-  React.useEffect(() => {
-    let current = scrollContainerRef.current;
-    const handleScroll = rafSchedule(() => {
-      if (!current) {
-        return;
-      }
-      const {
-        scrollTop
-      } = current;
-      setShowKeyline(scrollTop > akEditorToolbarKeylineHeight);
-    });
-    if (!current) {
-      return;
-    }
-    window.addEventListener('resize', handleScroll);
-    current.addEventListener('scroll', handleScroll);
-    handleScroll();
-    return () => {
-      if (current) {
-        current.removeEventListener('scroll', handleScroll);
-      }
-      window.removeEventListener('resize', handleScroll);
-    };
-  }, []);
-  return [showKeyline, scrollContainerRef];
-}
-function FullPage(props) {
-  const {
-    primaryToolbarComponents,
-    contentComponents,
-    collabEdit,
-    createAnalyticsEvent,
-    contextPanel
-  } = props;
-  const handleAnalyticsEvent = useCreateAnalyticsHandler(createAnalyticsEvent);
-  const [showKeyline, scrollContainerRef] = useKeyline();
-  const config = useEditorSharedConfig();
-  const wrapperElementRef = /*#__PURE__*/React.createRef();
-  return jsx(ContextPanelWidthProvider, null, jsx(Editor, _extends({}, props, {
-    onAnalyticsEvent: handleAnalyticsEvent
-  }), jsx(BaseTheme, null, jsx("div", {
-    css: fullPageEditorWrapper,
-    className: "akEditor",
-    ref: wrapperElementRef
-  }, jsx("div", {
-    "data-testid": "ak-editor-main-toolbar",
-    css: showKeyline ? mainToolbarWithKeyline : mainToolbar
-  }, jsx(Toolbar, {
-    containerElement: scrollContainerRef.current
-  }), jsx("div", {
-    css: mainToolbarCustomComponentsSlot
-  }, !config ? null : jsx(AvatarsWithPluginState, {
-    editorView: config.editorView,
-    eventDispatcher: config.eventDispatcher,
-    inviteToEditHandler: collabEdit === null || collabEdit === void 0 ? void 0 : collabEdit.inviteToEditHandler,
-    isInviteToEditButtonSelected: collabEdit === null || collabEdit === void 0 ? void 0 : collabEdit.isInviteToEditButtonSelected,
-    featureFlags: {}
-  }), primaryToolbarComponents)), jsx("div", {
-    css: contentArea
-  }, jsx(ContentStyles, {
-    ref: scrollContainerRef,
-    className: "fabric-editor-popup-scroll-parent",
-    css: scrollContainer
-  }, jsx(ClickAreaBlock, {
-    editorView: config === null || config === void 0 ? void 0 : config.editorView
-  }, jsx("div", {
-    css: editorContentArea
-  }, jsx("div", {
-    style: GUTTER_STYLE,
-    className: "ak-editor-content-area"
-  }, contentComponents, jsx(EditorContent, null), jsx(ContentComponents, {
-    wrapperElement: wrapperElementRef.current,
-    containerElement: scrollContainerRef.current
-  }))))), contextPanel && jsx("div", {
-    css: sidebarArea
-  }, contextPanel))))));
-}
-FullPage.displayName = 'FullPageEditor';
-const FullPageWithAnalytics = withAnalyticsEvents()(FullPage);
-export { FullPageWithAnalytics as FullPage };

package/dist/es2019/labs/next/internal/components/EditorContent.js

@@ -1,17 +0,0 @@
-import React from 'react';
-const EditorContentContext = /*#__PURE__*/React.createContext(() => {});
-const EditorContentProvider = EditorContentContext.Provider;
-
-/**
- * ProseMirror View mount point.
- */
-const EditorContent = /*#__PURE__*/React.memo(() => {
-  const handleRef = React.useContext(EditorContentContext);
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      height: '100%'
-    },
-    ref: handleRef
-  });
-});
-export { EditorContentProvider, EditorContent };

package/dist/es2019/labs/next/internal/components/EditorInternal.js

@@ -1,66 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { WidthProvider } from '@atlaskit/editor-common/ui';
-import { injectIntl } from 'react-intl-next';
-import { useProviderFactory } from '@atlaskit/editor-common/provider-factory';
-import EditorContext from '../../../../ui/EditorContext';
-import EditorActions from '../../../../actions';
-import { EditorSharedConfigProvider } from '../context/shared-config';
-import { useEditor } from '../hooks/use-editor';
-import { EditorContentProvider } from './EditorContent';
-function BaseEditorInternal({
-  onAnalyticsEvent,
-  disabled,
-  transformer,
-  defaultValue,
-  plugins,
-  portalProviderAPI,
-  popupsMountPoint,
-  popupsBoundariesElement,
-  popupsScrollableElement,
-  onChange,
-  onDestroy,
-  onMount,
-  children,
-  intl
-}, context) {
-  // Need to memoize editor actions otherwise in case when editor is not
-  // wrapped with EditorContext every prop change triggers all hooks
-  // that depend on editorActions
-  const maybeEditorActions = (context || {}).editorActions;
-  const editorActions = React.useMemo(() => maybeEditorActions || new EditorActions(), [maybeEditorActions]);
-
-  // Get the provider factory from context
-  const providerFactory = useProviderFactory();
-  const getIntl = () => intl;
-  const [editorSharedConfig, mountEditor] = useEditor({
-    context,
-    editorActions,
-    onAnalyticsEvent,
-    disabled,
-    transformer,
-    defaultValue,
-    plugins,
-    portalProviderAPI,
-    popupsMountPoint,
-    popupsBoundariesElement,
-    popupsScrollableElement,
-    onChange,
-    onDestroy,
-    onMount,
-    providerFactory,
-    featureFlags: {},
-    getIntl
-  });
-  return /*#__PURE__*/React.createElement(WidthProvider, null, /*#__PURE__*/React.createElement(EditorContext, {
-    editorActions: editorActions
-  }, /*#__PURE__*/React.createElement(EditorSharedConfigProvider, {
-    value: editorSharedConfig
-  }, /*#__PURE__*/React.createElement(EditorContentProvider, {
-    value: mountEditor
-  }, children))));
-}
-BaseEditorInternal.contextTypes = {
-  editorActions: PropTypes.object
-};
-export const EditorInternal = injectIntl(BaseEditorInternal);

package/dist/es2019/labs/next/internal/context/preset-context.js

@@ -1,5 +0,0 @@
-import React from 'react';
-const PresetContext = /*#__PURE__*/React.createContext([]);
-const PresetProvider = PresetContext.Provider;
-const usePresetContext = () => React.useContext(PresetContext);
-export { PresetProvider, usePresetContext };

package/dist/es2019/labs/next/internal/context/shared-config.js

@@ -1,34 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
-import PropTypes from 'prop-types';
-
-/**
- * Provides access to most commonly used configurations and instances of classes,
- * that most editor components rely on.
- */
-
-const EditorSharedConfigContext = /*#__PURE__*/React.createContext(null);
-export class EditorSharedConfigProvider extends React.Component {
-  getChildContext() {
-    return {
-      editorSharedConfig: this.props.value
-    };
-  }
-  render() {
-    return /*#__PURE__*/React.createElement(EditorSharedConfigContext.Provider, {
-      value: this.props.value
-    }, this.props.children);
-  }
-}
-_defineProperty(EditorSharedConfigProvider, "childContextTypes", {
-  editorSharedConfig: PropTypes.object
-});
-export class EditorSharedConfigConsumer extends React.Component {
-  render() {
-    return /*#__PURE__*/React.createElement(EditorSharedConfigContext.Consumer, null, value => this.props.children(this.context.editorSharedConfig || value));
-  }
-}
-_defineProperty(EditorSharedConfigConsumer, "contextTypes", {
-  editorSharedConfig: PropTypes.object
-});
-export const useEditorSharedConfig = () => React.useContext(EditorSharedConfigContext);

package/dist/es2019/labs/next/internal/editor-props-type.js

@@ -1 +0,0 @@
-export {};

package/dist/es2019/labs/next/internal/hooks/use-analytics/index.js

@@ -1,32 +0,0 @@
-import React from 'react';
-import { fireAnalyticsEvent } from '@atlaskit/editor-common/analytics';
-import { analyticsEventKey } from '@atlaskit/editor-common/utils';
-
-/**
- * Subscribes to analytics events fired from editor components
- * and passes them through to `fireAnalyticsEvent`.
- */
-export function useAnalyticsHandler(editorSharedConfig) {
-  // handleAnalyticsEvent – must always be the same so we can unsubscribe from events properly.
-  const handleAnalyticsEvent = React.useCallback(payload => {
-    const handleAnalyticsEvent = editorSharedConfig && editorSharedConfig.dispatchAnalyticsEvent;
-    if (!handleAnalyticsEvent) {
-      return;
-    }
-    handleAnalyticsEvent(payload);
-  }, [editorSharedConfig]);
-  if (editorSharedConfig) {
-    editorSharedConfig.eventDispatcher.on(analyticsEventKey, handleAnalyticsEvent);
-  }
-  React.useEffect(() => () => {
-    if (!editorSharedConfig || !editorSharedConfig.eventDispatcher) {
-      return;
-    }
-    editorSharedConfig.eventDispatcher.off(analyticsEventKey, handleAnalyticsEvent);
-  }, [editorSharedConfig, handleAnalyticsEvent]);
-}
-export function useCreateAnalyticsHandler(createAnalyticsEvent) {
-  // AFP-2511 TODO: Fix automatic suppressions below
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  return React.useCallback(fireAnalyticsEvent(createAnalyticsEvent), [createAnalyticsEvent]);
-}

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

@@ -1,51 +0,0 @@
-import { Node } from 'prosemirror-model';
-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';
-// Helper to assure correct payload when dispatch analytics
-function dispatchAnalytics(dispatch, payload) {
-  dispatch(analyticsEventKey, payload);
-}
-export function createDispatchTransaction(editorSharedConfig) {
-  return function dispatchTransaction(transaction) {
-    const {
-      editorView,
-      onChange,
-      transformer,
-      dispatch
-    } = editorSharedConfig;
-    if (!editorView) {
-      return;
-    }
-    const nodes = findChangedNodesFromTransaction(transaction);
-    if (validateNodes(nodes)) {
-      // go ahead and update the state now we know the transaction is good
-      const editorState = editorView.state.apply(transaction);
-      editorView.updateState(editorState);
-      if (onChange && transaction.docChanged) {
-        onChange(getEditorValue(editorView, transformer), {
-          source: 'local'
-        });
-      }
-    } else {
-      // If invalid document, send analytics event with the structure of the nodes
-      if (dispatch) {
-        const invalidNodes = nodes.filter(node => !validNode(node)).map(node => getDocStructure(node));
-        dispatchAnalytics(dispatch, {
-          action: ACTION.DISPATCHED_INVALID_TRANSACTION,
-          actionSubject: ACTION_SUBJECT.EDITOR,
-          eventType: EVENT_TYPE.OPERATIONAL,
-          attributes: {
-            analyticsEventPayloads: getAnalyticsEventsFromTransaction(transaction),
-            invalidNodes
-          }
-        });
-      }
-    }
-  };
-}
-export function getEditorValue(editorView, transformer) {
-  return compose(doc => transformer && transformer.encode ? transformer.encode(Node.fromJSON(editorView.state.schema, doc)) : doc, toJSON)(editorView.state.doc);
-}

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

@@ -1,85 +0,0 @@
-import { EditorView } from 'prosemirror-view';
-import { EditorState } from 'prosemirror-state';
-import { EventDispatcher, createDispatch } from '../../../../../event-dispatcher';
-import { processPluginsList, createPMPlugins } from '../../../../../create-editor/create-editor';
-import { processRawValue } from '@atlaskit/editor-common/utils';
-import { createSchema } from '../../../../../create-editor/create-schema';
-export function createEditor({
-  context,
-  onAnalyticsEvent,
-  transformer,
-  providerFactory,
-  plugins,
-  portalProviderAPI,
-  defaultValue,
-  ref,
-  popupsMountPoint,
-  popupsBoundariesElement,
-  popupsScrollableElement,
-  editorActions,
-  disabled,
-  onChange,
-  onDestroy,
-  onMount,
-  featureFlags,
-  getIntl
-}) {
-  if (!ref) {
-    return null;
-  }
-  const eventDispatcher = new EventDispatcher();
-  const dispatch = createDispatch(eventDispatcher);
-  const editorConfig = processPluginsList(plugins || []);
-  const schema = createSchema(editorConfig);
-  const transformerInstance = transformer && transformer(schema);
-  const pmPlugins = createPMPlugins({
-    editorConfig,
-    schema,
-    dispatch,
-    eventDispatcher,
-    portalProviderAPI: portalProviderAPI,
-    providerFactory,
-    // Required to workaround issues with multiple react trees.
-    // Though it's kinda leaking react to outside world.
-    reactContext: () => context,
-    // TODO: ED-8133 Need to make types more generic otherwise it's not extensible.
-    dispatchAnalyticsEvent: onAnalyticsEvent,
-    performanceTracking: {},
-    featureFlags,
-    getIntl
-  });
-  const state = EditorState.create({
-    schema,
-    plugins: pmPlugins,
-    doc: transformerInstance ? transformerInstance.parse(defaultValue) : processRawValue(schema, defaultValue)
-  });
-  const editorView = new EditorView({
-    mount: ref
-  }, {
-    state,
-    attributes: {
-      'data-gramm': 'false'
-    },
-    // Ignore all transactions by default
-    dispatchTransaction: () => {},
-    // Disables the contentEditable attribute of the editor if the editor is disabled
-    editable: _state => !!disabled
-  });
-  return {
-    editorView,
-    transformer: transformerInstance,
-    dispatchAnalyticsEvent: onAnalyticsEvent,
-    eventDispatcher,
-    dispatch,
-    primaryToolbarComponents: editorConfig.primaryToolbarComponents,
-    contentComponents: editorConfig.contentComponents,
-    popupsMountPoint,
-    popupsBoundariesElement,
-    popupsScrollableElement,
-    providerFactory,
-    editorActions,
-    onChange,
-    onDestroy,
-    onMount
-  };
-}

package/dist/es2019/labs/next/internal/hooks/use-editor/index.js

@@ -1,179 +0,0 @@
-import React from 'react';
-import { measureRender, getResponseEndTime, startMeasure, stopMeasure } from '@atlaskit/editor-common/utils';
-import measurements from '../../../../../utils/performance/measure-enum';
-import { getNodesCount } from '../../../../../utils';
-import { ACTION, ACTION_SUBJECT, EVENT_TYPE, PLATFORMS } from '../../../../../plugins/analytics';
-import { getEnabledFeatureFlagKeys } from '@atlaskit/editor-common/normalize-feature-flags';
-import { useAnalyticsHandler } from '../use-analytics';
-import { createDispatchTransaction } from './create-dispatch-transaction';
-import { createEditor } from './create-editor';
-import { analyticsEventKey } from '../../../../../plugins/analytics/consts';
-export function useEditor(config) {
-  startMeasure(measurements.EDITOR_MOUNTED);
-  const [editorSharedConfig, mountEditor] = useCreateEditor(config);
-  useApplyEditorViewProps(editorSharedConfig, config.disabled);
-  useHandleEditorLifecycle(editorSharedConfig, config.featureFlags);
-  useAnalyticsHandler(editorSharedConfig);
-  return [editorSharedConfig, mountEditor];
-}
-
-/**
- *
- * Sub hooks ¯\_(ツ)_/¯
- *
- */
-
-/**
- * Main hook that creates an instance of EditorView, EditorSharedConfig, etc...
- */
-function useCreateEditor(config) {
-  const [editorSharedConfig, setEditorSharedConfig] = React.useState(null);
-  return [editorSharedConfig,
-  // This callback is being used as `ref={callback}` on EditorContentProvider,
-  // When called with `ref` mounts editor and creates editorSharedConfig.
-  React.useCallback(ref => {
-    // If editorSharedConfig already exists it means that editorView is mounted
-    // and we just need to ignore this function altogether.
-    if (!ref) {
-      return;
-    }
-    setEditorSharedConfig(editorSharedConfig => {
-      if (!editorSharedConfig) {
-        measureRender(measurements.PROSEMIRROR_RENDERED, ({
-          duration,
-          startTime,
-          distortedDuration
-        }) => {
-          if (sharedConfig && sharedConfig.dispatch) {
-            sharedConfig.dispatch(analyticsEventKey, {
-              payload: {
-                action: ACTION.PROSEMIRROR_RENDERED,
-                actionSubject: ACTION_SUBJECT.EDITOR,
-                attributes: {
-                  duration,
-                  distortedDuration,
-                  startTime,
-                  nodes: getNodesCount(sharedConfig.editorView.state.doc),
-                  ttfb: getResponseEndTime()
-                },
-                eventType: EVENT_TYPE.OPERATIONAL
-              }
-            });
-          }
-        });
-      }
-      const sharedConfig = editorSharedConfig || createEditor({
-        ...config,
-        ref
-      });
-      stopMeasure(measurements.EDITOR_MOUNTED, (duration, startTime) => {
-        if (!sharedConfig) {
-          return;
-        }
-
-        // Fire editor mounted event
-        sharedConfig.dispatch(analyticsEventKey, {
-          payload: {
-            action: ACTION.EDITOR_MOUNTED,
-            actionSubject: ACTION_SUBJECT.EDITOR,
-            attributes: {
-              duration,
-              startTime
-            },
-            eventType: EVENT_TYPE.OPERATIONAL
-          }
-        });
-      });
-      return sharedConfig;
-    });
-  }, [config])];
-}
-
-/**
- * Applies updated EditorView properties e.g. set dispatchTransaction or 'disabled' state changes
- */
-function useApplyEditorViewProps(editorSharedConfig, disabled) {
-  React.useEffect(() => {
-    if (editorSharedConfig) {
-      editorSharedConfig.editorView.setProps({
-        dispatchTransaction: createDispatchTransaction(editorSharedConfig)
-      });
-      editorSharedConfig.editorView.setProps({
-        editable: _state => !disabled
-      });
-    }
-  }, [editorSharedConfig, disabled]);
-}
-
-/**
- * Handles editor component unmount
- */
-export function useHandleEditorLifecycle(editorSharedConfig, featureFlags) {
-  React.useEffect(() => {
-    //#region Did mount
-    if (editorSharedConfig) {
-      const {
-        onMount,
-        editorActions,
-        editorView,
-        eventDispatcher,
-        dispatch
-      } = editorSharedConfig;
-      editorActions._privateRegisterEditor(editorView, eventDispatcher);
-      if (onMount) {
-        onMount(editorActions);
-      }
-      const featureFlagsEnabled = featureFlags ? getEnabledFeatureFlagKeys(featureFlags) : [];
-
-      // Fire editor started event
-      dispatch(analyticsEventKey, {
-        payload: {
-          action: ACTION.STARTED,
-          actionSubject: ACTION_SUBJECT.EDITOR,
-          attributes: {
-            platform: PLATFORMS.WEB,
-            featureFlags: featureFlagsEnabled
-          },
-          eventType: EVENT_TYPE.UI
-        }
-      });
-    }
-    //#endregion
-
-    return () => {
-      if (!editorSharedConfig) {
-        return;
-      }
-      const {
-        eventDispatcher,
-        editorView,
-        onDestroy,
-        editorActions
-      } = editorSharedConfig;
-      if (eventDispatcher) {
-        eventDispatcher.destroy();
-      }
-      if (onDestroy) {
-        onDestroy();
-      }
-      editorActions._privateUnregisterEditor();
-      if (editorView) {
-        // Prevent any transactions from coming through when unmounting
-        editorView.setProps({
-          dispatchTransaction: _tr => {}
-        });
-
-        // Destroy plugin states and editor state
-        // when the editor is being unmounted
-        const editorState = editorView.state;
-        editorState.plugins.forEach(plugin => {
-          const state = plugin.getState(editorState);
-          if (state && state.destroy) {
-            state.destroy();
-          }
-        });
-        editorView.destroy();
-      }
-    };
-  }, [editorSharedConfig, featureFlags]);
-}