@datawhale/prosemirror-render 0.0.1

package/src/utils/globalStatus.ts

@@ -0,0 +1,19 @@
+import { ref } from "vue";
+import type { PMNode } from "@datawhale/dipwap-types/index";
+
+export const imageNodes = ref<PMNode[]>([]);
+export const imageNodesKey = Symbol();
+
+export const getAllImageNodes = (node: PMNode): PMNode[] => {
+  const imageNodes: PMNode[] = [];
+  const traverse = (currentNode: PMNode) => {
+    if (currentNode.type === "image") {
+      imageNodes.push(currentNode);
+    }
+    if (currentNode.content) {
+      currentNode.content.forEach((child: PMNode) => traverse(child));
+    }
+  };
+  traverse(node);
+  return imageNodes;
+};

package/src/utils/shiki.ts

@@ -0,0 +1,25 @@
+import { type HighlighterCore, createHighlighterCoreSync } from 'shiki/core';
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
+import bash from 'shiki/langs/bash.mjs';
+import c from 'shiki/langs/c.mjs';
+import json from 'shiki/langs/json.mjs';
+import markdown from 'shiki/langs/markdown.mjs';
+import python from 'shiki/langs/python.mjs';
+import sql from 'shiki/langs/sql.mjs';
+import minLight from 'shiki/themes/min-light.mjs';
+
+const jsEngine = createJavaScriptRegexEngine();
+const langs = { python, sql, json, bash, markdown, c };
+export const supportedLangs = ['text', ...Object.keys(langs)];
+let highlighter: HighlighterCore | null = null;
+
+export function getHighlighter() {
+  if (!highlighter) {
+    highlighter = createHighlighterCoreSync({
+      themes: [minLight],
+      langs: Object.values(langs),
+      engine: jsEngine,
+    });
+  }
+  return highlighter;
+}

package/src/utils/useAttachment.ts

