feat: gaps in tailwind migration closed

2026-05-04 12:27:07 +02:00
parent eca89e51d2
commit 4ab0bc7b4e
24 changed files with 3198 additions and 3005 deletions
--- a/assets/js/hooks/monaco_diff_editor.js
+++ b/assets/js/hooks/monaco_diff_editor.js
@@ -0,0 +1,129 @@
+import { loadMonaco, ensureMonacoTheme, diffModelPath } from "../monaco/services.js";
+
+export const MonacoDiffEditor = {
+  mounted() {
+    this.host = this.el.querySelector(".monaco-diff-editor-instance");
+    this.originalInput = this.el.querySelector(".monaco-diff-original");
+    this.modifiedInput = this.el.querySelector(".monaco-diff-modified");
+    this.filePath = this.el.dataset.monacoDiffFilePath || "working-tree";
+    this.language = this.el.dataset.monacoDiffLanguage || "plaintext";
+    this.viewStyle = this.el.dataset.monacoDiffViewStyle || "inline";
+    this.wordWrap = this.el.dataset.monacoDiffWordWrap || "off";
+    this.hideUnchanged = this.el.dataset.monacoDiffHideUnchanged === "true";
+
+    this.readValues = () => ({
+      original: this.originalInput?.value || "",
+      modified: this.modifiedInput?.value || ""
+    });
+
+    this.applyDataset = () => {
+      this.filePath = this.el.dataset.monacoDiffFilePath || "working-tree";
+      this.language = this.el.dataset.monacoDiffLanguage || "plaintext";
+      this.viewStyle = this.el.dataset.monacoDiffViewStyle || "inline";
+      this.wordWrap = this.el.dataset.monacoDiffWordWrap || "off";
+      this.hideUnchanged = this.el.dataset.monacoDiffHideUnchanged === "true";
+    };
+
+    this.setModels = (monaco) => {
+      const values = this.readValues();
+
+      this.originalModel?.dispose();
+      this.modifiedModel?.dispose();
+
+      this.originalModel = monaco.editor.createModel(
+        values.original,
+        this.language,
+        monaco.Uri.parse(diffModelPath(this.filePath, "original"))
+      );
+
+      this.modifiedModel = monaco.editor.createModel(
+        values.modified,
+        this.language,
+        monaco.Uri.parse(diffModelPath(this.filePath, "modified"))
+      );
+
+      this.editor.setModel({ original: this.originalModel, modified: this.modifiedModel });
+      this.lastFilePath = this.filePath;
+    };
+
+    loadMonaco()
+      .then((monaco) => {
+        if (!this.host) {
+          return;
+        }
+
+        ensureMonacoTheme(monaco);
+
+        this.editor = monaco.editor.createDiffEditor(this.host, {
+          theme: "bds-theme",
+          automaticLayout: true,
+          readOnly: true,
+          renderSideBySide: this.viewStyle === "side-by-side",
+          minimap: { enabled: false },
+          scrollBeyondLastLine: false,
+          lineNumbers: "on",
+          diffCodeLens: false,
+          originalEditable: false,
+          wordWrap: this.wordWrap,
+          hideUnchangedRegions: { enabled: this.hideUnchanged },
+          ignoreTrimWhitespace: false
+        });
+
+        this.setModels(monaco);
+      })
+      .catch((error) => {
+        console.error("Failed to load Monaco diff editor", error);
+      });
+  },
+
+  updated() {
+    this.host = this.el.querySelector(".monaco-diff-editor-instance");
+    this.originalInput = this.el.querySelector(".monaco-diff-original");
+    this.modifiedInput = this.el.querySelector(".monaco-diff-modified");
+    this.applyDataset();
+
+    if (!this.editor) {
+      return;
+    }
+
+    loadMonaco().then((monaco) => {
+      ensureMonacoTheme(monaco);
+      monaco.editor.setTheme("bds-theme");
+
+      this.editor.updateOptions({
+        renderSideBySide: this.viewStyle === "side-by-side",
+        wordWrap: this.wordWrap,
+        hideUnchangedRegions: { enabled: this.hideUnchanged }
+      });
+
+      if (this.lastFilePath !== this.filePath) {
+        this.setModels(monaco);
+        return;
+      }
+
+      const values = this.readValues();
+
+      if (this.originalModel && this.originalModel.getLanguageId() !== this.language) {
+        monaco.editor.setModelLanguage(this.originalModel, this.language);
+      }
+
+      if (this.modifiedModel && this.modifiedModel.getLanguageId() !== this.language) {
+        monaco.editor.setModelLanguage(this.modifiedModel, this.language);
+      }
+
+      if (this.originalModel && this.originalModel.getValue() !== values.original) {
+        this.originalModel.setValue(values.original);
+      }
+
+      if (this.modifiedModel && this.modifiedModel.getValue() !== values.modified) {
+        this.modifiedModel.setValue(values.modified);
+      }
+    });
+  },
+
+  destroyed() {
+    this.originalModel?.dispose();
+    this.modifiedModel?.dispose();
+    this.editor?.dispose();
+  }
+};