diff --git a/packages/editor/core/src/ui/extensions/horizontal-rule.tsx b/packages/editor/core/src/ui/extensions/horizontal-rule.tsx deleted file mode 100644 index cee0ded8354..00000000000 --- a/packages/editor/core/src/ui/extensions/horizontal-rule.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import { TextSelection } from "prosemirror-state"; - -import { InputRule, mergeAttributes, Node, nodeInputRule, wrappingInputRule } from "@tiptap/core"; - -/** - * Extension based on: - * - Tiptap HorizontalRule extension (https://tiptap.dev/api/nodes/horizontal-rule) - */ - -export interface HorizontalRuleOptions { - HTMLAttributes: Record; -} - -declare module "@tiptap/core" { - interface Commands { - horizontalRule: { - /** - * Add a horizontal rule - */ - setHorizontalRule: () => ReturnType; - }; - } -} - -export const HorizontalRule = Node.create({ - name: "horizontalRule", - - addOptions() { - return { - HTMLAttributes: {}, - }; - }, - - group: "block", - - addAttributes() { - return { - color: { - default: "#dddddd", - }, - }; - }, - - parseHTML() { - return [ - { - tag: `div[data-type="${this.name}"]`, - }, - ]; - }, - - renderHTML({ HTMLAttributes }) { - return [ - "div", - mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { - "data-type": this.name, - }), - ["div", {}], - ]; - }, - - addCommands() { - return { - setHorizontalRule: - () => - ({ chain }) => { - return ( - chain() - .insertContent({ type: this.name }) - // set cursor after horizontal rule - .command(({ tr, dispatch }) => { - if (dispatch) { - const { $to } = tr.selection; - const posAfter = $to.end(); - - if ($to.nodeAfter) { - tr.setSelection(TextSelection.create(tr.doc, $to.pos)); - } else { - // add node after horizontal rule if it’s the end of the document - const node = $to.parent.type.contentMatch.defaultType?.create(); - - if (node) { - tr.insert(posAfter, node); - tr.setSelection(TextSelection.create(tr.doc, posAfter)); - } - } - - tr.scrollIntoView(); - } - - return true; - }) - .run() - ); - }, - }; - }, - - addInputRules() { - return [ - new InputRule({ - find: /^(?:---|—-|___\s|\*\*\*\s)$/, - handler: ({ state, range, match }) => { - state.tr.replaceRangeWith(range.from, range.to, this.type.create()); - }, - }), - ]; - }, -}); diff --git a/packages/editor/core/src/ui/extensions/index.tsx b/packages/editor/core/src/ui/extensions/index.tsx index 19d8ce894f8..5bfba3b0f55 100644 --- a/packages/editor/core/src/ui/extensions/index.tsx +++ b/packages/editor/core/src/ui/extensions/index.tsx @@ -1,26 +1,25 @@ -import StarterKit from "@tiptap/starter-kit"; -import TiptapUnderline from "@tiptap/extension-underline"; -import TextStyle from "@tiptap/extension-text-style"; import { Color } from "@tiptap/extension-color"; import TaskItem from "@tiptap/extension-task-item"; import TaskList from "@tiptap/extension-task-list"; +import TextStyle from "@tiptap/extension-text-style"; +import TiptapUnderline from "@tiptap/extension-underline"; +import StarterKit from "@tiptap/starter-kit"; import { Markdown } from "tiptap-markdown"; -import { TableHeader } from "src/ui/extensions/table/table-header/table-header"; import { Table } from "src/ui/extensions/table/table"; import { TableCell } from "src/ui/extensions/table/table-cell/table-cell"; +import { TableHeader } from "src/ui/extensions/table/table-header/table-header"; import { TableRow } from "src/ui/extensions/table/table-row/table-row"; -import { HorizontalRule } from "src/ui/extensions/horizontal-rule"; import { ImageExtension } from "src/ui/extensions/image"; import { isValidHttpUrl } from "src/lib/utils"; import { Mentions } from "src/ui/mentions"; -import { CustomKeymap } from "src/ui/extensions/keymap"; import { CustomCodeBlockExtension } from "src/ui/extensions/code"; -import { CustomQuoteExtension } from "src/ui/extensions/quote"; import { ListKeymap } from "src/ui/extensions/custom-list-keymap"; +import { CustomKeymap } from "src/ui/extensions/keymap"; +import { CustomQuoteExtension } from "src/ui/extensions/quote"; import { DeleteImage } from "src/types/delete-image"; import { IMentionSuggestion } from "src/types/mention-suggestion"; @@ -55,7 +54,9 @@ export const CoreEditorExtensions = ( }, code: false, codeBlock: false, - horizontalRule: false, + horizontalRule: { + HTMLAttributes: { class: "mt-4 mb-4" }, + }, blockquote: false, dropcursor: { color: "rgba(var(--color-text-100))", @@ -104,7 +105,6 @@ export const CoreEditorExtensions = ( transformCopiedText: true, transformPastedText: true, }), - HorizontalRule, Table, TableHeader, TableCell, diff --git a/packages/editor/core/src/ui/read-only/extensions.tsx b/packages/editor/core/src/ui/read-only/extensions.tsx index b0879d8cdea..cf7c4ee1823 100644 --- a/packages/editor/core/src/ui/read-only/extensions.tsx +++ b/packages/editor/core/src/ui/read-only/extensions.tsx @@ -11,7 +11,6 @@ import { TableHeader } from "src/ui/extensions/table/table-header/table-header"; import { Table } from "src/ui/extensions/table/table"; import { TableCell } from "src/ui/extensions/table/table-cell/table-cell"; import { TableRow } from "src/ui/extensions/table/table-row/table-row"; -import { HorizontalRule } from "src/ui/extensions/horizontal-rule"; import { ReadOnlyImageExtension } from "src/ui/extensions/image/read-only-image"; import { isValidHttpUrl } from "src/lib/utils"; @@ -51,7 +50,9 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: { }, }, codeBlock: false, - horizontalRule: false, + horizontalRule: { + HTMLAttributes: { class: "mt-4 mb-4" }, + }, dropcursor: { color: "rgba(var(--color-text-100))", width: 2, @@ -72,7 +73,6 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: { class: "rounded-lg border border-custom-border-300", }, }), - HorizontalRule, TiptapUnderline, TextStyle, Color,