@datawhale/prosemirror-render 0.0.1 → 0.0.2

package/src/components/collections/code/CellOutput.vue

@@ -1,72 +0,0 @@
-<template>
-  <template v-if="outputType != 'empty'">
-    <div class="cell-ouput-container">
-      <template v-if="outputType === 'error'">
-        <pre class="jp-error monospace-text"><Ansi>{{ ensureString(value) }}</Ansi></pre>
-      </template>
-      <template v-else-if="outputType === 'stream'">
-        <pre class="monospace-text">{{ value }}</pre>
-      </template>
-      <template v-else-if="outputType === 'image'">
-        <img :src="value?.startsWith('http') ? value : 'data:image/png;base64,' + value" class="jp-img" />
-      </template>
-      <template v-else-if="outputType === 'html'">
-        <div v-html="value"></div>
-      </template>
-      <template v-else-if="outputType === 'text'">
-        <pre class="monospace-text">{{ value }}</pre>
-      </template>
-    </div>
-  </template>
-</template>
-
-<script setup lang="ts">
-import Ansi from 'ansi-to-vue3';
-import { computed } from 'vue';
-import type { PMCellOutput, PMText } from '@datawhale/dipwap-types/index';
-
-const { node } = defineProps<{
-  node: PMCellOutput;
-}>();
-const outputType = computed(() => node.attrs.outputType);
-const value = computed(() => (node.content ? (node.content[0] as PMText).text : undefined));
-
-function ensureString(maybeString: string[] | string | undefined, joinWith = '\n'): string {
-  if (!maybeString) return '';
-  if (typeof maybeString === 'string') return maybeString;
-  if (maybeString.join) return maybeString.join(joinWith);
-  return maybeString as unknown as string;
-}
-</script>
-
-<style scoped>
-pre {
-  margin: 0;
-  padding: 0 10px;
-  box-shadow: none;
-  background-color: transparent;
-}
-
-.cell-ouput-container {
-  margin: 20px 0 20px 10px;
-}
-
-.jp-error {
-  /* margin: 0;
-  padding: 0 10px; */
-  line-height: 14px;
-  font-size: 14px;
-  overflow-x: auto;
-  overflow-y: hidden;
-}
-
-.jp-img {
-  max-width: 50%;
-  height: auto;
-}
-
-.monospace-text {
-  font-family: monospace;
-  overflow-y: hidden;
-}
-</style>

package/src/components/collections/code/CodeBlock.vue

@@ -1,83 +0,0 @@
-<template>
-  <div class="code-block-wrapper">
-    <div class="code-block-container" v-html="code"></div>
-    <button class="copy-btn" @click="copyCode">
-      <Confirm v-if="copied" />
-      <Paste v-else />
-    </button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, watch } from 'vue';
-import Confirm from '@datawhale/dipwap-render/icons/Code/Confirm.vue';
-import Paste from '@datawhale/dipwap-render/icons/Code/Paste.vue';
-import { getHighlighter, supportedLangs } from '@datawhale/dipwap-render/utils/shiki';
-import type { PMCode, PMText } from '@datawhale/dipwap-types/index';
-
-const { node } = defineProps<{
-  node: PMCode;
-}>();
-
-const code = ref('');
-const rawText = ref('');
-const copied = ref(false);
-
-function resolveLanguage(lang: string | undefined | null) {
-  if (lang && supportedLangs.includes(lang)) {
-    return lang;
-  } else {
-    return 'text';
-  }
-}
-
-watch(
-  () => node,
-  () => {
-    if (node.content?.[0]) {
-      const text = (node.content[0] as PMText).text;
-      rawText.value = text.trim();
-
-      code.value = getHighlighter().codeToHtml(text, {
-        lang: resolveLanguage(node.attrs.language),
-        theme: 'min-light',
-      });
-    }
-  },
-  { immediate: true },
-);
-
-const copyCode = async () => {
-  try {
-    await navigator.clipboard.writeText(rawText.value);
-    copied.value = true;
-    setTimeout(() => {
-      copied.value = false;
-    }, 2000);
-  } catch (_e) {
-    alert('复制失败');
-  }
-};
-</script>
-
-<style scoped lang="scss">
-.code-block-wrapper {
-  position: relative;
-  .copy-btn {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    cursor: pointer;
-    border: none;
-    background-color: transparent;
-    padding: 0;
-    outline: none;
-    height: 20px;
-    width: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #909090;
-  }
-}
-</style>

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

