-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add plainBlockquote and plainParagraph extensions to restrict b…
…lockquote formats
- Loading branch information
Showing
8 changed files
with
215 additions
and
37 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| import { mergeAttributes, Node, wrappingInputRule } from '@tiptap/core' | ||
|
|
||
| export interface BlockquoteOptions { | ||
| /** | ||
| * HTML attributes to add to the blockquote element | ||
| * @default {} | ||
| * @example { class: 'foo' } | ||
| */ | ||
| HTMLAttributes: Record<string, any> | ||
| } | ||
|
|
||
| declare module '@tiptap/core' { | ||
| interface Commands<ReturnType> { | ||
| plainBlockQuote: { | ||
| setPlainBlockquote: () => ReturnType | ||
| } | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Matches a blockquote to a `>` as input. | ||
| */ | ||
| export const inputRegex = /^\s*>\s$/ | ||
|
|
||
| /** | ||
| * This extension allows you to create plain blockquotes, | ||
| * contains only plainParagraph. | ||
| * | ||
| * Forked from: | ||
| * @see https://tiptap.dev/api/nodes/blockquote | ||
| */ | ||
| export const PlainBlockquote = Node.create<BlockquoteOptions>({ | ||
| name: 'plainBlockquote', | ||
|
|
||
| addOptions() { | ||
| return { | ||
| HTMLAttributes: {}, | ||
| } | ||
| }, | ||
|
|
||
| group: 'block', | ||
|
|
||
| content: 'plainBlock+', | ||
|
|
||
| defining: true, | ||
|
|
||
| parseHTML() { | ||
| return [{ tag: 'blockquote' }] | ||
| }, | ||
|
|
||
| renderHTML({ HTMLAttributes }) { | ||
| return [ | ||
| 'blockquote', | ||
| mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), | ||
| 0, | ||
| ] | ||
| }, | ||
|
|
||
| addCommands() { | ||
| return { | ||
| setPlainBlockquote: | ||
| () => | ||
| ({ chain }) => { | ||
| return chain().setPlainParagraph().wrapIn(this.name).run() | ||
| }, | ||
| } | ||
| }, | ||
|
|
||
| addKeyboardShortcuts() { | ||
| return { | ||
| 'Mod-Shift-b': () => this.editor.commands.setPlainBlockquote(), | ||
| } | ||
| }, | ||
|
|
||
| addInputRules() { | ||
| return [ | ||
| wrappingInputRule({ | ||
| find: inputRegex, | ||
| type: this.type, | ||
| }), | ||
| ] | ||
| }, | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| import { mergeAttributes, Node } from '@tiptap/core' | ||
|
|
||
| export interface PlainParagraphOptions { | ||
| /** | ||
| * The HTML attributes for a plain paragraph node. | ||
| * @default {} | ||
| * @example { class: 'foo' } | ||
| */ | ||
| HTMLAttributes: Record<string, any> | ||
| } | ||
|
|
||
| declare module '@tiptap/core' { | ||
| interface Commands<ReturnType> { | ||
| plainParagraph: { | ||
| setPlainParagraph: () => ReturnType | ||
| } | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * This extension allows you to create | ||
| * plain paragraphs (only support plain text and hard break) | ||
| * for plainBlockquote extension. | ||
| * | ||
| * Forked from: | ||
| * @see https://www.tiptap.dev/api/nodes/paragraph | ||
| */ | ||
| export const PlainParagraph = Node.create<PlainParagraphOptions>({ | ||
| name: 'plainParagraph', | ||
|
|
||
| // higher priority to override the default paragraph node | ||
| // https://github.com/ueberdosis/tiptap/blob/f635d7b4f511530496377a8ef051875e30e301a4/packages/extension-paragraph/src/paragraph.ts#L31 | ||
| priority: 2000, | ||
|
|
||
| addOptions() { | ||
| return { | ||
| HTMLAttributes: { class: 'plain' }, | ||
| } | ||
| }, | ||
|
|
||
| group: 'plainBlock', | ||
|
|
||
| content: 'inline*', | ||
|
|
||
| marks: '', | ||
|
|
||
| defining: true, | ||
|
|
||
| parseHTML() { | ||
| return [{ tag: 'p[class="plain"]' }] | ||
| }, | ||
|
|
||
| renderHTML({ HTMLAttributes }) { | ||
| return [ | ||
| 'p', | ||
| mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), | ||
| 0, | ||
| ] | ||
| }, | ||
|
|
||
| addCommands() { | ||
| return { | ||
| setPlainParagraph: | ||
| () => | ||
| ({ commands }) => | ||
| commands.setNode(this.name), | ||
| } | ||
| }, | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters