@atlaskit/media-viewer 52.1.0 → 52.2.0
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 +18 -0
- package/dist/cjs/analytics/index.js +1 -1
- package/dist/cjs/analytics/ufoExperiences.js +1 -1
- package/dist/cjs/viewers/codeViewer/CodeRendererAdvanced/CodeRendererAdvanced.compiled.css +10 -0
- package/dist/cjs/viewers/codeViewer/CodeRendererAdvanced/CodeRendererAdvanced.js +55 -0
- package/dist/cjs/viewers/codeViewer/CodeRendererAdvanced/theme.js +146 -0
- package/dist/cjs/viewers/codeViewer/index.js +11 -0
- package/dist/es2019/analytics/index.js +1 -1
- package/dist/es2019/analytics/ufoExperiences.js +1 -1
- package/dist/es2019/viewers/codeViewer/CodeRendererAdvanced/CodeRendererAdvanced.compiled.css +10 -0
- package/dist/es2019/viewers/codeViewer/CodeRendererAdvanced/CodeRendererAdvanced.js +44 -0
- package/dist/es2019/viewers/codeViewer/CodeRendererAdvanced/theme.js +190 -0
- package/dist/es2019/viewers/codeViewer/index.js +11 -0
- package/dist/esm/analytics/index.js +1 -1
- package/dist/esm/analytics/ufoExperiences.js +1 -1
- package/dist/esm/viewers/codeViewer/CodeRendererAdvanced/CodeRendererAdvanced.compiled.css +10 -0
- package/dist/esm/viewers/codeViewer/CodeRendererAdvanced/CodeRendererAdvanced.js +46 -0
- package/dist/esm/viewers/codeViewer/CodeRendererAdvanced/theme.js +140 -0
- package/dist/esm/viewers/codeViewer/index.js +11 -0
- package/dist/types/viewers/codeViewer/CodeRendererAdvanced/CodeRendererAdvanced.d.ts +12 -0
- package/dist/types/viewers/codeViewer/CodeRendererAdvanced/theme.d.ts +3 -0
- package/dist/types-ts4.5/viewers/codeViewer/CodeRendererAdvanced/CodeRendererAdvanced.d.ts +12 -0
- package/dist/types-ts4.5/viewers/codeViewer/CodeRendererAdvanced/theme.d.ts +3 -0
- package/package.json +10 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @atlaskit/media-viewer
|
|
2
2
|
|
|
3
|
+
## 52.2.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#158891](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/158891)
|
|
8
|
+
[`4c1ee82119da8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4c1ee82119da8) -
|
|
9
|
+
Added a new code viewer experience based on codemirror to better handle larger text files
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- Updated dependencies
|
|
14
|
+
|
|
15
|
+
## 52.1.1
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- Updated dependencies
|
|
20
|
+
|
|
3
21
|
## 52.1.0
|
|
4
22
|
|
|
5
23
|
### Minor Changes
|
|
@@ -10,7 +10,7 @@ exports.packageVersion = exports.packageName = void 0;
|
|
|
10
10
|
var _analytics = require("@atlaskit/media-common/analytics");
|
|
11
11
|
var componentName = exports.component = exports.componentName = 'mediaViewer';
|
|
12
12
|
var packageName = exports.packageName = "@atlaskit/media-viewer";
|
|
13
|
-
var packageVersion = exports.packageVersion = "52.
|
|
13
|
+
var packageVersion = exports.packageVersion = "52.2.0";
|
|
14
14
|
function getFileAttributes(fileState) {
|
|
15
15
|
if (!fileState) {
|
|
16
16
|
return {
|
|
@@ -12,7 +12,7 @@ var _mediaCommon = require("@atlaskit/media-common");
|
|
|
12
12
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
13
13
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
14
14
|
var packageName = "@atlaskit/media-viewer";
|
|
15
|
-
var packageVersion = "52.
|
|
15
|
+
var packageVersion = "52.2.0";
|
|
16
16
|
var ufoExperience;
|
|
17
17
|
var getExperience = function getExperience() {
|
|
18
18
|
if (!ufoExperience) {
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
._154iidpf{top:0}
|
|
2
|
+
._18m91wug{overflow-y:auto}
|
|
3
|
+
._1ltvidpf{left:0}
|
|
4
|
+
._1reo1wug{overflow-x:auto}
|
|
5
|
+
._1xi2idpf{right:0}
|
|
6
|
+
._4t3i8ved{height:75px}
|
|
7
|
+
._94n5idpf{bottom:0}
|
|
8
|
+
._bfhk15j7{background-color:var(--ds-surface,#f4f5f7)}
|
|
9
|
+
._bfhk1nox{background-color:#1d2125}
|
|
10
|
+
._kqswstnw{position:absolute}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
/* CodeRendererAdvanced.tsx generated by @compiled/babel-plugin v0.36.1 */
|
|
2
|
+
"use strict";
|
|
3
|
+
|
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.CodeRendererAdvanced = void 0;
|
|
9
|
+
require("./CodeRendererAdvanced.compiled.css");
|
|
10
|
+
var _runtime = require("@compiled/react/runtime");
|
|
11
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
12
|
+
var _view = require("@codemirror/view");
|
|
13
|
+
var _state = require("@codemirror/state");
|
|
14
|
+
var _languageData = require("@codemirror/language-data");
|
|
15
|
+
var _language = require("@codemirror/language");
|
|
16
|
+
var _theme = require("./theme");
|
|
17
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
18
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
19
|
+
var codeViewWrapperStyles = null;
|
|
20
|
+
var codeViewerHeaderBarStyles = null;
|
|
21
|
+
var CodeRendererAdvanced = exports.CodeRendererAdvanced = function CodeRendererAdvanced(props) {
|
|
22
|
+
var nodeRef = (0, _react.useRef)(function (elem) {
|
|
23
|
+
var _props$item$name$spli, _props$onSuccess;
|
|
24
|
+
if (!elem) {
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
var extension = (_props$item$name$spli = props.item.name.split('.').pop()) !== null && _props$item$name$spli !== void 0 ? _props$item$name$spli : '';
|
|
28
|
+
var languageCompartment = new _state.Compartment();
|
|
29
|
+
var view = new _view.EditorView({
|
|
30
|
+
doc: props.src,
|
|
31
|
+
parent: elem,
|
|
32
|
+
extensions: [(0, _view.lineNumbers)(), (0, _view.gutters)(), _state.EditorState.readOnly.of(true), _view.EditorView.editable.of(false), _view.EditorView.lineWrapping, _theme.cmTheme, (0, _language.syntaxHighlighting)(_theme.highlightStyle), languageCompartment.of([])]
|
|
33
|
+
});
|
|
34
|
+
(_props$onSuccess = props.onSuccess) === null || _props$onSuccess === void 0 || _props$onSuccess.call(props);
|
|
35
|
+
var language = _languageData.languages.find(function (lang) {
|
|
36
|
+
return lang.extensions.includes(extension);
|
|
37
|
+
});
|
|
38
|
+
language === null || language === void 0 || language.load().then(function (val) {
|
|
39
|
+
view.dispatch({
|
|
40
|
+
effects: languageCompartment.reconfigure(val)
|
|
41
|
+
});
|
|
42
|
+
});
|
|
43
|
+
return function () {
|
|
44
|
+
view.destroy();
|
|
45
|
+
};
|
|
46
|
+
});
|
|
47
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
48
|
+
"data-testid": props.testId,
|
|
49
|
+
className: (0, _runtime.ax)(["_1reo1wug _18m91wug _kqswstnw _1ltvidpf _154iidpf _1xi2idpf _94n5idpf _bfhk15j7"])
|
|
50
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
51
|
+
className: (0, _runtime.ax)(["_4t3i8ved _bfhk1nox"])
|
|
52
|
+
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
53
|
+
ref: nodeRef.current
|
|
54
|
+
}));
|
|
55
|
+
};
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.highlightStyle = exports.cmTheme = void 0;
|
|
8
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
|
+
var _view = require("@codemirror/view");
|
|
10
|
+
var _language = require("@codemirror/language");
|
|
11
|
+
var _highlight = require("@lezer/highlight");
|
|
12
|
+
/**
|
|
13
|
+
* These styles are copied directly from
|
|
14
|
+
* packages/editor/editor-plugin-code-block-advanced/src/nodeviews/codeBlockAdvanced.ts
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
var LINE_HEIGHT = '1.5rem';
|
|
18
|
+
var cmTheme = exports.cmTheme = _view.EditorView.theme({
|
|
19
|
+
'&': (0, _defineProperty2.default)((0, _defineProperty2.default)({
|
|
20
|
+
backgroundColor: "var(--ds-background-neutral, #091E420F)",
|
|
21
|
+
padding: '0',
|
|
22
|
+
marginTop: "var(--ds-space-100, 8px)",
|
|
23
|
+
marginBottom: "var(--ds-space-100, 8px)"
|
|
24
|
+
}, 'fontSize', '0.875rem'), 'lineHeight', LINE_HEIGHT),
|
|
25
|
+
'&.cm-focused': {
|
|
26
|
+
outline: 'none'
|
|
27
|
+
},
|
|
28
|
+
'.cm-line': {
|
|
29
|
+
padding: '0'
|
|
30
|
+
},
|
|
31
|
+
'&.cm-editor.code-block.danger': {
|
|
32
|
+
backgroundColor: "var(--ds-background-danger, #FFECEB)"
|
|
33
|
+
},
|
|
34
|
+
'.cm-content[aria-readonly="true"]': {
|
|
35
|
+
caretColor: 'transparent'
|
|
36
|
+
},
|
|
37
|
+
'.cm-content': {
|
|
38
|
+
cursor: 'text',
|
|
39
|
+
caretColor: "var(--ds-text, #172B4D)",
|
|
40
|
+
margin: "var(--ds-space-100, 8px)",
|
|
41
|
+
padding: "var(--ds-space-0, 0px)"
|
|
42
|
+
},
|
|
43
|
+
'.cm-scroller': (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
|
|
44
|
+
backgroundColor: "var(--ds-background-neutral, #091E420F)"
|
|
45
|
+
}, 'lineHeight', 'unset'), "fontFamily", "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"), "borderRadius", "var(--ds-border-radius, 4px)"), "backgroundImage", overflowShadow({
|
|
46
|
+
leftCoverWidth: "var(--ds-space-300, 24px)"
|
|
47
|
+
})), "backgroundAttachment", 'local, local, local, local, scroll, scroll, scroll, scroll'),
|
|
48
|
+
'&.cm-focused .cm-cursor': {
|
|
49
|
+
borderLeftColor: "var(--ds-text, #172B4D)"
|
|
50
|
+
},
|
|
51
|
+
'.cm-gutters': {
|
|
52
|
+
backgroundColor: "var(--ds-background-neutral, #091E420F)",
|
|
53
|
+
border: 'none',
|
|
54
|
+
padding: "var(--ds-space-100, 8px)",
|
|
55
|
+
color: "var(--ds-text-subtlest, #626F86)"
|
|
56
|
+
},
|
|
57
|
+
'.cm-lineNumbers .cm-gutterElement': {
|
|
58
|
+
paddingLeft: "var(--ds-space-0, 0px)",
|
|
59
|
+
paddingRight: "var(--ds-space-0, 0px)",
|
|
60
|
+
minWidth: 'unset'
|
|
61
|
+
},
|
|
62
|
+
// Set the gutter element min height to prevent flicker of styling while
|
|
63
|
+
// codemirror is calculating (which happens after an animation frame).
|
|
64
|
+
// Example problem: https://github.com/codemirror/dev/issues/1076
|
|
65
|
+
// Ignore the first gutter element as it is a special hidden element.
|
|
66
|
+
'.cm-gutterElement:not(:first-child)': {
|
|
67
|
+
minHeight: LINE_HEIGHT
|
|
68
|
+
}
|
|
69
|
+
});
|
|
70
|
+
function overflowShadow(_ref) {
|
|
71
|
+
var leftCoverWidth = _ref.leftCoverWidth,
|
|
72
|
+
rightCoverWidth = _ref.rightCoverWidth;
|
|
73
|
+
var width = "var(--ds-space-100, 8px)";
|
|
74
|
+
var leftCoverWidthResolved = leftCoverWidth || width;
|
|
75
|
+
var rightCoverWidthResolved = rightCoverWidth || width;
|
|
76
|
+
return "\n\tlinear-gradient(\n\t\tto right,\n\t\t".concat("var(--ds-background-neutral, #091E420F)", " ", leftCoverWidthResolved, ",\n\t\ttransparent ").concat(leftCoverWidthResolved, "\n\t),\n\tlinear-gradient(\n\t\tto right,\n\t\t", "var(--ds-surface-raised, #FFFFFF)", " ").concat(leftCoverWidthResolved, ",\n\t\ttransparent ").concat(leftCoverWidthResolved, "\n\t),\n\tlinear-gradient(\n\t\tto left,\n\t\t", "var(--ds-background-neutral, #091E420F)", " ").concat(rightCoverWidthResolved, ",\n\t\ttransparent ").concat(rightCoverWidthResolved, "\n\t),\n\tlinear-gradient(\n\t\tto left,\n\t\t", "var(--ds-surface-raised, #FFFFFF)", " ").concat(rightCoverWidthResolved, ",\n\t\ttransparent ").concat(rightCoverWidthResolved, "\n\t),\n\tlinear-gradient(\n\t\tto left,\n\t\t", "var(--ds-shadow-overflow-spread, #091e4229)", " 0,\n\t\t", "var(--ds-UNSAFE-transparent, transparent)", " ").concat(width, "\n\t),\n\tlinear-gradient(\n\t\tto left,\n\t\t", "var(--ds-shadow-overflow-perimeter, #091e421f)", " 0,\n\t\t", "var(--ds-UNSAFE-transparent, transparent)", " ").concat(width, "\n\t),\n\tlinear-gradient(\n\t\tto right,\n\t\t", "var(--ds-shadow-overflow-spread, #091e4229)", " 0,\n\t\t", "var(--ds-UNSAFE-transparent, transparent)", " ").concat(width, "\n\t),\n\tlinear-gradient(\n\t\tto right,\n\t\t", "var(--ds-shadow-overflow-perimeter, #091e421f)", " 0,\n\t\t", "var(--ds-UNSAFE-transparent, transparent)", " ").concat(width, "\n\t)\n");
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
// Based on `platform/packages/design-system/code/src/internal/theme/styles.tsx`
|
|
80
|
+
var highlightStyle = exports.highlightStyle = _language.HighlightStyle.define([{
|
|
81
|
+
tag: _highlight.tags.meta,
|
|
82
|
+
color: "var(--ds-text, #172B4D)"
|
|
83
|
+
}, {
|
|
84
|
+
tag: _highlight.tags.link,
|
|
85
|
+
textDecoration: 'underline'
|
|
86
|
+
}, {
|
|
87
|
+
tag: _highlight.tags.heading,
|
|
88
|
+
textDecoration: 'underline',
|
|
89
|
+
// Custom syntax styling to match existing styling
|
|
90
|
+
fontWeight: "var(--ds-font-weight-bold, 700)"
|
|
91
|
+
}, {
|
|
92
|
+
tag: _highlight.tags.emphasis,
|
|
93
|
+
fontStyle: 'italic'
|
|
94
|
+
}, {
|
|
95
|
+
tag: _highlight.tags.strong,
|
|
96
|
+
// Custom syntax styling to match existing styling
|
|
97
|
+
fontWeight: "var(--ds-font-weight-bold, 700)"
|
|
98
|
+
}, {
|
|
99
|
+
tag: _highlight.tags.strikethrough,
|
|
100
|
+
textDecoration: 'line-through'
|
|
101
|
+
}, {
|
|
102
|
+
tag: _highlight.tags.keyword,
|
|
103
|
+
color: "var(--ds-text-accent-blue, #0055CC)",
|
|
104
|
+
// Custom syntax styling to match existing styling
|
|
105
|
+
fontWeight: "var(--ds-font-weight-bold, 700)"
|
|
106
|
+
}, {
|
|
107
|
+
tag: [_highlight.tags.atom, _highlight.tags.bool, _highlight.tags.url, _highlight.tags.contentSeparator, _highlight.tags.labelName],
|
|
108
|
+
color: "var(--ds-text-accent-blue, #0055CC)"
|
|
109
|
+
}, {
|
|
110
|
+
tag: [_highlight.tags.literal, _highlight.tags.inserted],
|
|
111
|
+
color: "var(--ds-text-accent-blue, #0055CC)"
|
|
112
|
+
}, {
|
|
113
|
+
tag: [_highlight.tags.string, _highlight.tags.deleted],
|
|
114
|
+
color: "var(--ds-text-accent-green, #216E4E)"
|
|
115
|
+
}, {
|
|
116
|
+
tag: [_highlight.tags.special(_highlight.tags.string)],
|
|
117
|
+
color: "var(--ds-text-accent-green, #216E4E)"
|
|
118
|
+
}, {
|
|
119
|
+
tag: [_highlight.tags.regexp, _highlight.tags.escape],
|
|
120
|
+
color: "var(--ds-text-accent-teal, #206A83)"
|
|
121
|
+
}, {
|
|
122
|
+
tag: _highlight.tags.definition(_highlight.tags.variableName),
|
|
123
|
+
color: "var(--ds-text, #172B4D)"
|
|
124
|
+
}, {
|
|
125
|
+
tag: _highlight.tags.local(_highlight.tags.variableName),
|
|
126
|
+
color: "var(--ds-text, #172B4D)"
|
|
127
|
+
}, {
|
|
128
|
+
tag: [_highlight.tags.typeName, _highlight.tags.namespace],
|
|
129
|
+
color: "var(--ds-text-accent-blue, #0055CC)"
|
|
130
|
+
}, {
|
|
131
|
+
tag: _highlight.tags.className,
|
|
132
|
+
color: "var(--ds-text-accent-purple, #5E4DB2)"
|
|
133
|
+
}, {
|
|
134
|
+
tag: [_highlight.tags.special(_highlight.tags.variableName), _highlight.tags.macroName],
|
|
135
|
+
color: "var(--ds-text, #172B4D)"
|
|
136
|
+
}, {
|
|
137
|
+
tag: _highlight.tags.definition(_highlight.tags.propertyName),
|
|
138
|
+
color: "var(--ds-text, #172B4D)"
|
|
139
|
+
}, {
|
|
140
|
+
tag: _highlight.tags.comment,
|
|
141
|
+
color: "var(--ds-text-subtlest, #626F86)",
|
|
142
|
+
fontStyle: 'italic'
|
|
143
|
+
}, {
|
|
144
|
+
tag: _highlight.tags.invalid,
|
|
145
|
+
color: "var(--ds-text, #172B4D)"
|
|
146
|
+
}]);
|
|
@@ -22,6 +22,8 @@ var _baseViewer = require("../base-viewer");
|
|
|
22
22
|
var _util = require("./util");
|
|
23
23
|
var _codeViewer = require("@atlaskit/media-ui/codeViewer");
|
|
24
24
|
var _msgParser = require("./msg-parser");
|
|
25
|
+
var _CodeRendererAdvanced = require("./CodeRendererAdvanced/CodeRendererAdvanced");
|
|
26
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
25
27
|
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
|
|
26
28
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
27
29
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
@@ -185,6 +187,15 @@ var CodeViewer = exports.CodeViewer = /*#__PURE__*/function (_BaseViewer) {
|
|
|
185
187
|
if (!CodeViewerComponent) {
|
|
186
188
|
return /*#__PURE__*/_react.default.createElement(_loading.Spinner, null);
|
|
187
189
|
}
|
|
190
|
+
if ((0, _platformFeatureFlags.fg)('media_advanced_text_viewer')) {
|
|
191
|
+
return /*#__PURE__*/_react.default.createElement(_CodeRendererAdvanced.CodeRendererAdvanced, {
|
|
192
|
+
item: item,
|
|
193
|
+
src: content,
|
|
194
|
+
onSuccess: onSuccess,
|
|
195
|
+
onError: onError,
|
|
196
|
+
onClose: onClose
|
|
197
|
+
});
|
|
198
|
+
}
|
|
188
199
|
return /*#__PURE__*/_react.default.createElement(CodeViewerComponent, {
|
|
189
200
|
item: item,
|
|
190
201
|
src: content,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ANALYTICS_MEDIA_CHANNEL, sanitiseAnalyticsPayload } from '@atlaskit/media-common/analytics';
|
|
2
2
|
const componentName = 'mediaViewer';
|
|
3
3
|
const packageName = "@atlaskit/media-viewer";
|
|
4
|
-
const packageVersion = "52.
|
|
4
|
+
const packageVersion = "52.2.0";
|
|
5
5
|
export { packageName, packageVersion, componentName, componentName as component };
|
|
6
6
|
export function getFileAttributes(fileState) {
|
|
7
7
|
if (!fileState) {
|
|
@@ -2,7 +2,7 @@ import { UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atl
|
|
|
2
2
|
import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
|
|
3
3
|
import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
|
|
4
4
|
const packageName = "@atlaskit/media-viewer";
|
|
5
|
-
const packageVersion = "52.
|
|
5
|
+
const packageVersion = "52.2.0";
|
|
6
6
|
let ufoExperience;
|
|
7
7
|
const getExperience = () => {
|
|
8
8
|
if (!ufoExperience) {
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
._154iidpf{top:0}
|
|
2
|
+
._18m91wug{overflow-y:auto}
|
|
3
|
+
._1ltvidpf{left:0}
|
|
4
|
+
._1reo1wug{overflow-x:auto}
|
|
5
|
+
._1xi2idpf{right:0}
|
|
6
|
+
._4t3i8ved{height:75px}
|
|
7
|
+
._94n5idpf{bottom:0}
|
|
8
|
+
._bfhk15j7{background-color:var(--ds-surface,#f4f5f7)}
|
|
9
|
+
._bfhk1nox{background-color:#1d2125}
|
|
10
|
+
._kqswstnw{position:absolute}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
/* CodeRendererAdvanced.tsx generated by @compiled/babel-plugin v0.36.1 */
|
|
2
|
+
import "./CodeRendererAdvanced.compiled.css";
|
|
3
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
4
|
+
import React, { useRef } from 'react';
|
|
5
|
+
import { EditorView, lineNumbers, gutters } from '@codemirror/view';
|
|
6
|
+
import { Compartment, EditorState } from '@codemirror/state';
|
|
7
|
+
import { languages } from '@codemirror/language-data';
|
|
8
|
+
import { syntaxHighlighting } from '@codemirror/language';
|
|
9
|
+
import { cmTheme, highlightStyle } from './theme';
|
|
10
|
+
const codeViewWrapperStyles = null;
|
|
11
|
+
const codeViewerHeaderBarStyles = null;
|
|
12
|
+
export const CodeRendererAdvanced = props => {
|
|
13
|
+
const nodeRef = useRef(elem => {
|
|
14
|
+
var _props$item$name$spli, _props$onSuccess;
|
|
15
|
+
if (!elem) {
|
|
16
|
+
return;
|
|
17
|
+
}
|
|
18
|
+
const extension = (_props$item$name$spli = props.item.name.split('.').pop()) !== null && _props$item$name$spli !== void 0 ? _props$item$name$spli : '';
|
|
19
|
+
const languageCompartment = new Compartment();
|
|
20
|
+
const view = new EditorView({
|
|
21
|
+
doc: props.src,
|
|
22
|
+
parent: elem,
|
|
23
|
+
extensions: [lineNumbers(), gutters(), EditorState.readOnly.of(true), EditorView.editable.of(false), EditorView.lineWrapping, cmTheme, syntaxHighlighting(highlightStyle), languageCompartment.of([])]
|
|
24
|
+
});
|
|
25
|
+
(_props$onSuccess = props.onSuccess) === null || _props$onSuccess === void 0 ? void 0 : _props$onSuccess.call(props);
|
|
26
|
+
const language = languages.find(lang => lang.extensions.includes(extension));
|
|
27
|
+
language === null || language === void 0 ? void 0 : language.load().then(val => {
|
|
28
|
+
view.dispatch({
|
|
29
|
+
effects: languageCompartment.reconfigure(val)
|
|
30
|
+
});
|
|
31
|
+
});
|
|
32
|
+
return () => {
|
|
33
|
+
view.destroy();
|
|
34
|
+
};
|
|
35
|
+
});
|
|
36
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
37
|
+
"data-testid": props.testId,
|
|
38
|
+
className: ax(["_1reo1wug _18m91wug _kqswstnw _1ltvidpf _154iidpf _1xi2idpf _94n5idpf _bfhk15j7"])
|
|
39
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
40
|
+
className: ax(["_4t3i8ved _bfhk1nox"])
|
|
41
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
42
|
+
ref: nodeRef.current
|
|
43
|
+
}));
|
|
44
|
+
};
|
|
@@ -0,0 +1,190 @@
|
|
|
1
|
+
import { EditorView as CodeMirror } from '@codemirror/view';
|
|
2
|
+
import { HighlightStyle } from '@codemirror/language';
|
|
3
|
+
import { tags } from '@lezer/highlight';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* These styles are copied directly from
|
|
7
|
+
* packages/editor/editor-plugin-code-block-advanced/src/nodeviews/codeBlockAdvanced.ts
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
const LINE_HEIGHT = '1.5rem';
|
|
11
|
+
export const cmTheme = CodeMirror.theme({
|
|
12
|
+
'&': {
|
|
13
|
+
backgroundColor: "var(--ds-background-neutral, #091E420F)",
|
|
14
|
+
padding: '0',
|
|
15
|
+
marginTop: "var(--ds-space-100, 8px)",
|
|
16
|
+
marginBottom: "var(--ds-space-100, 8px)",
|
|
17
|
+
['fontSize']: '0.875rem',
|
|
18
|
+
// Custom syntax styling to match existing styling
|
|
19
|
+
['lineHeight']: LINE_HEIGHT
|
|
20
|
+
},
|
|
21
|
+
'&.cm-focused': {
|
|
22
|
+
outline: 'none'
|
|
23
|
+
},
|
|
24
|
+
'.cm-line': {
|
|
25
|
+
padding: '0'
|
|
26
|
+
},
|
|
27
|
+
'&.cm-editor.code-block.danger': {
|
|
28
|
+
backgroundColor: "var(--ds-background-danger, #FFECEB)"
|
|
29
|
+
},
|
|
30
|
+
'.cm-content[aria-readonly="true"]': {
|
|
31
|
+
caretColor: 'transparent'
|
|
32
|
+
},
|
|
33
|
+
'.cm-content': {
|
|
34
|
+
cursor: 'text',
|
|
35
|
+
caretColor: "var(--ds-text, #172B4D)",
|
|
36
|
+
margin: "var(--ds-space-100, 8px)",
|
|
37
|
+
padding: "var(--ds-space-0, 0px)"
|
|
38
|
+
},
|
|
39
|
+
'.cm-scroller': {
|
|
40
|
+
backgroundColor: "var(--ds-background-neutral, #091E420F)",
|
|
41
|
+
// Custom syntax styling to match existing styling
|
|
42
|
+
['lineHeight']: 'unset',
|
|
43
|
+
fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
|
|
44
|
+
borderRadius: "var(--ds-border-radius, 4px)",
|
|
45
|
+
backgroundImage: overflowShadow({
|
|
46
|
+
leftCoverWidth: "var(--ds-space-300, 24px)"
|
|
47
|
+
}),
|
|
48
|
+
backgroundAttachment: 'local, local, local, local, scroll, scroll, scroll, scroll'
|
|
49
|
+
},
|
|
50
|
+
'&.cm-focused .cm-cursor': {
|
|
51
|
+
borderLeftColor: "var(--ds-text, #172B4D)"
|
|
52
|
+
},
|
|
53
|
+
'.cm-gutters': {
|
|
54
|
+
backgroundColor: "var(--ds-background-neutral, #091E420F)",
|
|
55
|
+
border: 'none',
|
|
56
|
+
padding: "var(--ds-space-100, 8px)",
|
|
57
|
+
color: "var(--ds-text-subtlest, #626F86)"
|
|
58
|
+
},
|
|
59
|
+
'.cm-lineNumbers .cm-gutterElement': {
|
|
60
|
+
paddingLeft: "var(--ds-space-0, 0px)",
|
|
61
|
+
paddingRight: "var(--ds-space-0, 0px)",
|
|
62
|
+
minWidth: 'unset'
|
|
63
|
+
},
|
|
64
|
+
// Set the gutter element min height to prevent flicker of styling while
|
|
65
|
+
// codemirror is calculating (which happens after an animation frame).
|
|
66
|
+
// Example problem: https://github.com/codemirror/dev/issues/1076
|
|
67
|
+
// Ignore the first gutter element as it is a special hidden element.
|
|
68
|
+
'.cm-gutterElement:not(:first-child)': {
|
|
69
|
+
minHeight: LINE_HEIGHT
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
function overflowShadow({
|
|
73
|
+
leftCoverWidth,
|
|
74
|
+
rightCoverWidth
|
|
75
|
+
}) {
|
|
76
|
+
const width = "var(--ds-space-100, 8px)";
|
|
77
|
+
const leftCoverWidthResolved = leftCoverWidth || width;
|
|
78
|
+
const rightCoverWidthResolved = rightCoverWidth || width;
|
|
79
|
+
return `
|
|
80
|
+
linear-gradient(
|
|
81
|
+
to right,
|
|
82
|
+
${"var(--ds-background-neutral, #091E420F)"} ${leftCoverWidthResolved},
|
|
83
|
+
transparent ${leftCoverWidthResolved}
|
|
84
|
+
),
|
|
85
|
+
linear-gradient(
|
|
86
|
+
to right,
|
|
87
|
+
${"var(--ds-surface-raised, #FFFFFF)"} ${leftCoverWidthResolved},
|
|
88
|
+
transparent ${leftCoverWidthResolved}
|
|
89
|
+
),
|
|
90
|
+
linear-gradient(
|
|
91
|
+
to left,
|
|
92
|
+
${"var(--ds-background-neutral, #091E420F)"} ${rightCoverWidthResolved},
|
|
93
|
+
transparent ${rightCoverWidthResolved}
|
|
94
|
+
),
|
|
95
|
+
linear-gradient(
|
|
96
|
+
to left,
|
|
97
|
+
${"var(--ds-surface-raised, #FFFFFF)"} ${rightCoverWidthResolved},
|
|
98
|
+
transparent ${rightCoverWidthResolved}
|
|
99
|
+
),
|
|
100
|
+
linear-gradient(
|
|
101
|
+
to left,
|
|
102
|
+
${"var(--ds-shadow-overflow-spread, #091e4229)"} 0,
|
|
103
|
+
${"var(--ds-UNSAFE-transparent, transparent)"} ${width}
|
|
104
|
+
),
|
|
105
|
+
linear-gradient(
|
|
106
|
+
to left,
|
|
107
|
+
${"var(--ds-shadow-overflow-perimeter, #091e421f)"} 0,
|
|
108
|
+
${"var(--ds-UNSAFE-transparent, transparent)"} ${width}
|
|
109
|
+
),
|
|
110
|
+
linear-gradient(
|
|
111
|
+
to right,
|
|
112
|
+
${"var(--ds-shadow-overflow-spread, #091e4229)"} 0,
|
|
113
|
+
${"var(--ds-UNSAFE-transparent, transparent)"} ${width}
|
|
114
|
+
),
|
|
115
|
+
linear-gradient(
|
|
116
|
+
to right,
|
|
117
|
+
${"var(--ds-shadow-overflow-perimeter, #091e421f)"} 0,
|
|
118
|
+
${"var(--ds-UNSAFE-transparent, transparent)"} ${width}
|
|
119
|
+
)
|
|
120
|
+
`;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
// Based on `platform/packages/design-system/code/src/internal/theme/styles.tsx`
|
|
124
|
+
export const highlightStyle = HighlightStyle.define([{
|
|
125
|
+
tag: tags.meta,
|
|
126
|
+
color: "var(--ds-text, #172B4D)"
|
|
127
|
+
}, {
|
|
128
|
+
tag: tags.link,
|
|
129
|
+
textDecoration: 'underline'
|
|
130
|
+
}, {
|
|
131
|
+
tag: tags.heading,
|
|
132
|
+
textDecoration: 'underline',
|
|
133
|
+
// Custom syntax styling to match existing styling
|
|
134
|
+
fontWeight: "var(--ds-font-weight-bold, 700)"
|
|
135
|
+
}, {
|
|
136
|
+
tag: tags.emphasis,
|
|
137
|
+
fontStyle: 'italic'
|
|
138
|
+
}, {
|
|
139
|
+
tag: tags.strong,
|
|
140
|
+
// Custom syntax styling to match existing styling
|
|
141
|
+
fontWeight: "var(--ds-font-weight-bold, 700)"
|
|
142
|
+
}, {
|
|
143
|
+
tag: tags.strikethrough,
|
|
144
|
+
textDecoration: 'line-through'
|
|
145
|
+
}, {
|
|
146
|
+
tag: tags.keyword,
|
|
147
|
+
color: "var(--ds-text-accent-blue, #0055CC)",
|
|
148
|
+
// Custom syntax styling to match existing styling
|
|
149
|
+
fontWeight: "var(--ds-font-weight-bold, 700)"
|
|
150
|
+
}, {
|
|
151
|
+
tag: [tags.atom, tags.bool, tags.url, tags.contentSeparator, tags.labelName],
|
|
152
|
+
color: "var(--ds-text-accent-blue, #0055CC)"
|
|
153
|
+
}, {
|
|
154
|
+
tag: [tags.literal, tags.inserted],
|
|
155
|
+
color: "var(--ds-text-accent-blue, #0055CC)"
|
|
156
|
+
}, {
|
|
157
|
+
tag: [tags.string, tags.deleted],
|
|
158
|
+
color: "var(--ds-text-accent-green, #216E4E)"
|
|
159
|
+
}, {
|
|
160
|
+
tag: [tags.special(tags.string)],
|
|
161
|
+
color: "var(--ds-text-accent-green, #216E4E)"
|
|
162
|
+
}, {
|
|
163
|
+
tag: [tags.regexp, tags.escape],
|
|
164
|
+
color: "var(--ds-text-accent-teal, #206A83)"
|
|
165
|
+
}, {
|
|
166
|
+
tag: tags.definition(tags.variableName),
|
|
167
|
+
color: "var(--ds-text, #172B4D)"
|
|
168
|
+
}, {
|
|
169
|
+
tag: tags.local(tags.variableName),
|
|
170
|
+
color: "var(--ds-text, #172B4D)"
|
|
171
|
+
}, {
|
|
172
|
+
tag: [tags.typeName, tags.namespace],
|
|
173
|
+
color: "var(--ds-text-accent-blue, #0055CC)"
|
|
174
|
+
}, {
|
|
175
|
+
tag: tags.className,
|
|
176
|
+
color: "var(--ds-text-accent-purple, #5E4DB2)"
|
|
177
|
+
}, {
|
|
178
|
+
tag: [tags.special(tags.variableName), tags.macroName],
|
|
179
|
+
color: "var(--ds-text, #172B4D)"
|
|
180
|
+
}, {
|
|
181
|
+
tag: tags.definition(tags.propertyName),
|
|
182
|
+
color: "var(--ds-text, #172B4D)"
|
|
183
|
+
}, {
|
|
184
|
+
tag: tags.comment,
|
|
185
|
+
color: "var(--ds-text-subtlest, #626F86)",
|
|
186
|
+
fontStyle: 'italic'
|
|
187
|
+
}, {
|
|
188
|
+
tag: tags.invalid,
|
|
189
|
+
color: "var(--ds-text, #172B4D)"
|
|
190
|
+
}]);
|
|
@@ -7,6 +7,8 @@ import { BaseViewer } from '../base-viewer';
|
|
|
7
7
|
import { DEFAULT_LANGUAGE, normaliseLineBreaks } from './util';
|
|
8
8
|
import { getLanguageType, getExtension } from '@atlaskit/media-ui/codeViewer';
|
|
9
9
|
import { msgToText } from './msg-parser';
|
|
10
|
+
import { CodeRendererAdvanced } from './CodeRendererAdvanced/CodeRendererAdvanced';
|
|
11
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
12
|
const moduleLoader = () => import( /* webpackChunkName: "@atlaskit-internal_media-code-viewer" */'./codeViewerRenderer');
|
|
11
13
|
const componentLoader = () => moduleLoader().then(module => module.CodeViewRenderer);
|
|
12
14
|
export class CodeViewer extends BaseViewer {
|
|
@@ -89,6 +91,15 @@ export class CodeViewer extends BaseViewer {
|
|
|
89
91
|
if (!CodeViewerComponent) {
|
|
90
92
|
return /*#__PURE__*/React.createElement(Spinner, null);
|
|
91
93
|
}
|
|
94
|
+
if (fg('media_advanced_text_viewer')) {
|
|
95
|
+
return /*#__PURE__*/React.createElement(CodeRendererAdvanced, {
|
|
96
|
+
item: item,
|
|
97
|
+
src: content,
|
|
98
|
+
onSuccess: onSuccess,
|
|
99
|
+
onError: onError,
|
|
100
|
+
onClose: onClose
|
|
101
|
+
});
|
|
102
|
+
}
|
|
92
103
|
return /*#__PURE__*/React.createElement(CodeViewerComponent, {
|
|
93
104
|
item: item,
|
|
94
105
|
src: content,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ANALYTICS_MEDIA_CHANNEL, sanitiseAnalyticsPayload } from '@atlaskit/media-common/analytics';
|
|
2
2
|
var componentName = 'mediaViewer';
|
|
3
3
|
var packageName = "@atlaskit/media-viewer";
|
|
4
|
-
var packageVersion = "52.
|
|
4
|
+
var packageVersion = "52.2.0";
|
|
5
5
|
export { packageName, packageVersion, componentName, componentName as component };
|
|
6
6
|
export function getFileAttributes(fileState) {
|
|
7
7
|
if (!fileState) {
|
|
@@ -5,7 +5,7 @@ import { UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atl
|
|
|
5
5
|
import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
|
|
6
6
|
import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
|
|
7
7
|
var packageName = "@atlaskit/media-viewer";
|
|
8
|
-
var packageVersion = "52.
|
|
8
|
+
var packageVersion = "52.2.0";
|
|
9
9
|
var ufoExperience;
|
|
10
10
|
var getExperience = function getExperience() {
|
|
11
11
|
if (!ufoExperience) {
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
._154iidpf{top:0}
|
|
2
|
+
._18m91wug{overflow-y:auto}
|
|
3
|
+
._1ltvidpf{left:0}
|
|
4
|
+
._1reo1wug{overflow-x:auto}
|
|
5
|
+
._1xi2idpf{right:0}
|
|
6
|
+
._4t3i8ved{height:75px}
|
|
7
|
+
._94n5idpf{bottom:0}
|
|
8
|
+
._bfhk15j7{background-color:var(--ds-surface,#f4f5f7)}
|
|
9
|
+
._bfhk1nox{background-color:#1d2125}
|
|
10
|
+
._kqswstnw{position:absolute}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/* CodeRendererAdvanced.tsx generated by @compiled/babel-plugin v0.36.1 */
|
|
2
|
+
import "./CodeRendererAdvanced.compiled.css";
|
|
3
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
4
|
+
import React, { useRef } from 'react';
|
|
5
|
+
import { EditorView, lineNumbers, gutters } from '@codemirror/view';
|
|
6
|
+
import { Compartment, EditorState } from '@codemirror/state';
|
|
7
|
+
import { languages } from '@codemirror/language-data';
|
|
8
|
+
import { syntaxHighlighting } from '@codemirror/language';
|
|
9
|
+
import { cmTheme, highlightStyle } from './theme';
|
|
10
|
+
var codeViewWrapperStyles = null;
|
|
11
|
+
var codeViewerHeaderBarStyles = null;
|
|
12
|
+
export var CodeRendererAdvanced = function CodeRendererAdvanced(props) {
|
|
13
|
+
var nodeRef = useRef(function (elem) {
|
|
14
|
+
var _props$item$name$spli, _props$onSuccess;
|
|
15
|
+
if (!elem) {
|
|
16
|
+
return;
|
|
17
|
+
}
|
|
18
|
+
var extension = (_props$item$name$spli = props.item.name.split('.').pop()) !== null && _props$item$name$spli !== void 0 ? _props$item$name$spli : '';
|
|
19
|
+
var languageCompartment = new Compartment();
|
|
20
|
+
var view = new EditorView({
|
|
21
|
+
doc: props.src,
|
|
22
|
+
parent: elem,
|
|
23
|
+
extensions: [lineNumbers(), gutters(), EditorState.readOnly.of(true), EditorView.editable.of(false), EditorView.lineWrapping, cmTheme, syntaxHighlighting(highlightStyle), languageCompartment.of([])]
|
|
24
|
+
});
|
|
25
|
+
(_props$onSuccess = props.onSuccess) === null || _props$onSuccess === void 0 || _props$onSuccess.call(props);
|
|
26
|
+
var language = languages.find(function (lang) {
|
|
27
|
+
return lang.extensions.includes(extension);
|
|
28
|
+
});
|
|
29
|
+
language === null || language === void 0 || language.load().then(function (val) {
|
|
30
|
+
view.dispatch({
|
|
31
|
+
effects: languageCompartment.reconfigure(val)
|
|
32
|
+
});
|
|
33
|
+
});
|
|
34
|
+
return function () {
|
|
35
|
+
view.destroy();
|
|
36
|
+
};
|
|
37
|
+
});
|
|
38
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
39
|
+
"data-testid": props.testId,
|
|
40
|
+
className: ax(["_1reo1wug _18m91wug _kqswstnw _1ltvidpf _154iidpf _1xi2idpf _94n5idpf _bfhk15j7"])
|
|
41
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
42
|
+
className: ax(["_4t3i8ved _bfhk1nox"])
|
|
43
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
44
|
+
ref: nodeRef.current
|
|
45
|
+
}));
|
|
46
|
+
};
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
import { EditorView as CodeMirror } from '@codemirror/view';
|
|
3
|
+
import { HighlightStyle } from '@codemirror/language';
|
|
4
|
+
import { tags } from '@lezer/highlight';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* These styles are copied directly from
|
|
8
|
+
* packages/editor/editor-plugin-code-block-advanced/src/nodeviews/codeBlockAdvanced.ts
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
var LINE_HEIGHT = '1.5rem';
|
|
12
|
+
export var cmTheme = CodeMirror.theme({
|
|
13
|
+
'&': _defineProperty(_defineProperty({
|
|
14
|
+
backgroundColor: "var(--ds-background-neutral, #091E420F)",
|
|
15
|
+
padding: '0',
|
|
16
|
+
marginTop: "var(--ds-space-100, 8px)",
|
|
17
|
+
marginBottom: "var(--ds-space-100, 8px)"
|
|
18
|
+
}, 'fontSize', '0.875rem'), 'lineHeight', LINE_HEIGHT),
|
|
19
|
+
'&.cm-focused': {
|
|
20
|
+
outline: 'none'
|
|
21
|
+
},
|
|
22
|
+
'.cm-line': {
|
|
23
|
+
padding: '0'
|
|
24
|
+
},
|
|
25
|
+
'&.cm-editor.code-block.danger': {
|
|
26
|
+
backgroundColor: "var(--ds-background-danger, #FFECEB)"
|
|
27
|
+
},
|
|
28
|
+
'.cm-content[aria-readonly="true"]': {
|
|
29
|
+
caretColor: 'transparent'
|
|
30
|
+
},
|
|
31
|
+
'.cm-content': {
|
|
32
|
+
cursor: 'text',
|
|
33
|
+
caretColor: "var(--ds-text, #172B4D)",
|
|
34
|
+
margin: "var(--ds-space-100, 8px)",
|
|
35
|
+
padding: "var(--ds-space-0, 0px)"
|
|
36
|
+
},
|
|
37
|
+
'.cm-scroller': _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
|
|
38
|
+
backgroundColor: "var(--ds-background-neutral, #091E420F)"
|
|
39
|
+
}, 'lineHeight', 'unset'), "fontFamily", "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"), "borderRadius", "var(--ds-border-radius, 4px)"), "backgroundImage", overflowShadow({
|
|
40
|
+
leftCoverWidth: "var(--ds-space-300, 24px)"
|
|
41
|
+
})), "backgroundAttachment", 'local, local, local, local, scroll, scroll, scroll, scroll'),
|
|
42
|
+
'&.cm-focused .cm-cursor': {
|
|
43
|
+
borderLeftColor: "var(--ds-text, #172B4D)"
|
|
44
|
+
},
|
|
45
|
+
'.cm-gutters': {
|
|
46
|
+
backgroundColor: "var(--ds-background-neutral, #091E420F)",
|
|
47
|
+
border: 'none',
|
|
48
|
+
padding: "var(--ds-space-100, 8px)",
|
|
49
|
+
color: "var(--ds-text-subtlest, #626F86)"
|
|
50
|
+
},
|
|
51
|
+
'.cm-lineNumbers .cm-gutterElement': {
|
|
52
|
+
paddingLeft: "var(--ds-space-0, 0px)",
|
|
53
|
+
paddingRight: "var(--ds-space-0, 0px)",
|
|
54
|
+
minWidth: 'unset'
|
|
55
|
+
},
|
|
56
|
+
// Set the gutter element min height to prevent flicker of styling while
|
|
57
|
+
// codemirror is calculating (which happens after an animation frame).
|
|
58
|
+
// Example problem: https://github.com/codemirror/dev/issues/1076
|
|
59
|
+
// Ignore the first gutter element as it is a special hidden element.
|
|
60
|
+
'.cm-gutterElement:not(:first-child)': {
|
|
61
|
+
minHeight: LINE_HEIGHT
|
|
62
|
+
}
|
|
63
|
+
});
|
|
64
|
+
function overflowShadow(_ref) {
|
|
65
|
+
var leftCoverWidth = _ref.leftCoverWidth,
|
|
66
|
+
rightCoverWidth = _ref.rightCoverWidth;
|
|
67
|
+
var width = "var(--ds-space-100, 8px)";
|
|
68
|
+
var leftCoverWidthResolved = leftCoverWidth || width;
|
|
69
|
+
var rightCoverWidthResolved = rightCoverWidth || width;
|
|
70
|
+
return "\n\tlinear-gradient(\n\t\tto right,\n\t\t".concat("var(--ds-background-neutral, #091E420F)", " ", leftCoverWidthResolved, ",\n\t\ttransparent ").concat(leftCoverWidthResolved, "\n\t),\n\tlinear-gradient(\n\t\tto right,\n\t\t", "var(--ds-surface-raised, #FFFFFF)", " ").concat(leftCoverWidthResolved, ",\n\t\ttransparent ").concat(leftCoverWidthResolved, "\n\t),\n\tlinear-gradient(\n\t\tto left,\n\t\t", "var(--ds-background-neutral, #091E420F)", " ").concat(rightCoverWidthResolved, ",\n\t\ttransparent ").concat(rightCoverWidthResolved, "\n\t),\n\tlinear-gradient(\n\t\tto left,\n\t\t", "var(--ds-surface-raised, #FFFFFF)", " ").concat(rightCoverWidthResolved, ",\n\t\ttransparent ").concat(rightCoverWidthResolved, "\n\t),\n\tlinear-gradient(\n\t\tto left,\n\t\t", "var(--ds-shadow-overflow-spread, #091e4229)", " 0,\n\t\t", "var(--ds-UNSAFE-transparent, transparent)", " ").concat(width, "\n\t),\n\tlinear-gradient(\n\t\tto left,\n\t\t", "var(--ds-shadow-overflow-perimeter, #091e421f)", " 0,\n\t\t", "var(--ds-UNSAFE-transparent, transparent)", " ").concat(width, "\n\t),\n\tlinear-gradient(\n\t\tto right,\n\t\t", "var(--ds-shadow-overflow-spread, #091e4229)", " 0,\n\t\t", "var(--ds-UNSAFE-transparent, transparent)", " ").concat(width, "\n\t),\n\tlinear-gradient(\n\t\tto right,\n\t\t", "var(--ds-shadow-overflow-perimeter, #091e421f)", " 0,\n\t\t", "var(--ds-UNSAFE-transparent, transparent)", " ").concat(width, "\n\t)\n");
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
// Based on `platform/packages/design-system/code/src/internal/theme/styles.tsx`
|
|
74
|
+
export var highlightStyle = HighlightStyle.define([{
|
|
75
|
+
tag: tags.meta,
|
|
76
|
+
color: "var(--ds-text, #172B4D)"
|
|
77
|
+
}, {
|
|
78
|
+
tag: tags.link,
|
|
79
|
+
textDecoration: 'underline'
|
|
80
|
+
}, {
|
|
81
|
+
tag: tags.heading,
|
|
82
|
+
textDecoration: 'underline',
|
|
83
|
+
// Custom syntax styling to match existing styling
|
|
84
|
+
fontWeight: "var(--ds-font-weight-bold, 700)"
|
|
85
|
+
}, {
|
|
86
|
+
tag: tags.emphasis,
|
|
87
|
+
fontStyle: 'italic'
|
|
88
|
+
}, {
|
|
89
|
+
tag: tags.strong,
|
|
90
|
+
// Custom syntax styling to match existing styling
|
|
91
|
+
fontWeight: "var(--ds-font-weight-bold, 700)"
|
|
92
|
+
}, {
|
|
93
|
+
tag: tags.strikethrough,
|
|
94
|
+
textDecoration: 'line-through'
|
|
95
|
+
}, {
|
|
96
|
+
tag: tags.keyword,
|
|
97
|
+
color: "var(--ds-text-accent-blue, #0055CC)",
|
|
98
|
+
// Custom syntax styling to match existing styling
|
|
99
|
+
fontWeight: "var(--ds-font-weight-bold, 700)"
|
|
100
|
+
}, {
|
|
101
|
+
tag: [tags.atom, tags.bool, tags.url, tags.contentSeparator, tags.labelName],
|
|
102
|
+
color: "var(--ds-text-accent-blue, #0055CC)"
|
|
103
|
+
}, {
|
|
104
|
+
tag: [tags.literal, tags.inserted],
|
|
105
|
+
color: "var(--ds-text-accent-blue, #0055CC)"
|
|
106
|
+
}, {
|
|
107
|
+
tag: [tags.string, tags.deleted],
|
|
108
|
+
color: "var(--ds-text-accent-green, #216E4E)"
|
|
109
|
+
}, {
|
|
110
|
+
tag: [tags.special(tags.string)],
|
|
111
|
+
color: "var(--ds-text-accent-green, #216E4E)"
|
|
112
|
+
}, {
|
|
113
|
+
tag: [tags.regexp, tags.escape],
|
|
114
|
+
color: "var(--ds-text-accent-teal, #206A83)"
|
|
115
|
+
}, {
|
|
116
|
+
tag: tags.definition(tags.variableName),
|
|
117
|
+
color: "var(--ds-text, #172B4D)"
|
|
118
|
+
}, {
|
|
119
|
+
tag: tags.local(tags.variableName),
|
|
120
|
+
color: "var(--ds-text, #172B4D)"
|
|
121
|
+
}, {
|
|
122
|
+
tag: [tags.typeName, tags.namespace],
|
|
123
|
+
color: "var(--ds-text-accent-blue, #0055CC)"
|
|
124
|
+
}, {
|
|
125
|
+
tag: tags.className,
|
|
126
|
+
color: "var(--ds-text-accent-purple, #5E4DB2)"
|
|
127
|
+
}, {
|
|
128
|
+
tag: [tags.special(tags.variableName), tags.macroName],
|
|
129
|
+
color: "var(--ds-text, #172B4D)"
|
|
130
|
+
}, {
|
|
131
|
+
tag: tags.definition(tags.propertyName),
|
|
132
|
+
color: "var(--ds-text, #172B4D)"
|
|
133
|
+
}, {
|
|
134
|
+
tag: tags.comment,
|
|
135
|
+
color: "var(--ds-text-subtlest, #626F86)",
|
|
136
|
+
fontStyle: 'italic'
|
|
137
|
+
}, {
|
|
138
|
+
tag: tags.invalid,
|
|
139
|
+
color: "var(--ds-text, #172B4D)"
|
|
140
|
+
}]);
|
|
@@ -16,6 +16,8 @@ import { BaseViewer } from '../base-viewer';
|
|
|
16
16
|
import { DEFAULT_LANGUAGE, normaliseLineBreaks } from './util';
|
|
17
17
|
import { getLanguageType, getExtension } from '@atlaskit/media-ui/codeViewer';
|
|
18
18
|
import { msgToText } from './msg-parser';
|
|
19
|
+
import { CodeRendererAdvanced } from './CodeRendererAdvanced/CodeRendererAdvanced';
|
|
20
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
19
21
|
var moduleLoader = function moduleLoader() {
|
|
20
22
|
return import( /* webpackChunkName: "@atlaskit-internal_media-code-viewer" */'./codeViewerRenderer');
|
|
21
23
|
};
|
|
@@ -173,6 +175,15 @@ export var CodeViewer = /*#__PURE__*/function (_BaseViewer) {
|
|
|
173
175
|
if (!CodeViewerComponent) {
|
|
174
176
|
return /*#__PURE__*/React.createElement(Spinner, null);
|
|
175
177
|
}
|
|
178
|
+
if (fg('media_advanced_text_viewer')) {
|
|
179
|
+
return /*#__PURE__*/React.createElement(CodeRendererAdvanced, {
|
|
180
|
+
item: item,
|
|
181
|
+
src: content,
|
|
182
|
+
onSuccess: onSuccess,
|
|
183
|
+
onError: onError,
|
|
184
|
+
onClose: onClose
|
|
185
|
+
});
|
|
186
|
+
}
|
|
176
187
|
return /*#__PURE__*/React.createElement(CodeViewerComponent, {
|
|
177
188
|
item: item,
|
|
178
189
|
src: content,
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { type ErrorFileState, type FileState } from '@atlaskit/media-client';
|
|
3
|
+
import { MediaViewerError } from '../../../errors';
|
|
4
|
+
export type Props = {
|
|
5
|
+
item: Exclude<FileState, ErrorFileState>;
|
|
6
|
+
src: string;
|
|
7
|
+
testId?: string;
|
|
8
|
+
onClose?: () => void;
|
|
9
|
+
onSuccess?: () => void;
|
|
10
|
+
onError?: (error: MediaViewerError) => void;
|
|
11
|
+
};
|
|
12
|
+
export declare const CodeRendererAdvanced: (props: Props) => JSX.Element;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { type ErrorFileState, type FileState } from '@atlaskit/media-client';
|
|
3
|
+
import { MediaViewerError } from '../../../errors';
|
|
4
|
+
export type Props = {
|
|
5
|
+
item: Exclude<FileState, ErrorFileState>;
|
|
6
|
+
src: string;
|
|
7
|
+
testId?: string;
|
|
8
|
+
onClose?: () => void;
|
|
9
|
+
onSuccess?: () => void;
|
|
10
|
+
onError?: (error: MediaViewerError) => void;
|
|
11
|
+
};
|
|
12
|
+
export declare const CodeRendererAdvanced: (props: Props) => JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/media-viewer",
|
|
3
|
-
"version": "52.
|
|
3
|
+
"version": "52.2.0",
|
|
4
4
|
"description": "MediaViewer is Atlassian's powerful solution for viewing files on the web. It's both powerful and extendable yet easy-to-integrate",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
53
53
|
"@atlaskit/portal": "^5.1.0",
|
|
54
54
|
"@atlaskit/primitives": "^14.8.0",
|
|
55
|
-
"@atlaskit/side-navigation": "^
|
|
55
|
+
"@atlaskit/side-navigation": "^11.0.0",
|
|
56
56
|
"@atlaskit/spinner": "^18.0.0",
|
|
57
57
|
"@atlaskit/textfield": "^8.0.0",
|
|
58
58
|
"@atlaskit/theme": "^18.0.0",
|
|
@@ -60,8 +60,13 @@
|
|
|
60
60
|
"@atlaskit/tooltip": "^20.0.0",
|
|
61
61
|
"@atlaskit/ufo": "^0.4.0",
|
|
62
62
|
"@babel/runtime": "^7.0.0",
|
|
63
|
+
"@codemirror/language": "6.10.8",
|
|
64
|
+
"@codemirror/language-data": "6.5.1",
|
|
65
|
+
"@codemirror/state": "6.5.1",
|
|
66
|
+
"@codemirror/view": "6.36.2",
|
|
63
67
|
"@compiled/react": "^0.18.3",
|
|
64
68
|
"@kenjiuno/msgreader": "^1.2.6",
|
|
69
|
+
"@lezer/highlight": "1.2.1",
|
|
65
70
|
"deep-equal": "^1.0.1",
|
|
66
71
|
"fflate": "^0.8.1",
|
|
67
72
|
"mime": "^2.4.6",
|
|
@@ -117,6 +122,9 @@
|
|
|
117
122
|
},
|
|
118
123
|
"platform_media_video_captions": {
|
|
119
124
|
"type": "boolean"
|
|
125
|
+
},
|
|
126
|
+
"media_advanced_text_viewer": {
|
|
127
|
+
"type": "boolean"
|
|
120
128
|
}
|
|
121
129
|
},
|
|
122
130
|
"techstack": {
|