From bd392ee8c20945c4bb58f88042a6cde7587d2234 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Thu, 8 Apr 2021 22:13:50 +0200
Subject: [PATCH] remove languages option from codeblocklowlight

---
 .../{CodeBlock.vue => CodeBlockComponent.vue} | 40 ++++++++++---------
 .../Examples/CodeBlockLanguage/index.vue      | 24 ++++-------
 .../demos/Nodes/CodeBlockLowlight/index.vue   | 11 ++---
 .../src/code-block-lowlight.ts                | 24 +----------
 4 files changed, 35 insertions(+), 64 deletions(-)
 rename docs/src/demos/Examples/CodeBlockLanguage/{CodeBlock.vue => CodeBlockComponent.vue} (71%)

diff --git a/docs/src/demos/Examples/CodeBlockLanguage/CodeBlock.vue b/docs/src/demos/Examples/CodeBlockLanguage/CodeBlockComponent.vue
similarity index 71%
rename from docs/src/demos/Examples/CodeBlockLanguage/CodeBlock.vue
rename to docs/src/demos/Examples/CodeBlockLanguage/CodeBlockComponent.vue
index 70425392..f5095930 100644
--- a/docs/src/demos/Examples/CodeBlockLanguage/CodeBlock.vue
+++ b/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">
-      <option v-for="(language, index) in languages" :value="language" :key="index">
-        {{ language }}
-      </option>
+    <select contenteditable="false" v-model="selectedLanguage">
       <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 {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
+  select {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+  }
 }
 </style>
diff --git a/docs/src/demos/Examples/CodeBlockLanguage/index.vue b/docs/src/demos/Examples/CodeBlockLanguage/index.vue
index a5a5bd03..89f27c01 100644
--- a/docs/src/demos/Examples/CodeBlockLanguage/index.vue
+++ b/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'
-import css from 'highlight.js/lib/languages/css'
-
-import CodeBlock from './CodeBlock'
+// install all highlight.js languages
+import 'lowlight'
 
 export default {
   components: {
@@ -37,18 +36,11 @@ export default {
         Document,
         Paragraph,
         Text,
-        CodeBlockLowlight
-          .extend({
-            addNodeView() {
-              return VueNodeViewRenderer(CodeBlock)
-            },
-          })
-          .configure({
-            languages: {
-              javascript,
-              css,
-            },
-          }),
+        CodeBlockLowlight.extend({
+          addNodeView() {
+            return VueNodeViewRenderer(CodeBlockComponent)
+          },
+        }),
       ],
       content: `
         <p>
diff --git a/docs/src/demos/Nodes/CodeBlockLowlight/index.vue b/docs/src/demos/Nodes/CodeBlockLowlight/index.vue
index a211987a..2b85646f 100644
--- a/docs/src/demos/Nodes/CodeBlockLowlight/index.vue
+++ b/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'
-import css from 'highlight.js/lib/languages/css'
+// install all highlight.js languages
+import 'lowlight'
 
 export default {
   components: {
@@ -35,12 +35,7 @@ export default {
         Document,
         Paragraph,
         Text,
-        CodeBlockLowlight.configure({
-          languages: {
-            javascript,
-            css,
-          },
-        }),
+        CodeBlockLowlight,
       ],
       content: `
         <p>
diff --git a/packages/extension-code-block-lowlight/src/code-block-lowlight.ts b/packages/extension-code-block-lowlight/src/code-block-lowlight.ts
index 5c6490bc..77f82919 100644
--- a/packages/extension-code-block-lowlight/src/code-block-lowlight.ts
+++ b/packages/extension-code-block-lowlight/src/code-block-lowlight.ts
@@ -1,27 +1,7 @@
-import CodeBlock, { CodeBlockOptions } from '@tiptap/extension-code-block'
-import lowlight from 'lowlight/lib/core'
+import CodeBlock from '@tiptap/extension-code-block'
 import { LowlightPlugin } from './lowlight-plugin'
 
-export interface CodeBlockLowlightOptions extends CodeBlockOptions {
-  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)
-      })
-  },
-
+export const CodeBlockLowlight = CodeBlock.extend({
   addProseMirrorPlugins() {
     return [
       LowlightPlugin({ name: 'codeBlock' }),