@tiptap/core 2.0.0-beta.156 → 2.0.0-beta.157
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 +193 -138
- package/dist/tiptap-core.cjs.js.map +1 -1
- package/dist/tiptap-core.esm.js +193 -138
- package/dist/tiptap-core.esm.js.map +1 -1
- package/dist/tiptap-core.umd.js +193 -138
- package/dist/tiptap-core.umd.js.map +1 -1
- package/package.json +2 -2
- package/src/extensions/keymap.ts +70 -0
package/dist/tiptap-core.cjs.js
CHANGED
|
@@ -1873,144 +1873,6 @@ const FocusEvents = Extension.create({
|
|
|
1873
1873
|
},
|
|
1874
1874
|
});
|
|
1875
1875
|
|
|
1876
|
-
const Keymap = Extension.create({
|
|
1877
|
-
name: 'keymap',
|
|
1878
|
-
addKeyboardShortcuts() {
|
|
1879
|
-
const handleBackspace = () => this.editor.commands.first(({ commands }) => [
|
|
1880
|
-
() => commands.undoInputRule(),
|
|
1881
|
-
() => commands.deleteSelection(),
|
|
1882
|
-
() => commands.joinBackward(),
|
|
1883
|
-
() => commands.selectNodeBackward(),
|
|
1884
|
-
]);
|
|
1885
|
-
const handleDelete = () => this.editor.commands.first(({ commands }) => [
|
|
1886
|
-
() => commands.deleteSelection(),
|
|
1887
|
-
() => commands.joinForward(),
|
|
1888
|
-
() => commands.selectNodeForward(),
|
|
1889
|
-
]);
|
|
1890
|
-
return {
|
|
1891
|
-
Enter: () => this.editor.commands.first(({ commands }) => [
|
|
1892
|
-
() => commands.newlineInCode(),
|
|
1893
|
-
() => commands.createParagraphNear(),
|
|
1894
|
-
() => commands.liftEmptyBlock(),
|
|
1895
|
-
() => commands.splitBlock(),
|
|
1896
|
-
]),
|
|
1897
|
-
'Mod-Enter': () => this.editor.commands.exitCode(),
|
|
1898
|
-
Backspace: handleBackspace,
|
|
1899
|
-
'Mod-Backspace': handleBackspace,
|
|
1900
|
-
'Shift-Backspace': handleBackspace,
|
|
1901
|
-
Delete: handleDelete,
|
|
1902
|
-
'Mod-Delete': handleDelete,
|
|
1903
|
-
'Mod-a': () => this.editor.commands.selectAll(),
|
|
1904
|
-
};
|
|
1905
|
-
},
|
|
1906
|
-
});
|
|
1907
|
-
|
|
1908
|
-
const Tabindex = Extension.create({
|
|
1909
|
-
name: 'tabindex',
|
|
1910
|
-
addProseMirrorPlugins() {
|
|
1911
|
-
return [
|
|
1912
|
-
new prosemirrorState.Plugin({
|
|
1913
|
-
key: new prosemirrorState.PluginKey('tabindex'),
|
|
1914
|
-
props: {
|
|
1915
|
-
attributes: {
|
|
1916
|
-
tabindex: '0',
|
|
1917
|
-
},
|
|
1918
|
-
},
|
|
1919
|
-
}),
|
|
1920
|
-
];
|
|
1921
|
-
},
|
|
1922
|
-
});
|
|
1923
|
-
|
|
1924
|
-
var extensions = /*#__PURE__*/Object.freeze({
|
|
1925
|
-
__proto__: null,
|
|
1926
|
-
ClipboardTextSerializer: ClipboardTextSerializer,
|
|
1927
|
-
Commands: Commands,
|
|
1928
|
-
Editable: Editable,
|
|
1929
|
-
FocusEvents: FocusEvents,
|
|
1930
|
-
Keymap: Keymap,
|
|
1931
|
-
Tabindex: Tabindex
|
|
1932
|
-
});
|
|
1933
|
-
|
|
1934
|
-
function getNodeAttributes(state, typeOrName) {
|
|
1935
|
-
const type = getNodeType(typeOrName, state.schema);
|
|
1936
|
-
const { from, to } = state.selection;
|
|
1937
|
-
const nodes = [];
|
|
1938
|
-
state.doc.nodesBetween(from, to, node => {
|
|
1939
|
-
nodes.push(node);
|
|
1940
|
-
});
|
|
1941
|
-
const node = nodes
|
|
1942
|
-
.reverse()
|
|
1943
|
-
.find(nodeItem => nodeItem.type.name === type.name);
|
|
1944
|
-
if (!node) {
|
|
1945
|
-
return {};
|
|
1946
|
-
}
|
|
1947
|
-
return { ...node.attrs };
|
|
1948
|
-
}
|
|
1949
|
-
|
|
1950
|
-
function getAttributes(state, typeOrName) {
|
|
1951
|
-
const schemaType = getSchemaTypeNameByName(typeof typeOrName === 'string'
|
|
1952
|
-
? typeOrName
|
|
1953
|
-
: typeOrName.name, state.schema);
|
|
1954
|
-
if (schemaType === 'node') {
|
|
1955
|
-
return getNodeAttributes(state, typeOrName);
|
|
1956
|
-
}
|
|
1957
|
-
if (schemaType === 'mark') {
|
|
1958
|
-
return getMarkAttributes(state, typeOrName);
|
|
1959
|
-
}
|
|
1960
|
-
return {};
|
|
1961
|
-
}
|
|
1962
|
-
|
|
1963
|
-
function isActive(state, name, attributes = {}) {
|
|
1964
|
-
if (!name) {
|
|
1965
|
-
return isNodeActive(state, null, attributes) || isMarkActive(state, null, attributes);
|
|
1966
|
-
}
|
|
1967
|
-
const schemaType = getSchemaTypeNameByName(name, state.schema);
|
|
1968
|
-
if (schemaType === 'node') {
|
|
1969
|
-
return isNodeActive(state, name, attributes);
|
|
1970
|
-
}
|
|
1971
|
-
if (schemaType === 'mark') {
|
|
1972
|
-
return isMarkActive(state, name, attributes);
|
|
1973
|
-
}
|
|
1974
|
-
return false;
|
|
1975
|
-
}
|
|
1976
|
-
|
|
1977
|
-
function getHTMLFromFragment(fragment, schema) {
|
|
1978
|
-
const documentFragment = prosemirrorModel.DOMSerializer
|
|
1979
|
-
.fromSchema(schema)
|
|
1980
|
-
.serializeFragment(fragment);
|
|
1981
|
-
const temporaryDocument = document.implementation.createHTMLDocument();
|
|
1982
|
-
const container = temporaryDocument.createElement('div');
|
|
1983
|
-
container.appendChild(documentFragment);
|
|
1984
|
-
return container.innerHTML;
|
|
1985
|
-
}
|
|
1986
|
-
|
|
1987
|
-
function getText(node, options) {
|
|
1988
|
-
const range = {
|
|
1989
|
-
from: 0,
|
|
1990
|
-
to: node.content.size,
|
|
1991
|
-
};
|
|
1992
|
-
return getTextBetween(node, range, options);
|
|
1993
|
-
}
|
|
1994
|
-
|
|
1995
|
-
function isNodeEmpty(node) {
|
|
1996
|
-
var _a;
|
|
1997
|
-
const defaultContent = (_a = node.type.createAndFill()) === null || _a === void 0 ? void 0 : _a.toJSON();
|
|
1998
|
-
const content = node.toJSON();
|
|
1999
|
-
return JSON.stringify(defaultContent) === JSON.stringify(content);
|
|
2000
|
-
}
|
|
2001
|
-
|
|
2002
|
-
function createStyleTag(style) {
|
|
2003
|
-
const tipTapStyleTag = document.querySelector('style[data-tiptap-style]');
|
|
2004
|
-
if (tipTapStyleTag !== null) {
|
|
2005
|
-
return tipTapStyleTag;
|
|
2006
|
-
}
|
|
2007
|
-
const styleNode = document.createElement('style');
|
|
2008
|
-
styleNode.setAttribute('data-tiptap-style', '');
|
|
2009
|
-
styleNode.innerHTML = style;
|
|
2010
|
-
document.getElementsByTagName('head')[0].appendChild(styleNode);
|
|
2011
|
-
return styleNode;
|
|
2012
|
-
}
|
|
2013
|
-
|
|
2014
1876
|
function createChainableState(config) {
|
|
2015
1877
|
const { state, transaction } = config;
|
|
2016
1878
|
let { selection } = transaction;
|
|
@@ -2153,6 +2015,199 @@ class CommandManager {
|
|
|
2153
2015
|
}
|
|
2154
2016
|
}
|
|
2155
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
|
+
|
|
2156
2211
|
class InputRule {
|
|
2157
2212
|
constructor(config) {
|
|
2158
2213
|
this.find = config.find;
|