|
96 | 96 |
|
97 | 97 | const css = {
|
98 | 98 | code: "textarea.svelte-1jpkv2x{visibility:hidden}pre.svelte-1jpkv2x{position:absolute;width:100%;height:100%;top:0;left:0;border:none;padding:4px 4px 4px 60px;resize:none;font-family:var(--font-mono);font-size:13px;line-height:1.7;user-select:none;pointer-events:none;color:#ccc;tab-size:2;-moz-tab-size:2}",
|
99 |
| - map: "{\"version\":3,\"file\":\"CodeMirror.svelte\",\"sources\":[\"CodeMirror.svelte\"],\"sourcesContent\":[\"<script context=\\\"module\\\">\\n const is_browser = typeof window !== \\\"undefined\\\";\\n\\n let codemirror_promise;\\n let _CodeMirror;\\n\\n if (is_browser) {\\n codemirror_promise = import(\\\"codemirror\\\");\\n\\n codemirror_promise.then(mod => {\\n _CodeMirror = mod.default;\\n });\\n }\\n</script>\\n\\n<script>\\n import { onMount, createEventDispatcher } from \\\"svelte\\\";\\n\\n const dispatch = createEventDispatcher();\\n\\n export let value = \\\"\\\";\\n export let readonly = false;\\n export let errorLoc = null;\\n export let flex = false;\\n export let lineNumbers = true;\\n export let tab = true;\\n\\n let w;\\n let h;\\n let mode;\\n\\n // We have to expose set and update methods, rather\\n // than making this state-driven through props,\\n // because it's difficult to update an editor\\n // without resetting scroll otherwise\\n export async function set(new_code, new_mode) {\\n if (new_mode !== mode) {\\n await createEditor((mode = new_mode));\\n }\\n\\n code = new_code;\\n updating_externally = true;\\n if (editor) editor.setValue(code);\\n updating_externally = false;\\n }\\n\\n export function update(new_code) {\\n code = new_code;\\n\\n if (editor) {\\n const { left, top } = editor.getScrollInfo();\\n editor.setValue((code = new_code));\\n editor.scrollTo(left, top);\\n }\\n }\\n\\n export function resize() {\\n editor.refresh();\\n }\\n\\n export function focus() {\\n editor.focus();\\n }\\n\\n const modes = {\\n js: {\\n name: \\\"javascript\\\",\\n json: false\\n },\\n json: {\\n name: \\\"javascript\\\",\\n json: true\\n },\\n svelte: {\\n name: \\\"handlebars\\\",\\n base: \\\"text/html\\\"\\n }\\n };\\n\\n const refs = {};\\n let editor;\\n let updating_externally = false;\\n let marker;\\n let error_line;\\n let destroyed = false;\\n let CodeMirror;\\n\\n $: if (editor && w && h) {\\n editor.refresh();\\n }\\n\\n $: {\\n if (marker) marker.clear();\\n\\n if (errorLoc) {\\n const line = errorLoc.line - 1;\\n const ch = errorLoc.column;\\n\\n marker = editor.markText(\\n { line, ch },\\n { line, ch: ch + 1 },\\n {\\n className: \\\"error-loc\\\"\\n }\\n );\\n\\n error_line = line;\\n } else {\\n error_line = null;\\n }\\n }\\n\\n let previous_error_line;\\n $: if (editor) {\\n if (previous_error_line != null) {\\n editor.removeLineClass(previous_error_line, \\\"wrap\\\", \\\"error-line\\\");\\n }\\n\\n if (error_line && error_line !== previous_error_line) {\\n editor.addLineClass(error_line, \\\"wrap\\\", \\\"error-line\\\");\\n previous_error_line = error_line;\\n }\\n }\\n\\n onMount(() => {\\n if (_CodeMirror) {\\n CodeMirror = _CodeMirror;\\n createEditor(mode || \\\"svelte\\\").then(() => {\\n if (editor) editor.setValue(code || \\\"\\\");\\n });\\n } else {\\n codemirror_promise.then(async mod => {\\n CodeMirror = mod.default;\\n await createEditor(mode || \\\"svelte\\\");\\n if (editor) editor.setValue(code || \\\"\\\");\\n });\\n }\\n\\n return () => {\\n destroyed = true;\\n if (editor) editor.toTextArea();\\n };\\n });\\n\\n let first = true;\\n\\n async function createEditor(mode) {\\n if (destroyed || !CodeMirror) return;\\n\\n if (editor) editor.toTextArea();\\n\\n const opts = {\\n lineNumbers,\\n lineWrapping: true,\\n indentWithTabs: true,\\n indentUnit: 2,\\n tabSize: 2,\\n value: \\\"\\\",\\n mode: modes[mode] || {\\n name: mode\\n },\\n readOnly: readonly,\\n autoCloseBrackets: true,\\n autoCloseTags: true\\n };\\n\\n if (!tab)\\n opts.extraKeys = {\\n Tab: tab,\\n \\\"Shift-Tab\\\": tab\\n };\\n\\n // Creating a text editor is a lot of work, so we yield\\n // the main thread for a moment. This helps reduce jank\\n if (first) await sleep(50);\\n\\n if (destroyed) return;\\n\\n editor = CodeMirror.fromTextArea(refs.editor, opts);\\n\\n editor.on(\\\"change\\\", instance => {\\n if (!updating_externally) {\\n const value = instance.getValue();\\n dispatch(\\\"change\\\", { value });\\n }\\n });\\n\\n if (first) await sleep(50);\\n editor.refresh();\\n\\n first = false;\\n }\\n\\n function sleep(ms) {\\n return new Promise(fulfil => setTimeout(fulfil, ms));\\n }\\n</script>\\n\\n<style>\\n textarea {\\n visibility: hidden;\\n }\\n\\n pre {\\n position: absolute;\\n width: 100%;\\n height: 100%;\\n top: 0;\\n left: 0;\\n border: none;\\n padding: 4px 4px 4px 60px;\\n resize: none;\\n font-family: var(--font-mono);\\n font-size: 13px;\\n line-height: 1.7;\\n user-select: none;\\n pointer-events: none;\\n color: #ccc;\\n tab-size: 2;\\n -moz-tab-size: 2;\\n }\\n</style>\\n\\n<textarea tabindex=\\\"0\\\" bind:this={refs.editor} readonly {value} />\\n{#if !CodeMirror}\\n <pre>{value}</pre>\\n{/if}\\n\"],\"names\":[],\"mappings\":\"AAuME,QAAQ,eAAC,CAAC,AACR,UAAU,CAAE,MAAM,AACpB,CAAC,AAED,GAAG,eAAC,CAAC,AACH,QAAQ,CAAE,QAAQ,CAClB,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,IAAI,CACZ,GAAG,CAAE,CAAC,CACN,IAAI,CAAE,CAAC,CACP,MAAM,CAAE,IAAI,CACZ,OAAO,CAAE,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CACzB,MAAM,CAAE,IAAI,CACZ,WAAW,CAAE,IAAI,WAAW,CAAC,CAC7B,SAAS,CAAE,IAAI,CACf,WAAW,CAAE,GAAG,CAChB,WAAW,CAAE,IAAI,CACjB,cAAc,CAAE,IAAI,CACpB,KAAK,CAAE,IAAI,CACX,QAAQ,CAAE,CAAC,CACX,aAAa,CAAE,CAAC,AAClB,CAAC\"}" |
| 99 | + map: "{\"version\":3,\"file\":\"CodeMirror.svelte\",\"sources\":[\"CodeMirror.svelte\"],\"sourcesContent\":[\"<script context=\\\"module\\\">\\n const is_browser = typeof window !== \\\"undefined\\\";\\n\\n let codemirror_promise;\\n let _CodeMirror;\\n\\n if (is_browser) {\\n codemirror_promise = import(\\\"codemirror\\\");\\n\\n codemirror_promise.then(mod => {\\n _CodeMirror = mod.default;\\n });\\n }\\n</script>\\n\\n<script>\\n import { onMount, createEventDispatcher } from \\\"svelte\\\";\\n\\n const dispatch = createEventDispatcher();\\n\\n export let value = \\\"\\\";\\n export let readonly = false;\\n export let errorLoc = null;\\n export let flex = false;\\n export let lineNumbers = true;\\n export let tab = true;\\n\\n let w;\\n let h;\\n let mode;\\n\\n // We have to expose set and update methods, rather\\n // than making this state-driven through props,\\n // because it's difficult to update an editor\\n // without resetting scroll otherwise\\n export async function set(new_value, new_mode) {\\n if (new_mode !== mode) {\\n await createEditor((mode = new_mode));\\n }\\n\\n value = new_value;\\n updating_externally = true;\\n if (editor) editor.setValue(value);\\n updating_externally = false;\\n }\\n\\n export function update(new_value) {\\n value = new_value;\\n\\n if (editor) {\\n const { left, top } = editor.getScrollInfo();\\n editor.setValue((value = new_value));\\n editor.scrollTo(left, top);\\n }\\n }\\n\\n export function resize() {\\n editor.refresh();\\n }\\n\\n export function focus() {\\n editor.focus();\\n }\\n\\n const modes = {\\n js: {\\n name: \\\"javascript\\\",\\n json: false\\n },\\n json: {\\n name: \\\"javascript\\\",\\n json: true\\n },\\n svelte: {\\n name: \\\"handlebars\\\",\\n base: \\\"text/html\\\"\\n }\\n };\\n\\n const refs = {};\\n let editor;\\n let updating_externally = false;\\n let marker;\\n let error_line;\\n let destroyed = false;\\n let CodeMirror;\\n\\n $: if (editor && w && h) {\\n editor.refresh();\\n }\\n\\n $: {\\n if (marker) marker.clear();\\n\\n if (errorLoc) {\\n const line = errorLoc.line - 1;\\n const ch = errorLoc.column;\\n\\n marker = editor.markText(\\n { line, ch },\\n { line, ch: ch + 1 },\\n {\\n className: \\\"error-loc\\\"\\n }\\n );\\n\\n error_line = line;\\n } else {\\n error_line = null;\\n }\\n }\\n\\n let previous_error_line;\\n $: if (editor) {\\n if (previous_error_line != null) {\\n editor.removeLineClass(previous_error_line, \\\"wrap\\\", \\\"error-line\\\");\\n }\\n\\n if (error_line && error_line !== previous_error_line) {\\n editor.addLineClass(error_line, \\\"wrap\\\", \\\"error-line\\\");\\n previous_error_line = error_line;\\n }\\n }\\n\\n onMount(() => {\\n if (_CodeMirror) {\\n CodeMirror = _CodeMirror;\\n createEditor(mode || \\\"svelte\\\").then(() => {\\n if (editor) editor.setValue(value || \\\"\\\");\\n });\\n } else {\\n codemirror_promise.then(async mod => {\\n CodeMirror = mod.default;\\n await createEditor(mode || \\\"svelte\\\");\\n if (editor) editor.setValue(value || \\\"\\\");\\n });\\n }\\n\\n return () => {\\n destroyed = true;\\n if (editor) editor.toTextArea();\\n };\\n });\\n\\n let first = true;\\n\\n async function createEditor(mode) {\\n if (destroyed || !CodeMirror) return;\\n\\n if (editor) editor.toTextArea();\\n\\n const opts = {\\n lineNumbers,\\n lineWrapping: true,\\n indentWithTabs: true,\\n indentUnit: 2,\\n tabSize: 2,\\n value: \\\"\\\",\\n mode: modes[mode] || {\\n name: mode\\n },\\n readOnly: readonly,\\n autoCloseBrackets: true,\\n autoCloseTags: true\\n };\\n\\n if (!tab)\\n opts.extraKeys = {\\n Tab: tab,\\n \\\"Shift-Tab\\\": tab\\n };\\n\\n // Creating a text editor is a lot of work, so we yield\\n // the main thread for a moment. This helps reduce jank\\n if (first) await sleep(50);\\n\\n if (destroyed) return;\\n\\n editor = CodeMirror.fromTextArea(refs.editor, opts);\\n\\n editor.on(\\\"change\\\", instance => {\\n if (!updating_externally) {\\n const value = instance.getValue();\\n dispatch(\\\"change\\\", { value });\\n }\\n });\\n\\n if (first) await sleep(50);\\n editor.refresh();\\n\\n first = false;\\n }\\n\\n function sleep(ms) {\\n return new Promise(fulfil => setTimeout(fulfil, ms));\\n }\\n</script>\\n\\n<style>\\n textarea {\\n visibility: hidden;\\n }\\n\\n pre {\\n position: absolute;\\n width: 100%;\\n height: 100%;\\n top: 0;\\n left: 0;\\n border: none;\\n padding: 4px 4px 4px 60px;\\n resize: none;\\n font-family: var(--font-mono);\\n font-size: 13px;\\n line-height: 1.7;\\n user-select: none;\\n pointer-events: none;\\n color: #ccc;\\n tab-size: 2;\\n -moz-tab-size: 2;\\n }\\n</style>\\n\\n<textarea tabindex=\\\"0\\\" bind:this={refs.editor} readonly {value} />\\n{#if !CodeMirror}\\n <pre>{value}</pre>\\n{/if}\\n\"],\"names\":[],\"mappings\":\"AAuME,QAAQ,eAAC,CAAC,AACR,UAAU,CAAE,MAAM,AACpB,CAAC,AAED,GAAG,eAAC,CAAC,AACH,QAAQ,CAAE,QAAQ,CAClB,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,IAAI,CACZ,GAAG,CAAE,CAAC,CACN,IAAI,CAAE,CAAC,CACP,MAAM,CAAE,IAAI,CACZ,OAAO,CAAE,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CACzB,MAAM,CAAE,IAAI,CACZ,WAAW,CAAE,IAAI,WAAW,CAAC,CAC7B,SAAS,CAAE,IAAI,CACf,WAAW,CAAE,GAAG,CAChB,WAAW,CAAE,IAAI,CACjB,cAAc,CAAE,IAAI,CACpB,KAAK,CAAE,IAAI,CACX,QAAQ,CAAE,CAAC,CACX,aAAa,CAAE,CAAC,AAClB,CAAC\"}" |
100 | 100 | };
|
101 | 101 |
|
102 | 102 | const is_browser = typeof window !== "undefined";
|
|
129 | 129 | // than making this state-driven through props,
|
130 | 130 | // because it's difficult to update an editor
|
131 | 131 | // without resetting scroll otherwise
|
132 |
| - async function set(new_code, new_mode) { |
| 132 | + async function set(new_value, new_mode) { |
133 | 133 | if (new_mode !== mode) {
|
134 | 134 | await createEditor((mode = new_mode));
|
135 | 135 | }
|
136 | 136 |
|
137 |
| - code = new_code; |
| 137 | + value = new_value; |
138 | 138 | updating_externally = true;
|
139 |
| - if (editor) editor.setValue(code); |
| 139 | + if (editor) editor.setValue(value); |
140 | 140 | updating_externally = false;
|
141 | 141 | }
|
142 | 142 |
|
143 |
| - function update(new_code) { |
144 |
| - code = new_code; |
| 143 | + function update(new_value) { |
| 144 | + value = new_value; |
145 | 145 |
|
146 | 146 | if (editor) {
|
147 | 147 | const { left, top } = editor.getScrollInfo();
|
148 |
| - editor.setValue((code = new_code)); |
| 148 | + editor.setValue((value = new_value)); |
149 | 149 | editor.scrollTo(left, top);
|
150 | 150 | }
|
151 | 151 | }
|
|
187 | 187 | if (_CodeMirror) {
|
188 | 188 | CodeMirror = _CodeMirror;
|
189 | 189 | createEditor(mode || "svelte").then(() => {
|
190 |
| - if (editor) editor.setValue(code || ""); |
| 190 | + if (editor) editor.setValue(value || ""); |
191 | 191 | });
|
192 | 192 | } else {
|
193 | 193 | codemirror_promise.then(async mod => {
|
194 | 194 | CodeMirror = mod.default;
|
195 | 195 | await createEditor(mode || "svelte");
|
196 |
| - if (editor) editor.setValue(code || ""); |
| 196 | + if (editor) editor.setValue(value || ""); |
197 | 197 | });
|
198 | 198 | }
|
199 | 199 |
|
|
0 commit comments