mirror of https://github.com/sveltejs/svelte
Richard Harris
7 years ago
parent
4b106d07d1
commit
4a142ea71e
@ -1,290 +0,0 @@
|
|||||||
<script context="module">
|
|
||||||
let codemirror_promise;
|
|
||||||
let _CodeMirror;
|
|
||||||
|
|
||||||
if (process.browser) {
|
|
||||||
codemirror_promise = import(/* webpackChunkName: "codemirror" */ './_codemirror.js');
|
|
||||||
|
|
||||||
codemirror_promise.then(mod => {
|
|
||||||
_CodeMirror = mod.default;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { onMount, beforeUpdate, createEventDispatcher } from 'svelte';
|
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
|
||||||
|
|
||||||
export let mode;
|
|
||||||
export let code;
|
|
||||||
export let readonly = false;
|
|
||||||
export let error = null;
|
|
||||||
export let errorLoc = null;
|
|
||||||
export let warningCount = 0;
|
|
||||||
export let flex = false;
|
|
||||||
export let lineNumbers = true;
|
|
||||||
export let tab = true;
|
|
||||||
|
|
||||||
let w;
|
|
||||||
let h;
|
|
||||||
|
|
||||||
export function resize() {
|
|
||||||
editor.refresh();
|
|
||||||
}
|
|
||||||
|
|
||||||
const modes = {
|
|
||||||
json: {
|
|
||||||
name: 'javascript',
|
|
||||||
json: true
|
|
||||||
},
|
|
||||||
handlebars: {
|
|
||||||
name: 'handlebars',
|
|
||||||
base: 'text/html'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const refs = {};
|
|
||||||
let editor;
|
|
||||||
let updating = false;
|
|
||||||
let marker;
|
|
||||||
let error_line;
|
|
||||||
let destroyed = false;
|
|
||||||
let CodeMirror;
|
|
||||||
|
|
||||||
$: if (CodeMirror) {
|
|
||||||
createEditor(mode);
|
|
||||||
}
|
|
||||||
|
|
||||||
$: if (editor && !updating && code != null) {
|
|
||||||
updating = true;
|
|
||||||
editor.setValue(code);
|
|
||||||
}
|
|
||||||
|
|
||||||
$: if (editor && w && h) {
|
|
||||||
editor.refresh();
|
|
||||||
}
|
|
||||||
|
|
||||||
$: {
|
|
||||||
if (marker) marker.clear();
|
|
||||||
|
|
||||||
if (errorLoc) {
|
|
||||||
const line = errorLoc.line - 1;
|
|
||||||
const ch = errorLoc.column;
|
|
||||||
|
|
||||||
marker = editor.markText({ line, ch }, { line, ch: ch + 1 }, {
|
|
||||||
className: 'error-loc'
|
|
||||||
});
|
|
||||||
|
|
||||||
error_line = line;
|
|
||||||
} else {
|
|
||||||
error_line = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let previous_error_line;
|
|
||||||
$: if (editor) {
|
|
||||||
if (previous_error_line != null) {
|
|
||||||
editor.removeLineClass(previous_error_line, 'wrap', 'error-line')
|
|
||||||
}
|
|
||||||
|
|
||||||
if (error_line && (error_line !== previous_error_line)) {
|
|
||||||
editor.addLineClass(error_line, 'wrap', 'error-line');
|
|
||||||
previous_error_line = error_line;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
if (_CodeMirror) {
|
|
||||||
CodeMirror = _CodeMirror;
|
|
||||||
} else {
|
|
||||||
codemirror_promise.then(mod => {
|
|
||||||
CodeMirror = mod.default;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
destroyed = true;
|
|
||||||
if (editor) editor.toTextArea();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
beforeUpdate(() => {
|
|
||||||
updating = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
function createEditor(mode) {
|
|
||||||
if (destroyed) return;
|
|
||||||
|
|
||||||
if (editor) {
|
|
||||||
editor.toTextArea();
|
|
||||||
}
|
|
||||||
|
|
||||||
const opts = {
|
|
||||||
lineNumbers,
|
|
||||||
lineWrapping: true,
|
|
||||||
indentWithTabs: true,
|
|
||||||
indentUnit: 2,
|
|
||||||
tabSize: 2,
|
|
||||||
value: code,
|
|
||||||
mode: modes[mode] || {
|
|
||||||
name: mode
|
|
||||||
},
|
|
||||||
readOnly: readonly
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!tab) opts.extraKeys = {
|
|
||||||
Tab: tab,
|
|
||||||
'Shift-Tab': tab
|
|
||||||
};
|
|
||||||
|
|
||||||
editor = CodeMirror.fromTextArea(refs.editor, opts);
|
|
||||||
|
|
||||||
editor.on('change', instance => {
|
|
||||||
if (!updating) {
|
|
||||||
updating = true;
|
|
||||||
code = instance.getValue();
|
|
||||||
dispatch('change', { value: code });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
editor.refresh();
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.codemirror-container {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border: none;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.codemirror-container :global(.CodeMirror) {
|
|
||||||
height: 100%;
|
|
||||||
/* background: var(--background); */
|
|
||||||
background: transparent;
|
|
||||||
font: 400 var(--code-fs)/1.7 var(--font-mono);
|
|
||||||
color: var(--base);
|
|
||||||
}
|
|
||||||
|
|
||||||
.codemirror-container.flex :global(.CodeMirror) {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.codemirror-container.flex :global(.CodeMirror-lines) {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.codemirror-container :global(.CodeMirror-gutters) {
|
|
||||||
padding: 0 1.6rem 0 .8rem;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.codemirror-container .message {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 2.4rem;
|
|
||||||
left: 2.4rem;
|
|
||||||
z-index: 20;
|
|
||||||
}
|
|
||||||
|
|
||||||
.codemirror-container :global(.error-loc) {
|
|
||||||
position: relative;
|
|
||||||
border-bottom: 2px solid #da106e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.codemirror-container :global(.error-line) {
|
|
||||||
background-color: rgba(200, 0, 0, .05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading,
|
|
||||||
.error {
|
|
||||||
text-align: center;
|
|
||||||
color: #999;
|
|
||||||
font-weight: 400;
|
|
||||||
margin: 2.4rem 0 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading {
|
|
||||||
background-color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
border: none;
|
|
||||||
padding: 4px 4px 4px 57px;
|
|
||||||
resize: none;
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: 1.3rem;
|
|
||||||
line-height: 1.7;
|
|
||||||
user-select: none;
|
|
||||||
pointer-events: none;
|
|
||||||
color: #ccc;
|
|
||||||
tab-size: 2;
|
|
||||||
-moz-tab-size: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex pre {
|
|
||||||
padding: 0 0 0 4px;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex .loading {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<!--
|
|
||||||
-----------------------------------------------
|
|
||||||
syntax-highlighting [prism]
|
|
||||||
NOTE
|
|
||||||
- just started to transfer colors from prism to codemirror
|
|
||||||
-----------------------------------------------
|
|
||||||
-->
|
|
||||||
<div class='codemirror-container' class:flex bind:offsetWidth={w} bind:offsetHeight={h}>
|
|
||||||
<textarea
|
|
||||||
tabindex='2'
|
|
||||||
bind:this={refs.editor}
|
|
||||||
readonly
|
|
||||||
value={code}
|
|
||||||
></textarea>
|
|
||||||
|
|
||||||
{#if error}
|
|
||||||
<p class='error message'>
|
|
||||||
{#if error.loc}
|
|
||||||
<strong>
|
|
||||||
{#if error.filename}
|
|
||||||
<span
|
|
||||||
class='filename'
|
|
||||||
on:click="{() => dispatch('navigate', { filename: error.filename })}"
|
|
||||||
>{error.filename}</span>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
({error.loc.line}:{error.loc.column})
|
|
||||||
</strong>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{error.message}
|
|
||||||
</p>
|
|
||||||
{:else if warningCount > 0}
|
|
||||||
<p class='warning message'>
|
|
||||||
Compiled, but with {warningCount} {warningCount === 1 ? 'warning' : 'warnings'} — check the console for details
|
|
||||||
</p>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if !CodeMirror}
|
|
||||||
<pre style="position: absolute; left: 0; top: 0"
|
|
||||||
>{code}</pre>
|
|
||||||
|
|
||||||
<p class='loading message'>loading editor...</p>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
Loading…
Reference in new issue