@atlaskit/renderer 113.2.0 → 113.2.1

package/dist/esm/ui/Renderer/get-base-font-size.js

@@ -0,0 +1,4 @@
+import { akEditorFullPageDefaultFontSize } from '@atlaskit/editor-shared-styles';
+export var getBaseFontSize = function getBaseFontSize(appearance) {
+  return appearance && appearance !== 'comment' ? akEditorFullPageDefaultFontSize : 14;
+};

package/dist/esm/ui/Renderer/index.js

@@ -31,7 +31,6 @@ import { FabricChannel } from '@atlaskit/analytics-listeners/types';
 import { FabricEditorAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { normalizeFeatureFlags } from '@atlaskit/editor-common/normalize-feature-flags';
-import { akEditorFullPageDefaultFontSize } from '@atlaskit/editor-shared-styles';
 import memoizeOne from 'memoize-one';
 import uuid from 'uuid/v4';
 import { ReactSerializer, renderDocument } from '../../';
@@ -49,13 +48,15 @@ import { ErrorBoundary } from './ErrorBoundary';
 import { BreakoutSSRInlineScript } from './breakout-ssr';
 import { isInteractiveElement } from './click-to-edit';
 import { countNodes } from './count-nodes';
-import { TELEPOINTER_ID, rendererStyles } from './style';
+import { TELEPOINTER_ID } from './style';
 import { TruncatedWrapper } from './truncated-wrapper';
 import { ValidationContext } from './ValidationContext';
+import { RendererStyleContainer } from './RendererStyleContainer';
+import { getBaseFontSize } from './get-base-font-size';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "113.2.0";
+var packageVersion = "113.2.1";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',
@@ -953,23 +954,19 @@ var RendererWrapper = /*#__PURE__*/React.memo(function (props) {
     "data-appearance": appearance,
     shouldCheckExistingValue: isInsideOfInlineExtension
   }, jsx(BaseTheme, {
-    baseFontSize: appearance && appearance !== 'comment' ? akEditorFullPageDefaultFontSize : undefined
+    baseFontSize: getBaseFontSize(appearance)
   }, jsx(EditorMediaClientProvider, {
     ssr: ssr
-  }, jsx("div", {
-    ref: innerRef,
+  }, jsx(RendererStyleContainer, {
+    innerRef: innerRef,
     onClick: onClick,
-    onMouseDown: onMouseDown
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ,
-    css: rendererStyles({
-      appearance: appearance,
-      allowNestedHeaderLinks: allowNestedHeaderLinks,
-      allowColumnSorting: !!allowColumnSorting,
-      useBlockRenderForCodeBlock: useBlockRenderForCodeBlock,
-      allowAnnotations: props.allowAnnotations,
-      allowTableResizing: allowTableResizing
-    })
+    onMouseDown: onMouseDown,
+    appearance: appearance,
+    allowNestedHeaderLinks: allowNestedHeaderLinks,
+    allowColumnSorting: !!allowColumnSorting,
+    useBlockRenderForCodeBlock: useBlockRenderForCodeBlock,
+    allowAnnotations: props.allowAnnotations,
+    allowTableResizing: allowTableResizing
   }, children))));
 
   // We can only make the wrapper div query container when we have a known width.

package/dist/esm/ui/Renderer/style.js

@@ -118,7 +118,7 @@ var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
   if (allowNestedHeaderLinks) {
     headingsCss = "\n      /**\n       * When the sort button is enabled we want the heading's copy link button\n       * to reserve space so that it can prematurely wrap to avoid the button\n       * being displayed underneath the sort button (hidden or obscured).\n       *\n       * The two buttons fight each other since the sort button is displayed\n       * on hover of the <th /> and the copy link button is displayed on hover\n       * of the heading.\n       *\n       * Note that this can break the WYSIWYG experience in the case where\n       * a heading fills the width of the table cell and the only thing which\n       * wraps is the copy link button. This is hopefully a rare fringe case.\n       */\n      .".concat(HeadingAnchorWrapperClassName, " {\n        position: unset;\n      }\n      > {\n        h1, h2, h3, h4, h5, h6 {\n          margin-right: 30px;\n        }\n      }\n    ");
   }
-  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t\t.", " {\n\t\t\tpadding: 0;\n\n\t\t\t.", " {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tpadding: ", "px;\n\t\t\t\tborder-width: 1.5px;\n\t\t\t\tborder-style: solid;\n\t\t\t\tborder-color: transparent;\n\n\t\t\t\t> *:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + span + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + span + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t@supports selector(:focus-visible) {\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\toutline: unset;\n\t\t\t\t\t}\n\t\t\t\t\t&:focus-visible {\n\t\t\t\t\t\tborder-color: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\t"])), RendererCssClassName.SORTABLE_COLUMN_WRAPPER, RendererCssClassName.SORTABLE_COLUMN, tableCellPadding, "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, fg('platform_editor_nested_tables_renderer_styles') ? css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t\t\t\t\t\t// New styles\n\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\tmargin: 0;\n\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:hover:not(\n\t\t\t\t\t\t\t\t:has(\n\t\t\t\t\t\t\t\t\t\t.", "\n\t\t\t\t\t\t\t\t\t\t\t.", ":hover\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t"])), RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_WRAPPER, RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME) : css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\t\t\t\t\t\t// old styles\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t"])), RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME));
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t\t.", " {\n\t\t\tpadding: 0;\n\n\t\t\t.", " {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tpadding: ", "px;\n\t\t\t\tborder-width: 1.5px;\n\t\t\t\tborder-style: solid;\n\t\t\t\tborder-color: transparent;\n\n\t\t\t\t> *:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + span + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + span + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t@supports selector(:focus-visible) {\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\toutline: unset;\n\t\t\t\t\t}\n\t\t\t\t\t&:focus-visible {\n\t\t\t\t\t\tborder-color: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\t"])), RendererCssClassName.SORTABLE_COLUMN_WRAPPER, RendererCssClassName.SORTABLE_COLUMN, tableCellPadding, "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, fg('platform_editor_nested_tables_renderer_styles') ? css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t\t\t\t\t\t// New styles\n\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\tmargin: 0;\n\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:hover:not(\n\t\t\t\t\t\t\t\t:has(\n\t\t\t\t\t\t\t\t\t.", "\n\t\t\t\t\t\t\t\t\t\t.", ":hover\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t"])), RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_WRAPPER, RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME) : css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\t\t\t\t\t\t// old styles\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t"])), RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME));
 };
 var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
   var appearance = _ref3.appearance;

package/dist/types/ui/Renderer/RendererStyleContainer.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { jsx } from '@emotion/react';
+import { type RendererWrapperProps } from './index';
+type RendererStyleContainerProps = Pick<RendererWrapperProps, 'onClick' | 'onMouseDown' | 'appearance' | 'allowNestedHeaderLinks' | 'allowColumnSorting' | 'useBlockRenderForCodeBlock' | 'allowAnnotations' | 'allowTableResizing' | 'innerRef' | 'children'> & {
+    testId?: string;
+};
+export declare const RendererStyleContainer: (props: RendererStyleContainerProps) => jsx.JSX.Element;
+export {};

package/dist/types/ui/Renderer/get-base-font-size.d.ts

@@ -0,0 +1,2 @@
+import type { RendererAppearance } from './types';
+export declare const getBaseFontSize: (appearance: RendererAppearance) => 16 | 14;

package/dist/types/ui/Renderer/index.d.ts

@@ -4,7 +4,9 @@
  */
 import React, { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
+import type { MediaSSR } from '../../';
 import type { RendererProps } from '../renderer-props';
+import type { RendererAppearance } from './types';
 export declare const NORMAL_SEVERITY_THRESHOLD = 2000;
 export declare const DEGRADED_SEVERITY_THRESHOLD = 3000;
 /**
@@ -44,5 +46,26 @@ export declare class __RendererClassComponent extends PureComponent<RendererProp
 }
 export declare function Renderer(props: RendererProps): jsx.JSX.Element;
 export declare const RendererWithAnalytics: React.MemoExoticComponent<(props: RendererProps) => jsx.JSX.Element>;
+export type RendererWrapperProps = {
+    allowAnnotations?: boolean;
+    appearance: RendererAppearance;
+    innerRef?: React.RefObject<HTMLDivElement>;
+    allowColumnSorting?: boolean;
+    allowCopyToClipboard?: boolean;
+    allowWrapCodeBlock?: boolean;
+    allowPlaceholderText?: boolean;
+    allowCustomPanels?: boolean;
+    addTelepointer?: boolean;
+    allowNestedHeaderLinks: boolean;
+    useBlockRenderForCodeBlock: boolean;
+    onClick?: (event: React.MouseEvent) => void;
+    onMouseDown?: (event: React.MouseEvent) => void;
+    ssr?: MediaSSR;
+    isInsideOfInlineExtension?: boolean;
+    allowTableResizing?: boolean;
+    isTopLevelRenderer?: boolean;
+} & {
+    children?: React.ReactNode;
+};
 declare const RendererWithAnnotationSelection: (props: RendererProps) => jsx.JSX.Element;
 export default RendererWithAnnotationSelection;

package/dist/types-ts4.5/ui/Renderer/RendererStyleContainer.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { jsx } from '@emotion/react';
+import { type RendererWrapperProps } from './index';
+type RendererStyleContainerProps = Pick<RendererWrapperProps, 'onClick' | 'onMouseDown' | 'appearance' | 'allowNestedHeaderLinks' | 'allowColumnSorting' | 'useBlockRenderForCodeBlock' | 'allowAnnotations' | 'allowTableResizing' | 'innerRef' | 'children'> & {
+    testId?: string;
+};
+export declare const RendererStyleContainer: (props: RendererStyleContainerProps) => jsx.JSX.Element;
+export {};

package/dist/types-ts4.5/ui/Renderer/get-base-font-size.d.ts

@@ -0,0 +1,2 @@
+import type { RendererAppearance } from './types';
+export declare const getBaseFontSize: (appearance: RendererAppearance) => 16 | 14;

package/dist/types-ts4.5/ui/Renderer/index.d.ts

@@ -4,7 +4,9 @@
  */
 import React, { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
+import type { MediaSSR } from '../../';
 import type { RendererProps } from '../renderer-props';
+import type { RendererAppearance } from './types';
 export declare const NORMAL_SEVERITY_THRESHOLD = 2000;
 export declare const DEGRADED_SEVERITY_THRESHOLD = 3000;
 /**
@@ -44,5 +46,26 @@ export declare class __RendererClassComponent extends PureComponent<RendererProp
 }
 export declare function Renderer(props: RendererProps): jsx.JSX.Element;
 export declare const RendererWithAnalytics: React.MemoExoticComponent<(props: RendererProps) => jsx.JSX.Element>;
+export type RendererWrapperProps = {
+    allowAnnotations?: boolean;
+    appearance: RendererAppearance;
+    innerRef?: React.RefObject<HTMLDivElement>;
+    allowColumnSorting?: boolean;
+    allowCopyToClipboard?: boolean;
+    allowWrapCodeBlock?: boolean;
+    allowPlaceholderText?: boolean;
+    allowCustomPanels?: boolean;
+    addTelepointer?: boolean;
+    allowNestedHeaderLinks: boolean;
+    useBlockRenderForCodeBlock: boolean;
+    onClick?: (event: React.MouseEvent) => void;
+    onMouseDown?: (event: React.MouseEvent) => void;
+    ssr?: MediaSSR;
+    isInsideOfInlineExtension?: boolean;
+    allowTableResizing?: boolean;
+    isTopLevelRenderer?: boolean;
+} & {
+    children?: React.ReactNode;
+};
 declare const RendererWithAnnotationSelection: (props: RendererProps) => jsx.JSX.Element;
 export default RendererWithAnnotationSelection;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "113.2.0",
+	"version": "113.2.1",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -33,7 +33,7 @@
 		"@atlaskit/code": "^16.0.0",
 		"@atlaskit/editor-common": "^101.1.0",
 		"@atlaskit/editor-json-transformer": "^8.24.0",
-		"@atlaskit/editor-palette": "2.0.0",
+		"@atlaskit/editor-palette": "^2.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/emoji": "^68.0.0",
@@ -72,8 +72,8 @@
 		"react-dom": "^18.2.0"
 	},
 	"devDependencies": {
-		"@af/integration-testing": "*",
-		"@af/visual-regression": "*",
+		"@af/integration-testing": "^0.5.0",
+		"@af/visual-regression": "^1.3.0",
 		"@atlaskit/analytics-gas-types": "^5.1.0",
 		"@atlaskit/css-reset": "^7.0.0",
 		"@atlaskit/link-provider": "^2.0.0",
@@ -85,8 +85,8 @@
 		"@atlaskit/mention": "^24.1.0",
 		"@atlaskit/navigation-next": "patch:@atlaskit/navigation-next@npm%3A9.0.17#~/.yarn/patches/@atlaskit-navigation-next-npm-9.0.17-d1445f2f74.patch",
 		"@atlaskit/util-data-test": "^18.0.0",
-		"@atlaskit/visual-regression": "*",
-		"@atlassian/feature-flags-test-utils": "*",
+		"@atlaskit/visual-regression": "^0.10.0",
+		"@atlassian/feature-flags-test-utils": "^0.3.0",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/react-hooks": "^8.0.1",
 		"@testing-library/user-event": "^14.4.3",
@@ -118,6 +118,15 @@
 		}
 	},
 	"platform-feature-flags": {
+		"platform_editor_heading_margin_fix": {
+			"type": "boolean"
+		},
+		"platform_editor_typography_ugc": {
+			"type": "boolean"
+		},
+		"platform_editor_emotion_refactor_renderer": {
+			"type": "boolean"
+		},
 		"platform_editor_update_panel_icon_aria_label": {
 			"type": "boolean"
 		},