Archives/convergencelabs_monaco-collab-ext
1
0
Fork 0
mirror of https://github.com/convergencelabs/monaco-collab-ext.git synced 2024-10-27 20:34:17 +00:00
Code Issues Projects Releases Wiki Activity

Attempting to have Monaco resize properly.

Browse Source
This commit is contained in:
Michael MacFadden 2019-03-03 22:55:51 -06:00
parent 985866071b
commit 39c149c006
3 changed files with 47 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
example/example.css
View File

@ -2,18 +2,52 @@
margin: 0; 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 { .editors {
position: relative;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex: 1; flex: 1;
max-width: 100%;
} }
.editor-column { .editor-column {
flex: 1; flex: 1;
display: flex;
flex-direction: column;
}
.editor-column:first-child {
margin-right: 20px;
} }
.editor { .editor {
height: 500px; height: 500px;
border: 1px solid grey; border: 1px solid grey;
margin-right: 20px; flex: 1;
} }

6
example/example.js
View File

@ -84,4 +84,10 @@ require(['vs/editor/editor.main', 'MonacoCollabExt'], function(m, MonacoCollabEx
target.updateOptions({readOnly: true}); target.updateOptions({readOnly: true});
} }
}); });
window.addEventListener('resize', () => {
source.layout();
target.layout();
});
}); });

6
example/index.html
View File

@ -9,12 +9,16 @@
<link rel="stylesheet" href="./example.css"> <link rel="stylesheet" href="./example.css">
</head> </head>
<body> <body>
<h1>Monaco Editor Collaborative Extensions Demo</h1>
<div class="editors"> <div class="editors">
<div class="editor-column"> <div class="editor-column">
<h2>Source Editor</h2>
<div class="description">Type and make selections here.</div>
<div class="editor" id="source-editor"></div> <div class="editor" id="source-editor"></div>
</div> </div>
<div class="editor-column"> <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 class="editor" id="target-editor"></div>
</div> </div>
</div> </div>