1.0.3

Author: FormBucketSupport

example/src/routes/index.svelte

@@ -3,8 +3,50 @@
   import CodeMirror from "../../../src/CodeMirror.svelte";
 </script>
 
+<style>
+  .codemirror-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border: none;
+    line-height: 1.5;
+    overflow: hidden;
+  }
+
+  .codemirror-container :global(.CodeMirror) {
+    height: 100%;
+    background: transparent;
+    font: 400 14px/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 16px 0 8px;
+    border: none;
+  }
+
+  .codemirror-container :global(.error-loc) {
+    position: relative;
+    border-bottom: 2px solid #da106e;
+  }
+
+  .codemirror-container :global(.error-line) {
+    background-color: rgba(200, 0, 0, 0.05);
+  }
+</style>
+
 <svelte:head>
   <title>svelte-codemirror example</title>
 </svelte:head>
 
-<CodeMirror />
+<div class="codemirror-container">
+  <CodeMirror />
+</div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-codemirror",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "An svelte v3 component for embedding codemirrorjs",
   "main": "src/CodeMirror.svelte",
   "svelte": "src/CodeMirror.svelte",

src/CodeMirror.svelte

@@ -199,44 +199,6 @@
 </script>
 
 <style>
-  .codemirror-container {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    border: none;
-    line-height: 1.5;
-    overflow: hidden;
-  }
-
-  .codemirror-container :global(.CodeMirror) {
-    height: 100%;
-    background: transparent;
-    font: 400 14px/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 16px 0 8px;
-    border: none;
-  }
-
-  .codemirror-container :global(.error-loc) {
-    position: relative;
-    border-bottom: 2px solid #da106e;
-  }
-
-  .codemirror-container :global(.error-line) {
-    background-color: rgba(200, 0, 0, 0.05);
-  }
-
   textarea {
     visibility: hidden;
   }
@@ -259,25 +221,9 @@
     tab-size: 2;
     -moz-tab-size: 2;
   }
-
-  .flex pre {
-    padding: 0 0 0 4px;
-    height: auto;
-  }
 </style>
 
-<div
-  class="codemirror-container"
-  class:flex
-  bind:offsetWidth={w}
-  bind:offsetHeight={h}>
-  <textarea tabindex="0" bind:this={refs.editor} readonly value={code} />
-
-  {#if !CodeMirror}
-    <pre style="position: absolute; left: 0; top: 0">{code}</pre>
-
-    <!-- <div style="position: absolute; width: 100%; bottom: 0">
-      <Message kind="info">loading editor...</Message>
-    </div> -->
-  {/if}
-</div>
+<textarea tabindex="0" bind:this={refs.editor} readonly value={code} />
+{#if !CodeMirror}
+  <pre style="position: absolute; left: 0; top: 0">{code}</pre>
+{/if}