List support in documentation pane (#10008)

This commit is contained in:
Kaz Wesley 2024-05-21 08:41:56 -07:00 committed by GitHub
parent 0596533281
commit aae93e6ee6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 61 additions and 1 deletions

View File

@ -1,6 +1,7 @@
<script setup lang="ts">
import { useLexical, type LexicalPlugin } from '@/components/lexical'
import LexicalContent from '@/components/lexical/LexicalContent.vue'
import { listPlugin } from '@/components/lexical/listPlugin'
import { useLexicalSync } from '@/components/lexical/sync'
import { CodeHighlightNode, CodeNode } from '@lexical/code'
import { AutoLinkNode, LinkNode } from '@lexical/link'
@ -52,7 +53,7 @@ const markdownSyncPlugin: LexicalPlugin = {
},
}
useLexical(contentElement, 'MarkdownEditor', [markdownPlugin, markdownSyncPlugin])
useLexical(contentElement, 'MarkdownEditor', [listPlugin, markdownPlugin, markdownSyncPlugin])
</script>
<template>
@ -83,4 +84,16 @@ useLexical(contentElement, 'MarkdownEditor', [markdownPlugin, markdownSyncPlugin
.MarkdownEditor :deep(p + p) {
margin-bottom: 4px;
}
.MarkdownEditor :deep(ol) {
list-style-type: decimal;
list-style-position: outside;
padding-left: 1.6em;
}
.MarkdownEditor :deep(ul) {
list-style-type: disc;
list-style-position: outside;
padding-left: 1.6em;
}
</style>

View File

@ -0,0 +1,47 @@
import type { LexicalPlugin } from '@/components/lexical'
import {
$handleListInsertParagraph,
INSERT_ORDERED_LIST_COMMAND,
INSERT_UNORDERED_LIST_COMMAND,
insertList,
ListItemNode,
ListNode,
REMOVE_LIST_COMMAND,
removeList,
} from '@lexical/list'
import { COMMAND_PRIORITY_LOW, INSERT_PARAGRAPH_COMMAND } from 'lexical'
export const listPlugin: LexicalPlugin = {
nodes: [ListItemNode, ListNode],
register: (editor) => {
editor.registerCommand(
INSERT_ORDERED_LIST_COMMAND,
() => {
insertList(editor, 'number')
return true
},
COMMAND_PRIORITY_LOW,
),
editor.registerCommand(
INSERT_UNORDERED_LIST_COMMAND,
() => {
insertList(editor, 'bullet')
return true
},
COMMAND_PRIORITY_LOW,
),
editor.registerCommand(
REMOVE_LIST_COMMAND,
() => {
removeList(editor)
return true
},
COMMAND_PRIORITY_LOW,
),
editor.registerCommand(
INSERT_PARAGRAPH_COMMAND,
$handleListInsertParagraph,
COMMAND_PRIORITY_LOW,
)
},
}