Skip to content

Commit

Permalink
feat: 🎸 支持不同语言的代码块
Browse files Browse the repository at this point in the history
  • Loading branch information
zhxqc committed Aug 22, 2022
1 parent 780fbf0 commit 3e6bd3f
Show file tree
Hide file tree
Showing 8 changed files with 138 additions and 84 deletions.
20 changes: 10 additions & 10 deletions changelog.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@
module.exports = {
disableEmoji: false,
format: '{type}{scope}: {emoji}{subject}',
list: ['test', 'feat', 'fix', 'chore', 'docs', 'refactor', 'style', 'ci', 'perf'],
list: ['feat', 'fix', 'chore', 'docs', 'refactor', 'style', 'perf'],
maxMessageLength: 64,
minMessageLength: 3,
questions: ['type', 'scope', 'subject', 'body', 'breaking', 'issues', 'lerna'],
questions: ['type', 'scope', 'subject', 'body', 'issues',],
scopes: [],
// 翻译了一下描述部分
types: {
Expand All @@ -26,10 +26,10 @@ module.exports = {
emoji: "✏️",
value: "docs"
},
"feat": {
"description": "一个新的特性",
"emoji": "🎸",
"value": "feat"
feat: {
description: "一个新的特性",
emoji: "🎸",
value: "feat"
},
fix: {
description: "修复bug",
Expand All @@ -41,10 +41,10 @@ module.exports = {
emoji: "⚡️",
value: "perf"
},
"refactor": {
"description": "一些代码结构上优化,既不是新特性也不是修 Bug(比如函数改个名字)",
"emoji": "💡",
"value": "refactor"
refactor: {
description: "一些代码结构上优化,既不是新特性也不是修 Bug(比如函数改个名字)",
emoji: "💡",
value: "refactor"
},
release: {
description: "Create a release commit",
Expand Down
3 changes: 3 additions & 0 deletions components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,9 @@ declare module '@vue/runtime-core' {
ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElInput: typeof import('element-plus/es')['ElInput']
ElOption: typeof import('element-plus/es')['ElOption']
ElPopover: typeof import('element-plus/es')['ElPopover']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElTooltip: typeof import('element-plus/es')['ElTooltip']
ElUpload: typeof import('element-plus/es')['ElUpload']
ExtensionViewsIframeView: typeof import('./src/components/extensionViews/IframeView.vue')['default']
Expand All @@ -30,6 +32,7 @@ declare module '@vue/runtime-core' {
MenuBubbleImageBubbleMenu: typeof import('./src/components/menuBubble/ImageBubbleMenu.vue')['default']
MenuBubbleLinkBubbleMenu: typeof import('./src/components/menuBubble/LinkBubbleMenu.vue')['default']
MenuCommandsCodeBlock: typeof import('./src/components/menuCommands/CodeBlock.vue')['default']
MenuCommandsCodeBlockLanguageSelect: typeof import('./src/components/menuCommands/CodeBlockLanguageSelect.vue')['default']
MenuCommandsCodeViewCommandButton: typeof import('./src/components/menuCommands/CodeViewCommandButton.vue')['default']
MenuCommandsColorPopover: typeof import('./src/components/menuCommands/ColorPopover.vue')['default']
MenuCommandsCommandButton: typeof import('./src/components/menuCommands/CommandButton.vue')['default']
Expand Down
4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,9 @@
"@tiptap/extension-text-align": "^2.0.0-beta.31",
"@tiptap/extension-text-style": "^2.0.0-beta.26",
"@tiptap/extension-underline": "^2.0.0-beta.25",
"@tiptap/vue-3": "^2.0.0-beta.96"
"@tiptap/vue-3": "^2.0.0-beta.96",
"highlight.js": "^11.6.0",
"lowlight": "^2.7.0"
},
"devDependencies": {
"@commitlint/cli": "^17.0.3",
Expand Down
32 changes: 22 additions & 10 deletions preview/views/Index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -44,25 +44,37 @@ import 'codemirror/lib/codemirror.css'; // import base style
import 'codemirror/mode/xml/xml.js'; // language
import 'codemirror/addon/selection/active-line.js'; // require active-line.js
import 'codemirror/addon/edit/closetag.js';
// load all highlight.js languages
import {lowlight} from 'lowlight'
const content = ref(`<p># dd dsa dddd
</p>
<pre>
<code></code>
</pre>
<p>
</p>
<iframe src="https://github1s.com/Leecason/element-tiptap/blob/master/README.md" frameborder="0" allowfullscreen="true"></iframe>
<p>`)
const content = ref(` <p>
Press Command/Ctrl + Enter to leave the fenced code block and continue typing in boring paragraphs.
</p>
<pre><code class="language-javascript">for (var i=1; i <= 20; i++)
{
if (i % 15 == 0)
console.log("FizzBuzz");
else if (i % 3 == 0)
console.log("Fizz");
else if (i % 5 == 0)
console.log("Buzz");
else
console.log(i);
}</code></pre>
<p>
Press Command/Ctrl + Enter to leave the fenced code block and continue typing in boring paragraphs.
</p>
\``)
const extensions = [
Document, Text, Paragraph, Heading, Bold, Underline, Italic, Strike, Link, History,
Color, FontFamily, FontSize, Highlight, Code, HardBreak, HorizontalRule, TextAlign, Indent,
LineHeight, FormatClear, Fullscreen, SelectAll, CodeBlock, BulletList, OrderedList, Image,
LineHeight, FormatClear, Fullscreen, SelectAll, BulletList, OrderedList, Image,
TaskList,
Gapcursor,
Table.configure({ resizable: true }),
Iframe,
CodeBlock.configure({ languageClassPrefix: 'language-',defaultLanguage: 'plaintext',lowlight }),
CodeView.configure({
codemirror,
codemirrorOptions: {
Expand Down
1 change: 1 addition & 0 deletions src/components/Editor.vue
Original file line number Diff line number Diff line change
Expand Up @@ -292,4 +292,5 @@ provide('t', t);
<style lang="scss">
@import '../styles/editor.scss';
@import '../styles/command-button.scss';
@import "highlight.js/styles/atom-one-dark.css";
</style>
61 changes: 0 additions & 61 deletions src/components/menuCommands/CodeBlock.vue

This file was deleted.

78 changes: 78 additions & 0 deletions src/components/menuCommands/CodeBlockLanguageSelect.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
<template>
<node-view-wrapper class="code-block">
<el-select
v-model="selectedLanguage"
placeholder="Select"
class="language-select"
contenteditable="false"
filterable
size="small"
>
<el-option
v-for="(language, index) in languages"
:key="index"
:value="language"
:label="language"
/>
</el-select>
<pre class="hljs"><code :class="`language-${selectedLanguage}`"><node-view-content ref="nodeViewContentRef" /></code></pre>
</node-view-wrapper>
</template>

<script>
import {NodeViewContent, nodeViewProps, NodeViewWrapper} from '@tiptap/vue-3'
import {ElSelect, ElOption} from 'element-plus'
import {defineComponent, nextTick, onMounted} from "vue";
export default defineComponent({
components: {
NodeViewWrapper,
NodeViewContent,
ElSelect,
ElOption
},
props: nodeViewProps,
setup() {
},
data() {
return {
languages: this.extension.options.lowlight.listLanguages(),
}
},
computed: {
selectedLanguage: {
get() {
return this.node.attrs.language
},
set(language) {
this.updateAttributes({language})
},
},
},
created() {
if (!this.selectedLanguage) {
nextTick(() => {
this.selectedLanguage = 'plaintext'
})
}
}
})
</script>

<style lang="scss">
.code-block {
position: relative;
.language-select {
position: absolute;
top: 0.5rem;
right: 0.5rem;
width: 80px;
:deep(.el-input__suffix) {
display: none;
}
}
}
</style>
23 changes: 21 additions & 2 deletions src/extensions/code-block.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,21 @@
import type { Editor } from '@tiptap/core';
import TiptapCodeBlock from '@tiptap/extension-code-block';
import { VueNodeViewRenderer } from '@tiptap/vue-3'
// import TiptapCodeBlock from '@tiptap/extension-code-block';
import TiptapCodeBlockLowlight from '@tiptap/extension-code-block-lowlight'

import CommandButton from '@/components/menuCommands/CommandButton.vue';
import CodeBlockLanguageSelect from '@/components/menuCommands/CodeBlockLanguageSelect.vue'

const CodeBlock = TiptapCodeBlock.extend({
// @ts-ignore
const CodeBlock = TiptapCodeBlockLowlight.extend({
addNodeView() {
return VueNodeViewRenderer(CodeBlockLanguageSelect)
},
addOptions() {
return {
...this.parent?.(),
languageClassPrefix: 'language-',
defaultLanguage: 'plaintext',
button({ editor, t }: { editor: Editor; t: (...args: any[]) => string }) {
return {
component: CommandButton,
Expand All @@ -21,6 +31,15 @@ const CodeBlock = TiptapCodeBlock.extend({
},
};
},
addAttributes() {
// Return an object with attribute configuration
return {
...this.parent?.(),
class: {
default: 'hljs',
},
}
},
});

export default CodeBlock;

0 comments on commit 3e6bd3f

Please sign in to comment.