@scm-manager/scm-code-editor-plugin 1.1.0-20220007-142124 → 1.1.0

package/CHANGELOG.md

@@ -4,6 +4,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [1.0.0] - 2020-10-27
+## 1.1.0 - 2023-01-23
+### Added
+- Make editor resizable
+
+### Changed
+- Make the editor component auto focusable
+
+## 1.0.1 - 2022-01-07
+### Fixed
+- High contrast mode findings ([#4](https://github.com/scm-manager/scm-code-editor-plugin/pull/4))
+
+## 1.0.0 - 2020-10-27
 ### Added
 - Provides code-editor which can be used by other plugins
+

package/package.json

@@ -1,68 +1,70 @@
 {
-  "name": "@scm-manager/scm-code-editor-plugin",
-  "private": false,
-  "version": "1.1.0-20220007-142124",
-  "license": "MIT",
-  "main": "./src/main/js/index.tsx",
-  "scripts": {
-    "gen-languages": "node scripts/gen-languages.js",
-    "build": "plugin-scripts build",
-    "watch": "plugin-scripts watch",
-    "postinstall": "plugin-scripts postinstall",
-    "deploy": "plugin-scripts publish"
-  },
-  "dependencies": {
-    "@scm-manager/ui-components": "^2.8.0",
-    "@scm-manager/ui-extensions": "^2.8.0",
-    "@scm-manager/ui-plugins": "2.8.0",
-    "classnames": "^2.2.6",
-    "query-string": "^5.0.1",
-    "react": "^16.10.2",
-    "react-ace": "^9.1.4",
-    "react-i18next": "^10.13.1",
-    "react-redux": "^5.0.7",
-    "react-router-dom": "^5.1.2",
-    "redux": "^4.0.0",
-    "styled-components": "^5.1.0"
-  },
-  "babel": {
-    "presets": [
-      "@scm-manager/babel-preset"
+    "name": "@scm-manager/scm-code-editor-plugin",
+    "private": false,
+    "version": "1.1.0",
+    "license": "MIT",
+    "main": "./src/main/js/index.tsx",
+    "scripts": {
+        "gen-languages": "node scripts/gen-languages.js",
+        "build": "plugin-scripts build",
+        "watch": "plugin-scripts watch",
+        "postinstall": "plugin-scripts postinstall",
+        "deploy": "plugin-scripts publish"
+    },
+    "dependencies": {
+        "@scm-manager/ui-components": "^2.26.0",
+        "@scm-manager/ui-extensions": "^2.26.0",
+        "@scm-manager/ui-plugins": "2.26.0",
+        "classnames": "^2.2.6",
+        "query-string": "^5.0.1",
+        "react": "^17.0.1",
+        "react-ace": "^9.1.4",
+        "react-i18next": "^10.13.1",
+        "react-redux": "^5.0.7",
+        "react-router-dom": "^5.1.2",
+        "redux": "^4.0.0",
+        "styled-components": "^5.1.0",
+        "react-hook-form": "^7.5.1",
+        "react-router": "^5.3.1"
+    },
+    "babel": {
+        "presets": [
+            "@scm-manager/babel-preset"
+        ]
+    },
+    "jest": {
+        "preset": "@scm-manager/jest-preset"
+    },
+    "prettier": "@scm-manager/prettier-config",
+    "eslintConfig": {
+        "extends": "@scm-manager/eslint-config"
+    },
+    "devDependencies": {
+        "@scm-manager/babel-preset": "^2.13.1",
+        "@scm-manager/eslint-config": "^2.15.1",
+        "@scm-manager/jest-preset": "^2.13.0",
+        "@scm-manager/prettier-config": "^2.10.1",
+        "@scm-manager/tsconfig": "^2.13.0",
+        "@scm-manager/ui-scripts": "^2.26.0",
+        "@scm-manager/ui-tests": "^2.26.0",
+        "@scm-manager/ui-types": "^2.26.0",
+        "@types/classnames": "^2.2.9",
+        "@types/enzyme": "^3.10.3",
+        "@types/fetch-mock": "^7.3.1",
+        "@types/i18next": "^13.0.0",
+        "@types/jest": "^24.0.19",
+        "@types/query-string": "5",
+        "@types/react": "^17.0.1",
+        "@types/react-redux": "5.0.7",
+        "@types/react-router-dom": "^5.1.0",
+        "@types/styled-components": "^5.1.0",
+        "jest": "^24.9.0",
+        "@scm-manager/plugin-scripts": "^1.2.2"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "files": [
+        "src/main/js"
     ]
-  },
-  "jest": {
-    "preset": "@scm-manager/jest-preset"
-  },
-  "prettier": "@scm-manager/prettier-config",
-  "eslintConfig": {
-    "extends": "@scm-manager/eslint-config"
-  },
-  "devDependencies": {
-    "@scm-manager/babel-preset": "^2.8.0",
-    "@scm-manager/eslint-config": "^2.8.0",
-    "@scm-manager/jest-preset": "^2.12.3",
-    "@scm-manager/plugin-scripts": "1.0.1",
-    "@scm-manager/prettier-config": "^2.8.0",
-    "@scm-manager/tsconfig": "^2.8.0",
-    "@scm-manager/ui-scripts": "^2.8.0",
-    "@scm-manager/ui-tests": "^2.8.0",
-    "@scm-manager/ui-types": "^2.8.0",
-    "@types/classnames": "^2.2.9",
-    "@types/enzyme": "^3.10.3",
-    "@types/fetch-mock": "^7.3.1",
-    "@types/i18next": "^13.0.0",
-    "@types/jest": "^24.0.19",
-    "@types/query-string": "5",
-    "@types/react": "^16.9.9",
-    "@types/react-redux": "5.0.7",
-    "@types/react-router-dom": "^5.1.0",
-    "@types/styled-components": "^5.1.0",
-    "jest": "^24.9.0"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "files": [
-    "src/main/js"
-  ]
-}
+}

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

@@ -28,6 +28,7 @@ import { WithTranslation, withTranslation } from "react-i18next";
 import AceEditor from "react-ace";
 import "./EditorTheme.js";
 import findLanguage from "./findLanguage";
+import styled from "styled-components";
 
 const defaultLanguage = "text";
 
@@ -36,6 +37,7 @@ type Props = WithTranslation & {
   language: string;
   disabled?: boolean;
   className?: string;
+  initialFocus?: boolean;
   onChange: (value: string) => void;
 };
 
@@ -45,6 +47,11 @@ type State = {
   language?: string;
 };
 
+const StyledAceEditor = styled(AceEditor)`
+  resize: vertical;
+  min-height: 500px;
+`;
+
 class CodeEditor extends Component<Props, State> {
   constructor(props: Props) {
     super(props);
@@ -93,8 +100,13 @@ class CodeEditor extends Component<Props, State> {
       });
   };
 
+  reloadEditor = (editor: Ace.Editor) => {
+    editor.resize(true);
+    editor.renderer.updateFull(true);
+  }
+
   render() {
-    const { content, disabled, className, onChange, t } = this.props;
+    const { content, disabled, className, onChange, initialFocus = false, t } = this.props;
     const { language, loading, error } = this.state;
 
     if (loading) {
@@ -104,7 +116,7 @@ class CodeEditor extends Component<Props, State> {
     }
 
     return (
-      <AceEditor
+      <StyledAceEditor
         className={`is-family-monospace ${className}`}
         mode={language}
         theme="scm-manager"
@@ -114,8 +126,12 @@ class CodeEditor extends Component<Props, State> {
         readOnly={disabled}
         width="100%"
         fontSize="14px"
-        setOptions={{ useWorker: false }}
+        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}
       />
     );
   }