123 lines
3.6 KiB
TypeScript
123 lines
3.6 KiB
TypeScript
import { Extension } from "@tiptap/core"
|
|
import {
|
|
applyDocsBulletStyle,
|
|
applyDocsChecklistStyle,
|
|
applyDocsOrderedStyle,
|
|
continueDocsOrderedList,
|
|
restartDocsOrderedList,
|
|
setDocsOrderedListStart,
|
|
} from "@/lib/drive/docs-list-actions"
|
|
import {
|
|
DOCS_DEFAULT_BULLET_STYLE,
|
|
DOCS_DEFAULT_ORDERED_STYLE,
|
|
normalizeBulletStyleId,
|
|
normalizeOrderedStyleId,
|
|
type DocsBulletStyleId,
|
|
type DocsChecklistStyleId,
|
|
type DocsOrderedStyleId,
|
|
} from "@/lib/drive/docs-list-styles"
|
|
|
|
declare module "@tiptap/core" {
|
|
interface Commands<ReturnType> {
|
|
docsListStyles: {
|
|
applyDocsBulletStyle: (styleId: DocsBulletStyleId) => ReturnType
|
|
applyDocsOrderedStyle: (styleId: DocsOrderedStyleId) => ReturnType
|
|
applyDocsChecklistStyle: (styleId: DocsChecklistStyleId) => ReturnType
|
|
restartDocsOrderedList: () => ReturnType
|
|
continueDocsOrderedList: () => ReturnType
|
|
setDocsOrderedListStart: (start: number) => ReturnType
|
|
}
|
|
}
|
|
}
|
|
|
|
export const DocsListStyles = Extension.create({
|
|
name: "docsListStyles",
|
|
|
|
addGlobalAttributes() {
|
|
return [
|
|
{
|
|
types: ["bulletList"],
|
|
attributes: {
|
|
bulletStyle: {
|
|
default: DOCS_DEFAULT_BULLET_STYLE,
|
|
parseHTML: (element) =>
|
|
normalizeBulletStyleId(element.getAttribute("data-bullet-style")),
|
|
renderHTML: (attributes) => {
|
|
const style = normalizeBulletStyleId(attributes.bulletStyle)
|
|
return {
|
|
"data-bullet-style": style,
|
|
class: `docs-bullet-list docs-bullet-list--${style}`,
|
|
}
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
types: ["orderedList"],
|
|
attributes: {
|
|
orderedStyle: {
|
|
default: DOCS_DEFAULT_ORDERED_STYLE,
|
|
parseHTML: (element) =>
|
|
normalizeOrderedStyleId(element.getAttribute("data-ordered-style")),
|
|
renderHTML: (attributes) => {
|
|
const style = normalizeOrderedStyleId(attributes.orderedStyle)
|
|
return {
|
|
"data-ordered-style": style,
|
|
class: `docs-ordered-list docs-ordered-list--${style}`,
|
|
}
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
types: ["taskList"],
|
|
attributes: {
|
|
checklistStyle: {
|
|
default: "simple",
|
|
parseHTML: (element) =>
|
|
element.getAttribute("data-checklist-style") === "strikethrough"
|
|
? "strikethrough"
|
|
: "simple",
|
|
renderHTML: (attributes) => {
|
|
const style = (attributes.checklistStyle as DocsChecklistStyleId | undefined) ?? "simple"
|
|
return {
|
|
"data-checklist-style": style,
|
|
class: `docs-task-list docs-task-list--${style}`,
|
|
}
|
|
},
|
|
},
|
|
},
|
|
},
|
|
]
|
|
},
|
|
|
|
addCommands() {
|
|
return {
|
|
applyDocsBulletStyle:
|
|
(styleId) =>
|
|
({ editor }) =>
|
|
applyDocsBulletStyle(editor, styleId),
|
|
applyDocsOrderedStyle:
|
|
(styleId) =>
|
|
({ editor }) =>
|
|
applyDocsOrderedStyle(editor, styleId),
|
|
applyDocsChecklistStyle:
|
|
(styleId) =>
|
|
({ editor }) =>
|
|
applyDocsChecklistStyle(editor, styleId),
|
|
restartDocsOrderedList:
|
|
() =>
|
|
({ editor }) =>
|
|
restartDocsOrderedList(editor),
|
|
continueDocsOrderedList:
|
|
() =>
|
|
({ editor }) =>
|
|
continueDocsOrderedList(editor),
|
|
setDocsOrderedListStart:
|
|
(start) =>
|
|
({ editor }) =>
|
|
setDocsOrderedListStart(editor, start),
|
|
}
|
|
},
|
|
})
|