diff --git a/package.json b/package.json
index 4aefa1e..c720510 100644
--- a/package.json
+++ b/package.json
@@ -19,25 +19,35 @@
     "@bytemd/plugin-medium-zoom": "^1.17.2",
     "@bytemd/plugin-mermaid": "^1.17.2",
     "@bytemd/vue-next": "^1.17.2",
+    "@tiptap/extension-code-block-lowlight": "^2.0.0-beta.73",
+    "@tiptap/extension-highlight": "^2.0.0-beta.35",
+    "@tiptap/extension-image": "^2.0.0-beta.30",
+    "@tiptap/extension-table": "^2.0.0-beta.54",
+    "@tiptap/extension-table-cell": "^2.0.0-beta.23",
+    "@tiptap/extension-table-header": "^2.0.0-beta.25",
+    "@tiptap/extension-table-row": "^2.0.0-beta.22",
+    "@tiptap/starter-kit": "^2.0.0-beta.191",
+    "@tiptap/vue-3": "^2.0.0-beta.96",
     "@vicons/ionicons5": "^0.12.0",
     "@vueuse/core": "^8.0.1",
     "animate.css": "^4.1.1",
     "axios": "^0.26.1",
     "cropperjs": "^1.5.12",
     "echarts": "^5.3.1",
+    "github-markdown-css": "^5.1.0",
     "happykit": "^2.0.1",
+    "highlight.js": "^11.6.0",
     "jszip": "^3.10.0",
+    "katex": "^0.16.0",
+    "lowlight": "^2.7.0",
+    "naive-ui": "^2.32.2",
     "print-js": "^1.6.0",
     "qrcode": "^1.5.0",
     "qs": "^6.10.5",
     "remixicon": "^2.5.0",
     "vue": "^3.2.25",
     "vue-router": "^4.0.13",
-    "xgplayer": "^2.31.6",
-    "github-markdown-css": "^5.1.0",
-    "highlight.js": "^11.6.0",
-    "katex": "^0.16.0",
-    "naive-ui": "^2.32.2"
+    "xgplayer": "^2.31.6"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.2.0",
diff --git a/src/components/HbAdminAdjustableContainer.vue b/src/components/HbAdminAdjustableContainer.vue
index 7bb203a..c194939 100644
--- a/src/components/HbAdminAdjustableContainer.vue
+++ b/src/components/HbAdminAdjustableContainer.vue
@@ -5,20 +5,21 @@ import {onMounted, ref, watch} from "vue";
 const props = defineProps({
   height: {
     type: Number,
-    default: 250
+    default: 200
   },
   width: {
     type: Number,
-    default: 500
+    default: 200
   }
 })
 
-const cHeight = ref(250)
-const cWidth = ref(500)
+const cHeight = ref(0)
+const cWidth = ref(0)
 const iHeight = ref(250)
 const iWidth = ref(500)
 const equalRatio = ref(false)
 let canDrag = false    //是否允许拖拽
+const showDrag = ref(false)    //是否显示拖动框
 let mouseDownState = false    //鼠标是否按下
 let moveTemp = [0, 0]    //上一次拖拽位置的缓存
 const ACWrap = ref()
