@datawhale/prosemirror-render 0.0.1 → 0.0.2

package/src/components/collections/img/Image.vue

@@ -1,318 +0,0 @@
-<template>
-  <div class="image-container" :style="{ alignItems: node.attrs.align }">
-    <div class="image-wrapper" :style="{ width: restrictedWidth }">
-      <img :src="node.attrs.src" :alt="node.attrs.caption ? node.attrs.caption : '图片'" @click="enlarge" />
-    </div>
-    <input type="text" v-if="node.attrs.caption" class="image-caption" :value="node.attrs.caption" disabled />
-    <Teleport to="body">
-      <Transition name="modal">
-        <div v-show="showModal" class="modal-mask" @click="closeModal">
-          <div class="modal-close">×</div>
-          <img class="modal-body" :src="currentImageNode?.attrs.src" :width="currentImgWidth" :height="currentImgHeight"
-            alt="图片" />
-          <div class="modal-footer">
-            <div class="prev-image" :class="{ disabled: currentIndex === 0 }" @click.stop="prevImage">‹</div>
-            <div class="zoom-out" :class="{ disabled: percentage <= 10 }" @click.stop="zoomOut">-</div>
-            <div class="percentage">{{ percentage.toFixed(0) }}%</div>
-            <div class="zoom-in" :class="{ disabled: percentage >= 500 }" @click.stop="zoomIn">+</div>
-            <div class="next-image" :class="{ disabled: currentIndex === imageNodes.length - 1 }"
-              @click.stop="nextImage">
-              ›
-            </div>
-          </div>
-        </div>
-      </Transition>
-    </Teleport>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { type Ref, computed, inject, ref } from 'vue';
-import { imageNodesKey } from '@datawhale/dipwap-render/utils/globalStatus';
-import type { PMImg } from '@datawhale/dipwap-types/index';
-
-const { node } = defineProps<{
-  node: PMImg;
-}>();
-
-const imageNodes = inject<Ref<PMImg[]>>(imageNodesKey, ref([]));
-
-const restrictedWidth = computed(() => {
-  const attrsWidth = node.attrs.width as string;
-  if (attrsWidth && attrsWidth.endsWith('%') && !attrsWidth.startsWith('0')) {
-    const curWidth = parseFloat(attrsWidth.slice(0, -1));
-    return Math.max(Math.min(curWidth, 100), 10) + '%';
-  } else {
-    return '80%';
-  }
-});
-
-// 图片放大相关功能实现
-const imgWidth = ref<number>(0); // 原始图片宽度
-const imgHeight = ref<number>(0); // 原始图片高度
-const showModal = ref<boolean>(false);
-const percentage = ref<number>(100); // 放大百分比
-const currentImageNode = ref<PMImg | null>(null); // 当前浏览的图片节点
-const currentImgWidth = ref<number>(0); // 当前浏览的图片的宽度
-const currentImgHeight = ref<number>(0); // 当前浏览的图片的高度
-const currentIndex = ref<number>(0); // 当前浏览的图片的索引
-
-async function updateImageInfo(index: number) {
-  currentImageNode.value = imageNodes.value[index]!;
-  const img = new Image();
-  img.src = imageNodes.value[index]!.attrs.src;
-  await img.decode();
-  imgWidth.value = img.naturalWidth;
-  imgHeight.value = img.height;
-  if (!imgWidth.value || !imgHeight.value) return;
-  calculateSize();
-}
-
-const enlarge = async () => {
-  // 初始化放大时，设置 `currentImage`并计算percentage
-  currentIndex.value = imageNodes.value.findIndex((imgNode) => imgNode.attrs.src === node.attrs.src);
-  await updateImageInfo(currentIndex.value);
-  showModal.value = true;
-  document.body.style.overflow = 'hidden'; // 打开模态框时禁止页面内容滚动
-};
-
-// 图片切换功能实现
-const prevImage = async () => {
-  if (currentIndex.value > 0) {
-    currentIndex.value -= 1;
-    await updateImageInfo(currentIndex.value);
-  }
-};
-
-const nextImage = async () => {
-  if (currentIndex.value < imageNodes.value.length - 1) {
-    currentIndex.value += 1;
-    await updateImageInfo(currentIndex.value);
-  }
-};
-
-const calculateSize = () => {
-  // 视口宽高
-  const windowWidth = window.innerWidth;
-  const windowHeight = window.innerHeight;
-  // 计算按原比例放大后的图片宽高（适应屏幕大小）
-  // 如果宽度为90vw时，高度等比放大后仍在屏幕高度90%的范围内，则使宽度为90vw，并计算等比放大后高度
-  // 如果宽度为90vw时，高度等比放大后超出屏幕高度的90%，则使高度为屏幕宽度的90%，并计算等比放大后的宽度
-  const tempHeight = ((windowWidth * 0.9) / imgWidth.value) * imgHeight.value;
-  if (tempHeight <= windowHeight * 0.9) {
-    currentImgWidth.value = windowWidth * 0.9;
-    currentImgHeight.value = tempHeight;
-  } else {
-    currentImgWidth.value = ((windowHeight * 0.9) / imgHeight.value) * imgWidth.value;
-    currentImgHeight.value = windowHeight * 0.9;
-  }
-  percentage.value = (currentImgWidth.value / imgWidth.value) * 100;
-};
-
-const zoomOut = () => {
-  if (percentage.value <= 10) return;
-  // 使百分比为10的倍数
-  if (percentage.value % 10 !== 0) {
-    percentage.value = Math.floor(percentage.value / 10) * 10;
-  } else {
-    percentage.value -= 10;
-  }
-  currentImgWidth.value = (percentage.value / 100) * imgWidth.value;
-  currentImgHeight.value = (percentage.value / 100) * imgHeight.value;
-};
-
-const zoomIn = () => {
-  if (percentage.value >= 500) return;
-  if (percentage.value % 10 !== 0) {
-    percentage.value = Math.ceil(percentage.value / 10) * 10;
-  } else {
-    percentage.value += 10;
-  }
-  currentImgWidth.value = (percentage.value / 100) * imgWidth.value;
-  currentImgHeight.value = (percentage.value / 100) * imgHeight.value;
-};
-
-const closeModal = () => {
-  showModal.value = false;
-  document.body.style.overflow = '';
-};
-</script>
-
-<style scoped lang="scss">
-.image-container {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 16px;
-
-  // ========== 图片及图片的高亮框 ==========
-  .image-wrapper {
-    position: relative;
-    box-sizing: border-box;
-    border: 1px solid transparent;
-    margin-bottom: 8px;
-    max-width: 100%;
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      border: 1px solid;
-      border-color: inherit;
-      pointer-events: none;
-    }
-
-    &:hover {
-      cursor: zoom-in;
-
-      &::before {
-        border: 2px solid #c2d4ff;
-      }
-    }
-
-    img {
-      width: 100%;
-      height: 100%;
-      -webkit-touch-callout: none;
-    }
-  }
-
-  .image-caption {
-    all: unset;
-    display: inline;
-    text-align: center;
-    font-size: 16px;
-    margin: 0 auto;
-    background-color: transparent;
-    width: 100%;
-    transition: border-color 0.3s ease;
-    color: rgb(100, 106, 115);
-  }
-}
-
-/** 以下为放大效果 **/
-.modal-mask {
-  position: fixed;
-  z-index: 100000;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  transition: opacity 0.3s ease;
-
-  .modal-close {
-    position: absolute;
-    top: 2rem;
-    right: 2rem;
-    width: 3rem;
-    height: 3rem;
-    line-height: 2.8rem;
-    text-align: center;
-    color: #fff;
-    font-size: 2rem;
-    font-weight: bold;
-    border-radius: 50%;
-    z-index: 9999;
-    background-color: rgba(0, 0, 0, 0.5);
-    cursor: pointer;
-    user-select: none;
-  }
-
-  .modal-body {
-    display: block;
-    transition: all 0.3s ease;
-  }
-
-  .modal-footer {
-    position: absolute;
-    bottom: 20px;
-    left: calc(50vw - 80px);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 160px;
-    height: 40px;
-    background-color: rgba(0, 0, 0, 0.5);
-    cursor: default;
-    user-select: none;
-
-    .zoom-in,
-    .zoom-out {
-      width: 39px;
-      height: 100%;
-      line-height: 37px;
-      text-align: center;
-      color: #fff;
-      font-size: 30px;
-    }
-
-    .zoom-in {
-      border-left: 1px solid #fff;
-    }
-
-    .zoom-out {
-      border-right: 1px solid #fff;
-    }
-
-    .disabled {
-      color: rgb(100, 100, 100);
-      cursor: not-allowed;
-    }
-
-    .percentage {
-      width: 80px;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      color: #fff;
-    }
-
-    .prev-image,
-    .next-image {
-      width: 39px;
-      height: 100%;
-      line-height: 37px;
-      text-align: center;
-      color: #fff;
-      font-size: 30px;
-      cursor: pointer;
-      user-select: none;
-    }
-
-    .prev-image {
-      border-right: 1px solid #fff;
-    }
-
-    .next-image {
-      border-left: 1px solid #fff;
-    }
-
-    .disabled {
-      color: rgb(100, 100, 100);
-      cursor: not-allowed;
-    }
-  }
-}
-
-.modal-enter-from {
-  opacity: 0;
-}
-
-.modal-leave-to {
-  opacity: 0;
-}
-
-.modal-enter-from .modal-body,
-.modal-leave-to .modal-body {
-  -webkit-transform: scale(1.1);
-  transform: scale(1.1);
-}
-</style>

