@datawhale/prosemirror-render 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (287) hide show
  1. package/dist/AttachmentBlock-ChMNTUOo.mjs +351 -0
  2. package/dist/AttachmentBlock-DsmJP3Kw.js +1 -0
  3. package/dist/AttachmentInline-Dc3dp0g-.js +1 -0
  4. package/dist/AttachmentInline-tbC8BJBy.mjs +52 -0
  5. package/dist/AttachmentMenu-B5x8P9_n.mjs +541 -0
  6. package/dist/AttachmentMenu-ExoCOe4B.js +1 -0
  7. package/dist/Blockquote-BamWUQND.mjs +15 -0
  8. package/dist/Blockquote-CQSBFnsu.js +1 -0
  9. package/dist/BulletList-BQTUD69X.mjs +15 -0
  10. package/dist/BulletList-CFjF3U-l.js +1 -0
  11. package/dist/Callout-Cu6HI-xq.mjs +28 -0
  12. package/dist/Callout-DPdOqTb4.js +1 -0
  13. package/dist/CellOutput-C33VK0df.mjs +981 -0
  14. package/dist/CellOutput-DiKZlIFa.js +6 -0
  15. package/dist/CodeBlock-Cjuxuq7B.mjs +8359 -0
  16. package/dist/CodeBlock-DWniNUQB.js +148 -0
  17. package/dist/Doc-6s4VMDsx.mjs +15 -0
  18. package/dist/Doc-D2yvlSII.js +1 -0
  19. package/dist/FoldBlock-DRdlU-DX.mjs +75 -0
  20. package/dist/FoldBlock-ZPMf0QsR.js +1 -0
  21. package/dist/Grid-GfmJxM93.mjs +31 -0
  22. package/dist/Grid-QToZdaRT.js +1 -0
  23. package/dist/HardBreak-B2tFO31P.mjs +13 -0
  24. package/dist/HardBreak-Dbf5Zg5o.js +1 -0
  25. package/dist/Heading-BElRvhGn.mjs +21 -0
  26. package/dist/Heading-BUnffIAz.js +1 -0
  27. package/dist/HorizontalRule-BRG45oT0.mjs +13 -0
  28. package/dist/HorizontalRule-CE09LZGf.js +1 -0
  29. package/dist/IFrame-CaAOVLGN.mjs +17 -0
  30. package/dist/IFrame-DcCpSoDC.js +1 -0
  31. package/dist/Image-C8v5dCij.mjs +105 -0
  32. package/dist/Image-cHL85CXs.js +1 -0
  33. package/dist/ListItem-BrjxeGxz.js +1 -0
  34. package/dist/ListItem-X0T7a_z8.mjs +15 -0
  35. package/dist/MathDisplay-CESKZV46.js +1 -0
  36. package/dist/MathDisplay-CoGsFzXW.mjs +30 -0
  37. package/dist/MathInline-0xTZoIIq.mjs +30 -0
  38. package/dist/MathInline-C_1SJUVz.js +1 -0
  39. package/dist/McChoices-Aj394G5E.mjs +52 -0
  40. package/dist/McChoices-B4euzY7M.js +1 -0
  41. package/dist/McQuestion-Dq0aM5tC.js +1 -0
  42. package/dist/McQuestion-DvD-J47M.mjs +38 -0
  43. package/dist/McSolution-C5sTXz3y.mjs +24 -0
  44. package/dist/McSolution-N79CllH9.js +1 -0
  45. package/dist/MultipleChoice-DTCF3Q8m.js +1 -0
  46. package/dist/MultipleChoice-Dv-k1zUU.mjs +47 -0
  47. package/dist/OrderedList-B8v1gchv.mjs +17 -0
  48. package/dist/OrderedList-DMl3tvwP.js +1 -0
  49. package/dist/Paragraph-CzRSCJNr.js +1 -0
  50. package/dist/Paragraph-DGcZy8t_.mjs +16 -0
  51. package/dist/SlotNode-6OpoUcOa.mjs +10 -0
  52. package/dist/SlotNode-DMG0R6Vf.js +1 -0
  53. package/dist/TableCell-BY9gdldc.js +1 -0
  54. package/dist/TableCell-Bp52L368.mjs +20 -0
  55. package/dist/TableContainer-C5KXY6f7.js +1 -0
  56. package/dist/TableContainer-C9PhNGlz.mjs +29 -0
  57. package/dist/TableHeader-BTuqvorM.js +1 -0
  58. package/dist/TableHeader-C7KKz3e1.mjs +17 -0
  59. package/dist/TableRow-D4F6AKFt.js +1 -0
  60. package/dist/TableRow-OzpVq1qW.mjs +15 -0
  61. package/dist/Text-Br_pcGz4.mjs +78 -0
  62. package/dist/Text-DlUfrsNI.js +1 -0
  63. package/dist/emoji-Bk6FG72F.js +1 -0
  64. package/dist/emoji-CmOToDEU.mjs +3711 -0
  65. package/dist/index-D2CtpNvR.js +1 -0
  66. package/dist/index-DVmWCrQE.mjs +159 -0
  67. package/dist/index.cjs.js +1 -0
  68. package/dist/index.es.js +4 -0
  69. package/dist/katex-CS0ZfoxP.js +261 -0
  70. package/dist/katex-r9TeExgs.mjs +11690 -0
  71. package/dist/prosemirror-render.css +1 -0
  72. package/dist/types/apis/monitor.d.ts +9 -0
  73. package/dist/types/apis/tingwu.d.ts +14 -0
  74. package/dist/types/apis/types.d.ts +23 -0
  75. package/dist/types/components/TreeRecursive.vue.d.ts +7 -0
  76. package/dist/types/components/TreeRender.vue.d.ts +9 -0
  77. package/dist/types/components/collections/async/AsyncError.vue.d.ts +3 -0
  78. package/dist/types/components/collections/async/AsyncLoading.vue.d.ts +3 -0
  79. package/dist/types/components/collections/attachment/AttachmentBlock.vue.d.ts +7 -0
  80. package/dist/types/components/collections/attachment/AttachmentInline.vue.d.ts +7 -0
  81. package/dist/types/components/collections/attachment/AttachmentMenu.vue.d.ts +16 -0
  82. package/dist/types/components/collections/attachment/VideoDetail.vue.d.ts +7 -0
  83. package/dist/types/components/collections/attachment/index.d.ts +1 -0
  84. package/dist/types/components/collections/basic/Blockquote.vue.d.ts +17 -0
  85. package/dist/types/components/collections/basic/BulletList.vue.d.ts +17 -0
  86. package/dist/types/components/collections/basic/HardBreak.vue.d.ts +7 -0
  87. package/dist/types/components/collections/basic/Heading.vue.d.ts +17 -0
  88. package/dist/types/components/collections/basic/HorizontalRule.vue.d.ts +7 -0
  89. package/dist/types/components/collections/basic/ListItem.vue.d.ts +17 -0
  90. package/dist/types/components/collections/basic/OrderedList.vue.d.ts +17 -0
  91. package/dist/types/components/collections/basic/Paragraph.vue.d.ts +17 -0
  92. package/dist/types/components/collections/basic/Text.vue.d.ts +7 -0
  93. package/dist/types/components/collections/basic/index.d.ts +1 -0
  94. package/dist/types/components/collections/callout/Callout.vue.d.ts +7 -0
  95. package/dist/types/components/collections/callout/index.d.ts +1 -0
  96. package/dist/types/components/collections/code/CellOutput.vue.d.ts +7 -0
  97. package/dist/types/components/collections/code/CodeBlock.vue.d.ts +7 -0
  98. package/dist/types/components/collections/code/index.d.ts +1 -0
  99. package/dist/types/components/collections/fold/FoldBlock.vue.d.ts +7 -0
  100. package/dist/types/components/collections/fold/index.d.ts +1 -0
  101. package/dist/types/components/collections/grid/Grid.vue.d.ts +7 -0
  102. package/dist/types/components/collections/grid/index.d.ts +1 -0
  103. package/dist/types/components/collections/iframe/IFrame.vue.d.ts +7 -0
  104. package/dist/types/components/collections/iframe/index.d.ts +1 -0
  105. package/dist/types/components/collections/img/Image.vue.d.ts +7 -0
  106. package/dist/types/components/collections/img/index.d.ts +1 -0
  107. package/dist/types/components/collections/index.d.ts +1 -0
  108. package/dist/types/components/collections/math/MathDisplay.vue.d.ts +7 -0
  109. package/dist/types/components/collections/math/MathInline.vue.d.ts +7 -0
  110. package/dist/types/components/collections/math/index.d.ts +1 -0
  111. package/dist/types/components/collections/multipleChoice/McChoices.vue.d.ts +16 -0
  112. package/dist/types/components/collections/multipleChoice/McQuestion.vue.d.ts +7 -0
  113. package/dist/types/components/collections/multipleChoice/McSolution.vue.d.ts +8 -0
  114. package/dist/types/components/collections/multipleChoice/MultipleChoice.vue.d.ts +7 -0
  115. package/dist/types/components/collections/multipleChoice/index.d.ts +1 -0
  116. package/dist/types/components/collections/table/TableCell.vue.d.ts +17 -0
  117. package/dist/types/components/collections/table/TableContainer.vue.d.ts +17 -0
  118. package/dist/types/components/collections/table/TableHeader.vue.d.ts +17 -0
  119. package/dist/types/components/collections/table/TableRow.vue.d.ts +17 -0
  120. package/dist/types/components/collections/table/index.d.ts +1 -0
  121. package/dist/types/components/collections/utils.d.ts +2 -0
  122. package/dist/types/components/collections/wrapper/Doc.vue.d.ts +17 -0
  123. package/dist/types/components/collections/wrapper/SlotNode.vue.d.ts +13 -0
  124. package/dist/types/components/collections/wrapper/index.d.ts +1 -0
  125. package/dist/types/components/index.d.ts +1 -0
  126. package/dist/types/icons/Attachment/CardView.vue.d.ts +9 -0
  127. package/dist/types/icons/Attachment/Code/Bat.vue.d.ts +3 -0
  128. package/dist/types/icons/Attachment/Code/C.vue.d.ts +3 -0
  129. package/dist/types/icons/Attachment/Code/Cpp.vue.d.ts +3 -0
  130. package/dist/types/icons/Attachment/Code/Css.vue.d.ts +3 -0
  131. package/dist/types/icons/Attachment/Code/Go.vue.d.ts +3 -0
  132. package/dist/types/icons/Attachment/Code/Html.vue.d.ts +3 -0
  133. package/dist/types/icons/Attachment/Code/Java.vue.d.ts +3 -0
  134. package/dist/types/icons/Attachment/Code/Js.vue.d.ts +3 -0
  135. package/dist/types/icons/Attachment/Code/Json.vue.d.ts +3 -0
  136. package/dist/types/icons/Attachment/Code/Jsx.vue.d.ts +3 -0
  137. package/dist/types/icons/Attachment/Code/Md.vue.d.ts +3 -0
  138. package/dist/types/icons/Attachment/Code/Php.vue.d.ts +3 -0
  139. package/dist/types/icons/Attachment/Code/Python.vue.d.ts +3 -0
  140. package/dist/types/icons/Attachment/Code/Rb.vue.d.ts +3 -0
  141. package/dist/types/icons/Attachment/Code/Sh.vue.d.ts +3 -0
  142. package/dist/types/icons/Attachment/Code/Sql.vue.d.ts +3 -0
  143. package/dist/types/icons/Attachment/Code/Swift.vue.d.ts +3 -0
  144. package/dist/types/icons/Attachment/Code/Ts.vue.d.ts +3 -0
  145. package/dist/types/icons/Attachment/Code/Tsx.vue.d.ts +3 -0
  146. package/dist/types/icons/Attachment/Code/Vue.vue.d.ts +3 -0
  147. package/dist/types/icons/Attachment/Excel.vue.d.ts +3 -0
  148. package/dist/types/icons/Attachment/Eye.vue.d.ts +3 -0
  149. package/dist/types/icons/Attachment/FullScreen.vue.d.ts +3 -0
  150. package/dist/types/icons/Attachment/InlineView.vue.d.ts +9 -0
  151. package/dist/types/icons/Attachment/Pdf.vue.d.ts +3 -0
  152. package/dist/types/icons/Attachment/Ppt.vue.d.ts +3 -0
  153. package/dist/types/icons/Attachment/PreviewView.vue.d.ts +9 -0
  154. package/dist/types/icons/Attachment/UnknownFile.vue.d.ts +3 -0
  155. package/dist/types/icons/Attachment/VideoIcon.vue.d.ts +3 -0
  156. package/dist/types/icons/Attachment/VideoPlay.vue.d.ts +3 -0
  157. package/dist/types/icons/Attachment/Word.vue.d.ts +3 -0
  158. package/dist/types/icons/Code/Confirm.vue.d.ts +3 -0
  159. package/dist/types/icons/Code/Paste.vue.d.ts +3 -0
  160. package/dist/types/icons/Common/Choice.vue.d.ts +3 -0
  161. package/dist/types/icons/Common/Close.vue.d.ts +3 -0
  162. package/dist/types/icons/Common/Comment.vue.d.ts +3 -0
  163. package/dist/types/icons/Common/CopyAnchorLink.vue.d.ts +3 -0
  164. package/dist/types/icons/Common/Delete.vue.d.ts +3 -0
  165. package/dist/types/icons/Common/Download.vue.d.ts +3 -0
  166. package/dist/types/icons/Common/FoldClose.vue.d.ts +3 -0
  167. package/dist/types/icons/Common/FoldOpen.vue.d.ts +3 -0
  168. package/dist/types/icons/Common/Plate.vue.d.ts +3 -0
  169. package/dist/types/icons/Common/Question.vue.d.ts +3 -0
  170. package/dist/types/icons/Common/ShareTextLink.vue.d.ts +3 -0
  171. package/dist/types/index.d.ts +2 -0
  172. package/dist/types/types.d.ts +269 -0
  173. package/dist/types/utils/common.d.ts +1 -0
  174. package/dist/types/utils/emoji.d.ts +10 -0
  175. package/dist/types/utils/globalStatus.d.ts +16 -0
  176. package/dist/types/utils/shiki.d.ts +3 -0
  177. package/dist/types/utils/useAttachment.d.ts +8 -0
  178. package/package.json +29 -0
  179. package/src/apis/monitor.ts +8 -0
  180. package/src/apis/tingwu.ts +22 -0
  181. package/src/apis/types.ts +45 -0
  182. package/src/components/TreeRecursive.vue +47 -0
  183. package/src/components/TreeRender.vue +404 -0
  184. package/src/components/collections/async/AsyncError.vue +17 -0
  185. package/src/components/collections/async/AsyncLoading.vue +1 -0
  186. package/src/components/collections/attachment/AttachmentBlock.vue +561 -0
  187. package/src/components/collections/attachment/AttachmentInline.vue +90 -0
  188. package/src/components/collections/attachment/AttachmentMenu.vue +359 -0
  189. package/src/components/collections/attachment/VideoDetail.vue +375 -0
  190. package/src/components/collections/attachment/index.ts +6 -0
  191. package/src/components/collections/basic/Blockquote.vue +15 -0
  192. package/src/components/collections/basic/BulletList.vue +15 -0
  193. package/src/components/collections/basic/HardBreak.vue +11 -0
  194. package/src/components/collections/basic/Heading.vue +15 -0
  195. package/src/components/collections/basic/HorizontalRule.vue +11 -0
  196. package/src/components/collections/basic/ListItem.vue +15 -0
  197. package/src/components/collections/basic/OrderedList.vue +15 -0
  198. package/src/components/collections/basic/Paragraph.vue +19 -0
  199. package/src/components/collections/basic/Text.vue +73 -0
  200. package/src/components/collections/basic/index.ts +13 -0
  201. package/src/components/collections/callout/Callout.vue +77 -0
  202. package/src/components/collections/callout/index.ts +5 -0
  203. package/src/components/collections/code/CellOutput.vue +72 -0
  204. package/src/components/collections/code/CodeBlock.vue +83 -0
  205. package/src/components/collections/code/index.ts +6 -0
  206. package/src/components/collections/fold/FoldBlock.vue +130 -0
  207. package/src/components/collections/fold/index.ts +5 -0
  208. package/src/components/collections/grid/Grid.vue +70 -0
  209. package/src/components/collections/grid/index.ts +5 -0
  210. package/src/components/collections/iframe/IFrame.vue +19 -0
  211. package/src/components/collections/iframe/index.ts +5 -0
  212. package/src/components/collections/img/Image.vue +318 -0
  213. package/src/components/collections/img/index.ts +5 -0
  214. package/src/components/collections/index.ts +29 -0
  215. package/src/components/collections/math/MathDisplay.vue +42 -0
  216. package/src/components/collections/math/MathInline.vue +42 -0
  217. package/src/components/collections/math/index.ts +6 -0
  218. package/src/components/collections/multipleChoice/McChoices.vue +72 -0
  219. package/src/components/collections/multipleChoice/McQuestion.vue +61 -0
  220. package/src/components/collections/multipleChoice/McSolution.vue +47 -0
  221. package/src/components/collections/multipleChoice/MultipleChoice.vue +62 -0
  222. package/src/components/collections/multipleChoice/index.ts +8 -0
  223. package/src/components/collections/table/TableCell.vue +20 -0
  224. package/src/components/collections/table/TableContainer.vue +32 -0
  225. package/src/components/collections/table/TableHeader.vue +15 -0
  226. package/src/components/collections/table/TableRow.vue +15 -0
  227. package/src/components/collections/table/index.ts +8 -0
  228. package/src/components/collections/utils.ts +17 -0
  229. package/src/components/collections/wrapper/Doc.vue +15 -0
  230. package/src/components/collections/wrapper/SlotNode.vue +5 -0
  231. package/src/components/collections/wrapper/index.ts +6 -0
  232. package/src/components/index.ts +1 -0
  233. package/src/icons/Attachment/CardView.vue +21 -0
  234. package/src/icons/Attachment/Code/Bat.vue +26 -0
  235. package/src/icons/Attachment/Code/C.vue +26 -0
  236. package/src/icons/Attachment/Code/Cpp.vue +26 -0
  237. package/src/icons/Attachment/Code/Css.vue +34 -0
  238. package/src/icons/Attachment/Code/Go.vue +26 -0
  239. package/src/icons/Attachment/Code/Html.vue +34 -0
  240. package/src/icons/Attachment/Code/Java.vue +42 -0
  241. package/src/icons/Attachment/Code/Js.vue +26 -0
  242. package/src/icons/Attachment/Code/Json.vue +26 -0
  243. package/src/icons/Attachment/Code/Jsx.vue +30 -0
  244. package/src/icons/Attachment/Code/Md.vue +26 -0
  245. package/src/icons/Attachment/Code/Php.vue +26 -0
  246. package/src/icons/Attachment/Code/Python.vue +30 -0
  247. package/src/icons/Attachment/Code/Rb.vue +26 -0
  248. package/src/icons/Attachment/Code/Sh.vue +30 -0
  249. package/src/icons/Attachment/Code/Sql.vue +30 -0
  250. package/src/icons/Attachment/Code/Swift.vue +26 -0
  251. package/src/icons/Attachment/Code/Ts.vue +26 -0
  252. package/src/icons/Attachment/Code/Tsx.vue +30 -0
  253. package/src/icons/Attachment/Code/Vue.vue +24 -0
  254. package/src/icons/Attachment/Excel.vue +26 -0
  255. package/src/icons/Attachment/Eye.vue +15 -0
  256. package/src/icons/Attachment/FullScreen.vue +15 -0
  257. package/src/icons/Attachment/InlineView.vue +21 -0
  258. package/src/icons/Attachment/Pdf.vue +25 -0
  259. package/src/icons/Attachment/Ppt.vue +26 -0
  260. package/src/icons/Attachment/PreviewView.vue +21 -0
  261. package/src/icons/Attachment/UnknownFile.vue +26 -0
  262. package/src/icons/Attachment/VideoIcon.vue +25 -0
  263. package/src/icons/Attachment/VideoPlay.vue +15 -0
  264. package/src/icons/Attachment/Word.vue +26 -0
  265. package/src/icons/Code/Confirm.vue +38 -0
  266. package/src/icons/Code/Paste.vue +8 -0
  267. package/src/icons/Common/Choice.vue +28 -0
  268. package/src/icons/Common/Close.vue +15 -0
  269. package/src/icons/Common/Comment.vue +16 -0
  270. package/src/icons/Common/CopyAnchorLink.vue +15 -0
  271. package/src/icons/Common/Delete.vue +15 -0
  272. package/src/icons/Common/Download.vue +15 -0
  273. package/src/icons/Common/FoldClose.vue +9 -0
  274. package/src/icons/Common/FoldOpen.vue +9 -0
  275. package/src/icons/Common/Plate.vue +23 -0
  276. package/src/icons/Common/Question.vue +8 -0
  277. package/src/icons/Common/ShareTextLink.vue +15 -0
  278. package/src/index.ts +3 -0
  279. package/src/types.ts +236 -0
  280. package/src/utils/common.ts +6 -0
  281. package/src/utils/emoji.ts +3715 -0
  282. package/src/utils/globalStatus.ts +19 -0
  283. package/src/utils/shiki.ts +25 -0
  284. package/src/utils/useAttachment.ts +215 -0
  285. package/tsconfig.build.json +10 -0
  286. package/tsconfig.json +23 -0
  287. package/vite.config.ts +24 -0