@@ -55,52 +56,100 @@ function handleWidthChange() {
 }
 
 onMounted(() => {
-  cHeight.value = props.height
-  cWidth.value = props.width
-  iHeight.value = props.height
-  iWidth.value = props.width
+  const offsetHeight = AdjustableContainer.value.offsetHeight
+  const offsetWidth = AdjustableContainer.value.offsetWidth
+  if (offsetHeight === 0 || offsetWidth === 0) {
+    cHeight.value = props.height
+    cWidth.value = props.width
+    iHeight.value = props.height
+    iWidth.value = props.width
+  } else {
+    cHeight.value = offsetHeight
+    cWidth.value = offsetWidth
+    iHeight.value = offsetHeight
+    iWidth.value = offsetWidth
+  }
   AdjustableContainer.value.style.height = cHeight.value + 'px'
   AdjustableContainer.value.style.width = cWidth.value + 'px'
 
   ACWrap.value.addEventListener('mousemove', e => {
     const diffX = ACWrap.value.offsetWidth - e.offsetX
     const diffY = ACWrap.value.offsetHeight - e.offsetY
-    if (diffX <= 20 && diffX >= -20 && diffY <= 20 && diffY >= -20) {
+    if (diffX <= 10 && diffX > 1 && diffY <= 10 && diffY > 1) {
       ACWrap.value.style.cursor = 'nw-resize'
       canDrag = true
     } else {
-      ACWrap.value.style.cursor = 'default'
+      if (!mouseDownState) {
+        ACWrap.value.style.cursor = 'default'
+        canDrag = false
+      }
+    }
+    showDrag.value = true
+    ACWrap.value.style.border = '2px solid #2080F0'
+  })
+  ACWrap.value.addEventListener('mouseenter', e => {
+    showDrag.value = true
+    ACWrap.value.style.border = '2px solid #2080F0'
+  })
+  ACWrap.value.addEventListener('mouseleave', e => {
+    if (!mouseDownState) {
+      showDrag.value = false
+      ACWrap.value.style.border = '2px solid #fff'
     }
   })
 
   ACWrap.value.addEventListener('mousedown', e => {
-    mouseDownState = true
-    moveTemp = [e.offsetX, e.offsetY]
-
+    if (canDrag) {
+      mouseDownState = true
+      moveTemp = [e.pageX, e.pageY]
+      ACWrap.value.style.userSelect = 'none'
+    }
   })
 
-  document.body.addEventListener('mousemove', e => {
+  document.onkeydown = function (e) {
+    if (e.ctrlKey) {
+      equalRatio.value = true
+    }
+  }
+
+  document.onkeyup = function (e) {
+    if (!e.ctrlKey) {
+
+      equalRatio.value = false
+    }
+  }
+
+  document.addEventListener('mousemove', e => {
     if (canDrag && mouseDownState) {
-      const diffX = e.offsetX - moveTemp[0]
-      const diffY = e.offsetY - moveTemp[1]
-      moveTemp = [e.offsetX, e.offsetY]
+      let diffX = e.pageX - moveTemp[0]
+      let diffY = e.pageY - moveTemp[1]
+      moveTemp = [e.pageX, e.pageY]
+
       if (equalRatio.value) {
         const ratio = iWidth.value / iHeight.value
         cWidth.value = cWidth.value + diffX
         cHeight.value =  cWidth.value / ratio
       } else {
-        cHeight.value = cHeight.value + diffY
-        cWidth.value = cWidth.value + diffX
+        const calcH = cHeight.value + diffY
+        const calcW = cWidth.value + diffX
+        cHeight.value = calcH > 15 ? calcH : 15
+        cWidth.value = calcW > 15 ? calcW : 15
       }
 
+      document.body.style.userSelect = 'none'
       AdjustableContainer.value.style.height = cHeight.value + 'px'
       AdjustableContainer.value.style.width = cWidth.value + 'px'
     }
   })
 
-  document.body.addEventListener('mouseup', e => {
+  document.addEventListener('mouseup', e => {
     canDrag = false
     mouseDownState = false
+    ACWrap.value.style.cursor = 'default'
+    ACWrap.value.style.userSelect = 'default'
+    ACWrap.value.style.border = '2px solid #fff'
+    document.body.style.userSelect = 'default'
+    showDrag.value = false
   })
 })
 
@@ -108,10 +157,11 @@ onMounted(() => {
 
 <template>
   <div class="hb-ac-wrap" ref="ACWrap">
-    <div ref="AdjustableContainer">
+    <div ref="AdjustableContainer" class="hb-ac-content">
       <slot/>
     </div>
-    <div class="hb-ac-bar">
+    <div class="hb-ac-drag-block" v-show="showDrag"></div>
+    <div class="hb-ac-bar" v-show="false">
       <div>
         <div>高度(px)</div>
         <div>
@@ -131,10 +181,14 @@ onMounted(() => {
 
 <style scoped>
 .hb-ac-wrap{
+  max-width: 100%;
   width:auto;
   display:inline-block !important;
-  padding: 5px;
-  border: 1px solid #aaa;
+  margin: 10px;
+  border: 2px solid #fff;
+  position: relative;
+}
+.hb-ac-content{
   position: relative;
 }
 .hb-ac-bar{
@@ -147,4 +201,14 @@ onMounted(() => {
 .hb-ac-input{
   width: 50px;
 }
+.hb-ac-drag-block{
+  height: 8px;
+  width: 8px;
+  position: absolute;
+  right: -4px;
+  bottom: -4px;
+  pointer-events: none;
+  background-color: #2080F0;
+  border: 2px solid #fff;
+}
 </style>
diff --git a/src/components/tiptap/HbAdminTipTap.vue b/src/components/tiptap/HbAdminTipTap.vue
new file mode 100644
index 0000000..a89bfb5
--- /dev/null
+++ b/src/components/tiptap/HbAdminTipTap.vue
@@ -0,0 +1,447 @@
+<script setup>
+import {useEditor, EditorContent, VueNodeViewRenderer} from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import HbTiptapMenuBar from "./components/HbTiptapMenuBar"
+import Highlight from '@tiptap/extension-highlight'
+import HbVideo from './extension/hb-video'
+import HbImage from './extension/hb-image'
+import Table from '@tiptap/extension-table'
+import TableRow from '@tiptap/extension-table-row'
+import TableCell from '@tiptap/extension-table-cell'
+import TableHeader from '@tiptap/extension-table-header'
+import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
+
+CodeBlockLowlight.name = 'code-block'
+import 'highlight.js/styles/vs.css'
+
+// load all highlight.js languages
+import {lowlight} from 'lowlight'
+
+//扩展组件
+import HbTiptapCodeBlockComponent from './components/HbTiptapCodeBlockComponent.vue'
+import HbTiptapVideoComponent from './components/HbTiptapVideoComponent.vue'
+import HbTiptapImageComponent from './components/HbTiptapImageComponent.vue'
+import {onBeforeUnmount, onMounted, watch} from "vue";
+
+const CustomTableCell = TableCell.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      // 添加新的属性
+      backgroundColor: {
+        default: null,
+        parseHTML: (element) => element.getAttribute('data-background-color'),
+        renderHTML: (attributes) => ({
+          'data-background-color': attributes.backgroundColor,
+          style: `background-color: ${attributes.backgroundColor}`
+        })
+      }
+    }
+  }
+})
+let editor
+editor = useEditor({
+  content: `<p><video src="https://media.w3.org/2010/05/sintel/trailer.mp4"></video><img src="1"></p>`,
+  extensions: [
+    StarterKit,
+    Highlight.configure({multicolor: true}),
+    Table.configure({
+      resizable: true
+    }),
+    TableRow,
+    TableHeader,
+    CustomTableCell,
+    CodeBlockLowlight
+        .extend({
+          addNodeView() {
+            return VueNodeViewRenderer(HbTiptapCodeBlockComponent)
+          },
+        }).configure({lowlight}),
+    HbImage.extend({
+      addNodeView() {
+        return VueNodeViewRenderer(HbTiptapImageComponent)
+      }
+    }),
+    HbVideo.extend({
+      addNodeView() {
+        return VueNodeViewRenderer(HbTiptapVideoComponent)
+      }
+    })
+  ],
+  onUpdate: () => {
+    // HTML
+    emit('update:modelValue', editor.value.getHTML())
+
+    // JSON
+    // this.$emit('update:modelValue', this.editor.getJSON())
+  },
+})
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '',
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+watch(()=>props.modelValue,(value)=>{
+  // HTML
+  const isSame =editor.value.getHTML() === value
+
+  // JSON
+  // const isSame = JSON.stringify(this.editor.getJSON()) === JSON.stringify(value)
+
+  if (isSame) {
+    return
+  }
+
+  editor.value.commands.setContent(value, false)
+})
+
+onMounted(()=>{
+  emit('update:modelValue', editor.value.getHTML())
+})
+
+onBeforeUnmount(()=>{
+  editor.destroy()
+})
+
+</script>
+
+<template>
+  <div class="editor" v-if="editor">
+    <hb-tiptap-menu-bar class="editor-header" :editor="editor"></hb-tiptap-menu-bar>
+    <editor-content class="editor-body markdown-body" :editor="editor"/>
+  </div>
+</template>
+
+<style scoped>
+.editor {
+  border: 1px solid #cccccc;
+  border-radius: 3px;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  height: 100%;
+}
+
+.editor-header {
+  border-bottom: 1px solid #cccccc;
+  box-sizing: border-box;
+}
+
+.editor-body {
+  box-sizing: border-box;
+  flex: 1 1 auto;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  padding: 10px;
+}
+</style>
+<style>
+.ProseMirror {
+  outline: 0;
+}
+
+.editor-body {
+  box-sizing: border-box;
+  font-family: sans-serif;
+  line-height: 1.7;
+  overflow-x: auto;
+  text-align: left;
+}
+
+.editor-body > * {
+  box-sizing: border-box;
+}
+
+.editor-body p {
+  margin-bottom: 0;
+  margin-top: 0;
+  outline: none;
+}
+
+.editor-body h1,
+.editor-body h2,
+.editor-body h3,
+.editor-body h4,
+.editor-body h5 {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.editor-body h1:first-child,
+.editor-body h2:first-child,
+.editor-body h3:first-child,
+.editor-body h4:first-child,
+.editor-body h5:first-child {
+  margin-top: 0;
+}
+
+.editor-body h1:last-child,
+.editor-body h2:last-child,
+.editor-body h3:last-child,
+.editor-body h4:last-child,
+.editor-body h5:last-child {
+  margin-bottom: 0;
+}
+
+.editor-body ul,
+.editor-body ol {
+  counter-reset: none;
+  list-style-type: none;
+  margin-bottom: 0;
+  margin-left: 24px;
+  margin-top: 0;
+  padding-bottom: 5px;
+  padding-left: 0;
+  padding-top: 5px;
+}
+
+.editor-body li > p {
+  margin: 0;
+}
+
+.editor-body li > p:first-child::before {
+  content: counter(el-tiptap-counter) ".";
+  display: inline-block;
+  left: -5px;
+  line-height: 1;
+  margin-left: -24px;
+  position: relative;
+  text-align: right;
+  top: 0;
+  width: 24px;
+}
+
+.editor-body ul li > p:first-child::before {
+  content: '\2022';
+  text-align: center;
+}
+
+.editor-body ol {
+  counter-reset: el-tiptap-counter;
+}
+
+.editor-body ol li > p:first-child::before {
+  counter-increment: el-tiptap-counter;
+}
+
+.editor-body a {
+  color: #409eff;
+  cursor: pointer;
+}
+
+.editor-body blockquote {
+  border-left: 5px solid #edf2fc;
+  border-radius: 2px;
+  color: #606266;
+  margin: 10px 0;
+  padding-left: 1em;
+}
+
+.editor-body code {
+  background-color: #d9ecff;
+  border-radius: 4px;
+  color: #409eff;
+  display: inline-block;
+  font-size: 14px;
+  font-weight: 700;
+  padding: 0 8px;
+}
+
+.editor-body pre {
+  background-color: #f6f8fa;
+  /*color: #d9ecff;*/
+  /*font-size: 16px;*/
+  font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
+  overflow-x: auto;
+  padding: 14px 20px;
+  margin: 10px 0;
+  border-radius: 5px;
+}
+
+.editor-body pre code {
+  background-color: transparent;
+  border-radius: 0;
+  color: inherit;
+  display: block;
+  font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
+  font-size: inherit;
+  font-weight: normal;
+  padding: 0;
+}
+
+.editor-body img {
+  display: inline-block;
+  float: none;
+  margin: 12px 0;
+  max-width: 100%;
+}
+
+.editor-body img[data-display=inline] {
+  margin-left: 12px;
+  margin-right: 12px;
+}
+
+.editor-body img[data-display=block] {
+  display: block;
+}
+
+.editor-body img[data-display=left] {
+  float: left;
+  margin-left: 0;
+  margin-right: 12px;
+}
+
+.editor-body img[data-display=right] {
+  float: right;
+  margin-left: 12px;
+  margin-right: 0;
+}
+
+.editor-body ul[data-type=todo_list] {
+  margin-left: 5px;
+}
+
+.editor-body ul[data-type=todo_list] .todo-item {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  margin-bottom: 0;
+}
+
+.editor-body ul[data-type=todo_list] .todo-item[data-text-align=right] {
+  justify-content: flex-end !important;
+}
+
+.editor-body ul[data-type=todo_list] .todo-item[data-text-align=center] {
+  justify-content: center !important;
+}
+
+.editor-body ul[data-type=todo_list] .todo-item[data-text-align=justify] {
+  text-align: space-between !important;
+}
+
+.editor-body ul[data-type=todo_list] .todo-item .todo-content {
+  padding-left: 10px;
+}
+
+.editor-body ul[data-type=todo_list] .todo-item .todo-content > p {
+  font-size: 16px;
+}
+
+.editor-body ul[data-type=todo_list] .todo-item .todo-content > p:last-of-type {
+  margin-bottom: 0;
+}
+
+.editor-body ul[data-type=todo_list] .todo-item--done > .todo-checkbox {
+  color: #409eff;
+}
+
+.editor-body ul[data-type=todo_list] .todo-item--done > .todo-content > p {
+  color: #409eff;
+  text-decoration: line-through;
+}
+
+.editor-body hr {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.editor-body *[data-indent="1"] {
+  margin-left: 30px !important;
+}
+
+.editor-body *[data-indent="2"] {
+  margin-left: 60px !important;
+}
+
+.editor-body *[data-indent="3"] {
+  margin-left: 90px !important;
+}
+
+.editor-body *[data-indent="4"] {
+  margin-left: 120px !important;
+}
+
+.editor-body *[data-indent="5"] {
+  margin-left: 150px !important;
+}
+
+.editor-body *[data-indent="6"] {
+  margin-left: 180px !important;
+}
+
+.editor-body *[data-indent="7"] {
+  margin-left: 210px !important;
+}
+
+.editor-body .tableWrapper {
+  margin: 1em 0;
+  overflow-x: auto;
+}
+
+.editor-body table {
+  border-collapse: collapse;
+  table-layout: fixed;
+  width: 100%;
+  margin: 0;
+  overflow: hidden;
+}
+
+.editor-body th,
+.editor-body td {
+  border: 2px solid #ebeef5;
+  box-sizing: border-box;
+  min-width: 1em;
+  padding: 3px 5px;
+  position: relative;
+  vertical-align: top;
+}
+
+.editor-body th.selectedCell,
+.editor-body td.selectedCell {
+  background-color: #ecf5ff;
+}
+
+.editor-body th {
+  font-weight: 500;
+  text-align: left;
+}
+
+.editor-body .column-resize-handle {
+  background-color: #b3d8ff;
+  bottom: 0;
+  pointer-events: none;
+  position: absolute;
+  right: -2px;
+  top: 0;
+  width: 4px;
+  z-index: 20;
+}
+
+.editor-body .iframe {
+  height: 0;
+  padding-bottom: 56.25%;
+  position: relative;
+  width: 100%;
+}
+
+.editor-body .iframe__embed {
+  border: 0;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.editor-body .resize-cursor {
+  cursor: ew-resize;
+  cursor: col-resize;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/tiptap/TODO.md b/src/components/tiptap/TODO.md
new file mode 100644
index 0000000..3a5767c
--- /dev/null
+++ b/src/components/tiptap/TODO.md
@@ -0,0 +1,21 @@
+# 基于tiptap编辑器
+
+## 目标
+- [x] 代码块插入，支持高亮
+- [x] 图片插入，支持等比缩放
+- [x] 表格插入，支持插入时候选择格子数量
+- [x] 视频插入，最好使用西瓜播放器，支持等比缩放
+- [x] 输入输出处理
+- [ ] 任务列表
+- [ ] 文本对齐
+- [ ] 下划线
+- [ ] 角标
+- [ ] placeholder
+- [ ] 超链接
+- [ ] 字体颜色
+- [ ] 数学公式
+- [ ] 悬浮工具菜单
+- [ ] 编辑器样式优化
+- [ ] 编辑器全屏
+- [ ] HTML模式预览
+- [ ] JSON模式预览
\ No newline at end of file
diff --git a/src/components/tiptap/components/HbTiptapCodeBlockComponent.vue b/src/components/tiptap/components/HbTiptapCodeBlockComponent.vue
new file mode 100644
index 0000000..9f9847f
--- /dev/null
+++ b/src/components/tiptap/components/HbTiptapCodeBlockComponent.vue
@@ -0,0 +1,54 @@
+<script setup>
+import { NodeViewContent, nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
+import {NPopselect,NButton} from 'naive-ui'
+import {ref, watch} from "vue";
+
+const props = defineProps(nodeViewProps)
+
+const languages = props.extension.options.lowlight.listLanguages().map(e=>{
+  return {
+    label: e,
+    value: e,
+  }
+})
+
+languages.unshift({
+  label: 'auto',
+  value: 'auto'
+})
+
+const selectedLanguage = ref(null)
+
+watch(selectedLanguage,()=>{
+  if (selectedLanguage.value === 'auto'){
+    props.updateAttributes({ language:null })
+  }else{
+    props.updateAttributes({ language:selectedLanguage.value })
+  }
+})
+
+</script>
+<template>
+  <node-view-wrapper class="code-block" as="p">
+    <div class="lang-select" contenteditable="false">
+      <n-popselect v-model:value="selectedLanguage" :options="languages" trigger="click" style="max-height: 300px;overflow: auto">
+        <n-button text type="info" size="small">{{ selectedLanguage || 'auto' }}</n-button>
+      </n-popselect>
+    </div>
+    <pre><node-view-content/></pre>
+  </node-view-wrapper>
+</template>
+
+<style scoped>
+.code-block {
+  position: relative;
+}
+
+.code-block .lang-select {
+  position: absolute;
+  top: 0;
+  right: 0;
+  border-radius: 4px;
+  padding: 0 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/tiptap/components/HbTiptapImageComponent.vue b/src/components/tiptap/components/HbTiptapImageComponent.vue
new file mode 100644
index 0000000..563d5ff
--- /dev/null
+++ b/src/components/tiptap/components/HbTiptapImageComponent.vue
@@ -0,0 +1,39 @@
+<script setup>
+import { NodeViewContent, nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
+import HbTiptapResizer from "@/components/tiptap/components/HbTiptapResizer";
+const props = defineProps(nodeViewProps)
+
+function onchange(width,height){
+  props.updateAttributes({width,height})
+}
+
+</script>
+<template>
+  <node-view-wrapper class="image-block" as="span">
+    <hb-tiptap-resizer @on-change="onchange" :w="props.node.attrs.width" :h="props.node.attrs.height">
+      <template #default="{width,height}">
+        <img :width="width" :height="height" class="main-image" :src="props.node.attrs.src" draggable="false" />
+      </template>
+    </hb-tiptap-resizer>
+  </node-view-wrapper>
+</template>
+
+<style scoped>
+.image-block {
+  position: relative;
+  max-width: 100%;
+  box-sizing: border-box;
+  display: inline-block;
+  line-height: 0;
+  float: none;
+  vertical-align: baseline;
+  padding: 0 5px;
+}
+
+
+.main-image{
+  display: block !important;
+  margin: 0!important;
+  padding: 0!important;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/tiptap/components/HbTiptapMenuBar.vue b/src/components/tiptap/components/HbTiptapMenuBar.vue
new file mode 100644
index 0000000..f2d9d3b
--- /dev/null
+++ b/src/components/tiptap/components/HbTiptapMenuBar.vue
@@ -0,0 +1,169 @@
+<script setup>
+import HbTiptapMenuItem from './HbTiptapMenuItem.vue'
+import {NPopover} from 'naive-ui'
+import HbTiptapTableCreator from "@/components/tiptap/components/HbTiptapTableCreator";
+
+const props = defineProps({
+  editor: {
+    type: Object,
+    required: true
+  }
+})
+
+function insertImage() {
+  const url = window.prompt('URL')
+  if (url) {
+    props.editor.chain().focus().setHbImage({src: url}).run()
+  }
+}
+
+function insertVideo() {
+  const url = window.prompt('URL')
+  if (url) {
+    props.editor.chain().focus().setHbVideo({src: url}).run()
+  }
+}
+
+function insertTable(r,c) {
+  props.editor.chain().focus().insertTable({rows: r, cols: c, withHeaderRow: true}).run()
+}
+
+</script>
+<template>
+  <div class="menu-bar">
+    <hb-tiptap-menu-item icon="arrow-go-back-line" title="撤销"
+                         :action="() => props.editor.chain().focus().undo().run()"/>
+    <hb-tiptap-menu-item icon="arrow-go-forward-line" title="取消撤销"
+                         :action="() => props.editor.chain().focus().redo().run()"/>
+    <div class="divider"/>
+    <hb-tiptap-menu-item icon="paragraph" title="段落"
+                         :action="() => props.editor.chain().focus().setParagraph().run()"
+                         :is-active="() => props.editor.isActive('paragraph')"
+    />
+    <hb-tiptap-menu-item icon="format-clear" title="清除样式"
+                         :action="() => props.editor.chain().focus().clearNodes().unsetAllMarks().run()"
+    />
+    <div class="divider"/>
+    <hb-tiptap-menu-item icon="bold" title="加粗"
+                         :action="() => props.editor.chain().focus().toggleBold().run()"
+                         :is-active="() => props.editor.isActive('bold')"
+
+    />
+    <hb-tiptap-menu-item icon="italic" title="斜体"
+                         :action="() => props.editor.chain().focus().toggleItalic().run()"
+                         :is-active="() => props.editor.isActive('italic')"
+    />
+    <hb-tiptap-menu-item icon="strikethrough" title="文本线"
+                         :action="() => props.editor.chain().focus().toggleStrike().run()"
+                         :is-active="() => props.editor.isActive('strike')"
+    />
+    <hb-tiptap-menu-item icon="code-view" title="代码"
+                         :action="() => props.editor.chain().focus().toggleCodeBlock().run()"
+                         :is-active="() => props.editor.isActive('codeBlock')"
+    />
+    <hb-tiptap-menu-item icon="mark-pen-line" title="高亮"
+                         :action="() => props.editor.chain().focus().toggleHighlight().run()"
+                         :is-active="() => props.editor.isActive('highlight')"
+    />
+    <div class="divider"/>
+    <hb-tiptap-menu-item icon="h-1" title="标题1"
+                         :action="() => props.editor.chain().focus().toggleHeading({level: 1}).run()"
+                         :is-active="() => props.editor.isActive('heading', {level: 1})"
+    />
+    <hb-tiptap-menu-item icon="h-2" title="标题2"
+                         :action="() => props.editor.chain().focus().toggleHeading({level: 2}).run()"
+                         :is-active="() => props.editor.isActive('heading', {level: 2})"
+    />
+    <hb-tiptap-menu-item icon="h-3" title="标题3"
+                         :action="() => props.editor.chain().focus().toggleHeading({level: 3}).run()"
+                         :is-active="() => props.editor.isActive('heading', {level: 3})"
+    />
+    <hb-tiptap-menu-item icon="h-4" title="标题4"
+                         :action="() => props.editor.chain().focus().toggleHeading({level: 4}).run()"
+                         :is-active="() => props.editor.isActive('heading', {level: 4})"
+    />
+    <hb-tiptap-menu-item icon="h-5" title="标题5"
+                         :action="() => props.editor.chain().focus().toggleHeading({level: 5}).run()"
+                         :is-active="() => props.editor.isActive('heading', {level: 5})"
+    />
+    <hb-tiptap-menu-item icon="h-6" title="标题6"
+                         :action="() => props.editor.chain().focus().toggleHeading({level: 6}).run()"
+                         :is-active="() => props.editor.isActive('heading', {level: 6})"
+    />
+    <div class="divider"/>
+    <hb-tiptap-menu-item icon="list-unordered" title="无序列表"
+                         :action="() => props.editor.chain().focus().toggleBulletList().run()"
+                         :is-active="() => props.editor.isActive('bulletList')"
+    />
+    <hb-tiptap-menu-item icon="list-ordered" title="有序列表"
+                         :action="() => props.editor.chain().focus().toggleOrderedList().run()"
+                         :is-active="() => props.editor.isActive('orderedList')"
+    />
+    <hb-tiptap-menu-item icon="double-quotes-l" title="引用"
+                         :action="() => props.editor.chain().focus().toggleBlockquote().run()"
+                         :is-active="() => props.editor.isActive('blockquote')"
+    />
+    <hb-tiptap-menu-item icon="separator" title="横线"
+                         :action="() => props.editor.chain().focus().setHorizontalRule().run()"
+    />
+    <div class="divider"/>
+    <hb-tiptap-menu-item icon="image-line" title="插入图片"
+                         :action="insertImage"
+    />
+    <hb-tiptap-menu-item icon="video-line" title="插入视频"
+                         :action="insertVideo"
+    />
+    <div class="divider"/>
+    <n-popover trigger="hover" placement="bottom">
+      <template #trigger>
+        <hb-tiptap-menu-item icon="table-2" title="插入表格" :action="()=>{}"/>
+      </template>
+      <hb-tiptap-table-creator @insert="insertTable"/>
+    </n-popover>
+    <hb-tiptap-menu-item icon="delete-bin-6-line" title="删除表格"
+                         :action="() => props.editor.chain().focus().deleteTable().run()"
+    />
+    <hb-tiptap-menu-item icon="merge-cells-horizontal" title="合并拆分单元格"
+                         :action="() => props.editor.chain().focus().mergeOrSplit().run()"
+    />
+    <hb-tiptap-menu-item icon="insert-row-top" title="上面添加一行"
+                         :action="() => props.editor.chain().focus().addRowBefore().run()"
+    />
+    <hb-tiptap-menu-item icon="insert-row-bottom" title="下面添加一行"
+                         :action="() => props.editor.chain().focus().addRowAfter().run()"
+    />
+    <hb-tiptap-menu-item icon="delete-row" title="删除行"
+                         :action="() => props.editor.chain().focus().deleteRow().run()"
+    />
+    <hb-tiptap-menu-item icon="insert-column-left" title="左边添加一列"
+                         :action="() => props.editor.chain().focus().addColumnBefore().run()"
+    />
+    <hb-tiptap-menu-item icon="insert-column-right" title="右边添加一列"
+                         :action="() => props.editor.chain().focus().addColumnAfter().run()"
+    />
+    <hb-tiptap-menu-item icon="delete-column" title="删除行"
+                         :action="() => props.editor.chain().focus().deleteColumn().run()"
+    />
+<!--    <hb-tiptap-menu-item icon="sip-line" title="单元格背景色"-->
+<!--                         :action="() => props.editor.chain().focus().toggleHeaderCell().run()"-->
+<!--    />-->
+  </div>
+</template>
+
+<style scoped>
+.menu-bar {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  flex-wrap: wrap;
+  padding: 5px 5px;
+}
+
+.divider {
+  width: 2px;
+  height: 20px;
+  background-color: rgba(0, 0, 0, 0.1);
+  margin-left: .5rem;
+  margin-right: .75rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/tiptap/components/HbTiptapMenuItem.vue b/src/components/tiptap/components/HbTiptapMenuItem.vue
new file mode 100644
index 0000000..f368198
--- /dev/null
+++ b/src/components/tiptap/components/HbTiptapMenuItem.vue
@@ -0,0 +1,62 @@
+<script setup>
+import remixiconSvg from 'remixicon/fonts/remixicon.symbol.svg'
+import {ref} from "vue";
+
+const props = defineProps({
+  icon: {
+    type: String,
+    required: true
+  },
+  title: {
+    type: String,
+    required: true
+  },
+  action: {
+    type: Function,
+    required: true
+  },
+  isActive: {
+    type: Function,
+    default: null
+  }
+})
+
+const iconUrl = ref(remixiconSvg)
+</script>
+<template>
+  <button
+      class="menu-item"
+      :class="{ 'is-active': isActive ? isActive(): null }"
+      @click="action"
+      :title="title"
+  >
+    <svg class="remix">
+      <use :xlink:href="`${iconUrl}#ri-${icon}`"/>
+    </svg>
+  </button>
+</template>
+
+<style scoped>
+.menu-item {
+  width: 28px;
+  height: 28px;
+  color: #0d0d0d;
+  border: none;
+  background-color: transparent;
+  border-radius: 3px;
+  padding: 5px;
+  margin-right: 5px;
+  transition: all 0.2s;
+}
+
+.menu-item:hover, .is-active {
+  color: #fff;
+  background-color: #0d0d0d;
+}
+
+.menu-item svg {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/tiptap/components/HbTiptapResizer.vue b/src/components/tiptap/components/HbTiptapResizer.vue
new file mode 100644
index 0000000..e1dccdb
--- /dev/null
+++ b/src/components/tiptap/components/HbTiptapResizer.vue
@@ -0,0 +1,211 @@
+<script setup>
+import {onMounted, ref, watch} from "vue"
+
+const props = defineProps({
+  w:{
+    type:Number,
+    default:400,
+  },
+  h:{
+    type:Number,
+    default:300,
+  }
+})
+
+const width = ref(props.w)
+const height = ref(props.h)
+
+watch(()=>[props.w,props.h],()=>{
+  width.value = props.w
+  height.value = props.h
+})
+
+onMounted(()=>{
+  width.value = props.w
+  height.value = props.h
+})
+
+let startWidth = width.value
+let startHeight = height.value
+let startX = 0
+let startY = 0
+let deltaX = 0
+let deltaY = 0
+let startPos = ''
+let isMousedown = false
+function onmousedown(e,pos){
+  startWidth = width.value
+  startHeight = height.value
+  startX = e.screenX
+  startY = e.screenY
+  startPos = pos
+  isMousedown = true
+  document.addEventListener('mousemove',onmousemove)
+  document.addEventListener('mouseup',onmouseup)
+}
+
+function onmousemove(e){
+  deltaX = e.screenX - startX
+  deltaY = e.screenY - startY
+  switch (startPos) {
+    case 'lt':
+      deltaX = -deltaX
+      deltaY = -deltaY
+      break
+    case 'lb':
+      deltaX = -deltaX
+      break
+    case 'rt':
+      deltaY = -deltaY
+      break
+    case 'rb':
+      break
+  }
+  width.value = startWidth + deltaX
+  height.value = startHeight + deltaY
+}
+
+function onmouseup(e){
+  isMousedown = false
+  document.removeEventListener('mousemove',onmousemove)
+  document.removeEventListener('mouseup',onmouseup)
+  emitSize()
+}
+
+const isHover = ref(false)
+function hover(){
+  isHover.value = true
+}
+
+function leave(){
+  if (isMousedown){
+    return
+  }
+  isHover.value = false
+}
+
+const emit = defineEmits(['on-change'])
+
+function emitSize(){
+  emit('on-change',width.value,height.value)
+}
+
+
+</script>
+
+<template>
+<div class="box-resizer" draggable="false" @mouseenter="hover" @mouseleave="leave">
+  <template v-if="isHover">
+    <div class="l-line resize-line-v"></div>
+    <div class="r-line resize-line-v"></div>
+    <div class="t-line resize-line-h"></div>
+    <div class="b-line resize-line-h"></div>
+    <div class="lt-resizer resize-cube" @mousedown="e=>onmousedown(e,'lt')"></div>
+    <div class="lb-resizer resize-cube" @mousedown="e=>onmousedown(e,'lb')"></div>
+    <div class="rt-resizer resize-cube" @mousedown="e=>onmousedown(e,'rt')"></div>
+    <div class="rb-resizer resize-cube" @mousedown="e=>onmousedown(e,'rb')"></div>
+  </template>
+  <slot :width="width" :height="height"/>
+</div>
+</template>
+
+<style scoped>
+.box-resizer{
+  position: relative;
+  box-sizing: border-box;
+  user-select: none;
+}
+
+.resize-cube{
+  width: 10px;
+  height: 10px;
+  background: #48A8ED;
+  border: 1px solid white;
+  box-sizing: border-box;
+  transition: all 0.2s;
+  z-index: 10;
+}
+
+.resize-cube:hover{
+  background: #81c8ff;
+}
+
+.resize-line-h{
+  width: 100%;
+  height: 4px;
+  background: #48A8ED;
+  border-top: 1px solid white;
+  border-bottom: 1px solid white;
+  box-sizing: border-box;
+  z-index: 10;
+}
+
+.resize-line-v{
+  height: 100%;
+  width: 4px;
+  background: #48A8ED;
+  border-left: 1px solid white;
+  border-right: 1px solid white;
+  box-sizing: border-box;
+  z-index: 10;
+}
+
+.lt-resizer{
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform: translate(-50%,-50%);
+}
+
+.lb-resizer{
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  transform: translate(-50%,50%);
+}
+
+.rt-resizer{
+  position: absolute;
+  right: 0;
+  top: 0;
+  transform: translate(50%,-50%);
+}
+
+.rb-resizer{
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  transform: translate(50%,50%);
+}
+
+.l-line{
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform: translateX(-50%);
+}
+
+.r-line{
+  position: absolute;
+  right: 0;
+  top: 0;
+  transform: translateX(50%);
+}
+
+.t-line{
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform: translateY(-50%);
+}
+
+.b-line{
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  transform: translateY(50%);
+}
+
+
+
+</style>
\ No newline at end of file
diff --git a/src/components/tiptap/components/HbTiptapTableCreator.vue b/src/components/tiptap/components/HbTiptapTableCreator.vue
new file mode 100644
index 0000000..3d3fc43
--- /dev/null
+++ b/src/components/tiptap/components/HbTiptapTableCreator.vue
@@ -0,0 +1,142 @@
+<script setup>
+import {NInputNumber, NButton} from 'naive-ui'
+import {ref} from "vue"
+
+const row = ref(3)
+const col = ref(3)
+
+function onmouseenter(r, c) {
+  if (!isMousedown) {
+    return
+  }
+  er.value = r
+  ec.value = c
+  calcRC()
+}
+
+const sr = ref(0)
+const er = ref(0)
+const sc = ref(0)
+const ec = ref(0)
+let isMousedown = false
+
+function onmousedown(r, c) {
+  if (isMousedown) {
+    onmouseup(r, c)
+    return
+  }
+  sr.value = r
+  sc.value = c
+  er.value = r
+  ec.value = c
+  isMousedown = true
+  calcRC()
+}
+
+function onmouseup(r, c) {
+  if (!isMousedown){
+    return
+  }
+  er.value = r
+  ec.value = c
+  calcRC()
+  isMousedown = false
+  console.log(`(${sr.value},${sc.value})=>(${er.value},${ec.value})`)
+}
+
+function calcRC() {
+  row.value = Math.abs(er.value - sr.value) + 1
+  col.value = Math.abs(ec.value - sc.value) + 1
+}
+
+function preventDefault(e) {
+  e.preventDefault()
+}
+
+function isSelected(r, c) {
+  const minr = Math.min(sr.value, er.value)
+  const maxr = Math.max(sr.value, er.value)
+  const minc = Math.min(sc.value, ec.value)
+  const maxc = Math.max(sc.value, ec.value)
+  return r >= minr && r <= maxr && c >= minc && c <= maxc
+}
+
+const emit = defineEmits(['insert'])
+
+function insertTable() {
+  emit('insert', row.value, col.value)
+}
+
+</script>
+
+<template>
+  <div class="hb-tiptap-table-creator" draggable="false">
+    <div class="inputs">
+      <div class="label">列数</div>
+      <n-input-number v-model:value="col" size="small"></n-input-number>
+    </div>
+    <div class="inputs">
+      <div class="label">行数</div>
+      <n-input-number v-model:value="row" size="small"></n-input-number>
+    </div>
+    <div class="grid" draggable="false">
+      <div draggable="false" class="grid-row" v-for="r in 10">
+        <div draggable="false" class="grid-item" v-for="c in 12"
+             :class="{'grid-item-selected': isSelected(r,c)}"
+             @dragstart="preventDefault"
+             @mousedown="()=>onmousedown(r,c)"
+             @mouseenter="()=>onmouseenter(r,c)"
+             @mouseup="()=>onmouseup(r,c)">
+
+        </div>
+      </div>
+    </div>
+    <div class="actions">
+      <n-button size="small" type="primary" block secondary @click="insertTable">插入表格</n-button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.hb-tiptap-table-creator {
+  width: 200px;
+  box-sizing: border-box;
+  padding: 10px 0;
+  overflow: hidden;
+}
+
+.inputs {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  justify-content: space-between;
+}
+
+.label {
+  margin-right: 10px;
+  white-space: nowrap;
+}
+
+.grid {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-bottom: 10px;
+  user-select: none;
+}
+
+.grid-row {
+  display: flex;
+}
+
+.grid-item {
+  width: 15px;
+  height: 15px;
+  background: rgba(128, 128, 128, 0.2);
+  border: 1px solid white;
+}
+
+.grid-item-selected {
+  background: rgba(0, 178, 255, 0.5);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/tiptap/components/HbTiptapVideoComponent.vue b/src/components/tiptap/components/HbTiptapVideoComponent.vue
new file mode 100644
index 0000000..d4b8f8c
--- /dev/null
+++ b/src/components/tiptap/components/HbTiptapVideoComponent.vue
@@ -0,0 +1,81 @@
+<script setup>
+import { NodeViewContent, nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
+import HbTiptapResizer from "@/components/tiptap/components/HbTiptapResizer";
+
+import Player from 'xgplayer/dist/core_player'
+import play from 'xgplayer/dist/controls/play'
+import fullscreen from 'xgplayer/dist/controls/fullscreen'
+import progress from 'xgplayer/dist/controls/progress'
+import volume from 'xgplayer/dist/controls/volume'
+import pip from 'xgplayer/dist/controls/pip'
+import flex from 'xgplayer/dist/controls/flex'
+import {onBeforeUnmount, onMounted,ref} from "vue";
+
+const box = ref(null)
+const props = defineProps(nodeViewProps)
+
+let editor = null
+function init () {
+  editor = new Player({
+    el            : box.value,
+    // url           : 'https://media.w3.org/2010/05/sintel/trailer.mp4',
+    url           : props.node.attrs.src,
+    controlPlugins: [
+      play,
+      fullscreen,
+      progress,
+      volume,
+      pip,
+      flex
+    ],
+    playbackRate       : [ 0.5, 0.75, 1, 1.5, 2 ],
+    defaultPlaybackRate: 1.5,
+    videoInit          : true,
+    pip                : true // 打开画中画功能
+  })
+}
+
+onMounted(init)
+
+onBeforeUnmount(()=>{
+  editor&&editor.destroy(true)
+})
+
+function onchange(width,height){
+  props.updateAttributes({width,height})
+}
+
+</script>
+<template>
+  <node-view-wrapper class="video-block" as="span">
+    <hb-tiptap-resizer @on-change="onchange" :w="props.node.attrs.width" :h="props.node.attrs.height">
+      <template #default="{width,height}">
+        <div :style="`width: ${width}px;height: ${height}px`" class="video-resizer">
+          <div ref="box" class="video-box"></div>
+        </div>
+      </template>
+    </hb-tiptap-resizer>
+  </node-view-wrapper>
+</template>
+
+<style scoped>
+.video-block {
+  position: relative;
+  max-width: 100%;
+  box-sizing: border-box;
+  display: inline-block;
+  line-height: 0;
+  float: none;
+  vertical-align: baseline;
+  padding: 0 5px;
+}
+
+.video-box{
+  height: 100% !important;
+  width: 100% !important;
+}
+
+.video-resizer{
+  max-width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/tiptap/extension/hb-image.js b/src/components/tiptap/extension/hb-image.js
new file mode 100644
index 0000000..b3e94d8
--- /dev/null
+++ b/src/components/tiptap/extension/hb-image.js
@@ -0,0 +1,86 @@
+import {
+  mergeAttributes,
+  Node,
+  nodeInputRule,
+} from '@tiptap/core'
+
+export const inputRegex = /(?:^|\s)(!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/
+
+export const HbImage = Node.create({
+  name: 'hb-image',
+
+  addOptions() {
+    return {
+      inline: true,
+      HTMLAttributes: {},
+    }
+  },
+
+  inline() {
+    return this.options.inline
+  },
+
+  group() {
+    return this.options.inline ? 'inline' : 'block'
+  },
+
+  draggable: false,
+
+  addAttributes() {
+    return {
+      src: {
+        default: null,
+      },
+      alt: {
+        default: null,
+      },
+      title: {
+        default: null,
+      },
+      width:{
+        default: 400,
+      },
+      height:{
+        default: 300,
+      }
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'img[src]'
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['img', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)]
+  },
+
+  addCommands() {
+    return {
+      setHbImage: options => ({ commands }) => {
+        return commands.insertContent({
+          type: this.name,
+          attrs: options,
+        })
+      },
+    }
+  },
+
+  addInputRules() {
+    return [
+      nodeInputRule({
+        find: inputRegex,
+        type: this.type,
+        getAttributes: match => {
+          const [,, alt, src, title] = match
+          return { src, alt, title }
+        },
+      }),
+    ]
+  },
+})
+
+export default HbImage
diff --git a/src/components/tiptap/extension/hb-video.js b/src/components/tiptap/extension/hb-video.js
new file mode 100644
index 0000000..d18b1de
--- /dev/null
+++ b/src/components/tiptap/extension/hb-video.js
@@ -0,0 +1,71 @@
+import {
+  mergeAttributes,
+  Node,
+} from '@tiptap/core'
+
+
+export const HbVideo = Node.create({
+  name: 'hb-video',
+
+  addOptions() {
+    return {
+      inline: true,
+      HTMLAttributes: {},
+    }
+  },
+
+  inline() {
+    return this.options.inline
+  },
+
+  group() {
+    return this.options.inline ? 'inline' : 'block'
+  },
+
+  draggable: false,
+
+  addAttributes() {
+    return {
+      src: {
+        default: null,
+      },
+      alt: {
+        default: null,
+      },
+      title: {
+        default: null,
+      },
+      width:{
+        default: 400,
+      },
+      height:{
+        default: 300,
+      }
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'video[src]'
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['video', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)]
+  },
+
+  addCommands() {
+    return {
+      setHbVideo: options => ({ commands }) => {
+        return commands.insertContent({
+          type: this.name,
+          attrs: options,
+        })
+      },
+    }
+  },
+})
+
+export default HbVideo
diff --git a/src/utils/imageFactory.js b/src/utils/imageFactory.js
index ab0561d..92ef9f7 100644
--- a/src/utils/imageFactory.js
+++ b/src/utils/imageFactory.js
@@ -1,8 +1,8 @@
 /**
  * 图片添加水印
  *  callback  //回调方法，返回base64的图片
- *  image: Image()  //底图对象
- *  sign: Image()  //水印对象
+ *  image: Video()  //底图对象
+ *  sign: Video()  //水印对象
  *  left: Number  //水印左侧位置
  *  top: Number  //水印顶部位置
  *  imageWidth: Number  //底图宽度
@@ -50,7 +50,7 @@ export function watermark (
 /**
  * 图片裁剪
  * callback  //回调方法，返回base64的图片
- * image: Image()  //底图对象
+ * image: Video()  //底图对象
  * left: Number  //裁剪左侧距离
  * right: Number  //裁剪右侧距离
  * top: Number  //裁剪顶部距离
@@ -119,7 +119,7 @@ export function cropper (
 /**
  * 调整图片宽高
  * callback  //回调方法，返回base64的图片
- * image: Image()  //底图对象
+ * image: Video()  //底图对象
  * width: Number  //调整的宽度
  * height: Number  //调整的高度
  * */
@@ -157,7 +157,7 @@ export function resize (
 /**
  * 调整图片质量
  * callback  //回调方法，返回base64的图片
- * image: Image()  //底图对象
+ * image: Video()  //底图对象
  * quality: Number  //图片质量 0 - 1
  * */
 export function quality (callback, image, quality = 1) {
diff --git a/src/views/adjustable-container-demo/base.demo.vue b/src/views/adjustable-container-demo/base.demo.vue
index 4f881db..560c33b 100644
--- a/src/views/adjustable-container-demo/base.demo.vue
+++ b/src/views/adjustable-container-demo/base.demo.vue
@@ -9,7 +9,7 @@ import HbAdminAdjustableContainer from "@/components/HbAdminAdjustableContainer.
 <template>
   <div>
     <hb-admin-adjustable-container>
-      <div style="height: 100%;width: 100%;background-color: #000;"></div>
+      <img style="max-width: 100%;max-height: 100%;" src="http://localhost:3000/src/assets/logo.png"/>
     </hb-admin-adjustable-container>
   </div>
 </template>
diff --git a/src/views/editor-demo/base.demo.vue b/src/views/editor-demo/base.demo.vue
new file mode 100644
index 0000000..a7fddc9
--- /dev/null
+++ b/src/views/editor-demo/base.demo.vue
@@ -0,0 +1,15 @@
+<hb-demo>预览版</hb-demo>
+<script setup>
+import { NInput,NCard } from 'naive-ui'
+import HbAdminTipTap from "@/components/tiptap/HbAdminTipTap";
+import {ref} from "vue";
+const content = ref('')
+</script>
+<template>
+  <div style="height: 500px;margin-bottom: 10px">
+    <hb-admin-tip-tap v-model="content"/>
+  </div>
+  <n-card title="输出HTML" >
+    <n-input v-model:value="content" type="textarea" rows="15"></n-input>
+  </n-card>
+</template>
diff --git a/src/views/editor-demo/index.vue b/src/views/editor-demo/index.vue
index 879828d..1b44456 100644
--- a/src/views/editor-demo/index.vue
+++ b/src/views/editor-demo/index.vue
@@ -1,6 +1,8 @@
 <script setup>
 import {NLayout,NLayoutContent,NAlert,NSpace} from 'naive-ui';
 import HbAdminPageLayout from "@/components/HbAdminPageLayout.vue";
+import BaseDemo from './base.demo'
+
 
 </script>
 <template>
@@ -13,13 +15,8 @@ import HbAdminPageLayout from "@/components/HbAdminPageLayout.vue";
             在开发中
           </n-alert>
         </n-space>
+        <base-demo style="margin-top: 10px"></base-demo>
       </n-layout-content>
     </n-layout>
   </hb-admin-page-layout>
-</template>
-
-<style scoped>
-.no-key-btn{
-
-}
-</style>
+</template>
\ No newline at end of file
diff --git a/src/views/image-factory-demo/index.vue b/src/views/image-factory-demo/index.vue
index 41dd2f9..9aa0bf4 100644
--- a/src/views/image-factory-demo/index.vue
+++ b/src/views/image-factory-demo/index.vue
@@ -11,8 +11,8 @@ hljs.registerLanguage('xml', xml)
 const code1 = '1.首先引入 \nimport { watermark } from \'@/utils/imageFactory\' \n2.然后调用 \n/**\n' +
     ' * 图片添加水印\n' +
     ' *  callback  //回调方法，返回base64的图片【{success: true, data: "base64数据"}】\n' +
-    ' *  image: Image()  //底图对象\n' +
-    ' *  sign: Image()  //水印对象\n' +
+    ' *  image: Video()  //底图对象\n' +
+    ' *  sign: Video()  //水印对象\n' +
     ' *  left: Number  //水印左侧位置\n' +
     ' *  top: Number  //水印顶部位置\n' +
     ' *  imageWidth: Number  //底图宽度\n' +
@@ -26,7 +26,7 @@ const code2 = '1.首先引入 \nimport { cropper } from \'@/utils/imageFactory\'
     '/**\n' +
     ' * 图片裁剪\n' +
     ' * callback  //回调方法，返回base64的图片\n' +
-    ' * image: Image()  //底图对象\n' +
+    ' * image: Video()  //底图对象\n' +
     ' * left: Number  //裁剪左侧距离\n' +
     ' * right: Number  //裁剪右侧距离\n' +
     ' * top: Number  //裁剪顶部距离\n' +
@@ -40,7 +40,7 @@ const code3 = '1.首先引入 \nimport { resize } from \'@/utils/imageFactory\'
     '/**\n' +
     ' * 调整图片尺寸\n' +
     ' * callback  //回调方法，返回base64的图片\n' +
-    ' * image: Image()  //底图对象\n' +
+    ' * image: Video()  //底图对象\n' +
     ' * width: Number  //调整的宽度\n' +
     ' * height: Number  //调整的高度\n' +
     ' * */\n' +
@@ -50,7 +50,7 @@ const code4 = '1.首先引入 \nimport { quality } from \'@/utils/imageFactory\'
     '/**\n' +
     ' * 调整图片质量\n' +
     ' * callback  //回调方法，返回base64的图片\n' +
-    ' * image: Image()  //底图对象\n' +
+    ' * image: Video()  //底图对象\n' +
     ' * quality: Number  //图片质量 0 - 1\n' +
     ' * */\n' +
     'quality(callback, image, quality)'
diff --git a/yarn.lock b/yarn.lock
index da5f81f..06a3205 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,17 @@
 # yarn lockfile v1
 
 
+"@_ueberdosis/prosemirror-tables@1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@_ueberdosis/prosemirror-tables/-/prosemirror-tables-1.1.3.tgz#56fdbc8b1d6ec43e7b7beb21e213c131eec451cd"
+  integrity sha512-su3pbFi1DT89g6Cuh72TE0MWWKHmWgHcQJ3ODRkm6XfIppWaGpU49t02ur3sgJc7hUhfQXjB93aSkDgOmIii2w==
+  dependencies:
+    prosemirror-keymap "^1.1.2"
+    prosemirror-model "^1.8.1"
+    prosemirror-state "^1.3.1"
+    prosemirror-transform "^1.2.1"
+    prosemirror-view "^1.13.3"
+
 "@babel/parser@^7.16.4":
   version "7.17.3"
   resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.17.3.tgz#b07702b982990bf6fdc1da5049a23fece4c5c3d0"
@@ -151,6 +162,218 @@
     estree-walker "^2.0.1"
     picomatch "^2.2.2"
 
+"@tiptap/core@^2.0.0-beta.182":
+  version "2.0.0-beta.182"
+  resolved "https://registry.yarnpkg.com/@tiptap/core/-/core-2.0.0-beta.182.tgz#d2001e9b765adda95e15d171479860a3349e2d04"
+  integrity sha512-MZGkMGnVnWhBzjvpBNwQ9zBz38ndi3Irbf90uCTSArR0kaCVkW4vmyuPuOXd+0SO8Yv/l5oyDdOCpaG3rnQYfw==
+  dependencies:
+    prosemirror-commands "1.3.0"
+    prosemirror-keymap "1.2.0"
+    prosemirror-model "1.18.1"
+    prosemirror-schema-list "1.2.0"
+    prosemirror-state "1.4.1"
+    prosemirror-transform "1.6.0"
+    prosemirror-view "1.26.2"
+
+"@tiptap/extension-blockquote@^2.0.0-beta.29":
+  version "2.0.0-beta.29"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-blockquote/-/extension-blockquote-2.0.0-beta.29.tgz#6f1c4b17efa6457c7776f32d0807e96d848d4389"
+  integrity sha512-zMYT5TtpKWav9VhTn4JLyMvXmhEdbD6on0MdhcTjRm0I5ugyR4ZbJwh2aelM7G9DZVYzB8jZU18OSDJmo7Af7w==
+
+"@tiptap/extension-bold@^2.0.0-beta.28":
+  version "2.0.0-beta.28"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bold/-/extension-bold-2.0.0-beta.28.tgz#cf67c264a80434ffb2368f3dd37cf357ae0c2064"
+  integrity sha512-DY8GOzw9xjmTFrnvTbgHUNxTnDfKrkDgrhe0SUvdkT2udntWp8umPdhPiD3vczLgHOJw6tX68qMRjbsR1ZPcHQ==
+
+"@tiptap/extension-bubble-menu@^2.0.0-beta.61":
+  version "2.0.0-beta.61"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bubble-menu/-/extension-bubble-menu-2.0.0-beta.61.tgz#cc61ce8b094fdbcec58f44f0fa39172a726c024c"
+  integrity sha512-T3Yx+y1sUnXAJjK1CUfsQewSxOpDca9KzKqN2H9c9RZ9UlorR9XmZg6YYW7m9a7adeihj+o3cCO9jRd8dV+nnA==
+  dependencies:
+    prosemirror-state "1.4.1"
+    prosemirror-view "1.26.2"
+    tippy.js "^6.3.7"
+
+"@tiptap/extension-bullet-list@^2.0.0-beta.29":
+  version "2.0.0-beta.29"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bullet-list/-/extension-bullet-list-2.0.0-beta.29.tgz#640883e4fffc1a86c7cbd78792688e7edee5ee41"
+  integrity sha512-R8VB2l1ZB6VeGWx/t/04nBS5Wg3qjIDEZCpPihj2fccJOw99Lu0Ub2UJg/SfdGmeNNpBh4ZYYFv1g/XjyzlXKg==
+
+"@tiptap/extension-code-block-lowlight@^2.0.0-beta.73":
+  version "2.0.0-beta.73"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block-lowlight/-/extension-code-block-lowlight-2.0.0-beta.73.tgz#3f4711fadb1a1f51efbf58389216e6c8bca83d84"
+  integrity sha512-57jqDd2jzQPlYKPtnDIlwwaZrHLlgUVCe+NIWgK6bpP1yF4bUE3Dguqw1owN6oBWBf0kQnm0TQjbn50B/wnUjQ==
+  dependencies:
+    "@tiptap/extension-code-block" "^2.0.0-beta.42"
+    "@types/lowlight" "^0.0.3"
+    prosemirror-model "1.18.1"
+    prosemirror-state "1.4.1"
+    prosemirror-view "1.26.2"
+
+"@tiptap/extension-code-block@^2.0.0-beta.42":
+  version "2.0.0-beta.42"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block/-/extension-code-block-2.0.0-beta.42.tgz#2abfd92eb22399fa542aafb3b76dddfb41d87ab5"
+  integrity sha512-4wzLup4mI8w9ypIceekUV/8g41cQIPn31qs1iC9u1/JuTkjMj/tA+TFUyp6IMugLxoI/P2DlTztU6/6m7n9DyQ==
+  dependencies:
+    prosemirror-state "1.4.1"
+
+"@tiptap/extension-code@^2.0.0-beta.28":
+  version "2.0.0-beta.28"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-code/-/extension-code-2.0.0-beta.28.tgz#a22c0e873497ac0bbcd77e4a855322f8591f954e"
+  integrity sha512-QPJ2Gwb1+3NgcC1ZIhvVcb+FsnWWDu5VZXTKXM4mz892i9V2x48uHg5anPiUV6pcolXsW1F5VNbXIHGTUUO6CQ==
+
+"@tiptap/extension-document@^2.0.0-beta.17":
+  version "2.0.0-beta.17"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-document/-/extension-document-2.0.0-beta.17.tgz#ded4182dd860762bcf41c588f712d83908c472a3"
+  integrity sha512-L6sg0FNchbtIpQkCSjMmItVGs3/vep8Fq56WRtDc1wBSGUSmtHaxQG7F2FZLnNIUMuvzVMRD81m2vYG73WkY6A==
+
+"@tiptap/extension-dropcursor@^2.0.0-beta.29":
+  version "2.0.0-beta.29"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-dropcursor/-/extension-dropcursor-2.0.0-beta.29.tgz#9ccc9d82cb9f8fa28a59ffc061c4c83ee059a12c"
+  integrity sha512-I+joyoFB8pfdXUPLMqdNO08nlB5m2lbu0VQ5dpqdi/HzgVThMZPZA1cW0X8vAUvrALs5/JFRiFoR9hrLN5R5ng==
+  dependencies:
+    prosemirror-dropcursor "1.5.0"
+
+"@tiptap/extension-floating-menu@^2.0.0-beta.56":
+  version "2.0.0-beta.56"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-floating-menu/-/extension-floating-menu-2.0.0-beta.56.tgz#c7428d9109d215bdbd9033f69782c4aadb2aabec"
+  integrity sha512-j/evHE/6UPGkIgXny9IGcAh0IrcnQmg0b2NBYebs2mqx9xYKYoe+0jVgNdLp/0M3MRgQCzyWTyatBDBFOUR2mw==
+  dependencies:
+    prosemirror-state "1.4.1"
+    prosemirror-view "1.26.2"
+    tippy.js "^6.3.7"
+
+"@tiptap/extension-gapcursor@^2.0.0-beta.39":
+  version "2.0.0-beta.39"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-gapcursor/-/extension-gapcursor-2.0.0-beta.39.tgz#b8585d2936df7ca90446758c3af90b46d552a1fb"
+  integrity sha512-oCyz5WEeQXrEIoa1WXaD52yf1EwMFCXaK1cVzFgUj8lkXJ+nJj+O/Zp0Mg+9/MVR0LYu/kifqVorKNXM4AFA/g==
+  dependencies:
+    prosemirror-gapcursor "1.3.0"
+
+"@tiptap/extension-hard-break@^2.0.0-beta.33":
+  version "2.0.0-beta.33"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-hard-break/-/extension-hard-break-2.0.0-beta.33.tgz#e2f355a22aaaec6e831cf2880c52aa5b0b860573"
+  integrity sha512-41xf0vSV9hcyTFd01ItLq/CjhjgmOFLCrO3UWN/P2E/cIxuDTyXcvjTE/KXeqRCOV3OYd9fVr0wO91hc8Ij1Yg==
+
+"@tiptap/extension-heading@^2.0.0-beta.29":
+  version "2.0.0-beta.29"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-heading/-/extension-heading-2.0.0-beta.29.tgz#d017d216c0fd1962c266f6f61a335093f9749862"
+  integrity sha512-q92jYcsT5bPhvuQaB0h44Z9r+Ii22tDYo082KMVnR4+tknHT/3xx+p4JC8KHjh+/5W8Quyafqy6mS8L8VX0zsQ==
+
+"@tiptap/extension-highlight@^2.0.0-beta.35":
+  version "2.0.0-beta.35"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-highlight/-/extension-highlight-2.0.0-beta.35.tgz#0738102b23f69f9c8ddada4f05ccb580d1d50133"
+  integrity sha512-xvEKOyuTj4mhQ8GIOItaSymJhGkWt2gGuCvmFWnTVZAaJJQOlgUTdkmayLCtwoDDP7biiuDhRJokTukGGmhUZw==
+
+"@tiptap/extension-history@^2.0.0-beta.26":
+  version "2.0.0-beta.26"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-history/-/extension-history-2.0.0-beta.26.tgz#ae4c0ee8d19b3530e72d99cb5d0f69aefcf96d04"
+  integrity sha512-ly19uwvdmXG8Fw1KcavXIHi3Qx6JBASOR7394zghOEpW3atpY8nd/8I373rZ8eDUcGOClfaF7bCx2xvIotAAnw==
+  dependencies:
+    prosemirror-history "1.3.0"
+
+"@tiptap/extension-horizontal-rule@^2.0.0-beta.36":
+  version "2.0.0-beta.36"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-2.0.0-beta.36.tgz#daf8e2d0f30b210a90fdb8f015646653661cfa04"
+  integrity sha512-o+Zp7dcn3zAQhtlhZiFB69mTHuH3ZRbGEF7Cbf1D3uX1izotni5zIZbPaFFUT4r6OmVe/vDDt/nopfcGc10ktQ==
+  dependencies:
+    prosemirror-state "1.4.1"
+
+"@tiptap/extension-image@^2.0.0-beta.30":
+  version "2.0.0-beta.30"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-image/-/extension-image-2.0.0-beta.30.tgz#60c6cfd09bfd017a3d8b1feaf0931462ffd71a60"
+  integrity sha512-VhEmgiKkZMiKR7hbpJgIlIUS/QNjSGI5ER7mKDAbuV1IB5yb6nGjZ6o3Exrr2/CaTaW5hQarBC1z2Xgdu05EGg==
+
+"@tiptap/extension-italic@^2.0.0-beta.28":
+  version "2.0.0-beta.28"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-italic/-/extension-italic-2.0.0-beta.28.tgz#bf88ecae64c8f2f69f1f508b802c1efd7454a84e"
+  integrity sha512-/pKRiCfewh7nqiXRD3N4hQHfGrGNOiWPFYZfY35bSpvTms7PDb/MF7xT1CWW23hSpY31BBS+R/a66vlR/gqu7Q==
+
+"@tiptap/extension-list-item@^2.0.0-beta.23":
+  version "2.0.0-beta.23"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-list-item/-/extension-list-item-2.0.0-beta.23.tgz#6d1ac7235462b0bcee196f42bb1871669480b843"
+  integrity sha512-AkzvdELz3ZnrlZM0r9+ritBDOnAjXHR/8zCZhW0ZlWx4zyKPMsNG5ygivY+xr4QT65NEGRT8P8b2zOhXrMjjMQ==
+
+"@tiptap/extension-ordered-list@^2.0.0-beta.30":
+  version "2.0.0-beta.30"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-ordered-list/-/extension-ordered-list-2.0.0-beta.30.tgz#1f656b664302d90272c244b2e478d7056203f2a8"
+  integrity sha512-GRxGQdq1u0Rp5N8TjthCqoZ//460m343A0HCN7UwfQOnX7Ipv0UJemwNkSHWrl7Pexym9vy3yPWgrn7oRRmgEw==
+
+"@tiptap/extension-paragraph@^2.0.0-beta.26":
+  version "2.0.0-beta.26"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-paragraph/-/extension-paragraph-2.0.0-beta.26.tgz#5199c8cedb9c076347a2e15cc67442ef7c3c3fbb"
+  integrity sha512-WcYsuUa7LLfk0vi7I1dVjdMRu53B52FMMqd+UL1qPdDKVkU3DBsZVwPj+yyfQyqN8Mc/xyg9VacGaiKFLmWNDg==
+
+"@tiptap/extension-strike@^2.0.0-beta.29":
+  version "2.0.0-beta.29"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-strike/-/extension-strike-2.0.0-beta.29.tgz#7004d0c5d126b0517fa78efc5a333a4b8e3334bf"
+  integrity sha512-zqFuY7GfNmZ/KClt6kxQ+msGo3syqucP/Xnlihxi+/h/G+oTvEwyOIXCtDOltvxcsWH/TUsdr5vzLp0j+Mdc6Q==
+
+"@tiptap/extension-table-cell@^2.0.0-beta.23":
+  version "2.0.0-beta.23"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-table-cell/-/extension-table-cell-2.0.0-beta.23.tgz#a460318be151434ac31daffe94c2c4e53f2ea229"
+  integrity sha512-LTvmAXkbwpLlGhwvVJabOKJbrWZYRp+0DizJaFtBXLSAHqzW9FQjuUhkTokeDRSc+PHMOb0tE1Kz6CRd8onIkA==
+
+"@tiptap/extension-table-header@^2.0.0-beta.25":
+  version "2.0.0-beta.25"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-table-header/-/extension-table-header-2.0.0-beta.25.tgz#65e16d2a12973c60b837de100a5ac88be1da7372"
+  integrity sha512-MO9Fa4Ng2sSBAov8cBJR3CxUBSaQQhNY6Dq2h3JINWUs03GPN3iihiVtD5N+0SFs8O4xJ5B8Cifkvd72lSqI3w==
+
+"@tiptap/extension-table-row@^2.0.0-beta.22":
+  version "2.0.0-beta.22"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-table-row/-/extension-table-row-2.0.0-beta.22.tgz#a113ca3cde46af1fe7ecc4c229770726aedfd342"
+  integrity sha512-o47oQn3Sv27iIinBf1s1nHoiFLdujNtSkfHhUgUz8zeyXRT2PtKmwSSEglB3c5jGAmt1CLfU8QJrmrV38CwFYw==
+
+"@tiptap/extension-table@^2.0.0-beta.54":
+  version "2.0.0-beta.54"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-table/-/extension-table-2.0.0-beta.54.tgz#d0590fb1634bbad34fe407018c9c4de1388803d3"
+  integrity sha512-KZbocjS9EbWMr/z7U8CUnVhMlV/YEDi7nV1lmrfzmQ6CVIJFQ9FrWCztN1QH3hWnvIcRnR6GM+5VdjFlalsp3A==
+  dependencies:
+    "@_ueberdosis/prosemirror-tables" "1.1.3"
+    prosemirror-model "1.18.1"
+    prosemirror-state "1.4.1"
+    prosemirror-view "1.26.2"
+
+"@tiptap/extension-text@^2.0.0-beta.17":
+  version "2.0.0-beta.17"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-text/-/extension-text-2.0.0-beta.17.tgz#4fdd1bdf62c82c1af6feef91c689906a8f5b171e"
+  integrity sha512-OyKL+pqWJEtjyd9/mrsuY1kZh2b3LWpOQDWKtd4aWR4EA0efmQG+7FPwcIeAVEh7ZoqM+/ABCnPjN6IjzIrSfg==
+
+"@tiptap/starter-kit@^2.0.0-beta.191":
+  version "2.0.0-beta.191"
+  resolved "https://registry.yarnpkg.com/@tiptap/starter-kit/-/starter-kit-2.0.0-beta.191.tgz#3f549367f6dbb8cf83f63aa0941722d91d0fd8e7"
+  integrity sha512-YRrBCi9W4jiH/xLTJJOCdD7pL4Wb98Ip8qCJ94RElShDj0O1i5tT9wWlgVWoGIU+CRAds5XENRwZ97sJ+YfYyg==
+  dependencies:
+    "@tiptap/core" "^2.0.0-beta.182"
+    "@tiptap/extension-blockquote" "^2.0.0-beta.29"
+    "@tiptap/extension-bold" "^2.0.0-beta.28"
+    "@tiptap/extension-bullet-list" "^2.0.0-beta.29"
+    "@tiptap/extension-code" "^2.0.0-beta.28"
+    "@tiptap/extension-code-block" "^2.0.0-beta.42"
+    "@tiptap/extension-document" "^2.0.0-beta.17"
+    "@tiptap/extension-dropcursor" "^2.0.0-beta.29"
+    "@tiptap/extension-gapcursor" "^2.0.0-beta.39"
+    "@tiptap/extension-hard-break" "^2.0.0-beta.33"
+    "@tiptap/extension-heading" "^2.0.0-beta.29"
+    "@tiptap/extension-history" "^2.0.0-beta.26"
+    "@tiptap/extension-horizontal-rule" "^2.0.0-beta.36"
+    "@tiptap/extension-italic" "^2.0.0-beta.28"
+    "@tiptap/extension-list-item" "^2.0.0-beta.23"
+    "@tiptap/extension-ordered-list" "^2.0.0-beta.30"
+    "@tiptap/extension-paragraph" "^2.0.0-beta.26"
+    "@tiptap/extension-strike" "^2.0.0-beta.29"
+    "@tiptap/extension-text" "^2.0.0-beta.17"
+
+"@tiptap/vue-3@^2.0.0-beta.96":
+  version "2.0.0-beta.96"
+  resolved "https://registry.yarnpkg.com/@tiptap/vue-3/-/vue-3-2.0.0-beta.96.tgz#c91d3015cbf42bbdf22c98903a1af3f2116421ce"
+  integrity sha512-KjrZ4dkqK42VO2c+V/iBWdJfj1NPUGdme+erOX3ZKrSpzMEAc1pUDLgkyehtU2N16kaz2E70nfve2OGl8JotYA==
+  dependencies:
+    "@tiptap/extension-bubble-menu" "^2.0.0-beta.61"
+    "@tiptap/extension-floating-menu" "^2.0.0-beta.56"
+    prosemirror-state "1.4.1"
+    prosemirror-view "1.26.2"
+
 "@types/codemirror@^5.60.5":
   version "5.60.5"
   resolved "https://registry.yarnpkg.com/@types/codemirror/-/codemirror-5.60.5.tgz#5b989a3b4bbe657458cf372c92b6bfda6061a2b7"
@@ -227,6 +450,11 @@
   resolved "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz#05301a4d5e62963227eaafe0ce04dd77c54ea5c2"
   integrity sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==
 
+"@types/lowlight@^0.0.3":
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@types/lowlight/-/lowlight-0.0.3.tgz#433b03dd63894dde17860063f4c90a688431194b"
+  integrity sha512-R83q/yPX2nIlo9D3WtSjyUDd57t8s+GVLaL8YIv3k7zMMWpYpOXqjJgrWp80qXUJB/a1t76nTyBpxrv0JNYaEg==
+
 "@types/mdast@^3.0.0", "@types/mdast@^3.0.10":
   version "3.0.10"
   resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.10.tgz#4724244a82a4598884cbbe9bcfd73dff927ee8af"
@@ -2162,7 +2390,7 @@ highlight.js@^11.5.0:
   resolved "https://registry.npmjs.org/highlight.js/-/highlight.js-11.5.1.tgz#027c24e4509e2f4dcd00b4a6dda542ce0a1f7aea"
   integrity sha512-LKzHqnxr4CrD2YsNoIf/o5nJ09j4yi/GcH5BnYz9UnVpZdS4ucMgvP61TDty5xJcFGRjnH4DpujkS9bHT3hq0Q==
 
-highlight.js@^11.6.0:
+highlight.js@^11.6.0, highlight.js@~11.6.0:
   version "11.6.0"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.6.0.tgz#a50e9da05763f1bb0c1322c8f4f755242cff3f5a"
   integrity sha512-ig1eqDzJaB0pqEvlPVIpSSyMaO92bH1N2rJpLMN/nX396wTpDA4Eq0uK+7I/2XG17pFaaKE0kjV/XPeGt7Evjw==
@@ -2482,6 +2710,15 @@ longest-streak@^3.0.0:
   resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-3.0.1.tgz#c97315b7afa0e7d9525db9a5a2953651432bdc5d"
   integrity sha512-cHlYSUpL2s7Fb3394mYxwTYj8niTaNHUCLr0qdiCXQfSjfuA7CKofpX2uSwEfFDQ0EB7JcnMnm+GjbqqoinYYg==
 
+lowlight@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-2.7.0.tgz#2d3f267aa3006bb20473db5363f9941ffd7bab11"
+  integrity sha512-RRdrHalFfjpxL91ITTX7KhJYH3QmX5bW9Uie2D2E5GPIR3XBYDYhScBjE291ewFZkStz/k2PN9KC+8deNLiI3Q==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    fault "^2.0.0"
+    highlight.js "~11.6.0"
+
 lru-cache@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
@@ -3097,6 +3334,11 @@ optionator@^0.9.1:
     type-check "^0.4.0"
     word-wrap "^1.2.3"
 
+orderedmap@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/orderedmap/-/orderedmap-2.0.0.tgz#12ff5ef6ea9d12d6430b80c701b35475e1c9ff34"
+  integrity sha512-buf4PoAMlh45b8a8gsGy/X6w279TSqkyAS0C0wdTSJwFSU+ljQFJON5I8NfjLHoCXwpSROIo2wr0g33T+kQshQ==
+
 p-limit@^1.1.0:
   version "1.3.0"
   resolved "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"
@@ -3229,6 +3471,107 @@ property-information@^6.0.0:
   resolved "https://registry.yarnpkg.com/property-information/-/property-information-6.1.1.tgz#5ca85510a3019726cb9afed4197b7b8ac5926a22"
   integrity sha512-hrzC564QIl0r0vy4l6MvRLhafmUowhO/O3KgVSoXIbbA2Sz4j8HGpJc6T2cubRVwMwpdiG/vKGfhT4IixmKN9w==
 
+prosemirror-commands@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/prosemirror-commands/-/prosemirror-commands-1.3.0.tgz#361b2e2b2a347ce7453386459f97c3f549a1113b"
+  integrity sha512-BwBbZ5OAScPcm0x7H8SPbqjuEJnCU2RJT9LDyOiiIl/3NbL1nJZI4SFNHwU2e/tRr2Xe7JsptpzseqvZvToLBQ==
+  dependencies:
+    prosemirror-model "^1.0.0"
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.0.0"
+
+prosemirror-dropcursor@1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/prosemirror-dropcursor/-/prosemirror-dropcursor-1.5.0.tgz#edbc61d6f71f9f924130eec8e85b0861357957c9"
+  integrity sha512-vy7i77ddKyXlu8kKBB3nlxLBnsWyKUmQIPB5x8RkYNh01QNp/qqGmdd5yZefJs0s3rtv5r7Izfu2qbtr+tYAMQ==
+  dependencies:
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.1.0"
+    prosemirror-view "^1.1.0"
+
+prosemirror-gapcursor@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/prosemirror-gapcursor/-/prosemirror-gapcursor-1.3.0.tgz#e07c22ad959b86ec0c4cfc590cc5f484dd984d56"
+  integrity sha512-9Tdx83xB2W4Oqchm12FtCkSizbqvi64cjs1I9TRPblqdA5TUWoVZ4ZI+t71Jh6HSEh4cDMPzx3UwfryJtKlb/w==
+  dependencies:
+    prosemirror-keymap "^1.0.0"
+    prosemirror-model "^1.0.0"
+    prosemirror-state "^1.0.0"
+    prosemirror-view "^1.0.0"
+
+prosemirror-history@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/prosemirror-history/-/prosemirror-history-1.3.0.tgz#bf5a1ff7759aca759ddf0c722c2fa5b14fb0ddc1"
+  integrity sha512-qo/9Wn4B/Bq89/YD+eNWFbAytu6dmIM85EhID+fz9Jcl9+DfGEo8TTSrRhP15+fFEoaPqpHSxlvSzSEbmlxlUA==
+  dependencies:
+    prosemirror-state "^1.2.2"
+    prosemirror-transform "^1.0.0"
+    rope-sequence "^1.3.0"
+
+prosemirror-keymap@1.2.0, prosemirror-keymap@^1.0.0, prosemirror-keymap@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/prosemirror-keymap/-/prosemirror-keymap-1.2.0.tgz#d5cc9da9b712020690a994b50b92a0e448a60bf5"
+  integrity sha512-TdSfu+YyLDd54ufN/ZeD1VtBRYpgZnTPnnbY+4R08DDgs84KrIPEPbJL8t1Lm2dkljFx6xeBE26YWH3aIzkPKg==
+  dependencies:
+    prosemirror-state "^1.0.0"
+    w3c-keyname "^2.2.0"
+
+prosemirror-model@1.18.1, prosemirror-model@^1.0.0, prosemirror-model@^1.16.0, prosemirror-model@^1.8.1:
+  version "1.18.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.18.1.tgz#1d5d6b6de7b983ee67a479dc607165fdef3935bd"
+  integrity sha512-IxSVBKAEMjD7s3n8cgtwMlxAXZrC7Mlag7zYsAKDndAqnDScvSmp/UdnRTV/B33lTCVU3CCm7dyAn/rVVD0mcw==
+  dependencies:
+    orderedmap "^2.0.0"
+
+prosemirror-schema-list@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/prosemirror-schema-list/-/prosemirror-schema-list-1.2.0.tgz#1932268593a7396c0ac168cbe31f28187406ce24"
+  integrity sha512-8PT/9xOx1HHdC7fDNNfhQ50Z8Mzu7nKyA1KCDltSpcZVZIbB0k7KtsHrnXyuIhbLlScoymBiLZ00c5MH6wdFsA==
+  dependencies:
+    prosemirror-model "^1.0.0"
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.0.0"
+
+prosemirror-state@1.4.1, prosemirror-state@^1.0.0, prosemirror-state@^1.2.2, prosemirror-state@^1.3.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-state/-/prosemirror-state-1.4.1.tgz#f6e26c7b6a7e11206176689eb6ebbf91870953e1"
+  integrity sha512-U/LBDW2gNmVa07sz/D229XigSdDQ5CLFwVB1Vb32MJbAHHhWe/6pOc721faI17tqw4pZ49i1xfY/jEZ9tbIhPg==
+  dependencies:
+    prosemirror-model "^1.0.0"
+    prosemirror-transform "^1.0.0"
+
+prosemirror-transform@1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/prosemirror-transform/-/prosemirror-transform-1.6.0.tgz#8162dbfaf124f9253a7ab28605a9460411a96a53"
+  integrity sha512-MAp7AjsjEGEqQY0sSMufNIUuEyB1ZR9Fqlm8dTwwWwpEJRv/plsKjWXBbx52q3Ml8MtaMcd7ic14zAHVB3WaMw==
+  dependencies:
+    prosemirror-model "^1.0.0"
+
+prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0, prosemirror-transform@^1.2.1:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/prosemirror-transform/-/prosemirror-transform-1.7.0.tgz#a8a0768f3ee6418d26ebef435beda9d43c65e472"
+  integrity sha512-O4T697Cqilw06Zvc3Wm+e237R6eZtJL/xGMliCi+Uo8VL6qHk6afz1qq0zNjT3eZMuYwnP8ZS0+YxX/tfcE9TQ==
+  dependencies:
+    prosemirror-model "^1.0.0"
+
+prosemirror-view@1.26.2:
+  version "1.26.2"
+  resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.26.2.tgz#e673894ecf26aea330b727622d561c51b41d31eb"
+  integrity sha512-CGKw+GadkfSBEwRAJTHCEKJ4DlV6/3IhAdjpwGyZHUHtbP7jX4Ol4zmi7xa2c6GOabDlIJLYXJydoNYLX7lNeQ==
+  dependencies:
+    prosemirror-model "^1.16.0"
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.1.0"
+
+prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.13.3:
+  version "1.27.2"
+  resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.27.2.tgz#7f1e9b73698ba2622c515e2a617fd49232d214c4"
+  integrity sha512-RE2GLUaYXUyrpUl58vHoznZ3wKAj7z8f1ZZolivljwwOe1yiSzsEsuJPZmm3mpBXRgHGk7LWh5v+uhdDXAbjkA==
+  dependencies:
+    prosemirror-model "^1.16.0"
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.1.0"
+
 punycode@^2.1.0:
   version "2.1.1"
   resolved "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
@@ -3437,6 +3780,11 @@ rollup@^2.70.2:
   optionalDependencies:
     fsevents "~2.3.2"
 
+rope-sequence@^1.3.0:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/rope-sequence/-/rope-sequence-1.3.3.tgz#3f67fc106288b84b71532b4a5fd9d4881e4457f0"
+  integrity sha512-85aZYCxweiD5J8yTEbw+E6A27zSnLPNDL0WfPdw3YYodq7WjnTKo0q4dtyQ2gz23iPT8Q9CUyJtAaUNcTxRf5Q==
+
 rw@1:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4"
@@ -3927,6 +4275,11 @@ vueuc@^0.4.47:
     vdirs "^0.1.4"
     vooks "^0.2.4"
 
+w3c-keyname@^2.2.0:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.6.tgz#8412046116bc16c5d73d4e612053ea10a189c85f"
+  integrity sha512-f+fciywl1SJEniZHD6H+kUO8gOnwIr7f4ijKA6+ZvJFjeGi1r4PDLl53Ayud9O/rk64RqgoQine0feoeOU0kXg==
+
 web-namespaces@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-2.0.1.tgz#1010ff7c650eccb2592cebeeaf9a1b253fd40692"