@@ -1,6 +0,0 @@
-import { customDefineAsyncComponent } from '../utils';
-
-export const codeMapper: Record<string, any> = {
-  codeBlock: customDefineAsyncComponent(() => import('./CodeBlock.vue')),
-  cellOutput: customDefineAsyncComponent(() => import('./CellOutput.vue')),
-};

package/src/components/collections/fold/FoldBlock.vue

@@ -1,130 +0,0 @@
-<template>
-  <div class="foldBlock-wrapper" :style="{ backgroundColor: node.attrs.bgColor, borderColor: node.attrs.bdColor }">
-    <div class="collapse-icon" @click="isFolded = !isFolded">
-      <component :is="!isFolded ? FoldOpen : FoldClose"></component>
-    </div>
-    <div class="foldBlock-icon">
-      {{ EMOJI_MAP[node.content[0].attrs.emoji] ? EMOJI_MAP[node.content[0].attrs.emoji] : EMOJI_MAP['whale'] }}
-    </div>
-    <div class="foldBlock-inner" :class="isFolded ? 'is-folded' : 'not-folded'">
-      <div class="foldBlock-header">
-        <TreeRecursive v-for="child in node.content[0].content" :node="child" :key="useId()" />
-      </div>
-      <div class="foldBlock-content">
-        <TreeRecursive v-for="child in node.content[1].content" :node="child" :key="useId()" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, useId } from 'vue';
-import TreeRecursive from '@datawhale/dipwap-render/components/TreeRecursive.vue';
-import FoldClose from '@datawhale/dipwap-render/icons/Common/FoldClose.vue';
-import FoldOpen from '@datawhale/dipwap-render/icons/Common/FoldOpen.vue';
-import { EMOJI_MAP } from '@datawhale/dipwap-render/utils/emoji';
-import type { PMFoldBlock } from '@datawhale/dipwap-types/index';
-
-const { node } = defineProps<{
-  node: PMFoldBlock;
-}>();
-
-const isFolded = ref(node.attrs.initFolded);
-</script>
-
-<style scoped lang="scss">
-.foldBlock-wrapper {
-  position: relative;
-  margin: 16px 0;
-  padding: 16px;
-  border-radius: 6px;
-  display: flex;
-  flex-direction: row;
-  border-width: 1.5px;
-  border-style: solid;
-  .collapse-icon {
-    cursor: pointer;
-    font-size: 22px;
-    position: absolute;
-    top: calc(22px - 1.5px);
-    right: calc(4px - 1.5px);
-    padding: 4px 12px;
-    border-radius: 0 6px 0 0;
-    z-index: 1;
-    display: flex;
-    align-items: center;
-  }
-  .foldBlock-icon {
-    font-size: 22px;
-    width: 26px;
-    height: 26px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: default;
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.1);
-      border-radius: 4px;
-    }
-  }
-  .foldBlock-inner {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    min-width: 0;
-    .foldBlock-header {
-      padding-left: 12px;
-      padding-right: 14px;
-      padding-bottom: 16px;
-      p {
-        font-size: 20px;
-        font-weight: 600;
-      }
-      justify-content: flex-start;
-      align-items: center;
-    }
-    .foldBlock-header > *:first-child,
-    .foldBlock-header > ul > li:first-child,
-    .foldBlock-header > ul > li:first-child > p:first-child,
-    .foldBlock-header > ol > li:first-child,
-    .foldBlock-header > ol > li:first-child > p:first-child {
-      margin-top: 0;
-    }
-    .foldBlock-header > *:last-child,
-    .foldBlock-header > ul > li:last-child,
-    .foldBlock-header > ul > li:last-child > p:last-child,
-    .foldBlock-header > ol > li:last-child,
-    .foldBlock-header > ol > li:last-child > p:last-child {
-      margin-bottom: 0;
-    }
-    &.is-folded {
-      .foldBlock-header {
-        padding-bottom: 0;
-      }
-      .foldBlock-content {
-        display: none;
-      }
-    }
-    .foldBlock-content {
-      padding-left: 12px;
-      overflow-x: auto;
-    }
-    .foldBlock-content > :deep(*:first-child),
-    .foldBlock-content > :deep(ul > li:first-child),
-    .foldBlock-content > :deep(ul > li:first-child > p:first-child),
-    .foldBlock-content > :deep(ol > li:first-child),
-    .foldBlock-content > :deep(ol > li:first-child > p:first-child),
-    .foldBlock-content > :deep(div:first-child > pre) {
-      margin-top: 0;
-    }
-    .foldBlock-content > :deep(*:last-child),
-    .foldBlock-content > :deep(ul > li:last-child),
-    .foldBlock-content > :deep(ul > li:last-child > p:last-child),
-    .foldBlock-content > :deep(ol > li:last-child),
-    .foldBlock-content > :deep(ol > li:last-child > p:last-child),
-    .foldBlock-content > :deep(div:last-child > pre) {
-      margin-bottom: 0;
-    }
-  }
-}
-</style>

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

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

