Support highlight.js 10 and 11

slab · Feb 1, 2024 · 366b2a8 · 366b2a8
1 parent ee21e41
commit 366b2a8
Show file tree

Hide file tree

Showing 10 changed files with 84 additions and 44 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # [Unreleased]
 
 - **Clipboard** Convert newlines between inline elements to a space.
+- **Syntax** Support highlight.js v10 and v11.
 
 # 2.0.0-beta.2
 

diff --git a/packages/quill/src/modules/syntax.ts b/packages/quill/src/modules/syntax.ts
@@ -188,8 +188,19 @@ SyntaxCodeBlock.allowedChildren = [CodeToken, CursorBlot, TextBlot, BreakBlot];
 interface SyntaxOptions {
   interval: number;
   languages: { key: string; label: string }[];
+  hljs: any;
 }
 
+const highlight = (lib: any, language: string, text: string) => {
+  if (typeof lib.versionString === 'string') {
+    const majorVersion = lib.versionString.split('.')[0];
+    if (parseInt(majorVersion, 10) >= 11) {
+      return lib.highlight(text, { language }).value;
+    }
+  }
+  return lib.highlight(language, text).value;
+};
+
 class Syntax extends Module<SyntaxOptions> {
   static DEFAULTS: SyntaxOptions & { hljs: any };
 
@@ -204,7 +215,6 @@ class Syntax extends Module<SyntaxOptions> {
 
   constructor(quill: Quill, options: Partial<SyntaxOptions>) {
     super(quill, options);
-    // @ts-expect-error
     if (this.options.hljs == null) {
       throw new Error(
         'Syntax module requires highlight.js. Please include the library on the page before Quill.',
@@ -292,8 +302,7 @@ class Syntax extends Module<SyntaxOptions> {
     }
     const container = this.quill.root.ownerDocument.createElement('div');
     container.classList.add(CodeBlock.className);
-    // @ts-expect-error
-    container.innerHTML = this.options.hljs.highlight(language, text).value;
+    container.innerHTML = highlight(this.options.hljs, language, text);
     return traverse(
       this.quill.scroll,
       container,

diff --git a/packages/website/content/docs/formats.mdx b/packages/website/content/docs/formats.mdx
@@ -16,7 +16,7 @@ By default, all formats are enabled and allowed in a Quill editor. They can be c
 <script src="{{site.cdn}}/quill.js"></script>
 <link
   rel="stylesheet"
-  href="{{site.highlightjs}}/styles/monokai-sublime.min.css"
+  href="{{site.highlightjs}}/styles/atom-one-dark.min.css"
 />
 <script src="{{site.katex}}/katex.min.js"></script>
 <link rel="stylesheet" href="{{site.katex}}/katex.min.css" />

diff --git a/packages/website/content/docs/modules/syntax.mdx b/packages/website/content/docs/modules/syntax.mdx
@@ -4,29 +4,57 @@ title: Syntax Highlighter Module
 
 The Syntax Module enhances the Code Block format by automatically detecting and applying syntax highlighting. The excellent [highlight.js](https://highlightjs.org/) library is used as a dependency to parse and tokenize code blocks.
 
-In general, you may [configure](https://highlightjs.readthedocs.io/en/latest/api.html#configure-options) highlight.js as needed. However, Quill expects and requires the `useBR` option to be `false`.
+In general, you may [configure](https://highlightjs.readthedocs.io/en/latest/api.html#configure-options) highlight.js as needed. However, Quill expects and requires the `useBR` option to be `false` if you are using highlight.js &lt; v11.
 
+Quill supports highlight.js v9.12.0 and later.
 
-### Example
+### Usage
 
-```html
+<Sandpack
+  defaultShowPreview
+  files={{
+  "/index.html":  `
 <!-- Include your favorite highlight.js stylesheet -->
-<link href="highlight.js/monokai-sublime.min.css" rel="stylesheet">
+<link href="{{site.highlightjs}}/styles/atom-one-dark.min.css" rel="stylesheet">
 
 <!-- Include the highlight.js library -->
-<script href="highlight.js"></script>
+<script src="{{site.highlightjs}}/highlight.min.js"></script>
 
-<script>
-hljs.configure({   // optionally configure hljs
-  languages: ['javascript', 'ruby', 'python']
-});
+<link href="{{site.cdn}}/quill.snow.css" rel="stylesheet" />
+<script src="{{site.cdn}}/quill.js"></script>
+
+<div id="editor"></div>
 
+<script>
 const quill = new Quill('#editor', {
   modules: {
     syntax: true,              // Include syntax module
     toolbar: [['code-block']]  // Include button in toolbar
   },
   theme: 'snow'
 });
+
+const Delta = Quill.import('delta');
+quill.setContents(
+  new Delta()
+    .insert('const language = "JavaScript";')
+    .insert('\\n', { 'code-block': 'javascript' })
+    .insert('console.log("I love " + language + "!");')
+    .insert('\\n', { 'code-block': 'javascript' })
+);
 </script>
-```
+`}}
+/>
+
+If you install highlight.js as an npm package and don't want to expose it to `window`, you need to pass it to syntax module as an option:
+
+```js
+import Quill from 'quill';
+import hljs from 'highlight.js';
+
+const quill = new Quill('#editor', {
+  modules: {
+    syntax: { hljs },
+  },
+});
+```
diff --git a/packages/website/env.js b/packages/website/env.js
@@ -8,7 +8,7 @@ module.exports = {
   version,
   cdn,
   github: 'https://github.com/quilljs/quill/tree/develop/packages/website/',
-  highlightjs: 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0',
+  highlightjs: 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.12.0',
   katex: 'https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1',
   url: homepage,
   title: 'Quill - Your powerful rich text editor',

diff --git a/packages/website/src/pages/_document.jsx b/packages/website/src/pages/_document.jsx
@@ -32,7 +32,7 @@ export default function Document() {
         />
         <link
           rel="stylesheet"
-          href={`${process.env.highlightjs}/styles/monokai-sublime.min.css`}
+          href={`${process.env.highlightjs}/styles/atom-one-dark.min.css`}
         />
         <link
           rel="stylesheet"

diff --git a/packages/website/src/pages/standalone/bubble.mdx b/packages/website/src/pages/standalone/bubble.mdx
@@ -4,15 +4,15 @@ import { StandaloneSandpack } from '../../components/Sandpack';
 
 <StandaloneSandpack
   preferPreview
-  externalResources={[
-    "{{site.highlightjs}}/highlight.min.js",
-    "{{site.highlightjs}}/styles/monokai-sublime.min.css",
-    "{{site.katex}}/katex.min.css",
-    "{{site.cdn}}/quill.bubble.css",
-    "{{site.cdn}}/quill.js"
-  ]}
+  activeFile="index.js"
   files={{
     'index.html': `
+<script src="{{site.highlightjs}}/highlight.min.js"></script>
+<link rel="stylesheet" href="{{site.highlightjs}}/styles/atom-one-dark.min.css" />
+<script src="{{site.katex}}/katex.min.js"></script>
+<link rel="stylesheet" href="{{site.katex}}/katex.min.css" />
+<link rel="stylesheet" href="{{site.cdn}}/quill.bubble.css" />
+<script src="{{site.cdn}}/quill.js"></script>
 <div id="editor" style="height: 220px">
 </div>
 <script src="/index.js"></script>

diff --git a/packages/website/src/pages/standalone/full.mdx b/packages/website/src/pages/standalone/full.mdx
@@ -4,15 +4,17 @@ import { StandaloneSandpack } from '../../components/Sandpack';
 
 <StandaloneSandpack
   preferPreview
-  externalResources={[
-    "{{site.highlightjs}}/highlight.min.js",
-    "{{site.highlightjs}}/styles/monokai-sublime.min.css",
-    "{{site.katex}}/katex.min.css",
-    "{{site.cdn}}/quill.snow.css",
-    "{{site.cdn}}/quill.js"
-  ]}
+  activeFile="index.js"
   files={{
     'index.html': `
+<script src="{{site.highlightjs}}/highlight.min.js"></script>
+<link rel="stylesheet" href="{{site.highlightjs}}/styles/atom-one-dark.min.css" />
+<script src="{{site.katex}}/katex.min.js"></script>
+<link rel="stylesheet" href="{{site.katex}}/katex.min.css" />
+<link rel="stylesheet" href="{{site.cdn}}/quill.snow.css" />
+<link rel="stylesheet" href="{{site.cdn}}/quill.bubble.css" />
+<script src="{{site.cdn}}/quill.js"></script>
+
 <div id="standalone-container">
   <div id="toolbar-container">
     <span class="ql-formats">

diff --git a/packages/website/src/pages/standalone/snow.mdx b/packages/website/src/pages/standalone/snow.mdx
@@ -4,15 +4,15 @@ import { StandaloneSandpack } from '../../components/Sandpack';
 
 <StandaloneSandpack
   preferPreview
-  externalResources={[
-    "{{site.highlightjs}}/highlight.min.js",
-    "{{site.highlightjs}}/styles/monokai-sublime.min.css",
-    "{{site.katex}}/katex.min.css",
-    "{{site.cdn}}/quill.snow.css",
-    "{{site.cdn}}/quill.js"
-  ]}
+  activeFile="index.js"
   files={{
     'index.html': `
+<script src="{{site.highlightjs}}/highlight.min.js"></script>
+<link rel="stylesheet" href="{{site.highlightjs}}/styles/atom-one-dark.min.css" />
+<script src="{{site.katex}}/katex.min.js"></script>
+<link rel="stylesheet" href="{{site.katex}}/katex.min.css" />
+<link rel="stylesheet" href="{{site.cdn}}/quill.snow.css" />
+<script src="{{site.cdn}}/quill.js"></script>
 <div id="editor" style="height: 220px">
 </div>
 <script src="/index.js"></script>

diff --git a/packages/website/src/pages/standalone/stress.mdx b/packages/website/src/pages/standalone/stress.mdx
@@ -4,15 +4,15 @@ import { StandaloneSandpack } from '../../components/Sandpack';
 
 <StandaloneSandpack
   preferPreview
-  externalResources={[
-    "{{site.highlightjs}}/highlight.min.js",
-    "{{site.highlightjs}}/styles/monokai-sublime.min.css",
-    "{{site.katex}}/katex.min.css",
-    "{{site.cdn}}/quill.snow.css",
-    "{{site.cdn}}/quill.js"
-  ]}
+  activeFile="index.js"
   files={{
     'index.html': `
+<script src="{{site.highlightjs}}/highlight.min.js"></script>
+<link rel="stylesheet" href="{{site.highlightjs}}/styles/atom-one-dark.min.css" />
+<script src="{{site.katex}}/katex.min.js"></script>
+<link rel="stylesheet" href="{{site.katex}}/katex.min.css" />
+<link rel="stylesheet" href="{{site.cdn}}/quill.snow.css" />
+<script src="{{site.cdn}}/quill.js"></script>
 <div id="editor" style="height: 220px">
 </div>
 <script src="/index.js"></script>