@elice/material-exercise 1.220913.0 → 1.220920.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.
Files changed (91) hide show
  1. package/cjs/components/material-exercise/MaterialExercise.styled.js +1 -1
  2. package/cjs/components/material-exercise/exercise-menu/ExerciseMenuDropdown.js +9 -1
  3. package/cjs/components/material-exercise/exercise-runner/ExerciseRunner.js +5 -1
  4. package/cjs/components/shared/monaco-editor/MonacoEditor.js +9 -9
  5. package/cjs/components/shared/monaco-editor/editor-hooks/useMonacoMarkers.js +3 -3
  6. package/cjs/components/shared/monaco-editor/editor-languages/css/index.d.ts +4 -0
  7. package/cjs/components/shared/monaco-editor/editor-languages/css/index.js +12 -0
  8. package/cjs/components/shared/monaco-editor/editor-languages/html/index.d.ts +4 -0
  9. package/cjs/components/shared/monaco-editor/editor-languages/html/index.js +10 -0
  10. package/cjs/components/shared/monaco-editor/editor-languages/index.js +2 -2
  11. package/cjs/components/shared/monaco-editor/editor-languages/typescript/index.d.ts +4 -0
  12. package/cjs/components/shared/monaco-editor/editor-languages/typescript/index.js +10 -0
  13. package/cjs/components/shared/monaco-editor/utils/emmet/abbreviationActions.d.ts +6 -0
  14. package/cjs/components/shared/monaco-editor/utils/emmet/abbreviationActions.js +65 -0
  15. package/cjs/components/shared/monaco-editor/utils/emmet/emmet.d.ts +13 -0
  16. package/cjs/components/shared/monaco-editor/utils/emmet/emmet.js +31 -0
  17. package/cjs/components/shared/monaco-editor/utils/emmet/index.d.ts +1 -0
  18. package/cjs/components/shared/monaco-editor/utils/emmet/registerProvider.d.ts +5 -0
  19. package/cjs/components/shared/monaco-editor/utils/emmet/registerProvider.js +27 -0
  20. package/cjs/components/shared/monaco-editor/utils/grammar/index.js +2 -2
  21. package/cjs/components/shared/monaco-editor/utils/prettier/index.js +6 -2
  22. package/cjs/components/shared/monaco-editor/vendors/vscode-emmet-helper/configCompat.d.ts +15 -0
  23. package/cjs/components/shared/monaco-editor/vendors/vscode-emmet-helper/configCompat.js +15 -0
  24. package/cjs/components/shared/monaco-editor/vendors/vscode-emmet-helper/data.d.ts +6 -0
  25. package/cjs/components/shared/monaco-editor/vendors/vscode-emmet-helper/data.js +22 -0
  26. package/cjs/components/shared/monaco-editor/vendors/vscode-emmet-helper/emmetHelper.d.ts +92 -0
  27. package/cjs/components/shared/monaco-editor/vendors/vscode-emmet-helper/emmetHelper.js +896 -0
  28. package/cjs/components/shared/monaco-editor/vendors/vscode-emmet-helper/index.d.ts +2 -0
  29. package/cjs/components/shared/monaco-editor/vendors/vscode-emmet-helper/utils.d.ts +17 -0
  30. package/cjs/components/shared/monaco-editor/vendors/vscode-emmet-helper/utils.js +48 -0
  31. package/cjs/components/shared/xterm/Xterm.js +10 -3
  32. package/es/components/material-exercise/MaterialExercise.styled.js +1 -1
  33. package/es/components/material-exercise/exercise-menu/ExerciseMenuDropdown.js +10 -2
  34. package/es/components/material-exercise/exercise-runner/ExerciseRunner.js +5 -1
  35. package/es/components/shared/monaco-editor/MonacoEditor.js +11 -11
  36. package/es/components/shared/monaco-editor/editor-hooks/useMonacoMarkers.js +3 -3
  37. package/es/components/shared/monaco-editor/editor-languages/css/index.d.ts +4 -0
  38. package/es/components/shared/monaco-editor/editor-languages/css/index.js +12 -1
  39. package/es/components/shared/monaco-editor/editor-languages/html/index.d.ts +4 -0
  40. package/es/components/shared/monaco-editor/editor-languages/html/index.js +10 -1
  41. package/es/components/shared/monaco-editor/editor-languages/index.js +2 -2
  42. package/es/components/shared/monaco-editor/editor-languages/typescript/index.d.ts +4 -0
  43. package/es/components/shared/monaco-editor/editor-languages/typescript/index.js +10 -1
  44. package/es/components/shared/monaco-editor/utils/emmet/abbreviationActions.d.ts +6 -0
  45. package/es/components/shared/monaco-editor/utils/emmet/abbreviationActions.js +61 -0
  46. package/es/components/shared/monaco-editor/utils/emmet/emmet.d.ts +13 -0
  47. package/es/components/shared/monaco-editor/utils/emmet/emmet.js +25 -0
  48. package/es/components/shared/monaco-editor/utils/emmet/index.d.ts +1 -0
  49. package/es/components/shared/monaco-editor/utils/emmet/registerProvider.d.ts +5 -0
  50. package/es/components/shared/monaco-editor/utils/emmet/registerProvider.js +23 -0
  51. package/es/components/shared/monaco-editor/utils/grammar/index.js +2 -2
  52. package/es/components/shared/monaco-editor/utils/prettier/index.js +6 -2
  53. package/es/components/shared/monaco-editor/vendors/vscode-emmet-helper/configCompat.d.ts +15 -0
  54. package/es/components/shared/monaco-editor/vendors/vscode-emmet-helper/configCompat.js +11 -0
  55. package/es/components/shared/monaco-editor/vendors/vscode-emmet-helper/data.d.ts +6 -0
  56. package/es/components/shared/monaco-editor/vendors/vscode-emmet-helper/data.js +17 -0
  57. package/es/components/shared/monaco-editor/vendors/vscode-emmet-helper/emmetHelper.d.ts +92 -0
  58. package/es/components/shared/monaco-editor/vendors/vscode-emmet-helper/emmetHelper.js +879 -0
  59. package/es/components/shared/monaco-editor/vendors/vscode-emmet-helper/index.d.ts +2 -0
  60. package/es/components/shared/monaco-editor/vendors/vscode-emmet-helper/utils.d.ts +17 -0
  61. package/es/components/shared/monaco-editor/vendors/vscode-emmet-helper/utils.js +42 -0
  62. package/es/components/shared/xterm/Xterm.js +10 -3
  63. package/package.json +7 -6
  64. /package/cjs/components/shared/monaco-editor/{utils/remoteMarker → vendors/monaco-collab-ext}/OnDisposed.d.ts +0 -0
  65. /package/cjs/components/shared/monaco-editor/{utils/remoteMarker → vendors/monaco-collab-ext}/RemoteCursor.d.ts +0 -0
  66. /package/cjs/components/shared/monaco-editor/{utils/remoteMarker → vendors/monaco-collab-ext}/RemoteCursor.js +0 -0
  67. /package/cjs/components/shared/monaco-editor/{utils/remoteMarker → vendors/monaco-collab-ext}/RemoteCursorManager.d.ts +0 -0
  68. /package/cjs/components/shared/monaco-editor/{utils/remoteMarker → vendors/monaco-collab-ext}/RemoteCursorManager.js +0 -0
  69. /package/cjs/components/shared/monaco-editor/{utils/remoteMarker → vendors/monaco-collab-ext}/RemoteCursorWidget.d.ts +0 -0
  70. /package/cjs/components/shared/monaco-editor/{utils/remoteMarker → vendors/monaco-collab-ext}/RemoteCursorWidget.js +0 -0
  71. /package/cjs/components/shared/monaco-editor/{utils/remoteMarker → vendors/monaco-collab-ext}/RemoteSelection.d.ts +0 -0
  72. /package/cjs/components/shared/monaco-editor/{utils/remoteMarker → vendors/monaco-collab-ext}/RemoteSelection.js +0 -0
  73. /package/cjs/components/shared/monaco-editor/{utils/remoteMarker → vendors/monaco-collab-ext}/RemoteSelectionManager.d.ts +0 -0
  74. /package/cjs/components/shared/monaco-editor/{utils/remoteMarker → vendors/monaco-collab-ext}/RemoteSelectionManager.js +0 -0
  75. /package/cjs/components/shared/monaco-editor/{utils/remoteMarker → vendors/monaco-collab-ext}/index.d.ts +0 -0
  76. /package/cjs/components/shared/monaco-editor/{utils/remoteMarker → vendors/monaco-collab-ext}/styles.d.ts +0 -0
  77. /package/cjs/components/shared/monaco-editor/{utils/remoteMarker → vendors/monaco-collab-ext}/styles.js +0 -0
  78. /package/es/components/shared/monaco-editor/{utils/remoteMarker → vendors/monaco-collab-ext}/OnDisposed.d.ts +0 -0
  79. /package/es/components/shared/monaco-editor/{utils/remoteMarker → vendors/monaco-collab-ext}/RemoteCursor.d.ts +0 -0
  80. /package/es/components/shared/monaco-editor/{utils/remoteMarker → vendors/monaco-collab-ext}/RemoteCursor.js +0 -0
  81. /package/es/components/shared/monaco-editor/{utils/remoteMarker → vendors/monaco-collab-ext}/RemoteCursorManager.d.ts +0 -0
  82. /package/es/components/shared/monaco-editor/{utils/remoteMarker → vendors/monaco-collab-ext}/RemoteCursorManager.js +0 -0
  83. /package/es/components/shared/monaco-editor/{utils/remoteMarker → vendors/monaco-collab-ext}/RemoteCursorWidget.d.ts +0 -0
  84. /package/es/components/shared/monaco-editor/{utils/remoteMarker → vendors/monaco-collab-ext}/RemoteCursorWidget.js +0 -0
  85. /package/es/components/shared/monaco-editor/{utils/remoteMarker → vendors/monaco-collab-ext}/RemoteSelection.d.ts +0 -0
  86. /package/es/components/shared/monaco-editor/{utils/remoteMarker → vendors/monaco-collab-ext}/RemoteSelection.js +0 -0
  87. /package/es/components/shared/monaco-editor/{utils/remoteMarker → vendors/monaco-collab-ext}/RemoteSelectionManager.d.ts +0 -0
  88. /package/es/components/shared/monaco-editor/{utils/remoteMarker → vendors/monaco-collab-ext}/RemoteSelectionManager.js +0 -0
  89. /package/es/components/shared/monaco-editor/{utils/remoteMarker → vendors/monaco-collab-ext}/index.d.ts +0 -0
  90. /package/es/components/shared/monaco-editor/{utils/remoteMarker → vendors/monaco-collab-ext}/styles.d.ts +0 -0
  91. /package/es/components/shared/monaco-editor/{utils/remoteMarker → vendors/monaco-collab-ext}/styles.js +0 -0
