mod: remove prismjs, remove feat: code highlight

.vscode/settings.json

@@ -6,6 +6,7 @@
     "azkhx",
     "bangumi",
     "Bilibili",
+    "cout",
     "dompurify",
     "fontawesome",
     "galgame",

package.json

@@ -24,7 +24,6 @@
     "dompurify": "^3.0.5",
     "pinia": "^2.1.6",
     "pinia-plugin-persistedstate": "^3.2.0",
-    "prismjs": "^1.29.0",
     "vue": "^3.3.4",
     "vue-i18n": "^9.2.2",
     "vue-router": "^4.2.4"
@@ -33,7 +32,6 @@
     "@iconify/vue": "^4.1.1",
     "@types/dompurify": "^3.0.2",
     "@types/node": "^20.4.8",
-    "@types/prismjs": "^1.26.0",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.0.2",
     "cross-env": "^7.0.3",
@@ -42,7 +40,6 @@
     "typescript": "^5.1.6",
     "vite": "^4.4.8",
     "vite-plugin-mock": "^3.0.0",
-    "vite-plugin-prismjs": "^0.0.8",
     "vue-tsc": "^1.8.8"
   },
   "keywords": [

pnpm-lock.yaml

@@ -23,9 +23,6 @@ dependencies:
   pinia-plugin-persistedstate:
     specifier: ^3.2.0
     version: 3.2.0(pinia@2.1.6)
-  prismjs:
-    specifier: ^1.29.0
-    version: 1.29.0
   vue:
     specifier: ^3.3.4
     version: 3.3.4
@@ -46,9 +43,6 @@ devDependencies:
   '@types/node':
     specifier: ^20.4.8
     version: 20.4.8
-  '@types/prismjs':
-    specifier: ^1.26.0
-    version: 1.26.0
   '@vitejs/plugin-vue':
     specifier: ^4.2.3
     version: 4.2.3(vite@4.4.8)(vue@3.3.4)
@@ -73,9 +67,6 @@ devDependencies:
   vite-plugin-mock:
     specifier: ^3.0.0
     version: 3.0.0(esbuild@0.18.19)(mockjs@1.1.0)(vite@4.4.8)
-  vite-plugin-prismjs:
-    specifier: ^0.0.8
-    version: 0.0.8(prismjs@1.29.0)
   vue-tsc:
     specifier: ^1.8.8
     version: 1.8.8(typescript@5.1.6)
@@ -708,10 +699,6 @@ packages:
     resolution: {integrity: sha512-0mHckf6D2DiIAzh8fM8f3HQCvMKDpK94YQ0DSVkfWTG9BZleYIWudw9cJxX8oCk9bM+vAkDyujDV6dmKHbvQpg==}
     dev: true
 
-  /@types/prismjs@1.26.0:
-    resolution: {integrity: sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ==}
-    dev: true
-
   /@types/trusted-types@2.0.3:
     resolution: {integrity: sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==}
     dev: true
@@ -930,14 +917,6 @@ packages:
       picomatch: 2.3.1
     dev: true
 
-  /babel-plugin-prismjs@2.1.0(prismjs@1.29.0):
-    resolution: {integrity: sha512-ehzSKYfeAz4U78zi/sfwsjDPlq0LvDKxNefcZTJ/iKBu+plsHsLqZhUeGf1+82LAcA35UZGbU6ksEx2Utphc/g==}
-    peerDependencies:
-      prismjs: ^1.18.0
-    dependencies:
-      prismjs: 1.29.0
-    dev: true
-
   /balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
     dev: true
@@ -1630,10 +1609,6 @@ packages:
       picocolors: 1.0.0
       source-map-js: 1.0.2
 
-  /prismjs@1.29.0:
-    resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
-    engines: {node: '>=6'}
-
   /queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
     dev: true
@@ -1862,17 +1837,6 @@ packages:
       - supports-color
     dev: true
 
-  /vite-plugin-prismjs@0.0.8(prismjs@1.29.0):
-    resolution: {integrity: sha512-mBPPMS/hwVUArdqCtp/oajZT7iq1qwJDDCciNZ3R5+Q5tQUuUHXtDKuZHYnklPLElNbENf2FyuOtC4FrgxQRAA==}
-    engines: {node: '>=12.0.0'}
-    dependencies:
-      '@babel/core': 7.22.15
-      babel-plugin-prismjs: 2.1.0(prismjs@1.29.0)
-    transitivePeerDependencies:
-      - prismjs
-      - supports-color
-    dev: true
-
   /vite@4.4.8(@types/node@20.4.8)(sass@1.64.2):
     resolution: {integrity: sha512-LONawOUUjxQridNWGQlNizfKH89qPigK36XhMI7COMGztz8KNY0JHim7/xDd71CZwGT4HtSRgI7Hy+RlhG0Gvg==}
     engines: {node: ^14.18.0 || >=16.0.0}

src/components/quill-editor/EditorSettingsMenu.vue

@@ -26,6 +26,9 @@ defineProps<{
 const isRefreshPage = ref(false)
 
 // 点击高级选项时提醒用户刷新页面
+watch(mode, () => {
+  isRefreshPage.value = !isRefreshPage.value
+})
 
 const handleRefreshPage = () => location.reload()
 </script>
@@ -69,8 +72,14 @@ const handleRefreshPage = () => location.reload()
             </span>
           </Transition>
         </div>
+
         <!-- 切换按钮 -->
-        <SwitchButton />
+        <select class="select" v-model="mode">
+          <option value="minimal">最小配置</option>
+          <option value="">默认配置</option>
+          <option value="essential">基本配置</option>
+          <option value="full">最高配置</option>
+        </select>
       </div>
     </div>
   </Transition>
@@ -78,10 +87,11 @@ const handleRefreshPage = () => location.reload()
 
 <style lang="scss" scoped>
 .settings-menu {
+  width: 277px;
   padding: 10px;
   z-index: 1009;
   position: absolute;
-  top: 470px;
+  margin-bottom: 190px;
   background-color: var(--kungalgame-white);
   border: 1px solid var(--kungalgame-blue-1);
   box-shadow: var(--shadow);
@@ -106,6 +116,8 @@ const handleRefreshPage = () => location.reload()
 
 .editor-height {
   margin-bottom: 20px;
+  display: flex;
+  justify-content: space-between;
 }
 
 .editor-advance {
@@ -126,6 +138,19 @@ const handleRefreshPage = () => location.reload()
   }
 }
 
+// 编辑器模式的选择框
+.select {
+  width: 100px;
+  font-size: 16px;
+  margin-left: 20px;
+  color: var(--kungalgame-font-color-3);
+  border: 1px solid var(--kungalgame-blue-4);
+  background-color: var(--kungalgame-trans-white-9);
+  option {
+    background-color: var(--kungalgame-white);
+  }
+}
+
 .slide-up-enter-active,
 .slide-up-leave-active {
   transition: all 0.25s ease-out;

src/components/quill-editor/QuillEditor.vue

@@ -5,10 +5,11 @@ import {
   ref,
   onBeforeMount,
   onBeforeUnmount,
+  onMounted,
 } from 'vue'
 import { QuillEditor } from '@vueup/vue-quill'
 
-// 自定义 quill 的两个主题
+// 自定义 quill 的两个主题，第二个主题暂时懒得动
 import '@/styles/editor/editor.snow.scss'
 // import '@vueup/vue-quill/dist/vue-quill.bubble.css'
 
@@ -42,6 +43,7 @@ const { editorHeight, mode, theme, isSave, content } = storeToRefs(
  * @param {boolean} isShowSettings - 是否显示编辑器设置
  */
 const props = defineProps<{
+  height?: number
   isShowToolbar: boolean
   isShowAdvance: boolean
   isShowTitle: boolean
@@ -52,7 +54,14 @@ const props = defineProps<{
 const editorRef = ref()
 
 // 编辑器的高度
-const editorHeightStyle = computed(() => `height: ${editorHeight.value}px`)
+const editorHeightStyle = computed(
+  () => `height: ${props.height ? props.height : editorHeight.value}px`
+)
+// 编辑器的工具栏是否显示
+const isShowEditorToolbar = computed(() =>
+  props.isShowToolbar ? 'block' : 'none'
+)
+
 // 编辑器内的内容
 const valueHtml = ref('')
 // 编辑器文字计数
@@ -67,16 +76,25 @@ const editorOptions = {
 const onEditorReady = () => {}
 
 // 工具栏相关配置
+const toolbarOptions = {
+  container: [
+    ['bold', 'italic', 'underline', 'strike'],
+    ['markdown'], // Add this.
+  ],
+  handlers: {
+    // Add this.
+    markdown: function () {},
+  },
+}
 
 // 挂载之前载入数据，如果不保存，则不载入
 onBeforeMount(() => {
   if (isSave.value) {
     valueHtml.value = content.value
   }
-})
 
-// 组件销毁时，也及时销毁编辑器
+  // 如果不显示高级选项则隐藏工具栏
-onBeforeUnmount(() => {})
+})
 
 // 编辑器文本改变时自动保存数据
 const handleTextChange = () => {
@@ -107,7 +125,7 @@ const handleTextChange = () => {
       :content="valueHtml"
       :style="editorHeightStyle"
       :theme="theme"
-      toolbar="full"
+      :toolbar="mode"
       :options="editorOptions"
       @textChange="handleTextChange"
       @ready="onEditorReady"
@@ -136,6 +154,7 @@ const handleTextChange = () => {
   background-color: var(--kungalgame-trans-blue-0);
   /* 头部下方阴影 */
   box-shadow: 0 2px 4px 0 var(--kungalgame-trans-blue-1);
+  display: v-bind(isShowEditorToolbar);
 }
 
 /* 编辑器体的样式 */
@@ -165,6 +184,16 @@ const handleTextChange = () => {
   }
   .ql-editor {
     padding: 0;
+    &::-webkit-scrollbar {
+      display: inline;
+      width: 4px;
+      height: 0;
+    }
+    &::-webkit-scrollbar-thumb {
+      cursor: default;
+      background: var(--kungalgame-blue-4);
+      border-radius: 2px;
+    }
     &::before {
       left: 0;
     }
@@ -175,7 +204,7 @@ const handleTextChange = () => {
       bottom: 0;
       transform: translateX(-20px) translateY(27px);
       color: var(--kungalgame-trans-white-5);
-      text-shadow: 1px 1px 1px var(--kungalgame-blue-2);
+      text-shadow: 1px 1px 1px var(--kungalgame-pink-3);
       font-style: oblique;
     }
   }

src/styles/editor/editor.snow.scss

@@ -833,7 +833,6 @@
   background-color: var(--kungalgame-trans-white-2);
 }
 .ql-toolbar.ql-snow {
-  border: 1px solid var(--kungalgame-blue-1);
   box-sizing: border-box;
   font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
   padding: 8px;
@@ -934,3 +933,12 @@
 .ql-container.ql-snow {
   border: 1px solid var(--kungalgame-blue-1);
 }
+
+/* 被 reset css 覆盖的样式 */
+u {
+  text-decoration: underline;
+}
+
+s {
+  text-decoration: line-through;
+}

src/views/topic/content/components/Content.vue

@@ -1,23 +1,18 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
+// 导入编辑器的样式
-import prismjs from 'prismjs'
+// 自定义 quill 的两个主题
-import 'prismjs/themes/prism.css'
+import '@/styles/editor/editor.snow.scss'
 
 defineProps<{
   content: string
 }>()
-
-onMounted(() => {
-  // 高亮渲染
-  prismjs.highlightAll()
-})
 </script>
 
 <template>
   <!-- 内容区右侧的话题展示区，这里富文本必须用 v-html，已经确定文本经过三次处理 -->
   <!-- 这里用的 v-html，样式是页面刷新后才会有的，所以必须动态绑定样式 -->
-  <div class="kungalgame-topic-content">
+  <div class="kungalgame-topic-content ql-container ql-snow">
-    <div v-html="content"></div>
+    <div class="ql-editor ql-blank" v-html="content"></div>
   </div>
 </template>
 
@@ -28,8 +23,8 @@ onMounted(() => {
   width: calc(100% - 141px);
   font-size: 15px;
   padding: 17px;
-  border-left: 1px solid var(--kungalgame-blue-1);
   color: var(--kungalgame-font-color-3);
+  border: none !important;
 }
 
 .kungalgame-topic-content {
@@ -56,108 +51,18 @@ onMounted(() => {
     text-shadow: none;
   }
 
-  /* 下面全部是 wangEditor 原生样式 */
-
-  :deep(p, li) {
-    white-space: pre-wrap; /* 保留空格 */
-  }
-
-  :deep(blockquote) {
-    border-left: 8px solid var(--kungalgame-blue-1);
-    padding: 10px 10px;
-    margin: 10px 0;
-    background-color: var(--kungalgame-trans-blue-0);
-  }
-
-  :deep(pre > code) {
-    display: block;
-    padding: 10px;
-  }
-
-  :deep(code) {
-    font-family: monospace;
-    background-color: var(--kungalgame-trans-blue-0);
-    padding: 3px;
-    border-radius: 3px;
-    text-shadow: none;
-    box-shadow: var(--shadow);
-  }
-
-  :deep(table) {
-    border-collapse: collapse;
-  }
-
-  :deep(td, th) {
-    border: 1px solid var(--kungalgame-blue-4);
-    min-width: 50px;
-    height: 20px;
-  }
-
-  :deep(th) {
-    background-color: var(--kungalgame-trans-blue-0);
-  }
-
-  :deep(ul, ol) {
-    padding-left: 20px;
-  }
-
-  :deep(input[type='checkbox']) {
-    margin-right: 5px;
-  }
-
-  /**
-   * 过滤 prism 相关样式的代码
-   */
-
-  /* 这一步把 prism 的背景过滤掉 */
   :deep(pre) {
-    padding: 0;
+    &::before {
-    border: 1px solid var(--kungalgame-blue-4);
+      content: '< code >';
-    background-color: var(--kungalgame-trans-white-9);
+      color: var(--kungalgame-font-color-0);
-  }
+      background-color: var(--kungalgame-trans-white-5);
-
+      border: 1px solid var(--kungalgame-blue-1);
-  :deep(.token) {
+      padding: 0 5px;
-    background-color: var(--kungalgame-trans-white-9);
+      border-radius: 3px;
-  }
+      position: absolute;
-
+      font-size: 17px;
-  :deep(.toolbar) {
+      top: 20px;
-    top: 17px;
+      right: 28px;
-    right: 10px;
-    display: flex;
-    & > .toolbar-item {
-      /* 这里直接根据 DOM 结构写的，写的不是很明了，要怪就怪写 prism 插件的人吧 hhh */
-      button,
-      & > span {
-        transition: all 0.2s;
-        box-shadow: unset;
-        margin-left: 10px;
-        border-radius: 0;
-        padding: 2px 5px;
-      }
-      & > span {
-        color: var(--kungalgame-pink-4);
-        border: 1px solid var(--kungalgame-pink-4);
-        background-color: var(--kungalgame-trans-white-5);
-        &:hover {
-          background-color: var(--kungalgame-pink-4);
-          color: var(--kungalgame-white);
-        }
-      }
-      button {
-        cursor: pointer;
-        background-color: var(--kungalgame-trans-white-9);
-        border: 1px solid var(--kungalgame-blue-4);
-        color: var(--kungalgame-blue-4);
-        &:hover {
-          background-color: var(--kungalgame-blue-4);
-          color: var(--kungalgame-white);
-        }
-        &:focus {
-          color: var(--kungalgame-pink-4);
-          border: 1px solid var(--kungalgame-pink-4);
-          background-color: var(--kungalgame-trans-white-5);
-        }
-      }
     }
   }
 }

src/views/topic/content/components/ReplyPanel.vue

@@ -55,6 +55,7 @@ const handelClosePanel = () => {
           <!-- 回复的编辑器 -->
           <div class="content">
             <QuillEditor
+              :height="200"
               :is-show-toolbar="isShowAdvance"
               :is-show-advance="false"
               :is-show-title="false"

vite.config.ts

@@ -5,42 +5,10 @@ import vue from '@vitejs/plugin-vue'
 import { visualizer } from 'rollup-plugin-visualizer'
 // 导入 vite tsx 支持
 import vueJsx from '@vitejs/plugin-vue-jsx'
-// 导入 prismjs 高亮
-import { prismjsPlugin } from 'vite-plugin-prismjs'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [
+  plugins: [vue(), visualizer() as PluginOption, vueJsx()],
-    vue(),
-    visualizer() as PluginOption,
-    vueJsx(),
-    prismjsPlugin({
-      // 这里和 wangEditor 适配
-      languages: [
-        'jsx',
-        'typescript',
-        'markup',
-        'go',
-        'php',
-        'c',
-        'python',
-        'java',
-        'cpp',
-        'csharp',
-        'visual-basic',
-        'sql',
-        'ruby',
-        'swift',
-        'bash',
-        'markdown',
-        'lua',
-        'groovy',
-      ],
-      plugins: ['show-language', 'toolbar', 'copy-to-clipboard'],
-      theme: 'okaidia',
-      css: true,
-    }),
-  ],
   /* src 别名为 @ */
   resolve: {
     alias: {