@scm-manager/scm-code-editor-plugin 4.0.0-20260230-160625 → 4.0.0-20260928-154606

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@scm-manager/scm-code-editor-plugin",
   "private": false,
-  "version": "4.0.0-20260230-160625",
+  "version": "4.0.0-20260928-154606",
   "license": "AGPL-3.0-only",
   "main": "./src/main/js/index.tsx",
   "scripts": {
@@ -12,11 +12,11 @@
     "deploy": "plugin-scripts publish"
   },
   "dependencies": {
-    "@scm-manager/ui-api": "4.0.0-REACT19-20260213-175738",
-    "@scm-manager/ui-components": "4.0.0-REACT19-20260213-175738",
-    "@scm-manager/ui-core": "4.0.0-REACT19-20260213-175738",
-    "@scm-manager/ui-extensions": "4.0.0-REACT19-20260213-175738",
-    "@scm-manager/ui-plugins": "4.0.0-REACT19-20260213-175738",
+    "@scm-manager/ui-api": "4.0.0-20260928-094717",
+    "@scm-manager/ui-components": "4.0.0-20260928-094717",
+    "@scm-manager/ui-core": "4.0.0-20260928-094717",
+    "@scm-manager/ui-extensions": "4.0.0-20260928-094717",
+    "@scm-manager/ui-plugins": "4.0.0-20260928-094717",
     "@tanstack/react-query": "^5.90.6",
     "ace-builds": "^1.43.6",
     "classnames": "^2.3.4",
@@ -46,13 +46,15 @@
     "@scm-manager/eslint-config": "^2.18.2",
     "@scm-manager/plugin-scripts": "^1.6.1",
     "@scm-manager/prettier-config": "^2.12.0",
-    "@scm-manager/tsconfig": "^2.13.0",
-    "@scm-manager/ui-types": "4.0.0-REACT19-20260213-175738",
+    "@scm-manager/tsconfig": "^3.0.0-alpha1",
+    "@scm-manager/ui-types": "4.0.0-20260928-094717",
     "@types/classnames": "^2.3.4",
     "@types/i18next": "^13.0.0",
     "@types/query-string": "6",
     "@types/react": "^19.1.1",
     "@vitest/coverage-v8": "^4.0.18",
+    "@vitest/web-worker": "^4.0.18",
+    "jsdom": "^29.1.1",
     "vitest": "^4.0.18"
   },
   "publishConfig": {

package/src/main/js/components/CodeEditor.tsx

@@ -14,17 +14,18 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { Component } from "react";
-import { Loading, ErrorNotification } from "@scm-manager/ui-components";
-import { WithTranslation, withTranslation } from "react-i18next";
+import React, { FC, useState, useEffect, useCallback } from "react";
+import { useTranslation } from "react-i18next";
 
 import AceEditor from "react-ace";
 import "./EditorTheme.js";
 import findLanguage from "./findLanguage";
 import styled from "styled-components";
-import {registerTheme} from "./EditorTheme";
+import { registerTheme } from "./EditorTheme";
 import * as ace from "ace-builds";
-import {Ace} from "ace-builds";
+import { Ace } from "ace-builds";
+import { useCodeSettingValue } from "./useProfile";
+import { ErrorNotification, Loading } from "@scm-manager/ui-core";
 
 const defaultLanguage = "text";
 
@@ -33,7 +34,7 @@ type OnBlurCallbacks = {
   strgEnter: () => void;
 };
 
-type Props = WithTranslation & {
+type Props = {
   content?: string;
   language: string;
   disabled?: boolean;
@@ -43,122 +44,111 @@ type Props = WithTranslation & {
   onBlur?: OnBlurCallbacks;
 };
 
-type State = {
-  loading?: boolean;
-  error?: Error;
-  language?: string;
-};
-
 const StyledAceEditor = styled(AceEditor)`
   resize: vertical;
   min-height: 500px;
 `;
 
-class CodeEditor extends Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      loading: true,
-      language: defaultLanguage
-    };
-  }
-
-  getLanguage = () => {
-    const { language } = this.props;
-    return findLanguage(language);
-  };
-
-  // disabled for now, code splitting seems not work for plugins
-  componentDidMount() {
-    this.loadLanguage();
-  }
-
-  componentDidUpdate(prevProps: Readonly<Props>) {
-    if (prevProps.language !== this.props.language) {
-      this.loadLanguage();
-    }
-  }
+const CodeEditor: FC<Props> = ({
+                                 content,
+                                 language: languageProp,
+                                 disabled,
+                                 className,
+                                 initialFocus = false,
+                                 onChange,
+                                 onBlur
+                               }) => {
+  const { t } = useTranslation("plugins");
+  const { value: codeSetting } = useCodeSettingValue();
+
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | undefined>(undefined);
+  const [currentLanguage, setCurrentLanguage] = useState(defaultLanguage);
+
+  useEffect(() => {
+    const language = findLanguage(languageProp);
+    setLoading(true);
 
-  loadLanguage = () => {
-    const language = this.getLanguage();
-    this.setState({
-      loading: true,
-      error: undefined
-    });
     import(`ace-builds/src-noconflict/mode-${language}`)
       .then(() => {
-        this.setState({
-          loading: false,
-          error: undefined,
-          language
-        });
+        setCurrentLanguage(language);
+        setError(undefined);
+        setLoading(false);
       })
-      .catch(error => {
-        this.setState({
-          loading: false,
-          error,
-          language: defaultLanguage
-        });
+      .catch((err) => {
+        setCurrentLanguage(defaultLanguage);
+        setError(err);
+        setLoading(false);
       });
-  };
+  }, [languageProp]);
+
+  const reloadEditor = useCallback((editor: Ace.Editor) => {
+    const session = editor.getSession();
+    session.setOptions({
+      mode: "ace/mode/javascript",
+      tabSize: codeSetting.tabSize,
+      useSoftTabs: false
+    });
 
-  reloadEditor = (editor: Ace.Editor) => {
+    document.documentElement.style.setProperty(
+      "--user-tab-size",
+      String(codeSetting.tabSize)
+    );
+
+    editor.renderer.updateCharacterSize();
     editor.resize(true);
     editor.renderer.updateFull(true);
-  };
-
-  render() {
-    const { content, disabled, className, onChange, initialFocus = false, t } = this.props;
-    const { language, loading, error } = this.state;
-
-    if (loading) {
-      return <Loading />;
-    } else if (error) {
-      return <ErrorNotification error={error} />;
-    }
-
-    return (
-      <StyledAceEditor
-        className={`is-family-monospace ${className}`}
-        mode={language}
-        onLoad={(editor) => {
-          registerTheme(ace);
-          editor.setTheme("ace/theme/scm-manager");
-        }}
-        theme="scm-manager"
-        onChange={onChange}
-        name="UNIQUE_ID_OF_DIV"
-        value={content}
-        readOnly={disabled}
-        width="100%"
-        fontSize="14px"
-        onFocus={(event, editor: Ace.Editor) => this.reloadEditor(editor)}
-        onScroll={(editor: Ace.Editor) => this.reloadEditor(editor)}
-        setOptions={{ useWorker: false, cursorStyle: "smooth", autoScrollEditorIntoView: true }}
-        placeholder={t("scm-editor-plugin.edit.placeholder")}
-        focus={initialFocus}
-        navigateToFileEnd={false}
-        commands={[
-          {
-            name: "ToCommitMessage",
-            bindKey: { mac: "Command-Enter", win: "Ctrl-Enter" },
-            exec: editor => {
-              editor.blur();
-              this.props.onBlur?.strgEnter();
-            }
-          },
-          {
-            name: "ToCancelButton",
-            bindKey: { mac: "Esc", win: "Esc" },
-            exec: editor => {
-              editor.blur();
-              this.props.onBlur?.esc();
-            }
-          }
-        ]}
-      />
-    );
+  }, [codeSetting.tabSize, content]);
+
+  if (loading) {
+    return <Loading />;
+  } else if (error) {
+    return <ErrorNotification error={error} />;
   }
-}
 
-export default withTranslation("plugins")(CodeEditor);
+  return (
+    <StyledAceEditor
+      className={`is-family-monospace ${className}`}
+      mode={currentLanguage}
+      onLoad={(editor) => {
+        registerTheme(ace);
+        editor.setTheme("ace/theme/scm-manager");
+        reloadEditor(editor);
+      }}
+      theme="scm-manager"
+      onChange={onChange}
+      name="UNIQUE_ID_OF_DIV"
+      value={content}
+      readOnly={disabled}
+      width="100%"
+      fontSize="14px"
+      onFocus={(event, editor) => {
+        reloadEditor(editor as any);
+      }}
+      setOptions={{ useWorker: false, cursorStyle: "smooth", autoScrollEditorIntoView: true }}
+      placeholder={t("scm-editor-plugin.edit.placeholder")}
+      focus={initialFocus}
+      navigateToFileEnd={false}
+      commands={[
+        {
+          name: "ToCommitMessage",
+          bindKey: { mac: "Command-Enter", win: "Ctrl-Enter" },
+          exec: (editor) => {
+            editor.blur();
+            onBlur?.strgEnter();
+          }
+        },
+        {
+          name: "ToCancelButton",
+          bindKey: { mac: "Esc", win: "Esc" },
+          exec: (editor) => {
+            editor.blur();
+            onBlur?.esc();
+          }
+        }
+      ]}
+    />
+  );
+};
+
+export default CodeEditor;

package/src/main/js/components/EditorTheme.css

@@ -15,7 +15,6 @@
  */
 
 .ace-scm-manager {
-  font-family: monospace !important;
   font-size: 14px !important;
   line-height: 21px !important;
   font-weight: 400;

package/src/main/js/components/useProfile.ts

@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2020 - present Cloudogu GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see https://www.gnu.org/licenses/.
+ */
+
+import { useLocalStorage } from "@scm-manager/ui-api";
+
+const LOCAL_STORAGE_KEY = "scm.profile.code.setting";
+
+export type CodeSettingConfig = {
+  tabSize: number;
+};
+
+export const useCodeSettingValue = () => {
+  const [value] = useLocalStorage<CodeSettingConfig>(LOCAL_STORAGE_KEY, { tabSize: 4 });
+
+  return { value, isLoading: false } as const;
+};