refactoring

examples/Components/Routes/CodeHighlighting/examples.js

@@ -1,4 +1,4 @@
-export const javascript = `function $initHighlight(block, flags) {
+export const JavaScriptExample = `function $initHighlight(block, flags) {
   try {
     if (block.className.search(/\bno\-highlight\b/) != -1)
       return processBlock(block, true, 0x0F) + ' class=""';
@@ -11,7 +11,7 @@ export const javascript = `function $initHighlight(block, flags) {
   }
 }`
 
-export const css = `@font-face {
+export const CSSExample = `@font-face {
   font-family: Chunkfive; src: url('Chunkfive.otf');
 }
 
@@ -28,12 +28,12 @@ body, .usertext {
 }`
 
 
-export const explicitImportExample = `import javascript from 'highlight.js/lib/languages/javascript'
+export const ExplicitImportExample = `import javascript from 'highlight.js/lib/languages/javascript'
 import { Editor } from 'tiptap'
 
 export default {
   components: {
-    Editor
+    Editor,
   },
   data() {
     return {
@@ -41,8 +41,8 @@ export default {
         new CodeBlockHighlightNode({
           languages: {
             javascript,
-            css
-          }
+            css,
+          },
         })
       ]
     }

examples/Components/Routes/CodeHighlighting/index.vue

@@ -9,14 +9,14 @@
 				<p>
 					These are code blocks with <strong>automatic syntax highlighting</strong> based on highlight.js.
 				</p>
-				<pre><code v-html="jsExample"></code></pre>
-				<pre><code v-html="cssExample"></code></pre>
+				<pre><code v-html="JavaScriptExample"></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>
+				<pre><code v-html="ExplicitImportExample"></code></pre>
 			</div>
 
 		</editor>
@@ -38,9 +38,9 @@ import {
 } from 'tiptap-extensions'
 
 import {
-	javascript as jsExample,
-	css as cssExample,
-	explicitImportExample
+	JavaScriptExample,
+	CSSExample,
+	ExplicitImportExample,
 } from './examples'
 
 export default {
@@ -53,8 +53,8 @@ export default {
 				new CodeBlockHighlightNode({
 					languages: {
 						javascript,
-						css
-					}
+						css,
+					},
 				}),
 				new HardBreakNode(),
 				new HeadingNode({ maxLevel: 3 }),
@@ -62,9 +62,9 @@ export default {
 				new CodeMark(),
 				new ItalicMark(),
 			],
-			jsExample,
-			cssExample,
-			explicitImportExample,
+			JavaScriptExample,
+			CSSExample,
+			ExplicitImportExample,
 		}
 	},
 }

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

@@ -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,23 +63,22 @@ 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')
-        }
-    }
+	constructor(options = {}) {
+		super(options)
+		try {
+			Object.entries(this.options.languages).forEach(([name, mapping]) => {
+				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 defaultOptions() {
+		return {
+			languages: {},
+		}
+	}
 
 	get name() {
 		return 'code_block'