@atlaskit/code 14.4.5 → 14.4.7

package/__perf__/source-code-examples/500-line-example.tsx

@@ -0,0 +1,501 @@
+// eslint-disable-file
+export const fiveHundredLineExample = `export const NORMAL_SEVERITY_THRESHOLD = 2000;
+export const DEGRADED_SEVERITY_THRESHOLD = 3000;
+export interface Extension<T> {
+  extensionKey: string;
+  parameters?: T;
+  content?: any; // This would be the original Atlassian Document Format
+}
+const packageName = process.env._PACKAGE_NAME_ as string;
+const packageVersion = process.env._PACKAGE_VERSION_ as string;
+
+export type { RendererProps as Props };
+
+export class Renderer extends PureComponent<RendererProps> {
+  private providerFactory: ProviderFactory;
+  private serializer: ReactSerializer;
+  private rafID?: number;
+  private editorRef: React.RefObject<HTMLDivElement>;
+  private mouseDownSelection?: string;
+  private id?: string;
+  /**
+   * This is used in measuring the Renderer Mount time and is then
+   * deleted once that measurement occurs.
+   */
+  private renderedMeasurementDistortedDurationMonitor?: {
+    distortedDuration: boolean;
+    cleanup: () => void;
+  } = getDistortedDurationMonitor();
+
+  constructor(props: RendererProps) {
+    super(props);
+    this.providerFactory = props.dataProviders || new ProviderFactory();
+    this.serializer = new ReactSerializer(this.deriveSerializerProps(props));
+    this.editorRef = props.innerRef || React.createRef();
+    this.id = uuid();
+    startMeasure("Renderer Render Time: this.id");
+
+    const featureFlags = this.featureFlags(this.props.featureFlags)
+      .featureFlags;
+
+    if (featureFlags?.rendererTtiTracking) {
+      measureTTI((tti, ttiFromInvocation, canceled) => {
+        this.fireAnalyticsEvent({
+          action: ACTION.RENDERER_TTI,
+          actionSubject: ACTION_SUBJECT.RENDERER,
+          attributes: { tti, ttiFromInvocation, canceled },
+          eventType: EVENT_TYPE.OPERATIONAL,
+        });
+      });
+    }
+  }
+
+  private anchorLinkAnalytics() {
+    const hash =
+      window.location.hash && decodeURIComponent(window.location.hash.slice(1));
+    const { disableHeadingIDs } = this.props;
+
+    if (
+      !disableHeadingIDs &&
+      hash &&
+      this.editorRef &&
+      this.editorRef.current instanceof HTMLElement
+    ) {
+      const anchorLinkElement = document.getElementById(hash);
+      // We are not use this.editorRef.querySelector here, instead we have this.editorRef.contains
+      // because querySelector might fail if there are special characters in hash, and CSS.escape is still experimental.
+      if (
+        anchorLinkElement &&
+        this.editorRef.current.contains(anchorLinkElement)
+      ) {
+        this.fireAnalyticsEvent({
+          action: ACTION.VIEWED,
+          actionSubject: ACTION_SUBJECT.ANCHOR_LINK,
+          attributes: { platform: PLATFORM.WEB, mode: MODE.RENDERER },
+          eventType: EVENT_TYPE.UI,
+        });
+      }
+    }
+  }
+
+  componentDidMount() {
+    this.fireAnalyticsEvent({
+      action: ACTION.STARTED,
+      actionSubject: ACTION_SUBJECT.RENDERER,
+      attributes: { platform: PLATFORM.WEB },
+      eventType: EVENT_TYPE.UI,
+    });
+
+    this.rafID = requestAnimationFrame(() => {
+      stopMeasure("Renderer Render Time: this.id", (duration) => {
+        const { analyticsEventSeverityTracking } = this.props;
+        const forceSeverityTracking =
+          typeof analyticsEventSeverityTracking === 'undefined' &&
+          shouldForceTracking();
+
+        const severity =
+          !!forceSeverityTracking || analyticsEventSeverityTracking?.enabled
+            ? getAnalyticsEventSeverity(
+                duration,
+                analyticsEventSeverityTracking?.severityNormalThreshold ??
+                  NORMAL_SEVERITY_THRESHOLD,
+                analyticsEventSeverityTracking?.severityDegradedThreshold ??
+                  DEGRADED_SEVERITY_THRESHOLD,
+              )
+            : undefined;
+
+        this.fireAnalyticsEvent({
+          action: ACTION.RENDERED,
+          actionSubject: ACTION_SUBJECT.RENDERER,
+          attributes: {
+            platform: PLATFORM.WEB,
+            duration,
+            distortedDuration: this.renderedMeasurementDistortedDurationMonitor!
+              .distortedDuration,
+            ttfb: getResponseEndTime(),
+            nodes: reduce<Record<string, number>>(
+              this.props.document,
+              (acc, node) => {
+                acc[node.type] = (acc[node.type] || 0) + 1;
+                return acc;
+              },
+              {},
+            ),
+            severity,
+          },
+          eventType: EVENT_TYPE.OPERATIONAL,
+        });
+        this.renderedMeasurementDistortedDurationMonitor!.cleanup();
+        delete this.renderedMeasurementDistortedDurationMonitor;
+      });
+      this.anchorLinkAnalytics();
+    });
+  }
+
+  private deriveSerializerProps(props: RendererProps): ReactSerializerInit {
+    // if just passed a boolean, change shape into object to simplify type
+    const stickyHeaders = props.stickyHeaders
+      ? props.stickyHeaders === true
+        ? {}
+        : props.stickyHeaders
+      : undefined;
+
+    const { annotationProvider } = props;
+    const allowAnnotationsDraftMode = Boolean(
+      annotationProvider &&
+        annotationProvider.inlineComment &&
+        annotationProvider.inlineComment.allowDraftMode,
+    );
+
+    const { featureFlags } = this.featureFlags(props.featureFlags);
+
+    return {
+      providers: this.providerFactory,
+      eventHandlers: props.eventHandlers,
+      extensionHandlers: props.extensionHandlers,
+      portal: props.portal,
+      objectContext: {
+        adDoc: props.document,
+        schema: props.schema,
+        ...props.rendererContext,
+      } as RendererContext,
+      appearance: props.appearance,
+      disableHeadingIDs: props.disableHeadingIDs,
+      disableActions: props.disableActions,
+      allowHeadingAnchorLinks: props.allowHeadingAnchorLinks,
+      allowColumnSorting: props.allowColumnSorting,
+      fireAnalyticsEvent: this.fireAnalyticsEvent,
+      shouldOpenMediaViewer: props.shouldOpenMediaViewer,
+      allowAltTextOnImages: props.allowAltTextOnImages,
+      stickyHeaders,
+      allowMediaLinking: props.media && props.media.allowLinking,
+      surroundTextNodesWithTextWrapper: allowAnnotationsDraftMode,
+      media: props.media,
+      smartLinks: props.smartLinks,
+      allowCopyToClipboard: props.allowCopyToClipboard,
+      allowCustomPanels: props.allowCustomPanels,
+      allowAnnotations: props.allowAnnotations,
+      allowSelectAllTrap: props.allowSelectAllTrap,
+      allowPlaceholderText: props.allowPlaceholderText,
+      nodeComponents: props.nodeComponents,
+      // does not currently support SSR, should not be enabled in environments where Renderer is SSR-ed
+      allowWindowedCodeBlock: featureFlags?.allowWindowedCodeBlock,
+    };
+  }
+
+  private featureFlags = memoizeOne(
+    (featureFlags: RendererProps['featureFlags']) => {
+      const normalizedFeatureFlags = normalizeFeatureFlags<
+        NormalizedObjectFeatureFlags
+      >(featureFlags, {
+        objectFlagKeys: ['rendererRenderTracking'],
+      });
+      return {
+        featureFlags: normalizedFeatureFlags,
+      };
+    },
+  );
+
+  private fireAnalyticsEvent: FireAnalyticsCallback = (event) => {
+    const { createAnalyticsEvent } = this.props;
+
+    if (createAnalyticsEvent) {
+      const channel = FabricChannel.editor;
+      createAnalyticsEvent(event).fire(channel);
+    }
+  };
+
+  private getSchema = memoizeOne(
+    (schema?: Schema, adfStage?: 'final' | 'stage0') => {
+      if (schema) {
+        return schema;
+      }
+
+      return getSchemaBasedOnStage(adfStage);
+    },
+  );
+
+  private handleMouseTripleClickInTables = (event: MouseEvent) => {
+    if (browser.ios || browser.android) {
+      return;
+    }
+    const badBrowser = browser.chrome || browser.safari;
+    const tripleClick = event.detail >= 3;
+    if (!(badBrowser && tripleClick)) {
+      return;
+    }
+    const selection = window.getSelection();
+    if (!selection) {
+      return;
+    }
+    const { type, anchorNode, focusNode } = selection;
+    const rangeSelection = Boolean(type === 'Range' && anchorNode && focusNode);
+    if (!rangeSelection) {
+      return;
+    }
+    const target = event.target as HTMLElement;
+    const tableCell = target.closest('td,th');
+    const clickedInCell = Boolean(tableCell);
+    if (!clickedInCell) {
+      return;
+    }
+    const anchorInCell = tableCell!.contains(anchorNode);
+    const focusInCell = tableCell!.contains(focusNode);
+    const selectionStartsOrEndsOutsideClickedCell = !(
+      anchorInCell && focusInCell
+    );
+    if (!selectionStartsOrEndsOutsideClickedCell) {
+      return;
+    }
+    const elementToSelect: Element | null | undefined = anchorInCell
+      ? anchorNode!.parentElement?.closest('div,p')
+      : focusInCell
+      ? focusNode!.parentElement?.closest('div,p')
+      : tableCell;
+    if (elementToSelect) {
+      selection.selectAllChildren(elementToSelect);
+    }
+  };
+
+  render() {
+    const {
+      document: adfDocument,
+      onComplete,
+      onError,
+      appearance,
+      adfStage,
+      truncated,
+      maxHeight,
+      fadeOutHeight,
+      enableSsrInlineScripts,
+      allowHeadingAnchorLinks,
+      allowPlaceholderText,
+      allowColumnSorting,
+      allowCopyToClipboard,
+      allowCustomPanels,
+    } = this.props;
+
+    const allowNestedHeaderLinks = isNestedHeaderLinksEnabled(
+      allowHeadingAnchorLinks,
+    );
+    /**
+     * Handle clicks inside renderer. If the click isn't on media, in the media picker, or on a
+     * link, call the onUnhandledClick eventHandler (which in Jira for example, may switch the
+     * renderer out for the editor).
+     * @param event Click event anywhere inside renderer
+     */
+    const handleWrapperOnClick = (event: React.MouseEvent) => {
+      const targetElement = event.target as HTMLElement;
+
+      // ED-14862: When a user triple clicks to select a line of content inside a
+      // a table cell, but the browser incorrectly moves the selection start or end into
+      // a different table cell, we manually set the selection back to within the original
+      // table cell the user intended to target
+      this.handleMouseTripleClickInTables((event as unknown) as MouseEvent);
+
+      if (!this.props.eventHandlers?.onUnhandledClick) {
+        return;
+      }
+      if (!(targetElement instanceof window.Element)) {
+        return;
+      }
+
+      const rendererWrapper = event.currentTarget as HTMLElement;
+
+      // Check if the click was on an interactive element
+      const isInteractiveElementInTree = findInTree(
+        targetElement,
+        rendererWrapper,
+        isInteractiveElement,
+      );
+      if (isInteractiveElementInTree) {
+        return;
+      }
+
+      const windowSelection = window.getSelection();
+      const selection: string | undefined =
+        windowSelection !== null ? windowSelection.toString() : undefined;
+      const hasSelection = selection && selection.length !== 0;
+
+      const hasSelectionMouseDown =
+        this.mouseDownSelection && this.mouseDownSelection.length !== 0;
+      const allowEditBasedOnSelection = !hasSelection && !hasSelectionMouseDown;
+
+      if (allowEditBasedOnSelection) {
+        this.props.eventHandlers.onUnhandledClick(event);
+      }
+    };
+
+    try {
+      const schema = this.getSchema(this.props.schema, this.props.adfStage);
+
+      const { result, stat, pmDoc } = renderDocument(
+        adfDocument,
+        this.serializer,
+        schema,
+        adfStage,
+        this.props.useSpecBasedValidator,
+        this.id,
+        this.fireAnalyticsEvent,
+        this.props.unsupportedContentLevelsTracking,
+        this.props.appearance,
+      );
+
+      if (onComplete) {
+        onComplete(stat);
+      }
+
+      const rendererOutput = (
+        <RendererContextProvider
+          value={this.featureFlags(this.props.featureFlags)}
+        >
+          <ActiveHeaderIdProvider
+            value={getActiveHeadingId(allowHeadingAnchorLinks)}
+          >
+            <AnalyticsContext.Provider
+              value={{
+                fireAnalyticsEvent: (event: AnalyticsEventPayload) =>
+                  this.fireAnalyticsEvent(event),
+              }}
+            >
+              <SmartCardStorageProvider>
+                <RendererWrapper
+                  appearance={appearance}
+                  allowNestedHeaderLinks={allowNestedHeaderLinks}
+                  allowColumnSorting={allowColumnSorting}
+                  allowCopyToClipboard={allowCopyToClipboard}
+                  allowCustomPanels={allowCustomPanels}
+                  allowPlaceholderText={allowPlaceholderText}
+                  innerRef={this.editorRef}
+                  onClick={handleWrapperOnClick}
+                  onMouseDown={this.onMouseDownEditView}
+                >
+                  {enableSsrInlineScripts ? <BreakoutSSRInlineScript /> : null}
+                  <RendererActionsInternalUpdater
+                    doc={pmDoc}
+                    schema={schema}
+                    onAnalyticsEvent={this.fireAnalyticsEvent}
+                  >
+                    {result}
+                  </RendererActionsInternalUpdater>
+                </RendererWrapper>
+              </SmartCardStorageProvider>
+            </AnalyticsContext.Provider>
+          </ActiveHeaderIdProvider>
+        </RendererContextProvider>
+      );
+
+      let rendererResult = truncated ? (
+        <TruncatedWrapper height={maxHeight} fadeHeight={fadeOutHeight}>
+          {rendererOutput}
+        </TruncatedWrapper>
+      ) : (
+        rendererOutput
+      );
+
+      const rendererRenderTracking = this.featureFlags(this.props.featureFlags)
+        ?.featureFlags?.rendererRenderTracking?.[ACTION_SUBJECT.RENDERER];
+
+      const reRenderTracking = rendererRenderTracking?.enabled && (
+        <RenderTracking
+          componentProps={this.props}
+          action={ACTION.RE_RENDERED}
+          actionSubject={ACTION_SUBJECT.RENDERER}
+          handleAnalyticsEvent={this.fireAnalyticsEvent}
+          useShallow={rendererRenderTracking.useShallow}
+        />
+      );
+
+      return (
+        <Fragment>
+          {reRenderTracking}
+          {rendererResult}
+        </Fragment>
+      );
+    } catch (e) {
+      if (onError) {
+        onError(e);
+      }
+      return (
+        <RendererWrapper
+          appearance={appearance}
+          allowCopyToClipboard={allowCopyToClipboard}
+          allowPlaceholderText={allowPlaceholderText}
+          allowColumnSorting={allowColumnSorting}
+          allowNestedHeaderLinks={allowNestedHeaderLinks}
+          onClick={handleWrapperOnClick}
+        >
+          <UnsupportedBlock />
+        </RendererWrapper>
+      );
+    }
+  }
+
+  componentWillUnmount() {
+    const { dataProviders } = this.props;
+
+    if (this.rafID) {
+      window.cancelAnimationFrame(this.rafID);
+    }
+
+    // if this is the ProviderFactory which was created in constructor
+    // it's safe to destroy it on Renderer unmount
+    if (!dataProviders) {
+      this.providerFactory.destroy();
+    }
+  }
+}
+
+const RendererWithAnalytics = React.memo((props: RendererProps) => (
+  <FabricEditorAnalyticsContext
+    data={{
+      appearance: getAnalyticsAppearance(props.appearance),
+      packageName,
+      packageVersion,
+      componentName: 'renderer',
+      editorSessionId: uuid(),
+    }}
+  >
+    <WithCreateAnalyticsEvent
+      render={(createAnalyticsEvent) => {
+        // 'IntlErrorBoundary' only captures Internationalisation errors, leaving others for 'ErrorBoundary'.
+        return (
+          <ErrorBoundary component={ACTION_SUBJECT.RENDERER} rethrowError fallbackComponent={null} createAnalyticsEvent={createAnalyticsEvent} >
+            <IntlErrorBoundary>
+              <Renderer
+                {...props}
+                createAnalyticsEvent={createAnalyticsEvent}
+              />
+            </IntlErrorBoundary>
+          </ErrorBoundary>
+        );
+      }}
+    />
+  </FabricEditorAnalyticsContext>
+));
+
+type RendererWrapperProps = {
+  appearance: RendererAppearance;
+  innerRef?: React.RefObject<HTMLDivElement>;
+  allowColumnSorting?: boolean;
+  allowCopyToClipboard?: boolean;
+  allowPlaceholderText?: boolean;
+  allowCustomPanels?: boolean;
+  allowNestedHeaderLinks: boolean;
+  onClick?: (event: React.MouseEvent) => void;
+  onMouseDown?: (event: React.MouseEvent) => void;
+} & { children?: React.ReactNode };
+
+const RendererWrapper = React.memo((props: RendererWrapperProps) => {
+  const { allowColumnSorting, allowNestedHeaderLinks, innerRef, appearance, children, onClick, onMouseDown, } = props;
+
+  return (
+    <WidthProvider className="ak-renderer-wrapper">
+      <BaseTheme baseFontSize={ appearance && appearance !== 'comment' ? akEditorFullPageDefaultFontSize : undefined } >
+        <div ref={innerRef} onClick={onClick} onMouseDown={onMouseDown} css={rendererStyles({ appearance, allowNestedHeaderLinks, allowColumnSorting: !!allowColumnSorting, })} >
+          {children}
+        </div>
+      </BaseTheme>
+    </WidthProvider>
+  );
+});`;

