Merge pull request #62 from erickwilder/use-explicit-syntax-highlith-…

…mappings

refactor(tiptap-extensions): Do not import the full `lowlight` library.

examples/Components/Routes/CodeHighlighting/examples.js

@@ -26,3 +26,25 @@ body, .usertext {
     content: attr(href)
   }
 }`
+
+
+export const explicitImportExample = `import javascript from 'highlight.js/lib/languages/javascript'
+import { Editor } from 'tiptap'
+
+export default {
+  components: {
+    Editor
+  },
+  data() {
+    return {
+      extensions: [
+        new CodeBlockHighlightNode({
+          languages: {
+            javascript,
+            css
+          }
+        })
+      ]
+    }
+  }
+}`;

examples/Components/Routes/CodeHighlighting/index.vue

@@ -9,15 +9,24 @@
 				<p>
 					These are code blocks with <strong>automatic syntax highlighting</strong> based on highlight.js.
 				</p>
-				<pre><code v-html="javascript"></code></pre>
-				<pre><code v-html="css"></code></pre>
+				<pre><code v-html="jsExample"></code></pre>
+				<pre><code v-html="cssExample"></code></pre>
+
+				<p>
+					Note: tiptap doesn't import syntax highlighting language definitions from highlight.js. You
+					<strong>must</strong> import them and initialize the extension with all languages you want to support:
+				</p>
+				<pre><code v-html="explicitImportExample"></code></pre>
 			</div>
 
 		</editor>
 	</div>
 </template>
 
 <script>
+import javascript from 'highlight.js/lib/languages/javascript'
+import css from 'highlight.js/lib/languages/css'
+
 import { Editor } from 'tiptap'
 import {
 	CodeBlockHighlightNode,
@@ -29,8 +38,9 @@ import {
 } from 'tiptap-extensions'
 
 import {
-	javascript,
-	css,
+	javascript as jsExample,
+	css as cssExample,
+	explicitImportExample
 } from './examples'
 
 export default {
@@ -40,15 +50,21 @@ export default {
 	data() {
 		return {
 			extensions: [
-				new CodeBlockHighlightNode(),
+				new CodeBlockHighlightNode({
+					languages: {
+						javascript,
+						css
+					}
+				}),
 				new HardBreakNode(),
 				new HeadingNode({ maxLevel: 3 }),
 				new BoldMark(),
 				new CodeMark(),
 				new ItalicMark(),
 			],
-			javascript,
-			css,
+			jsExample,
+			cssExample,
+			explicitImportExample,
 		}
 	},
 }

packages/tiptap-extensions/src/nodes/CodeBlockHighlight.js

@@ -2,7 +2,7 @@ import { Node, Plugin } from 'tiptap'
 import { Decoration, DecorationSet } from 'prosemirror-view'
 import { toggleBlockType, setBlockType, textblockTypeInputRule } from 'tiptap-commands'
 import { findBlockNodes } from 'prosemirror-utils'
-import low from 'lowlight'
+import low from 'lowlight/lib/core'
 
 function getDecorations(doc) {
 	const decorations = []
@@ -12,7 +12,7 @@ function getDecorations(doc) {
 
 	const flatten = list => list.reduce(
 		(a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), [],
-	)
+    )
 
 	function parseNodes(nodes, className = []) {
 		return nodes.map(node => {
@@ -63,6 +63,24 @@ function getDecorations(doc) {
 
 export default class CodeBlockHighlightNode extends Node {
 
+    constructor(options = {}) {
+        super(options)
+        try {
+            Object.entries(this.options.languages).forEach(entry => {
+                const [name, mapping] = entry
+                low.registerLanguage(name, mapping)
+            })
+        } catch (err) {
+            throw new Error('Invalid syntax highlight definitions: define at least one highlight.js language mapping')
+        }
+    }
+
+    get defaultOptions() {
+        return {
+            languages: {},
+        }
+    }
+
 	get name() {
 		return 'code_block'
 	}