@@ -0,0 +1,215 @@
+import { type Component } from 'vue';
+import BatIcon from '../icons/Attachment/Code/Bat.vue';
+import CIcon from '../icons/Attachment/Code/C.vue';
+import CppIcon from '../icons/Attachment/Code/Cpp.vue';
+import CssIcon from '../icons/Attachment/Code/Css.vue';
+import GoIcon from '../icons/Attachment/Code/Go.vue';
+import HtmlIcon from '../icons/Attachment/Code/Html.vue';
+import JavaIcon from '../icons/Attachment/Code/Java.vue';
+import JsIcon from '../icons/Attachment/Code/Js.vue';
+import JsonIcon from '../icons/Attachment/Code/Json.vue';
+import JsxIcon from '../icons/Attachment/Code/Jsx.vue';
+import MdIcon from '../icons/Attachment/Code/Md.vue';
+import PhpIcon from '../icons/Attachment/Code/Php.vue';
+import PythonIcon from '../icons/Attachment/Code/Python.vue';
+import RbIcon from '../icons/Attachment/Code/Rb.vue';
+import ShIcon from '../icons/Attachment/Code/Sh.vue';
+import SqlIcon from '../icons/Attachment/Code/Sql.vue';
+import SwiftIcon from '../icons/Attachment/Code/Swift.vue';
+import TsIcon from '../icons/Attachment/Code/Ts.vue';
+import TsxIcon from '../icons/Attachment/Code/Tsx.vue';
+import VueIcon from '../icons/Attachment/Code/Vue.vue';
+import ExcelIcon from '../icons/Attachment/Excel.vue';
+import PdfIcon from '../icons/Attachment/Pdf.vue';
+import PptIcon from '../icons/Attachment/Ppt.vue';
+import CommonIcon from '../icons/Attachment/UnknownFile.vue';
+import VideoIcon from '../icons/Attachment/VideoIcon.vue';
+import WordIcon from '../icons/Attachment/Word.vue';
+
+export function useAttachment(fileType: string, fileSize: number) {
+  // TODO: 需要补充更多文件类型的图标
+  const icons: { type: string; icon: Component }[] = [
+    {
+      type: 'pdf',
+      icon: PdfIcon,
+    },
+    {
+      type: 'docx',
+      icon: WordIcon,
+    },
+    {
+      type: 'doc',
+      icon: WordIcon,
+    },
+    {
+      type: 'xlsx',
+      icon: ExcelIcon,
+    },
+    {
+      type: 'xls',
+      icon: ExcelIcon,
+    },
+    {
+      type: 'pptx',
+      icon: PptIcon,
+    },
+    {
+      type: 'ppt',
+      icon: PptIcon,
+    },
+    {
+      type: 'mp4',
+      icon: VideoIcon,
+    },
+    {
+      type: 'avi',
+      icon: VideoIcon,
+    },
+    {
+      type: 'mkv',
+      icon: VideoIcon,
+    },
+    {
+      type: 'mov',
+      icon: VideoIcon,
+    },
+    {
+      type: 'py',
+      icon: PythonIcon,
+    },
+    {
+      type: 'js',
+      icon: JsIcon,
+    },
+    {
+      type: 'ts',
+      icon: TsIcon,
+    },
+    {
+      type: 'jsx',
+      icon: JsxIcon,
+    },
+    {
+      type: 'tsx',
+      icon: TsxIcon,
+    },
+    {
+      type: 'html',
+      icon: HtmlIcon,
+    },
+    {
+      type: 'css',
+      icon: CssIcon,
+    },
+    {
+      type: 'vue',
+      icon: VueIcon,
+    },
+    {
+      type: 'json',
+      icon: JsonIcon,
+    },
+    {
+      type: 'md',
+      icon: MdIcon,
+    },
+    {
+      type: 'cpp',
+      icon: CppIcon,
+    },
+    {
+      type: 'c',
+      icon: CIcon,
+    },
+    {
+      type: 'java',
+      icon: JavaIcon,
+    },
+    {
+      type: 'sql',
+      icon: SqlIcon,
+    },
+    {
+      type: 'php',
+      icon: PhpIcon,
+    },
+    {
+      type: 'go',
+      icon: GoIcon,
+    },
+    {
+      type: 'swift',
+      icon: SwiftIcon,
+    },
+    {
+      type: 'rb',
+      icon: RbIcon,
+    },
+    {
+      type: 'sh',
+      icon: ShIcon,
+    },
+    {
+      type: 'bat',
+      icon: BatIcon,
+    },
+    {
+      type: 'common',
+      icon: CommonIcon,
+    },
+  ];
+
+  const icon = icons.find((item) => item.type === fileType)?.icon || CommonIcon;
+
+  const previewRules = [
+    {
+      // 可以通过iframe直接传入文件url进行预览的文件类型
+      allowTypes: ['pdf', 'json', 'mp4', 'avi', 'mkv', 'mov'],
+      srcRule: (src: string) => src,
+    },
+    {
+      // 可以通过officeapps预览的文件类型
+      allowTypes: ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'],
+      srcRule: (src: string) => `https://view.officeapps.live.com/op/embed.aspx?src=${src}`,
+    },
+  ];
+
+  // 是否可以预览
+  const canPreview = previewRules.some((rule) => rule.allowTypes.includes(fileType));
+
+  // 生成预览链接
+  const genPreviewSrc = (src: string) => {
+    for (const rule of previewRules) {
+      if (rule.allowTypes.includes(fileType)) {
+        return rule.srcRule(src);
+      }
+    }
+    return '';
+  };
+
+  // 文件无法预览的图片的base64
+  const cannotPreviewImgDataUrl =
+    'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCIgdmlld0JveD0iMCAwIDEyMCAxMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTYwLjc4NCAyOS44MDhhLjUuNSAwIDAgMC0uMy42NGMuMzM5LjkzNi43MSAxLjg4OCAxLjQ3NiAyLjY1OGwuMDEyLjAxYy44MDUuNzU5IDEuODY4IDEuMDE3IDIuODk1Ljk0NmE1LjM5MyA1LjM5MyAwIDAgMCAyLjg1Mi0xLjA4My41LjUgMCAwIDAtLjYxLS43OTQgNC4zOTQgNC4zOTQgMCAwIDEtMi4zMTEuODhjLS44MTkuMDU2LTEuNTgtLjE1My0yLjEzNS0uNjctLjU5LS41OTUtLjg5OC0xLjM0OC0xLjIzOC0yLjI4N2EuNS41IDAgMCAwLS42NC0uM1ptNDMuMzk0IDUzLjQ5NHYtOS44MjVjLjE4OC4wODguMzU1LjE3My40OTkuMjUzIDUuNjk0IDMuMTQ4IDExLjQ4MiA3LjEyIDExLjExOCAxMy4yOTZ2OC41ODZjMC0zLjQzOS00LjkyMS04LjY5Mi0xMS42MTctMTIuMzFaTTEwLjQ5MiA0OC40NTV2MTEuMTU3Yy00LjQwMyAzLjMxNS02LjM5OSA2Ljc2OC02LjM5OSA5Ljk0NlY1Ni43M2MwLTIuMjc1IDEuNzUtNS4yODggNi4zOTktOC4yNzVaIiBmaWxsPSIjMEMyOTZFIi8+PHBhdGggZD0iTTEwLjQ5MiAzMy42ODd2NzMuMzEyYTQgNCAwIDAgMCA0IDRoODUuNjg2YTQgNCAwIDAgMCA0LTRWNDUuMzhhNCA0IDAgMCAwLTQtNEg0OS43MzFhNCA0IDAgMCAxLTMuMDc4LTEuNDQ0bC03LjMxLTguODA1YTQgNCAwIDAgMC0zLjA3OC0xLjQ0NUgxNC40OTJhNCA0IDAgMCAwLTQgNFoiIGZpbGw9IiNCQkJGQzQiIGZpbGwtb3BhY2l0eT0iLjQ1Ii8+PHBhdGggZD0ibTYwLjQ5NCAxNi4zNDctLjEzMS4yMjRjLTEuNDQ0IDIuNTkzLTIuNTUxIDYuMDU5LTMuMzAyIDguODg1YTc2LjAyOSA3Ni4wMjkgMCAwIDAtMS4xMTEgNC44MzdjLS4wMjYuMTMtLjA0NS4yMzMtLjA1OC4zMDJsLS4wMDIuMDExLTQuMTk2IDYuNzRhLjg0OC44NDggMCAwIDAtLjA1OC44NTUuOTkuOTkgMCAwIDAgLjU3Ni40ODYuNDkuNDkgMCAwIDAgLjExNC4wMjNsMi40MzQuMjE2Yy4wMDEuODgyLjAwNi45NTUuMDQgMS40NzYuMDA1LjA3Ny4wMS4xNTQuMDE3LjIzMS4wMTkuMjQ5LjAzOC40OTguMDMuNzQ3aC45OTdjLjAxLS4yNzMtLjAxLS41NDctLjAzLS44MmwtLjAxNi0uMjJjLS4wMTItLjE4LS4wMi0uMzA1LS4wMjYtLjQyOS0uMDEyLS4yNy0uMDEyLS41NC0uMDEyLTEuMzk3di0uMDQ2YS41LjUgMCAwIDAtLjQ1Ni0uNDk4bC0yLjY3My0uMjM3IDQuMTU5LTYuNjhhLjQ5OC40OTggMCAwIDAgLjA2OC0uMTc3di0uMDA1bC4wMDQtLjAyLjAxNC0uMDc1YTYwLjY2NyA2MC42NjcgMCAwIDEgLjI3Ny0xLjM5Yy4xOTctLjkzLjQ5LTIuMjIyLjg3NS0zLjY3My42OTctMi42MjUgMS42ODYtNS43MzIgMi45MzctOC4xNWEyNy4xMTIgMjcuMTEyIDAgMCAxLS40NDgtLjc4LjUuNSAwIDAgMS0uMDIzLS40MzZaIiBmaWxsPSIjMEMyOTZFIi8+PHBhdGggZD0iTTYwLjUxIDE2LjMxMkM2NC4xMTggOS4zMzMgNzMuMTA1IDYuMDU4IDgwLjg1IDYuMTQ0aC4wMDNjNC45OTkuMDg3IDEzLjEwOCAxLjgxNSAxNy43NDYgOC44NCA0LjUwMyA2LjY5NSA0LjkyOSAxMy4yMTcgNC44NDQgMTguNTQ0LS4wMzYgMi4yMzktLjA1NiA1LjU1LS4wNjUgOS40NWEzLjk5MiAzLjk5MiAwIDAgMC0zLjE5OS0xLjU5OGgtMjYuNzJ2LS4zNTFhLjUuNSAwIDAgMSAuMDY1LS4yNDVjLjQwMi0uNzE3LjgwNi0xLjI1NCAxLjQxOC0xLjY5Ni41OTgtLjQzMiAxLjM2MS0uNzUgMi40MzUtMS4wOTVhLjUwMy41MDMgMCAwIDEgLjEwMy0uMDIybDEuNy0uMTcuMDE0LS4wMDFjMS4wODQtLjA3OCAyLjEwOC0uNDY2IDMuMDc3LTEuMDMgMS4wODgtLjc4NyAxLjkzMi0yLjAzNiAyLjE2LTMuMzM2bC4wMDEtLjAwM2MuMDctLjM4Ny4wNzMtMS4zNy0uMzE1LTIuMjMzLS4xOS0uNDIzLS40NjQtLjgtLjg1NC0xLjA3MS0uMzg2LS4yNy0uOTE1LS40NTgtMS42NTQtLjQ1OGEuNjM1LjYzNSAwIDAgMC0uMi4wNjIgMy4yNSAzLjI1IDAgMCAwLS40MjcuMjM0Yy0uMzMuMjA4LS43LjQ5LTEuMDcuNzc5bC0uMjU0LjE5OWMtLjI3NC4yMTYtLjU0Mi40MjctLjc2NC41ODVhMy4zNzEgMy4zNzEgMCAwIDEtLjQyNi4yNjdjLS4wNjYuMDMyLS4xNTEuMDctLjI0Ni4wODlhLjYxLjYxIDAgMCAxLS40MzgtLjA2N2MtNi45NTMtNC4wODUtMTMuMjgtNy44MTUtMTcuMjY2LTE1LjAzNGEuNS41IDAgMCAxLS4wMDctLjQ3MVoiIGZpbGw9IiMwQzI5NkUiLz48cGF0aCBkPSJNNC4wOTMgNjguNzhWNTYuNmMwIDguNjMgMTEuNTUyIDE0LjI4NSAyMy41MDEgMTcuOTY2djkuNDc3Yy0xMi4wNzQtMy40ODktMjMuNS04LjI1NC0yMy41LTE1LjI2MloiIGZpbGw9IiMzMzcwRkYiLz48cGF0aCBkPSJNMjAuOTc3IDM2LjExNGEyIDIgMCAxIDEgMCA0IDIgMiAwIDAgMSAwLTRabTMgMmEzIDMgMCAxIDAtNiAwIDMgMyAwIDAgMCA2IDBabTYuOTE1LTJhMiAyIDAgMSAxIDAgNCAyIDIgMCAwIDEgMC00Wm0zIDJhMyAzIDAgMSAwLTYgMCAzIDMgMCAwIDAgNiAwWiIgZmlsbD0iIzhGOTU5RSIvPjxwYXRoIGQ9Ik01OS42OTkgNzcuNTc5YS41LjUgMCAwIDEgLjQ5NS41MDRsLS4wNjUgNy41MTJhLjUuNSAwIDAgMS0xLS4wMDhsLjA2NS03LjUxM2EuNS41IDAgMCAxIC41MDUtLjQ5NVpNNDMuOTggNzEuMmEuNS41IDAgMCAxLS4wMjMuNzA2bC01LjYyNSA1LjI2OWEuNS41IDAgMSAxLS42ODQtLjczbDUuNjI2LTUuMjY5YS41LjUgMCAwIDEgLjcwNi4wMjNabTMxLjU0OC4yODZhLjUuNSAwIDAgMSAuNzA3LS4wMWw1LjUyIDUuMzU0YS41LjUgMCAwIDEtLjY5Ni43MThsLTUuNTItNS4zNTVhLjUuNSAwIDAgMS0uMDExLS43MDdaIiBmaWxsPSIjMEMyOTZFIi8+PHBhdGggZD0iTTc5LjgyIDY1LjEwNmEuNS41IDAgMCAwLS42NzYuMjA5Qzc1LjI0IDcyLjcwNCA2Ny45MDggNzcuNjMgNTkuNTYzIDc3LjU1OGMtOC4zNDYtLjA3Mi0xNS41NzgtNS4xMjYtMTkuMzY2LTEyLjU4M2EuNS41IDAgMCAwLS44OTIuNDUzYzMuOTM1IDcuNzQ2IDExLjQ4MyAxMy4wNTQgMjAuMjQ5IDEzLjEzIDguNzY1LjA3NyAxNi40MTgtNS4wOTkgMjAuNDc0LTEyLjc3NmEuNS41IDAgMCAwLS4yMDgtLjY3NloiIGZpbGw9IiMwQzI5NkUiLz48cGF0aCBkPSJNMTAwLjk4NyAxMTAuOTk5YzExLjU4MyAwIDE0LjgwMi02LjY4IDE0LjgwMi0xMC42Mjd2LTcuODI1YzAgNS40MjctOS45NCA5Ljc4LTE2LjAwOCA5Ljc4SDcxLjA4M3Y4LjY3MmgyOS45MDRaIiBmaWxsPSIjMDBENkI5Ii8+PHBhdGggZD0iTTQzLjI3OCAxMDcuMDkydi04LjY5NEMzMC4xIDk2LjI4NCAxOC4wNzUgOTMuOTAzIDcuMDEgODUuMDU1Yy0uMzM0LS4yNjgtLjY2Ny0uNTQtMS0uODJ2OS41MjRjNy45OCA3LjY5NyAyMy44NTcgMTEuMjA1IDM2LjI3IDEzLjE3Ni4zMzUuMDU0LjY2OS4xMDYgMSAuMTU3Wk03LjAxIDkzLjMyOXYtNy4wMDFjMTAuODc1IDguNDM2IDIyLjY0NCAxMC44NzYgMzUuMjcgMTIuOTIxdjYuNjc0Yy01Ljk4LS45NTQtMTIuNzItMi4yNjItMTguOTY5LTQuMjE2LTYuNTAzLTIuMDMzLTEyLjM3LTQuNzM1LTE2LjMtOC4zNzhaIiBmaWxsPSIjMEMyOTZFIi8+PC9zdmc+';
+
+  // 根据文件大小选择合适的单位
+  const calculateFileSize = (fileSize: number) => {
+    if (fileSize === undefined) {
+      return '未知大小';
+    }
+    if (fileSize / 1024 / 1024 < 1) {
+      return (fileSize / 1024).toFixed(2) + 'KB';
+    } else if (fileSize / 1024 / 1024 / 1024 < 1) {
+      return (fileSize / 1024 / 1024).toFixed(2) + 'MB';
+    } else {
+      return (fileSize / 1024 / 1024 / 1024).toFixed(2) + 'GB';
+    }
+  };
+
+  return {
+    icon,
+    canPreview,
+    genPreviewSrc,
+    cannotPreviewImgDataUrl,
+    calculatedFileSize: calculateFileSize(fileSize),
+  };
+}

package/tsconfig.build.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "dist/types",
+    "noEmit": false
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue"]
+}

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "types": ["vite/client", "node"],
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": false,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    "baseUrl": ".",
+    "paths": {
+      "@datawhale/dipwap-types/index": ["src/types.ts"],
+      "@datawhale/dipwap-render/*": ["src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "exclude": ["node_modules", "dist"]
+}

package/vite.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import path from "path";
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      "@datawhale/dipwap-types/index": path.resolve(__dirname, "src/types.ts"),
+      "@datawhale/dipwap-render": path.resolve(__dirname, "src"),
+    },
+  },
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, "src/index.ts"),
+      name: "MyLib",
+      formats: ["es", "cjs"],
+      fileName: (format) => `index.${format}.js`,
+    },
+    rollupOptions: {
+      external: ["vue"], // vue 不要打进你的库
+    },
+  },
+});