Support line height

securingsincity · Sep 19, 2023 · 5e371dc · 5e371dc
1 parent 5e2290f
commit 5e371dc
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 1 deletion.
diff --git a/example/index.js b/example/index.js
@@ -98,6 +98,11 @@ class App extends Component {
       fontSize: parseInt(e.target.value, 10)
     });
   }
+  setLineHeight(e) {
+    this.setState({
+      lineHeight: parseInt(e.target.value, 10)
+    });
+  }
   constructor(props) {
     super(props);
     this.state = {
@@ -108,6 +113,7 @@ class App extends Component {
       enableBasicAutocompletion: false,
       enableLiveAutocompletion: false,
       fontSize: 14,
+      lineHeight: 19,
       showGutter: true,
       showPrintMargin: true,
       highlightActiveLine: true,
@@ -119,6 +125,7 @@ class App extends Component {
     this.setMode = this.setMode.bind(this);
     this.onChange = this.onChange.bind(this);
     this.setFontSize = this.setFontSize.bind(this);
+    this.setLineHeight = this.setLineHeight.bind(this),
     this.setBoolean = this.setBoolean.bind(this);
   }
   render() {
@@ -182,6 +189,25 @@ class App extends Component {
             </p>
           </div>
 
+          <div className="field">
+            <label>Line Height:</label>
+            <p className="control">
+              <span className="select">
+                <select
+                  name="Line Height"
+                  onChange={this.setLineHeight}
+                  value={this.state.lineHeight}
+                >
+                  {[19, 24, 28, 32, 40].map(lang => (
+                    <option key={lang} value={lang}>
+                      {lang}
+                    </option>
+                  ))}
+                </select>
+              </span>
+            </p>
+          </div>
+
           <div className="field">
             <label>Placeholder:</label>
             <p className="control">
@@ -312,6 +338,7 @@ class App extends Component {
             onCursorChange={this.onCursorChange}
             onValidate={this.onValidate}
             value={this.state.value}
+            lineHeight={this.state.lineHeight}
             fontSize={this.state.fontSize}
             showPrintMargin={this.state.showPrintMargin}
             showGutter={this.state.showGutter}
@@ -340,6 +367,7 @@ class App extends Component {
   onLoad={this.onLoad}
   onChange={this.onChange}
   fontSize={${this.state.fontSize}}
+  lineHeight={${this.state.lineHeight}}
   showPrintMargin={${this.state.showPrintMargin}}
   showGutter={${this.state.showGutter}}
   highlightActiveLine={${this.state.highlightActiveLine}}

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-ace",
-  "version": "10.1.0",
+  "version": "10.1.1",
   "description": "A react component for Ace Editor",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

diff --git a/src/ace.tsx b/src/ace.tsx
@@ -33,6 +33,7 @@ export interface IAceEditorProps {
   width?: string;
   className?: string;
   fontSize?: number | string;
+  lineHeight?: number | string;
   showGutter?: boolean;
   showPrintMargin?: boolean;
   highlightActiveLine?: boolean;
@@ -83,6 +84,7 @@ export default class ReactAce extends React.Component<IAceEditorProps> {
     height: PropTypes.string,
     width: PropTypes.string,
     fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    lineHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     showGutter: PropTypes.bool,
     onChange: PropTypes.func,
     onCopy: PropTypes.func,
@@ -189,6 +191,7 @@ export default class ReactAce extends React.Component<IAceEditorProps> {
       focus,
       theme,
       fontSize,
+      lineHeight,
       value,
       defaultValue,
       showGutter,
@@ -238,6 +241,10 @@ export default class ReactAce extends React.Component<IAceEditorProps> {
     this.editor.setFontSize(
       typeof fontSize === "number" ? `${fontSize}px` : fontSize
     );
+    if (lineHeight) {
+      this.editor.container.style.lineHeight = typeof lineHeight === "number" ? `${lineHeight}px` : `${lineHeight}`
+      this.editor.renderer.updateFontSize()
+    }
     this.editor
       .getSession()
       .setValue(!defaultValue ? value || "" : defaultValue);
@@ -388,6 +395,14 @@ export default class ReactAce extends React.Component<IAceEditorProps> {
           : nextProps.fontSize
       );
     }
+    if (nextProps.lineHeight !== oldProps.lineHeight) {
+      this.editor.container.style.lineHeight =
+        typeof nextProps.lineHeight === "number"
+          ? `${nextProps.lineHeight}px`
+          : nextProps.lineHeight
+      ;
+      this.editor.renderer.updateFontSize()
+    }
     if (nextProps.wrapEnabled !== oldProps.wrapEnabled) {
       this.editor.getSession().setUseWrapMode(nextProps.wrapEnabled);
     }