fix: make codeblock compatible with iframe tinymce

This commit is contained in:
thecodrr
2021-11-04 09:59:50 +05:00
parent 8091d5f906
commit a9f1d12e37
2 changed files with 18 additions and 7 deletions

View File

@@ -2,7 +2,6 @@ const { persistSelection } = require("../utils");
const { TAGNAME, state } = require("./utils");
const languages = require("./languages");
const hljs = require("highlight.js/lib/core");
globalThis.hljs = hljs;
const LANGUAGE_SELECT_LABEL_SELECTOR =
".tox-pop__dialog span.tox-tbtn__select-label";
@@ -83,6 +82,11 @@ function parseCodeblockLanguage(node) {
}
async function applyHighlighting(editor, language) {
// load hljs into the editor window which can be the iframe
// or the main window. This is required so language definitions
// can be loaded.
editor.contentWindow.hljs = hljs;
if (!language) return;
if (!hljs.getLanguage(language)) await loadLanguage(editor, language);

View File

@@ -2,7 +2,7 @@ const rangy = require("rangy/lib/rangy-textrange");
function getCharacterRange(node) {
if (!node) return;
const ranges = rangy.getSelection().saveCharacterRanges(node);
const ranges = rangy.getSelection(getWindow()).saveCharacterRanges(node);
if (!ranges || !ranges.length) return;
const { characterRange } = ranges[0];
return characterRange;
@@ -32,7 +32,9 @@ function moveCaretTo(node, index, endIndex) {
},
};
rangy.getSelection().restoreCharacterRanges(node, [newCharacterRange]);
rangy
.getSelection(getWindow())
.restoreCharacterRanges(node, [newCharacterRange]);
}
function getCurrentLine(node) {
@@ -54,19 +56,24 @@ function getCurrentLine(node) {
}
function persistSelection(node, action) {
let saved = rangy.getSelection().saveCharacterRanges(node);
let saved = rangy.getSelection(getWindow()).saveCharacterRanges(node);
console.log(saved);
action();
rangy.getSelection().restoreCharacterRanges(node, saved);
rangy.getSelection(getWindow()).restoreCharacterRanges(node, saved);
}
function addPluginToPluginManager(name, register) {
// tinymce puts itself in the global namespace
if (!global.tinymce)
if (!globalThis.tinymce)
throw new Error(
`Please import tinymce before importing the ${name} plugin.`
);
global.tinymce.PluginManager.add(name, register);
globalThis.tinymce.PluginManager.add(name, register);
}
function getWindow() {
return globalThis.tinymce.activeEditor.contentWindow;
}
module.exports = {