Attempting to have Monaco resize properly.

constructorlabs · Mar 4, 2019 · 39c149c · 39c149c
1 parent 9858660
commit 39c149c
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 3 deletions.
diff --git a/example/example.css b/example/example.css
@@ -2,18 +2,52 @@
  margin: 0;
 }
 
+h1 {
+ font-family: Helvetica, sans-serif;
+ font-size: 24px;
+ border-radius: 4px;
+ border: 1px solid darkgray;
+ background: #e1e1e1;
+ padding: 10px;
+}
+
+h2 {
+ font-family: Helvetica, sans-serif;
+ font-size: 18px;
+ border-bottom: 1px solid darkgray;
+ margin-bottom: 5px;
+}
+
+.description {
+ font-family: Helvetica, sans-serif;
+ border-radius: 4px;
+ border: 1px solid darkgray;
+ background: #e1e1e1;
+ padding: 4px 10px;
+ margin-bottom: 5px;
+}
+
 .editors {
+ position: relative;
  display: flex;
  flex-direction: row;
  flex: 1;
+ max-width: 100%;
 }
 
 .editor-column {
  flex: 1;
+ display: flex;
+ flex-direction: column;
+}
+
+.editor-column:first-child {
+ margin-right: 20px;
 }
 
 .editor {
  height: 500px;
  border: 1px solid grey;
- margin-right: 20px;
+ flex: 1;
+
 }
diff --git a/example/example.js b/example/example.js
@@ -84,4 +84,10 @@ require(['vs/editor/editor.main', 'MonacoCollabExt'], function(m, MonacoCollabEx
  target.updateOptions({readOnly: true});
  }
  });
+
+
+ window.addEventListener('resize', () => {
+ source.layout();
+ target.layout();
+ });
 });
diff --git a/example/index.html b/example/index.html
@@ -9,12 +9,16 @@
  <link rel="stylesheet" href="./example.css">
 </head>
 <body>
-
+<h1>Monaco Editor Collaborative Extensions Demo</h1>
 <div class="editors">
  <div class="editor-column">
- <div class="editor" id="source-editor"></div>
+ <h2>Source Editor</h2>
+ <div class="description">Type and make selections here.</div>
+ <div class="editor" id="source-editor"></div>
  </div>
  <div class="editor-column">
+ <h2>Target Editor</h2>
+ <div class="description">See remote cursors and selections here.</div>
  <div class="editor" id="target-editor"></div>
  </div>
 </div>