diff --git a/packages/theme/styles/_text-editor.scss b/packages/theme/styles/_text-editor.scss index b2cc2eea03..50fb11ff2b 100644 --- a/packages/theme/styles/_text-editor.scss +++ b/packages/theme/styles/_text-editor.scss @@ -10,6 +10,7 @@ .text-editor-view { // overflow-y: auto; color: var(--theme-text-primary-color); + margin: 0.25rem 0; .suggestion { padding-left: 0.25rem; @@ -63,6 +64,7 @@ p { margin-block-start: 0.5rem; + margin-block-end: 0.5rem; } >*+* { @@ -72,6 +74,8 @@ ul, ol { + margin-top: 0.5rem; + margin-bottom: 0.5rem; margin-right: .25rem; margin-left: .75rem; padding: 0; @@ -88,8 +92,7 @@ ul[data-type="todoList"] { list-style: none; - margin: 0; - padding: 0; + margin-left: 0; li { margin: 0; diff --git a/plugins/text-editor-resources/src/components/CollaborativeTextEditor.svelte b/plugins/text-editor-resources/src/components/CollaborativeTextEditor.svelte index 60494cc050..feb3c7e23b 100644 --- a/plugins/text-editor-resources/src/components/CollaborativeTextEditor.svelte +++ b/plugins/text-editor-resources/src/components/CollaborativeTextEditor.svelte @@ -161,15 +161,7 @@ editor?.commands.insertTable(options) }, insertCodeBlock: () => { - editor?.commands.insertContent( - { - type: 'codeBlock', - content: [{ type: 'text', text: ' ' }] - }, - { - updateSelection: false - } - ) + editor?.commands.setCodeBlock() }, insertContent: (content) => { editor?.commands.insertContent(content) @@ -341,28 +333,18 @@ targetItem instanceof MouseEvent ? getEventPositionElement(targetItem) : getPopupPositionElement(targetItem) } - // We need to trigger it asynchronously in order for the editor to finish its focus event - // Otherwise, it hoggs the focus from the popup and keyboard navigation doesn't work - setTimeout(() => { - addTableHandler(editor.commands.insertTable, position) - }) + // addTableHandler opens popup so the editor loses focus + // so in the callback we need to refocus again + void addTableHandler((options: { rows?: number, cols?: number, withHeaderRow?: boolean }) => { + editor.chain().insertTable(options).focus(pos).run() + }, position) break } case 'code-block': - // For some reason .setCodeBlock doesnt work in our case - editor.commands.insertContent( - { - type: 'codeBlock', - content: [{ type: 'text', text: ' ' }] - }, - { - updateSelection: false - } - ) - editor.commands.focus(pos, { scrollIntoView: false }) + editor.commands.insertContentAt(pos, { type: 'codeBlock' }) break case 'todo-list': - editor.commands.toggleTaskList() + editor.chain().insertContentAt(pos, { type: 'paragraph' }).toggleTaskList().run() break case 'separator-line': editor.commands.setHorizontalRule() diff --git a/plugins/text-editor-resources/src/components/extension/leftMenu.ts b/plugins/text-editor-resources/src/components/extension/leftMenu.ts index 214eba92ba..c3b27a1cdf 100644 --- a/plugins/text-editor-resources/src/components/extension/leftMenu.ts +++ b/plugins/text-editor-resources/src/components/extension/leftMenu.ts @@ -45,10 +45,12 @@ function posAtLeftMenuElement (view: EditorView, leftMenuElement: HTMLElement, o }) if (position === null) { - return -1 + return 0 } - return position.inside >= 0 ? position.inside : position.pos + const pos = position.inside >= 0 ? position.inside : position.pos + const $pos = view.state.doc.resolve(pos) + return $pos.depth === 0 ? $pos.pos : $pos.before($pos.depth) } function LeftMenu (options: LeftMenuOptions): Plugin { @@ -106,7 +108,6 @@ function LeftMenu (options: LeftMenuOptions): Plugin { (val) => { if (leftMenuElement === null) return const pos = posAtLeftMenuElement(view, leftMenuElement, offsetX) - void options.handleSelect(val, pos, e) } )