@atlaskit/renderer 108.2.0 → 108.2.2
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/codeBlock/components/codeBlockCopyButton.js +2 -1
- package/dist/cjs/react/nodes/codeBlock/components/codeBlockWrapButton.js +2 -1
- 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 +4 -4
- package/dist/cjs/ui/SortingIcon.js +1 -1
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/react/nodes/codeBlock/components/codeBlockCopyButton.js +2 -1
- package/dist/es2019/react/nodes/codeBlock/components/codeBlockWrapButton.js +2 -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 +4 -4
- package/dist/es2019/ui/SortingIcon.js +1 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/react/nodes/codeBlock/components/codeBlockCopyButton.js +2 -1
- package/dist/esm/react/nodes/codeBlock/components/codeBlockWrapButton.js +2 -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 +4 -4
- package/dist/esm/ui/SortingIcon.js +1 -1
- package/dist/esm/version.json +1 -1
- package/package.json +5 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/renderer
|
|
2
2
|
|
|
3
|
+
## 108.2.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`fef7f2e3676`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fef7f2e3676) - [ux] ED-17462 fix table column shriking in renderer
|
|
8
|
+
|
|
9
|
+
## 108.2.1
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`1b8397cca2c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1b8397cca2c) - [ux] Stop event from bubbling when user clicks on either the copy clipboard button or wrap button for code blocks in renderer view
|
|
14
|
+
|
|
3
15
|
## 108.2.0
|
|
4
16
|
|
|
5
17
|
### Minor Changes
|
|
@@ -52,7 +52,7 @@ var CopyButton = function CopyButton(_ref) {
|
|
|
52
52
|
iconBefore: (0, _react.jsx)(_copy.default, {
|
|
53
53
|
label: tooltip
|
|
54
54
|
}),
|
|
55
|
-
onClick: function onClick() {
|
|
55
|
+
onClick: function onClick(event) {
|
|
56
56
|
fireAnalyticsEvent({
|
|
57
57
|
action: _enums.ACTION.CLICKED,
|
|
58
58
|
actionSubject: _enums.ACTION_SUBJECT.BUTTON,
|
|
@@ -62,6 +62,7 @@ var CopyButton = function CopyButton(_ref) {
|
|
|
62
62
|
(0, _clipboard.copyTextToClipboard)(content);
|
|
63
63
|
setTooltip(intl.formatMessage(_messages.codeBlockButtonMessages.copiedCodeToClipboard));
|
|
64
64
|
setClassName('copy-to-clipboard clicked');
|
|
65
|
+
event.stopPropagation();
|
|
65
66
|
},
|
|
66
67
|
spacing: "compact"
|
|
67
68
|
}))));
|
|
@@ -56,7 +56,7 @@ var CodeBlockWrapButton = function CodeBlockWrapButton(_ref) {
|
|
|
56
56
|
label: ""
|
|
57
57
|
}),
|
|
58
58
|
isSelected: wrapLongLines,
|
|
59
|
-
onClick: function onClick() {
|
|
59
|
+
onClick: function onClick(event) {
|
|
60
60
|
fireAnalyticsEvent({
|
|
61
61
|
action: _enums.ACTION.CLICKED,
|
|
62
62
|
actionSubject: _enums.ACTION_SUBJECT.BUTTON,
|
|
@@ -67,6 +67,7 @@ var CodeBlockWrapButton = function CodeBlockWrapButton(_ref) {
|
|
|
67
67
|
eventType: _enums.EVENT_TYPE.UI
|
|
68
68
|
});
|
|
69
69
|
setWrapLongLines(!wrapLongLines);
|
|
70
|
+
event.stopPropagation();
|
|
70
71
|
},
|
|
71
72
|
spacing: "compact"
|
|
72
73
|
})));
|
|
@@ -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.2";
|
|
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)({
|
|
@@ -108,7 +108,7 @@ var rendererStyles = function rendererStyles(wrapperProps) {
|
|
|
108
108
|
})(themeProps), _styles.whitespaceSharedStyles, _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(themeProps), (0, _styles.ruleSharedStyles)(themeProps), _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(themeProps), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
|
|
109
109
|
light: "var(--ds-background-neutral, ".concat(colors.N30A, ")"),
|
|
110
110
|
dark: "var(--ds-background-neutral, ".concat(colors.DN70, ")")
|
|
111
|
-
})(themeProps), "var(--ds-radius-100, 3px)", (0, _components.themed)({
|
|
111
|
+
})(themeProps), "var(--ds-border-radius-100, 3px)", (0, _components.themed)({
|
|
112
112
|
light: "var(--ds-text, ".concat(colors.N800, ")"),
|
|
113
113
|
dark: "var(--ds-text, ".concat(colors.DN600, ")")
|
|
114
114
|
})(themeProps), "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), "var(--ds-space-300, 24px)", _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, alignedHeadingAnchorStyle(wrapperProps), _styles.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, breakoutWidthStyle(wrapperProps.useFragmentMarkBreakoutWidthStylingFix), _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, _consts.RendererCssClassName.EXTENSION, _consts.RendererCssClassName.DOCUMENT, _consts.RendererCssClassName.EXTENSION, _editorSharedStyles.blockNodesVerticalMargin, _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, _ui.shadowObserverClassNames.SHADOW_CONTAINER, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, (0, _styles.tableSharedStyle)(themeProps), _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, _styles.tableMarginTop - 1, _styles.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, _ui.shadowObserverClassNames.SENTINEL_LEFT, _ui.shadowObserverClassNames.SENTINEL_RIGHT, _styles.tableMarginTop, tableSortableColumnStyle(wrapperProps), _consts.RendererCssClassName.NUMBER_COLUMN, (0, _components.themed)({
|
|
@@ -138,7 +138,7 @@ var rendererStyles = function rendererStyles(wrapperProps) {
|
|
|
138
138
|
})(themeProps), (0, _components.themed)({
|
|
139
139
|
light: "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"),
|
|
140
140
|
dark: "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbarDark, ")")
|
|
141
|
-
})(themeProps), "var(--ds-radius-100, 3px)", _editorSharedStyles.blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), (0, _lightWeightCodeBlock.getLightWeightCodeBlockStylesForRootRendererStyleSheet)(), _styles.columnLayoutSharedStyle, "var(--ds-space-250, 20px)", "var(--ds-space-400, 32px)", _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _utils.browser.safari ? _styles.codeBlockInListSafariFix : '');
|
|
141
|
+
})(themeProps), "var(--ds-border-radius-100, 3px)", _editorSharedStyles.blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), (0, _lightWeightCodeBlock.getLightWeightCodeBlockStylesForRootRendererStyleSheet)(), _styles.columnLayoutSharedStyle, "var(--ds-space-250, 20px)", "var(--ds-space-400, 32px)", _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _utils.browser.safari ? _styles.codeBlockInListSafariFix : '');
|
|
142
142
|
};
|
|
143
143
|
};
|
|
144
144
|
exports.rendererStyles = rendererStyles;
|
|
@@ -23,7 +23,7 @@ var StatusClassNames = /*#__PURE__*/function (StatusClassNames) {
|
|
|
23
23
|
return StatusClassNames;
|
|
24
24
|
}({});
|
|
25
25
|
exports.StatusClassNames = StatusClassNames;
|
|
26
|
-
var buttonStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n display: flex;\n height: 28px;\n width: 28px;\n margin: 6px;\n right: 0;\n top: 0;\n border: 2px solid ", ";\n border-radius: ", ";\n background-color: ", ";\n justify-content: center;\n align-items: center;\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &.", "__not-allowed {\n cursor: not-allowed;\n }\n"])), "var(--ds-border, #fff)", "var(--ds-radius-100, 4px)", "var(--ds-surface-overlay, ".concat(_colors.N20, ")"), "var(--ds-surface-overlay-hovered, ".concat(_colors.N30, ")"), "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))", _consts.RendererCssClassName.SORTABLE_COLUMN_ICON);
|
|
26
|
+
var buttonStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n display: flex;\n height: 28px;\n width: 28px;\n margin: 6px;\n right: 0;\n top: 0;\n border: 2px solid ", ";\n border-radius: ", ";\n background-color: ", ";\n justify-content: center;\n align-items: center;\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &.", "__not-allowed {\n cursor: not-allowed;\n }\n"])), "var(--ds-border, #fff)", "var(--ds-border-radius-100, 4px)", "var(--ds-surface-overlay, ".concat(_colors.N20, ")"), "var(--ds-surface-overlay-hovered, ".concat(_colors.N30, ")"), "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))", _consts.RendererCssClassName.SORTABLE_COLUMN_ICON);
|
|
27
27
|
var iconWrapperStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n width: 8px;\n height: 12px;\n transition: transform 0.3s cubic-bezier(0.15, 1, 0.3, 1);\n transform-origin: 50% 50%;\n display: flex;\n justify-content: center;\n\n &.", " {\n transform: rotate(-180deg);\n }\n\n &.", "-inactive {\n opacity: 0.7;\n }\n"])), StatusClassNames.DESC, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON);
|
|
28
28
|
|
|
29
29
|
// The icon is created with CSS due to the following Firefox issue: https://product-fabric.atlassian.net/browse/ED-8001
|
package/dist/cjs/version.json
CHANGED
|
@@ -35,7 +35,7 @@ const CopyButton = ({
|
|
|
35
35
|
iconBefore: jsx(CopyIcon, {
|
|
36
36
|
label: tooltip
|
|
37
37
|
}),
|
|
38
|
-
onClick:
|
|
38
|
+
onClick: event => {
|
|
39
39
|
fireAnalyticsEvent({
|
|
40
40
|
action: ACTION.CLICKED,
|
|
41
41
|
actionSubject: ACTION_SUBJECT.BUTTON,
|
|
@@ -45,6 +45,7 @@ const CopyButton = ({
|
|
|
45
45
|
copyTextToClipboard(content);
|
|
46
46
|
setTooltip(intl.formatMessage(codeBlockButtonMessages.copiedCodeToClipboard));
|
|
47
47
|
setClassName('copy-to-clipboard clicked');
|
|
48
|
+
event.stopPropagation();
|
|
48
49
|
},
|
|
49
50
|
spacing: "compact"
|
|
50
51
|
})))));
|
|
@@ -49,7 +49,7 @@ const CodeBlockWrapButton = ({
|
|
|
49
49
|
label: ""
|
|
50
50
|
}),
|
|
51
51
|
isSelected: wrapLongLines,
|
|
52
|
-
onClick:
|
|
52
|
+
onClick: event => {
|
|
53
53
|
fireAnalyticsEvent({
|
|
54
54
|
action: ACTION.CLICKED,
|
|
55
55
|
actionSubject: ACTION_SUBJECT.BUTTON,
|
|
@@ -60,6 +60,7 @@ const CodeBlockWrapButton = ({
|
|
|
60
60
|
eventType: EVENT_TYPE.UI
|
|
61
61
|
});
|
|
62
62
|
setWrapLongLines(!wrapLongLines);
|
|
63
|
+
event.stopPropagation();
|
|
63
64
|
},
|
|
64
65
|
spacing: "compact"
|
|
65
66
|
}))));
|
|
@@ -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.2";
|
|
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
|
|
|
@@ -410,7 +410,7 @@ export const rendererStyles = wrapperProps => theme => {
|
|
|
410
410
|
light: `var(--ds-background-neutral, ${colors.N30A})`,
|
|
411
411
|
dark: `var(--ds-background-neutral, ${colors.DN70})`
|
|
412
412
|
})(themeProps)};
|
|
413
|
-
border-radius: ${"var(--ds-radius-100, 3px)"};
|
|
413
|
+
border-radius: ${"var(--ds-border-radius-100, 3px)"};
|
|
414
414
|
color: ${themed({
|
|
415
415
|
light: `var(--ds-text, ${colors.N800})`,
|
|
416
416
|
dark: `var(--ds-text, ${colors.DN600})`
|
|
@@ -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 {
|
|
@@ -646,7 +646,7 @@ export const rendererStyles = wrapperProps => theme => {
|
|
|
646
646
|
/* stylelint-enable */
|
|
647
647
|
|
|
648
648
|
position: relative;
|
|
649
|
-
border-radius: ${"var(--ds-radius-100, 3px)"};
|
|
649
|
+
border-radius: ${"var(--ds-border-radius-100, 3px)"};
|
|
650
650
|
|
|
651
651
|
/*
|
|
652
652
|
* The overall renderer has word-wrap: break; which causes issues with
|
|
@@ -22,7 +22,7 @@ const buttonStyles = css`
|
|
|
22
22
|
right: 0;
|
|
23
23
|
top: 0;
|
|
24
24
|
border: 2px solid ${"var(--ds-border, #fff)"};
|
|
25
|
-
border-radius: ${"var(--ds-radius-100, 4px)"};
|
|
25
|
+
border-radius: ${"var(--ds-border-radius-100, 4px)"};
|
|
26
26
|
background-color: ${`var(--ds-surface-overlay, ${N20})`};
|
|
27
27
|
justify-content: center;
|
|
28
28
|
align-items: center;
|
package/dist/es2019/version.json
CHANGED
|
@@ -41,7 +41,7 @@ var CopyButton = function CopyButton(_ref) {
|
|
|
41
41
|
iconBefore: jsx(CopyIcon, {
|
|
42
42
|
label: tooltip
|
|
43
43
|
}),
|
|
44
|
-
onClick: function onClick() {
|
|
44
|
+
onClick: function onClick(event) {
|
|
45
45
|
fireAnalyticsEvent({
|
|
46
46
|
action: ACTION.CLICKED,
|
|
47
47
|
actionSubject: ACTION_SUBJECT.BUTTON,
|
|
@@ -51,6 +51,7 @@ var CopyButton = function CopyButton(_ref) {
|
|
|
51
51
|
copyTextToClipboard(content);
|
|
52
52
|
setTooltip(intl.formatMessage(codeBlockButtonMessages.copiedCodeToClipboard));
|
|
53
53
|
setClassName('copy-to-clipboard clicked');
|
|
54
|
+
event.stopPropagation();
|
|
54
55
|
},
|
|
55
56
|
spacing: "compact"
|
|
56
57
|
}))));
|
|
@@ -48,7 +48,7 @@ var CodeBlockWrapButton = function CodeBlockWrapButton(_ref) {
|
|
|
48
48
|
label: ""
|
|
49
49
|
}),
|
|
50
50
|
isSelected: wrapLongLines,
|
|
51
|
-
onClick: function onClick() {
|
|
51
|
+
onClick: function onClick(event) {
|
|
52
52
|
fireAnalyticsEvent({
|
|
53
53
|
action: ACTION.CLICKED,
|
|
54
54
|
actionSubject: ACTION_SUBJECT.BUTTON,
|
|
@@ -59,6 +59,7 @@ var CodeBlockWrapButton = function CodeBlockWrapButton(_ref) {
|
|
|
59
59
|
eventType: EVENT_TYPE.UI
|
|
60
60
|
});
|
|
61
61
|
setWrapLongLines(!wrapLongLines);
|
|
62
|
+
event.stopPropagation();
|
|
62
63
|
},
|
|
63
64
|
spacing: "compact"
|
|
64
65
|
})));
|
|
@@ -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.2";
|
|
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({
|
|
@@ -97,7 +97,7 @@ export var rendererStyles = function rendererStyles(wrapperProps) {
|
|
|
97
97
|
})(themeProps), whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles(themeProps), ruleSharedStyles(themeProps), paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles(themeProps), shadowSharedStyle, dateSharedStyle, textColorStyles, tasksAndDecisionsStyles, smartCardSharedStyles, fontFamily(), relativeFontSizeToBase16(fontSize()), themed({
|
|
98
98
|
light: "var(--ds-background-neutral, ".concat(colors.N30A, ")"),
|
|
99
99
|
dark: "var(--ds-background-neutral, ".concat(colors.DN70, ")")
|
|
100
|
-
})(themeProps), "var(--ds-radius-100, 3px)", themed({
|
|
100
|
+
})(themeProps), "var(--ds-border-radius-100, 3px)", themed({
|
|
101
101
|
light: "var(--ds-text, ".concat(colors.N800, ")"),
|
|
102
102
|
dark: "var(--ds-text, ".concat(colors.DN600, ")")
|
|
103
103
|
})(themeProps), "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), "var(--ds-space-300, 24px)", richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, alignedHeadingAnchorStyle(wrapperProps), mediaSingleSharedStyle, RendererCssClassName.DOCUMENT, breakoutWidthStyle(wrapperProps.useFragmentMarkBreakoutWidthStylingFix), RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, RendererCssClassName.EXTENSION, RendererCssClassName.DOCUMENT, RendererCssClassName.EXTENSION, blockNodesVerticalMargin, RendererCssClassName.EXTENSION_CENTER_ALIGN, TableSharedCssClassName.TABLE_NODE_WRAPPER, shadowObserverClassNames.SHADOW_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableSharedStyle(themeProps), RendererCssClassName.DOCUMENT, TableSharedCssClassName.TABLE_CONTAINER, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, tableMarginTop - 1, tableMarginTop, akEditorStickyHeaderZIndex, shadowObserverClassNames.SENTINEL_LEFT, shadowObserverClassNames.SENTINEL_RIGHT, tableMarginTop, tableSortableColumnStyle(wrapperProps), RendererCssClassName.NUMBER_COLUMN, themed({
|
|
@@ -127,7 +127,7 @@ export var rendererStyles = function rendererStyles(wrapperProps) {
|
|
|
127
127
|
})(themeProps), themed({
|
|
128
128
|
light: "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableToolbar, ")"),
|
|
129
129
|
dark: "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableToolbarDark, ")")
|
|
130
|
-
})(themeProps), "var(--ds-radius-100, 3px)", blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), getLightWeightCodeBlockStylesForRootRendererStyleSheet(), columnLayoutSharedStyle, "var(--ds-space-250, 20px)", "var(--ds-space-400, 32px)", gridMediumMaxWidth, blockNodesVerticalMargin, blockNodesVerticalMargin, blockNodesVerticalMargin, browser.safari ? codeBlockInListSafariFix : '');
|
|
130
|
+
})(themeProps), "var(--ds-border-radius-100, 3px)", blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), getLightWeightCodeBlockStylesForRootRendererStyleSheet(), columnLayoutSharedStyle, "var(--ds-space-250, 20px)", "var(--ds-space-400, 32px)", gridMediumMaxWidth, blockNodesVerticalMargin, blockNodesVerticalMargin, blockNodesVerticalMargin, browser.safari ? codeBlockInListSafariFix : '');
|
|
131
131
|
};
|
|
132
132
|
};
|
|
133
133
|
var useGridRenderForCodeBlock = function useGridRenderForCodeBlock(codeBlockRenderAsBlock) {
|
|
@@ -15,7 +15,7 @@ export var StatusClassNames = /*#__PURE__*/function (StatusClassNames) {
|
|
|
15
15
|
StatusClassNames["SORTING_NOT_ALLOWED"] = "sorting-icon-svg__not-allowed";
|
|
16
16
|
return StatusClassNames;
|
|
17
17
|
}({});
|
|
18
|
-
var buttonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n display: flex;\n height: 28px;\n width: 28px;\n margin: 6px;\n right: 0;\n top: 0;\n border: 2px solid ", ";\n border-radius: ", ";\n background-color: ", ";\n justify-content: center;\n align-items: center;\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &.", "__not-allowed {\n cursor: not-allowed;\n }\n"])), "var(--ds-border, #fff)", "var(--ds-radius-100, 4px)", "var(--ds-surface-overlay, ".concat(N20, ")"), "var(--ds-surface-overlay-hovered, ".concat(N30, ")"), "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))", RendererCssClassName.SORTABLE_COLUMN_ICON);
|
|
18
|
+
var buttonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n display: flex;\n height: 28px;\n width: 28px;\n margin: 6px;\n right: 0;\n top: 0;\n border: 2px solid ", ";\n border-radius: ", ";\n background-color: ", ";\n justify-content: center;\n align-items: center;\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &.", "__not-allowed {\n cursor: not-allowed;\n }\n"])), "var(--ds-border, #fff)", "var(--ds-border-radius-100, 4px)", "var(--ds-surface-overlay, ".concat(N20, ")"), "var(--ds-surface-overlay-hovered, ".concat(N30, ")"), "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))", RendererCssClassName.SORTABLE_COLUMN_ICON);
|
|
19
19
|
var iconWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 8px;\n height: 12px;\n transition: transform 0.3s cubic-bezier(0.15, 1, 0.3, 1);\n transform-origin: 50% 50%;\n display: flex;\n justify-content: center;\n\n &.", " {\n transform: rotate(-180deg);\n }\n\n &.", "-inactive {\n opacity: 0.7;\n }\n"])), StatusClassNames.DESC, RendererCssClassName.SORTABLE_COLUMN_ICON);
|
|
20
20
|
|
|
21
21
|
// The icon is created with CSS due to the following Firefox issue: https://product-fabric.atlassian.net/browse/ED-8001
|
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.2",
|
|
4
4
|
"description": "Renderer component",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
}
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@atlaskit/adf-schema": "^25.
|
|
35
|
+
"@atlaskit/adf-schema": "^25.9.0",
|
|
36
36
|
"@atlaskit/adf-utils": "^18.4.0",
|
|
37
37
|
"@atlaskit/analytics-listeners": "^8.7.0",
|
|
38
38
|
"@atlaskit/analytics-namespaced-context": "^6.7.0",
|
|
@@ -56,7 +56,7 @@
|
|
|
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.8.0",
|
|
60
60
|
"@atlaskit/tooltip": "^17.8.0",
|
|
61
61
|
"@babel/runtime": "^7.0.0",
|
|
62
62
|
"@emotion/react": "^11.7.1",
|
|
@@ -82,6 +82,7 @@
|
|
|
82
82
|
"@atlaskit/docs": "*",
|
|
83
83
|
"@atlaskit/editor-core": "^185.2.0",
|
|
84
84
|
"@atlaskit/editor-test-helpers": "^18.6.0",
|
|
85
|
+
"@atlaskit/inline-edit": "^12.3.3",
|
|
85
86
|
"@atlaskit/link-provider": "^1.6.0",
|
|
86
87
|
"@atlaskit/link-test-helpers": "^4.0.0",
|
|
87
88
|
"@atlaskit/logo": "^13.14.0",
|
|
@@ -92,6 +93,7 @@
|
|
|
92
93
|
"@atlaskit/navigation-next": "^9.0.0",
|
|
93
94
|
"@atlaskit/radio": "^5.6.0",
|
|
94
95
|
"@atlaskit/range": "^7.1.0",
|
|
96
|
+
"@atlaskit/textfield": "^5.5.1",
|
|
95
97
|
"@atlaskit/util-data-test": "^17.8.0",
|
|
96
98
|
"@atlaskit/visual-regression": "*",
|
|
97
99
|
"@atlaskit/webdriver-runner": "*",
|