package/dist/cjs/bidi-warning/bidi-warning-decorator.js

@@ -1,58 +1,46 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.bidiCharacterRegex = void 0;
 exports.default = codeBidiWarningDecorator;
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 var bidiCharacterRegex = /[\u202A-\u202E\u2066-\u2069]/g;
 exports.bidiCharacterRegex = bidiCharacterRegex;
-
 function codeBidiWarningDecorator(originalText, decorate) {
   var matches = (0, _toConsumableArray2.default)(originalText.matchAll(bidiCharacterRegex));
-
   if (matches.length === 0) {
     // No matches encountered, so we return the originalText value
     return originalText;
   }
-
   var children = [];
   var mappedTo = 0;
-
   var _iterator = _createForOfIteratorHelper(matches),
-      _step;
-
+    _step;
   try {
     for (_iterator.s(); !(_step = _iterator.n()).done;) {
       var match = _step.value;
-
       if (mappedTo !== match.index) {
         // There were unmatched characters prior to this match which haven't been
         // mapped to the children.
         // Add them as plain text.
         children.push(originalText.substring(mappedTo, match.index));
       }
-
       children.push(decorate({
         bidiCharacter: match[0],
         index: match.index
-      })); // While index is guaranteed to be present, it needs to be asserted due
+      }));
+
+      // While index is guaranteed to be present, it needs to be asserted due
       // to a limitation of typescripts regex handling
       //
       // https://github.com/microsoft/TypeScript/issues/36788
       // Decorate bidi character
