Merge pull request #88 from lynhan318/refactor/codeBlock

.changeset/khaki-owls-worry.md

@@ -0,0 +1,5 @@
+---
+'@nextlint/svelte': minor
+---
+
+refactor: codeBlock

README.md

@@ -250,6 +250,7 @@ type PluginOptions = {
   image?: ImagePluginOptions;
   gpt?: AskOptions;
   dropCursor?: DropcursorOptions;
+  codeBlock?: NextlintCodeBlockOptions;
 };
 ```
 
@@ -319,6 +320,45 @@ Config dropCursor color/width/class.
 />
 ```
 
+### plugins.codeBlock
+
+Type: `NextlintCodeBlockOptions|undefined`
+
+Default:
+
+```ts
+{
+    themes: {
+        dark: 'github-dark',
+        light: 'github-light'
+    },
+    langs: []
+}
+```
+
+The `codeBlock` theme will sync with the `theme` props.
+
+
+https://github.com/lynhan318/nextlint/assets/32099104/d5d5c72d-787d-4b16-882f-2cba0dbfaa35
+
+
+```svelte
+  <SvelteEditor
+    //....
+    content={''}
+    onChange={editor.set}
+    theme="light"
+    plugins={{
+      codeBlock: {
+        langs: ['c', 'sh', 'javascript', 'html', 'typescript'],
+        themes: {
+          dark: 'vitesse-dark',
+          light: 'vitesse-light'
+        }
+      }
+    }}
+  />
+```
 ## Contributing
 
 Please follow the [contribute guideline](https://github.com/sveltor/nextlint/blob/main/CONTRIBUTING.md)

packages/svelte/package.json

@@ -34,9 +34,10 @@
     "svelte": "*"
   },
   "dependencies": {
+    "@nextlint/core": "^1.4.0",
     "@floating-ui/dom": "^1.5.3",
     "@melt-ui/svelte": "^0.61.1",
-    "@nextlint/core": "^1.4.0",
+    "@prosemirror-adapter/svelte": "^0.2.6",
     "@svelte-put/clickoutside": "^3.0.0",
     "@svelte-put/lockscroll": "^1.0.1",
     "@tiptap/core": "^2.1.13",
@@ -52,6 +53,7 @@
     "hast-util-to-html": "^9.0.0",
     "highlight.js": "^11.9.0",
     "lucide-svelte": "^0.292.0",
+    "prosemirror-highlight": "^0.5.0",
     "radash": "^11.0.0",
     "radix-icons-svelte": "^1.2.1",
     "shiki": "^1.2.0",

packages/svelte/src/lib/Editor.svelte

@@ -3,6 +3,7 @@
     image?: ImagePluginOptions;
     ask?: AskOptions;
     dropCursor?: DropcursorOptions;
+    codeBlock?: NextlintCodeBlockOptions;
   };
 </script>
 
@@ -11,7 +12,10 @@
   import type {Content, Editor, Extensions} from '@tiptap/core';
 
   import {LinkExtension} from '$lib/plugins/link';
-  import {NextlintCodeBlock} from '$lib/plugins/codeBlock';
+  import {
+    NextlintCodeBlock,
+    type NextlintCodeBlockOptions
+  } from '$lib/plugins/codeBlock';
   import {PluginAsk, type AskOptions} from '$lib/plugins/ask';
   import {FigureExtension} from '$lib/plugins/figure';
   import {
@@ -25,10 +29,12 @@
     Dropcursor,
     type DropcursorOptions
   } from '@tiptap/extension-dropcursor';
+  import {useProsemirrorAdapterProvider} from '@prosemirror-adapter/svelte';
 
   import BubbleMenu from './components/BubbleMenu/BubbleMenu.svelte';
   import {BubbleMenuExtension} from './plugins/bubbleMenu/bubbleMenu';
 
+  useProsemirrorAdapterProvider();
   export let content: Content;
   export let placeholder = "Press 'space' GPT support, type '/' for help";
   export let onChange: (editor: Editor) => void;
