add HTMLAttributes to defaultoptions

This commit is contained in:
Philipp Kühn 2020-11-13 16:44:22 +01:00
parent c840a562de
commit 2591ffe419
18 changed files with 173 additions and 26 deletions

View File

@ -1,11 +1,21 @@
import { Command, createNode } from '@tiptap/core' import { Command, createNode } from '@tiptap/core'
import { wrappingInputRule } from 'prosemirror-inputrules' import { wrappingInputRule } from 'prosemirror-inputrules'
export interface BlockquoteOptions {
HTMLAttributes: {
[key: string]: any
},
}
export const inputRegex = /^\s*>\s$/gm export const inputRegex = /^\s*>\s$/gm
const Blockquote = createNode({ const Blockquote = createNode({
name: 'blockquote', name: 'blockquote',
defaultOptions: <BlockquoteOptions>{
HTMLAttributes: {},
},
content: 'block*', content: 'block*',
group: 'block', group: 'block',

View File

@ -2,6 +2,12 @@ import {
Command, createMark, markInputRule, markPasteRule, Command, createMark, markInputRule, markPasteRule,
} from '@tiptap/core' } from '@tiptap/core'
export interface BoldOptions {
HTMLAttributes: {
[key: string]: any
},
}
export const starInputRegex = /(?:^|\s)((?:\*\*)((?:[^*]+))(?:\*\*))$/gm export const starInputRegex = /(?:^|\s)((?:\*\*)((?:[^*]+))(?:\*\*))$/gm
export const starPasteRegex = /(?:^|\s)((?:\*\*)((?:[^*]+))(?:\*\*))/gm export const starPasteRegex = /(?:^|\s)((?:\*\*)((?:[^*]+))(?:\*\*))/gm
export const underscoreInputRegex = /(?:^|\s)((?:__)((?:[^__]+))(?:__))$/gm export const underscoreInputRegex = /(?:^|\s)((?:__)((?:[^__]+))(?:__))$/gm
@ -10,6 +16,10 @@ export const underscorePasteRegex = /(?:^|\s)((?:__)((?:[^__]+))(?:__))/gm
const Bold = createMark({ const Bold = createMark({
name: 'bold', name: 'bold',
defaultOptions: <BoldOptions>{
HTMLAttributes: {},
},
parseHTML() { parseHTML() {
return [ return [
{ {

View File

@ -1,11 +1,21 @@
import { Command, createNode } from '@tiptap/core' import { Command, createNode } from '@tiptap/core'
import { wrappingInputRule } from 'prosemirror-inputrules' import { wrappingInputRule } from 'prosemirror-inputrules'
export interface BulletListOptions {
HTMLAttributes: {
[key: string]: any
},
}
export const inputRegex = /^\s*([-+*])\s$/ export const inputRegex = /^\s*([-+*])\s$/
const BulletList = createNode({ const BulletList = createNode({
name: 'bulletList', name: 'bulletList',
defaultOptions: <BulletListOptions>{
HTMLAttributes: {},
},
group: 'block list', group: 'block list',
content: 'listItem+', content: 'listItem+',

View File

@ -3,6 +3,9 @@ import { textblockTypeInputRule } from 'prosemirror-inputrules'
export interface CodeBlockOptions { export interface CodeBlockOptions {
languageClassPrefix: string, languageClassPrefix: string,
HTMLAttributes: {
[key: string]: any
},
} }
export const backtickInputRegex = /^```(?<language>[a-z]*)? $/ export const backtickInputRegex = /^```(?<language>[a-z]*)? $/
@ -13,6 +16,7 @@ const CodeBlock = createNode({
defaultOptions: <CodeBlockOptions>{ defaultOptions: <CodeBlockOptions>{
languageClassPrefix: 'language-', languageClassPrefix: 'language-',
HTMLAttributes: {},
}, },
content: 'text*', content: 'text*',

View File

@ -1,13 +1,26 @@
import { import {
Command, createMark, markInputRule, markPasteRule, Command,
createMark,
markInputRule,
markPasteRule,
} from '@tiptap/core' } from '@tiptap/core'
export interface CodeOptions {
HTMLAttributes: {
[key: string]: any
},
}
export const inputRegex = /(?:^|\s)((?:`)((?:[^`]+))(?:`))$/gm export const inputRegex = /(?:^|\s)((?:`)((?:[^`]+))(?:`))$/gm
export const pasteRegex = /(?:^|\s)((?:`)((?:[^`]+))(?:`))/gm export const pasteRegex = /(?:^|\s)((?:`)((?:[^`]+))(?:`))/gm
const Code = createMark({ const Code = createMark({
name: 'code', name: 'code',
defaultOptions: <CodeOptions>{
HTMLAttributes: {},
},
excludes: '_', excludes: '_',
parseHTML() { parseHTML() {

View File

@ -5,12 +5,22 @@ import {
markPasteRule, markPasteRule,
} from '@tiptap/core' } from '@tiptap/core'
export interface HighlightOptions {
HTMLAttributes: {
[key: string]: any
},
}
export const inputRegex = /(?:^|\s)((?:==)((?:[^~]+))(?:==))$/gm export const inputRegex = /(?:^|\s)((?:==)((?:[^~]+))(?:==))$/gm
export const pasteRegex = /(?:^|\s)((?:==)((?:[^~]+))(?:==))/gm export const pasteRegex = /(?:^|\s)((?:==)((?:[^~]+))(?:==))/gm
const Highlight = createMark({ const Highlight = createMark({
name: 'highlight', name: 'highlight',
defaultOptions: <HighlightOptions>{
HTMLAttributes: {},
},
addAttributes() { addAttributes() {
return { return {
color: { color: {

View File

@ -1,8 +1,18 @@
import { Command, createNode, nodeInputRule } from '@tiptap/core' import { Command, createNode, nodeInputRule } from '@tiptap/core'
export interface HorizontalRuleOptions {
HTMLAttributes: {
[key: string]: any
},
}
const HorizontalRule = createNode({ const HorizontalRule = createNode({
name: 'horizontalRule', name: 'horizontalRule',
defaultOptions: <HorizontalRuleOptions>{
HTMLAttributes: {},
},
group: 'block', group: 'block',
parseHTML() { parseHTML() {

View File

@ -2,6 +2,9 @@ import { Command, createNode, nodeInputRule } from '@tiptap/core'
export interface ImageOptions { export interface ImageOptions {
inline: boolean, inline: boolean,
HTMLAttributes: {
[key: string]: any
},
} }
export const inputRegex = /!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\)/ export const inputRegex = /!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\)/
@ -11,6 +14,7 @@ const Image = createNode({
defaultOptions: <ImageOptions>{ defaultOptions: <ImageOptions>{
inline: false, inline: false,
HTMLAttributes: {},
}, },
inline() { inline() {

View File

@ -1,7 +1,16 @@
import { import {
Command, createMark, markInputRule, markPasteRule, Command,
createMark,
markInputRule,
markPasteRule,
} from '@tiptap/core' } from '@tiptap/core'
export interface ItalicOptions {
HTMLAttributes: {
[key: string]: any
},
}
export const starInputRegex = /(?:^|\s)((?:\*)((?:[^*]+))(?:\*))$/gm export const starInputRegex = /(?:^|\s)((?:\*)((?:[^*]+))(?:\*))$/gm
export const starPasteRegex = /(?:^|\s)((?:\*)((?:[^*]+))(?:\*))/gm export const starPasteRegex = /(?:^|\s)((?:\*)((?:[^*]+))(?:\*))/gm
export const underscoreInputRegex = /(?:^|\s)((?:_)((?:[^_]+))(?:_))$/gm export const underscoreInputRegex = /(?:^|\s)((?:_)((?:[^_]+))(?:_))$/gm
@ -10,6 +19,10 @@ export const underscorePasteRegex = /(?:^|\s)((?:_)((?:[^_]+))(?:_))/gm
const Italic = createMark({ const Italic = createMark({
name: 'italic', name: 'italic',
defaultOptions: <ItalicOptions>{
HTMLAttributes: {},
},
parseHTML() { parseHTML() {
return [ return [
{ {

View File

@ -1,12 +1,16 @@
import { import {
Command, createMark, markPasteRule, mergeAttributes, Command,
createMark,
markPasteRule,
mergeAttributes,
} from '@tiptap/core' } from '@tiptap/core'
import { Plugin, PluginKey } from 'prosemirror-state' import { Plugin, PluginKey } from 'prosemirror-state'
export interface LinkOptions { export interface LinkOptions {
openOnClick: boolean, openOnClick: boolean,
target: string, HTMLAttributes: {
rel: string, [key: string]: any
},
} }
export const pasteRegex = /https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z]{2,}\b(?:[-a-zA-Z0-9@:%._+~#=?!&/()]*)/gi export const pasteRegex = /https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z]{2,}\b(?:[-a-zA-Z0-9@:%._+~#=?!&/()]*)/gi
@ -18,8 +22,10 @@ const Link = createMark({
defaultOptions: <LinkOptions>{ defaultOptions: <LinkOptions>{
openOnClick: true, openOnClick: true,
target: '_blank', HTMLAttributes: {
rel: 'noopener noreferrer nofollow', target: '_blank',
rel: 'noopener noreferrer nofollow',
},
}, },
addAttributes() { addAttributes() {
@ -28,7 +34,7 @@ const Link = createMark({
default: null, default: null,
}, },
target: { target: {
default: this.options.target, default: this.options.HTMLAttributes.target,
}, },
} }
}, },
@ -40,7 +46,7 @@ const Link = createMark({
}, },
renderHTML({ HTMLAttributes }) { renderHTML({ HTMLAttributes }) {
return ['a', mergeAttributes(HTMLAttributes, { rel: this.options.rel }), 0] return ['a', mergeAttributes(HTMLAttributes, { rel: this.options.HTMLAttributes.rel }), 0]
}, },
addCommands() { addCommands() {

View File

@ -1,8 +1,18 @@
import { createNode } from '@tiptap/core' import { createNode } from '@tiptap/core'
export interface ListItemOptions {
HTMLAttributes: {
[key: string]: any
},
}
const ListItem = createNode({ const ListItem = createNode({
name: 'listItem', name: 'listItem',
defaultOptions: <ListItemOptions>{
HTMLAttributes: {},
},
content: '(paragraph|list?)+', content: '(paragraph|list?)+',
defining: true, defining: true,

View File

@ -1,11 +1,21 @@
import { Command, createNode } from '@tiptap/core' import { Command, createNode } from '@tiptap/core'
import { wrappingInputRule } from 'prosemirror-inputrules' import { wrappingInputRule } from 'prosemirror-inputrules'
export interface OrderedListOptions {
HTMLAttributes: {
[key: string]: any
},
}
export const inputRegex = /^(\d+)\.\s$/ export const inputRegex = /^(\d+)\.\s$/
const OrderedList = createNode({ const OrderedList = createNode({
name: 'orderedList', name: 'orderedList',
defaultOptions: <OrderedListOptions>{
HTMLAttributes: {},
},
group: 'block list', group: 'block list',
content: 'listItem+', content: 'listItem+',

View File

@ -1,9 +0,0 @@
<template>
<p data-component="yeah" ref="content"></p>
</template>
<script>
export default {
}
</script>

View File

@ -1,9 +1,18 @@
import { Command, createNode } from '@tiptap/core' import { Command, createNode } from '@tiptap/core'
// import ParagraphComponent from './paragraph.vue'
export interface ParagraphOptions {
HTMLAttributes: {
[key: string]: any
},
}
const Paragraph = createNode({ const Paragraph = createNode({
name: 'paragraph', name: 'paragraph',
// defaultOptions: <ParagraphOptions>{
// HTMLAttributes: {},
// },
group: 'block', group: 'block',
content: 'inline*', content: 'inline*',

View File

@ -1,13 +1,26 @@
import { import {
Command, createMark, markInputRule, markPasteRule, Command,
createMark,
markInputRule,
markPasteRule,
} from '@tiptap/core' } from '@tiptap/core'
export interface StrikeOptions {
HTMLAttributes: {
[key: string]: any
},
}
export const inputRegex = /(?:^|\s)((?:~~)((?:[^~]+))(?:~~))$/gm export const inputRegex = /(?:^|\s)((?:~~)((?:[^~]+))(?:~~))$/gm
export const pasteRegex = /(?:^|\s)((?:~~)((?:[^~]+))(?:~~))/gm export const pasteRegex = /(?:^|\s)((?:~~)((?:[^~]+))(?:~~))/gm
const Strike = createMark({ const Strike = createMark({
name: 'strike', name: 'strike',
defaultOptions: <StrikeOptions>{
HTMLAttributes: {},
},
parseHTML() { parseHTML() {
return [ return [
{ {

View File

@ -1,25 +1,29 @@
import { createNode, mergeAttributes } from '@tiptap/core' import { createNode, mergeAttributes } from '@tiptap/core'
import { wrappingInputRule } from 'prosemirror-inputrules' import { wrappingInputRule } from 'prosemirror-inputrules'
export const inputRegex = /^\s*(\[([ |x])\])\s$/
export interface TaskItemOptions { export interface TaskItemOptions {
nested: boolean, nested: boolean,
HTMLAttributes: {
[key: string]: any
},
} }
export const inputRegex = /^\s*(\[([ |x])\])\s$/
const TaskItem = createNode({ const TaskItem = createNode({
name: 'taskItem', name: 'taskItem',
defaultOptions: <TaskItemOptions>{
nested: false,
HTMLAttributes: {},
},
content() { content() {
return this.options.nested ? '(paragraph|taskList)+' : 'paragraph+' return this.options.nested ? '(paragraph|taskList)+' : 'paragraph+'
}, },
defining: true, defining: true,
defaultOptions: <TaskItemOptions>{
nested: false,
},
addAttributes() { addAttributes() {
return { return {
checked: { checked: {

View File

@ -1,8 +1,18 @@
import { Command, createNode, mergeAttributes } from '@tiptap/core' import { Command, createNode, mergeAttributes } from '@tiptap/core'
export interface TaskListOptions {
HTMLAttributes: {
[key: string]: any
},
}
const TaskList = createNode({ const TaskList = createNode({
name: 'taskList', name: 'taskList',
defaultOptions: <TaskListOptions>{
HTMLAttributes: {},
},
group: 'block list', group: 'block list',
content: 'taskItem+', content: 'taskItem+',

View File

@ -1,8 +1,18 @@
import { Command, createMark } from '@tiptap/core' import { Command, createMark } from '@tiptap/core'
export interface UnderlineOptions {
HTMLAttributes: {
[key: string]: any
},
}
const Underline = createMark({ const Underline = createMark({
name: 'underline', name: 'underline',
defaultOptions: <UnderlineOptions>{
HTMLAttributes: {},
},
parseHTML() { parseHTML() {
return [ return [
{ {