package/src/components/collections/img/index.ts

@@ -1,5 +0,0 @@
-import { customDefineAsyncComponent } from '../utils';
-
-export const imgMapper: Record<string, any> = {
-  image: customDefineAsyncComponent(() => import('./Image.vue')),
-};

package/src/components/collections/index.ts

@@ -1,29 +0,0 @@
-// 这里各个mapper的import和使用都按照字典序排序
-// 以后有新增时也按照字典序排序，好看一点，也便于查找
-import { attachmentMapper } from './attachment/index.js';
-import { basicMapper } from './basic/index.js';
-import { calloutMapper } from './callout/index.js';
-import { codeMapper } from './code/index.js';
-import { foldBlockMapper } from './fold/index.js';
-import { gridMapper } from './grid/index.js';
-import { iframeMapper } from './iframe/index.js';
-import { imgMapper } from './img/index.js';
-import { mathMapper } from './math/index.js';
-import { multipleChoiceMapper } from './multipleChoice/index.js';
-import { tableMapper } from './table/index.js';
-import { wrapperMapper } from './wrapper/index.js';
-
-export const componentMapper: Record<string, any> = {
-  ...attachmentMapper, // 附件和视频类型
-  ...basicMapper, // 基础类型，包括各种字体样式
-  ...calloutMapper, // 高亮块
-  ...codeMapper, // 代码块
-  ...foldBlockMapper, // 折叠块
-  ...gridMapper, // 分栏
-  ...imgMapper, // 图片
-  ...mathMapper, // 数学公式
-  ...multipleChoiceMapper, //选择题
-  ...tableMapper, // 表格
-  ...wrapperMapper, // 容器
-  ...iframeMapper, // iframe
-};

