diff options
author | Azul <azul@riseup.net> | 2021-12-14 16:13:16 +0300 |
---|---|---|
committer | Max <max@nextcloud.com> | 2022-02-09 11:42:46 +0300 |
commit | f611a0f7f3ddb568b3e6291f35bc1b5ffda24964 (patch) | |
tree | 2c36767435d58f09bcc6c1933fbd75d2db9ed7f8 /src | |
parent | edfbb70f1578dad76ff869b9f2ca0f3c027232d2 (diff) |
upgrade: syntax highlighting with tiptap2
Signed-off-by: Max <max@nextcloud.com>
Diffstat (limited to 'src')
-rw-r--r-- | src/EditorFactory.js | 22 | ||||
-rw-r--r-- | src/components/EditorWrapper.vue | 5 | ||||
-rw-r--r-- | src/helpers/mappings.js | 1 |
3 files changed, 14 insertions, 14 deletions
diff --git a/src/EditorFactory.js b/src/EditorFactory.js index 7485021f4..9b7ae8817 100644 --- a/src/EditorFactory.js +++ b/src/EditorFactory.js @@ -28,6 +28,7 @@ import Blockquote from '@tiptap/extension-blockquote' import Codeblock from '@tiptap/extension-code-block' import Placeholder from '@tiptap/extension-placeholder' import OrderedList from '@tiptap/extension-ordered-list' +import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight' import { Editor } from '@tiptap/core' import { Strong, Italic, Strike, Link, Underline } from './marks' import { @@ -39,25 +40,23 @@ import { } from './nodes' import { Markdown, Emoji } from './extensions' import { translate as t } from '@nextcloud/l10n' +import { lowlight } from 'lowlight/lib/core' import 'proxy-polyfill' const loadSyntaxHighlight = async (language) => { - const languages = [language] - const modules = {} - for (let i = 0; i < languages.length; i++) { + const list = lowlight.listLanguages() + console.info(list) + if (!lowlight.listLanguages().includes(language)) { try { - const lang = await import(/* webpackChunkName: "highlight/[request]" */'highlight.js/lib/languages/' + languages[i]) - modules[languages[i]] = lang.default + const syntax = await import(/* webpackChunkName: "highlight/[request]" */'highlight.js/lib/languages/' + language) + lowlight.registerLanguage(language, syntax.default) } catch (e) { // No matching highlighing found, fallback to none - return undefined + console.debug(e) } } - if (Object.keys(modules).length === 0 && modules.constructor === Object) { - return undefined - } - return { languages: modules } + return lowlight } const createEditor = ({ content, onCreate, onUpdate, extensions, enableRichEditing, languages, currentDirectory }) => { @@ -91,8 +90,7 @@ const createEditor = ({ content, onCreate, onUpdate, extensions, enableRichEditi richEditingExtensions = [ PlainTextDocument, Codeblock, - // FIXME: Do we want to use CodeBlockLowlight instead? - // new CodeBlockHighlight({ ...languages, }), + CodeBlockLowlight.configure({ lowlight }), ] } extensions = extensions || [] diff --git a/src/components/EditorWrapper.vue b/src/components/EditorWrapper.vue index 1828998d4..9e8a0d25f 100644 --- a/src/components/EditorWrapper.vue +++ b/src/components/EditorWrapper.vue @@ -328,7 +328,8 @@ export default { const content = this.isRichEditor ? markdownit.render(documentSource) : '<pre>' + escapeHtml(documentSource) + '</pre>' - loadSyntaxHighlight(extensionHighlight[this.fileExtension] || this.fileExtension).then((languages) => { + const language = extensionHighlight[this.fileExtension] || this.fileExtension + loadSyntaxHighlight(language).then(lowlight => { this.tiptap = createEditor({ content, onCreate: ({ editor }) => { @@ -384,7 +385,7 @@ export default { }), ], enableRichEditing: this.isRichEditor, - languages, + lowlight, currentDirectory: this.currentDirectory, }) this.tiptap.on('focus', () => { diff --git a/src/helpers/mappings.js b/src/helpers/mappings.js index c0efaacb6..bbee0ac8c 100644 --- a/src/helpers/mappings.js +++ b/src/helpers/mappings.js @@ -77,6 +77,7 @@ const extensionHighlight = { 'sublime-project': 'json', 'sublime-settings': 'json', 'sublime-workspace': 'json', + js: 'javascript', mk: 'makefile', mak: 'makefile', md: 'markdown', |