setop/awkp
1
0
Fork 0
Code Activity

mock up using flex grids and quill editor

Browse Source
This commit is contained in:
setop
2024-12-09 23:51:53 +01:00
commit 194add7a32
6 changed files with 435 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
index.html Normal file
View File

@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AWK Practice</title>
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet" />
<link href="css/default.min.css" rel="stylesheet">
<style>
.parent {
display: grid;
grid-template-columns: 3fr repeat(2, 1fr) 3fr;
grid-template-rows: 1fr 10fr 5fr;
grid-column-gap: 2px;
grid-row-gap: 2px;
height: 97vh;
}
.div1 { grid-area: 1 / 1 / 2 / 3; }
.div2 { grid-area: 1 / 3 / 2 / 5; }
.div3 { grid-area: 2 / 1 / 4 / 2; }
.div4 { grid-area: 2 / 2 / 4 / 4; }
.div5 { grid-area: 2 / 4 / 3 / 5; }
.div6 { grid-area: 3 / 4 / 4 / 5; }
.resizable-input {
width: 100%; height: 100%;
box-sizing: border-box;
}
select.ql-ui {
display: none;
}
</style>
</head>
<body>
<div class="parent">
<div class="div1">
<textarea class="resizable-input" placeholder="args"></textarea>
</div>
<div class="div2">
<textarea class="resizable-input" placeholder="gist"></textarea>
</div>
<div class="div3">
<textarea class="resizable-input" placeholder="stdin"></textarea>
</div>
<div class="div4">
<div id="script"></div>
</div>
<div class="div5">
<textarea class="resizable-input" placeholder="stdout"></textarea>
</div>
<div class="div6">
<textarea class="resizable-input" placeholder="stderr"></textarea>
</div>
</div>
<script src="js/highlight.min.js"></script>
<script src="js/languages/awk.min.js"></script>
<script src="js/quill.js"></script>
<script>
hljs.configure({
languages: ['awk'],
});
const quill = new Quill('#script', {
modules: {
syntax: true,
toolbar: false
},
theme: 'bubble'
});
quill.setContents([
{ insert: 'BEGIN {\n\n}\n\n{\n}\n\nEND {\n\n}\n', attributes: { 'code-block': 'awk' } },
]);
// automatically append closing curly brace when opening one
quill.keyboard.addBinding({ key: '{' }, {
collapsed: true, // cursor, not selection
}, function(range, context) {
this.quill.insertText(range.index, '{}');
this.quill.setSelection(range.index+1)
});
</script>
</body>
</html>