package/src/components/collections/math/MathDisplay.vue

@@ -1,42 +0,0 @@
-<template>
-  <div class="math-display">
-    <div class="math-render" v-html="content"></div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import type { PMMath } from '@datawhale/dipwap-types/index';
-
-const { node } = defineProps<{
-  node: PMMath;
-}>();
-
-const content = ref('');
-
-try {
-  const { default: katex } = await import('katex');
-  content.value = katex.renderToString(node.content[0]!.text, {
-    displayMode: true,
-    strict: (errorCode: string) => (errorCode === 'unicodeTextInMathMode' ? 'ignore' : 'warn'),
-  });
-} catch (error) {
-  console.error(error);
-}
-</script>
-
-<style scoped lang="scss">
-.math-display {
-  min-width: 0.95em;
-  min-height: 0.95em;
-  font-size: 0.95em;
-  font-family:
-    Consolas,
-    Ubuntu Mono,
-    monospace;
-
-  .math-render :deep(.katex-display) {
-    margin: 0;
-  }
-}
-</style>

package/src/components/collections/math/MathInline.vue

@@ -1,42 +0,0 @@
-<template>
-  <span class="math-inline">
-    <span class="math-render" v-html="content"></span>
-  </span>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import type { PMInlineMath } from '@datawhale/dipwap-types/index';
-
-const { node } = defineProps<{
-  node: PMInlineMath;
-}>();
-
-const content = ref('');
-
-try {
-  const { default: katex } = await import('katex');
-  content.value = katex.renderToString(node.content[0]!.text, {
-    displayMode: false,
-    strict: (errorCode: string) => (errorCode === 'unicodeTextInMathMode' ? 'ignore' : 'warn'),
-  });
-} catch (error) {
-  console.error(error);
-}
-</script>
-
-<style scoped lang="scss">
-.math-inline {
-  min-width: 1em;
-  min-height: 1em;
-  font-size: 0.95em;
-  font-family:
-    Consolas,
-    Ubuntu Mono,
-    monospace;
-  .math-render {
-    display: inline-block;
-    font-size: 0.85em;
-  }
-}
-</style>

