feat(plugins/plugin-client-common): be smarter about enabling line numbers in monaco-editor

right now, for SimpleEditor, we never use line numbers. but they can be quite helpful. this PR enables them, except for single-liners.

also, we weren't distinguishing the coloring of the line numbers by selected line. monaco does this by default, we just weren't theme-aligning it well.

Author: starpit

plugins/plugin-bash-like/src/test/bash-like/head.ts

@@ -29,14 +29,18 @@ const rootRelative = (dir: string) => join(ROOT, dir)
       CLI.command(`${head} ${rootRelative('package.json')}`, this.app)
         .then(ReplExpect.ok)
         .then(SidecarExpect.open)
-        .then(res =>
-          this.app.client.waitUntil(async () => {
+        .then(res => {
+          let idx = 0
+          return this.app.client.waitUntil(async () => {
             const linesNumbers = await this.app.client.$$(
               Selectors.SIDECAR_CUSTOM_CONTENT_LINE_NUMBERS(res.count, res.splitIndex)
             )
+            if (++idx > 5) {
+              console.error(`Still waiting for lineNumbers actual=${linesNumbers.length} expected=10`)
+            }
             return linesNumbers.length === 10
           })
-        )
+        })
         .catch(Common.oops(this)))
 
     it(`should ${head} -n 5 package.json and see 5 lines`, () =>

plugins/plugin-client-common/src/components/Content/Editor/SimpleEditor.tsx

@@ -150,6 +150,8 @@ export default class SimpleEditor extends React.Component<Props, State> {
   private initMonaco(props: Props, state: State) {
     const cleaners = []
 
+    const nLines = props.content.split(/\n/).length
+
     try {
       // here we instantiate an editor widget
       const providedOptions = {
@@ -162,7 +164,15 @@ export default class SimpleEditor extends React.Component<Props, State> {
       }
       const overrides: Monaco.IStandaloneEditorConstructionOptions = { theme: props.light ? 'vs' : 'vs-dark' }
       const options: Monaco.IStandaloneEditorConstructionOptions = Object.assign(
-        defaultMonacoOptions(providedOptions),
+        defaultMonacoOptions(
+          Object.assign(
+            {
+              showLineNumbers: nLines > 1,
+              lineNumbersMinChars: nLines.toString().length
+            },
+            providedOptions
+          )
+        ),
         providedOptions,
         overrides
       )

plugins/plugin-client-common/src/components/Content/Editor/index.tsx

@@ -355,6 +355,7 @@ export default class Editor extends React.PureComponent<Props, State> {
       // here we instantiate an editor widget
       const providedOptions = {
         value: '',
+        showLineNumbers: true,
         readOnly: Editor.isReadOnly(props, state),
         language:
           state.content.contentType === 'text/plain'

plugins/plugin-client-common/src/components/Content/Editor/lib/defaults.ts

@@ -22,6 +22,7 @@ export interface Options extends editor.IEditorConstructionOptions {
   simple?: boolean
   fontSize?: number
   language?: string
+  showLineNumbers?: boolean
 }
 
 /** Once we scroll to the bottom or top, then start scrolling the enclosing scroll region */
@@ -59,10 +60,10 @@ export default (options: Options): editor.IEditorConstructionOptions => ({
   // simplify the UI?
   links: !options.simple,
   folding: !options.simple || !/markdown|text|shell/i.test(options.language),
-  lineNumbers: options.simple ? 'off' : 'on',
+  lineNumbers: !options.showLineNumbers ? 'off' : 'on',
   wordWrap: options.wordWrap || (options.simple ? 'off' : 'on'),
-  wrappingIndent: 'indent',
   renderLineHighlight: options.simple ? 'none' : undefined,
   renderFinalNewline: !options.simple,
-  lineDecorationsWidth: options.simple ? 0 : undefined
+  lineDecorationsWidth: !options.showLineNumbers ? 0 : undefined,
+  lineNumbersMinChars: options.lineNumbersMinChars || (!options.showLineNumbers ? 0 : undefined)
 })

plugins/plugin-client-common/web/scss/components/Editor/theme-alignment.scss

@@ -17,11 +17,11 @@ body[kui-theme-style] .monaco-editor {
 
 body[kui-theme-style] .monaco-editor .current-line ~ .line-numbers {
   transition: color 300ms ease-in-out;
-  color: var(--color-brand-02);
+  color: var(--color-text-02);
 }
 body[kui-theme-style] .monaco-editor .line-numbers {
   transition: color 300ms ease-in-out;
-  color: var(--color-text-02);
+  color: var(--color-base04);
   font-weight: 300;
 }