@@ -0,0 +1,2 @@
1
+ export { doComplete } from './emmetHelper';
2
+ export { DEFAULT_CONFIG, LANGUAGE_MODES, MAPPED_MODES } from './utils';
@@ -0,0 +1,17 @@
1
+ import type { VSCodeEmmetConfig } from './emmetHelper';
2
+ /**
3
+ * Default emmet configuration.
4
+ */
5
+ export declare const DEFAULT_CONFIG: VSCodeEmmetConfig;
6
+ /**
7
+ * Mapping between languages that support Emmet and completion trigger characters.
8
+ * - ref: https://github.com/microsoft/vscode/blob/50140a53cc2088f478a5560683ccd354f2d5f431/extensions/emmet/src/util.ts#L86
9
+ */
10
+ export declare const LANGUAGE_MODES: {
11
+ [id: string]: string[];
12
+ };
13
+ /**
14
+ * Language specific extensions can provide emmet completion support.
15
+ * - ref: https://github.com/microsoft/vscode/blob/50140a53cc2088f478a5560683ccd354f2d5f431/extensions/emmet/src/util.ts#L124
16
+ */
17
+ export declare const MAPPED_MODES: Record<string, string>;
@@ -0,0 +1,48 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ /* eslint-disable */
6
+
7
+ /**
8
+ * Default emmet configuration.
9
+ */
10
+ const DEFAULT_CONFIG = {
11
+ showExpandedAbbreviation: 'always',
12
+ showAbbreviationSuggestions: true,
13
+ showSuggestionsAsSnippets: false
14
+ };
15
+ /**
16
+ * Mapping between languages that support Emmet and completion trigger characters.
17
+ * - ref: https://github.com/microsoft/vscode/blob/50140a53cc2088f478a5560683ccd354f2d5f431/extensions/emmet/src/util.ts#L86
18
+ */
19
+
20
+ const LANGUAGE_MODES = {
21
+ html: ['!', '.', '}', ':', '*', '$', ']', '/', '>', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
22
+ jade: ['!', '.', '}', ':', '*', '$', ']', '/', '>', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
23
+ slim: ['!', '.', '}', ':', '*', '$', ']', '/', '>', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
24
+ haml: ['!', '.', '}', ':', '*', '$', ']', '/', '>', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
25
+ xml: ['.', '}', '*', '$', ']', '/', '>', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
26
+ xsl: ['!', '.', '}', '*', '$', '/', ']', '>', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
27
+ css: [':', '!', '-', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
28
+ scss: [':', '!', '-', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
29
+ sass: [':', '!', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
30
+ less: [':', '!', '-', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
31
+ stylus: [':', '!', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
32
+ javascript: ['!', '.', '}', '*', '$', ']', '/', '>', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
33
+ typescript: ['!', '.', '}', '*', '$', ']', '/', '>', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
34
+ };
35
+ /**
36
+ * Language specific extensions can provide emmet completion support.
37
+ * - ref: https://github.com/microsoft/vscode/blob/50140a53cc2088f478a5560683ccd354f2d5f431/extensions/emmet/src/util.ts#L124
38
+ */
39
+
40
+ const MAPPED_MODES = {
41
+ handlebars: 'html',
42
+ php: 'html',
43
+ twig: 'html'
44
+ };
45
+
46
+ exports.DEFAULT_CONFIG = DEFAULT_CONFIG;
47
+ exports.LANGUAGE_MODES = LANGUAGE_MODES;
48
+ exports.MAPPED_MODES = MAPPED_MODES;
@@ -154,6 +154,16 @@ const Xterm = React.forwardRef(({
154
154
 
155
155
  return (_a = xterm$1.current) === null || _a === void 0 ? void 0 : _a.setOption('fontSize', fontSize);
156
156
  }, [fontSize]); //
157
+ // Reset and resize xterm when code is running.
158
+ //
159
+
160
+ React__default["default"].useEffect(() => {
161
+ if (isRunning) {
162
+ reset();
163
+ onTtyResizeRequest(ttySize.current);
164
+ }
165
+ }, // eslint-disable-next-line react-hooks/exhaustive-deps
166
+ [isRunning]); //
157
167
  // Write system message when code is running.
158
168
  //
159
169
 
@@ -163,9 +173,6 @@ const Xterm = React.forwardRef(({
163
173
  }
164
174
 
165
175
  if (isRunning) {
166
- //
167
- reset();
168
- onTtyResizeRequest(ttySize.current);
169
176
  writeSystem(intl.formatMessage({
170
177
  id: 'xterm.systemMessage.running'
171
178
  }));
@@ -20,7 +20,7 @@ const EXERCISE_HORIZONTAL_RATIO = {
20
20
 
21
21
  const StyledExerciseContainer = styled.div.withConfig({
22
22
  componentId: "sc-9joi7g-0"
23
- })(["flex:1;display:flex;flex-direction:column;height:100%;min-width:0;min-height:0;overflow:hidden;"]);
23
+ })(["flex:1;display:flex;flex-direction:column;height:100%;min-width:0;min-height:0;"]);
24
24
  /**
25
25
  * Wrapper contains:
26
26
  * - FileTree
@@ -2,10 +2,11 @@ import React from 'react';
2
2
  import { useIntl } from 'react-intl';
3
3
  import { ButtonMenu } from '@elice/blocks';
4
4
  import { eilMoreVertical } from '@elice/icons';
5
+ import { enums } from '@elice/types';
5
6
  import { useRecoilValue, useSetRecoilState } from 'recoil';
6
7
  import ExerciseMenuButton from '../../shared/exercise-menu-button/ExerciseMenuButton.js';
7
- import { exerciseUserState, exerciseActiveFilenameState, exerciseRightpaneActiveState } from '../context/recoil.js';
8
- import '../context/context.js';
8
+ import { exerciseUserState, exerciseState, exerciseLectureState, exerciseActiveFilenameState, exerciseRightpaneActiveState } from '../context/recoil.js';
9
+ import { ExerciseContext } from '../context/context.js';
9
10
  import '../context/recoilTypes.js';
10
11
  import { exerciseFileEditorContentChange$ } from '../context/subjects.js';
11
12
  import '../context/ExerciseProvider.js';
@@ -15,12 +16,18 @@ import ExerciseSubmitHistory from '../exercise-submit-history/ExerciseSubmitHist
15
16
 
16
17
  const ExerciseMenuDropdown = () => {
17
18
  const intl = useIntl();
19
+ const {
20
+ materialExerciseId
21
+ } = React.useContext(ExerciseContext);
18
22
  const user = useRecoilValue(exerciseUserState);
23
+ const exercise = useRecoilValue(exerciseState(materialExerciseId));
24
+ const lecture = useRecoilValue(exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise.lectureId));
19
25
  const activeFilename = useRecoilValue(exerciseActiveFilenameState);
20
26
  const setRightpaneActiveState = useSetRecoilState(exerciseRightpaneActiveState);
21
27
  const [isSubmitHistoryModalOpen, setIsSubmitHistoryModalOpen] = React.useState(false);
22
28
  const [isCodeHistoryModalOpen, setIsCodeHistoryModalOpen] = React.useState(false);
23
29
  const [isExerciseRoomModalOpen, setIsExerciseRoomModalOpen] = React.useState(false);
30
+ const isLectureTestInProgress = typeof (lecture === null || lecture === void 0 ? void 0 : lecture.testAdmissionStatus) !== 'undefined' && lecture.testAdmissionStatus === enums.TestAdmissionStatus.InProgress;
24
31
  /**
25
32
  *
26
33
  */
@@ -97,6 +104,7 @@ const ExerciseMenuDropdown = () => {
97
104
  label: intl.formatMessage({
98
105
  id: 'exerciseMenu.dropdown.item.room'
99
106
  }),
107
+ disabled: isLectureTestInProgress,
100
108
  onClick: () => setIsExerciseRoomModalOpen(true)
101
109
  }],
102
110
  size: "xsmall",
@@ -477,10 +477,14 @@ const ExerciseRunner = ({
477
477
 
478
478
 
479
479
  const renderXterm = () => {
480
+ // show system message when...
481
+ const showSystemMessage = // - run type is grade
482
+ runnerRunTypeState === enums.ExerciseRunType.Grade || // - not an arduino exercise
483
+ !isArduinoExercise;
480
484
  return React.createElement(XtermLazy, {
481
485
  isRunning: wsRunnerRoom.isRunning,
482
486
  fontSize: editorPreferenceFontSize,
483
- suppressSystemMessage: isArduinoExercise,
487
+ suppressSystemMessage: !showSystemMessage,
484
488
  onInputRequest: handleXtermInputRequest,
485
489
  onTtyResizeRequest: wsStdio.sendTtyResize,
486
490
  locale: locale,
@@ -2,8 +2,8 @@ import React, { forwardRef } from 'react';
2
2
  import { base } from '@elice/design-tokens';
3
3
  import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
4
4
  import styled from 'styled-components';
5
- import initGrammars from './utils/grammar/index.js';
6
- import { cssRemoteMarker } from './utils/remoteMarker/styles.js';
5
+ import initMonacoGrammars from './utils/grammar/index.js';
6
+ import { cssRemoteMarker } from './vendors/monaco-collab-ext/styles.js';
7
7
  import { DEFAULT_MONACO_EDITOR_PREFERENCE } from './constants/monaco/preferences.js';
8
8
  import { useMonacoEventChange } from './editor-hooks/useMonacoEventChange.js';
9
9
  import { useMonacoEventCursor } from './editor-hooks/useMonacoEventCursor.js';
@@ -11,10 +11,16 @@ import { useMonacoEventScroll } from './editor-hooks/useMonacoEventScroll.js';
11
11
  import { useMonacoMarkers } from './editor-hooks/useMonacoMarkers.js';
12
12
  import { useMonacoOptions } from './editor-hooks/useMonacoOptions.js';
13
13
  import { useMonacoTheme } from './editor-hooks/useMonacoTheme.js';
14
- import configEditorLanguages from './editor-languages/index.js';
14
+ import initMonacoLanguages from './editor-languages/index.js';
15
15
  import { useEditorOptions } from './hooks/useEditorOptions.js';
16
16
  import { getLanguageFromFilename } from './utils/monacoLanguage.js';
17
17
 
18
+ //
19
+ //
20
+ // pre-init monaco editor
21
+
22
+ initMonacoLanguages();
23
+ initMonacoGrammars().catch(console.warn); //
18
24
  //
19
25
  //
20
26
 
@@ -23,10 +29,7 @@ const StyledMonacoEditorWrapper = styled.div.withConfig({
23
29
  })(["width:100%;height:100%;"]);
24
30
  const StyledMonacoEditor = styled.div.withConfig({
25
31
  componentId: "sc-1j3uyex-1"
26
- })(["width:100%;height:100%;background-color:", ";", ""], base.color.navy9, cssRemoteMarker); //
27
- //
28
- //
29
-
32
+ })(["width:100%;height:100%;background-color:", ";", ""], base.color.navy9, cssRemoteMarker);
30
33
  /**
31
34
  *
32
35
  */
@@ -275,11 +278,8 @@ const MonacoEditor = forwardRef(({
275
278
  try {
276
279
  if (!editorElRef.current) {
277
280
  return;
278
- } // pre-config monaco editor
279
-
281
+ } // create monaco editor instance and render it.
280
282
 
281
- configEditorLanguages();
282
- initGrammars().catch(console.warn); // create monaco editor instance and render it.
283
283
 
284
284
  editor.current = monaco.editor.create(editorElRef.current, Object.assign(Object.assign({}, editorOptions), {
285
285
  value: defaultValue,
@@ -1,8 +1,8 @@
1
1
  import { useRef } from 'react';
2
2
  import { useDeepCompareEffect } from 'react-use';
3
- import { RemoteCursorManager } from '../utils/remoteMarker/RemoteCursorManager.js';
4
- import { RemoteSelectionManager } from '../utils/remoteMarker/RemoteSelectionManager.js';
5
- import '../utils/remoteMarker/styles.js';
3
+ import { RemoteCursorManager } from '../vendors/monaco-collab-ext/RemoteCursorManager.js';
4
+ import { RemoteSelectionManager } from '../vendors/monaco-collab-ext/RemoteSelectionManager.js';
5
+ import '../vendors/monaco-collab-ext/styles.js';
6
6
 
7
7
  /** Available colors for marker. */
8
8
 
@@ -6,4 +6,8 @@ export declare function setDocumentFormattingEditProvider(): void;
6
6
  * Set CSS options.
7
7
  */
8
8
  export declare function setOptions(): void;
9
+ /**
10
+ * Enable emmet feature.
11
+ */
12
+ export declare function setEnableFeatrueEmmet(): void;
9
13
  export default function (): void;
@@ -1,4 +1,5 @@
1
1
  import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
2
+ import { emmetCSS } from '../../utils/emmet/emmet.js';
2
3
  import CssDocumentFormattingEditProvider from './formatter.js';
3
4
 
4
5
  /**
@@ -7,6 +8,8 @@ import CssDocumentFormattingEditProvider from './formatter.js';
7
8
 
8
9
  function setDocumentFormattingEditProvider() {
9
10
  monaco.languages.registerDocumentFormattingEditProvider('css', CssDocumentFormattingEditProvider);
11
+ monaco.languages.registerDocumentFormattingEditProvider('scss', CssDocumentFormattingEditProvider);
12
+ monaco.languages.registerDocumentFormattingEditProvider('less', CssDocumentFormattingEditProvider);
10
13
  }
11
14
  /**
12
15
  * Set CSS options.
@@ -16,6 +19,13 @@ function setOptions() {
16
19
  monaco.languages.css.cssDefaults.setOptions({
17
20
  validate: false
18
21
  });
22
+ }
23
+ /**
24
+ * Enable emmet feature.
25
+ */
26
+
27
+ function setEnableFeatrueEmmet() {
28
+ emmetCSS(monaco, ['css', 'scss', 'less']);
19
29
  } //
20
30
  //
21
31
  //
@@ -23,6 +33,7 @@ function setOptions() {
23
33
  function css () {
24
34
  setDocumentFormattingEditProvider();
25
35
  setOptions();
36
+ setEnableFeatrueEmmet();
26
37
  }
27
38
 
28
- export { css as default, setDocumentFormattingEditProvider, setOptions };
39
+ export { css as default, setDocumentFormattingEditProvider, setEnableFeatrueEmmet, setOptions };
@@ -6,4 +6,8 @@ export declare function setDocumentFormattingEditProvider(): void;
6
6
  * Set HTML options.
7
7
  */
8
8
  export declare function setOptions(): void;
9
+ /**
10
+ * Enable emmet feature.
11
+ */
12
+ export declare function setEnableFeatrueEmmet(): void;
9
13
  export default function (): void;
@@ -1,4 +1,5 @@
1
1
  import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
2
+ import { emmetHTML } from '../../utils/emmet/emmet.js';
2
3
  import HtmlDocumentFormattingEditProvider from './formatter.js';
3
4
 
4
5
  /**
@@ -14,6 +15,13 @@ function setDocumentFormattingEditProvider() {
14
15
 
15
16
  function setOptions() {
16
17
  monaco.languages.html.htmlDefaults.setOptions({});
18
+ }
19
+ /**
20
+ * Enable emmet feature.
21
+ */
22
+
23
+ function setEnableFeatrueEmmet() {
24
+ emmetHTML(monaco, ['html', 'handlebars', 'php']);
17
25
  } //
18
26
  //
19
27
  //
@@ -21,6 +29,7 @@ function setOptions() {
21
29
  function html () {
22
30
  setDocumentFormattingEditProvider();
23
31
  setOptions();
32
+ setEnableFeatrueEmmet();
24
33
  }
25
34
 
26
- export { html as default, setDocumentFormattingEditProvider, setOptions };
35
+ export { html as default, setDocumentFormattingEditProvider, setEnableFeatrueEmmet, setOptions };
@@ -2,10 +2,10 @@ import css from './css/index.js';
2
2
  import html from './html/index.js';
3
3
  import typescript from './typescript/index.js';
4
4
 
5
- function configEditorLanguages () {
5
+ function initMonacoLanguages () {
6
6
  css();
7
7
  html();
8
8
  typescript();
9
9
  }
10
10
 
11
- export { configEditorLanguages as default };
11
+ export { initMonacoLanguages as default };
@@ -22,4 +22,8 @@ export declare function setExernalLibs(): void;
22
22
  * Enables intelliSense for all files without needing an `addExtraLib` call.
23
23
  */
24
24
  export declare function setEagerModelSync(): void;
25
+ /**
26
+ * Enable emmet for JavaScript and TypeScript.
27
+ */
28
+ export declare function setEnableFeatrueEmmet(): void;
25
29
  export default function (): void;
@@ -1,4 +1,5 @@
1
1
  import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
2
+ import { emmetJSX } from '../../utils/emmet/emmet.js';
2
3
  import express from './dts/express.js';
3
4
  import propTypes from './dts/propTypes.js';
4
5
  import react from './dts/react.js';
@@ -79,6 +80,13 @@ function setExernalLibs() {
79
80
  function setEagerModelSync() {
80
81
  monaco.languages.typescript.javascriptDefaults.setEagerModelSync(true);
81
82
  monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);
83
+ }
84
+ /**
85
+ * Enable emmet for JavaScript and TypeScript.
86
+ */
87
+
88
+ function setEnableFeatrueEmmet() {
89
+ emmetJSX(monaco, ['javascript', 'javascriptreact', 'typescript', 'typescriptreact']);
82
90
  } //
83
91
  //
84
92
  //
@@ -89,6 +97,7 @@ function typescript () {
89
97
  setDiagnosticsOptions();
90
98
  setExernalLibs();
91
99
  setEagerModelSync();
100
+ setEnableFeatrueEmmet();
92
101
  }
93
102
 
94
- export { typescript as default, setCompilerOptions, setDiagnosticsOptions, setDocumentFormattingEditProvider, setEagerModelSync, setExernalLibs };
103
+ export { typescript as default, setCompilerOptions, setDiagnosticsOptions, setDocumentFormattingEditProvider, setEagerModelSync, setEnableFeatrueEmmet, setExernalLibs };
@@ -0,0 +1,6 @@
1
+ import type * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
2
+ /**
3
+ * VSCode did a complex node analysis, just use monaco's built-in tokenizer here.
4
+ * @see https://github.com/microsoft/vscode/blob/50140a53cc2088f478a5560683ccd354f2d5f431/extensions/emmet/src/abbreviationActions.ts#L438
5
+ */
6
+ export declare function isValidLocationForEmmetAbbreviation(model: monaco.editor.ITextModel, position: monaco.Position, syntax: string, language: string): boolean;
@@ -0,0 +1,61 @@
1
+ /**
2
+ * Validate if the given position is valid for emmet abbreviation.
3
+ */
4
+ function isValidEmmetToken(tokens, index, syntax, language) {
5
+ const currentTokenType = tokens[index].type;
6
+
7
+ switch (syntax) {
8
+ case 'html':
9
+ return currentTokenType === 'text.html.basic';
10
+
11
+ case 'css':
12
+ return true;
13
+
14
+ case 'jsx':
15
+ return !currentTokenType.endsWith('.type.tsx');
16
+
17
+ default:
18
+ return false;
19
+ }
20
+ }
21
+ /**
22
+ * VSCode did a complex node analysis, just use monaco's built-in tokenizer here.
23
+ * @see https://github.com/microsoft/vscode/blob/50140a53cc2088f478a5560683ccd354f2d5f431/extensions/emmet/src/abbreviationActions.ts#L438
24
+ */
25
+
26
+
27
+ function isValidLocationForEmmetAbbreviation(model, position, syntax, language) {
28
+ const {
29
+ column,
30
+ lineNumber
31
+ } = position; // get current line's tokens
32
+
33
+ const _tokenization = // monaco-editor < 0.34.0
34
+ model._tokenization || // monaco-editor >= 0.34.0
35
+ model.tokenization._tokenization;
36
+
37
+ const _tokenizationStateStore = _tokenization._tokenizationStateStore;
38
+
39
+ const _tokenizationSupport = // monaco-editor >= 0.32.0
40
+ _tokenizationStateStore.tokenizationSupport || // monaco-editor < 0.32.0
41
+ _tokenization._tokenizationSupport;
42
+
43
+ const state = _tokenizationStateStore.getBeginState(lineNumber - 1).clone();
44
+
45
+ const tokenizationResult = _tokenizationSupport.tokenize(model.getLineContent(lineNumber), true, state, 0);
46
+
47
+ const tokens = tokenizationResult.tokens; // get token type at current column
48
+
49
+ for (let i = tokens.length - 1; i >= 0; i--) {
50
+ if (column - 1 > tokens[i].offset) {
51
+ // return true if current token is valid for emmet
52
+ if (isValidEmmetToken(tokens, i, syntax)) {
53
+ return true;
54
+ }
55
+ }
56
+ }
57
+
58
+ return false;
59
+ }
60
+
61
+ export { isValidLocationForEmmetAbbreviation };
@@ -0,0 +1,13 @@
1
+ import type * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
2
+ /**
3
+ * Enable emmet feature for HTML.
4
+ */
5
+ export declare function emmetHTML(_monaco: typeof monaco, languages: string[]): (() => void) | undefined;
6
+ /**
7
+ * Enable emmet feature for CSS.
8
+ */
9
+ export declare function emmetCSS(_monaco: typeof monaco, languages: string[]): (() => void) | undefined;
10
+ /**
11
+ * Enable emmet feature for JSX.
12
+ */
13
+ export declare function emmetJSX(_monaco: typeof monaco, languages: string[]): (() => void) | undefined;
@@ -0,0 +1,25 @@
1
+ import { registerProvider } from './registerProvider.js';
2
+
3
+ /**
4
+ * Enable emmet feature for HTML.
5
+ */
6
+
7
+ function emmetHTML(_monaco, languages) {
8
+ return registerProvider(_monaco, languages, 'html');
9
+ }
10
+ /**
11
+ * Enable emmet feature for CSS.
12
+ */
13
+
14
+ function emmetCSS(_monaco, languages) {
15
+ return registerProvider(_monaco, languages, 'css');
16
+ }
17
+ /**
18
+ * Enable emmet feature for JSX.
19
+ */
20
+
21
+ function emmetJSX(_monaco, languages) {
22
+ return registerProvider(_monaco, languages, 'jsx');
23
+ }
24
+
25
+ export { emmetCSS, emmetHTML, emmetJSX };
@@ -0,0 +1 @@
1
+ export * from './emmet';
@@ -0,0 +1,5 @@
1
+ import type * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
2
+ /**
3
+ * Register completion provider of emmet.
4
+ */
5
+ export declare function registerProvider(_monaco: typeof monaco, languages: string[], syntax: string): (() => void) | undefined;
@@ -0,0 +1,23 @@
1
+ import { doComplete } from '../../vendors/vscode-emmet-helper/emmetHelper.js';
2
+ import { LANGUAGE_MODES, MAPPED_MODES, DEFAULT_CONFIG } from '../../vendors/vscode-emmet-helper/utils.js';
3
+ import { isValidLocationForEmmetAbbreviation } from './abbreviationActions.js';
4
+
5
+ /**
6
+ * Register completion provider of emmet.
7
+ */
8
+
9
+ function registerProvider(_monaco, languages, syntax) {
10
+ if (!_monaco) {
11
+ return;
12
+ }
13
+
14
+ const providers = languages.map(language => _monaco.languages.registerCompletionItemProvider(language, {
15
+ triggerCharacters: LANGUAGE_MODES[MAPPED_MODES[language] || language],
16
+ provideCompletionItems: (model, position) => isValidLocationForEmmetAbbreviation(model, position, syntax) ? doComplete(_monaco, model, position, syntax, DEFAULT_CONFIG) : undefined
17
+ }));
18
+ return () => {
19
+ providers.forEach(provider => provider.dispose());
20
+ };
21
+ }
22
+
23
+ export { registerProvider };
@@ -50,11 +50,11 @@ function createGrammarRegistry() {
50
50
  */
51
51
 
52
52
 
53
- async function initGrammars () {
53
+ async function initMonacoGrammars () {
54
54
  await initOnigasm();
55
55
  const grammars = createGrammarMap();
56
56
  const registry = createGrammarRegistry();
57
57
  await wireTmGrammars(registry, grammars);
58
58
  }
59
59
 
60
- export { initGrammars as default };
60
+ export { initMonacoGrammars as default };
@@ -5,8 +5,12 @@ import { prettierConfigSource } from './config.js';
5
5
  */
6
6
 
7
7
  async function prettier (value, options) {
8
- const prettier = await import('prettier/standalone');
9
- return prettier.format(value, Object.assign(Object.assign({}, options), prettierConfigSource.config));
8
+ try {
9
+ const prettier = await import('prettier/standalone');
10
+ return prettier.format(value, Object.assign(Object.assign({}, options), prettierConfigSource.config));
11
+ } catch (_) {
12
+ return value;
13
+ }
10
14
  }
11
15
 
12
16
  export { prettier as default };
@@ -0,0 +1,15 @@
1
+ export interface SnippetsMap {
2
+ [name: string]: string;
3
+ }
4
+ /**
5
+ * Parses raw snippets definitions with possibly multiple keys into a plan
6
+ * snippet map
7
+ */
8
+ export declare function parseSnippets(snippets: SnippetsMap): SnippetsMap;
9
+ /**
10
+ * List of all known syntaxes
11
+ */
12
+ export declare const syntaxes: {
13
+ markup: string[];
14
+ stylesheet: string[];
15
+ };
@@ -0,0 +1,11 @@
1
+ /* eslint-disable */
2
+ /**
3
+ * List of all known syntaxes
4
+ */
5
+
6
+ const syntaxes = {
7
+ markup: ['html', 'xml', 'xsl', 'jsx', 'js', 'pug', 'slim', 'haml'],
8
+ stylesheet: ['css', 'sass', 'scss', 'less', 'sss', 'stylus']
9
+ };
10
+
11
+ export { syntaxes };
@@ -0,0 +1,6 @@
1
+ export declare const cssData: {
2
+ properties: string[];
3
+ };
4
+ export declare const htmlData: {
5
+ tags: string[];
6
+ };