@atlaskit/editor-core 201.1.4 → 201.1.6

package/dist/es2019/create-editor/ReactEditorView/handleEditorFocus.js

@@ -0,0 +1,38 @@
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+export function handleEditorFocus(view) {
+  if (view.hasFocus()) {
+    return;
+  }
+  return window.setTimeout(() => {
+    if (view.hasFocus()) {
+      return;
+    }
+    if (!window.getSelection) {
+      view.focus();
+      return;
+    }
+    const domSelection = window.getSelection();
+    if (!domSelection || domSelection.rangeCount === 0) {
+      view.focus();
+      return;
+    }
+    const range = domSelection.getRangeAt(0);
+    // if selection is outside editor focus and exit
+    if (range.startContainer.contains(view.dom)) {
+      view.focus();
+      return;
+    }
+    // set cursor/selection and focus
+    const anchor = view.posAtDOM(range.startContainer, range.startOffset);
+    const head = view.posAtDOM(range.endContainer, range.endOffset);
+    // if anchor or head < 0 focus and exit
+    if (anchor < 0 || head < 0) {
+      view.focus();
+      return;
+    }
+    const selection = TextSelection.create(view.state.doc, anchor, head);
+    const tr = view.state.tr.setSelection(selection);
+    view.dispatch(tr);
+    view.focus();
+  }, 0);
+}

package/dist/es2019/create-editor/ReactEditorView/useDispatchTransaction.js

@@ -0,0 +1,82 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, getAnalyticsEventsFromTransaction } from '@atlaskit/editor-common/analytics';
+import { getDocStructure } from '@atlaskit/editor-common/core-utils';
+import { startMeasure, stopMeasure } from '@atlaskit/editor-common/performance-measures';
+import { findChangedNodesFromTransaction } from '../../utils/findChangedNodesFromTransaction';
+import { freezeUnsafeTransactionProperties } from '../../utils/performance/safer-transactions';
+import { EVENT_NAME_ON_CHANGE } from '../../utils/performance/track-transactions';
+import { validateNodes, validNode } from '../../utils/validateNodes';
+export const useDispatchTransaction = ({
+  onChange,
+  dispatchAnalyticsEvent,
+  onEditorViewUpdated
+}) => {
+  // We need to have a ref to the latest `onChange` since the `dispatchTransaction` gets captured
+  const onChangeRef = useRef(onChange);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  const dispatchTransaction = useCallback((view, unsafeTransaction) => {
+    if (!view) {
+      return;
+    }
+    const nodes = findChangedNodesFromTransaction(unsafeTransaction);
+    const changedNodesValid = validateNodes(nodes);
+    const transaction = new Proxy(unsafeTransaction, freezeUnsafeTransactionProperties({
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      pluginKey: 'unknown-reacteditorview'
+    }));
+    if (changedNodesValid) {
+      const oldEditorState = view.state;
+
+      // go ahead and update the state now we know the transaction is good
+      const {
+        state: newEditorState,
+        transactions
+      } = view.state.applyTransaction(transaction);
+      if (newEditorState === oldEditorState) {
+        return;
+      }
+      view.updateState(newEditorState);
+      onEditorViewUpdated({
+        originalTransaction: transaction,
+        transactions,
+        oldEditorState,
+        newEditorState
+      });
+      if (onChangeRef.current && transaction.docChanged) {
+        const source = transaction.getMeta('isRemote') ? 'remote' : 'local';
+        startMeasure(EVENT_NAME_ON_CHANGE);
+        onChangeRef.current(view, {
+          source
+        });
+        stopMeasure(EVENT_NAME_ON_CHANGE, (duration, startTime) => {
+          dispatchAnalyticsEvent({
+            action: ACTION.ON_CHANGE_CALLBACK,
+            actionSubject: ACTION_SUBJECT.EDITOR,
+            eventType: EVENT_TYPE.OPERATIONAL,
+            attributes: {
+              duration,
+              startTime
+            }
+          });
+        });
+      }
+      return newEditorState;
+    } else {
+      const invalidNodes = nodes.filter(node => !validNode(node)).map(node => getDocStructure(node, {
+        compact: true
+      }));
+      dispatchAnalyticsEvent({
+        action: ACTION.DISPATCHED_INVALID_TRANSACTION,
+        actionSubject: ACTION_SUBJECT.EDITOR,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          analyticsEventPayloads: getAnalyticsEventsFromTransaction(transaction),
+          invalidNodes
+        }
+      });
+    }
+  }, [dispatchAnalyticsEvent, onEditorViewUpdated]);
+  return dispatchTransaction;
+};

