@instructure/ui-source-code-editor 11.6.0 → 11.6.1-pr-snapshot-1779894247159

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 CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [11.6.1-pr-snapshot-1779894247159](https://github.com/instructure/instructure-ui/compare/v11.6.0...v11.6.1-pr-snapshot-1779894247159) (2026-05-27)
7
+
8
+ **Note:** Version bump only for package @instructure/ui-source-code-editor
9
+
10
+
11
+
12
+
13
+
6
14
  # [11.6.0](https://github.com/instructure/instructure-ui/compare/v11.5.0...v11.6.0) (2026-02-18)
7
15
 
8
16
  **Note:** Version bump only for package @instructure/ui-source-code-editor
@@ -1,9 +1,3 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.allowedProps = void 0;
7
1
  /*
8
2
  * The MIT License (MIT)
9
3
  *
@@ -28,6 +22,16 @@ exports.allowedProps = void 0;
28
22
  * SOFTWARE.
29
23
  */
30
24
 
31
- const allowedProps = exports.allowedProps = ['label', 'language', 'readOnly', 'editable', 'lineNumbers', 'foldGutter', 'highlightActiveLineGutter', 'highlightActiveLine', 'lineWrapping', 'autofocus', 'spellcheck', 'direction', 'rtlMoveVisually', 'indentOnLoad', 'indentWithTab', 'indentUnit', 'defaultValue', 'value', 'onChange', 'onFocus', 'onBlur', 'attachment', 'height', 'width',
32
- // 'darkTheme',
33
- 'elementRef', 'containerRef', 'searchConfig'];
25
+ module.exports = {
26
+ presets: [
27
+ [
28
+ require('@instructure/ui-babel-preset'),
29
+ {
30
+ coverage: Boolean(process.env.COVERAGE),
31
+ esModules: Boolean(process.env.ES_MODULES),
32
+ removeConsole: process.env.NODE_ENV === 'production',
33
+ transformImports: Boolean(process.env.TRANSFORM_IMPORTS)
34
+ }
35
+ ]
36
+ ]
37
+ }
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@instructure/ui-source-code-editor",
3
- "version": "11.6.0",
3
+ "version": "11.6.1-pr-snapshot-1779894247159",
4
+ "type": "module",
4
5
  "description": "A UI component library made by Instructure Inc.",
5
6
  "author": "Instructure, Inc. Engineering and Product Design",
6
7
  "module": "./es/index.js",
7
- "main": "./lib/index.js",
8
8
  "types": "./types/index.d.ts",
9
9
  "repository": {
10
10
  "type": "git",
@@ -29,24 +29,24 @@
29
29
  "@codemirror/state": "^6.4.1",
30
30
  "@codemirror/view": "^6.34.1",
31
31
  "@lezer/highlight": "1.2.1",
32
- "@instructure/emotion": "11.6.0",
33
- "@instructure/shared-types": "11.6.0",
34
- "@instructure/ui-dom-utils": "11.6.0",
35
- "@instructure/ui-a11y-content": "11.6.0",
36
- "@instructure/ui-buttons": "11.6.0",
37
- "@instructure/ui-i18n": "11.6.0",
38
- "@instructure/ui-icons": "11.6.0",
39
- "@instructure/ui-react-utils": "11.6.0",
40
- "@instructure/ui-text-input": "11.6.0",
41
- "@instructure/ui-themes": "11.6.0",
42
- "@instructure/ui-utils": "11.6.0"
32
+ "@instructure/emotion": "11.6.1-pr-snapshot-1779894247159",
33
+ "@instructure/shared-types": "11.6.1-pr-snapshot-1779894247159",
34
+ "@instructure/ui-buttons": "11.6.1-pr-snapshot-1779894247159",
35
+ "@instructure/ui-a11y-content": "11.6.1-pr-snapshot-1779894247159",
36
+ "@instructure/ui-dom-utils": "11.6.1-pr-snapshot-1779894247159",
37
+ "@instructure/ui-i18n": "11.6.1-pr-snapshot-1779894247159",
38
+ "@instructure/ui-icons": "11.6.1-pr-snapshot-1779894247159",
39
+ "@instructure/ui-react-utils": "11.6.1-pr-snapshot-1779894247159",
40
+ "@instructure/ui-text-input": "11.6.1-pr-snapshot-1779894247159",
41
+ "@instructure/ui-themes": "11.6.1-pr-snapshot-1779894247159",
42
+ "@instructure/ui-utils": "11.6.1-pr-snapshot-1779894247159"
43
43
  },
44
44
  "devDependencies": {
45
45
  "@testing-library/jest-dom": "^6.6.3",
46
46
  "@testing-library/react": "15.0.7",
47
47
  "@testing-library/user-event": "^14.6.1",
48
48
  "vitest": "^3.2.2",
49
- "@instructure/ui-babel-preset": "11.6.0"
49
+ "@instructure/ui-babel-preset": "11.6.1-pr-snapshot-1779894247159"
50
50
  },
51
51
  "peerDependencies": {
52
52
  "react": ">=18 <=19",
@@ -60,10 +60,8 @@
60
60
  ".": {
61
61
  "types": "./types/index.d.ts",
62
62
  "import": "./es/index.js",
63
- "require": "./lib/index.js",
64
63
  "default": "./es/index.js"
65
64
  },
66
- "./lib/*": "./lib/*",
67
65
  "./es/*": "./es/*",
68
66
  "./types/*": "./types/*",
69
67
  "./package.json": "./package.json",
@@ -73,7 +71,7 @@
73
71
  "lint": "ui-scripts lint",
74
72
  "lint:fix": "ui-scripts lint --fix",
75
73
  "clean": "ui-scripts clean",
76
- "build": "ui-scripts build --modules es,cjs",
74
+ "build": "ui-scripts build",
77
75
  "build:watch": "pnpm run ts:check -- --watch & ui-scripts build --watch",
78
76
  "build:types": "tsc -p tsconfig.build.json",
79
77
  "ts:check": "tsc -p tsconfig.build.json --noEmit --emitDeclarationOnly false"
@@ -1,126 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.default = customSearch;
8
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
- var _react = require("react");
10
- var _search = require("@codemirror/search");
11
- var _TextInput = require("@instructure/ui-text-input/lib/TextInput");
12
- var _IconButton = require("@instructure/ui-buttons/lib/IconButton");
13
- var _IconArrowOpenDownLine = require("@instructure/ui-icons/lib/IconArrowOpenDownLine.js");
14
- var _IconArrowOpenUpLine2 = require("@instructure/ui-icons/lib/IconArrowOpenUpLine.js");
15
- var _IconSearchLine2 = require("@instructure/ui-icons/lib/IconSearchLine.js");
16
- var _client = require("react-dom/client");
17
- var _jsxRuntime = require("@emotion/react/jsx-runtime");
18
- var _IconSearchLine, _IconArrowOpenDownLin, _IconArrowOpenUpLine;
19
- /*
20
- * The MIT License (MIT)
21
- *
22
- * Copyright (c) 2015 - present Instructure, Inc.
23
- *
24
- * Permission is hereby granted, free of charge, to any person obtaining a copy
25
- * of this software and associated documentation files (the "Software"), to deal
26
- * in the Software without restriction, including without limitation the rights
27
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
28
- * copies of the Software, and to permit persons to whom the Software is
29
- * furnished to do so, subject to the following conditions:
30
- *
31
- * The above copyright notice and this permission notice shall be included in all
32
- * copies or substantial portions of the Software.
33
- *
34
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
35
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
36
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
37
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
38
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
39
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
40
- * SOFTWARE.
41
- */
42
- function SearchPanel({
43
- view,
44
- searchConfig
45
- }) {
46
- const _useState = (0, _react.useState)(''),
47
- _useState2 = (0, _slicedToArray2.default)(_useState, 2),
48
- searchQueryStr = _useState2[0],
49
- setSearchQueryStr = _useState2[1];
50
- const handleChange = (_e, value) => {
51
- setSearchQueryStr(value);
52
- handleHighlightSearch(value);
53
- };
54
- const handleHighlightSearch = searchStr => {
55
- view.dispatch({
56
- effects: _search.setSearchQuery.of(new _search.SearchQuery({
57
- search: searchStr
58
- }))
59
- });
60
- };
61
- const handleKeyDown = e => {
62
- if (e.key !== 'Enter') return;
63
- if (!e.shiftKey) handleFindNext();else handleFindPrev();
64
- };
65
- const handleKeyUp = e => {
66
- if (e.key !== 'Escape') return;
67
- (0, _search.closeSearchPanel)(view);
68
- };
69
- const handleFindNext = () => {
70
- handleHighlightSearch(searchQueryStr);
71
- (0, _search.findNext)(view);
72
- };
73
- const handleFindPrev = () => {
74
- handleHighlightSearch(searchQueryStr);
75
- (0, _search.findPrevious)(view);
76
- };
77
- return (0, _jsxRuntime.jsx)(_TextInput.TextInput, {
78
- renderLabel: "",
79
- inputRef: r => {
80
- setTimeout(() => r === null || r === void 0 ? void 0 : r.focus(), 0);
81
- },
82
- size: "small",
83
- display: "inline-block",
84
- width: "20rem",
85
- placeholder: searchConfig.placeholder,
86
- onChange: handleChange,
87
- onKeyDown: handleKeyDown,
88
- onKeyUp: handleKeyUp,
89
- renderBeforeInput: _IconSearchLine || (_IconSearchLine = (0, _jsxRuntime.jsx)(_IconSearchLine2.IconSearchLine, {
90
- size: "x-small"
91
- })),
92
- renderAfterInput: (0, _jsxRuntime.jsxs)("span", {
93
- children: [(0, _jsxRuntime.jsx)(_IconButton.IconButton, {
94
- size: "small",
95
- withBorder: false,
96
- withBackground: false,
97
- onClick: handleFindNext,
98
- screenReaderLabel: searchConfig.nextResultLabel,
99
- children: _IconArrowOpenDownLin || (_IconArrowOpenDownLin = (0, _jsxRuntime.jsx)(_IconArrowOpenDownLine.IconArrowOpenDownLine, {}))
100
- }), (0, _jsxRuntime.jsx)(_IconButton.IconButton, {
101
- size: "small",
102
- withBorder: false,
103
- withBackground: false,
104
- onClick: handleFindPrev,
105
- screenReaderLabel: searchConfig.prevResultLabel,
106
- children: _IconArrowOpenUpLine || (_IconArrowOpenUpLine = (0, _jsxRuntime.jsx)(_IconArrowOpenUpLine2.IconArrowOpenUpLine, {}))
107
- })]
108
- })
109
- });
110
- }
111
- function customSearch(searchConfig) {
112
- return searchConfig ? (0, _search.search)({
113
- createPanel: view => {
114
- const dom = document.createElement('div');
115
- dom.style.padding = '8px';
116
- const root = (0, _client.createRoot)(dom);
117
- root.render((0, _jsxRuntime.jsx)(SearchPanel, {
118
- view: view,
119
- searchConfig: searchConfig
120
- }));
121
- return {
122
- dom
123
- };
124
- }
125
- }) : [];
126
- }
@@ -1,105 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.rtlHorizontalArrowKeymap = void 0;
7
- var _commands = require("@codemirror/commands");
8
- /*
9
- * The MIT License (MIT)
10
- *
11
- * Copyright (c) 2015 - present Instructure, Inc.
12
- *
13
- * Permission is hereby granted, free of charge, to any person obtaining a copy
14
- * of this software and associated documentation files (the "Software"), to deal
15
- * in the Software without restriction, including without limitation the rights
16
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
17
- * copies of the Software, and to permit persons to whom the Software is
18
- * furnished to do so, subject to the following conditions:
19
- *
20
- * The above copyright notice and this permission notice shall be included in all
21
- * copies or substantial portions of the Software.
22
- *
23
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
24
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
25
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
26
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
27
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
28
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
29
- * SOFTWARE.
30
- */
31
-
32
- const rtlHorizontalArrowKeymap = exports.rtlHorizontalArrowKeymap = [
33
- // Left/Start/Forward
34
- {
35
- key: 'ArrowLeft',
36
- run: _commands.cursorCharRight,
37
- shift: _commands.selectCharRight,
38
- preventDefault: true
39
- }, {
40
- key: 'Mod-ArrowLeft',
41
- mac: 'Alt-ArrowLeft',
42
- run: _commands.cursorGroupRight,
43
- shift: _commands.selectGroupRight
44
- }, {
45
- key: 'Alt-ArrowLeft',
46
- mac: 'Ctrl-ArrowLeft',
47
- run: _commands.cursorSyntaxRight,
48
- shift: _commands.selectSyntaxRight
49
- }, {
50
- mac: 'Cmd-ArrowLeft',
51
- run: _commands.cursorLineBoundaryRight,
52
- shift: _commands.selectLineBoundaryRight
53
- }, {
54
- key: 'Home',
55
- run: _commands.cursorLineBoundaryForward,
56
- shift: _commands.selectLineBoundaryForward
57
- },
58
- // Right/End/Backward
59
- {
60
- key: 'ArrowRight',
61
- run: _commands.cursorCharLeft,
62
- shift: _commands.selectCharLeft,
63
- preventDefault: true
64
- }, {
65
- key: 'Mod-ArrowRight',
66
- mac: 'Alt-ArrowRight',
67
- run: _commands.cursorGroupLeft,
68
- shift: _commands.selectGroupLeft
69
- }, {
70
- key: 'Alt-ArrowRight',
71
- mac: 'Ctrl-ArrowRight',
72
- run: _commands.cursorSyntaxLeft,
73
- shift: _commands.selectSyntaxLeft
74
- }, {
75
- mac: 'Cmd-ArrowRight',
76
- run: _commands.cursorLineBoundaryLeft,
77
- shift: _commands.selectLineBoundaryLeft
78
- }, {
79
- key: 'End',
80
- run: _commands.cursorLineBoundaryBackward,
81
- shift: _commands.selectLineBoundaryBackward
82
- },
83
- // Delete/Backspace
84
- {
85
- key: 'Delete',
86
- run: _commands.deleteCharBackward
87
- }, {
88
- key: 'Mod-Delete',
89
- mac: 'Alt-Delete',
90
- run: _commands.deleteGroupBackward
91
- }, {
92
- key: 'Backspace',
93
- run: _commands.deleteCharForward,
94
- shift: _commands.deleteCharForward
95
- }, {
96
- key: 'Mod-Backspace',
97
- mac: 'Alt-Backspace',
98
- run: _commands.deleteGroupForward
99
- }, {
100
- mac: 'Mod-Delete',
101
- run: _commands.deleteToLineStart
102
- }, {
103
- mac: 'Mod-Backspace',
104
- run: _commands.deleteToLineEnd
105
- }];
@@ -1,542 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.default = exports.SourceCodeEditor = void 0;
8
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
9
- var _react = require("react");
10
- var _deepEqual = require("@instructure/ui-utils/lib/deepEqual.js");
11
- var _state = require("@codemirror/state");
12
- var _view = require("@codemirror/view");
13
- var _autocomplete = require("@codemirror/autocomplete");
14
- var _search = require("@codemirror/search");
15
- var _commands = require("@codemirror/commands");
16
- var _lint = require("@codemirror/lint");
17
- var _language = require("@codemirror/language");
18
- var _langJavascript = require("@codemirror/lang-javascript");
19
- var _langHtml = require("@codemirror/lang-html");
20
- var _langCss = require("@codemirror/lang-css");
21
- var _langMarkdown = require("@codemirror/lang-markdown");
22
- var _langJson = require("@codemirror/lang-json");
23
- var _shell = require("@codemirror/legacy-modes/mode/shell");
24
- var _yaml = require("@codemirror/legacy-modes/mode/yaml");
25
- var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
26
- var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
27
- var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
28
- var _requestAnimationFrame = require("@instructure/ui-dom-utils/lib/requestAnimationFrame.js");
29
- var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
30
- var _textDirectionContextConsumer = require("@instructure/ui-i18n/lib/textDirectionContextConsumer.js");
31
- var _emotion = require("@instructure/emotion");
32
- var _SearchPanel = _interopRequireDefault(require("./SearchPanel"));
33
- var _styles = _interopRequireDefault(require("./styles"));
34
- var _theme = _interopRequireDefault(require("./theme"));
35
- var _customKeybinding = require("./customKeybinding");
36
- var _props = require("./props");
37
- var _jsxRuntime = require("@emotion/react/jsx-runtime");
38
- const _excluded = ["label", "styles"];
39
- var _dec, _dec2, _dec3, _class, _SourceCodeEditor;
40
- /*
41
- * The MIT License (MIT)
42
- *
43
- * Copyright (c) 2015 - present Instructure, Inc.
44
- *
45
- * Permission is hereby granted, free of charge, to any person obtaining a copy
46
- * of this software and associated documentation files (the "Software"), to deal
47
- * in the Software without restriction, including without limitation the rights
48
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
49
- * copies of the Software, and to permit persons to whom the Software is
50
- * furnished to do so, subject to the following conditions:
51
- *
52
- * The above copyright notice and this permission notice shall be included in all
53
- * copies or substantial portions of the Software.
54
- *
55
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
56
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
57
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
58
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
59
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
60
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
61
- * SOFTWARE.
62
- */
63
- // import { oneDarkTheme, oneDarkHighlightStyle } from '@codemirror/theme-one-dark'
64
- /**
65
- ---
66
- category: components
67
- ---
68
- **/
69
- let SourceCodeEditor = exports.SourceCodeEditor = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _textDirectionContextConsumer.textDirectionContextConsumer)(), _dec(_class = _dec2(_class = _dec3(_class = (_SourceCodeEditor = class SourceCodeEditor extends _react.Component {
70
- addAnimationFrame(callback) {
71
- if (typeof callback === 'function') {
72
- this._raf.push((0, _requestAnimationFrame.requestAnimationFrame)(callback));
73
- }
74
- }
75
- cancelAnimationFrames() {
76
- this._raf.forEach(request => request.cancel());
77
- this._raf = [];
78
- }
79
- focus() {
80
- this.addAnimationFrame(() => {
81
- var _this$_editorView;
82
- (_this$_editorView = this._editorView) === null || _this$_editorView === void 0 ? void 0 : _this$_editorView.focus();
83
- });
84
- }
85
- get hasFocus() {
86
- var _this$_editorView2;
87
- return (_this$_editorView2 = this._editorView) === null || _this$_editorView2 === void 0 ? void 0 : _this$_editorView2.hasFocus;
88
- }
89
- selectAll() {
90
- if (this._editorView) {
91
- this.addAnimationFrame(() => {
92
- var _this$currentDocValue;
93
- this.dispatchViewSelection({
94
- anchor: 0,
95
- head: (_this$currentDocValue = this.currentDocValue) === null || _this$currentDocValue === void 0 ? void 0 : _this$currentDocValue.length
96
- });
97
- });
98
- }
99
- }
100
- deselectAll() {
101
- if (this._editorView) {
102
- this.addAnimationFrame(() => {
103
- this.dispatchViewSelection({
104
- anchor: 0,
105
- head: 0
106
- });
107
- });
108
- }
109
- }
110
- indentCurrentSelection() {
111
- this.addAnimationFrame(() => {
112
- if (this._editorView) {
113
- (0, _commands.indentSelection)({
114
- state: this._editorView.state,
115
- dispatch: transaction => {
116
- var _this$_editorView3;
117
- (_this$_editorView3 = this._editorView) === null || _this$_editorView3 === void 0 ? void 0 : _this$_editorView3.update([transaction]);
118
- }
119
- });
120
- }
121
- });
122
- }
123
- indentAll() {
124
- this.addAnimationFrame(() => {
125
- if (this._editorView && this.currentDocValue) {
126
- this.indentCodeRange(0, this.currentDocValue.length);
127
- }
128
- });
129
- }
130
- indentCodeRange(from, to) {
131
- this.addAnimationFrame(() => {
132
- if (this._editorView && this.currentDocValue) {
133
- this.dispatchViewChanges({
134
- changes: (0, _language.indentRange)(this._editorView.state, from, to)
135
- });
136
- }
137
- });
138
- }
139
-
140
- // Attach state effects
141
- dispatchViewEffects(effects) {
142
- if (!this._editorView || !effects) return;
143
- this._editorView.dispatch({
144
- effects
145
- });
146
- }
147
-
148
- // Dispatch changes to the document
149
- dispatchViewChanges({
150
- changes,
151
- selection,
152
- userEvent
153
- }) {
154
- if (!this._editorView || !changes) return;
155
- this._editorView.dispatch({
156
- changes,
157
- ...(selection ? {
158
- selection
159
- } : void 0),
160
- ...(userEvent ? {
161
- userEvent
162
- } : void 0)
163
- });
164
- }
165
-
166
- // Select a portion of the document
167
- dispatchViewSelection(selection) {
168
- if (!this._editorView || !selection) return;
169
- this._editorView.dispatch({
170
- selection
171
- });
172
- }
173
- get currentDocValue() {
174
- var _this$_editorView4;
175
- return (_this$_editorView4 = this._editorView) === null || _this$_editorView4 === void 0 ? void 0 : _this$_editorView4.state.doc;
176
- }
177
-
178
- // when value is passed, the editor should be controlled
179
- get isControlled() {
180
- return typeof this.props.value === 'string';
181
- }
182
- constructor(props) {
183
- super(props);
184
- this._id = void 0;
185
- this.ref = null;
186
- this._containerRef = void 0;
187
- this._editorView = void 0;
188
- this._raf = [];
189
- this._newSelectionAfterValueChange = void 0;
190
- this.handleRef = el => {
191
- const elementRef = this.props.elementRef;
192
- this.ref = el;
193
- if (typeof elementRef === 'function') {
194
- elementRef(el);
195
- }
196
- };
197
- this.handleContainerRef = el => {
198
- const containerRef = this.props.containerRef;
199
- this._containerRef = el || void 0;
200
- if (typeof containerRef === 'function') {
201
- containerRef(el);
202
- }
203
- };
204
- this.assignAriaLabel = () => {
205
- if (this._containerRef) {
206
- const editorDiv = this._containerRef.querySelector('[role="textbox"]');
207
- if (editorDiv) {
208
- editorDiv.setAttribute('aria-labelledby', `${this._id}`);
209
- }
210
- }
211
- };
212
- this._id = props.deterministicId();
213
- }
214
- componentDidMount() {
215
- var _this$props$makeStyle, _this$props2;
216
- const _this$props = this.props,
217
- value = _this$props.value,
218
- defaultValue = _this$props.defaultValue,
219
- autofocus = _this$props.autofocus,
220
- indentOnLoad = _this$props.indentOnLoad;
221
- (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
222
- const state = _state.EditorState.create({
223
- doc: value || defaultValue,
224
- extensions: this.extensions
225
- });
226
- this._editorView = new _view.EditorView({
227
- state,
228
- parent: this._containerRef
229
- });
230
-
231
- // from the a11y team:
232
- // axe devtools and other automated a11y tests both flagging this issue,
233
- // which can be observed while navigating with keyboard:
234
- // Ensure elements that have scrollable content are accessible by keyboard
235
- // To solve this problem, you need to fix at least (1) of the following:
236
- // Element should have focusable content, Element should be focusable
237
- this._editorView.scrollDOM.tabIndex = 0;
238
- if (autofocus) {
239
- this.focus();
240
- }
241
- if (indentOnLoad) {
242
- this.indentAll();
243
- }
244
- this.assignAriaLabel();
245
- }
246
- componentWillUnmount() {
247
- var _this$_editorView5;
248
- (_this$_editorView5 = this._editorView) === null || _this$_editorView5 === void 0 ? void 0 : _this$_editorView5.destroy();
249
- this.cancelAnimationFrames();
250
- }
251
- componentDidUpdate(prevProps) {
252
- var _this$props$makeStyle2, _this$props3;
253
- (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
254
- if (this._editorView) {
255
- if (this.props.value !== prevProps.value) {
256
- this.refreshEditorValue();
257
- }
258
- if (this.shouldUpdateExtensions(prevProps)) {
259
- this.refreshExtensions();
260
- }
261
- }
262
- }
263
- shouldUpdateExtensions(prevProps) {
264
- const propsToObserve = ['styles',
265
- // needed for theme update
266
- 'themeOverride', 'language', 'readOnly', 'editable', 'lineNumbers', 'highlightActiveLineGutter', 'foldGutter', 'lineWrapping', 'autofocus', 'spellcheck', 'direction', 'dir', 'rtlMoveVisually', 'indentOnLoad', 'indentWithTab', 'indentUnit', 'highlightActiveLine', 'attachment'];
267
- for (const prop of propsToObserve) {
268
- if (!(0, _deepEqual.deepEqual)(this.props[prop], prevProps[prop])) {
269
- return true;
270
- }
271
- }
272
- return false;
273
- }
274
- get direction() {
275
- // comes from the `direction` prop and
276
- // falls back to the `dir` prop coming from the bidirectional decorator
277
- return this.props.direction || this.props.dir;
278
- }
279
- get extensions() {
280
- const extensions = [...this.baseExtensions,
281
- // our custom extensions
282
- this.languageExtension, this.onChangeExtension, this.focusListenerExtension, this.announceLineNumberExtension];
283
- if (this.themeExtension) {
284
- extensions.push(this.themeExtension);
285
- }
286
- if (this.props.lineNumbers) {
287
- extensions.push((0, _view.lineNumbers)());
288
- }
289
- if (this.props.highlightActiveLine) {
290
- extensions.push((0, _view.highlightActiveLine)());
291
- }
292
- if (this.props.highlightActiveLineGutter) {
293
- extensions.push((0, _view.highlightActiveLineGutter)());
294
- }
295
- if (this.props.foldGutter) {
296
- extensions.push((0, _language.foldGutter)());
297
- }
298
- if (this.props.lineWrapping) {
299
- extensions.push(_view.EditorView.lineWrapping);
300
- }
301
- if (this.props.editable === false) {
302
- extensions.push(_view.EditorView.editable.of(false));
303
- }
304
- if (this.props.readOnly) {
305
- extensions.push(_state.EditorState.readOnly.of(true));
306
- }
307
- if (this.props.spellcheck) {
308
- extensions.push(_view.EditorView.contentAttributes.of({
309
- spellcheck: 'true'
310
- }));
311
- }
312
- if (this.direction) {
313
- extensions.push(_view.EditorView.contentAttributes.of({
314
- dir: this.direction
315
- }));
316
- }
317
- if (this.props.indentUnit) {
318
- extensions.push(_language.indentUnit.of(this.props.indentUnit));
319
- }
320
- return extensions;
321
- }
322
- get baseExtensions() {
323
- return [
324
- // The extensions are based on codemirrors basic setup from 'codemirror'.
325
- // It is recommended by CodeMirror, that if we want to configure
326
- // our editor more precisely, we have to copy the source
327
- // and adjust it as desired.
328
- (0, _view.highlightSpecialChars)(), (0, _commands.history)(), (0, _view.drawSelection)(), (0, _view.dropCursor)(), _state.EditorState.allowMultipleSelections.of(true), (0, _language.syntaxHighlighting)(_language.defaultHighlightStyle, {
329
- fallback: true
330
- }), (0, _language.bracketMatching)(), (0, _autocomplete.closeBrackets)(), (0, _autocomplete.autocompletion)(), (0, _view.rectangularSelection)(), (0, _view.crosshairCursor)(), (0, _search.highlightSelectionMatches)(), (0, _language.indentOnInput)(), (0, _SearchPanel.default)(this.props.searchConfig), _view.keymap.of(this.keymaps)];
331
- }
332
- get keymaps() {
333
- // TODO: if more keymaps are added, list them in the docs as well (#Command keybinding)
334
- const keymaps = [..._autocomplete.closeBracketsKeymap, ...this.commandKeybinding, ..._commands.historyKeymap, ..._language.foldKeymap, ..._autocomplete.completionKeymap, ..._lint.lintKeymap, ...(this.props.searchConfig ? _search.searchKeymap : [])];
335
- if (this.props.indentWithTab) {
336
- keymaps.push(_commands.indentWithTab);
337
- }
338
- return keymaps;
339
- }
340
- get commandKeybinding() {
341
- const rtlMoveVisually = this.props.rtlMoveVisually;
342
- if (this.direction === 'rtl' && !rtlMoveVisually) {
343
- const overrideableKeys = _customKeybinding.rtlHorizontalArrowKeymap.map(binding => binding.key ? binding.key : binding.mac ? binding.mac : binding);
344
- // we have to remove the binding we want to override from the original,
345
- // otherwise all will be merged and the defaults will still apply
346
- const filteredOriginal = _commands.defaultKeymap.filter(binding => binding.key ? overrideableKeys.indexOf(binding.key) < 0 : binding.mac ? overrideableKeys.indexOf(binding.mac) < 0 : false);
347
- return [...filteredOriginal, ..._customKeybinding.rtlHorizontalArrowKeymap];
348
- }
349
- return _commands.defaultKeymap;
350
- }
351
- get themeExtension() {
352
- const styles = this.props.styles;
353
- if (!(styles !== null && styles !== void 0 && styles.theme) || !styles.highlightStyle) {
354
- return void 0;
355
- }
356
- const theme = _view.EditorView.theme(styles === null || styles === void 0 ? void 0 : styles.theme);
357
- const highlightStyle = (0, _language.syntaxHighlighting)(_language.HighlightStyle.define(styles === null || styles === void 0 ? void 0 : styles.highlightStyle));
358
-
359
- // see notes in props.ts
360
- // if (darkTheme) {
361
- // theme = oneDarkTheme
362
- // highlightStyle = syntaxHighlighting(oneDarkHighlightStyle)
363
- // }
364
-
365
- return [theme, highlightStyle];
366
- }
367
- get languageExtension() {
368
- const language = this.props.language;
369
- switch (language) {
370
- case 'json':
371
- return (0, _langJson.json)();
372
- case 'js':
373
- case 'jsx':
374
- case 'javascript':
375
- return (0, _langJavascript.javascript)({
376
- jsx: true,
377
- typescript: true
378
- });
379
- case 'html':
380
- return (0, _langHtml.html)({
381
- matchClosingTags: true,
382
- autoCloseTags: true
383
- });
384
- case 'css':
385
- return (0, _langCss.css)();
386
- case 'markdown':
387
- return (0, _langMarkdown.markdown)();
388
- case 'sh':
389
- case 'shell':
390
- case 'bash':
391
- // ????
392
- return _language.StreamLanguage.define(_shell.shell);
393
- case 'yml':
394
- case 'yaml':
395
- return _language.StreamLanguage.define(_yaml.yaml);
396
- default:
397
- return (0, _langJavascript.javascript)({
398
- jsx: true,
399
- typescript: true
400
- });
401
- }
402
- }
403
- callOnChangeHandler(newValue) {
404
- const _this$props4 = this.props,
405
- onChange = _this$props4.onChange,
406
- value = _this$props4.value;
407
- this.addAnimationFrame(() => {
408
- if (typeof onChange === 'function' && newValue !== value) {
409
- onChange(newValue);
410
- }
411
- });
412
- }
413
- get onChangeExtension() {
414
- return _state.EditorState.changeFilter.of(transaction => {
415
- if (!this._editorView) {
416
- return false;
417
- }
418
- if (transaction.docChanged) {
419
- const newDoc = transaction.newDoc.toString();
420
- if (this.isControlled) {
421
- // the value will be changed by the onChange handler,
422
- // refreshEditorValue has to run first
423
- if (newDoc !== this.props.value) {
424
- this._newSelectionAfterValueChange = transaction.selection;
425
- this.cancelAnimationFrames();
426
- this.callOnChangeHandler(newDoc);
427
- return false;
428
- } else {
429
- return true;
430
- }
431
- } else {
432
- this.callOnChangeHandler(newDoc);
433
- }
434
- }
435
- return true;
436
- });
437
- }
438
- get focusListenerExtension() {
439
- const _this$props5 = this.props,
440
- onFocus = _this$props5.onFocus,
441
- onBlur = _this$props5.onBlur;
442
- return _view.EditorView.updateListener.of(update => {
443
- if (update.focusChanged && this._editorView) {
444
- if (this.hasFocus) {
445
- if (typeof onFocus === 'function') {
446
- onFocus();
447
- }
448
- } else {
449
- if (typeof onBlur === 'function') {
450
- onBlur();
451
- }
452
- }
453
- }
454
- });
455
- }
456
- get announceLineNumberExtension() {
457
- return _state.EditorState.transactionExtender.of(tr => {
458
- const selection = tr.selection;
459
- const oldSelection = tr.startState.selection.main;
460
- if (selection && selection.main.empty && oldSelection.empty) {
461
- const oldLine = tr.startState.doc.lineAt(oldSelection.head);
462
- const newLine = tr.newDoc.lineAt(selection.main.head);
463
- if (oldLine.number != newLine.number) return {
464
- effects: _view.EditorView.announce.of(tr.startState.phrase('line ') + newLine.number + '.')
465
- };
466
- }
467
- return null;
468
- });
469
- }
470
- refreshExtensions() {
471
- this.dispatchViewEffects(_state.StateEffect.reconfigure.of(this.extensions));
472
- }
473
- refreshEditorValue() {
474
- if (!this._editorView) return;
475
- const value = this.props.value;
476
- const currentValue = this._editorView.state.doc.toString();
477
- if (typeof value !== 'undefined' && currentValue !== value) {
478
- let userEvent;
479
- const lengthDiff = value.length - currentValue.length;
480
-
481
- // setting user events are needed for the autocomplete to work
482
- // (only these 2 events, autocomplete doesn't work on paste, etc.)
483
- if (lengthDiff === 1) {
484
- userEvent = 'input.type';
485
- } else if (lengthDiff === -1) {
486
- userEvent = 'delete.backward';
487
- }
488
- this.dispatchViewChanges({
489
- changes: {
490
- from: 0,
491
- to: currentValue.length,
492
- insert: value || ''
493
- },
494
- selection: this._newSelectionAfterValueChange,
495
- userEvent: userEvent
496
- });
497
- this._newSelectionAfterValueChange = void 0;
498
- }
499
- if (this.props.indentOnLoad) {
500
- this.indentAll();
501
- }
502
- }
503
- render() {
504
- const _this$props6 = this.props,
505
- label = _this$props6.label,
506
- styles = _this$props6.styles,
507
- restProps = (0, _objectWithoutProperties2.default)(_this$props6, _excluded);
508
- return (0, _jsxRuntime.jsx)("div", {
509
- "data-cid": "SourceCodeEditor",
510
- ref: this.handleRef,
511
- css: styles === null || styles === void 0 ? void 0 : styles.codeEditor,
512
- ...(0, _passthroughProps.passthroughProps)((0, _omitProps.omitProps)(restProps, SourceCodeEditor.allowedProps)),
513
- children: (0, _jsxRuntime.jsxs)("label", {
514
- css: styles === null || styles === void 0 ? void 0 : styles.label,
515
- id: this._id,
516
- children: [(0, _jsxRuntime.jsx)(_ScreenReaderContent.ScreenReaderContent, {
517
- children: label
518
- }), (0, _jsxRuntime.jsx)("div", {
519
- ref: this.handleContainerRef,
520
- css: styles === null || styles === void 0 ? void 0 : styles.codeEditorContainer
521
- })]
522
- })
523
- });
524
- }
525
- }, _SourceCodeEditor.displayName = "SourceCodeEditor", _SourceCodeEditor.componentId = 'SourceCodeEditor', _SourceCodeEditor.allowedProps = _props.allowedProps, _SourceCodeEditor.defaultProps = {
526
- language: 'jsx',
527
- readOnly: false,
528
- editable: true,
529
- lineNumbers: false,
530
- foldGutter: false,
531
- highlightActiveLine: false,
532
- highlightActiveLineGutter: false,
533
- lineWrapping: false,
534
- autofocus: false,
535
- spellcheck: false,
536
- rtlMoveVisually: true,
537
- indentOnLoad: false,
538
- indentWithTab: false,
539
- defaultValue: '',
540
- height: 'auto'
541
- }, _SourceCodeEditor)) || _class) || _class) || _class);
542
- var _default = exports.default = SourceCodeEditor;
@@ -1,228 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- var _highlight = require("@lezer/highlight");
8
- /*
9
- * The MIT License (MIT)
10
- *
11
- * Copyright (c) 2015 - present Instructure, Inc.
12
- *
13
- * Permission is hereby granted, free of charge, to any person obtaining a copy
14
- * of this software and associated documentation files (the "Software"), to deal
15
- * in the Software without restriction, including without limitation the rights
16
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
17
- * copies of the Software, and to permit persons to whom the Software is
18
- * furnished to do so, subject to the following conditions:
19
- *
20
- * The above copyright notice and this permission notice shall be included in all
21
- * copies or substantial portions of the Software.
22
- *
23
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
24
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
25
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
26
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
27
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
28
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
29
- * SOFTWARE.
30
- */
31
-
32
- /**
33
- * ---
34
- * private: true
35
- * ---
36
- * Generates the style object from the theme and provided additional information
37
- * @param {Object} componentTheme The theme variable object.
38
- * @param {Object} props the props of the component, the style is applied to
39
- * @return {Object} The final style object, which will be used in the component
40
- */
41
- const generateStyle = (componentTheme, props) => {
42
- const attachment = props.attachment,
43
- height = props.height,
44
- width = props.width;
45
- const attachmentBorderRadius = {
46
- top: {
47
- borderBottomLeftRadius: 0,
48
- borderBottomRightRadius: 0
49
- },
50
- bottom: {
51
- borderTopLeftRadius: 0,
52
- borderTopRightRadius: 0
53
- }
54
- };
55
- const attachmentVariants = {
56
- top: {
57
- marginBottom: 0,
58
- marginTop: '0.25rem'
59
- },
60
- bottom: {
61
- borderTopLeftRadius: 0,
62
- borderTopRightRadius: 0,
63
- marginBottom: '0.25rem'
64
- }
65
- };
66
- const lineHeight = 1.4375;
67
- return {
68
- codeEditor: {
69
- label: 'codeEditor',
70
- position: 'relative',
71
- boxSizing: 'border-box',
72
- height: height || 'auto',
73
- width
74
- },
75
- label: {
76
- label: 'label',
77
- height: '100%',
78
- width: '100%'
79
- },
80
- codeEditorContainer: {
81
- label: 'codeEditorContainer',
82
- height: '100%',
83
- width: '100%',
84
- borderColor: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.borderColor,
85
- borderStyle: 'solid',
86
- borderWidth: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.borderWidth,
87
- borderRadius: componentTheme.borderRadius,
88
- marginBottom: '1rem',
89
- ...(attachment && {
90
- ...attachmentVariants[attachment],
91
- ...attachmentBorderRadius[attachment]
92
- })
93
- },
94
- theme: {
95
- '&': {
96
- overflow: 'hidden',
97
- background: componentTheme.background,
98
- fontFamily: componentTheme.fontFamily,
99
- fontSize: componentTheme.fontSize,
100
- color: componentTheme.color,
101
- border: 0,
102
- height: '100%',
103
- width: '100%',
104
- minHeight: `${lineHeight}rem`,
105
- lineHeight,
106
- borderRadius: componentTheme.borderRadius,
107
- ...(attachment && {
108
- ...attachmentBorderRadius[attachment]
109
- })
110
- },
111
- '&.cm-editor.cm-focused': {
112
- // Provide a simple default outline to make sure a focused
113
- // editor is visually distinct. Can't leave the default behavior
114
- // because that will apply to the content element, which is
115
- // inside the scrollable container and doesn't include the
116
- // gutters. We also can't use an 'auto' outline, since those
117
- // are, for some reason, drawn behind the element content, which
118
- // will cause things like the active line background to cover
119
- // the outline (#297).
120
- outline: `${componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.borderWidth} solid ${componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.focusBorderColor}`
121
- },
122
- '.cm-content': {
123
- padding: `${componentTheme.verticalPadding} 0`
124
- },
125
- '.cm-scroller': {
126
- fontFamily: componentTheme.fontFamily,
127
- lineHeight: 1.4375
128
- },
129
- '.cm-gutters': {
130
- background: componentTheme.gutterBackground,
131
- borderColor: componentTheme.borderColor
132
- },
133
- '.cm-line': {
134
- padding: `0 ${componentTheme.horizontalPadding}`
135
- },
136
- '.cm-selectionBackground': {
137
- background: 'transparent'
138
- },
139
- '.cm-focused .cm-selectionBackground': {
140
- background: '#d7d4f0'
141
- },
142
- '.cm-placeholder': {
143
- // for better contrast
144
- color: '#707070'
145
- }
146
- },
147
- highlightStyle: [
148
- /**
149
- * Copy of `defaultHighlightStyle` from '@codemirror/language'
150
- */
151
- // { tag: tags.meta, color: '#7a757a' },
152
- {
153
- tag: _highlight.tags.link,
154
- textDecoration: 'underline'
155
- }, {
156
- tag: _highlight.tags.heading,
157
- textDecoration: 'underline',
158
- fontWeight: 'bold'
159
- }, {
160
- tag: _highlight.tags.emphasis,
161
- fontStyle: 'italic'
162
- }, {
163
- tag: _highlight.tags.strong,
164
- fontWeight: 'bold'
165
- }, {
166
- tag: _highlight.tags.strikethrough,
167
- textDecoration: 'line-through'
168
- }, {
169
- tag: _highlight.tags.keyword,
170
- color: '#708'
171
- }, {
172
- tag: [_highlight.tags.atom, _highlight.tags.bool, _highlight.tags.url, _highlight.tags.contentSeparator, _highlight.tags.labelName],
173
- color: '#219'
174
- }, {
175
- tag: [_highlight.tags.literal, _highlight.tags.inserted],
176
- color: '#164'
177
- }, {
178
- tag: [_highlight.tags.string, _highlight.tags.deleted],
179
- color: '#a11'
180
- },
181
- // {
182
- // tag: [tags.regexp, tags.escape, tags.special(tags.string)],
183
- // color: '#e40'
184
- // },
185
- {
186
- tag: _highlight.tags.definition(_highlight.tags.variableName),
187
- color: '#00f'
188
- }, {
189
- tag: _highlight.tags.local(_highlight.tags.variableName),
190
- color: '#30a'
191
- },
192
- // { tag: [tags.typeName, tags.namespace], color: '#085' },
193
- {
194
- tag: _highlight.tags.className,
195
- color: '#167'
196
- }, {
197
- tag: [_highlight.tags.special(_highlight.tags.variableName), _highlight.tags.macroName],
198
- color: '#256'
199
- }, {
200
- tag: _highlight.tags.definition(_highlight.tags.propertyName),
201
- color: '#00c'
202
- }, {
203
- tag: _highlight.tags.comment,
204
- color: '#940'
205
- },
206
- // { tag: tags.invalid, color: '#f00' },
207
-
208
- /**
209
- * Custom highlighting overrides
210
- * (where original colors don't have enough contrast against #fff
211
- * or active highlight background)
212
- */
213
- {
214
- tag: _highlight.tags.meta,
215
- color: '#757075'
216
- }, {
217
- tag: [_highlight.tags.regexp, _highlight.tags.escape, _highlight.tags.special(_highlight.tags.string)],
218
- color: '#d13b00'
219
- }, {
220
- tag: [_highlight.tags.typeName, _highlight.tags.namespace],
221
- color: '#008051'
222
- }, {
223
- tag: _highlight.tags.invalid,
224
- color: '#e60000'
225
- }]
226
- };
227
- };
228
- var _default = exports.default = generateStyle;
@@ -1,59 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- /*
8
- * The MIT License (MIT)
9
- *
10
- * Copyright (c) 2015 - present Instructure, Inc.
11
- *
12
- * Permission is hereby granted, free of charge, to any person obtaining a copy
13
- * of this software and associated documentation files (the "Software"), to deal
14
- * in the Software without restriction, including without limitation the rights
15
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
16
- * copies of the Software, and to permit persons to whom the Software is
17
- * furnished to do so, subject to the following conditions:
18
- *
19
- * The above copyright notice and this permission notice shall be included in all
20
- * copies or substantial portions of the Software.
21
- *
22
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
23
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
24
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
25
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
26
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
27
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
28
- * SOFTWARE.
29
- */
30
-
31
- /**
32
- * Generates the theme object for the component from the theme and provided additional information
33
- * @param {Object} theme The actual theme object.
34
- * @return {Object} The final theme object with the overrides and component variables
35
- */
36
- const generateComponentTheme = theme => {
37
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5;
38
- const colors = theme.colors,
39
- borders = theme.borders,
40
- typography = theme.typography,
41
- spacing = theme.spacing;
42
- const componentVariables = {
43
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamilyMonospace,
44
- fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
45
- background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
46
- color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125,
47
- gutterBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.grey1111,
48
- borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
49
- borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey3045,
50
- borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
51
- focusBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.blue4570,
52
- horizontalPadding: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
53
- verticalPadding: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall
54
- };
55
- return {
56
- ...componentVariables
57
- };
58
- };
59
- var _default = exports.default = generateComponentTheme;
package/lib/index.js DELETED
@@ -1,12 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- Object.defineProperty(exports, "SourceCodeEditor", {
7
- enumerable: true,
8
- get: function () {
9
- return _SourceCodeEditor.SourceCodeEditor;
10
- }
11
- });
12
- var _SourceCodeEditor = require("./SourceCodeEditor");
package/lib/package.json DELETED
@@ -1 +0,0 @@
1
- {"type":"commonjs"}