@tiptap/core 2.0.0-beta.155 → 2.0.0-beta.159
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/tiptap-core.cjs.js +210 -144
- package/dist/tiptap-core.cjs.js.map +1 -1
- package/dist/tiptap-core.esm.js +210 -144
- package/dist/tiptap-core.esm.js.map +1 -1
- package/dist/tiptap-core.umd.js +210 -144
- package/dist/tiptap-core.umd.js.map +1 -1
- package/package.json +2 -2
- package/src/InputRule.ts +1 -1
- package/src/commands/toggleList.ts +10 -0
- package/src/extensions/keymap.ts +70 -0
- package/src/helpers/getDebugJSON.ts +12 -5
package/dist/tiptap-core.cjs.js
CHANGED
|
@@ -1426,6 +1426,9 @@ const joinListBackwards = (tr, listType) => {
|
|
|
1426
1426
|
return true;
|
|
1427
1427
|
}
|
|
1428
1428
|
const before = tr.doc.resolve(Math.max(0, list.pos - 1)).before(list.depth);
|
|
1429
|
+
if (before === undefined) {
|
|
1430
|
+
return true;
|
|
1431
|
+
}
|
|
1429
1432
|
const nodeBefore = tr.doc.nodeAt(before);
|
|
1430
1433
|
const canJoinBackwards = list.node.type === (nodeBefore === null || nodeBefore === void 0 ? void 0 : nodeBefore.type)
|
|
1431
1434
|
&& prosemirrorTransform.canJoin(tr.doc, list.pos);
|
|
@@ -1441,6 +1444,9 @@ const joinListForwards = (tr, listType) => {
|
|
|
1441
1444
|
return true;
|
|
1442
1445
|
}
|
|
1443
1446
|
const after = tr.doc.resolve(list.start).after(list.depth);
|
|
1447
|
+
if (after === undefined) {
|
|
1448
|
+
return true;
|
|
1449
|
+
}
|
|
1444
1450
|
const nodeAfter = tr.doc.nodeAt(after);
|
|
1445
1451
|
const canJoinForwards = list.node.type === (nodeAfter === null || nodeAfter === void 0 ? void 0 : nodeAfter.type)
|
|
1446
1452
|
&& prosemirrorTransform.canJoin(tr.doc, after);
|
|
@@ -1867,144 +1873,6 @@ const FocusEvents = Extension.create({
|
|
|
1867
1873
|
},
|
|
1868
1874
|
});
|
|
1869
1875
|
|
|
1870
|
-
const Keymap = Extension.create({
|
|
1871
|
-
name: 'keymap',
|
|
1872
|
-
addKeyboardShortcuts() {
|
|
1873
|
-
const handleBackspace = () => this.editor.commands.first(({ commands }) => [
|
|
1874
|
-
() => commands.undoInputRule(),
|
|
1875
|
-
() => commands.deleteSelection(),
|
|
1876
|
-
() => commands.joinBackward(),
|
|
1877
|
-
() => commands.selectNodeBackward(),
|
|
1878
|
-
]);
|
|
1879
|
-
const handleDelete = () => this.editor.commands.first(({ commands }) => [
|
|
1880
|
-
() => commands.deleteSelection(),
|
|
1881
|
-
() => commands.joinForward(),
|
|
1882
|
-
() => commands.selectNodeForward(),
|
|
1883
|
-
]);
|
|
1884
|
-
return {
|
|
1885
|
-
Enter: () => this.editor.commands.first(({ commands }) => [
|
|
1886
|
-
() => commands.newlineInCode(),
|
|
1887
|
-
() => commands.createParagraphNear(),
|
|
1888
|
-
() => commands.liftEmptyBlock(),
|
|
1889
|
-
() => commands.splitBlock(),
|
|
1890
|
-
]),
|
|
1891
|
-
'Mod-Enter': () => this.editor.commands.exitCode(),
|
|
1892
|
-
Backspace: handleBackspace,
|
|
1893
|
-
'Mod-Backspace': handleBackspace,
|
|
1894
|
-
'Shift-Backspace': handleBackspace,
|
|
1895
|
-
Delete: handleDelete,
|
|
1896
|
-
'Mod-Delete': handleDelete,
|
|
1897
|
-
'Mod-a': () => this.editor.commands.selectAll(),
|
|
1898
|
-
};
|
|
1899
|
-
},
|
|
1900
|
-
});
|
|
1901
|
-
|
|
1902
|
-
const Tabindex = Extension.create({
|
|
1903
|
-
name: 'tabindex',
|
|
1904
|
-
addProseMirrorPlugins() {
|
|
1905
|
-
return [
|
|
1906
|
-
new prosemirrorState.Plugin({
|
|
1907
|
-
key: new prosemirrorState.PluginKey('tabindex'),
|
|
1908
|
-
props: {
|
|
1909
|
-
attributes: {
|
|
1910
|
-
tabindex: '0',
|
|
1911
|
-
},
|
|
1912
|
-
},
|
|
1913
|
-
}),
|
|
1914
|
-
];
|
|
1915
|
-
},
|
|
1916
|
-
});
|
|
1917
|
-
|
|
1918
|
-
var extensions = /*#__PURE__*/Object.freeze({
|
|
1919
|
-
__proto__: null,
|
|
1920
|
-
ClipboardTextSerializer: ClipboardTextSerializer,
|
|
1921
|
-
Commands: Commands,
|
|
1922
|
-
Editable: Editable,
|
|
1923
|
-
FocusEvents: FocusEvents,
|
|
1924
|
-
Keymap: Keymap,
|
|
1925
|
-
Tabindex: Tabindex
|
|
1926
|
-
});
|
|
1927
|
-
|
|
1928
|
-
function getNodeAttributes(state, typeOrName) {
|
|
1929
|
-
const type = getNodeType(typeOrName, state.schema);
|
|
1930
|
-
const { from, to } = state.selection;
|
|
1931
|
-
const nodes = [];
|
|
1932
|
-
state.doc.nodesBetween(from, to, node => {
|
|
1933
|
-
nodes.push(node);
|
|
1934
|
-
});
|
|
1935
|
-
const node = nodes
|
|
1936
|
-
.reverse()
|
|
1937
|
-
.find(nodeItem => nodeItem.type.name === type.name);
|
|
1938
|
-
if (!node) {
|
|
1939
|
-
return {};
|
|
1940
|
-
}
|
|
1941
|
-
return { ...node.attrs };
|
|
1942
|
-
}
|
|
1943
|
-
|
|
1944
|
-
function getAttributes(state, typeOrName) {
|
|
1945
|
-
const schemaType = getSchemaTypeNameByName(typeof typeOrName === 'string'
|
|
1946
|
-
? typeOrName
|
|
1947
|
-
: typeOrName.name, state.schema);
|
|
1948
|
-
if (schemaType === 'node') {
|
|
1949
|
-
return getNodeAttributes(state, typeOrName);
|
|
1950
|
-
}
|
|
1951
|
-
if (schemaType === 'mark') {
|
|
1952
|
-
return getMarkAttributes(state, typeOrName);
|
|
1953
|
-
}
|
|
1954
|
-
return {};
|
|
1955
|
-
}
|
|
1956
|
-
|
|
1957
|
-
function isActive(state, name, attributes = {}) {
|
|
1958
|
-
if (!name) {
|
|
1959
|
-
return isNodeActive(state, null, attributes) || isMarkActive(state, null, attributes);
|
|
1960
|
-
}
|
|
1961
|
-
const schemaType = getSchemaTypeNameByName(name, state.schema);
|
|
1962
|
-
if (schemaType === 'node') {
|
|
1963
|
-
return isNodeActive(state, name, attributes);
|
|
1964
|
-
}
|
|
1965
|
-
if (schemaType === 'mark') {
|
|
1966
|
-
return isMarkActive(state, name, attributes);
|
|
1967
|
-
}
|
|
1968
|
-
return false;
|
|
1969
|
-
}
|
|
1970
|
-
|
|
1971
|
-
function getHTMLFromFragment(fragment, schema) {
|
|
1972
|
-
const documentFragment = prosemirrorModel.DOMSerializer
|
|
1973
|
-
.fromSchema(schema)
|
|
1974
|
-
.serializeFragment(fragment);
|
|
1975
|
-
const temporaryDocument = document.implementation.createHTMLDocument();
|
|
1976
|
-
const container = temporaryDocument.createElement('div');
|
|
1977
|
-
container.appendChild(documentFragment);
|
|
1978
|
-
return container.innerHTML;
|
|
1979
|
-
}
|
|
1980
|
-
|
|
1981
|
-
function getText(node, options) {
|
|
1982
|
-
const range = {
|
|
1983
|
-
from: 0,
|
|
1984
|
-
to: node.content.size,
|
|
1985
|
-
};
|
|
1986
|
-
return getTextBetween(node, range, options);
|
|
1987
|
-
}
|
|
1988
|
-
|
|
1989
|
-
function isNodeEmpty(node) {
|
|
1990
|
-
var _a;
|
|
1991
|
-
const defaultContent = (_a = node.type.createAndFill()) === null || _a === void 0 ? void 0 : _a.toJSON();
|
|
1992
|
-
const content = node.toJSON();
|
|
1993
|
-
return JSON.stringify(defaultContent) === JSON.stringify(content);
|
|
1994
|
-
}
|
|
1995
|
-
|
|
1996
|
-
function createStyleTag(style) {
|
|
1997
|
-
const tipTapStyleTag = document.querySelector('style[data-tiptap-style]');
|
|
1998
|
-
if (tipTapStyleTag !== null) {
|
|
1999
|
-
return tipTapStyleTag;
|
|
2000
|
-
}
|
|
2001
|
-
const styleNode = document.createElement('style');
|
|
2002
|
-
styleNode.setAttribute('data-tiptap-style', '');
|
|
2003
|
-
styleNode.innerHTML = style;
|
|
2004
|
-
document.getElementsByTagName('head')[0].appendChild(styleNode);
|
|
2005
|
-
return styleNode;
|
|
2006
|
-
}
|
|
2007
|
-
|
|
2008
1876
|
function createChainableState(config) {
|
|
2009
1877
|
const { state, transaction } = config;
|
|
2010
1878
|
let { selection } = transaction;
|
|
@@ -2147,6 +2015,199 @@ class CommandManager {
|
|
|
2147
2015
|
}
|
|
2148
2016
|
}
|
|
2149
2017
|
|
|
2018
|
+
const Keymap = Extension.create({
|
|
2019
|
+
name: 'keymap',
|
|
2020
|
+
addKeyboardShortcuts() {
|
|
2021
|
+
const handleBackspace = () => this.editor.commands.first(({ commands }) => [
|
|
2022
|
+
() => commands.undoInputRule(),
|
|
2023
|
+
// maybe convert first text block node to default node
|
|
2024
|
+
() => commands.command(({ tr }) => {
|
|
2025
|
+
const { selection, doc } = tr;
|
|
2026
|
+
const { empty, $anchor } = selection;
|
|
2027
|
+
const { pos, parent } = $anchor;
|
|
2028
|
+
const isAtStart = prosemirrorState.Selection.atStart(doc).from === pos;
|
|
2029
|
+
if (!empty
|
|
2030
|
+
|| !isAtStart
|
|
2031
|
+
|| !parent.type.isTextblock
|
|
2032
|
+
|| parent.textContent.length) {
|
|
2033
|
+
return false;
|
|
2034
|
+
}
|
|
2035
|
+
return commands.clearNodes();
|
|
2036
|
+
}),
|
|
2037
|
+
() => commands.deleteSelection(),
|
|
2038
|
+
() => commands.joinBackward(),
|
|
2039
|
+
() => commands.selectNodeBackward(),
|
|
2040
|
+
]);
|
|
2041
|
+
const handleDelete = () => this.editor.commands.first(({ commands }) => [
|
|
2042
|
+
() => commands.deleteSelection(),
|
|
2043
|
+
() => commands.joinForward(),
|
|
2044
|
+
() => commands.selectNodeForward(),
|
|
2045
|
+
]);
|
|
2046
|
+
return {
|
|
2047
|
+
Enter: () => this.editor.commands.first(({ commands }) => [
|
|
2048
|
+
() => commands.newlineInCode(),
|
|
2049
|
+
() => commands.createParagraphNear(),
|
|
2050
|
+
() => commands.liftEmptyBlock(),
|
|
2051
|
+
() => commands.splitBlock(),
|
|
2052
|
+
]),
|
|
2053
|
+
'Mod-Enter': () => this.editor.commands.exitCode(),
|
|
2054
|
+
Backspace: handleBackspace,
|
|
2055
|
+
'Mod-Backspace': handleBackspace,
|
|
2056
|
+
'Shift-Backspace': handleBackspace,
|
|
2057
|
+
Delete: handleDelete,
|
|
2058
|
+
'Mod-Delete': handleDelete,
|
|
2059
|
+
'Mod-a': () => this.editor.commands.selectAll(),
|
|
2060
|
+
};
|
|
2061
|
+
},
|
|
2062
|
+
addProseMirrorPlugins() {
|
|
2063
|
+
return [
|
|
2064
|
+
// With this plugin we check if the whole document was selected and deleted.
|
|
2065
|
+
// In this case we will additionally call `clearNodes()` to convert e.g. a heading
|
|
2066
|
+
// to a paragraph if necessary.
|
|
2067
|
+
// This is an alternative to ProseMirror's `AllSelection`, which doesn’t work well
|
|
2068
|
+
// with many other commands.
|
|
2069
|
+
new prosemirrorState.Plugin({
|
|
2070
|
+
key: new prosemirrorState.PluginKey('clearDocument'),
|
|
2071
|
+
appendTransaction: (transactions, oldState, newState) => {
|
|
2072
|
+
const docChanges = transactions.some(transaction => transaction.docChanged)
|
|
2073
|
+
&& !oldState.doc.eq(newState.doc);
|
|
2074
|
+
if (!docChanges) {
|
|
2075
|
+
return;
|
|
2076
|
+
}
|
|
2077
|
+
const { empty, from, to } = oldState.selection;
|
|
2078
|
+
const allFrom = prosemirrorState.Selection.atStart(oldState.doc).from;
|
|
2079
|
+
const allEnd = prosemirrorState.Selection.atEnd(oldState.doc).to;
|
|
2080
|
+
const allWasSelected = from === allFrom && to === allEnd;
|
|
2081
|
+
const isEmpty = newState.doc.textBetween(0, newState.doc.content.size, ' ', ' ').length === 0;
|
|
2082
|
+
if (empty || !allWasSelected || !isEmpty) {
|
|
2083
|
+
return;
|
|
2084
|
+
}
|
|
2085
|
+
const tr = newState.tr;
|
|
2086
|
+
const state = createChainableState({
|
|
2087
|
+
state: newState,
|
|
2088
|
+
transaction: tr,
|
|
2089
|
+
});
|
|
2090
|
+
const { commands } = new CommandManager({
|
|
2091
|
+
editor: this.editor,
|
|
2092
|
+
state,
|
|
2093
|
+
});
|
|
2094
|
+
commands.clearNodes();
|
|
2095
|
+
if (!tr.steps.length) {
|
|
2096
|
+
return;
|
|
2097
|
+
}
|
|
2098
|
+
return tr;
|
|
2099
|
+
},
|
|
2100
|
+
}),
|
|
2101
|
+
];
|
|
2102
|
+
},
|
|
2103
|
+
});
|
|
2104
|
+
|
|
2105
|
+
const Tabindex = Extension.create({
|
|
2106
|
+
name: 'tabindex',
|
|
2107
|
+
addProseMirrorPlugins() {
|
|
2108
|
+
return [
|
|
2109
|
+
new prosemirrorState.Plugin({
|
|
2110
|
+
key: new prosemirrorState.PluginKey('tabindex'),
|
|
2111
|
+
props: {
|
|
2112
|
+
attributes: {
|
|
2113
|
+
tabindex: '0',
|
|
2114
|
+
},
|
|
2115
|
+
},
|
|
2116
|
+
}),
|
|
2117
|
+
];
|
|
2118
|
+
},
|
|
2119
|
+
});
|
|
2120
|
+
|
|
2121
|
+
var extensions = /*#__PURE__*/Object.freeze({
|
|
2122
|
+
__proto__: null,
|
|
2123
|
+
ClipboardTextSerializer: ClipboardTextSerializer,
|
|
2124
|
+
Commands: Commands,
|
|
2125
|
+
Editable: Editable,
|
|
2126
|
+
FocusEvents: FocusEvents,
|
|
2127
|
+
Keymap: Keymap,
|
|
2128
|
+
Tabindex: Tabindex
|
|
2129
|
+
});
|
|
2130
|
+
|
|
2131
|
+
function getNodeAttributes(state, typeOrName) {
|
|
2132
|
+
const type = getNodeType(typeOrName, state.schema);
|
|
2133
|
+
const { from, to } = state.selection;
|
|
2134
|
+
const nodes = [];
|
|
2135
|
+
state.doc.nodesBetween(from, to, node => {
|
|
2136
|
+
nodes.push(node);
|
|
2137
|
+
});
|
|
2138
|
+
const node = nodes
|
|
2139
|
+
.reverse()
|
|
2140
|
+
.find(nodeItem => nodeItem.type.name === type.name);
|
|
2141
|
+
if (!node) {
|
|
2142
|
+
return {};
|
|
2143
|
+
}
|
|
2144
|
+
return { ...node.attrs };
|
|
2145
|
+
}
|
|
2146
|
+
|
|
2147
|
+
function getAttributes(state, typeOrName) {
|
|
2148
|
+
const schemaType = getSchemaTypeNameByName(typeof typeOrName === 'string'
|
|
2149
|
+
? typeOrName
|
|
2150
|
+
: typeOrName.name, state.schema);
|
|
2151
|
+
if (schemaType === 'node') {
|
|
2152
|
+
return getNodeAttributes(state, typeOrName);
|
|
2153
|
+
}
|
|
2154
|
+
if (schemaType === 'mark') {
|
|
2155
|
+
return getMarkAttributes(state, typeOrName);
|
|
2156
|
+
}
|
|
2157
|
+
return {};
|
|
2158
|
+
}
|
|
2159
|
+
|
|
2160
|
+
function isActive(state, name, attributes = {}) {
|
|
2161
|
+
if (!name) {
|
|
2162
|
+
return isNodeActive(state, null, attributes) || isMarkActive(state, null, attributes);
|
|
2163
|
+
}
|
|
2164
|
+
const schemaType = getSchemaTypeNameByName(name, state.schema);
|
|
2165
|
+
if (schemaType === 'node') {
|
|
2166
|
+
return isNodeActive(state, name, attributes);
|
|
2167
|
+
}
|
|
2168
|
+
if (schemaType === 'mark') {
|
|
2169
|
+
return isMarkActive(state, name, attributes);
|
|
2170
|
+
}
|
|
2171
|
+
return false;
|
|
2172
|
+
}
|
|
2173
|
+
|
|
2174
|
+
function getHTMLFromFragment(fragment, schema) {
|
|
2175
|
+
const documentFragment = prosemirrorModel.DOMSerializer
|
|
2176
|
+
.fromSchema(schema)
|
|
2177
|
+
.serializeFragment(fragment);
|
|
2178
|
+
const temporaryDocument = document.implementation.createHTMLDocument();
|
|
2179
|
+
const container = temporaryDocument.createElement('div');
|
|
2180
|
+
container.appendChild(documentFragment);
|
|
2181
|
+
return container.innerHTML;
|
|
2182
|
+
}
|
|
2183
|
+
|
|
2184
|
+
function getText(node, options) {
|
|
2185
|
+
const range = {
|
|
2186
|
+
from: 0,
|
|
2187
|
+
to: node.content.size,
|
|
2188
|
+
};
|
|
2189
|
+
return getTextBetween(node, range, options);
|
|
2190
|
+
}
|
|
2191
|
+
|
|
2192
|
+
function isNodeEmpty(node) {
|
|
2193
|
+
var _a;
|
|
2194
|
+
const defaultContent = (_a = node.type.createAndFill()) === null || _a === void 0 ? void 0 : _a.toJSON();
|
|
2195
|
+
const content = node.toJSON();
|
|
2196
|
+
return JSON.stringify(defaultContent) === JSON.stringify(content);
|
|
2197
|
+
}
|
|
2198
|
+
|
|
2199
|
+
function createStyleTag(style) {
|
|
2200
|
+
const tipTapStyleTag = document.querySelector('style[data-tiptap-style]');
|
|
2201
|
+
if (tipTapStyleTag !== null) {
|
|
2202
|
+
return tipTapStyleTag;
|
|
2203
|
+
}
|
|
2204
|
+
const styleNode = document.createElement('style');
|
|
2205
|
+
styleNode.setAttribute('data-tiptap-style', '');
|
|
2206
|
+
styleNode.innerHTML = style;
|
|
2207
|
+
document.getElementsByTagName('head')[0].appendChild(styleNode);
|
|
2208
|
+
return styleNode;
|
|
2209
|
+
}
|
|
2210
|
+
|
|
2150
2211
|
class InputRule {
|
|
2151
2212
|
constructor(config) {
|
|
2152
2213
|
this.find = config.find;
|
|
@@ -2191,7 +2252,7 @@ function run$1(config) {
|
|
|
2191
2252
|
}
|
|
2192
2253
|
let matched = false;
|
|
2193
2254
|
const maxMatch = 500;
|
|
2194
|
-
const textBefore = $from.parent.textBetween(Math.max(0, $from.parentOffset - maxMatch), $from.parentOffset, undefined, '
|
|
2255
|
+
const textBefore = $from.parent.textBetween(Math.max(0, $from.parentOffset - maxMatch), $from.parentOffset, undefined, ' ') + text;
|
|
2195
2256
|
rules.forEach(rule => {
|
|
2196
2257
|
if (matched) {
|
|
2197
2258
|
return;
|
|
@@ -4194,12 +4255,17 @@ function getChangedRanges(transform) {
|
|
|
4194
4255
|
function getDebugJSON(node, startOffset = 0) {
|
|
4195
4256
|
const isTopNode = node.type === node.type.schema.topNodeType;
|
|
4196
4257
|
const increment = isTopNode ? 0 : 1;
|
|
4197
|
-
const from = startOffset;
|
|
4258
|
+
const from = startOffset;
|
|
4198
4259
|
const to = from + node.nodeSize;
|
|
4199
|
-
const marks = node.marks.map(mark =>
|
|
4200
|
-
|
|
4201
|
-
|
|
4202
|
-
|
|
4260
|
+
const marks = node.marks.map(mark => {
|
|
4261
|
+
const output = {
|
|
4262
|
+
type: mark.type.name,
|
|
4263
|
+
};
|
|
4264
|
+
if (Object.keys(mark.attrs).length) {
|
|
4265
|
+
output.attrs = { ...mark.attrs };
|
|
4266
|
+
}
|
|
4267
|
+
return output;
|
|
4268
|
+
});
|
|
4203
4269
|
const attrs = { ...node.attrs };
|
|
4204
4270
|
const output = {
|
|
4205
4271
|
type: node.type.name,
|