package/src/components/collections/math/index.ts

@@ -1,6 +0,0 @@
-import { customDefineAsyncComponent } from '../utils';
-
-export const mathMapper: Record<string, any> = {
-  math_inline: customDefineAsyncComponent(() => import('./MathInline.vue')),
-  math_display: customDefineAsyncComponent(() => import('./MathDisplay.vue')),
-};

package/src/components/collections/multipleChoice/McChoices.vue

@@ -1,72 +0,0 @@
-<template>
-  <div class="mc-choices-header">
-    <div class="choices-header-bar">
-      <Choice class="header-icon" />
-      <span class="header-text">选项</span>
-    </div>
-    <div class="choice-list">
-      <label class="choice-item" v-for="(child, index) in node.content" :key="index">
-        <input type="radio" :value="index" v-model="selectedModel" :disabled="submitted" />
-        <span class="prefix">{{ String.fromCharCode(65 + index) }}.</span>
-        <TreeRecursive :node="child" />
-      </label>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import TreeRecursive from '@datawhale/dipwap-render/components/TreeRecursive.vue';
-import Choice from '@datawhale/dipwap-render/icons/Common/Choice.vue';
-import type { PMMCChoices } from '@datawhale/dipwap-types/index';
-
-defineProps<{
-  node: PMMCChoices;
-  submitted: boolean;
-}>();
-
-const selectedModel = defineModel<number | null>('selected');
-</script>
-
-<style scoped lang="scss">
-.mc-choices-header {
-  .choices-header-bar {
-    display: flex;
-    align-items: center;
-    padding: 10px 15px;
-    border-radius: 5px;
-    background-color: #e1e1e8;
-    .header-icon {
-      height: 24px;
-      width: 24px;
-      margin-right: 8px;
-    }
-    .header-text {
-      font-size: 18px;
-      font-weight: 700;
-      font-family: Arial, sans-serif;
-    }
-  }
-  .choice-list {
-    display: flex;
-    flex-direction: column;
-    background-color: #fff;
-    padding: 8px 0px;
-
-    .choice-item {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: flex-start;
-      padding: 0px 12px;
-      input[type='radio'] {
-        cursor: pointer;
-      }
-      .prefix {
-        font-weight: bold;
-        width: 1.5em;
-        margin-left: 12px;
-      }
-    }
-  }
-}
-</style>

package/src/components/collections/multipleChoice/McQuestion.vue

@@ -1,61 +0,0 @@
-<template>
-  <div class="mc-question-header">
-    <div class="question-header">
-      <Question class="icon" />
-      <span class="header-text">题目</span>
-    </div>
-    <div class="question-content">
-      <TreeRecursive v-for="child in node.content" :node="child" :key="useId()" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useId } from 'vue';
-import TreeRecursive from '@datawhale/dipwap-render/components/TreeRecursive.vue';
-import Question from '@datawhale/dipwap-render/icons/Common/Question.vue';
-import type { PMMCQuestion } from '@datawhale/dipwap-types/index';
-
-defineProps<{
-  node: PMMCQuestion;
-}>();
-</script>
-
-<style scoped lang="scss">
-.mc-question-header {
-  display: flex;
-  flex-direction: column;
-  border-radius: 12px;
-  .question-header {
-    display: flex;
-    align-items: center;
-    padding: 10px 15px;
-    background-color: #e1e1e8;
-    border-radius: 12px;
-    .icon {
-      height: 24px;
-      width: 24px;
-      margin-right: 8px;
-    }
-
-    .header-text {
-      font-size: 18px;
-      font-weight: 700;
-      font-family: Arial, sans-serif;
-    }
-  }
-
-  .question-content {
-    padding: 12px 16px;
-    background-color: #fff;
-
-    :deep(p:first-child) {
-      margin-top: 0;
-    }
-
-    :deep(p:last-child) {
-      margin-bottom: 0;
-    }
-  }
-}
-</style>