-
       mappedTo = match.index + match[0].length;
     }
   } catch (err) {
@@ -60,14 +48,13 @@ function codeBidiWarningDecorator(originalText, decorate) {
   } finally {
     _iterator.f();
   }
-
   if (mappedTo !== originalText.length) {
     // There is text following the final match, which needs to be mapped
     // to the children.
     // Added as plain text.
     children.push(originalText.substring(mappedTo, originalText.length));
-  } // return the mapped children with decorated bidi characters
-
+  }
 
+  // return the mapped children with decorated bidi characters
   return children;
 }

package/dist/cjs/bidi-warning/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "default", {
     return _ui.default;
   }
 });
-
 var _ui = _interopRequireDefault(require("./ui"));

package/dist/cjs/bidi-warning/ui/index.js

@@ -1,32 +1,23 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = BidiWarning;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-
 var _styled = require("./styled");
-
 var _excluded = ["children"];
-
 function BidiWarning(_ref) {
   var testId = _ref.testId,
-      bidiCharacter = _ref.bidiCharacter,
-      skipChildren = _ref.skipChildren,
-      tooltipEnabled = _ref.tooltipEnabled,
-      _ref$label = _ref.label,
-      label = _ref$label === void 0 ? 'Bidirectional characters change the order that text is rendered. This could be used to obscure malicious code.' : _ref$label;
-
+    bidiCharacter = _ref.bidiCharacter,
+    skipChildren = _ref.skipChildren,
+    tooltipEnabled = _ref.tooltipEnabled,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? 'Bidirectional characters change the order that text is rendered. This could be used to obscure malicious code.' : _ref$label;
   if (tooltipEnabled) {
     return (
       /*#__PURE__*/
@@ -41,16 +32,14 @@ function BidiWarning(_ref) {
       }, skipChildren ? null : bidiCharacter))
     );
   }
-
   return /*#__PURE__*/_react.default.createElement(_styled.Decorator, {
     testId: testId,
     bidiCharacter: bidiCharacter
   }, skipChildren ? null : bidiCharacter);
 }
-
 var CustomizedTagWithRef = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var children = props.children,
-      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, rest, {
     ref: ref
   }), children);