package/src/components/collections/grid/Grid.vue

@@ -1,70 +0,0 @@
-<template>
-  <div class="dipwap-grid">
-    <div v-for="column in node.content" :style="{ flex: column.attrs.colWidth / totalWidth }" :key="useId()"
-      class="dipwap-column">
-      <TreeRecursive v-for="child in column.content" :node="child" :key="useId()" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, useId } from 'vue';
-import TreeRecursive from '@datawhale/dipwap-render/components/TreeRecursive.vue';
-import type { PMGrid } from '@datawhale/dipwap-types/index';
-
-const { node } = defineProps<{
-  node: PMGrid;
-}>();
-
-const totalWidth = computed(() => {
-  let total = 0;
-  for (const column of node.content) {
-    total += column.attrs.colWidth;
-  }
-  return total;
-});
-</script>
-
-<style lang="scss" scoped>
-.dipwap-grid {
-  display: flex;
-  flex-direction: row;
-  width: calc(100% - 8px);
-  gap: 12px;
-  margin: 16px 0;
-
-  &:hover {
-    .dipwap-column {
-      background-color: rgba(100, 106, 115, 0.05);
-    }
-  }
-
-  .dipwap-column {
-    position: relative;
-    border-radius: 8px;
-    min-width: 50px;
-    padding: 12px;
-    background-color: transparent;
-    transition: background-color 0.2s ease;
-
-    > :nth-child(1) {
-      margin-top: 0;
-    }
-
-    > :nth-last-child(1) {
-      margin-bottom: 0;
-    }
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .dipwap-grid {
-    flex-direction: column !important;
-    width: 100%;
-  }
-
-  .dipwap-column {
-    flex: none !important;
-  }
-}
-</style>

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

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

package/src/components/collections/iframe/IFrame.vue

@@ -1,19 +0,0 @@
-<template>
-  <iframe class="iframe-wrapper" :src="node.attrs.src"></iframe>
-</template>
-
-<script setup lang="ts">
-import type { PMIFrame } from '@datawhale/dipwap-types/index';
-
-const { node } = defineProps<{
-  node: PMIFrame;
-}>();
-</script>
-
-<style scoped lang="scss">
-iframe.iframe-wrapper {
-  width: 100%;
-  margin: 16px 0;
-  aspect-ratio: 16 / 9;
-}
-</style>

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

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