remove languages option from codeblocklowlight

docs/src/demos/Examples/CodeBlockLanguage/CodeBlockComponent.vue

@@ -1,12 +1,15 @@
 <template>
   <node-view-wrapper class="code-block">
-    <select contenteditable="false" class="code-block-select" v-model="selectedLanguage">
+    <select contenteditable="false" v-model="selectedLanguage">
-      <option v-for="(language, index) in languages" :value="language" :key="index">
-        {{ language }}
-      </option>
       <option :value="null">
         auto
       </option>
+      <option disabled>
+        —
+      </option>
+      <option v-for="(language, index) in languages" :value="language" :key="index">
+        {{ language }}
+      </option>
     </select>
     <pre><node-view-content as="code" /></pre>
   </node-view-wrapper>
@@ -14,6 +17,7 @@
 
 <script>
 import { NodeViewWrapper, NodeViewContent, nodeViewProps } from '@tiptap/vue-2'
+import lowlight from 'lowlight/lib/core'
 
 export default {
   components: {
@@ -23,6 +27,12 @@ export default {
 
   props: nodeViewProps,
 
+  data() {
+    return {
+      languages: lowlight.listLanguages(),
+    }
+  },
+
   computed: {
     selectedLanguage: {
       get() {
@@ -30,26 +40,20 @@ export default {
       },
       set(language) {
         this.updateAttributes({ language })
-      }
-    }
       },
-
+    },
-  data() {
-    return {
-      languages: ['js', 'css'],
-    }
   },
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
 .code-block {
   position: relative;
-}
 
-.code-block-select {
+  select {
     position: absolute;
     top: 0.5rem;
     right: 0.5rem;
+  }
 }
 </style>

docs/src/demos/Examples/CodeBlockLanguage/index.vue

@@ -14,11 +14,10 @@ import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
+import CodeBlockComponent from './CodeBlockComponent'
 
-import javascript from 'highlight.js/lib/languages/javascript'
+// install all highlight.js languages
-import css from 'highlight.js/lib/languages/css'
+import 'lowlight'
-
-import CodeBlock from './CodeBlock'
 
 export default {
   components: {
@@ -37,16 +36,9 @@ export default {
         Document,
         Paragraph,
         Text,
-        CodeBlockLowlight
+        CodeBlockLowlight.extend({
-          .extend({
           addNodeView() {
-              return VueNodeViewRenderer(CodeBlock)
+            return VueNodeViewRenderer(CodeBlockComponent)
-            },
-          })
-          .configure({
-            languages: {
-              javascript,
-              css,
           },
         }),
       ],

docs/src/demos/Nodes/CodeBlockLowlight/index.vue

@@ -15,8 +15,8 @@ import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
 
-import javascript from 'highlight.js/lib/languages/javascript'
+// install all highlight.js languages
-import css from 'highlight.js/lib/languages/css'
+import 'lowlight'
 
 export default {
   components: {
@@ -35,12 +35,7 @@ export default {
         Document,
         Paragraph,
         Text,
-        CodeBlockLowlight.configure({
+        CodeBlockLowlight,
-          languages: {
-            javascript,
-            css,
-          },
-        }),
       ],
       content: `
         <p>

packages/extension-code-block-lowlight/src/code-block-lowlight.ts

@@ -1,27 +1,7 @@
-import CodeBlock, { CodeBlockOptions } from '@tiptap/extension-code-block'
+import CodeBlock from '@tiptap/extension-code-block'
-import lowlight from 'lowlight/lib/core'
 import { LowlightPlugin } from './lowlight-plugin'
 
-export interface CodeBlockLowlightOptions extends CodeBlockOptions {
+export const CodeBlockLowlight = CodeBlock.extend({
-  languages: {
-    [key: string]: Function,
-  },
-}
-
-export const CodeBlockLowlight = CodeBlock.extend<CodeBlockLowlightOptions>({
-  defaultOptions: {
-    ...CodeBlock.config.defaultOptions,
-    languages: {},
-  },
-
-  onBeforeCreate() {
-    Object
-      .entries(this.options.languages)
-      .forEach(([name, mapping]) => {
-        lowlight.registerLanguage(name, mapping)
-      })
-  },
-
   addProseMirrorPlugins() {
     return [
       LowlightPlugin({ name: 'codeBlock' }),