fix: #66 import color picker dynamically since it cannot render serve…

…r side
josdejong · Apr 15, 2022 · b6041bb · b6041bb
1 parent f1410dd
commit b6041bb
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 8 deletions.
diff --git a/src/hooks.js b/src/hooks.js
diff --git a/src/lib/components/controls/ColorPickerPopup.svelte b/src/lib/components/controls/ColorPickerPopup.svelte
@@ -1,6 +1,5 @@
 <script>
-  import { onDestroy, onMount, tick } from 'svelte'
-  import VanillaPicker from 'vanilla-picker'
+  import { onDestroy, onMount } from 'svelte'
 
   export let color
   export let onChange
@@ -10,7 +9,9 @@
   let colorPicker
 
   onMount(async () => {
-    await tick() // must render the DOM first
+    // Dynamically import VanillaPicker, because it requires `document` to be defined,
+    // and that is not supported server side
+    const VanillaPicker = import('vanilla-picker')
 
     colorPicker = new VanillaPicker({
       parent: ref,

diff --git a/src/lib/components/modes/codemode/CodeMode.scss b/src/lib/components/modes/codemode/CodeMode.scss
@@ -10,6 +10,7 @@
   .contents {
     flex: 1;
     display: flex;
+    flex-direction: column;
     overflow: hidden;
     min-width: 0;
     min-height: 0;