package/dist/es2019/create-editor/ReactEditorView/useFireFullWidthEvent.js

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { usePreviousState } from '@atlaskit/editor-common/hooks';
+import { formatFullWidthAppearance } from './formatFullWidthAppearance';
+export const useFireFullWidthEvent = (appearance, dispatchAnalyticsEvent) => {
+  const previousAppearance = usePreviousState(appearance);
+  useEffect(() => {
+    if (appearance !== previousAppearance) {
+      if (appearance === 'full-width' || previousAppearance === 'full-width') {
+        dispatchAnalyticsEvent({
+          action: ACTION.CHANGED_FULL_WIDTH_MODE,
+          actionSubject: ACTION_SUBJECT.EDITOR,
+          eventType: EVENT_TYPE.TRACK,
+          attributes: {
+            previousMode: formatFullWidthAppearance(previousAppearance),
+            newMode: formatFullWidthAppearance(appearance)
+          }
+        });
+      }
+    }
+  }, [appearance, previousAppearance, dispatchAnalyticsEvent]);
+};

package/dist/es2019/create-editor/ReactEditorView/usePluginPerformanceObserver.js

@@ -0,0 +1,32 @@
+import { useCallback, useLayoutEffect, useMemo } from 'react';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { countNodes } from '@atlaskit/editor-common/count-nodes';
+import { PluginPerformanceObserver } from '../../utils/performance/plugin-performance-observer';
+export const usePluginPerformanceObserver = (editorState, pluginInjectionAPI, dispatchAnalyticsEvent) => {
+  const onPluginObservation = useCallback(report => {
+    var _pluginInjectionAPI$c, _pluginInjectionAPI$c2, _pluginInjectionAPI$c3, _pluginInjectionAPI$c4;
+    dispatchAnalyticsEvent({
+      action: ACTION.TRANSACTION_DISPATCHED,
+      actionSubject: ACTION_SUBJECT.EDITOR,
+      eventType: EVENT_TYPE.OPERATIONAL,
+      attributes: {
+        report,
+        participants: ((_pluginInjectionAPI$c = pluginInjectionAPI.current) === null || _pluginInjectionAPI$c === void 0 ? void 0 : (_pluginInjectionAPI$c2 = _pluginInjectionAPI$c.api().collabEdit) === null || _pluginInjectionAPI$c2 === void 0 ? void 0 : (_pluginInjectionAPI$c3 = _pluginInjectionAPI$c2.sharedState.currentState()) === null || _pluginInjectionAPI$c3 === void 0 ? void 0 : (_pluginInjectionAPI$c4 = _pluginInjectionAPI$c3.participants) === null || _pluginInjectionAPI$c4 === void 0 ? void 0 : _pluginInjectionAPI$c4.size()) || 1
+      }
+    });
+  }, [dispatchAnalyticsEvent, pluginInjectionAPI]);
+  const getPluginNames = useCallback(() => {
+    var _editorState$current;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return (_editorState$current = editorState.current) === null || _editorState$current === void 0 ? void 0 : _editorState$current.plugins.map(p => p.key);
+  }, [editorState]);
+  const pluginPerformanceObserver = useMemo(() => new PluginPerformanceObserver(report => onPluginObservation(report)).withPlugins(() => getPluginNames()).withNodeCounts(() => editorState.current ? countNodes(editorState.current) : {
+    nodeCount: {},
+    extensionNodeCount: {}
+  }), [onPluginObservation, getPluginNames, editorState]);
+  useLayoutEffect(() => {
+    return () => {
+      pluginPerformanceObserver.disconnect();
+    };
+  }, [pluginPerformanceObserver]);
+};