@tobiasafischer/tiptap-extension-font-size
Version:
a fontsize implementation for tiptap which includes cursor size change
71 lines (70 loc) • 2.84 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.FontSize = void 0;
var core_1 = require("@tiptap/core");
require("@tiptap/extension-text-style");
var destroyTempSpan = function (fontSize, p) {
// if our current fontsize is equal to the incoming we dont want to inject
var shouldInject = true;
// loop through the child nodes (span) to remove the empty span
p === null || p === void 0 ? void 0 : p.childNodes.forEach(function (child) {
var _a;
// if the span contains &ZeroWidthSpace
if (child.innerHTML === String.fromCodePoint(0x200b)) {
// if our fontSize does not equal the incoming then we want to remove the temp-span
if (((_a = child.style) === null || _a === void 0 ? void 0 : _a.fontSize) !== fontSize)
p.removeChild(child);
// if they are equal then we do not want to inject another
else
shouldInject = false;
}
});
return shouldInject;
};
var injectTempSpan = function (fontSize) {
var _a;
// grab the p tag which holds the span elements
var p = Array.from(((_a = document.querySelector('.ProseMirror')) === null || _a === void 0 ? void 0 : _a.children) || [])[0];
// destroy any previous temporary span elements
// exits function if fontSize is the same as temporary ones
if (!destroyTempSpan(fontSize, p))
return;
// create a new temporary span element
var span = document.createElement('span');
// inject new desired fontSize onto it
span.style.fontSize = fontSize;
// set the innerHTML as ​ so it declares an empty span element
span.innerHTML = '​';
// append the span to the p tag
p === null || p === void 0 ? void 0 : p.appendChild(span);
};
exports.FontSize = core_1.Extension.create({
name: 'fontSize',
addGlobalAttributes: function () { return [
{
types: ['textStyle'],
attributes: {
fontSize: {
default: null,
parseHTML: function (element) { return element.style.fontSize; },
renderHTML: function (attributes) {
if (!attributes.fontSize)
return {};
return {
style: "font-size: ".concat(attributes.fontSize),
};
},
},
},
},
]; },
addCommands: function () { return ({
setFontSize: function (fontSize) {
return function (_a) {
var chain = _a.chain;
injectTempSpan(fontSize);
return chain().setMark('textStyle', { fontSize: fontSize }).run();
};
},
}); },
});