@@ -55,7 +61,15 @@
       FigureExtension,
       SelectImageExtension.configure(plugins.image),
       Dropcursor.configure(plugins.dropCursor),
-      NextlintCodeBlock.configure(),
+      NextlintCodeBlock.configure(
+        plugins.codeBlock || {
+          themes: {
+            dark: 'github-dark',
+            light: 'github-light'
+          },
+          langs: []
+        }
+      ),
       BubbleMenuExtension.configure({
         component: BubbleMenu
       }),

packages/svelte/src/lib/EditorTheme.scss

@@ -78,7 +78,7 @@
   @apply outline-none text-foreground;
 
   h1 {
-    @apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl;
+    @apply mt-10 scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl;
   }
 
   h2 {
@@ -114,22 +114,9 @@
     @apply list-decimal;
   }
 
-  code-block {
-    width: 100%;
-    min-height: 40px;
-    display: block;
-    margin-top: theme('margin.6');
-    height: 100%;
-    display: inline-flex;
-    position: relative;
-    font-family: 'Fira Code', monospace;
-    font-size: 14px;
-    border-radius: 4px;
-    border: 1px solid theme('colors.border');
-    box-sizing: border-box;
-  }
-
   .shiki {
+    display: inline-flex;
+    width: 100%;
     position: relative;
     z-index: 1;
     overflow-x: auto;
@@ -142,6 +129,8 @@
     padding: 16px;
     min-height: 52px;
     height: 100%;
+    border: 1px solid theme('colors.border');
+    margin-top: 1.5rem;
   }
 
   p > code {

packages/svelte/src/lib/EditorTheme.svelte

@@ -1,5 +1,16 @@
+<script lang="ts" context="module">
+  const themeStore: Writable<Theme> = writable('light');
+  export const useEditorTheme = () => themeStore;
+</script>
+
 <script lang="ts">
+  import type {Theme} from '$lib/node-view';
   import './EditorTheme.scss';
+  import {writable, type Writable} from 'svelte/store';
+  export let theme: Theme = 'light';
+  $: {
+    themeStore.set(theme);
+  }
 </script>
 
 <slot />

packages/svelte/src/lib/adapter/Counter.svelte

@@ -0,0 +1,26 @@
+<script context="module" lang="ts">
+</script>
+
+<script lang="ts">
+  import {useEditor} from '$lib/context';
+
+  import {useNodeViewContext} from '@prosemirror-adapter/svelte';
+  import {onMount} from 'svelte';
+  let selected = false;
+
+  const contentRef = useNodeViewContext('contentRef');
+  const selectedStore = useNodeViewContext('selected');
+  selectedStore.subscribe(value => {
+    selected = value;
+  });
+  const editor = useEditor();
+  onMount(() => {});
+</script>
+
+<div use:contentRef class:selected />
+
+<style>
+  .selected {
+    outline: blue solid 1px;
+  }
+</style>

packages/svelte/src/lib/helpers/index.ts

@@ -3,7 +3,6 @@ import {clsx} from 'clsx';
 import {renderHTML} from '@nextlint/core';
 import {twMerge} from 'tailwind-merge';
 
-import {getHighlighter} from '$lib/plugins/codeBlock';
 import type {Editor} from '$lib';
 
 export function cn(...inputs: ClassValue[]) {
@@ -13,21 +12,6 @@ export function cn(...inputs: ClassValue[]) {
 export const svelteEditorToHtml = async (editor: Editor) => {
   try {
     const html = await renderHTML(editor, async element => {
-      if (element.nodeName === 'PRE') {
-        const highlighter = await getHighlighter();
-        const lang = element._attributes['code-block-lang'] || 'javascript';
-        const code = highlighter.codeToHtml(
-          element.querySelector('code')?.textContent || '',
-          {
-            lang,
-            themes: {
-              dark: 'github-dark',
-              light: 'github-light'
-            }
-          }
-        );
-        return code;
-      }
       return element.render();
     });
     return html;