@tiptap/extension-code-block 2.0.0-beta.3 → 2.0.0-beta.30
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/LICENSE.md +1 -1
- package/README.md +2 -2
- package/dist/packages/extension-code-block/src/code-block.d.ts +6 -8
- package/dist/tiptap-extension-code-block.cjs.js +76 -20
- package/dist/tiptap-extension-code-block.cjs.js.map +1 -1
- package/dist/tiptap-extension-code-block.esm.js +77 -22
- package/dist/tiptap-extension-code-block.esm.js.map +1 -1
- package/dist/tiptap-extension-code-block.umd.js +80 -24
- package/dist/tiptap-extension-code-block.umd.js.map +1 -1
- package/package.json +8 -4
- package/src/code-block.ts +92 -28
- package/CHANGELOG.md +0 -134
- package/dist/tiptap-extension-code-block.bundle.umd.min.js +0 -2
- package/dist/tiptap-extension-code-block.bundle.umd.min.js.map +0 -1
package/LICENSE.md
CHANGED
package/README.md
CHANGED
|
@@ -7,8 +7,8 @@
|
|
|
7
7
|
## Introduction
|
|
8
8
|
tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
|
|
9
9
|
|
|
10
|
-
##
|
|
10
|
+
## Official Documentation
|
|
11
11
|
Documentation can be found on the [tiptap website](https://tiptap.dev).
|
|
12
12
|
|
|
13
13
|
## License
|
|
14
|
-
tiptap is open
|
|
14
|
+
tiptap is open sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap/blob/main/LICENSE.md).
|
|
@@ -1,28 +1,26 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Node } from '@tiptap/core';
|
|
2
2
|
export interface CodeBlockOptions {
|
|
3
3
|
languageClassPrefix: string;
|
|
4
|
-
HTMLAttributes:
|
|
5
|
-
[key: string]: any;
|
|
6
|
-
};
|
|
4
|
+
HTMLAttributes: Record<string, any>;
|
|
7
5
|
}
|
|
8
6
|
declare module '@tiptap/core' {
|
|
9
|
-
interface Commands {
|
|
7
|
+
interface Commands<ReturnType> {
|
|
10
8
|
codeBlock: {
|
|
11
9
|
/**
|
|
12
10
|
* Set a code block
|
|
13
11
|
*/
|
|
14
12
|
setCodeBlock: (attributes?: {
|
|
15
13
|
language: string;
|
|
16
|
-
}) =>
|
|
14
|
+
}) => ReturnType;
|
|
17
15
|
/**
|
|
18
16
|
* Toggle a code block
|
|
19
17
|
*/
|
|
20
18
|
toggleCodeBlock: (attributes?: {
|
|
21
19
|
language: string;
|
|
22
|
-
}) =>
|
|
20
|
+
}) => ReturnType;
|
|
23
21
|
};
|
|
24
22
|
}
|
|
25
23
|
}
|
|
26
24
|
export declare const backtickInputRegex: RegExp;
|
|
27
25
|
export declare const tildeInputRegex: RegExp;
|
|
28
|
-
export declare const CodeBlock: Node<CodeBlockOptions>;
|
|
26
|
+
export declare const CodeBlock: Node<CodeBlockOptions, any>;
|
|
@@ -3,15 +3,17 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var core = require('@tiptap/core');
|
|
6
|
-
var
|
|
6
|
+
var prosemirrorState = require('prosemirror-state');
|
|
7
7
|
|
|
8
|
-
const backtickInputRegex = /^```(?<language>[a-z]*)?
|
|
9
|
-
const tildeInputRegex = /^~~~(?<language>[a-z]*)?
|
|
8
|
+
const backtickInputRegex = /^```(?<language>[a-z]*)?[\s\n]$/;
|
|
9
|
+
const tildeInputRegex = /^~~~(?<language>[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
|
+
HTMLAttributes: {},
|
|
16
|
+
};
|
|
15
17
|
},
|
|
16
18
|
content: 'text*',
|
|
17
19
|
marks: '',
|
|
@@ -24,14 +26,16 @@ const CodeBlock = core.Node.create({
|
|
|
24
26
|
default: null,
|
|
25
27
|
parseHTML: element => {
|
|
26
28
|
var _a;
|
|
27
|
-
const
|
|
28
|
-
|
|
29
|
+
const { languageClassPrefix } = this.options;
|
|
30
|
+
const classNames = [...((_a = element.firstElementChild) === null || _a === void 0 ? void 0 : _a.classList) || []];
|
|
31
|
+
const languages = classNames
|
|
32
|
+
.filter(className => className.startsWith(languageClassPrefix))
|
|
33
|
+
.map(className => className.replace(languageClassPrefix, ''));
|
|
34
|
+
const language = languages[0];
|
|
35
|
+
if (!language) {
|
|
29
36
|
return null;
|
|
30
37
|
}
|
|
31
|
-
|
|
32
|
-
return {
|
|
33
|
-
language: classAttribute.replace(regexLanguageClassPrefix, ''),
|
|
34
|
-
};
|
|
38
|
+
return language;
|
|
35
39
|
},
|
|
36
40
|
renderHTML: attributes => {
|
|
37
41
|
if (!attributes.language) {
|
|
@@ -58,10 +62,10 @@ const CodeBlock = core.Node.create({
|
|
|
58
62
|
addCommands() {
|
|
59
63
|
return {
|
|
60
64
|
setCodeBlock: attributes => ({ commands }) => {
|
|
61
|
-
return commands.setNode(
|
|
65
|
+
return commands.setNode(this.name, attributes);
|
|
62
66
|
},
|
|
63
67
|
toggleCodeBlock: attributes => ({ commands }) => {
|
|
64
|
-
return commands.toggleNode(
|
|
68
|
+
return commands.toggleNode(this.name, 'paragraph', attributes);
|
|
65
69
|
},
|
|
66
70
|
};
|
|
67
71
|
},
|
|
@@ -69,10 +73,10 @@ const CodeBlock = core.Node.create({
|
|
|
69
73
|
return {
|
|
70
74
|
'Mod-Alt-c': () => this.editor.commands.toggleCodeBlock(),
|
|
71
75
|
// remove code block when at start of document or code block is empty
|
|
72
|
-
Backspace:
|
|
73
|
-
const { empty, $anchor } = state.selection;
|
|
76
|
+
Backspace: () => {
|
|
77
|
+
const { empty, $anchor } = this.editor.state.selection;
|
|
74
78
|
const isAtStart = $anchor.pos === 1;
|
|
75
|
-
if (!empty || $anchor.parent.type.name !==
|
|
79
|
+
if (!empty || $anchor.parent.type.name !== this.name) {
|
|
76
80
|
return false;
|
|
77
81
|
}
|
|
78
82
|
if (isAtStart || !$anchor.parent.textContent.length) {
|
|
@@ -84,14 +88,66 @@ const CodeBlock = core.Node.create({
|
|
|
84
88
|
},
|
|
85
89
|
addInputRules() {
|
|
86
90
|
return [
|
|
87
|
-
|
|
88
|
-
|
|
91
|
+
core.textblockTypeInputRule({
|
|
92
|
+
find: backtickInputRegex,
|
|
93
|
+
type: this.type,
|
|
94
|
+
getAttributes: ({ groups }) => groups,
|
|
95
|
+
}),
|
|
96
|
+
core.textblockTypeInputRule({
|
|
97
|
+
find: tildeInputRegex,
|
|
98
|
+
type: this.type,
|
|
99
|
+
getAttributes: ({ groups }) => groups,
|
|
100
|
+
}),
|
|
101
|
+
];
|
|
102
|
+
},
|
|
103
|
+
addProseMirrorPlugins() {
|
|
104
|
+
return [
|
|
105
|
+
// this plugin creates a code block for pasted content from VS Code
|
|
106
|
+
// we can also detect the copied code language
|
|
107
|
+
new prosemirrorState.Plugin({
|
|
108
|
+
key: new prosemirrorState.PluginKey('codeBlockVSCodeHandler'),
|
|
109
|
+
props: {
|
|
110
|
+
handlePaste: (view, event) => {
|
|
111
|
+
if (!event.clipboardData) {
|
|
112
|
+
return false;
|
|
113
|
+
}
|
|
114
|
+
// don’t create a new code block within code blocks
|
|
115
|
+
if (this.editor.isActive(this.type.name)) {
|
|
116
|
+
return false;
|
|
117
|
+
}
|
|
118
|
+
const text = event.clipboardData.getData('text/plain');
|
|
119
|
+
const vscode = event.clipboardData.getData('vscode-editor-data');
|
|
120
|
+
const vscodeData = vscode
|
|
121
|
+
? JSON.parse(vscode)
|
|
122
|
+
: undefined;
|
|
123
|
+
const language = vscodeData === null || vscodeData === void 0 ? void 0 : vscodeData.mode;
|
|
124
|
+
if (!text || !language) {
|
|
125
|
+
return false;
|
|
126
|
+
}
|
|
127
|
+
const { tr } = view.state;
|
|
128
|
+
// create an empty code block
|
|
129
|
+
tr.replaceSelectionWith(this.type.create({ language }));
|
|
130
|
+
// put cursor inside the newly created code block
|
|
131
|
+
tr.setSelection(prosemirrorState.TextSelection.near(tr.doc.resolve(Math.max(0, tr.selection.from - 2))));
|
|
132
|
+
// add text to code block
|
|
133
|
+
// strip carriage return chars from text pasted as code
|
|
134
|
+
// see: https://github.com/ProseMirror/prosemirror-view/commit/a50a6bcceb4ce52ac8fcc6162488d8875613aacd
|
|
135
|
+
tr.insertText(text.replace(/\r\n?/g, '\n'));
|
|
136
|
+
// store meta information
|
|
137
|
+
// this is useful for other plugins that depends on the paste event
|
|
138
|
+
// like the paste rule plugin
|
|
139
|
+
tr.setMeta('paste', true);
|
|
140
|
+
view.dispatch(tr);
|
|
141
|
+
return true;
|
|
142
|
+
},
|
|
143
|
+
},
|
|
144
|
+
}),
|
|
89
145
|
];
|
|
90
146
|
},
|
|
91
147
|
});
|
|
92
148
|
|
|
93
149
|
exports.CodeBlock = CodeBlock;
|
|
94
150
|
exports.backtickInputRegex = backtickInputRegex;
|
|
95
|
-
exports
|
|
151
|
+
exports["default"] = CodeBlock;
|
|
96
152
|
exports.tildeInputRegex = tildeInputRegex;
|
|
97
153
|
//# sourceMappingURL=tiptap-extension-code-block.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tiptap-extension-code-block.cjs.js","sources":["../src/code-block.ts"],"sourcesContent":["import {
|
|
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 addOptions() {\n return {\n languageClassPrefix: 'language-',\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 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(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 },\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 // 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","textblockTypeInputRule","Plugin","PluginKey","TextSelection"],"mappings":"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"}
|
|
@@ -1,13 +1,15 @@
|
|
|
1
|
-
import { Node } from '@tiptap/core';
|
|
2
|
-
import {
|
|
1
|
+
import { Node, textblockTypeInputRule } from '@tiptap/core';
|
|
2
|
+
import { Plugin, PluginKey, TextSelection } from 'prosemirror-state';
|
|
3
3
|
|
|
4
|
-
const backtickInputRegex = /^```(?<language>[a-z]*)?
|
|
5
|
-
const tildeInputRegex = /^~~~(?<language>[a-z]*)?
|
|
4
|
+
const backtickInputRegex = /^```(?<language>[a-z]*)?[\s\n]$/;
|
|
5
|
+
const tildeInputRegex = /^~~~(?<language>[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
|
+
HTMLAttributes: {},
|
|
12
|
+
};
|
|
11
13
|
},
|
|
12
14
|
content: 'text*',
|
|
13
15
|
marks: '',
|
|
@@ -20,14 +22,16 @@ const CodeBlock = Node.create({
|
|
|
20
22
|
default: null,
|
|
21
23
|
parseHTML: element => {
|
|
22
24
|
var _a;
|
|
23
|
-
const
|
|
24
|
-
|
|
25
|
+
const { languageClassPrefix } = this.options;
|
|
26
|
+
const classNames = [...((_a = element.firstElementChild) === null || _a === void 0 ? void 0 : _a.classList) || []];
|
|
27
|
+
const languages = classNames
|
|
28
|
+
.filter(className => className.startsWith(languageClassPrefix))
|
|
29
|
+
.map(className => className.replace(languageClassPrefix, ''));
|
|
30
|
+
const language = languages[0];
|
|
31
|
+
if (!language) {
|
|
25
32
|
return null;
|
|
26
33
|
}
|
|
27
|
-
|
|
28
|
-
return {
|
|
29
|
-
language: classAttribute.replace(regexLanguageClassPrefix, ''),
|
|
30
|
-
};
|
|
34
|
+
return language;
|
|
31
35
|
},
|
|
32
36
|
renderHTML: attributes => {
|
|
33
37
|
if (!attributes.language) {
|
|
@@ -54,10 +58,10 @@ const CodeBlock = Node.create({
|
|
|
54
58
|
addCommands() {
|
|
55
59
|
return {
|
|
56
60
|
setCodeBlock: attributes => ({ commands }) => {
|
|
57
|
-
return commands.setNode(
|
|
61
|
+
return commands.setNode(this.name, attributes);
|
|
58
62
|
},
|
|
59
63
|
toggleCodeBlock: attributes => ({ commands }) => {
|
|
60
|
-
return commands.toggleNode(
|
|
64
|
+
return commands.toggleNode(this.name, 'paragraph', attributes);
|
|
61
65
|
},
|
|
62
66
|
};
|
|
63
67
|
},
|
|
@@ -65,10 +69,10 @@ const CodeBlock = Node.create({
|
|
|
65
69
|
return {
|
|
66
70
|
'Mod-Alt-c': () => this.editor.commands.toggleCodeBlock(),
|
|
67
71
|
// remove code block when at start of document or code block is empty
|
|
68
|
-
Backspace:
|
|
69
|
-
const { empty, $anchor } = state.selection;
|
|
72
|
+
Backspace: () => {
|
|
73
|
+
const { empty, $anchor } = this.editor.state.selection;
|
|
70
74
|
const isAtStart = $anchor.pos === 1;
|
|
71
|
-
if (!empty || $anchor.parent.type.name !==
|
|
75
|
+
if (!empty || $anchor.parent.type.name !== this.name) {
|
|
72
76
|
return false;
|
|
73
77
|
}
|
|
74
78
|
if (isAtStart || !$anchor.parent.textContent.length) {
|
|
@@ -80,12 +84,63 @@ const CodeBlock = Node.create({
|
|
|
80
84
|
},
|
|
81
85
|
addInputRules() {
|
|
82
86
|
return [
|
|
83
|
-
textblockTypeInputRule(
|
|
84
|
-
|
|
87
|
+
textblockTypeInputRule({
|
|
88
|
+
find: backtickInputRegex,
|
|
89
|
+
type: this.type,
|
|
90
|
+
getAttributes: ({ groups }) => groups,
|
|
91
|
+
}),
|
|
92
|
+
textblockTypeInputRule({
|
|
93
|
+
find: tildeInputRegex,
|
|
94
|
+
type: this.type,
|
|
95
|
+
getAttributes: ({ groups }) => groups,
|
|
96
|
+
}),
|
|
97
|
+
];
|
|
98
|
+
},
|
|
99
|
+
addProseMirrorPlugins() {
|
|
100
|
+
return [
|
|
101
|
+
// this plugin creates a code block for pasted content from VS Code
|
|
102
|
+
// we can also detect the copied code language
|
|
103
|
+
new Plugin({
|
|
104
|
+
key: new PluginKey('codeBlockVSCodeHandler'),
|
|
105
|
+
props: {
|
|
106
|
+
handlePaste: (view, event) => {
|
|
107
|
+
if (!event.clipboardData) {
|
|
108
|
+
return false;
|
|
109
|
+
}
|
|
110
|
+
// don’t create a new code block within code blocks
|
|
111
|
+
if (this.editor.isActive(this.type.name)) {
|
|
112
|
+
return false;
|
|
113
|
+
}
|
|
114
|
+
const text = event.clipboardData.getData('text/plain');
|
|
115
|
+
const vscode = event.clipboardData.getData('vscode-editor-data');
|
|
116
|
+
const vscodeData = vscode
|
|
117
|
+
? JSON.parse(vscode)
|
|
118
|
+
: undefined;
|
|
119
|
+
const language = vscodeData === null || vscodeData === void 0 ? void 0 : vscodeData.mode;
|
|
120
|
+
if (!text || !language) {
|
|
121
|
+
return false;
|
|
122
|
+
}
|
|
123
|
+
const { tr } = view.state;
|
|
124
|
+
// create an empty code block
|
|
125
|
+
tr.replaceSelectionWith(this.type.create({ language }));
|
|
126
|
+
// put cursor inside the newly created code block
|
|
127
|
+
tr.setSelection(TextSelection.near(tr.doc.resolve(Math.max(0, tr.selection.from - 2))));
|
|
128
|
+
// add text to code block
|
|
129
|
+
// strip carriage return chars from text pasted as code
|
|
130
|
+
// see: https://github.com/ProseMirror/prosemirror-view/commit/a50a6bcceb4ce52ac8fcc6162488d8875613aacd
|
|
131
|
+
tr.insertText(text.replace(/\r\n?/g, '\n'));
|
|
132
|
+
// store meta information
|
|
133
|
+
// this is useful for other plugins that depends on the paste event
|
|
134
|
+
// like the paste rule plugin
|
|
135
|
+
tr.setMeta('paste', true);
|
|
136
|
+
view.dispatch(tr);
|
|
137
|
+
return true;
|
|
138
|
+
},
|
|
139
|
+
},
|
|
140
|
+
}),
|
|
85
141
|
];
|
|
86
142
|
},
|
|
87
143
|
});
|
|
88
144
|
|
|
89
|
-
export default
|
|
90
|
-
export { CodeBlock, backtickInputRegex, tildeInputRegex };
|
|
145
|
+
export { CodeBlock, backtickInputRegex, CodeBlock as default, tildeInputRegex };
|
|
91
146
|
//# sourceMappingURL=tiptap-extension-code-block.esm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tiptap-extension-code-block.esm.js","sources":["../src/code-block.ts"],"sourcesContent":["import {
|
|
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 addOptions() {\n return {\n languageClassPrefix: 'language-',\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 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(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 },\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 // 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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"}
|
|
@@ -1,16 +1,18 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tiptap/core'), require('prosemirror-
|
|
3
|
-
typeof define === 'function' && define.amd ? define(['exports', '@tiptap/core', 'prosemirror-
|
|
4
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global[
|
|
5
|
-
}(this, (function (exports, core,
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tiptap/core'), require('prosemirror-state')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define(['exports', '@tiptap/core', 'prosemirror-state'], factory) :
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@tiptap/extension-code-block"] = {}, global.core, global.prosemirrorState));
|
|
5
|
+
})(this, (function (exports, core, prosemirrorState) { 'use strict';
|
|
6
6
|
|
|
7
|
-
const backtickInputRegex = /^```(?<language>[a-z]*)?
|
|
8
|
-
const tildeInputRegex = /^~~~(?<language>[a-z]*)?
|
|
7
|
+
const backtickInputRegex = /^```(?<language>[a-z]*)?[\s\n]$/;
|
|
8
|
+
const tildeInputRegex = /^~~~(?<language>[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
|
+
HTMLAttributes: {},
|
|
15
|
+
};
|
|
14
16
|
},
|
|
15
17
|
content: 'text*',
|
|
16
18
|
marks: '',
|
|
@@ -23,14 +25,16 @@
|
|
|
23
25
|
default: null,
|
|
24
26
|
parseHTML: element => {
|
|
25
27
|
var _a;
|
|
26
|
-
const
|
|
27
|
-
|
|
28
|
+
const { languageClassPrefix } = this.options;
|
|
29
|
+
const classNames = [...((_a = element.firstElementChild) === null || _a === void 0 ? void 0 : _a.classList) || []];
|
|
30
|
+
const languages = classNames
|
|
31
|
+
.filter(className => className.startsWith(languageClassPrefix))
|
|
32
|
+
.map(className => className.replace(languageClassPrefix, ''));
|
|
33
|
+
const language = languages[0];
|
|
34
|
+
if (!language) {
|
|
28
35
|
return null;
|
|
29
36
|
}
|
|
30
|
-
|
|
31
|
-
return {
|
|
32
|
-
language: classAttribute.replace(regexLanguageClassPrefix, ''),
|
|
33
|
-
};
|
|
37
|
+
return language;
|
|
34
38
|
},
|
|
35
39
|
renderHTML: attributes => {
|
|
36
40
|
if (!attributes.language) {
|
|
@@ -57,10 +61,10 @@
|
|
|
57
61
|
addCommands() {
|
|
58
62
|
return {
|
|
59
63
|
setCodeBlock: attributes => ({ commands }) => {
|
|
60
|
-
return commands.setNode(
|
|
64
|
+
return commands.setNode(this.name, attributes);
|
|
61
65
|
},
|
|
62
66
|
toggleCodeBlock: attributes => ({ commands }) => {
|
|
63
|
-
return commands.toggleNode(
|
|
67
|
+
return commands.toggleNode(this.name, 'paragraph', attributes);
|
|
64
68
|
},
|
|
65
69
|
};
|
|
66
70
|
},
|
|
@@ -68,10 +72,10 @@
|
|
|
68
72
|
return {
|
|
69
73
|
'Mod-Alt-c': () => this.editor.commands.toggleCodeBlock(),
|
|
70
74
|
// remove code block when at start of document or code block is empty
|
|
71
|
-
Backspace:
|
|
72
|
-
const { empty, $anchor } = state.selection;
|
|
75
|
+
Backspace: () => {
|
|
76
|
+
const { empty, $anchor } = this.editor.state.selection;
|
|
73
77
|
const isAtStart = $anchor.pos === 1;
|
|
74
|
-
if (!empty || $anchor.parent.type.name !==
|
|
78
|
+
if (!empty || $anchor.parent.type.name !== this.name) {
|
|
75
79
|
return false;
|
|
76
80
|
}
|
|
77
81
|
if (isAtStart || !$anchor.parent.textContent.length) {
|
|
@@ -83,18 +87,70 @@
|
|
|
83
87
|
},
|
|
84
88
|
addInputRules() {
|
|
85
89
|
return [
|
|
86
|
-
|
|
87
|
-
|
|
90
|
+
core.textblockTypeInputRule({
|
|
91
|
+
find: backtickInputRegex,
|
|
92
|
+
type: this.type,
|
|
93
|
+
getAttributes: ({ groups }) => groups,
|
|
94
|
+
}),
|
|
95
|
+
core.textblockTypeInputRule({
|
|
96
|
+
find: tildeInputRegex,
|
|
97
|
+
type: this.type,
|
|
98
|
+
getAttributes: ({ groups }) => groups,
|
|
99
|
+
}),
|
|
100
|
+
];
|
|
101
|
+
},
|
|
102
|
+
addProseMirrorPlugins() {
|
|
103
|
+
return [
|
|
104
|
+
// this plugin creates a code block for pasted content from VS Code
|
|
105
|
+
// we can also detect the copied code language
|
|
106
|
+
new prosemirrorState.Plugin({
|
|
107
|
+
key: new prosemirrorState.PluginKey('codeBlockVSCodeHandler'),
|
|
108
|
+
props: {
|
|
109
|
+
handlePaste: (view, event) => {
|
|
110
|
+
if (!event.clipboardData) {
|
|
111
|
+
return false;
|
|
112
|
+
}
|
|
113
|
+
// don’t create a new code block within code blocks
|
|
114
|
+
if (this.editor.isActive(this.type.name)) {
|
|
115
|
+
return false;
|
|
116
|
+
}
|
|
117
|
+
const text = event.clipboardData.getData('text/plain');
|
|
118
|
+
const vscode = event.clipboardData.getData('vscode-editor-data');
|
|
119
|
+
const vscodeData = vscode
|
|
120
|
+
? JSON.parse(vscode)
|
|
121
|
+
: undefined;
|
|
122
|
+
const language = vscodeData === null || vscodeData === void 0 ? void 0 : vscodeData.mode;
|
|
123
|
+
if (!text || !language) {
|
|
124
|
+
return false;
|
|
125
|
+
}
|
|
126
|
+
const { tr } = view.state;
|
|
127
|
+
// create an empty code block
|
|
128
|
+
tr.replaceSelectionWith(this.type.create({ language }));
|
|
129
|
+
// put cursor inside the newly created code block
|
|
130
|
+
tr.setSelection(prosemirrorState.TextSelection.near(tr.doc.resolve(Math.max(0, tr.selection.from - 2))));
|
|
131
|
+
// add text to code block
|
|
132
|
+
// strip carriage return chars from text pasted as code
|
|
133
|
+
// see: https://github.com/ProseMirror/prosemirror-view/commit/a50a6bcceb4ce52ac8fcc6162488d8875613aacd
|
|
134
|
+
tr.insertText(text.replace(/\r\n?/g, '\n'));
|
|
135
|
+
// store meta information
|
|
136
|
+
// this is useful for other plugins that depends on the paste event
|
|
137
|
+
// like the paste rule plugin
|
|
138
|
+
tr.setMeta('paste', true);
|
|
139
|
+
view.dispatch(tr);
|
|
140
|
+
return true;
|
|
141
|
+
},
|
|
142
|
+
},
|
|
143
|
+
}),
|
|
88
144
|
];
|
|
89
145
|
},
|
|
90
146
|
});
|
|
91
147
|
|
|
92
148
|
exports.CodeBlock = CodeBlock;
|
|
93
149
|
exports.backtickInputRegex = backtickInputRegex;
|
|
94
|
-
exports
|
|
150
|
+
exports["default"] = CodeBlock;
|
|
95
151
|
exports.tildeInputRegex = tildeInputRegex;
|
|
96
152
|
|
|
97
153
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
98
154
|
|
|
99
|
-
}))
|
|
155
|
+
}));
|
|
100
156
|
//# sourceMappingURL=tiptap-extension-code-block.umd.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tiptap-extension-code-block.umd.js","sources":["../src/code-block.ts"],"sourcesContent":["import {
|
|
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 addOptions() {\n return {\n languageClassPrefix: 'language-',\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 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(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 },\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 // 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","textblockTypeInputRule","Plugin","PluginKey","TextSelection"],"mappings":"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"}
|