package/src/components/collections/multipleChoice/McSolution.vue

@@ -1,47 +0,0 @@
-<template>
-  <div class="mc-solution">
-    <div :class="['solution-content', correct ? 'correct' : 'wrong']">
-      <TreeRecursive v-for="child in node.content" :node="child" :key="useId()" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useId } from 'vue';
-import TreeRecursive from '@datawhale/dipwap-render/components/TreeRecursive.vue';
-import type { PMMCSolution } from '@datawhale/dipwap-types/index';
-
-defineProps<{
-  node: PMMCSolution;
-  correct: boolean;
-}>();
-</script>
-
-<style scoped lang="scss">
-.mc-solution {
-  margin: 12px;
-  .solution-content {
-    border-radius: 4px;
-    padding: 12px 16px;
-    font-size: 14px;
-    color: #333;
-
-    :deep(p:first-child) {
-      margin-top: 0;
-    }
-
-    :deep(p:last-child) {
-      margin-bottom: 0;
-    }
-
-    &.correct {
-      background-color: #eef8ea;
-      border: 1.5px solid #83c17e;
-    }
-    &.wrong {
-      background-color: #fdecea;
-      border: 1.5px solid #f08b83;
-    }
-  }
-}
-</style>

package/src/components/collections/multipleChoice/MultipleChoice.vue

@@ -1,62 +0,0 @@
-<template>
-  <div class="multiple-choice">
-    <McQuestion :node="node.content[0]" />
-
-    <McChoices v-model:selected="selected" :node="node.content[1]" :submitted="submitted" />
-
-    <div class="submit-area" v-if="!submitted">
-      <button class="submit-button" :disabled="selected === null" @click="submit">提交答案</button>
-    </div>
-
-    <McSolution v-if="submitted" :node="node.content[2]" :correct="isCorrect" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import type { PMMultipleChoice } from '@datawhale/dipwap-types/index';
-import McChoices from './McChoices.vue';
-import McQuestion from './McQuestion.vue';
-import McSolution from './McSolution.vue';
-
-const props = defineProps<{
-  node: PMMultipleChoice;
-}>();
-
-const selected = ref<number | null>(null);
-const submitted = ref(false);
-const isCorrect = ref(false);
-
-const submit = () => {
-  submitted.value = true;
-  const correctIndex = props.node.content[1].attrs.correctIndex;
-  isCorrect.value = selected.value === correctIndex;
-};
-</script>
-
-<style scoped lang="scss">
-.multiple-choice {
-  border: 2px solid rgb(128, 124, 124);
-  border-radius: 8px;
-  margin: 20px 0;
-  background-color: rgb(225, 225, 232);
-  .submit-area {
-    padding: 12px;
-  }
-
-  .submit-button {
-    padding: 6px 12px;
-    background-color: #4caf50;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    font-weight: bold;
-    cursor: pointer;
-
-    &:disabled {
-      background-color: #929292;
-      cursor: not-allowed;
-    }
-  }
-}
-</style>

package/src/components/collections/multipleChoice/index.ts

@@ -1,8 +0,0 @@
-import { customDefineAsyncComponent } from '../utils';
-
-export const multipleChoiceMapper: Record<string, any> = {
-  multipleChoice: customDefineAsyncComponent(() => import('./MultipleChoice.vue')),
-  mcQuestion: customDefineAsyncComponent(() => import('./McQuestion.vue')),
-  mcChoices: customDefineAsyncComponent(() => import('./McChoices.vue')),
-  mcSolution: customDefineAsyncComponent(() => import('./McSolution.vue')),
-};