Resolved #12 - Code Mirror for better editing, Code mirror class

Author: Lucaffo

dart/pubspec.yaml

@@ -6,7 +6,6 @@ publish_to: none
 environment:
   sdk: 3.6.2
 
-# Add regular dependencies here.
 dependencies:
   http: ^1.3.0
   wallpaper_generator:
@@ -15,6 +14,8 @@ dependencies:
     path: ../packages/wallpaper
   wallpaper_worker:
     path: ../packages/wallpaper_worker
+  code_mirror:
+    path: ../packages/code_mirror
 
 dev_dependencies:
   build_runner: ^2.4.15

dart/web/index.html

@@ -28,7 +28,7 @@
   </div>
 
   <div class="container">
-    <textarea id="input" cols="50" rows="22" spellcheck="false"></textarea>
+    <div class="codemirror-container" id="input"></div>
     <div class="handle" id="resize-handle"></div>
     <div class="canvas-container">
       <div id="loading-panel" class="loading-panel">
@@ -62,6 +62,14 @@
       canvasContainer.style.flex = `1`;
     }
   </script>
+
+  <!--Startup Code Mirror 5-->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/theme/material-darker.min.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/javascript/javascript.min.js"></script>
+
+  <!--Application Startup-->
   <script src="main.js" type="text/javascript"></script>
 </body>
 

dart/web/main.dart

@@ -3,25 +3,26 @@ import 'dart:math';
 import 'dart:html';
 import 'dart:async';
 
+import 'package:code_mirror/code_mirror.dart';
 import 'package:wallpaper/wallpaper.dart';
 
 final CanvasElement canvas = querySelector("#output") as CanvasElement;
 final OffscreenCanvas offscreenCanvas = canvas.transferControlToOffscreen();
 final OffscreenCanvasRenderingContext2D offCtx = offscreenCanvas.getContext('2d') as OffscreenCanvasRenderingContext2D;
 
-final TextAreaElement textArea = document.querySelector("#input") as TextAreaElement;
 final ButtonElement saveBtn = document.querySelector("#save-btn") as ButtonElement;
 final DivElement loading = document.querySelector("#loading-panel") as DivElement;
 final ParagraphElement loadingMessage = document.querySelector("#loading-message") as ParagraphElement;
 
