@tiptap/extension-code-block 2.0.0-beta.20 → 2.0.0-beta.200
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/packages/extension-code-block/src/code-block.d.ts +18 -1
- package/dist/tiptap-extension-code-block.cjs.js +90 -21
- package/dist/tiptap-extension-code-block.cjs.js.map +1 -1
- package/dist/tiptap-extension-code-block.esm.js +91 -22
- package/dist/tiptap-extension-code-block.esm.js.map +1 -1
- package/dist/tiptap-extension-code-block.umd.js +90 -21
- package/dist/tiptap-extension-code-block.umd.js.map +1 -1
- package/package.json +4 -5
- package/src/code-block.ts +126 -23
- package/LICENSE.md +0 -21
|
@@ -1,6 +1,23 @@
|
|
|
1
1
|
import { Node } from '@tiptap/core';
|
|
2
2
|
export interface CodeBlockOptions {
|
|
3
|
+
/**
|
|
4
|
+
* Adds a prefix to language classes that are applied to code tags.
|
|
5
|
+
* Defaults to `'language-'`.
|
|
6
|
+
*/
|
|
3
7
|
languageClassPrefix: string;
|
|
8
|
+
/**
|
|
9
|
+
* Define whether the node should be exited on triple enter.
|
|
10
|
+
* Defaults to `true`.
|
|
11
|
+
*/
|
|
12
|
+
exitOnTripleEnter: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* Define whether the node should be exited on arrow down if there is no node after it.
|
|
15
|
+
* Defaults to `true`.
|
|
16
|
+
*/
|
|
17
|
+
exitOnArrowDown: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Custom HTML attributes that should be added to the rendered HTML tag.
|
|
20
|
+
*/
|
|
4
21
|
HTMLAttributes: Record<string, any>;
|
|
5
22
|
}
|
|
6
23
|
declare module '@tiptap/core' {
|
|
@@ -23,4 +40,4 @@ declare module '@tiptap/core' {
|
|
|
23
40
|
}
|
|
24
41
|
export declare const backtickInputRegex: RegExp;
|
|
25
42
|
export declare const tildeInputRegex: RegExp;
|
|
26
|
-
export declare const CodeBlock: Node<CodeBlockOptions>;
|
|
43
|
+
export declare const CodeBlock: Node<CodeBlockOptions, any>;
|
|
@@ -5,13 +5,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var core = require('@tiptap/core');
|
|
6
6
|
var prosemirrorState = require('prosemirror-state');
|
|
7
7
|
|
|
8
|
-
const backtickInputRegex = /^```(
|
|
9
|
-
const tildeInputRegex = /^~~~(
|
|
8
|
+
const backtickInputRegex = /^```([a-z]+)?[\s\n]$/;
|
|
9
|
+
const tildeInputRegex = /^~~~([a-z]+)?[\s\n]$/;
|
|
10
10
|
const CodeBlock = core.Node.create({
|
|
11
11
|
name: 'codeBlock',
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
addOptions() {
|
|
13
|
+
return {
|
|
14
|
+
languageClassPrefix: 'language-',
|
|
15
|
+
exitOnTripleEnter: true,
|
|
16
|
+
exitOnArrowDown: true,
|
|
17
|
+
HTMLAttributes: {},
|
|
18
|
+
};
|
|
15
19
|
},
|
|
16
20
|
content: 'text*',
|
|
17
21
|
marks: '',
|
|
@@ -35,14 +39,7 @@ const CodeBlock = core.Node.create({
|
|
|
35
39
|
}
|
|
36
40
|
return language;
|
|
37
41
|
},
|
|
38
|
-
|
|
39
|
-
if (!attributes.language) {
|
|
40
|
-
return null;
|
|
41
|
-
}
|
|
42
|
-
return {
|
|
43
|
-
class: this.options.languageClassPrefix + attributes.language,
|
|
44
|
-
};
|
|
45
|
-
},
|
|
42
|
+
rendered: false,
|
|
46
43
|
},
|
|
47
44
|
};
|
|
48
45
|
},
|
|
@@ -54,16 +51,28 @@ const CodeBlock = core.Node.create({
|
|
|
54
51
|
},
|
|
55
52
|
];
|
|
56
53
|
},
|
|
57
|
-
renderHTML({ HTMLAttributes }) {
|
|
58
|
-
return [
|
|
54
|
+
renderHTML({ node, HTMLAttributes }) {
|
|
55
|
+
return [
|
|
56
|
+
'pre',
|
|
57
|
+
core.mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
|
|
58
|
+
[
|
|
59
|
+
'code',
|
|
60
|
+
{
|
|
61
|
+
class: node.attrs.language
|
|
62
|
+
? this.options.languageClassPrefix + node.attrs.language
|
|
63
|
+
: null,
|
|
64
|
+
},
|
|
65
|
+
0,
|
|
66
|
+
],
|
|
67
|
+
];
|
|
59
68
|
},
|
|
60
69
|
addCommands() {
|
|
61
70
|
return {
|
|
62
71
|
setCodeBlock: attributes => ({ commands }) => {
|
|
63
|
-
return commands.setNode(
|
|
72
|
+
return commands.setNode(this.name, attributes);
|
|
64
73
|
},
|
|
65
74
|
toggleCodeBlock: attributes => ({ commands }) => {
|
|
66
|
-
return commands.toggleNode(
|
|
75
|
+
return commands.toggleNode(this.name, 'paragraph', attributes);
|
|
67
76
|
},
|
|
68
77
|
};
|
|
69
78
|
},
|
|
@@ -82,6 +91,56 @@ const CodeBlock = core.Node.create({
|
|
|
82
91
|
}
|
|
83
92
|
return false;
|
|
84
93
|
},
|
|
94
|
+
// exit node on triple enter
|
|
95
|
+
Enter: ({ editor }) => {
|
|
96
|
+
if (!this.options.exitOnTripleEnter) {
|
|
97
|
+
return false;
|
|
98
|
+
}
|
|
99
|
+
const { state } = editor;
|
|
100
|
+
const { selection } = state;
|
|
101
|
+
const { $from, empty } = selection;
|
|
102
|
+
if (!empty || $from.parent.type !== this.type) {
|
|
103
|
+
return false;
|
|
104
|
+
}
|
|
105
|
+
const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2;
|
|
106
|
+
const endsWithDoubleNewline = $from.parent.textContent.endsWith('\n\n');
|
|
107
|
+
if (!isAtEnd || !endsWithDoubleNewline) {
|
|
108
|
+
return false;
|
|
109
|
+
}
|
|
110
|
+
return editor
|
|
111
|
+
.chain()
|
|
112
|
+
.command(({ tr }) => {
|
|
113
|
+
tr.delete($from.pos - 2, $from.pos);
|
|
114
|
+
return true;
|
|
115
|
+
})
|
|
116
|
+
.exitCode()
|
|
117
|
+
.run();
|
|
118
|
+
},
|
|
119
|
+
// exit node on arrow down
|
|
120
|
+
ArrowDown: ({ editor }) => {
|
|
121
|
+
if (!this.options.exitOnArrowDown) {
|
|
122
|
+
return false;
|
|
123
|
+
}
|
|
124
|
+
const { state } = editor;
|
|
125
|
+
const { selection, doc } = state;
|
|
126
|
+
const { $from, empty } = selection;
|
|
127
|
+
if (!empty || $from.parent.type !== this.type) {
|
|
128
|
+
return false;
|
|
129
|
+
}
|
|
130
|
+
const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2;
|
|
131
|
+
if (!isAtEnd) {
|
|
132
|
+
return false;
|
|
133
|
+
}
|
|
134
|
+
const after = $from.after();
|
|
135
|
+
if (after === undefined) {
|
|
136
|
+
return false;
|
|
137
|
+
}
|
|
138
|
+
const nodeAfter = doc.nodeAt(after);
|
|
139
|
+
if (nodeAfter) {
|
|
140
|
+
return false;
|
|
141
|
+
}
|
|
142
|
+
return editor.commands.exitCode();
|
|
143
|
+
},
|
|
85
144
|
};
|
|
86
145
|
},
|
|
87
146
|
addInputRules() {
|
|
@@ -89,12 +148,16 @@ const CodeBlock = core.Node.create({
|
|
|
89
148
|
core.textblockTypeInputRule({
|
|
90
149
|
find: backtickInputRegex,
|
|
91
150
|
type: this.type,
|
|
92
|
-
getAttributes:
|
|
151
|
+
getAttributes: match => ({
|
|
152
|
+
language: match[1],
|
|
153
|
+
}),
|
|
93
154
|
}),
|
|
94
155
|
core.textblockTypeInputRule({
|
|
95
156
|
find: tildeInputRegex,
|
|
96
157
|
type: this.type,
|
|
97
|
-
getAttributes:
|
|
158
|
+
getAttributes: match => ({
|
|
159
|
+
language: match[1],
|
|
160
|
+
}),
|
|
98
161
|
}),
|
|
99
162
|
];
|
|
100
163
|
},
|
|
@@ -118,7 +181,7 @@ const CodeBlock = core.Node.create({
|
|
|
118
181
|
const vscodeData = vscode
|
|
119
182
|
? JSON.parse(vscode)
|
|
120
183
|
: undefined;
|
|
121
|
-
const language = vscodeData.mode;
|
|
184
|
+
const language = vscodeData === null || vscodeData === void 0 ? void 0 : vscodeData.mode;
|
|
122
185
|
if (!text || !language) {
|
|
123
186
|
return false;
|
|
124
187
|
}
|
|
@@ -128,7 +191,13 @@ const CodeBlock = core.Node.create({
|
|
|
128
191
|
// put cursor inside the newly created code block
|
|
129
192
|
tr.setSelection(prosemirrorState.TextSelection.near(tr.doc.resolve(Math.max(0, tr.selection.from - 2))));
|
|
130
193
|
// add text to code block
|
|
131
|
-
|
|
194
|
+
// strip carriage return chars from text pasted as code
|
|
195
|
+
// see: https://github.com/ProseMirror/prosemirror-view/commit/a50a6bcceb4ce52ac8fcc6162488d8875613aacd
|
|
196
|
+
tr.insertText(text.replace(/\r\n?/g, '\n'));
|
|
197
|
+
// store meta information
|
|
198
|
+
// this is useful for other plugins that depends on the paste event
|
|
199
|
+
// like the paste rule plugin
|
|
200
|
+
tr.setMeta('paste', true);
|
|
132
201
|
view.dispatch(tr);
|
|
133
202
|
return true;
|
|
134
203
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tiptap-extension-code-block.cjs.js","sources":["../src/code-block.ts"],"sourcesContent":["import { Node, textblockTypeInputRule } from '@tiptap/core'\nimport { Plugin, PluginKey, TextSelection } from 'prosemirror-state'\n\nexport interface CodeBlockOptions {\n languageClassPrefix: string,\n HTMLAttributes: Record<string, any>,\n}\n\ndeclare module '@tiptap/core' {\n interface Commands<ReturnType> {\n codeBlock: {\n /**\n * Set a code block\n */\n setCodeBlock: (attributes?: { language: string }) => ReturnType,\n /**\n * Toggle a code block\n */\n toggleCodeBlock: (attributes?: { language: string }) => ReturnType,\n }\n }\n}\n\nexport const backtickInputRegex = /^```(?<language>[a-z]*)?[\\s\\n]$/\nexport const tildeInputRegex = /^~~~(?<language>[a-z]*)?[\\s\\n]$/\n\nexport const CodeBlock = Node.create<CodeBlockOptions>({\n name: 'codeBlock',\n\n defaultOptions: {\n languageClassPrefix: 'language-',\n HTMLAttributes: {},\n },\n\n content: 'text*',\n\n marks: '',\n\n group: 'block',\n\n code: true,\n\n defining: true,\n\n addAttributes() {\n return {\n language: {\n default: null,\n parseHTML: element => {\n const { languageClassPrefix } = this.options\n const classNames = [...element.firstElementChild?.classList || []]\n const languages = classNames\n .filter(className => className.startsWith(languageClassPrefix))\n .map(className => className.replace(languageClassPrefix, ''))\n const language = languages[0]\n\n if (!language) {\n return null\n }\n\n return language\n },\n renderHTML: attributes => {\n if (!attributes.language) {\n return null\n }\n\n return {\n class: this.options.languageClassPrefix + attributes.language,\n }\n },\n },\n }\n },\n\n parseHTML() {\n return [\n {\n tag: 'pre',\n preserveWhitespace: 'full',\n },\n ]\n },\n\n renderHTML({ HTMLAttributes }) {\n return ['pre', this.options.HTMLAttributes, ['code', HTMLAttributes, 0]]\n },\n\n addCommands() {\n return {\n setCodeBlock: attributes => ({ commands }) => {\n return commands.setNode('codeBlock', attributes)\n },\n toggleCodeBlock: attributes => ({ commands }) => {\n return commands.toggleNode('codeBlock', 'paragraph', attributes)\n },\n }\n },\n\n addKeyboardShortcuts() {\n return {\n 'Mod-Alt-c': () => this.editor.commands.toggleCodeBlock(),\n\n // remove code block when at start of document or code block is empty\n Backspace: () => {\n const { empty, $anchor } = this.editor.state.selection\n const isAtStart = $anchor.pos === 1\n\n if (!empty || $anchor.parent.type.name !== this.name) {\n return false\n }\n\n if (isAtStart || !$anchor.parent.textContent.length) {\n return this.editor.commands.clearNodes()\n }\n\n return false\n },\n }\n },\n\n addInputRules() {\n return [\n textblockTypeInputRule({\n find: backtickInputRegex,\n type: this.type,\n getAttributes: ({ groups }) => groups,\n }),\n textblockTypeInputRule({\n find: tildeInputRegex,\n type: this.type,\n getAttributes: ({ groups }) => groups,\n }),\n ]\n },\n\n addProseMirrorPlugins() {\n return [\n // this plugin creates a code block for pasted content from VS Code\n // we can also detect the copied code language\n new Plugin({\n key: new PluginKey('codeBlockVSCodeHandler'),\n props: {\n handlePaste: (view, event) => {\n if (!event.clipboardData) {\n return false\n }\n\n // don’t create a new code block within code blocks\n if (this.editor.isActive(this.type.name)) {\n return false\n }\n\n const text = event.clipboardData.getData('text/plain')\n const vscode = event.clipboardData.getData('vscode-editor-data')\n const vscodeData = vscode\n ? JSON.parse(vscode)\n : undefined\n const language = vscodeData.mode\n\n if (!text || !language) {\n return false\n }\n\n const { tr } = view.state\n\n // create an empty code block\n tr.replaceSelectionWith(this.type.create({ language }))\n\n // put cursor inside the newly created code block\n tr.setSelection(TextSelection.near(tr.doc.resolve(Math.max(0, tr.selection.from - 2))))\n\n // add text to code block\n tr.insertText(text)\n\n view.dispatch(tr)\n\n return true\n },\n },\n }),\n ]\n },\n})\n"],"names":["Node","textblockTypeInputRule","Plugin","PluginKey","TextSelection"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tiptap-extension-code-block.cjs.js","sources":["../src/code-block.ts"],"sourcesContent":["import { mergeAttributes, Node, textblockTypeInputRule } from '@tiptap/core'\nimport { Plugin, PluginKey, TextSelection } from 'prosemirror-state'\n\nexport interface CodeBlockOptions {\n /**\n * Adds a prefix to language classes that are applied to code tags.\n * Defaults to `'language-'`.\n */\n languageClassPrefix: string,\n /**\n * Define whether the node should be exited on triple enter.\n * Defaults to `true`.\n */\n exitOnTripleEnter: boolean,\n /**\n * Define whether the node should be exited on arrow down if there is no node after it.\n * Defaults to `true`.\n */\n exitOnArrowDown: boolean,\n /**\n * Custom HTML attributes that should be added to the rendered HTML tag.\n */\n HTMLAttributes: Record<string, any>,\n}\n\ndeclare module '@tiptap/core' {\n interface Commands<ReturnType> {\n codeBlock: {\n /**\n * Set a code block\n */\n setCodeBlock: (attributes?: { language: string }) => ReturnType,\n /**\n * Toggle a code block\n */\n toggleCodeBlock: (attributes?: { language: string }) => ReturnType,\n }\n }\n}\n\nexport const backtickInputRegex = /^```([a-z]+)?[\\s\\n]$/\nexport const tildeInputRegex = /^~~~([a-z]+)?[\\s\\n]$/\n\nexport const CodeBlock = Node.create<CodeBlockOptions>({\n name: 'codeBlock',\n\n addOptions() {\n return {\n languageClassPrefix: 'language-',\n exitOnTripleEnter: true,\n exitOnArrowDown: true,\n HTMLAttributes: {},\n }\n },\n\n content: 'text*',\n\n marks: '',\n\n group: 'block',\n\n code: true,\n\n defining: true,\n\n addAttributes() {\n return {\n language: {\n default: null,\n parseHTML: element => {\n const { languageClassPrefix } = this.options\n const classNames = [...element.firstElementChild?.classList || []]\n const languages = classNames\n .filter(className => className.startsWith(languageClassPrefix))\n .map(className => className.replace(languageClassPrefix, ''))\n const language = languages[0]\n\n if (!language) {\n return null\n }\n\n return language\n },\n rendered: false,\n },\n }\n },\n\n parseHTML() {\n return [\n {\n tag: 'pre',\n preserveWhitespace: 'full',\n },\n ]\n },\n\n renderHTML({ node, HTMLAttributes }) {\n return [\n 'pre',\n mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),\n [\n 'code',\n {\n class: node.attrs.language\n ? this.options.languageClassPrefix + node.attrs.language\n : null,\n },\n 0,\n ],\n ]\n },\n\n addCommands() {\n return {\n setCodeBlock: attributes => ({ commands }) => {\n return commands.setNode(this.name, attributes)\n },\n toggleCodeBlock: attributes => ({ commands }) => {\n return commands.toggleNode(this.name, 'paragraph', attributes)\n },\n }\n },\n\n addKeyboardShortcuts() {\n return {\n 'Mod-Alt-c': () => this.editor.commands.toggleCodeBlock(),\n\n // remove code block when at start of document or code block is empty\n Backspace: () => {\n const { empty, $anchor } = this.editor.state.selection\n const isAtStart = $anchor.pos === 1\n\n if (!empty || $anchor.parent.type.name !== this.name) {\n return false\n }\n\n if (isAtStart || !$anchor.parent.textContent.length) {\n return this.editor.commands.clearNodes()\n }\n\n return false\n },\n\n // exit node on triple enter\n Enter: ({ editor }) => {\n if (!this.options.exitOnTripleEnter) {\n return false\n }\n\n const { state } = editor\n const { selection } = state\n const { $from, empty } = selection\n\n if (!empty || $from.parent.type !== this.type) {\n return false\n }\n\n const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2\n const endsWithDoubleNewline = $from.parent.textContent.endsWith('\\n\\n')\n\n if (!isAtEnd || !endsWithDoubleNewline) {\n return false\n }\n\n return editor\n .chain()\n .command(({ tr }) => {\n tr.delete($from.pos - 2, $from.pos)\n\n return true\n })\n .exitCode()\n .run()\n },\n\n // exit node on arrow down\n ArrowDown: ({ editor }) => {\n if (!this.options.exitOnArrowDown) {\n return false\n }\n\n const { state } = editor\n const { selection, doc } = state\n const { $from, empty } = selection\n\n if (!empty || $from.parent.type !== this.type) {\n return false\n }\n\n const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2\n\n if (!isAtEnd) {\n return false\n }\n\n const after = $from.after()\n\n if (after === undefined) {\n return false\n }\n\n const nodeAfter = doc.nodeAt(after)\n\n if (nodeAfter) {\n return false\n }\n\n return editor.commands.exitCode()\n },\n }\n },\n\n addInputRules() {\n return [\n textblockTypeInputRule({\n find: backtickInputRegex,\n type: this.type,\n getAttributes: match => ({\n language: match[1],\n }),\n }),\n textblockTypeInputRule({\n find: tildeInputRegex,\n type: this.type,\n getAttributes: match => ({\n language: match[1],\n }),\n }),\n ]\n },\n\n addProseMirrorPlugins() {\n return [\n // this plugin creates a code block for pasted content from VS Code\n // we can also detect the copied code language\n new Plugin({\n key: new PluginKey('codeBlockVSCodeHandler'),\n props: {\n handlePaste: (view, event) => {\n if (!event.clipboardData) {\n return false\n }\n\n // don’t create a new code block within code blocks\n if (this.editor.isActive(this.type.name)) {\n return false\n }\n\n const text = event.clipboardData.getData('text/plain')\n const vscode = event.clipboardData.getData('vscode-editor-data')\n const vscodeData = vscode\n ? JSON.parse(vscode)\n : undefined\n const language = vscodeData?.mode\n\n if (!text || !language) {\n return false\n }\n\n const { tr } = view.state\n\n // create an empty code block\n tr.replaceSelectionWith(this.type.create({ language }))\n\n // put cursor inside the newly created code block\n tr.setSelection(TextSelection.near(tr.doc.resolve(Math.max(0, tr.selection.from - 2))))\n\n // add text to code block\n // strip carriage return chars from text pasted as code\n // see: https://github.com/ProseMirror/prosemirror-view/commit/a50a6bcceb4ce52ac8fcc6162488d8875613aacd\n tr.insertText(text.replace(/\\r\\n?/g, '\\n'))\n\n // store meta information\n // this is useful for other plugins that depends on the paste event\n // like the paste rule plugin\n tr.setMeta('paste', true)\n\n view.dispatch(tr)\n\n return true\n },\n },\n }),\n ]\n },\n})\n"],"names":["Node","mergeAttributes","textblockTypeInputRule","Plugin","PluginKey","TextSelection"],"mappings":"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"}
|
|
@@ -1,13 +1,17 @@
|
|
|
1
|
-
import { Node, textblockTypeInputRule } from '@tiptap/core';
|
|
1
|
+
import { Node, mergeAttributes, textblockTypeInputRule } from '@tiptap/core';
|
|
2
2
|
import { Plugin, PluginKey, TextSelection } from 'prosemirror-state';
|
|
3
3
|
|
|
4
|
-
const backtickInputRegex = /^```(
|
|
5
|
-
const tildeInputRegex = /^~~~(
|
|
4
|
+
const backtickInputRegex = /^```([a-z]+)?[\s\n]$/;
|
|
5
|
+
const tildeInputRegex = /^~~~([a-z]+)?[\s\n]$/;
|
|
6
6
|
const CodeBlock = Node.create({
|
|
7
7
|
name: 'codeBlock',
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
addOptions() {
|
|
9
|
+
return {
|
|
10
|
+
languageClassPrefix: 'language-',
|
|
11
|
+
exitOnTripleEnter: true,
|
|
12
|
+
exitOnArrowDown: true,
|
|
13
|
+
HTMLAttributes: {},
|
|
14
|
+
};
|
|
11
15
|
},
|
|
12
16
|
content: 'text*',
|
|
13
17
|
marks: '',
|
|
@@ -31,14 +35,7 @@ const CodeBlock = Node.create({
|
|
|
31
35
|
}
|
|
32
36
|
return language;
|
|
33
37
|
},
|
|
34
|
-
|
|
35
|
-
if (!attributes.language) {
|
|
36
|
-
return null;
|
|
37
|
-
}
|
|
38
|
-
return {
|
|
39
|
-
class: this.options.languageClassPrefix + attributes.language,
|
|
40
|
-
};
|
|
41
|
-
},
|
|
38
|
+
rendered: false,
|
|
42
39
|
},
|
|
43
40
|
};
|
|
44
41
|
},
|
|
@@ -50,16 +47,28 @@ const CodeBlock = Node.create({
|
|
|
50
47
|
},
|
|
51
48
|
];
|
|
52
49
|
},
|
|
53
|
-
renderHTML({ HTMLAttributes }) {
|
|
54
|
-
return [
|
|
50
|
+
renderHTML({ node, HTMLAttributes }) {
|
|
51
|
+
return [
|
|
52
|
+
'pre',
|
|
53
|
+
mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
|
|
54
|
+
[
|
|
55
|
+
'code',
|
|
56
|
+
{
|
|
57
|
+
class: node.attrs.language
|
|
58
|
+
? this.options.languageClassPrefix + node.attrs.language
|
|
59
|
+
: null,
|
|
60
|
+
},
|
|
61
|
+
0,
|
|
62
|
+
],
|
|
63
|
+
];
|
|
55
64
|
},
|
|
56
65
|
addCommands() {
|
|
57
66
|
return {
|
|
58
67
|
setCodeBlock: attributes => ({ commands }) => {
|
|
59
|
-
return commands.setNode(
|
|
68
|
+
return commands.setNode(this.name, attributes);
|
|
60
69
|
},
|
|
61
70
|
toggleCodeBlock: attributes => ({ commands }) => {
|
|
62
|
-
return commands.toggleNode(
|
|
71
|
+
return commands.toggleNode(this.name, 'paragraph', attributes);
|
|
63
72
|
},
|
|
64
73
|
};
|
|
65
74
|
},
|
|
@@ -78,6 +87,56 @@ const CodeBlock = Node.create({
|
|
|
78
87
|
}
|
|
79
88
|
return false;
|
|
80
89
|
},
|
|
90
|
+
// exit node on triple enter
|
|
91
|
+
Enter: ({ editor }) => {
|
|
92
|
+
if (!this.options.exitOnTripleEnter) {
|
|
93
|
+
return false;
|
|
94
|
+
}
|
|
95
|
+
const { state } = editor;
|
|
96
|
+
const { selection } = state;
|
|
97
|
+
const { $from, empty } = selection;
|
|
98
|
+
if (!empty || $from.parent.type !== this.type) {
|
|
99
|
+
return false;
|
|
100
|
+
}
|
|
101
|
+
const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2;
|
|
102
|
+
const endsWithDoubleNewline = $from.parent.textContent.endsWith('\n\n');
|
|
103
|
+
if (!isAtEnd || !endsWithDoubleNewline) {
|
|
104
|
+
return false;
|
|
105
|
+
}
|
|
106
|
+
return editor
|
|
107
|
+
.chain()
|
|
108
|
+
.command(({ tr }) => {
|
|
109
|
+
tr.delete($from.pos - 2, $from.pos);
|
|
110
|
+
return true;
|
|
111
|
+
})
|
|
112
|
+
.exitCode()
|
|
113
|
+
.run();
|
|
114
|
+
},
|
|
115
|
+
// exit node on arrow down
|
|
116
|
+
ArrowDown: ({ editor }) => {
|
|
117
|
+
if (!this.options.exitOnArrowDown) {
|
|
118
|
+
return false;
|
|
119
|
+
}
|
|
120
|
+
const { state } = editor;
|
|
121
|
+
const { selection, doc } = state;
|
|
122
|
+
const { $from, empty } = selection;
|
|
123
|
+
if (!empty || $from.parent.type !== this.type) {
|
|
124
|
+
return false;
|
|
125
|
+
}
|
|
126
|
+
const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2;
|
|
127
|
+
if (!isAtEnd) {
|
|
128
|
+
return false;
|
|
129
|
+
}
|
|
130
|
+
const after = $from.after();
|
|
131
|
+
if (after === undefined) {
|
|
132
|
+
return false;
|
|
133
|
+
}
|
|
134
|
+
const nodeAfter = doc.nodeAt(after);
|
|
135
|
+
if (nodeAfter) {
|
|
136
|
+
return false;
|
|
137
|
+
}
|
|
138
|
+
return editor.commands.exitCode();
|
|
139
|
+
},
|
|
81
140
|
};
|
|
82
141
|
},
|
|
83
142
|
addInputRules() {
|
|
@@ -85,12 +144,16 @@ const CodeBlock = Node.create({
|
|
|
85
144
|
textblockTypeInputRule({
|
|
86
145
|
find: backtickInputRegex,
|
|
87
146
|
type: this.type,
|
|
88
|
-
getAttributes:
|
|
147
|
+
getAttributes: match => ({
|
|
148
|
+
language: match[1],
|
|
149
|
+
}),
|
|
89
150
|
}),
|
|
90
151
|
textblockTypeInputRule({
|
|
91
152
|
find: tildeInputRegex,
|
|
92
153
|
type: this.type,
|
|
93
|
-
getAttributes:
|
|
154
|
+
getAttributes: match => ({
|
|
155
|
+
language: match[1],
|
|
156
|
+
}),
|
|
94
157
|
}),
|
|
95
158
|
];
|
|
96
159
|
},
|
|
@@ -114,7 +177,7 @@ const CodeBlock = Node.create({
|
|
|
114
177
|
const vscodeData = vscode
|
|
115
178
|
? JSON.parse(vscode)
|
|
116
179
|
: undefined;
|
|
117
|
-
const language = vscodeData.mode;
|
|
180
|
+
const language = vscodeData === null || vscodeData === void 0 ? void 0 : vscodeData.mode;
|
|
118
181
|
if (!text || !language) {
|
|
119
182
|
return false;
|
|
120
183
|
}
|
|
@@ -124,7 +187,13 @@ const CodeBlock = Node.create({
|
|
|
124
187
|
// put cursor inside the newly created code block
|
|
125
188
|
tr.setSelection(TextSelection.near(tr.doc.resolve(Math.max(0, tr.selection.from - 2))));
|
|
126
189
|
// add text to code block
|
|
127
|
-
|
|
190
|
+
// strip carriage return chars from text pasted as code
|
|
191
|
+
// see: https://github.com/ProseMirror/prosemirror-view/commit/a50a6bcceb4ce52ac8fcc6162488d8875613aacd
|
|
192
|
+
tr.insertText(text.replace(/\r\n?/g, '\n'));
|
|
193
|
+
// store meta information
|
|
194
|
+
// this is useful for other plugins that depends on the paste event
|
|
195
|
+
// like the paste rule plugin
|
|
196
|
+
tr.setMeta('paste', true);
|
|
128
197
|
view.dispatch(tr);
|
|
129
198
|
return true;
|
|
130
199
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tiptap-extension-code-block.esm.js","sources":["../src/code-block.ts"],"sourcesContent":["import { Node, textblockTypeInputRule } from '@tiptap/core'\nimport { Plugin, PluginKey, TextSelection } from 'prosemirror-state'\n\nexport interface CodeBlockOptions {\n languageClassPrefix: string,\n HTMLAttributes: Record<string, any>,\n}\n\ndeclare module '@tiptap/core' {\n interface Commands<ReturnType> {\n codeBlock: {\n /**\n * Set a code block\n */\n setCodeBlock: (attributes?: { language: string }) => ReturnType,\n /**\n * Toggle a code block\n */\n toggleCodeBlock: (attributes?: { language: string }) => ReturnType,\n }\n }\n}\n\nexport const backtickInputRegex = /^```(?<language>[a-z]*)?[\\s\\n]$/\nexport const tildeInputRegex = /^~~~(?<language>[a-z]*)?[\\s\\n]$/\n\nexport const CodeBlock = Node.create<CodeBlockOptions>({\n name: 'codeBlock',\n\n defaultOptions: {\n languageClassPrefix: 'language-',\n HTMLAttributes: {},\n },\n\n content: 'text*',\n\n marks: '',\n\n group: 'block',\n\n code: true,\n\n defining: true,\n\n addAttributes() {\n return {\n language: {\n default: null,\n parseHTML: element => {\n const { languageClassPrefix } = this.options\n const classNames = [...element.firstElementChild?.classList || []]\n const languages = classNames\n .filter(className => className.startsWith(languageClassPrefix))\n .map(className => className.replace(languageClassPrefix, ''))\n const language = languages[0]\n\n if (!language) {\n return null\n }\n\n return language\n },\n renderHTML: attributes => {\n if (!attributes.language) {\n return null\n }\n\n return {\n class: this.options.languageClassPrefix + attributes.language,\n }\n },\n },\n }\n },\n\n parseHTML() {\n return [\n {\n tag: 'pre',\n preserveWhitespace: 'full',\n },\n ]\n },\n\n renderHTML({ HTMLAttributes }) {\n return ['pre', this.options.HTMLAttributes, ['code', HTMLAttributes, 0]]\n },\n\n addCommands() {\n return {\n setCodeBlock: attributes => ({ commands }) => {\n return commands.setNode('codeBlock', attributes)\n },\n toggleCodeBlock: attributes => ({ commands }) => {\n return commands.toggleNode('codeBlock', 'paragraph', attributes)\n },\n }\n },\n\n addKeyboardShortcuts() {\n return {\n 'Mod-Alt-c': () => this.editor.commands.toggleCodeBlock(),\n\n // remove code block when at start of document or code block is empty\n Backspace: () => {\n const { empty, $anchor } = this.editor.state.selection\n const isAtStart = $anchor.pos === 1\n\n if (!empty || $anchor.parent.type.name !== this.name) {\n return false\n }\n\n if (isAtStart || !$anchor.parent.textContent.length) {\n return this.editor.commands.clearNodes()\n }\n\n return false\n },\n }\n },\n\n addInputRules() {\n return [\n textblockTypeInputRule({\n find: backtickInputRegex,\n type: this.type,\n getAttributes: ({ groups }) => groups,\n }),\n textblockTypeInputRule({\n find: tildeInputRegex,\n type: this.type,\n getAttributes: ({ groups }) => groups,\n }),\n ]\n },\n\n addProseMirrorPlugins() {\n return [\n // this plugin creates a code block for pasted content from VS Code\n // we can also detect the copied code language\n new Plugin({\n key: new PluginKey('codeBlockVSCodeHandler'),\n props: {\n handlePaste: (view, event) => {\n if (!event.clipboardData) {\n return false\n }\n\n // don’t create a new code block within code blocks\n if (this.editor.isActive(this.type.name)) {\n return false\n }\n\n const text = event.clipboardData.getData('text/plain')\n const vscode = event.clipboardData.getData('vscode-editor-data')\n const vscodeData = vscode\n ? JSON.parse(vscode)\n : undefined\n const language = vscodeData.mode\n\n if (!text || !language) {\n return false\n }\n\n const { tr } = view.state\n\n // create an empty code block\n tr.replaceSelectionWith(this.type.create({ language }))\n\n // put cursor inside the newly created code block\n tr.setSelection(TextSelection.near(tr.doc.resolve(Math.max(0, tr.selection.from - 2))))\n\n // add text to code block\n tr.insertText(text)\n\n view.dispatch(tr)\n\n return true\n },\n },\n }),\n ]\n },\n})\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tiptap-extension-code-block.esm.js","sources":["../src/code-block.ts"],"sourcesContent":["import { mergeAttributes, Node, textblockTypeInputRule } from '@tiptap/core'\nimport { Plugin, PluginKey, TextSelection } from 'prosemirror-state'\n\nexport interface CodeBlockOptions {\n /**\n * Adds a prefix to language classes that are applied to code tags.\n * Defaults to `'language-'`.\n */\n languageClassPrefix: string,\n /**\n * Define whether the node should be exited on triple enter.\n * Defaults to `true`.\n */\n exitOnTripleEnter: boolean,\n /**\n * Define whether the node should be exited on arrow down if there is no node after it.\n * Defaults to `true`.\n */\n exitOnArrowDown: boolean,\n /**\n * Custom HTML attributes that should be added to the rendered HTML tag.\n */\n HTMLAttributes: Record<string, any>,\n}\n\ndeclare module '@tiptap/core' {\n interface Commands<ReturnType> {\n codeBlock: {\n /**\n * Set a code block\n */\n setCodeBlock: (attributes?: { language: string }) => ReturnType,\n /**\n * Toggle a code block\n */\n toggleCodeBlock: (attributes?: { language: string }) => ReturnType,\n }\n }\n}\n\nexport const backtickInputRegex = /^```([a-z]+)?[\\s\\n]$/\nexport const tildeInputRegex = /^~~~([a-z]+)?[\\s\\n]$/\n\nexport const CodeBlock = Node.create<CodeBlockOptions>({\n name: 'codeBlock',\n\n addOptions() {\n return {\n languageClassPrefix: 'language-',\n exitOnTripleEnter: true,\n exitOnArrowDown: true,\n HTMLAttributes: {},\n }\n },\n\n content: 'text*',\n\n marks: '',\n\n group: 'block',\n\n code: true,\n\n defining: true,\n\n addAttributes() {\n return {\n language: {\n default: null,\n parseHTML: element => {\n const { languageClassPrefix } = this.options\n const classNames = [...element.firstElementChild?.classList || []]\n const languages = classNames\n .filter(className => className.startsWith(languageClassPrefix))\n .map(className => className.replace(languageClassPrefix, ''))\n const language = languages[0]\n\n if (!language) {\n return null\n }\n\n return language\n },\n rendered: false,\n },\n }\n },\n\n parseHTML() {\n return [\n {\n tag: 'pre',\n preserveWhitespace: 'full',\n },\n ]\n },\n\n renderHTML({ node, HTMLAttributes }) {\n return [\n 'pre',\n mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),\n [\n 'code',\n {\n class: node.attrs.language\n ? this.options.languageClassPrefix + node.attrs.language\n : null,\n },\n 0,\n ],\n ]\n },\n\n addCommands() {\n return {\n setCodeBlock: attributes => ({ commands }) => {\n return commands.setNode(this.name, attributes)\n },\n toggleCodeBlock: attributes => ({ commands }) => {\n return commands.toggleNode(this.name, 'paragraph', attributes)\n },\n }\n },\n\n addKeyboardShortcuts() {\n return {\n 'Mod-Alt-c': () => this.editor.commands.toggleCodeBlock(),\n\n // remove code block when at start of document or code block is empty\n Backspace: () => {\n const { empty, $anchor } = this.editor.state.selection\n const isAtStart = $anchor.pos === 1\n\n if (!empty || $anchor.parent.type.name !== this.name) {\n return false\n }\n\n if (isAtStart || !$anchor.parent.textContent.length) {\n return this.editor.commands.clearNodes()\n }\n\n return false\n },\n\n // exit node on triple enter\n Enter: ({ editor }) => {\n if (!this.options.exitOnTripleEnter) {\n return false\n }\n\n const { state } = editor\n const { selection } = state\n const { $from, empty } = selection\n\n if (!empty || $from.parent.type !== this.type) {\n return false\n }\n\n const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2\n const endsWithDoubleNewline = $from.parent.textContent.endsWith('\\n\\n')\n\n if (!isAtEnd || !endsWithDoubleNewline) {\n return false\n }\n\n return editor\n .chain()\n .command(({ tr }) => {\n tr.delete($from.pos - 2, $from.pos)\n\n return true\n })\n .exitCode()\n .run()\n },\n\n // exit node on arrow down\n ArrowDown: ({ editor }) => {\n if (!this.options.exitOnArrowDown) {\n return false\n }\n\n const { state } = editor\n const { selection, doc } = state\n const { $from, empty } = selection\n\n if (!empty || $from.parent.type !== this.type) {\n return false\n }\n\n const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2\n\n if (!isAtEnd) {\n return false\n }\n\n const after = $from.after()\n\n if (after === undefined) {\n return false\n }\n\n const nodeAfter = doc.nodeAt(after)\n\n if (nodeAfter) {\n return false\n }\n\n return editor.commands.exitCode()\n },\n }\n },\n\n addInputRules() {\n return [\n textblockTypeInputRule({\n find: backtickInputRegex,\n type: this.type,\n getAttributes: match => ({\n language: match[1],\n }),\n }),\n textblockTypeInputRule({\n find: tildeInputRegex,\n type: this.type,\n getAttributes: match => ({\n language: match[1],\n }),\n }),\n ]\n },\n\n addProseMirrorPlugins() {\n return [\n // this plugin creates a code block for pasted content from VS Code\n // we can also detect the copied code language\n new Plugin({\n key: new PluginKey('codeBlockVSCodeHandler'),\n props: {\n handlePaste: (view, event) => {\n if (!event.clipboardData) {\n return false\n }\n\n // don’t create a new code block within code blocks\n if (this.editor.isActive(this.type.name)) {\n return false\n }\n\n const text = event.clipboardData.getData('text/plain')\n const vscode = event.clipboardData.getData('vscode-editor-data')\n const vscodeData = vscode\n ? JSON.parse(vscode)\n : undefined\n const language = vscodeData?.mode\n\n if (!text || !language) {\n return false\n }\n\n const { tr } = view.state\n\n // create an empty code block\n tr.replaceSelectionWith(this.type.create({ language }))\n\n // put cursor inside the newly created code block\n tr.setSelection(TextSelection.near(tr.doc.resolve(Math.max(0, tr.selection.from - 2))))\n\n // add text to code block\n // strip carriage return chars from text pasted as code\n // see: https://github.com/ProseMirror/prosemirror-view/commit/a50a6bcceb4ce52ac8fcc6162488d8875613aacd\n tr.insertText(text.replace(/\\r\\n?/g, '\\n'))\n\n // store meta information\n // this is useful for other plugins that depends on the paste event\n // like the paste rule plugin\n tr.setMeta('paste', true)\n\n view.dispatch(tr)\n\n return true\n },\n },\n }),\n ]\n },\n})\n"],"names":[],"mappings":"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"}
|
|
@@ -4,13 +4,17 @@
|
|
|
4
4
|
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@tiptap/extension-code-block"] = {}, global.core, global.prosemirrorState));
|
|
5
5
|
})(this, (function (exports, core, prosemirrorState) { 'use strict';
|
|
6
6
|
|
|
7
|
-
const backtickInputRegex = /^```(
|
|
8
|
-
const tildeInputRegex = /^~~~(
|
|
7
|
+
const backtickInputRegex = /^```([a-z]+)?[\s\n]$/;
|
|
8
|
+
const tildeInputRegex = /^~~~([a-z]+)?[\s\n]$/;
|
|
9
9
|
const CodeBlock = core.Node.create({
|
|
10
10
|
name: 'codeBlock',
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
11
|
+
addOptions() {
|
|
12
|
+
return {
|
|
13
|
+
languageClassPrefix: 'language-',
|
|
14
|
+
exitOnTripleEnter: true,
|
|
15
|
+
exitOnArrowDown: true,
|
|
16
|
+
HTMLAttributes: {},
|
|
17
|
+
};
|
|
14
18
|
},
|
|
15
19
|
content: 'text*',
|
|
16
20
|
marks: '',
|
|
@@ -34,14 +38,7 @@
|
|
|
34
38
|
}
|
|
35
39
|
return language;
|
|
36
40
|
},
|
|
37
|
-
|
|
38
|
-
if (!attributes.language) {
|
|
39
|
-
return null;
|
|
40
|
-
}
|
|
41
|
-
return {
|
|
42
|
-
class: this.options.languageClassPrefix + attributes.language,
|
|
43
|
-
};
|
|
44
|
-
},
|
|
41
|
+
rendered: false,
|
|
45
42
|
},
|
|
46
43
|
};
|
|
47
44
|
},
|
|
@@ -53,16 +50,28 @@
|
|
|
53
50
|
},
|
|
54
51
|
];
|
|
55
52
|
},
|
|
56
|
-
renderHTML({ HTMLAttributes }) {
|
|
57
|
-
return [
|
|
53
|
+
renderHTML({ node, HTMLAttributes }) {
|
|
54
|
+
return [
|
|
55
|
+
'pre',
|
|
56
|
+
core.mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
|
|
57
|
+
[
|
|
58
|
+
'code',
|
|
59
|
+
{
|
|
60
|
+
class: node.attrs.language
|
|
61
|
+
? this.options.languageClassPrefix + node.attrs.language
|
|
62
|
+
: null,
|
|
63
|
+
},
|
|
64
|
+
0,
|
|
65
|
+
],
|
|
66
|
+
];
|
|
58
67
|
},
|
|
59
68
|
addCommands() {
|
|
60
69
|
return {
|
|
61
70
|
setCodeBlock: attributes => ({ commands }) => {
|
|
62
|
-
return commands.setNode(
|
|
71
|
+
return commands.setNode(this.name, attributes);
|
|
63
72
|
},
|
|
64
73
|
toggleCodeBlock: attributes => ({ commands }) => {
|
|
65
|
-
return commands.toggleNode(
|
|
74
|
+
return commands.toggleNode(this.name, 'paragraph', attributes);
|
|
66
75
|
},
|
|
67
76
|
};
|
|
68
77
|
},
|
|
@@ -81,6 +90,56 @@
|
|
|
81
90
|
}
|
|
82
91
|
return false;
|
|
83
92
|
},
|
|
93
|
+
// exit node on triple enter
|
|
94
|
+
Enter: ({ editor }) => {
|
|
95
|
+
if (!this.options.exitOnTripleEnter) {
|
|
96
|
+
return false;
|
|
97
|
+
}
|
|
98
|
+
const { state } = editor;
|
|
99
|
+
const { selection } = state;
|
|
100
|
+
const { $from, empty } = selection;
|
|
101
|
+
if (!empty || $from.parent.type !== this.type) {
|
|
102
|
+
return false;
|
|
103
|
+
}
|
|
104
|
+
const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2;
|
|
105
|
+
const endsWithDoubleNewline = $from.parent.textContent.endsWith('\n\n');
|
|
106
|
+
if (!isAtEnd || !endsWithDoubleNewline) {
|
|
107
|
+
return false;
|
|
108
|
+
}
|
|
109
|
+
return editor
|
|
110
|
+
.chain()
|
|
111
|
+
.command(({ tr }) => {
|
|
112
|
+
tr.delete($from.pos - 2, $from.pos);
|
|
113
|
+
return true;
|
|
114
|
+
})
|
|
115
|
+
.exitCode()
|
|
116
|
+
.run();
|
|
117
|
+
},
|
|
118
|
+
// exit node on arrow down
|
|
119
|
+
ArrowDown: ({ editor }) => {
|
|
120
|
+
if (!this.options.exitOnArrowDown) {
|
|
121
|
+
return false;
|
|
122
|
+
}
|
|
123
|
+
const { state } = editor;
|
|
124
|
+
const { selection, doc } = state;
|
|
125
|
+
const { $from, empty } = selection;
|
|
126
|
+
if (!empty || $from.parent.type !== this.type) {
|
|
127
|
+
return false;
|
|
128
|
+
}
|
|
129
|
+
const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2;
|
|
130
|
+
if (!isAtEnd) {
|
|
131
|
+
return false;
|
|
132
|
+
}
|
|
133
|
+
const after = $from.after();
|
|
134
|
+
if (after === undefined) {
|
|
135
|
+
return false;
|
|
136
|
+
}
|
|
137
|
+
const nodeAfter = doc.nodeAt(after);
|
|
138
|
+
if (nodeAfter) {
|
|
139
|
+
return false;
|
|
140
|
+
}
|
|
141
|
+
return editor.commands.exitCode();
|
|
142
|
+
},
|
|
84
143
|
};
|
|
85
144
|
},
|
|
86
145
|
addInputRules() {
|
|
@@ -88,12 +147,16 @@
|
|
|
88
147
|
core.textblockTypeInputRule({
|
|
89
148
|
find: backtickInputRegex,
|
|
90
149
|
type: this.type,
|
|
91
|
-
getAttributes:
|
|
150
|
+
getAttributes: match => ({
|
|
151
|
+
language: match[1],
|
|
152
|
+
}),
|
|
92
153
|
}),
|
|
93
154
|
core.textblockTypeInputRule({
|
|
94
155
|
find: tildeInputRegex,
|
|
95
156
|
type: this.type,
|
|
96
|
-
getAttributes:
|
|
157
|
+
getAttributes: match => ({
|
|
158
|
+
language: match[1],
|
|
159
|
+
}),
|
|
97
160
|
}),
|
|
98
161
|
];
|
|
99
162
|
},
|
|
@@ -117,7 +180,7 @@
|
|
|
117
180
|
const vscodeData = vscode
|
|
118
181
|
? JSON.parse(vscode)
|
|
119
182
|
: undefined;
|
|
120
|
-
const language = vscodeData.mode;
|
|
183
|
+
const language = vscodeData === null || vscodeData === void 0 ? void 0 : vscodeData.mode;
|
|
121
184
|
if (!text || !language) {
|
|
122
185
|
return false;
|
|
123
186
|
}
|
|
@@ -127,7 +190,13 @@
|
|
|
127
190
|
// put cursor inside the newly created code block
|
|
128
191
|
tr.setSelection(prosemirrorState.TextSelection.near(tr.doc.resolve(Math.max(0, tr.selection.from - 2))));
|
|
129
192
|
// add text to code block
|
|
130
|
-
|
|
193
|
+
// strip carriage return chars from text pasted as code
|
|
194
|
+
// see: https://github.com/ProseMirror/prosemirror-view/commit/a50a6bcceb4ce52ac8fcc6162488d8875613aacd
|
|
195
|
+
tr.insertText(text.replace(/\r\n?/g, '\n'));
|
|
196
|
+
// store meta information
|
|
197
|
+
// this is useful for other plugins that depends on the paste event
|
|
198
|
+
// like the paste rule plugin
|
|
199
|
+
tr.setMeta('paste', true);
|
|
131
200
|
view.dispatch(tr);
|
|
132
201
|
return true;
|
|
133
202
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tiptap-extension-code-block.umd.js","sources":["../src/code-block.ts"],"sourcesContent":["import { Node, textblockTypeInputRule } from '@tiptap/core'\nimport { Plugin, PluginKey, TextSelection } from 'prosemirror-state'\n\nexport interface CodeBlockOptions {\n languageClassPrefix: string,\n HTMLAttributes: Record<string, any>,\n}\n\ndeclare module '@tiptap/core' {\n interface Commands<ReturnType> {\n codeBlock: {\n /**\n * Set a code block\n */\n setCodeBlock: (attributes?: { language: string }) => ReturnType,\n /**\n * Toggle a code block\n */\n toggleCodeBlock: (attributes?: { language: string }) => ReturnType,\n }\n }\n}\n\nexport const backtickInputRegex = /^```(?<language>[a-z]*)?[\\s\\n]$/\nexport const tildeInputRegex = /^~~~(?<language>[a-z]*)?[\\s\\n]$/\n\nexport const CodeBlock = Node.create<CodeBlockOptions>({\n name: 'codeBlock',\n\n defaultOptions: {\n languageClassPrefix: 'language-',\n HTMLAttributes: {},\n },\n\n content: 'text*',\n\n marks: '',\n\n group: 'block',\n\n code: true,\n\n defining: true,\n\n addAttributes() {\n return {\n language: {\n default: null,\n parseHTML: element => {\n const { languageClassPrefix } = this.options\n const classNames = [...element.firstElementChild?.classList || []]\n const languages = classNames\n .filter(className => className.startsWith(languageClassPrefix))\n .map(className => className.replace(languageClassPrefix, ''))\n const language = languages[0]\n\n if (!language) {\n return null\n }\n\n return language\n },\n renderHTML: attributes => {\n if (!attributes.language) {\n return null\n }\n\n return {\n class: this.options.languageClassPrefix + attributes.language,\n }\n },\n },\n }\n },\n\n parseHTML() {\n return [\n {\n tag: 'pre',\n preserveWhitespace: 'full',\n },\n ]\n },\n\n renderHTML({ HTMLAttributes }) {\n return ['pre', this.options.HTMLAttributes, ['code', HTMLAttributes, 0]]\n },\n\n addCommands() {\n return {\n setCodeBlock: attributes => ({ commands }) => {\n return commands.setNode('codeBlock', attributes)\n },\n toggleCodeBlock: attributes => ({ commands }) => {\n return commands.toggleNode('codeBlock', 'paragraph', attributes)\n },\n }\n },\n\n addKeyboardShortcuts() {\n return {\n 'Mod-Alt-c': () => this.editor.commands.toggleCodeBlock(),\n\n // remove code block when at start of document or code block is empty\n Backspace: () => {\n const { empty, $anchor } = this.editor.state.selection\n const isAtStart = $anchor.pos === 1\n\n if (!empty || $anchor.parent.type.name !== this.name) {\n return false\n }\n\n if (isAtStart || !$anchor.parent.textContent.length) {\n return this.editor.commands.clearNodes()\n }\n\n return false\n },\n }\n },\n\n addInputRules() {\n return [\n textblockTypeInputRule({\n find: backtickInputRegex,\n type: this.type,\n getAttributes: ({ groups }) => groups,\n }),\n textblockTypeInputRule({\n find: tildeInputRegex,\n type: this.type,\n getAttributes: ({ groups }) => groups,\n }),\n ]\n },\n\n addProseMirrorPlugins() {\n return [\n // this plugin creates a code block for pasted content from VS Code\n // we can also detect the copied code language\n new Plugin({\n key: new PluginKey('codeBlockVSCodeHandler'),\n props: {\n handlePaste: (view, event) => {\n if (!event.clipboardData) {\n return false\n }\n\n // don’t create a new code block within code blocks\n if (this.editor.isActive(this.type.name)) {\n return false\n }\n\n const text = event.clipboardData.getData('text/plain')\n const vscode = event.clipboardData.getData('vscode-editor-data')\n const vscodeData = vscode\n ? JSON.parse(vscode)\n : undefined\n const language = vscodeData.mode\n\n if (!text || !language) {\n return false\n }\n\n const { tr } = view.state\n\n // create an empty code block\n tr.replaceSelectionWith(this.type.create({ language }))\n\n // put cursor inside the newly created code block\n tr.setSelection(TextSelection.near(tr.doc.resolve(Math.max(0, tr.selection.from - 2))))\n\n // add text to code block\n tr.insertText(text)\n\n view.dispatch(tr)\n\n return true\n },\n },\n }),\n ]\n },\n})\n"],"names":["Node","textblockTypeInputRule","Plugin","PluginKey","TextSelection"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tiptap-extension-code-block.umd.js","sources":["../src/code-block.ts"],"sourcesContent":["import { mergeAttributes, Node, textblockTypeInputRule } from '@tiptap/core'\nimport { Plugin, PluginKey, TextSelection } from 'prosemirror-state'\n\nexport interface CodeBlockOptions {\n /**\n * Adds a prefix to language classes that are applied to code tags.\n * Defaults to `'language-'`.\n */\n languageClassPrefix: string,\n /**\n * Define whether the node should be exited on triple enter.\n * Defaults to `true`.\n */\n exitOnTripleEnter: boolean,\n /**\n * Define whether the node should be exited on arrow down if there is no node after it.\n * Defaults to `true`.\n */\n exitOnArrowDown: boolean,\n /**\n * Custom HTML attributes that should be added to the rendered HTML tag.\n */\n HTMLAttributes: Record<string, any>,\n}\n\ndeclare module '@tiptap/core' {\n interface Commands<ReturnType> {\n codeBlock: {\n /**\n * Set a code block\n */\n setCodeBlock: (attributes?: { language: string }) => ReturnType,\n /**\n * Toggle a code block\n */\n toggleCodeBlock: (attributes?: { language: string }) => ReturnType,\n }\n }\n}\n\nexport const backtickInputRegex = /^```([a-z]+)?[\\s\\n]$/\nexport const tildeInputRegex = /^~~~([a-z]+)?[\\s\\n]$/\n\nexport const CodeBlock = Node.create<CodeBlockOptions>({\n name: 'codeBlock',\n\n addOptions() {\n return {\n languageClassPrefix: 'language-',\n exitOnTripleEnter: true,\n exitOnArrowDown: true,\n HTMLAttributes: {},\n }\n },\n\n content: 'text*',\n\n marks: '',\n\n group: 'block',\n\n code: true,\n\n defining: true,\n\n addAttributes() {\n return {\n language: {\n default: null,\n parseHTML: element => {\n const { languageClassPrefix } = this.options\n const classNames = [...element.firstElementChild?.classList || []]\n const languages = classNames\n .filter(className => className.startsWith(languageClassPrefix))\n .map(className => className.replace(languageClassPrefix, ''))\n const language = languages[0]\n\n if (!language) {\n return null\n }\n\n return language\n },\n rendered: false,\n },\n }\n },\n\n parseHTML() {\n return [\n {\n tag: 'pre',\n preserveWhitespace: 'full',\n },\n ]\n },\n\n renderHTML({ node, HTMLAttributes }) {\n return [\n 'pre',\n mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),\n [\n 'code',\n {\n class: node.attrs.language\n ? this.options.languageClassPrefix + node.attrs.language\n : null,\n },\n 0,\n ],\n ]\n },\n\n addCommands() {\n return {\n setCodeBlock: attributes => ({ commands }) => {\n return commands.setNode(this.name, attributes)\n },\n toggleCodeBlock: attributes => ({ commands }) => {\n return commands.toggleNode(this.name, 'paragraph', attributes)\n },\n }\n },\n\n addKeyboardShortcuts() {\n return {\n 'Mod-Alt-c': () => this.editor.commands.toggleCodeBlock(),\n\n // remove code block when at start of document or code block is empty\n Backspace: () => {\n const { empty, $anchor } = this.editor.state.selection\n const isAtStart = $anchor.pos === 1\n\n if (!empty || $anchor.parent.type.name !== this.name) {\n return false\n }\n\n if (isAtStart || !$anchor.parent.textContent.length) {\n return this.editor.commands.clearNodes()\n }\n\n return false\n },\n\n // exit node on triple enter\n Enter: ({ editor }) => {\n if (!this.options.exitOnTripleEnter) {\n return false\n }\n\n const { state } = editor\n const { selection } = state\n const { $from, empty } = selection\n\n if (!empty || $from.parent.type !== this.type) {\n return false\n }\n\n const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2\n const endsWithDoubleNewline = $from.parent.textContent.endsWith('\\n\\n')\n\n if (!isAtEnd || !endsWithDoubleNewline) {\n return false\n }\n\n return editor\n .chain()\n .command(({ tr }) => {\n tr.delete($from.pos - 2, $from.pos)\n\n return true\n })\n .exitCode()\n .run()\n },\n\n // exit node on arrow down\n ArrowDown: ({ editor }) => {\n if (!this.options.exitOnArrowDown) {\n return false\n }\n\n const { state } = editor\n const { selection, doc } = state\n const { $from, empty } = selection\n\n if (!empty || $from.parent.type !== this.type) {\n return false\n }\n\n const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2\n\n if (!isAtEnd) {\n return false\n }\n\n const after = $from.after()\n\n if (after === undefined) {\n return false\n }\n\n const nodeAfter = doc.nodeAt(after)\n\n if (nodeAfter) {\n return false\n }\n\n return editor.commands.exitCode()\n },\n }\n },\n\n addInputRules() {\n return [\n textblockTypeInputRule({\n find: backtickInputRegex,\n type: this.type,\n getAttributes: match => ({\n language: match[1],\n }),\n }),\n textblockTypeInputRule({\n find: tildeInputRegex,\n type: this.type,\n getAttributes: match => ({\n language: match[1],\n }),\n }),\n ]\n },\n\n addProseMirrorPlugins() {\n return [\n // this plugin creates a code block for pasted content from VS Code\n // we can also detect the copied code language\n new Plugin({\n key: new PluginKey('codeBlockVSCodeHandler'),\n props: {\n handlePaste: (view, event) => {\n if (!event.clipboardData) {\n return false\n }\n\n // don’t create a new code block within code blocks\n if (this.editor.isActive(this.type.name)) {\n return false\n }\n\n const text = event.clipboardData.getData('text/plain')\n const vscode = event.clipboardData.getData('vscode-editor-data')\n const vscodeData = vscode\n ? JSON.parse(vscode)\n : undefined\n const language = vscodeData?.mode\n\n if (!text || !language) {\n return false\n }\n\n const { tr } = view.state\n\n // create an empty code block\n tr.replaceSelectionWith(this.type.create({ language }))\n\n // put cursor inside the newly created code block\n tr.setSelection(TextSelection.near(tr.doc.resolve(Math.max(0, tr.selection.from - 2))))\n\n // add text to code block\n // strip carriage return chars from text pasted as code\n // see: https://github.com/ProseMirror/prosemirror-view/commit/a50a6bcceb4ce52ac8fcc6162488d8875613aacd\n tr.insertText(text.replace(/\\r\\n?/g, '\\n'))\n\n // store meta information\n // this is useful for other plugins that depends on the paste event\n // like the paste rule plugin\n tr.setMeta('paste', true)\n\n view.dispatch(tr)\n\n return true\n },\n },\n }),\n ]\n },\n})\n"],"names":["Node","mergeAttributes","textblockTypeInputRule","Plugin","PluginKey","TextSelection"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tiptap/extension-code-block",
|
|
3
3
|
"description": "code block extension for tiptap",
|
|
4
|
-
"version": "2.0.0-beta.
|
|
4
|
+
"version": "2.0.0-beta.200",
|
|
5
5
|
"homepage": "https://tiptap.dev",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"tiptap",
|
|
@@ -21,15 +21,14 @@
|
|
|
21
21
|
"dist"
|
|
22
22
|
],
|
|
23
23
|
"peerDependencies": {
|
|
24
|
-
"@tiptap/core": "^2.0.0-beta.
|
|
24
|
+
"@tiptap/core": "^2.0.0-beta.193"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"prosemirror-state": "^1.
|
|
27
|
+
"prosemirror-state": "^1.4.1"
|
|
28
28
|
},
|
|
29
29
|
"repository": {
|
|
30
30
|
"type": "git",
|
|
31
31
|
"url": "https://github.com/ueberdosis/tiptap",
|
|
32
32
|
"directory": "packages/extension-code-block"
|
|
33
|
-
}
|
|
34
|
-
"gitHead": "d3641b88e0539a69bc6a4a077a5143aea3020afa"
|
|
33
|
+
}
|
|
35
34
|
}
|
package/src/code-block.ts
CHANGED
|
@@ -1,8 +1,25 @@
|
|
|
1
|
-
import { Node, textblockTypeInputRule } from '@tiptap/core'
|
|
1
|
+
import { mergeAttributes, Node, textblockTypeInputRule } from '@tiptap/core'
|
|
2
2
|
import { Plugin, PluginKey, TextSelection } from 'prosemirror-state'
|
|
3
3
|
|
|
4
4
|
export interface CodeBlockOptions {
|
|
5
|
+
/**
|
|
6
|
+
* Adds a prefix to language classes that are applied to code tags.
|
|
7
|
+
* Defaults to `'language-'`.
|
|
8
|
+
*/
|
|
5
9
|
languageClassPrefix: string,
|
|
10
|
+
/**
|
|
11
|
+
* Define whether the node should be exited on triple enter.
|
|
12
|
+
* Defaults to `true`.
|
|
13
|
+
*/
|
|
14
|
+
exitOnTripleEnter: boolean,
|
|
15
|
+
/**
|
|
16
|
+
* Define whether the node should be exited on arrow down if there is no node after it.
|
|
17
|
+
* Defaults to `true`.
|
|
18
|
+
*/
|
|
19
|
+
exitOnArrowDown: boolean,
|
|
20
|
+
/**
|
|
21
|
+
* Custom HTML attributes that should be added to the rendered HTML tag.
|
|
22
|
+
*/
|
|
6
23
|
HTMLAttributes: Record<string, any>,
|
|
7
24
|
}
|
|
8
25
|
|
|
@@ -21,15 +38,19 @@ declare module '@tiptap/core' {
|
|
|
21
38
|
}
|
|
22
39
|
}
|
|
23
40
|
|
|
24
|
-
export const backtickInputRegex = /^```(
|
|
25
|
-
export const tildeInputRegex = /^~~~(
|
|
41
|
+
export const backtickInputRegex = /^```([a-z]+)?[\s\n]$/
|
|
42
|
+
export const tildeInputRegex = /^~~~([a-z]+)?[\s\n]$/
|
|
26
43
|
|
|
27
44
|
export const CodeBlock = Node.create<CodeBlockOptions>({
|
|
28
45
|
name: 'codeBlock',
|
|
29
46
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
47
|
+
addOptions() {
|
|
48
|
+
return {
|
|
49
|
+
languageClassPrefix: 'language-',
|
|
50
|
+
exitOnTripleEnter: true,
|
|
51
|
+
exitOnArrowDown: true,
|
|
52
|
+
HTMLAttributes: {},
|
|
53
|
+
}
|
|
33
54
|
},
|
|
34
55
|
|
|
35
56
|
content: 'text*',
|
|
@@ -60,15 +81,7 @@ export const CodeBlock = Node.create<CodeBlockOptions>({
|
|
|
60
81
|
|
|
61
82
|
return language
|
|
62
83
|
},
|
|
63
|
-
|
|
64
|
-
if (!attributes.language) {
|
|
65
|
-
return null
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
return {
|
|
69
|
-
class: this.options.languageClassPrefix + attributes.language,
|
|
70
|
-
}
|
|
71
|
-
},
|
|
84
|
+
rendered: false,
|
|
72
85
|
},
|
|
73
86
|
}
|
|
74
87
|
},
|
|
@@ -82,17 +95,29 @@ export const CodeBlock = Node.create<CodeBlockOptions>({
|
|
|
82
95
|
]
|
|
83
96
|
},
|
|
84
97
|
|
|
85
|
-
renderHTML({ HTMLAttributes }) {
|
|
86
|
-
return [
|
|
98
|
+
renderHTML({ node, HTMLAttributes }) {
|
|
99
|
+
return [
|
|
100
|
+
'pre',
|
|
101
|
+
mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
|
|
102
|
+
[
|
|
103
|
+
'code',
|
|
104
|
+
{
|
|
105
|
+
class: node.attrs.language
|
|
106
|
+
? this.options.languageClassPrefix + node.attrs.language
|
|
107
|
+
: null,
|
|
108
|
+
},
|
|
109
|
+
0,
|
|
110
|
+
],
|
|
111
|
+
]
|
|
87
112
|
},
|
|
88
113
|
|
|
89
114
|
addCommands() {
|
|
90
115
|
return {
|
|
91
116
|
setCodeBlock: attributes => ({ commands }) => {
|
|
92
|
-
return commands.setNode(
|
|
117
|
+
return commands.setNode(this.name, attributes)
|
|
93
118
|
},
|
|
94
119
|
toggleCodeBlock: attributes => ({ commands }) => {
|
|
95
|
-
return commands.toggleNode(
|
|
120
|
+
return commands.toggleNode(this.name, 'paragraph', attributes)
|
|
96
121
|
},
|
|
97
122
|
}
|
|
98
123
|
},
|
|
@@ -116,6 +141,73 @@ export const CodeBlock = Node.create<CodeBlockOptions>({
|
|
|
116
141
|
|
|
117
142
|
return false
|
|
118
143
|
},
|
|
144
|
+
|
|
145
|
+
// exit node on triple enter
|
|
146
|
+
Enter: ({ editor }) => {
|
|
147
|
+
if (!this.options.exitOnTripleEnter) {
|
|
148
|
+
return false
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
const { state } = editor
|
|
152
|
+
const { selection } = state
|
|
153
|
+
const { $from, empty } = selection
|
|
154
|
+
|
|
155
|
+
if (!empty || $from.parent.type !== this.type) {
|
|
156
|
+
return false
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2
|
|
160
|
+
const endsWithDoubleNewline = $from.parent.textContent.endsWith('\n\n')
|
|
161
|
+
|
|
162
|
+
if (!isAtEnd || !endsWithDoubleNewline) {
|
|
163
|
+
return false
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
return editor
|
|
167
|
+
.chain()
|
|
168
|
+
.command(({ tr }) => {
|
|
169
|
+
tr.delete($from.pos - 2, $from.pos)
|
|
170
|
+
|
|
171
|
+
return true
|
|
172
|
+
})
|
|
173
|
+
.exitCode()
|
|
174
|
+
.run()
|
|
175
|
+
},
|
|
176
|
+
|
|
177
|
+
// exit node on arrow down
|
|
178
|
+
ArrowDown: ({ editor }) => {
|
|
179
|
+
if (!this.options.exitOnArrowDown) {
|
|
180
|
+
return false
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
const { state } = editor
|
|
184
|
+
const { selection, doc } = state
|
|
185
|
+
const { $from, empty } = selection
|
|
186
|
+
|
|
187
|
+
if (!empty || $from.parent.type !== this.type) {
|
|
188
|
+
return false
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2
|
|
192
|
+
|
|
193
|
+
if (!isAtEnd) {
|
|
194
|
+
return false
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
const after = $from.after()
|
|
198
|
+
|
|
199
|
+
if (after === undefined) {
|
|
200
|
+
return false
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
const nodeAfter = doc.nodeAt(after)
|
|
204
|
+
|
|
205
|
+
if (nodeAfter) {
|
|
206
|
+
return false
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
return editor.commands.exitCode()
|
|
210
|
+
},
|
|
119
211
|
}
|
|
120
212
|
},
|
|
121
213
|
|
|
@@ -124,12 +216,16 @@ export const CodeBlock = Node.create<CodeBlockOptions>({
|
|
|
124
216
|
textblockTypeInputRule({
|
|
125
217
|
find: backtickInputRegex,
|
|
126
218
|
type: this.type,
|
|
127
|
-
getAttributes:
|
|
219
|
+
getAttributes: match => ({
|
|
220
|
+
language: match[1],
|
|
221
|
+
}),
|
|
128
222
|
}),
|
|
129
223
|
textblockTypeInputRule({
|
|
130
224
|
find: tildeInputRegex,
|
|
131
225
|
type: this.type,
|
|
132
|
-
getAttributes:
|
|
226
|
+
getAttributes: match => ({
|
|
227
|
+
language: match[1],
|
|
228
|
+
}),
|
|
133
229
|
}),
|
|
134
230
|
]
|
|
135
231
|
},
|
|
@@ -156,7 +252,7 @@ export const CodeBlock = Node.create<CodeBlockOptions>({
|
|
|
156
252
|
const vscodeData = vscode
|
|
157
253
|
? JSON.parse(vscode)
|
|
158
254
|
: undefined
|
|
159
|
-
const language = vscodeData
|
|
255
|
+
const language = vscodeData?.mode
|
|
160
256
|
|
|
161
257
|
if (!text || !language) {
|
|
162
258
|
return false
|
|
@@ -171,7 +267,14 @@ export const CodeBlock = Node.create<CodeBlockOptions>({
|
|
|
171
267
|
tr.setSelection(TextSelection.near(tr.doc.resolve(Math.max(0, tr.selection.from - 2))))
|
|
172
268
|
|
|
173
269
|
// add text to code block
|
|
174
|
-
|
|
270
|
+
// strip carriage return chars from text pasted as code
|
|
271
|
+
// see: https://github.com/ProseMirror/prosemirror-view/commit/a50a6bcceb4ce52ac8fcc6162488d8875613aacd
|
|
272
|
+
tr.insertText(text.replace(/\r\n?/g, '\n'))
|
|
273
|
+
|
|
274
|
+
// store meta information
|
|
275
|
+
// this is useful for other plugins that depends on the paste event
|
|
276
|
+
// like the paste rule plugin
|
|
277
|
+
tr.setMeta('paste', true)
|
|
175
278
|
|
|
176
279
|
view.dispatch(tr)
|
|
177
280
|
|
package/LICENSE.md
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2021, überdosis GbR
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|