@atlaskit/renderer 108.2.1 → 108.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/dist/cjs/react/nodes/table/colgroup.js +1 -3
- package/dist/cjs/ui/Renderer/index.js +1 -1
- package/dist/cjs/ui/Renderer/style.js +2 -2
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/react/nodes/table/colgroup.js +2 -4
- package/dist/es2019/ui/Renderer/index.js +1 -1
- package/dist/es2019/ui/Renderer/style.js +2 -2
- package/dist/es2019/version.json +1 -1
- package/dist/esm/react/nodes/table/colgroup.js +2 -4
- package/dist/esm/ui/Renderer/index.js +1 -1
- package/dist/esm/ui/Renderer/style.js +2 -2
- package/dist/esm/version.json +1 -1
- package/package.json +9 -9
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/renderer
|
|
2
2
|
|
|
3
|
+
## 108.2.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 108.2.2
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`fef7f2e3676`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fef7f2e3676) - [ux] ED-17462 fix table column shriking in renderer
|
|
14
|
+
|
|
3
15
|
## 108.2.1
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -41,9 +41,7 @@ var fixColumnWidth = function fixColumnWidth(columnWidth, _tableWidth, _layoutWi
|
|
|
41
41
|
if (zeroWidthColumnsCount === 0 && scaleDownPercent) {
|
|
42
42
|
return Math.floor((1 - scaleDownPercent) * columnWidth);
|
|
43
43
|
}
|
|
44
|
-
return Math.max(
|
|
45
|
-
// We need to take tableCellBorderWidth, to avoid unneccesary overflow.
|
|
46
|
-
columnWidth - _styles.tableCellBorderWidth, zeroWidthColumnsCount ? _editorSharedStyles.akEditorTableLegacyCellMinWidth : _styles.tableCellMinWidth);
|
|
44
|
+
return Math.max(columnWidth, zeroWidthColumnsCount ? _editorSharedStyles.akEditorTableLegacyCellMinWidth : _styles.tableCellMinWidth);
|
|
47
45
|
};
|
|
48
46
|
var calcScalePercent = function calcScalePercent(_ref) {
|
|
49
47
|
var renderWidth = _ref.renderWidth,
|
|
@@ -55,7 +55,7 @@ exports.NORMAL_SEVERITY_THRESHOLD = NORMAL_SEVERITY_THRESHOLD;
|
|
|
55
55
|
var DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
56
56
|
exports.DEGRADED_SEVERITY_THRESHOLD = DEGRADED_SEVERITY_THRESHOLD;
|
|
57
57
|
var packageName = "@atlaskit/renderer";
|
|
58
|
-
var packageVersion = "108.2.
|
|
58
|
+
var packageVersion = "108.2.3";
|
|
59
59
|
var Renderer = /*#__PURE__*/function (_PureComponent) {
|
|
60
60
|
(0, _inherits2.default)(Renderer, _PureComponent);
|
|
61
61
|
var _super = _createSuper(Renderer);
|
|
@@ -69,7 +69,7 @@ var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
|
|
|
69
69
|
if (allowNestedHeaderLinks) {
|
|
70
70
|
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(_headingAnchor.HeadingAnchorWrapperClassName, " {\n position: unset;\n }\n > {\n h1, h2, h3, h4, h5, h6 {\n margin-right: 30px;\n }\n }\n ");
|
|
71
71
|
}
|
|
72
|
-
return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n padding: 0;\n\n .", " {\n width: 100%;\n height: 100%;\n padding: ", "px;\n border-width:
|
|
72
|
+
return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n padding: 0;\n\n .", " {\n width: 100%;\n height: 100%;\n padding: ", "px;\n border-width: 0px;\n border-style: solid;\n border-color: transparent;\n\n > *:first-child {\n margin-top: 0;\n }\n\n > .ProseMirror-gapcursor:first-child + *,\n > style:first-child + .ProseMirror-gapcursor + * {\n margin-top: 0;\n }\n\n > .ProseMirror-gapcursor:first-child + span + *,\n > style:first-child + .ProseMirror-gapcursor + span + * {\n margin-top: 0;\n }\n\n @supports selector(:focus-visible) {\n &:focus {\n outline: unset;\n }\n &:focus-visible {\n border-color: ", ";\n }\n }\n\n ", "\n }\n\n .", " {\n margin: 0;\n .", " {\n opacity: 1;\n transition: opacity 0.2s ease-in-out;\n }\n }\n\n .", " {\n .", " {\n opacity: 0;\n &:focus {\n opacity: 1;\n }\n }\n }\n\n &:hover {\n .", " {\n .", " {\n opacity: 1;\n }\n }\n }\n }\n "])), _consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN, _styles.tableCellPadding, "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON);
|
|
73
73
|
};
|
|
74
74
|
var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
|
|
75
75
|
var appearance = _ref3.appearance;
|
|
@@ -99,7 +99,7 @@ var rendererStyles = function rendererStyles(wrapperProps) {
|
|
|
99
99
|
theme: theme
|
|
100
100
|
};
|
|
101
101
|
var useBlockRenderForCodeBlock = wrapperProps.useBlockRenderForCodeBlock;
|
|
102
|
-
return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n font-size: ", "px;\n line-height: 1.5rem;\n color: ", ";\n\n .", "::after {\n // we add a clearfix after ak-renderer-document in order to\n // contain internal floats (such as media images that are \"wrap-left\")\n // to just the renderer (and not spill outside of it)\n content: '';\n visibility: hidden;\n display: block;\n height: 0;\n clear: both;\n }\n\n ", "\n ", "\n\n & h1 {\n ", "\n }\n\n & h2 {\n ", "\n }\n\n & h3 {\n ", "\n }\n\n & h4 {\n ", "\n }\n\n & h5 {\n ", "\n }\n\n & h6 {\n ", "\n }\n\n & span.akActionMark {\n color: ", ";\n text-decoration: none;\n\n &:hover {\n color: ", ";\n text-decoration: underline;\n }\n\n &:active {\n color: ", ";\n }\n }\n\n & span.akActionMark {\n cursor: pointer;\n }\n\n & span[data-placeholder] {\n color: ", ";\n }\n\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", "\n\n & .UnknownBlock {\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n\n & span.date-node {\n background: ", ";\n border-radius: ", ";\n color: ", ";\n padding: 2px 4px;\n margin: 0 1px;\n transition: background 0.3s;\n }\n\n & span.date-node-highlighted {\n background: ", ";\n color: ", ";\n }\n\n & .renderer-image {\n max-width: 100%;\n display: block;\n margin: ", " 0;\n }\n\n .", ".rich-media-wrapped\n + .", ":not(.rich-media-wrapped) {\n clear: both;\n }\n\n & .code-block,\n & blockquote,\n & hr,\n & > div > div:not(.rich-media-wrapped),\n .", ".rich-media-wrapped\n + .rich-media-wrapped\n + *:not(.rich-media-wrapped),\n .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n .", ".image-align-start,\n .", ".image-center,\n .", ".image-align-end {\n clear: both;\n }\n\n & .rich-media-wrapped {\n & + h1,\n & + h2,\n & + h3,\n & + h4,\n & + h5,\n & + h6 {\n margin-top: 8px;\n }\n }\n\n ", "\n /* plugin styles */\n ", " &\n div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n margin-left: 0;\n margin-right: 0;\n }\n\n /* Breakout for tables and extensions */\n .", " > {\n ", "\n\n * .", " {\n overflow-x: auto;\n }\n\n & .", ":first-child {\n margin-top: 0;\n }\n }\n\n .", " {\n .", " {\n margin-top: ", ";\n }\n\n .", " {\n margin-left: 50%;\n transform: translateX(-50%);\n }\n\n .", " {\n overflow-x: auto;\n }\n\n .", "\n .", " {\n display: flex;\n }\n }\n\n ", "\n\n .", " .", " {\n z-index: 0;\n transition: all 0.1s linear;\n display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n /** Shadow overrides */\n &.", "::after,\n &.", "::before {\n top: ", "px;\n height: calc(100% - ", "px);\n z-index: ", ";\n }\n\n &\n .", ",\n &\n .", " {\n height: calc(100% - ", "px);\n }\n\n /**\n * A hack for making all the <th /> heights equal in case some have shorter\n * content than others.\n *\n * This is done to make sort buttons fill entire <th />.\n */\n table {\n height: 1px; /* will be ignored */\n ", ";\n margin-left: 0;\n margin-right:
|
|
102
|
+
return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n font-size: ", "px;\n line-height: 1.5rem;\n color: ", ";\n\n .", "::after {\n // we add a clearfix after ak-renderer-document in order to\n // contain internal floats (such as media images that are \"wrap-left\")\n // to just the renderer (and not spill outside of it)\n content: '';\n visibility: hidden;\n display: block;\n height: 0;\n clear: both;\n }\n\n ", "\n ", "\n\n & h1 {\n ", "\n }\n\n & h2 {\n ", "\n }\n\n & h3 {\n ", "\n }\n\n & h4 {\n ", "\n }\n\n & h5 {\n ", "\n }\n\n & h6 {\n ", "\n }\n\n & span.akActionMark {\n color: ", ";\n text-decoration: none;\n\n &:hover {\n color: ", ";\n text-decoration: underline;\n }\n\n &:active {\n color: ", ";\n }\n }\n\n & span.akActionMark {\n cursor: pointer;\n }\n\n & span[data-placeholder] {\n color: ", ";\n }\n\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", "\n\n & .UnknownBlock {\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n\n & span.date-node {\n background: ", ";\n border-radius: ", ";\n color: ", ";\n padding: 2px 4px;\n margin: 0 1px;\n transition: background 0.3s;\n }\n\n & span.date-node-highlighted {\n background: ", ";\n color: ", ";\n }\n\n & .renderer-image {\n max-width: 100%;\n display: block;\n margin: ", " 0;\n }\n\n .", ".rich-media-wrapped\n + .", ":not(.rich-media-wrapped) {\n clear: both;\n }\n\n & .code-block,\n & blockquote,\n & hr,\n & > div > div:not(.rich-media-wrapped),\n .", ".rich-media-wrapped\n + .rich-media-wrapped\n + *:not(.rich-media-wrapped),\n .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n .", ".image-align-start,\n .", ".image-center,\n .", ".image-align-end {\n clear: both;\n }\n\n & .rich-media-wrapped {\n & + h1,\n & + h2,\n & + h3,\n & + h4,\n & + h5,\n & + h6 {\n margin-top: 8px;\n }\n }\n\n ", "\n /* plugin styles */\n ", " &\n div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n margin-left: 0;\n margin-right: 0;\n }\n\n /* Breakout for tables and extensions */\n .", " > {\n ", "\n\n * .", " {\n overflow-x: auto;\n }\n\n & .", ":first-child {\n margin-top: 0;\n }\n }\n\n .", " {\n .", " {\n margin-top: ", ";\n }\n\n .", " {\n margin-left: 50%;\n transform: translateX(-50%);\n }\n\n .", " {\n overflow-x: auto;\n }\n\n .", "\n .", " {\n display: flex;\n }\n }\n\n ", "\n\n .", " .", " {\n z-index: 0;\n transition: all 0.1s linear;\n display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n /** Shadow overrides */\n &.", "::after,\n &.", "::before {\n top: ", "px;\n height: calc(100% - ", "px);\n z-index: ", ";\n }\n\n &\n .", ",\n &\n .", " {\n height: calc(100% - ", "px);\n }\n\n /**\n * A hack for making all the <th /> heights equal in case some have shorter\n * content than others.\n *\n * This is done to make sort buttons fill entire <th />.\n */\n table {\n height: 1px; /* will be ignored */\n ", ";\n margin-left: 0;\n margin-right: -1px; // match editor's margin right\n }\n\n table tr:first-of-type {\n height: 100%;\n\n td,\n th {\n position: relative;\n }\n }\n\n table[data-number-column='true'] {\n .", " {\n background-color: ", ";\n border-right: 1px solid\n ", ";\n width: ", "px;\n text-align: center;\n color: ", ";\n font-size: ", ";\n }\n\n .fixed .", " {\n border-right: 0px none;\n }\n }\n }\n\n tr[data-header-row].fixed {\n position: fixed !important;\n display: flex;\n overflow: hidden;\n z-index: ", ";\n\n border-right: 1px solid\n ", ";\n border-bottom: 1px solid\n ", ";\n\n /* this is to compensate for the table border */\n transform: translateX(-1px);\n }\n\n .sticky > th {\n z-index: ", ";\n position: sticky !important;\n top: 0;\n }\n\n /* Make the number column header sticky */\n .sticky > td {\n position: sticky !important;\n top: 0;\n }\n\n /* add border for position: sticky\n and work around background-clip: padding-box\n bug for FF causing box-shadow bug in Chrome */\n .sticky th,\n .sticky td {\n box-shadow: 0px 1px\n ", ",\n 0px -0.5px ", ",\n inset -1px 0px ", ",\n 0px -1px ", ";\n }\n\n /* this will remove jumpiness caused in Chrome for sticky headers */\n .fixed + tr {\n min-height: 0px;\n }\n\n /*\n * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n * See ED-4159.\n */\n & .code-block {\n max-width: 100%;\n /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n display: block;\n /* stylelint-enable */\n\n position: relative;\n border-radius: ", ";\n\n /*\n * The overall renderer has word-wrap: break; which causes issues with\n * code block line numbers in Safari / iOS.\n */\n word-wrap: normal;\n }\n\n & .MediaGroup,\n & .code-block {\n margin-top: ", ";\n\n &:first-child {\n margin-top: 0;\n }\n }\n\n ", "\n\n ", "\n\n ", ";\n & [data-layout-section] {\n margin-top: ", ";\n & > div + div {\n margin-left: ", ";\n }\n\n @media screen and (max-width: ", "px) {\n & > div + div {\n margin-left: 0;\n }\n }\n\n & .MediaGroup,\n & .code-block {\n margin-top: ", ";\n\n &:first-child {\n margin-top: 0;\n }\n }\n }\n\n & li {\n > .code-block {\n margin: ", " 0 0 0;\n }\n > .code-block:first-child {\n margin-top: 0;\n }\n\n > div:last-of-type.code-block {\n margin-bottom: ", ";\n }\n }\n\n & :not([data-node-type='decisionList']) > li {\n ", "\n }\n "])), (0, _editorSharedStyles.editorFontSize)(themeProps), (0, _components.themed)({
|
|
103
103
|
light: "var(--ds-text, ".concat(colors.N800, ")"),
|
|
104
104
|
dark: "var(--ds-text, #B8C7E0)"
|
|
105
105
|
})(themeProps), _consts.RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), (0, _components.themed)({
|
package/dist/cjs/version.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
|
|
3
3
|
import { akEditorTableNumberColumnWidth, akEditorWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorTableLegacyCellMinWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
|
|
4
4
|
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
5
5
|
import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
|
|
@@ -32,9 +32,7 @@ const fixColumnWidth = (columnWidth, _tableWidth, _layoutWidth, zeroWidthColumns
|
|
|
32
32
|
if (zeroWidthColumnsCount === 0 && scaleDownPercent) {
|
|
33
33
|
return Math.floor((1 - scaleDownPercent) * columnWidth);
|
|
34
34
|
}
|
|
35
|
-
return Math.max(
|
|
36
|
-
// We need to take tableCellBorderWidth, to avoid unneccesary overflow.
|
|
37
|
-
columnWidth - tableCellBorderWidth, zeroWidthColumnsCount ? akEditorTableLegacyCellMinWidth : tableCellMinWidth);
|
|
35
|
+
return Math.max(columnWidth, zeroWidthColumnsCount ? akEditorTableLegacyCellMinWidth : tableCellMinWidth);
|
|
38
36
|
};
|
|
39
37
|
export const calcScalePercent = ({
|
|
40
38
|
renderWidth,
|
|
@@ -35,7 +35,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
|
|
|
35
35
|
export const NORMAL_SEVERITY_THRESHOLD = 2000;
|
|
36
36
|
export const DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
37
37
|
const packageName = "@atlaskit/renderer";
|
|
38
|
-
const packageVersion = "108.2.
|
|
38
|
+
const packageVersion = "108.2.3";
|
|
39
39
|
export class Renderer extends PureComponent {
|
|
40
40
|
constructor(props) {
|
|
41
41
|
super(props);
|
|
@@ -186,7 +186,7 @@ const tableSortableColumnStyle = ({
|
|
|
186
186
|
width: 100%;
|
|
187
187
|
height: 100%;
|
|
188
188
|
padding: ${tableCellPadding}px;
|
|
189
|
-
border-width:
|
|
189
|
+
border-width: 0px;
|
|
190
190
|
border-style: solid;
|
|
191
191
|
border-color: transparent;
|
|
192
192
|
|
|
@@ -534,7 +534,7 @@ export const rendererStyles = wrapperProps => theme => {
|
|
|
534
534
|
height: 1px; /* will be ignored */
|
|
535
535
|
${tableSortableColumnStyle(wrapperProps)};
|
|
536
536
|
margin-left: 0;
|
|
537
|
-
margin-right:
|
|
537
|
+
margin-right: -1px; // match editor's margin right
|
|
538
538
|
}
|
|
539
539
|
|
|
540
540
|
table tr:first-of-type {
|
package/dist/es2019/version.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
|
|
3
3
|
import { akEditorTableNumberColumnWidth, akEditorWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorTableLegacyCellMinWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
|
|
4
4
|
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
5
5
|
import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
|
|
@@ -34,9 +34,7 @@ var fixColumnWidth = function fixColumnWidth(columnWidth, _tableWidth, _layoutWi
|
|
|
34
34
|
if (zeroWidthColumnsCount === 0 && scaleDownPercent) {
|
|
35
35
|
return Math.floor((1 - scaleDownPercent) * columnWidth);
|
|
36
36
|
}
|
|
37
|
-
return Math.max(
|
|
38
|
-
// We need to take tableCellBorderWidth, to avoid unneccesary overflow.
|
|
39
|
-
columnWidth - tableCellBorderWidth, zeroWidthColumnsCount ? akEditorTableLegacyCellMinWidth : tableCellMinWidth);
|
|
37
|
+
return Math.max(columnWidth, zeroWidthColumnsCount ? akEditorTableLegacyCellMinWidth : tableCellMinWidth);
|
|
40
38
|
};
|
|
41
39
|
export var calcScalePercent = function calcScalePercent(_ref) {
|
|
42
40
|
var renderWidth = _ref.renderWidth,
|
|
@@ -45,7 +45,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
|
|
|
45
45
|
export var NORMAL_SEVERITY_THRESHOLD = 2000;
|
|
46
46
|
export var DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
47
47
|
var packageName = "@atlaskit/renderer";
|
|
48
|
-
var packageVersion = "108.2.
|
|
48
|
+
var packageVersion = "108.2.3";
|
|
49
49
|
export var Renderer = /*#__PURE__*/function (_PureComponent) {
|
|
50
50
|
_inherits(Renderer, _PureComponent);
|
|
51
51
|
var _super = _createSuper(Renderer);
|
|
@@ -58,7 +58,7 @@ var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
|
|
|
58
58
|
if (allowNestedHeaderLinks) {
|
|
59
59
|
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 ");
|
|
60
60
|
}
|
|
61
|
-
return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n .", " {\n padding: 0;\n\n .", " {\n width: 100%;\n height: 100%;\n padding: ", "px;\n border-width:
|
|
61
|
+
return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n .", " {\n padding: 0;\n\n .", " {\n width: 100%;\n height: 100%;\n padding: ", "px;\n border-width: 0px;\n border-style: solid;\n border-color: transparent;\n\n > *:first-child {\n margin-top: 0;\n }\n\n > .ProseMirror-gapcursor:first-child + *,\n > style:first-child + .ProseMirror-gapcursor + * {\n margin-top: 0;\n }\n\n > .ProseMirror-gapcursor:first-child + span + *,\n > style:first-child + .ProseMirror-gapcursor + span + * {\n margin-top: 0;\n }\n\n @supports selector(:focus-visible) {\n &:focus {\n outline: unset;\n }\n &:focus-visible {\n border-color: ", ";\n }\n }\n\n ", "\n }\n\n .", " {\n margin: 0;\n .", " {\n opacity: 1;\n transition: opacity 0.2s ease-in-out;\n }\n }\n\n .", " {\n .", " {\n opacity: 0;\n &:focus {\n opacity: 1;\n }\n }\n }\n\n &:hover {\n .", " {\n .", " {\n opacity: 1;\n }\n }\n }\n }\n "])), RendererCssClassName.SORTABLE_COLUMN_WRAPPER, RendererCssClassName.SORTABLE_COLUMN, tableCellPadding, "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, RendererCssClassName.SORTABLE_COLUMN_ICON, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, RendererCssClassName.SORTABLE_COLUMN_ICON, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, RendererCssClassName.SORTABLE_COLUMN_ICON);
|
|
62
62
|
};
|
|
63
63
|
var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
|
|
64
64
|
var appearance = _ref3.appearance;
|
|
@@ -88,7 +88,7 @@ export var rendererStyles = function rendererStyles(wrapperProps) {
|
|
|
88
88
|
theme: theme
|
|
89
89
|
};
|
|
90
90
|
var useBlockRenderForCodeBlock = wrapperProps.useBlockRenderForCodeBlock;
|
|
91
|
-
return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n font-size: ", "px;\n line-height: 1.5rem;\n color: ", ";\n\n .", "::after {\n // we add a clearfix after ak-renderer-document in order to\n // contain internal floats (such as media images that are \"wrap-left\")\n // to just the renderer (and not spill outside of it)\n content: '';\n visibility: hidden;\n display: block;\n height: 0;\n clear: both;\n }\n\n ", "\n ", "\n\n & h1 {\n ", "\n }\n\n & h2 {\n ", "\n }\n\n & h3 {\n ", "\n }\n\n & h4 {\n ", "\n }\n\n & h5 {\n ", "\n }\n\n & h6 {\n ", "\n }\n\n & span.akActionMark {\n color: ", ";\n text-decoration: none;\n\n &:hover {\n color: ", ";\n text-decoration: underline;\n }\n\n &:active {\n color: ", ";\n }\n }\n\n & span.akActionMark {\n cursor: pointer;\n }\n\n & span[data-placeholder] {\n color: ", ";\n }\n\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", "\n\n & .UnknownBlock {\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n\n & span.date-node {\n background: ", ";\n border-radius: ", ";\n color: ", ";\n padding: 2px 4px;\n margin: 0 1px;\n transition: background 0.3s;\n }\n\n & span.date-node-highlighted {\n background: ", ";\n color: ", ";\n }\n\n & .renderer-image {\n max-width: 100%;\n display: block;\n margin: ", " 0;\n }\n\n .", ".rich-media-wrapped\n + .", ":not(.rich-media-wrapped) {\n clear: both;\n }\n\n & .code-block,\n & blockquote,\n & hr,\n & > div > div:not(.rich-media-wrapped),\n .", ".rich-media-wrapped\n + .rich-media-wrapped\n + *:not(.rich-media-wrapped),\n .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n .", ".image-align-start,\n .", ".image-center,\n .", ".image-align-end {\n clear: both;\n }\n\n & .rich-media-wrapped {\n & + h1,\n & + h2,\n & + h3,\n & + h4,\n & + h5,\n & + h6 {\n margin-top: 8px;\n }\n }\n\n ", "\n /* plugin styles */\n ", " &\n div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n margin-left: 0;\n margin-right: 0;\n }\n\n /* Breakout for tables and extensions */\n .", " > {\n ", "\n\n * .", " {\n overflow-x: auto;\n }\n\n & .", ":first-child {\n margin-top: 0;\n }\n }\n\n .", " {\n .", " {\n margin-top: ", ";\n }\n\n .", " {\n margin-left: 50%;\n transform: translateX(-50%);\n }\n\n .", " {\n overflow-x: auto;\n }\n\n .", "\n .", " {\n display: flex;\n }\n }\n\n ", "\n\n .", " .", " {\n z-index: 0;\n transition: all 0.1s linear;\n display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n /** Shadow overrides */\n &.", "::after,\n &.", "::before {\n top: ", "px;\n height: calc(100% - ", "px);\n z-index: ", ";\n }\n\n &\n .", ",\n &\n .", " {\n height: calc(100% - ", "px);\n }\n\n /**\n * A hack for making all the <th /> heights equal in case some have shorter\n * content than others.\n *\n * This is done to make sort buttons fill entire <th />.\n */\n table {\n height: 1px; /* will be ignored */\n ", ";\n margin-left: 0;\n margin-right:
|
|
91
|
+
return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n font-size: ", "px;\n line-height: 1.5rem;\n color: ", ";\n\n .", "::after {\n // we add a clearfix after ak-renderer-document in order to\n // contain internal floats (such as media images that are \"wrap-left\")\n // to just the renderer (and not spill outside of it)\n content: '';\n visibility: hidden;\n display: block;\n height: 0;\n clear: both;\n }\n\n ", "\n ", "\n\n & h1 {\n ", "\n }\n\n & h2 {\n ", "\n }\n\n & h3 {\n ", "\n }\n\n & h4 {\n ", "\n }\n\n & h5 {\n ", "\n }\n\n & h6 {\n ", "\n }\n\n & span.akActionMark {\n color: ", ";\n text-decoration: none;\n\n &:hover {\n color: ", ";\n text-decoration: underline;\n }\n\n &:active {\n color: ", ";\n }\n }\n\n & span.akActionMark {\n cursor: pointer;\n }\n\n & span[data-placeholder] {\n color: ", ";\n }\n\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", "\n\n & .UnknownBlock {\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n\n & span.date-node {\n background: ", ";\n border-radius: ", ";\n color: ", ";\n padding: 2px 4px;\n margin: 0 1px;\n transition: background 0.3s;\n }\n\n & span.date-node-highlighted {\n background: ", ";\n color: ", ";\n }\n\n & .renderer-image {\n max-width: 100%;\n display: block;\n margin: ", " 0;\n }\n\n .", ".rich-media-wrapped\n + .", ":not(.rich-media-wrapped) {\n clear: both;\n }\n\n & .code-block,\n & blockquote,\n & hr,\n & > div > div:not(.rich-media-wrapped),\n .", ".rich-media-wrapped\n + .rich-media-wrapped\n + *:not(.rich-media-wrapped),\n .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n .", ".image-align-start,\n .", ".image-center,\n .", ".image-align-end {\n clear: both;\n }\n\n & .rich-media-wrapped {\n & + h1,\n & + h2,\n & + h3,\n & + h4,\n & + h5,\n & + h6 {\n margin-top: 8px;\n }\n }\n\n ", "\n /* plugin styles */\n ", " &\n div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n margin-left: 0;\n margin-right: 0;\n }\n\n /* Breakout for tables and extensions */\n .", " > {\n ", "\n\n * .", " {\n overflow-x: auto;\n }\n\n & .", ":first-child {\n margin-top: 0;\n }\n }\n\n .", " {\n .", " {\n margin-top: ", ";\n }\n\n .", " {\n margin-left: 50%;\n transform: translateX(-50%);\n }\n\n .", " {\n overflow-x: auto;\n }\n\n .", "\n .", " {\n display: flex;\n }\n }\n\n ", "\n\n .", " .", " {\n z-index: 0;\n transition: all 0.1s linear;\n display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n /** Shadow overrides */\n &.", "::after,\n &.", "::before {\n top: ", "px;\n height: calc(100% - ", "px);\n z-index: ", ";\n }\n\n &\n .", ",\n &\n .", " {\n height: calc(100% - ", "px);\n }\n\n /**\n * A hack for making all the <th /> heights equal in case some have shorter\n * content than others.\n *\n * This is done to make sort buttons fill entire <th />.\n */\n table {\n height: 1px; /* will be ignored */\n ", ";\n margin-left: 0;\n margin-right: -1px; // match editor's margin right\n }\n\n table tr:first-of-type {\n height: 100%;\n\n td,\n th {\n position: relative;\n }\n }\n\n table[data-number-column='true'] {\n .", " {\n background-color: ", ";\n border-right: 1px solid\n ", ";\n width: ", "px;\n text-align: center;\n color: ", ";\n font-size: ", ";\n }\n\n .fixed .", " {\n border-right: 0px none;\n }\n }\n }\n\n tr[data-header-row].fixed {\n position: fixed !important;\n display: flex;\n overflow: hidden;\n z-index: ", ";\n\n border-right: 1px solid\n ", ";\n border-bottom: 1px solid\n ", ";\n\n /* this is to compensate for the table border */\n transform: translateX(-1px);\n }\n\n .sticky > th {\n z-index: ", ";\n position: sticky !important;\n top: 0;\n }\n\n /* Make the number column header sticky */\n .sticky > td {\n position: sticky !important;\n top: 0;\n }\n\n /* add border for position: sticky\n and work around background-clip: padding-box\n bug for FF causing box-shadow bug in Chrome */\n .sticky th,\n .sticky td {\n box-shadow: 0px 1px\n ", ",\n 0px -0.5px ", ",\n inset -1px 0px ", ",\n 0px -1px ", ";\n }\n\n /* this will remove jumpiness caused in Chrome for sticky headers */\n .fixed + tr {\n min-height: 0px;\n }\n\n /*\n * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n * See ED-4159.\n */\n & .code-block {\n max-width: 100%;\n /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n display: block;\n /* stylelint-enable */\n\n position: relative;\n border-radius: ", ";\n\n /*\n * The overall renderer has word-wrap: break; which causes issues with\n * code block line numbers in Safari / iOS.\n */\n word-wrap: normal;\n }\n\n & .MediaGroup,\n & .code-block {\n margin-top: ", ";\n\n &:first-child {\n margin-top: 0;\n }\n }\n\n ", "\n\n ", "\n\n ", ";\n & [data-layout-section] {\n margin-top: ", ";\n & > div + div {\n margin-left: ", ";\n }\n\n @media screen and (max-width: ", "px) {\n & > div + div {\n margin-left: 0;\n }\n }\n\n & .MediaGroup,\n & .code-block {\n margin-top: ", ";\n\n &:first-child {\n margin-top: 0;\n }\n }\n }\n\n & li {\n > .code-block {\n margin: ", " 0 0 0;\n }\n > .code-block:first-child {\n margin-top: 0;\n }\n\n > div:last-of-type.code-block {\n margin-bottom: ", ";\n }\n }\n\n & :not([data-node-type='decisionList']) > li {\n ", "\n }\n "])), editorFontSize(themeProps), themed({
|
|
92
92
|
light: "var(--ds-text, ".concat(colors.N800, ")"),
|
|
93
93
|
dark: "var(--ds-text, #B8C7E0)"
|
|
94
94
|
})(themeProps), RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), themed({
|
package/dist/esm/version.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/renderer",
|
|
3
|
-
"version": "108.2.
|
|
3
|
+
"version": "108.2.3",
|
|
4
4
|
"description": "Renderer component",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -37,11 +37,11 @@
|
|
|
37
37
|
"@atlaskit/analytics-listeners": "^8.7.0",
|
|
38
38
|
"@atlaskit/analytics-namespaced-context": "^6.7.0",
|
|
39
39
|
"@atlaskit/analytics-next": "^9.1.0",
|
|
40
|
-
"@atlaskit/button": "^16.
|
|
40
|
+
"@atlaskit/button": "^16.8.0",
|
|
41
41
|
"@atlaskit/code": "^14.6.0",
|
|
42
|
-
"@atlaskit/editor-common": "^74.
|
|
42
|
+
"@atlaskit/editor-common": "^74.9.0",
|
|
43
43
|
"@atlaskit/editor-json-transformer": "^8.9.0",
|
|
44
|
-
"@atlaskit/editor-palette": "1.5.
|
|
44
|
+
"@atlaskit/editor-palette": "1.5.1",
|
|
45
45
|
"@atlaskit/editor-shared-styles": "^2.4.0",
|
|
46
46
|
"@atlaskit/emoji": "^67.4.0",
|
|
47
47
|
"@atlaskit/icon": "^21.12.0",
|
|
@@ -49,14 +49,14 @@
|
|
|
49
49
|
"@atlaskit/media-client": "^23.1.0",
|
|
50
50
|
"@atlaskit/media-common": "^7.0.0",
|
|
51
51
|
"@atlaskit/media-filmstrip": "^47.0.0",
|
|
52
|
-
"@atlaskit/media-ui": "^23.
|
|
52
|
+
"@atlaskit/media-ui": "^23.1.0",
|
|
53
53
|
"@atlaskit/media-viewer": "^48.0.0",
|
|
54
54
|
"@atlaskit/platform-feature-flags": "^0.2.0",
|
|
55
55
|
"@atlaskit/smart-card": "^26.5.0",
|
|
56
56
|
"@atlaskit/status": "^1.3.0",
|
|
57
57
|
"@atlaskit/task-decision": "^17.6.0",
|
|
58
58
|
"@atlaskit/theme": "^12.5.0",
|
|
59
|
-
"@atlaskit/tokens": "^1.
|
|
59
|
+
"@atlaskit/tokens": "^1.9.0",
|
|
60
60
|
"@atlaskit/tooltip": "^17.8.0",
|
|
61
61
|
"@babel/runtime": "^7.0.0",
|
|
62
62
|
"@emotion/react": "^11.7.1",
|
|
@@ -80,8 +80,8 @@
|
|
|
80
80
|
"@atlaskit/avatar": "^21.3.0",
|
|
81
81
|
"@atlaskit/css-reset": "^6.5.0",
|
|
82
82
|
"@atlaskit/docs": "*",
|
|
83
|
-
"@atlaskit/editor-core": "^185.
|
|
84
|
-
"@atlaskit/editor-test-helpers": "^18.
|
|
83
|
+
"@atlaskit/editor-core": "^185.3.0",
|
|
84
|
+
"@atlaskit/editor-test-helpers": "^18.7.0",
|
|
85
85
|
"@atlaskit/inline-edit": "^12.3.3",
|
|
86
86
|
"@atlaskit/link-provider": "^1.6.0",
|
|
87
87
|
"@atlaskit/link-test-helpers": "^4.0.0",
|
|
@@ -138,4 +138,4 @@
|
|
|
138
138
|
"type": "boolean"
|
|
139
139
|
}
|
|
140
140
|
}
|
|
141
|
-
}
|
|
141
|
+
}
|