Merge branch 'release/1.0.2' into v1

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to this project will be documented in this file.
 
+## 1.0.2 - 2022.11.04
+### Added
+* Added support for `monacoOptions.theme` set to `auto` automatically setting the theme to match the browser's dark mode setting
+
 ## 1.0.1 - 2022.11.02
 ### Added
 * Added a JSON icon

README.md

@@ -120,9 +120,7 @@ Regardless of the macro used, an Asset Bundle containing the necessary CSS & Jav
 
 ### In Frontend Templates
 
-Code Editor works in frontend templates, for every language except `twig`.
-
-If you plan to use `twig` as the language for Code Editor in your frontend templates, you'll need to specifically enable it.
+Code Editor also works in frontend templates, but you'll need to specifically enable it.
 
 Do so by copying the `config.php` file to the Craft CMS `config/` directory, renaming the file to `codeeditor.php` in the process, then set the `allowFrontendAccess` setting to `true`:
 
@@ -153,7 +151,15 @@ Create your own `<textarea>` element and include the necessary JavaScript, passi
 {{ codeEditor.includeJs("myCodeEditor") }}
 ```
 
-Enabling the `allowFrontendAccess` setting allows access to the `codeeditor/autocomplete/index` endpoint, and add the `code-editor/templates` directory to the template roots.
+Enabling the `allowFrontendAccess` setting allows access to the `codeeditor/autocomplete/index` endpoint, and add the `codeeditor/templates` directory to the template roots.
+
+The following `monacoOptions` allow you to make the field read-only (though the user can still interact with the code):
+```json
+{
+ "domReadOnly": true,
+ "readOnly": true
+}
+```
 
 ### Additional Options
 

composer.json

@@ -2,7 +2,7 @@
  "name": "nystudio107/craft-code-editor",
  "description": "Provides a code editor field with Twig & Craft API autocomplete",
  "type": "yii2-extension",
- "version": "1.0.1",
+ "version": "1.0.2",
  "keywords": [
  "code",
  "editor",

src/web/assets/src/js/code-editor.ts

@@ -293,7 +293,11 @@ function setMonacoEditorLanguage(editor: monaco.editor.IStandaloneCodeEditor, la
  * @param {string | undefined} theme - the editor theme
  */
 function setMonacoEditorTheme(editor: monaco.editor.IStandaloneCodeEditor, theme: string | undefined): void {
- const editorTheme = theme ?? 'vs';
+ let editorTheme = theme ?? 'vs';
+ if (editorTheme === 'auto') {
+ const mediaQueryObj = window.matchMedia('(prefers-color-scheme: dark)');
+ editorTheme = mediaQueryObj.matches ? 'vs-dark' : 'vs';
+ }
  editor.updateOptions({theme: editorTheme});
 }