Add support for first line number setting (#849)

* Add support for first line number setting

* Set min value to 0

* Add number types

* add label and width settings to Input

* use Input component instead of Text

* remove unused types

* first-row -> first-line-number-row

* more .row into global stylesheet

components/Carbon.js

@@ -143,6 +143,7 @@ class Carbon extends React.PureComponent {
 
     const options = {
       lineNumbers: config.lineNumbers,
+      firstLineNumber: config.firstLineNumber,
       mode: languageMode || 'plaintext',
       theme: config.theme,
       scrollBarStyle: null,

components/Input.js

@@ -2,39 +2,48 @@ import React from 'react'
 
 import { COLORS } from '../lib/constants'
 
-const Input = React.forwardRef(({ color = COLORS.SECONDARY, align = 'right', ...props }, ref) => (
+const Input = React.forwardRef(
-  <React.Fragment>
+  ({ color = COLORS.SECONDARY, align = 'right', width = '100%', label, ...props }, ref) => (
-    <input ref={ref} {...props} />
+    <React.Fragment>
-    <style jsx>
+      {label && <label>{label}</label>}
-      {`
+      <input ref={ref} {...props} />
-        input {
+      <style jsx>
-          width: 100%;
+        {`
-          font-size: 12px;
+          input {
-          color: ${color};
+            width: ${width};
-          background: transparent;
+            font-size: 12px;
-          border: none;
+            color: ${color};
-          outline: none;
+            background: transparent;
-          text-align: ${align};
+            border: none;
-          overflow: hidden;
+            outline: none;
-          white-space: nowrap;
+            text-align: ${align};
-          text-overflow: ellipsis;
+            overflow: hidden;
-        }
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
 
-        input::placeholder {
+          input::placeholder {
-          color: ${color};
+            color: ${color};
-          opacity: 0.4;
+            opacity: 0.4;
-        }
+          }
 
-        input[type='file'] {
+          input[type='file'] {
-          cursor: pointer;
+            cursor: pointer;
-        }
+          }
 
-        input[type='file']:focus {
+          input[type='file']:focus {
-          outline: initial;
+            outline: initial;
-        }
+          }
-      `}
+
-    </style>
+          input[type='number']::-webkit-inner-spin-button,
-  </React.Fragment>
+          input[type='number']::-webkit-outer-spin-button {
-))
+            -webkit-appearance: none;
+            margin: 0;
+          }
+        `}
+      </style>
+    </React.Fragment>
+  )
+)
 
 export default Input

components/Settings.js

@@ -4,6 +4,7 @@ import omitBy from 'lodash.omitby'
 import ThemeSelect from './ThemeSelect'
 import FontSelect from './FontSelect'
 import Slider from './Slider'
+import Input from './Input'
 import Toggle from './Toggle'
 import Popout, { managePopout } from './Popout'
 import Button from './Button'
@@ -24,6 +25,7 @@ const WindowSettings = React.memo(
     dropShadowOffsetY,
     windowControls,
     lineNumbers,
+    firstLineNumber,
     widthAdjustment,
     watermark,
     onWidthChanging,
@@ -79,6 +81,18 @@ const WindowSettings = React.memo(
           enabled={lineNumbers}
           onChange={onChange.bind(null, 'lineNumbers')}
         />
+        {lineNumbers && (
+          <div className="row settings-row first-line-number-row">
+            <Input
+              label="First line number"
+              type="number"
+              value={firstLineNumber}
+              min={0}
+              onChange={e => onChange('firstLineNumber', Number(e.target.value))}
+              width="50%"
+            />
+          </div>
+        )}
         <Toggle
           label="Auto-adjust width"
           enabled={widthAdjustment}
@@ -87,10 +101,6 @@ const WindowSettings = React.memo(
         <Toggle label="Watermark" enabled={watermark} onChange={onChange.bind(null, 'watermark')} />
         <style jsx>
           {`
-            .row {
-              display: flex;
-            }
-
             .row > :global(div:first-child) {
               border-right: 1px solid ${COLORS.SECONDARY};
             }
@@ -99,6 +109,14 @@ const WindowSettings = React.memo(
             .drop-shadow-options :global(label) {
               opacity: 0.5;
             }
+
+            .settings-content :global(.settings-row:focus-within) {
+              outline: -webkit-focus-ring-color auto 5px;
+            }
+
+            .first-line-number-row {
+              padding: 8px 12px 8px 8px;
+            }
           `}
         </style>
       </div>
@@ -184,7 +202,6 @@ const MiscSettings = React.memo(({ format, reset, applyPreset, settings }) => {
       <style jsx>
         {`
           .row {
-            display: flex;
             flex: 1;
           }
           .settings-content {
@@ -365,6 +382,7 @@ class Settings extends React.PureComponent {
             dropShadowOffsetY={this.props.dropShadowOffsetY}
             windowControls={this.props.windowControls}
             lineNumbers={this.props.lineNumbers}
+            firstLineNumber={this.props.firstLineNumber}
             widthAdjustment={this.props.widthAdjustment}
             watermark={this.props.watermark}
           />

components/Slider.js

@@ -19,7 +19,7 @@ class Slider extends React.Component {
     const step = 'step' in this.props ? this.props.step : 1
 
     return (
-      <div className="slider">
+      <div className="slider settings-row">
         <div
           className="slider-bg"
           style={{
@@ -48,10 +48,6 @@ class Slider extends React.Component {
               user-select: none;
             }
 
-            .slider:focus-within {
-              outline: -webkit-focus-ring-color auto 5px;
-            }
-
             .slider:last-of-type {
               border-bottom: 0;
             }

components/Themes/ThemeCreate.js

@@ -154,7 +154,6 @@ const ThemeCreate = ({
           }
 
           .row {
-            display: flex;
             flex: 1;
             align-items: center;
             justify-content: space-between;

components/style/Reset.js

@@ -214,6 +214,10 @@ export default () => (
         left: -10%;
       }
 
+      .row {
+        display: flex;
+      }
+
       /* include just until we have a keyboard navigation style system */
       [role='button']:focus {
         outline: none;

lib/constants.js

@@ -1049,6 +1049,7 @@ export const DEFAULT_SETTINGS = {
   windowControls: true,
   widthAdjustment: true,
   lineNumbers: false,
+  firstLineNumber: 1,
   exportSize: '2x',
   watermark: false,
   squaredImage: false,

lib/routing.js

@@ -11,6 +11,11 @@ const mapper = new Morph({
       if (v === 'false') return false
       return Boolean(v)
     },
+    int: v => {
+      const integer = parseInt(v)
+      if (isNaN(integer)) return undefined
+      return integer
+    },
     parse: v => {
       try {
         const x = JSON.parse(v)
@@ -56,6 +61,7 @@ const readMappings = [
   { field: 'pv:paddingVertical' },
   { field: 'ph:paddingHorizontal' },
   { field: 'ln:lineNumbers', type: 'bool' },
+  { field: 'fl:firstLineNumber', type: 'int' },
   { field: 'fm:fontFamily' },
   { field: 'fs:fontSize' },
   { field: 'lh:lineHeight' },
@@ -82,6 +88,7 @@ const writeMappings = [
   { field: 'paddingVertical:pv' },
   { field: 'paddingHorizontal:ph' },
   { field: 'lineNumbers:ln', type: 'bool' },
+  { field: 'firstLineNumber:fl', type: 'int' },
   { field: 'fontFamily:fm' },
   { field: 'fontSize:fs' },
   { field: 'lineHeight:lh' },