@@ -0,0 +1,72 @@
1
+ <template>
2
+ <template v-if="outputType != 'empty'">
3
+ <div class="cell-ouput-container">
4
+ <template v-if="outputType === 'error'">
5
+ <pre class="jp-error monospace-text"><Ansi>{{ ensureString(value) }}</Ansi></pre>
6
+ </template>
7
+ <template v-else-if="outputType === 'stream'">
8
+ <pre class="monospace-text">{{ value }}</pre>
9
+ </template>
10
+ <template v-else-if="outputType === 'image'">
11
+ <img :src="value?.startsWith('http') ? value : 'data:image/png;base64,' + value" class="jp-img" />
12
+ </template>
13
+ <template v-else-if="outputType === 'html'">
14
+ <div v-html="value"></div>
15
+ </template>
16
+ <template v-else-if="outputType === 'text'">
17
+ <pre class="monospace-text">{{ value }}</pre>
18
+ </template>
19
+ </div>
20
+ </template>
21
+ </template>
22
+
23
+ <script setup lang="ts">
24
+ import Ansi from 'ansi-to-vue3';
25
+ import { computed } from 'vue';
26
+ import type { PMCellOutput, PMText } from '@datawhale/dipwap-types/index';
27
+
28
+ const { node } = defineProps<{
29
+ node: PMCellOutput;
30
+ }>();
31
+ const outputType = computed(() => node.attrs.outputType);
32
+ const value = computed(() => (node.content ? (node.content[0] as PMText).text : undefined));
33
+
34
+ function ensureString(maybeString: string[] | string | undefined, joinWith = '\n'): string {
35
+ if (!maybeString) return '';
36
+ if (typeof maybeString === 'string') return maybeString;
37
+ if (maybeString.join) return maybeString.join(joinWith);
38
+ return maybeString as unknown as string;
39
+ }
40
+ </script>
41
+
42
+ <style scoped>
43
+ pre {
44
+ margin: 0;
45
+ padding: 0 10px;
46
+ box-shadow: none;
47
+ background-color: transparent;
48
+ }
49
+
50
+ .cell-ouput-container {
51
+ margin: 20px 0 20px 10px;
52
+ }
53
+
54
+ .jp-error {
55
+ /* margin: 0;
56
+ padding: 0 10px; */
57
+ line-height: 14px;
58
+ font-size: 14px;
59
+ overflow-x: auto;
60
+ overflow-y: hidden;
61
+ }
62
+
63
+ .jp-img {
64
+ max-width: 50%;
65
+ height: auto;
66
+ }
67
+
68
+ .monospace-text {
69
+ font-family: monospace;
70
+ overflow-y: hidden;
71
+ }
72
+ </style>
@@ -0,0 +1,83 @@
1
+ <template>
2
+ <div class="code-block-wrapper">
3
+ <div class="code-block-container" v-html="code"></div>
4
+ <button class="copy-btn" @click="copyCode">
5
+ <Confirm v-if="copied" />
6
+ <Paste v-else />
7
+ </button>
8
+ </div>
9
+ </template>
10
+
11
+ <script setup lang="ts">
12
+ import { ref, watch } from 'vue';
13
+ import Confirm from '@datawhale/dipwap-render/icons/Code/Confirm.vue';
14
+ import Paste from '@datawhale/dipwap-render/icons/Code/Paste.vue';
15
+ import { getHighlighter, supportedLangs } from '@datawhale/dipwap-render/utils/shiki';
16
+ import type { PMCode, PMText } from '@datawhale/dipwap-types/index';
17
+
18
+ const { node } = defineProps<{
19
+ node: PMCode;
20
+ }>();
21
+
22
+ const code = ref('');
23
+ const rawText = ref('');
24
+ const copied = ref(false);
25
+
26
+ function resolveLanguage(lang: string | undefined | null) {
27
+ if (lang && supportedLangs.includes(lang)) {
28
+ return lang;
29
+ } else {
30
+ return 'text';
31
+ }
32
+ }
33
+
34
+ watch(
35
+ () => node,
36
+ () => {
37
+ if (node.content?.[0]) {
38
+ const text = (node.content[0] as PMText).text;
39
+ rawText.value = text.trim();
40
+
41
+ code.value = getHighlighter().codeToHtml(text, {
42
+ lang: resolveLanguage(node.attrs.language),
43
+ theme: 'min-light',
44
+ });
45
+ }
46
+ },
47
+ { immediate: true },
48
+ );
49
+
50
+ const copyCode = async () => {
51
+ try {
52
+ await navigator.clipboard.writeText(rawText.value);
53
+ copied.value = true;
54
+ setTimeout(() => {
55
+ copied.value = false;
56
+ }, 2000);
57
+ } catch (_e) {
58
+ alert('复制失败');
59
+ }
60
+ };
61
+ </script>
62
+
63
+ <style scoped lang="scss">
64
+ .code-block-wrapper {
65
+ position: relative;
66
+ .copy-btn {
67
+ position: absolute;
68
+ top: 8px;
69
+ right: 8px;
70
+ cursor: pointer;
71
+ border: none;
72
+ background-color: transparent;
73
+ padding: 0;
74
+ outline: none;
75
+ height: 20px;
76
+ width: 20px;
77
+ display: flex;
78
+ align-items: center;
79
+ justify-content: center;
80
+ color: #909090;
81
+ }
82
+ }
83
+ </style>
@@ -0,0 +1,6 @@
1
+ import { customDefineAsyncComponent } from '../utils';
2
+
3
+ export const codeMapper: Record<string, any> = {
4
+ codeBlock: customDefineAsyncComponent(() => import('./CodeBlock.vue')),
5
+ cellOutput: customDefineAsyncComponent(() => import('./CellOutput.vue')),
6
+ };
@@ -0,0 +1,130 @@
1
+ <template>
2
+ <div class="foldBlock-wrapper" :style="{ backgroundColor: node.attrs.bgColor, borderColor: node.attrs.bdColor }">
3
+ <div class="collapse-icon" @click="isFolded = !isFolded">
4
+ <component :is="!isFolded ? FoldOpen : FoldClose"></component>
5
+ </div>
6
+ <div class="foldBlock-icon">
7
+ {{ EMOJI_MAP[node.content[0].attrs.emoji] ? EMOJI_MAP[node.content[0].attrs.emoji] : EMOJI_MAP['whale'] }}
8
+ </div>
9
+ <div class="foldBlock-inner" :class="isFolded ? 'is-folded' : 'not-folded'">
10
+ <div class="foldBlock-header">
11
+ <TreeRecursive v-for="child in node.content[0].content" :node="child" :key="useId()" />
12
+ </div>
13
+ <div class="foldBlock-content">
14
+ <TreeRecursive v-for="child in node.content[1].content" :node="child" :key="useId()" />
15
+ </div>
16
+ </div>
17
+ </div>
18
+ </template>
19
+
20
+ <script setup lang="ts">
21
+ import { ref, useId } from 'vue';
22
+ import TreeRecursive from '@datawhale/dipwap-render/components/TreeRecursive.vue';
23
+ import FoldClose from '@datawhale/dipwap-render/icons/Common/FoldClose.vue';
24
+ import FoldOpen from '@datawhale/dipwap-render/icons/Common/FoldOpen.vue';
25
+ import { EMOJI_MAP } from '@datawhale/dipwap-render/utils/emoji';
26
+ import type { PMFoldBlock } from '@datawhale/dipwap-types/index';
27
+
28
+ const { node } = defineProps<{
29
+ node: PMFoldBlock;
30
+ }>();
31
+
32
+ const isFolded = ref(node.attrs.initFolded);
33
+ </script>
34
+
35
+ <style scoped lang="scss">
36
+ .foldBlock-wrapper {
37
+ position: relative;
38
+ margin: 16px 0;
39
+ padding: 16px;
40
+ border-radius: 6px;
41
+ display: flex;
42
+ flex-direction: row;
43
+ border-width: 1.5px;
44
+ border-style: solid;
45
+ .collapse-icon {
46
+ cursor: pointer;
47
+ font-size: 22px;
48
+ position: absolute;
49
+ top: calc(22px - 1.5px);
50
+ right: calc(4px - 1.5px);
51
+ padding: 4px 12px;
52
+ border-radius: 0 6px 0 0;
53
+ z-index: 1;
54
+ display: flex;
55
+ align-items: center;
56
+ }
57
+ .foldBlock-icon {
58
+ font-size: 22px;
59
+ width: 26px;
60
+ height: 26px;
61
+ display: flex;
62
+ justify-content: center;
63
+ align-items: center;
64
+ cursor: default;
65
+ &:hover {
66
+ background-color: rgba(0, 0, 0, 0.1);
67
+ border-radius: 4px;
68
+ }
69
+ }
70
+ .foldBlock-inner {
71
+ display: flex;
72
+ flex-direction: column;
73
+ flex: 1;
74
+ min-width: 0;
75
+ .foldBlock-header {
76
+ padding-left: 12px;
77
+ padding-right: 14px;
78
+ padding-bottom: 16px;
79
+ p {
80
+ font-size: 20px;
81
+ font-weight: 600;
82
+ }
83
+ justify-content: flex-start;
84
+ align-items: center;
85
+ }
86
+ .foldBlock-header > *:first-child,
87
+ .foldBlock-header > ul > li:first-child,
88
+ .foldBlock-header > ul > li:first-child > p:first-child,
89
+ .foldBlock-header > ol > li:first-child,
90
+ .foldBlock-header > ol > li:first-child > p:first-child {
91
+ margin-top: 0;
92
+ }
93
+ .foldBlock-header > *:last-child,
94
+ .foldBlock-header > ul > li:last-child,
95
+ .foldBlock-header > ul > li:last-child > p:last-child,
96
+ .foldBlock-header > ol > li:last-child,
97
+ .foldBlock-header > ol > li:last-child > p:last-child {
98
+ margin-bottom: 0;
99
+ }
100
+ &.is-folded {
101
+ .foldBlock-header {
102
+ padding-bottom: 0;
103
+ }
104
+ .foldBlock-content {
105
+ display: none;
106
+ }
107
+ }
108
+ .foldBlock-content {
109
+ padding-left: 12px;
110
+ overflow-x: auto;
111
+ }
112
+ .foldBlock-content > :deep(*:first-child),
113
+ .foldBlock-content > :deep(ul > li:first-child),
114
+ .foldBlock-content > :deep(ul > li:first-child > p:first-child),
115
+ .foldBlock-content > :deep(ol > li:first-child),
116
+ .foldBlock-content > :deep(ol > li:first-child > p:first-child),
117
+ .foldBlock-content > :deep(div:first-child > pre) {
118
+ margin-top: 0;
119
+ }
120
+ .foldBlock-content > :deep(*:last-child),
121
+ .foldBlock-content > :deep(ul > li:last-child),
122
+ .foldBlock-content > :deep(ul > li:last-child > p:last-child),
123
+ .foldBlock-content > :deep(ol > li:last-child),
124
+ .foldBlock-content > :deep(ol > li:last-child > p:last-child),
125
+ .foldBlock-content > :deep(div:last-child > pre) {
126
+ margin-bottom: 0;
127
+ }
128
+ }
129
+ }
130
+ </style>
@@ -0,0 +1,5 @@
1
+ import { customDefineAsyncComponent } from '../utils';
2
+
3
+ export const foldBlockMapper: Record<string, any> = {
4
+ foldBlock: customDefineAsyncComponent(() => import('./FoldBlock.vue')),
5
+ };
@@ -0,0 +1,70 @@
1
+ <template>
2
+ <div class="dipwap-grid">
3
+ <div v-for="column in node.content" :style="{ flex: column.attrs.colWidth / totalWidth }" :key="useId()"
4
+ class="dipwap-column">
5
+ <TreeRecursive v-for="child in column.content" :node="child" :key="useId()" />
6
+ </div>
7
+ </div>
8
+ </template>
9
+
10
+ <script setup lang="ts">
11
+ import { computed, useId } from 'vue';
12
+ import TreeRecursive from '@datawhale/dipwap-render/components/TreeRecursive.vue';
13
+ import type { PMGrid } from '@datawhale/dipwap-types/index';
14
+
15
+ const { node } = defineProps<{
16
+ node: PMGrid;
17
+ }>();
18
+
19
+ const totalWidth = computed(() => {
20
+ let total = 0;
21
+ for (const column of node.content) {
22
+ total += column.attrs.colWidth;
23
+ }
24
+ return total;
25
+ });
26
+ </script>
27
+
28
+ <style lang="scss" scoped>
29
+ .dipwap-grid {
30
+ display: flex;
31
+ flex-direction: row;
32
+ width: calc(100% - 8px);
33
+ gap: 12px;
34
+ margin: 16px 0;
35
+
36
+ &:hover {
37
+ .dipwap-column {
38
+ background-color: rgba(100, 106, 115, 0.05);
39
+ }
40
+ }
41
+
42
+ .dipwap-column {
43
+ position: relative;
44
+ border-radius: 8px;
45
+ min-width: 50px;
46
+ padding: 12px;
47
+ background-color: transparent;
48
+ transition: background-color 0.2s ease;
49
+
50
+ > :nth-child(1) {
51
+ margin-top: 0;
52
+ }
53
+
54
+ > :nth-last-child(1) {
55
+ margin-bottom: 0;
56
+ }
57
+ }
58
+ }
59
+
60
+ @media screen and (max-width: 768px) {
61
+ .dipwap-grid {
62
+ flex-direction: column !important;
63
+ width: 100%;
64
+ }
65
+
66
+ .dipwap-column {
67
+ flex: none !important;
68
+ }
69
+ }
70
+ </style>
@@ -0,0 +1,5 @@
1
+ import { customDefineAsyncComponent } from '../utils';
2
+
3
+ export const gridMapper: Record<string, any> = {
4
+ grid: customDefineAsyncComponent(() => import('./Grid.vue')),
5
+ };
@@ -0,0 +1,19 @@
1
+ <template>
2
+ <iframe class="iframe-wrapper" :src="node.attrs.src"></iframe>
3
+ </template>
4
+
5
+ <script setup lang="ts">
6
+ import type { PMIFrame } from '@datawhale/dipwap-types/index';
7
+
8
+ const { node } = defineProps<{
9
+ node: PMIFrame;
10
+ }>();
11
+ </script>
12
+
13
+ <style scoped lang="scss">
14
+ iframe.iframe-wrapper {
15
+ width: 100%;
16
+ margin: 16px 0;
17
+ aspect-ratio: 16 / 9;
18
+ }
19
+ </style>
@@ -0,0 +1,5 @@
1
+ import { customDefineAsyncComponent } from '../utils';
2
+
3
+ export const iframeMapper: Record<string, any> = {
4
+ iframe: customDefineAsyncComponent(() => import('./IFrame.vue')),
5
+ };