fix: tasklist 央视

src/components/tiptap/HbAdminTipTap.vue

@@ -7,6 +7,7 @@ import {onBeforeUnmount, onMounted, ref, watch} from "vue";
 import {useDebounceFn} from "@vueuse/core";
 
 import {useThemeVars} from 'naive-ui'
+
 const vars = useThemeVars()
 
 StarterKit.options.highlight = {multicolor: true}
@@ -24,10 +25,10 @@ const characters = ref(0)
 const fullscreen = ref(false)
 const selectedResizer = ref('')
 
-const updateEditorWordCount = useDebounceFn(()=> {
+const updateEditorWordCount = useDebounceFn(() => {
   words.value = editor.value.storage.characterCount.words()
   characters.value = editor.value.storage.characterCount.characters()
-},300)
+}, 300)
 
 const isFocused = ref(false)
 
@@ -49,34 +50,31 @@ editor = useEditor({
   onFocus: () => {
     isFocused.value = true
   },
-  onBlur: () =>{
+  onBlur: () => {
     isFocused.value = false
     selectedResizer.value = ''
   },
-  onSelectionUpdate: ({editor})=>{
+  onSelectionUpdate: ({editor}) => {
     //取消当前选中的resizer
-    if (editor.storage.selectedResizer.value){
-      if (!editor.isActive('hb-image') && !editor.isActive('hb-video')){
+    if (editor.storage.selectedResizer.value) {
+      if (!editor.isActive('hb-image') && !editor.isActive('hb-video')) {
         editor.storage.selectedResizer.value = ''
       }
     }
   }
 })
 
-onMounted(()=>{
+onMounted(() => {
   editor.value.storage.fullscreen = fullscreen
   editor.value.storage.selectedResizer = selectedResizer
 })
 
 
-
-
-
 const emit = defineEmits(['update:modelValue'])
 
-watch(()=>props.modelValue,(value)=>{
+watch(() => props.modelValue, (value) => {
   // HTML
-  const isSame =editor.value.getHTML() === value
+  const isSame = editor.value.getHTML() === value
 
   // JSON
   // const isSame = JSON.stringify(this.editor.getJSON()) === JSON.stringify(value)
@@ -88,26 +86,33 @@ watch(()=>props.modelValue,(value)=>{
   editor.value.commands.setContent(value, false)
 })
 
-onMounted(()=>{
+onMounted(() => {
   emit('update:modelValue', editor.value.getHTML())
   updateEditorWordCount()
 })
 
-onBeforeUnmount(()=>{
+onBeforeUnmount(() => {
   editor.value.destroy()
 })
 
+function tab(e) {
+  if (e.keyCode === 9) {
+    e.preventDefault()
+  }
+}
+
 </script>
 
 <template>
-  <div class="editor-background" :class="{'fullscreen':fullscreen}">
-    <div class="editor" v-if="editor" :class="{'fullscreen':fullscreen,'focus':isFocused && !fullscreen}" spellcheck="false">
-        <hb-tiptap-menu-bar class="editor-header" :editor="editor"></hb-tiptap-menu-bar>
-        <editor-content class="editor-body" :editor="editor"/>
-        <div class="editor-footer">
-          <div class="footer-item">短语 {{words}}</div>
-          <div class="footer-item">字符 {{characters}}</div>
-        </div>
+  <div class="editor-background" :class="{'fullscreen':fullscreen}" @keydown="tab">
+    <div class="editor" v-if="editor" :class="{'fullscreen':fullscreen,'focus':isFocused && !fullscreen}"
+         spellcheck="false">
+      <hb-tiptap-menu-bar class="editor-header" :editor="editor"></hb-tiptap-menu-bar>
+      <editor-content class="editor-body" :editor="editor"/>
+      <div class="editor-footer">
+        <div class="footer-item">短语 {{ words }}</div>
+        <div class="footer-item">字符 {{ characters }}</div>
+      </div>
     </div>
   </div>
 </template>
@@ -120,8 +125,8 @@ onBeforeUnmount(()=>{
   flex-direction: column;
   box-sizing: border-box;
   height: 100%;
-  transition-property: border-color,box-shadow;
-  transition-duration:  0.2s;
+  transition-property: border-color, box-shadow;
+  transition-duration: 0.2s;
   background: v-bind(vars.inputColor);
 }
 
@@ -130,7 +135,7 @@ onBeforeUnmount(()=>{
   height: 100%;
 }
 
-.editor-background.fullscreen{
+.editor-background.fullscreen {
   position: fixed;
   inset: 0;
   z-index: 1;
@@ -139,25 +144,25 @@ onBeforeUnmount(()=>{
   background: v-bind(vars.cardColor);
 }
 
-.editor:hover{
-  border-color: v-bind(vars. primaryColorHover);
+.editor:hover {
+  border-color: v-bind(vars.primaryColorHover);
 }
 
-.editor.focus{
+.editor.focus {
   border-color: v-bind(vars.primaryColor);
   box-shadow: 0 0 0 2px rgba(24, 160, 88, 0.2);
 }
 
-.editor.fullscreen{
+.editor.fullscreen {
   position: fixed;
   inset: 0;
   z-index: 1;
   margin: 0;
   padding: 0;
 }
 
-.editor.fullscreen:hover{
-  border-color: rgba(0,0,0,0) !important;
+.editor.fullscreen:hover {
+  border-color: rgba(0, 0, 0, 0) !important;
 }
 
 .editor-header {
@@ -173,19 +178,19 @@ onBeforeUnmount(()=>{
   padding: 10px;
 }
 
-.editor-footer{
+.editor-footer {
   height: 20px;
   border-top: 1px solid rgba(204, 204, 204, 0.3);
   display: flex;
   justify-content: flex-end;
   padding: 5px 10px;
 }
 
-.footer-item{
+.footer-item {
   font-size: 12px;
 }
 
-.footer-item+.footer-item{
+.footer-item + .footer-item {
   margin-left: 10px;
 }
 </style>

src/components/tiptap/TODO.md

@@ -23,7 +23,9 @@
 - [x] 编辑器全屏
 - [x] 字数统计
 - [ ] HTML模式预览
+- [ ] 主界面可以设置编辑区、预览
 
 ## 待优化
 - [ ] tab缩进
 - [x] 图片视频选中问题，弄个全局变量估计就可以，类似fullscreent，resize要监听这个变量
+- [ ] todo样式优化

src/components/tiptap/editor.css

@@ -179,39 +179,6 @@
     align-items: center;
 }
 
-.editor-body ul[data-type=taskList] .li[data-text-align=right] {
-    justify-content: flex-end !important;
-}
-
-.editor-body ul[data-type=taskList] .li[data-text-align=center] {
-    justify-content: center !important;
-}
-
-.editor-body ul[data-type=taskList] .li[data-text-align=justify] {
-    text-align: space-between !important;
-}
-
-.editor-body ul[data-type=taskList] .li .todo-content {
-    padding-left: 10px;
-}
-
-.editor-body ul[data-type=taskList] .li .todo-content > p {
-    font-size: 16px;
-}
-
-.editor-body ul[data-type=taskList] .li .todo-content > p:last-of-type {
-    margin-bottom: 0;
-}
-
-.editor-body ul[data-type=taskList] .li--done > .todo-checkbox {
-    color: #409eff;
-}
-
-.editor-body ul[data-type=taskList] .li--done > .todo-content > p {
-    color: #409eff;
-    text-decoration: line-through;
-}
-
 .editor-body hr {
     margin-top: 20px;
     margin-bottom: 20px;
@@ -310,31 +277,25 @@
     cursor: col-resize;
 }
 
-.editor-body .task-list-item {
+.editor-body ul[data-type=taskList]{
     list-style-type: none;
+    max-width: 100%;
+    padding: 0;
+    margin: 0;
 }
 
-.editor-body .task-list-item label {
-    font-weight: 400;
-}
-
-.editor-body .task-list-item.enabled label {
-    cursor: pointer;
-}
-
-.editor-body .task-list-item+.task-list-item {
-    margin-top: 3px;
-}
-
-.editor-body .task-list-item .handle {
-    display: none;
-}
-
-.editor-body .task-list-item-checkbox {
-    margin: 0 .2em .25em -1.6em;
-    vertical-align: middle;
+.editor-body ul[data-type=taskList] li {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    margin: 0;
 }
 
-.editor-body .contains-task-list:dir(rtl) .task-list-item-checkbox {
-    margin: 0 -1.6em .25em .2em;
+.editor-body ul[data-type=taskList] li label{
+    display: flex;
+    align-items: center;
+    margin-top: 2px;
+    margin-right: 5px;
+    justify-content: flex-start;
+    margin-left: -2px;
 }