diff --git a/src/views/Editor/Remark/Editor.vue b/src/views/Editor/Remark/Editor.vue
index 1009c7f2..10b18bb1 100644
--- a/src/views/Editor/Remark/Editor.vue
+++ b/src/views/Editor/Remark/Editor.vue
@@ -22,6 +22,8 @@
+
+
@@ -34,6 +36,7 @@ import { useMainStore } from '@/store'
import type { EditorView } from 'prosemirror-view'
import { initProsemirrorEditor, createDocument } from '@/utils/prosemirror'
import { addMark, autoSelectAll, getTextAttrs, type TextAttrs } from '@/utils/prosemirror/utils'
+import { toggleList } from '@/utils/prosemirror/commands/toggleList'
import tippy, { type Instance } from 'tippy.js'
import ColorPicker from '@/components/ColorPicker/index.vue'
@@ -99,18 +102,21 @@ const handleMouseup = () => {
if (menuInstance.value) {
attr.value = getTextAttrs(editorView)
+ const { x, y, left, top } = range.getBoundingClientRect()
+
menuInstance.value.setProps({
- getReferenceClientRect: () => range.getBoundingClientRect(),
+ getReferenceClientRect: () => ({
+ x, y, left, top,
+ height: 0,
+ width: 0,
+ right: left,
+ bottom: top,
+ } as DOMRect),
})
menuInstance.value.show()
}
}
-const handleMousedown = () => {
- hideMenuInstance()
- window.getSelection()?.removeAllRanges()
-}
-
const execCommand = (command: string, value?: string) => {
if (command === 'color' && value) {
const mark = editorView.state.schema.marks.forecolor.create({ color: value })
@@ -138,6 +144,14 @@ const execCommand = (command: string, value?: string) => {
autoSelectAll(editorView)
toggleMark(editorView.state.schema.marks.strikethrough)(editorView.state, editorView.dispatch)
}
+ else if (command === 'bulletList') {
+ const { bullet_list: bulletList, list_item: listItem } = editorView.state.schema.nodes
+ toggleList(bulletList, listItem)(editorView.state, editorView.dispatch)
+ }
+ else if (command === 'orderedList') {
+ const { ordered_list: orderedList, list_item: listItem } = editorView.state.schema.nodes
+ toggleList(orderedList, listItem)(editorView.state, editorView.dispatch)
+ }
else if (command === 'clear') {
autoSelectAll(editorView)
const { $from, $to } = editorView.state.selection
@@ -155,7 +169,11 @@ onMounted(() => {
focus: handleFocus,
blur: handleBlur,
mouseup: handleMouseup,
- mousedown: handleMousedown,
+ mousedown: () => {
+ window.getSelection()?.removeAllRanges()
+ hideMenuInstance()
+ },
+ keydown: hideMenuInstance,
input: handleInput,
},
}, {
@@ -167,7 +185,7 @@ onMounted(() => {
content: menuRef.value!,
interactive: true,
trigger: 'manual',
- placement: 'top',
+ placement: 'top-start',
hideOnClick: 'toggle',
offset: [0, 6],
})
@@ -179,10 +197,16 @@ onUnmounted(() => {