+final CodeMirrorEditor codeEditor = CodeMirrorEditor("#input");
+
 const int numberOfConfigurations = 7;
 Timer? _debounceTimer;
 
 final String workerName = "wallpaper_generator_worker.js";
 Worker? worker;
 
 void main() async {
-
   // Set first wallpaper
   await setFirstWallpaper();
 
@@ -36,8 +37,8 @@ Future setFirstWallpaper() async {
 }
 
 void bindUI() {
-  textArea.onInput.listen((_) => debounceUpdateWallpaper());
   saveBtn.onClick.listen((_) => saveImage());
+  codeEditor.onChange(debounceUpdateWallpaper);
 }
 
 void saveImage() {
@@ -58,26 +59,28 @@ void debounceUpdateWallpaper() {
 
 void updateWallpaper() {
   print("Wallpaper Update");
-  String compactJson = getJsonFromTextArea();
+  String? compactJson = codeEditor.getValue();
+  if (compactJson == null) return;
   Wallpaper? wallpaper = Wallpaper.fromRawJson(compactJson);
-  setWallpaper(wallpaper);
+  updateCanvas(wallpaper);
 }
 
 void setWallpaper(Wallpaper? wallpaper) {
   if (wallpaper == null) return;
-  setJsonInTextArea(wallpaper.toRawJson());
+  setJsonInCodeMirror(wallpaper.toRawJson());
   updateCanvas(wallpaper);
 }
 
-void setJsonInTextArea(String? jsonString) {
+void setJsonInCodeMirror(String? jsonString) {
   if (jsonString == null) return;
   Map<String, dynamic>? map = json.decoder.convert(jsonString);
   if (map == null) return;
   JsonEncoder encoder = JsonEncoder.withIndent('  ');
   String prettyprint = encoder.convert(map);
-  textArea.text = prettyprint;
+  codeEditor.setValue(prettyprint);
 }
 
+
 // Stop the current worker and start another one
 void updateCanvas(Wallpaper? wallpaper) {
   if (wallpaper == null) return;
@@ -104,12 +107,6 @@ void updateCanvas(Wallpaper? wallpaper) {
   worker?.postMessage({'wallpaper' : wallpaper.toJson()});
 }
 
-String getJsonFromTextArea() {
-  String jsonString = textArea.value!.trim();
-  Map<String, dynamic> jsonData = jsonDecode(jsonString);
-  return jsonEncode(jsonData);
-}
-
 Uri getRandomInitialConfiguration() {
   int index = Random.secure().nextInt(numberOfConfigurations) + 1;
   return Uri.parse("https://lucaffo.github.io/github-wallpapers/static/wallpapers/wallpaper_${index.toString().padLeft(2, '0')}.json");

dart/web/styles/styles.css

@@ -14,18 +14,25 @@ body {
   height: 100vh;
 }
 
-.container textarea {
-  flex: 1;
-  resize: none;
-  border: none;
-  padding: 10px;
+.codemirror-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-color: #1e1e1e;
+  padding: 0;
   margin: 0;
-  font-size: 20px;
-  align-content: center;
-  background-color: #333;
-  color: #fff;
-  outline: none;
-  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.codemirror-container > div {
+  width: 100%;
+  height: 100%;
+  font-size: 18px;
+  padding-right: 20px;
+}
+
+.CodeMirror-vscrollbar {
+  display: none;
 }
 
 .handle {
@@ -55,17 +62,17 @@ body {
 }
 
 .home-button-container {
-  position: absolute;
-  top: 10px;
-  left: 10px;
   display: flex;
+  position: relative;
   gap: 10px;
+  padding: 8px;
+  background-color: #333;
 }
 
 .save-button-container {
   position: absolute;
-  top: 10px;
-  right: 10px;
+  top: 8px;
+  right: 8px;
   display: flex;
   gap: 10px;
 }

packages/code_mirror/.gitignore

@@ -0,0 +1,7 @@
+# https://dart.dev/guides/libraries/private-files
+# Created by `dart pub`
+.dart_tool/
+
+# Avoid committing pubspec.lock for library packages; see
+# https://dart.dev/guides/libraries/private-files#pubspeclock.
+pubspec.lock

packages/code_mirror/analysis_options.yaml

@@ -0,0 +1,30 @@
+# This file configures the static analysis results for your project (errors,
+# warnings, and lints).
+#
+# This enables the 'recommended' set of lints from `package:lints`.
+# This set helps identify many issues that may lead to problems when running
+# or consuming Dart code, and enforces writing Dart using a single, idiomatic
+# style and format.
+#
+# If you want a smaller set of lints you can change this to specify
+# 'package:lints/core.yaml'. These are just the most critical lints
+# (the recommended set includes the core lints).
+# The core lints are also what is used by pub.dev for scoring packages.
+
+include: package:lints/recommended.yaml
+
+# Uncomment the following section to specify additional rules.
+
+# linter:
+#   rules:
+#     - camel_case_types
+
+# analyzer:
+#   exclude:
+#     - path/to/excluded/files/**
+
+# For more information about the core and recommended set of lints, see
+# https://dart.dev/go/core-lints
+
+# For additional information about configuring this file, see
+# https://dart.dev/guides/language/analysis-options

packages/code_mirror/lib/code_mirror.dart

@@ -0,0 +1,4 @@
+library;
+
+export 'src/code_mirror_editor.dart';
+

packages/code_mirror/lib/src/code_mirror_editor.dart

@@ -0,0 +1,47 @@
+import 'dart:js';
+import 'dart:html';
+
+class CodeMirrorEditor {
+  late JsObject _instance;
+
+  bool _avoidChange = false;
+
+  /// Default CodeMirror options
+  static final Map<String, dynamic> _defaultOptions = {
+    'mode': 'javascript',
+    'theme': 'material-darker',
+    'lineNumbers': true,
+    'indentWithTabs' : true,
+    'matchBrackets' : true
+  };
+
+  CodeMirrorEditor(String elementId) {
+    var element = document.querySelector(elementId);
+    if (element == null) {
+      throw ArgumentError("Element cannot be found at ID '$elementId'");
+    }
+
+    _instance = JsObject(context['CodeMirror'], [element, JsObject.jsify(_defaultOptions)]);
+  }
+
+  /// Listen for content changes.
+  void onChange(Function callback) {
+    final onChangeCallback = JsFunction.withThis((window, arg1, arg2) {
+      if (_avoidChange) {_avoidChange = false; return; }
+      callback();
+    });
+    
+    _instance.callMethod('on', ['change', onChangeCallback]);
+  }
+
+  /// Set the content of the editor.
+  void setValue(String? content) {
+    _avoidChange = true;
+    _instance.callMethod('setValue', [content]);
+  }
+
+  /// Get the current content of the editor.
+  String? getValue() {
+    return _instance.callMethod('getValue', []);
+  }
+}

packages/code_mirror/pubspec.yaml

@@ -0,0 +1,13 @@
+name: code_mirror
+description: A code mirror interop package
+version: 1.0.0
+publish_to: none
+
+environment:
+  sdk: ^3.6.2
+
+dependencies:
+
+dev_dependencies:
+  lints: ^5.0.0
+  test: ^1.24.0