tabs 2, option to use codemirror, line numbers

Author: greggman

DEVELOPMENT.md

@@ -72,15 +72,20 @@ Mine is configured only to respond to requests for domains I control.
 
 Then, in one terminal
 
-```
+```bash
 REACT_APP_OAUTH_HELPER_URL=<url-to-your-auth-helper> npm start
 ```
 
 and in another.
 
-```
-ngron http --subdomain=somedomain 3000
+```bash
+ngrok http --subdomain=somedomain 3000
 ```
 
 Then go to `https://somedomain.ngrok.io`. Note that at the moment the preview won't
 work but you can test authenticating, etc...
+
+# Switching editors
+
+By default Monaco is used on desktop, CodeMirror on mobile.
+To test CodeMirror on desktop add `codeMirror=true` as a query parameter.

src/components/App.css

@@ -702,6 +702,10 @@ hr {
   resize: vertical;
   overflow: auto;
 }
+.new-comment .new-comment-write {
+  min-height: 10em;
+  height: 10em;
+}
 .new-comment .new-comment-preview {
   min-height: 10em;
   padding: 0.5em;

src/components/App.js

@@ -18,6 +18,7 @@ import ServiceContext from '../ServiceContext.js';
 import Settings from './Settings.js';
 import UserManager from '../libs/UserManager.js';
 import * as winMsgMgr from '../libs/WindowMessageManager';
+import query from '../libs/start-query.js';
 
 import './App.css';
 
@@ -90,7 +91,6 @@ class App extends React.Component {
       this.setState({dark: darkMatcher.matches});
     });
 
-    const query = Object.fromEntries(new URLSearchParams(window.location.search).entries());
     if (query.newGist) {
       window.history.pushState({}, '', `${window.location.origin}`);
       window.opener.postMessage({type: 'gimmeDaCodez'}, '*');

src/components/Code.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import CodeCodeMirror from './CodeCodeMirror';
 import CodeMonaco from './CodeMonaco';
+import query from '../libs/start-query.js';
 
 // TODO: Make Monaco lazy load
 
 // This sucks but Monaco doesn't work on mobile
-const canMonaco = !(/webOS|iPhone|iPad|Android/.test(navigator.userAgent));
+const canMonaco = !query.codeMirror && !(/webOS|iPhone|iPad|Android/.test(navigator.userAgent));
 
 export default function Code(props) {
   return (

src/components/CodeMonaco.js

@@ -8,6 +8,11 @@ const darkMatcher = window.matchMedia
 
 const noop = () => {};
 
+function codeMirrorModeToLanguage(editor) {
+  const language = (editor?.mode || 'javascript').split('/').pop();
+  return language === 'gfm' ? 'markdown' : language;
+}
+
 export default class CodeMonaco extends React.Component {
   constructor(props) {
     super(props);
@@ -22,6 +27,7 @@ export default class CodeMonaco extends React.Component {
   }
   handleEditorDidMount = (editor, monaco) => {
     this.editor = editor;
+    editor.getModel().updateOptions({tabSize: 2});
     const {registerAPI} = this.props;
     if (registerAPI) {
       registerAPI({
@@ -50,7 +56,7 @@ export default class CodeMonaco extends React.Component {
     // https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IEditorConstructionOptions.html
 
     // we pass in mime-type (eg. 'text/css' but monaco wants just 'css')
-    const language = (options.editor?.mode || 'javascript').split('/').pop();
+    const language = codeMirrorModeToLanguage(options.editor).split('/').pop();
     return (
       <Editor
         theme={isDarkMode ? "vs-dark" : "light"}
@@ -60,7 +66,7 @@ export default class CodeMonaco extends React.Component {
         onMount={this.handleEditorDidMount}
         options={{
           minimap: {enabled: false},
-          lineNumbers: "off",
+          // lineNumbers: "off",
           glyphMargin: false,
           folding: false,
         }}

src/libs/start-query.js

@@ -0,0 +1,2 @@
+const query = Object.fromEntries(new URLSearchParams(window.location.search).entries());
+export default query;