fix: 修复剪切板

src/App.vue

@@ -4,9 +4,18 @@
       <router-view />
     </div>
     <!-- Target -->
-    <input id="clipboardInput" :value="clipboardValue" />
+    <input
+      id="clipboardInput"
+      :value="clipboardValue"
+      style="opacity: 0; position: absolute; top: 0; left: 0"
+    />
     <!-- Trigger -->
-    <button class="clipboardBtn" ref="btn" data-clipboard-target="#clipboardInput"></button>
+    <button
+      class="clipboardBtn"
+      ref="btn"
+      data-clipboard-target="#clipboardInput"
+      style="opacity: 0; position: absolute; top: 0; left: 0"
+    ></button>
   </van-config-provider>
 </template>
 
@@ -249,5 +258,316 @@ export default defineComponent({
     line-height: 1.5rem !important;
     letter-spacing: -0.01562em !important;
   }
+
+  word-wrap: break-word;
+  white-space: break-spaces;
+  > * {
+    box-sizing: border-box;
+  }
+
+  p {
+    margin-bottom: 0;
+    margin-top: 0;
+    outline: none;
+    line-height: 40px;
+    min-height: 40px;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
+    margin-top: 20px;
+    margin-bottom: 20px;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  ul,
+  ol {
+    counter-reset: none;
+    list-style-type: none;
+    margin-bottom: 0;
+    margin-left: 5px;
+    margin-top: 0;
+    padding-bottom: 5px;
+    padding-left: 0;
+    padding-top: 5px;
+  }
+
+  ol li > p {
+    margin: 0;
+
+    &:first-child::before {
+      content: counter(el-tiptap-counter) "." !important;
+      display: inline-block;
+      left: -5px;
+      line-height: 1;
+      margin-left: -24px;
+      position: relative;
+      text-align: right;
+      top: 0;
+      width: 24px;
+    }
+  }
+
+  ul li > p {
+    &:first-child::before {
+      content: "\2022";
+      text-align: center;
+      display: inline-block;
+      left: -5px;
+      line-height: 1;
+      margin-left: -24px;
+      position: relative;
+      text-align: right;
+      top: 0;
+      width: 24px;
+    }
+  }
+
+  ol {
+    counter-reset: el-tiptap-counter;
+
+    li > p:first-child::before {
+      counter-increment: el-tiptap-counter;
+    }
+  }
+
+  a {
+    color: #409eff;
+    cursor: pointer;
+  }
+
+  blockquote {
+    border-left: 5px solid #edf2fc;
+    border-radius: 2px;
+    color: #606266;
+    margin: 10px 0;
+    padding-left: 1em;
+  }
+
+  code {
+    background-color: #d9ecff;
+    border-radius: 4px;
+    color: #409eff;
+    display: inline-block;
+    font-size: 14px;
+    font-weight: 700;
+    padding: 0 8px;
+  }
+  @primary-text-color: #303133;
+  pre {
+    background-color: @primary-text-color;
+    color: #d9ecff;
+    font-size: 16px;
+    overflow-x: auto;
+    padding: 14px 20px;
+    margin: 10px 0;
+    border-radius: 5px;
+
+    code {
+      background-color: transparent;
+      border-radius: 0;
+      color: inherit;
+      display: block;
+      font-family: "Menlo,Monaco,Consolas,Courier,monospace";
+      font-size: inherit;
+      font-weight: normal;
+      padding: 0;
+    }
+  }
+
+  ul[data-type="todo_list"] {
+    margin-left: 5px;
+
+    .todo-item {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      margin-bottom: 0;
+
+      &[data-text-align="right"] {
+        justify-content: flex-end !important;
+      }
+
+      &[data-text-align="center"] {
+        justify-content: center !important;
+      }
+
+      &[data-text-align="justify"] {
+        text-align: space-between !important;
+      }
+
+      .todo-content {
+        padding-left: 10px;
+
+        > p {
+          font-size: 16px;
+
+          &:last-of-type {
+            margin-bottom: 0;
+          }
+        }
+      }
+
+      &--done {
+        > .todo-checkbox {
+          color: #409eff;
+        }
+
+        > .todo-content > p {
+          color: #409eff;
+          text-decoration: line-through;
+        }
+      }
+    }
+  }
+
+  hr {
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+
+  // @for $i from 1 through 7 /* max-indent */ {
+  //   $indent-margin-base: 30px;
+
+  //   *[data-indent="#{$i}"] {
+  //     margin-left: $indent-margin-base * $i !important;
+  //   }
+  // }
+
+  th {
+    font-weight: 500;
+    text-align: left;
+  }
+
+  .column-resize-handle {
+    background-color: #b3d8ff;
+    bottom: 0;
+    pointer-events: none;
+    position: absolute;
+    right: -2px;
+    top: 0;
+    width: 4px;
+    z-index: 20;
+  }
+
+  .resize-cursor {
+    cursor: ew-resize;
+    cursor: col-resize;
+  }
+
+  h1 {
+    font-size: 1.4rem !important;
+    font-weight: 300 !important;
+    line-height: 1.5rem !important;
+    letter-spacing: -0.01562em !important;
+  }
+  h2 {
+    font-size: 1.2rem !important;
+    font-weight: 300 !important;
+    line-height: 1.5rem !important;
+    letter-spacing: -0.01562em !important;
+  }
+  h3 {
+    font-size: 1rem !important;
+    font-weight: 300 !important;
+    line-height: 1.5rem !important;
+    letter-spacing: -0.01562em !important;
+  }
+
+  > * + * {
+    margin-top: 0.75em;
+  }
+
+  ul,
+  ol {
+    padding: 0 1rem;
+  }
+
+  li {
+    line-height: 2em !important;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
+
+  code {
+    background-color: rgba(#616161, 0.1);
+    color: #616161;
+  }
+
+  pre {
+    background: #0d0d0d;
+    color: #fff;
+    font-family: "JetBrainsMono", monospace;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+
+    code {
+      color: inherit;
+      padding: 0;
+      background: none;
+      font-size: 0.8rem;
+    }
+  }
+
+  mark {
+    background-color: #faf594;
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  hr {
+    margin: 1rem 0;
+  }
+
+  blockquote {
+    padding-left: 1rem;
+    border-left: 2px solid rgba(#0d0d0d, 0.1);
+  }
+
+  hr {
+    border: none;
+    border-top: 2px solid rgba(#0d0d0d, 0.1);
+    margin: 2rem 0;
+  }
+
+  ul[data-type="taskList"] {
+    list-style: none;
+    padding: 0;
+
+    li {
+      display: flex;
+      align-items: center;
+
+      > label {
+        flex: 0 0 auto;
+        margin-right: 0.5rem;
+        user-select: none;
+      }
+
+      > div {
+        flex: 1 1 auto;
+      }
+    }
+  }
 }
 </style>