fix: polished Codeblock style

packages/svelte/src/lib/Editor.svelte

@@ -47,6 +47,7 @@
         emptyNodeClass: 'is-block-empty'
       }
     },
+    //@ts-ignore
     extensions: [
       LinkExtension,
       HighlightExtension,

packages/svelte/src/lib/EditorTheme.scss

@@ -206,3 +206,17 @@
     text-decoration: var(--shiki-dark-text-decoration) !important;
   }
 }
+
+.clean-scroll::-webkit-scrollbar-thumb:hover {
+  background-color: theme('colors.slate.300');
+}
+.clean-scroll::-webkit-scrollbar {
+  width: 8px;
+}
+.clean-scroll::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+.clean-scroll::-webkit-scrollbar-thumb {
+  background-color: theme('colors.slate.200');
+  border-radius: 8px;
+}

packages/svelte/src/lib/plugins/bubbleMenu/bubbleMenu.ts

@@ -50,7 +50,10 @@ class BubbleMenuView {
     this.floatingRenderer = new FloatingRenderer({
       editor: editor,
       component: component,
-      portal: view.dom.parentElement!
+      portal: view.dom.parentElement!,
+      style: {
+        zIndex: '99'
+      }
     });
 
     this.floatingRenderer.element.addEventListener(

packages/svelte/src/lib/plugins/codeBlock/CodeBlock.svelte

@@ -4,7 +4,7 @@
 
   import Languages from './Languages.svelte';
 
-  import {type NextlintCodeBlockAttrs} from './codeBlock';
+  import type {NextlintCodeBlockAttrs} from './codeBlock';
   import {getHighlighter} from '.';
 
   const contentRef = useContentRef();

packages/svelte/src/lib/plugins/codeBlock/Languages.svelte

@@ -6,6 +6,7 @@
   import {derived} from 'svelte/store';
 
   import {NextlintCodeBlock} from './codeBlock';
+  import {cn} from '$lib/helpers';
 
   const props = useNodeViewProps();
 
@@ -43,8 +44,13 @@
   <div class="relative">
     <input
       use:melt={$input}
-      class="flex h-10 items-center justify-between rounded-lg bg-background
-      px-4 pr-6 text-primary border border-border outline-none text-sm"
+      class={cn(
+        `flex h-8 items-center justify-between rounded-sm px-4 pr-6 outline-none text-sm
+          text-foreground capitalize bg-[unset] border border-transparent focus:border-border`,
+        {
+          'border-border': $inputValue
+        }
+      )}
       placeholder="Programing Language"
     />
     <div class="absolute right-2 top-1/2 z-10 -translate-y-1/2 text-border">
@@ -58,13 +64,13 @@
 </div>
 {#if $open}
   <ul
-    class=" z-10 flex max-h-[300px] flex-col overflow-hidden rounded-lg shadow-md"
+    class=" z-10 flex max-h-[300px] flex-col overflow-hiddenshadow-md shadown-md p-1"
     use:melt={$menu}
     transition:fly={{duration: 150, y: -5}}
   >
     <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
     <div
-      class="flex max-h-full flex-col gap-0 overflow-y-auto bg-white px-2 py-2 text-black"
+      class="flex max-h-full flex-col gap-1 overflow-y-auto clean-scroll bg-background border border-accent px-2 py-2 text-foreground rounded-lg p-1"
       tabindex="0"
     >
       {#each filteredLanguages as lang, index (index)}
@@ -74,17 +80,17 @@
             label: lang
           })}
           class="flex flex-row items-center justify-between cursor-pointer
-          rounded-md py-2 pl-4 pr-4 data-[highlighted]:bg-accent
+          rounded-md py-1 pl-4 pr-4 data-[highlighted]:bg-accent
           data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50"
         >
-          <span class="font-medium">{lang}</span>
+          <span class="font-medium capitalize">{lang}</span>
           {#if $isSelected(lang)}
             <Check size={16} />
           {/if}
         </li>
       {:else}
         <li
-          class="relative cursor-pointer rounded-md py-1 pl-8 pr-4
+          class="relative cursor-pointer rounded-md py-[2px] pl-8 pr-4
         data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground"
         >
           No results found

packages/svelte/src/routes/$components/Devtool.svelte

@@ -40,9 +40,4 @@
       >{theme}</span
     >
   </label>
-  <div class="ml-4">
-    <a href="/draft">Draft</a>
-    <button on:click={onSave}>save</button>
-    <button on:click={load}>load</button>
-  </div>
 </div>

packages/svelte/src/routes/+page.svelte

@@ -3,10 +3,10 @@
 
   import SvelteEditor from '$lib/Editor.svelte';
 
-  import {getContext} from 'svelte';
+  import {getContext, onDestroy, onMount} from 'svelte';
   import type {Writable} from 'svelte/store';
   import {svelteEditorToHtml} from '$lib/helpers';
-  import test from './test.json';
+  import {debounce} from 'radash';
 
   const editor: Writable<Editor> = getContext('editor');
 
@@ -25,15 +25,30 @@ This is NOT a component library. It's a collection of re-usable components that
     const previewUrl = URL.createObjectURL(blob);
     return previewUrl;
   };
-</script>
+  const saveDraft = debounce({delay: 500}, (editor: Editor) => {
+    const jsContent = editor.getJSON();
+    localStorage.setItem('draft', JSON.stringify(jsContent));
+  });
+  const dispose = editor.subscribe(updated => {
+    if (updated) {
+      saveDraft(updated);
+    }
+  });
 
-<button on:click={() => toHtml()}>To HTML</button>
+  onDestroy(dispose);
+</script>
 
-<div>
+<div class="mt-10">
   <SvelteEditor
-    content={test}
+    content={''}
     placeholder="Press 'space' GPT support, type '/' for help"
-    onCreated={editor.set}
+    onCreated={createdEditor => {
+      editor.set(createdEditor);
+      const jsonLoaded = localStorage.getItem('draft') || '';
+      if (jsonLoaded) {
+        createdEditor.commands.setContent(JSON.parse(jsonLoaded), false);
+      }
+    }}
     onChange={editor.set}
     plugins={{
       image: {