@datawhale/prosemirror-render 0.0.1 → 0.0.3

package/src/components/TreeRender.vue

@@ -1,404 +0,0 @@
-<template>
-  <div class="tree-render">
-    <TreeRecursive :node="node" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { provide, watch } from 'vue';
-import { type HTTPClientType, axiosKey } from '@datawhale/dipwap-render/apis/types';
-import type { PMNode } from '@datawhale/dipwap-types/index';
-import { getAllImageNodes, imageNodes, imageNodesKey } from '../utils/globalStatus';
-import TreeRecursive from './TreeRecursive.vue';
-
-const { node, axios } = defineProps<{
-  node: PMNode;
-  axios: HTTPClientType;
-}>();
-
-provide(imageNodesKey, imageNodes);
-provide(axiosKey, axios);
-
-watch(
-  () => node,
-  (newNode) => {
-    imageNodes.value = getAllImageNodes(newNode);
-  },
-);
-</script>
-
-<style lang="scss">
-.tree-render {
-  mark {
-    color: inherit;
-    background-color: inherit;
-  }
-  min-height: calc(100vh - 232.25px);
-  outline: none;
-  width: 100%;
-  box-sizing: border-box;
-  ::selection {
-    background-color: rgba(20, 86, 240, 0.18);
-    /* 选中背景颜色 */
-  }
-  color: rgb(31, 35, 41);
-  letter-spacing: 0.28px;
-  word-wrap: break-word;
-  font-family:
-    LarkHackSafariFont,
-    LarkEmojiFont,
-    LarkChineseQuote,
-    -apple-system,
-    BlinkMacSystemFont,
-    Helvetica Neue,
-    Tahoma,
-    PingFang SC,
-    Microsoft Yahei,
-    Arial,
-    Hiragino Sans GB,
-    sans-serif,
-    Apple Color Emoji,
-    Segoe UI Emoji,
-    Segoe UI Symbol,
-    Noto Color Emoji;
-  code {
-    font-family: 'Source Code Pro', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', 'Microsoft Yahei';
-  }
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-weight: 600;
-    letter-spacing: -0.52px;
-    code {
-      box-sizing: border-box;
-      margin: 0 3px;
-      padding: 1px 2px;
-      background-color: rgb(245, 246, 247);
-      border-radius: 4px;
-      border: 1px solid rgb(222, 224, 227);
-    }
-  }
-  & .doc > h1:first-child {
-    margin-top: 22px;
-  }
-  h1 {
-    margin-top: 26px;
-    margin-bottom: 10px;
-    font-size: 26px;
-    line-height: 36.4px;
-  }
-  h2 {
-    margin-top: 22px;
-    margin-bottom: 8px;
-    font-size: 22px;
-    line-height: 30.8px;
-  }
-  h3 {
-    margin-top: 20px;
-    margin-bottom: 8px;
-    font-size: 20px;
-    line-height: 28px;
-  }
-  h4 {
-    margin-top: 18px;
-    margin-bottom: 8px;
-    font-size: 18px;
-    line-height: 25.2px;
-  }
-  h5 {
-    margin-top: 18px;
-    margin-bottom: 8px;
-    font-size: 16px;
-    line-height: 22.4px;
-  }
-  h6 {
-    margin-top: 16px;
-    margin-bottom: 8px;
-    font-size: 16px;
-    line-height: 22.4px;
-  }
-  hr {
-    border: none;
-    margin: 8px 0;
-    height: 26px;
-    position: relative;
-    &::after {
-      content: '';
-      position: absolute;
-      top: 50%;
-      left: 0;
-      width: 100%;
-      height: 1px;
-      background-color: rgba(31, 35, 41, 0.15);
-      transform: translateY(-50%);
-    }
-  }
-  blockquote {
-    border-left: 2px solid rgb(187, 191, 196);
-    padding-left: 12px;
-    p {
-      color: rgb(100, 106, 115);
-    }
-  }
-  span.math-src {
-    div[contenteditable='true'] {
-      outline: none;
-    }
-  }
-  p {
-    margin: 8px 0;
-    line-height: 26px;
-    font-size: 16px;
-    font-weight: 400;
-    white-space-collapse: break-spaces;
-    text-wrap-mode: wrap;
-    a {
-      color: rgb(51, 109, 244);
-      text-decoration: none;
-      cursor: pointer;
-      &:hover {
-        text-decoration: underline;
-        text-decoration-color: rgb(51, 109, 244);
-      }
-    }
-    strong {
-      font-weight: 700;
-    }
-    em {
-      font-style: italic;
-    }
-    del {
-      text-decoration: line-through;
-    }
-    u {
-      text-decoration: underline;
-    }
-    code {
-      box-sizing: border-box;
-      margin: 0 3px;
-      padding: 1px 2px;
-      background-color: rgb(245, 246, 247);
-      border-radius: 4px;
-      border: 1px solid rgb(222, 224, 227);
-    }
-  }
-  ul {
-    margin-left: 22px;
-    margin-top: 8px;
-    margin-bottom: 8px;
-    & > li::marker {
-      content: '•  ';
-      color: rgb(20, 86, 240);
-      font-size: 16px;
-    }
-    ul {
-      & > li::marker {
-        content: '◦  ';
-        color: rgb(20, 86, 240);
-        font-size: 16px;
-      }
-      ul {
-        & > li::marker {
-          content: '▪  ';
-          color: rgb(20, 86, 240);
-          font-size: 16px;
-        }
-        ul {
-          & > li::marker {
-            content: '•  ';
-            color: rgb(20, 86, 240);
-            font-size: 16px;
-          }
-          ul {
-            & > li::marker {
-              content: '◦  ';
-              color: rgb(20, 86, 240);
-              font-size: 16px;
-            }
-          }
-        }
-      }
-    }
-  }
-  li {
-    margin: 8px 0;
-  }
-  ol {
-    margin-left: 29px;
-    list-style-type: decimal;
-    li::marker {
-      color: rgb(20, 86, 240);
-      font-family: 'Helvetica Neue', Consolas;
-    }
-    ol {
-      list-style-type: lower-alpha;
-      ol {
-        list-style-type: lower-roman;
-        ol {
-          list-style-type: decimal;
-          ol {
-            list-style-type: lower-alpha;
-          }
-        }
-      }
-    }
-  }
-  .tiptap .shiki {
-    border-radius: 4px;
-    padding: 8px;
-  }
-  .tiptap .shiki:focus-visible {
-    outline: 2px solid transparent;
-    outline-offset: 2px;
-  }
-  pre {
-    padding: 24px;
-    border-radius: 6px;
-    margin: 16px 0;
-    outline: none;
-    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
-    overflow-x: auto;
-    background-color: rgb(245, 246, 247);
-    code {
-      width: 100%;
-      outline: none;
-      line-height: 22px;
-      font-size: 14px;
-      span {
-        text-wrap-mode: nowrap;
-      }
-    }
-  }
-  .tableWrapper {
-    margin: 24px 0;
-    max-width: 100%;
-    overflow-x: auto;
-  }
-  table {
-    th,
-    td {
-      min-width: 39px;
-      border: 1px solid rgb(222, 224, 227);
-      padding: 12px;
-      position: relative;
-      :not(a.grip-column):not(a.grip-row):nth-child(1),
-      a.grip-column + :not(a.grip-row):nth-child(2),
-      a.grip-row + :not(a.grip-column):nth-child(2),
-      a.grip-column + *:nth-child(3),
-      a.grip-row + *:nth-child(3) {
-        margin-top: 0;
-      }
-      :not(a.grip-column):not(a.grip-row):nth-last-child(1),
-      :not(a.grip-column):not(a.grip-row):nth-last-child(2) {
-        margin-bottom: 0;
-      }
-    }
-    .column-resize-handle {
-      background-color: rgb(20, 86, 240);
-      bottom: 0px;
-      pointer-events: none;
-      position: absolute;
-      right: -1px;
-      top: 0;
-      width: 2px;
-    }
-    .selectedCell {
-      background-color: rgba(20, 86, 240, 0.18) !important;
-      // filter: brightness(0.9);
-    }
-    .grip-column,
-    .grip-row {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: absolute;
-      z-index: 10;
-      background-color: rgb(239, 240, 241);
-      cursor: pointer;
-    }
-    .grip-column {
-      width: 100%;
-      height: 8px;
-      left: 0;
-      top: -8px;
-      margin-left: -1px;
-      margin-top: -1px;
-      border-left: 1px solid rgb(239, 240, 241);
-      border-right: 1px solid rgb(239, 240, 241);
-      &:hover,
-      &.selected {
-        z-index: 15;
-        &::before {
-          content: '';
-          width: 10px;
-        }
-      }
-      &:hover {
-        border-left: 1px solid rgb(227, 227, 227);
-        border-right: 1px solid rgb(227, 227, 227);
-        background-color: rgb(227, 227, 227);
-        &::before {
-          border-bottom: 2px dotted rgb(95, 95, 95);
-        }
-      }
-      &.selected {
-        border-left: 1px solid rgb(20, 86, 240);
-        border-right: 1px solid rgb(20, 86, 240);
-        background-color: rgb(20, 86, 240);
-        &::before {
-          border-bottom: 2px dotted rgb(251, 251, 251);
-        }
-      }
-      &.first {
-        border-top-left-radius: 4px;
-      }
-      &.last {
-        border-top-right-radius: 4px;
-      }
-    }
-    .grip-row {
-      width: 8px;
-      height: 100%;
-      top: 0;
-      left: -8px;
-      margin-top: -1px;
-      margin-left: -1px;
-      border-top: 1px solid rgb(239, 240, 241);
-      border-bottom: 1px solid rgb(239, 240, 241);
-      &:hover,
-      &.selected {
-        z-index: 15;
-        &::before {
-          content: '';
-          height: 10px;
-        }
-      }
-      &:hover {
-        border-top: 1px solid rgb(227, 227, 227);
-        border-bottom: 1px solid rgb(227, 227, 227);
-        background-color: rgb(227, 227, 227);
-        &::before {
-          border-left: 2px dotted rgb(95, 95, 95);
-        }
-      }
-      &.selected {
-        border-top: 1px solid rgb(20, 86, 240);
-        border-bottom: 1px solid rgb(20, 86, 240);
-        background-color: rgb(20, 86, 240);
-        &::before {
-          border-left: 2px dotted rgb(251, 251, 251);
-        }
-      }
-      &.first {
-        border-top-left-radius: 4px;
-      }
-      &.last {
-        border-bottom-left-radius: 4px;
-      }
-    }
-  }
-}
-</style>

package/src/components/collections/async/AsyncError.vue

@@ -1,17 +0,0 @@
-<template>
-  <div class="error-wrapper">组件加载失败</div>
-</template>
-
-<style scoped>
-.error-wrapper {
-  width: 160px;
-  height: 90px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: rgb(136, 46, 46);
-  font-size: 12px;
-  border: 1px solid #888;
-  border-radius: 8px;
-}
-</style>

package/src/components/collections/async/AsyncLoading.vue

@@ -1 +0,0 @@
-<template>loading...</template>