Skip to content

Commit

Permalink
Merge pull request #609 from Peergos/fix/md-editor-mathjax
Browse files Browse the repository at this point in the history 
re-create md/notes editor iframe when navigating
  • Loading branch information
@ianopolous
ianopolous authored Sep 2, 2024
2 parents 3863e95 + b54ad52 commit 27f7270
Showing 1 changed file with 70 additions and 55 deletions.
125 changes: 70 additions & 55 deletions src/components/viewers/Markup.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
:hideGalleryTitle="false"
:context="context">
</Gallery>
<iframe id="md-editor" :src="frameUrl()" style="width:100%;height:100%;" frameBorder="0"></iframe>
<div id='md-container' class="modal-body" style="margin:0;padding:0;display:flex;flex-grow:1;">
</div>
</div>
</div>
Expand Down Expand Up @@ -112,7 +112,18 @@ module.exports = {
that.isFileWritable = file.isWritable();
that.readInFile(file).thenApply(data => {
that.setFullPathForDisplay();
that.startListener(data);
let theme = that.$store.getters.currentTheme;
let subPath = that.propAppArgs.subPath != null ? that.propAppArgs.subPath
: that.scopedPath.substring(0, that.scopedPath.length -1);
let extension = that.currFilename.substring(that.currFilename.lastIndexOf('.') + 1);
let func = function(iframe) {
iframe.contentWindow.postMessage({action: "respondToNavigateTo", theme: theme
, text:new TextDecoder().decode(data), extension: extension, subPath: subPath}, '*');
that.showSpinner = false;
};
that.resetEditor(func);
});
}
});
Expand Down Expand Up @@ -142,13 +153,12 @@ module.exports = {
if (file != null) {
that.readInFile(file).thenApply(data => {
that.setFullPathForDisplay();
let iframe = document.getElementById("md-editor");
let func = function() {
let func = function(iframe) {
iframe.contentWindow.postMessage({action: "respondToNavigateTo", theme: theme, text:new TextDecoder().decode(data)
, extension: extension, subPath: subPath}, '*');
that.showSpinner = false;
};
that.setupIFrameMessaging(iframe, func);
that.resetEditor(func);
});
}
});
Expand All @@ -159,60 +169,65 @@ module.exports = {
frameDomain: function() {
return window.location.protocol + "//" + this.APP_NAME + '.' + window.location.host;
},
startListener: function(data) {
var that = this;
var iframe = document.getElementById("md-editor");
if (iframe == null) {
setTimeout(that.startListener, 1000);
return;
}
// Listen for response messages from the frames.
window.addEventListener('message', function (e) {
// Normally, you should verify that the origin of the message's sender
// was the origin and source you expected. This is easily done for the
// unsandboxed frame. The sandboxed frame, on the other hand is more
// difficult. Sandboxed iframes which lack the 'allow-same-origin'
// header have "null" rather than a valid origin. This means you still
// have to be careful about accepting data via the messaging API you
// create. Check that source, and validate those inputs!
if ((e.origin === "null" || e.origin === that.frameDomain()) && e.source === iframe.contentWindow) {
if (e.data.action == 'pong') {
that.isIframeInitialised = true;
} else if(e.data.action == 'navigateTo') {
that.navigateToRequest(iframe, e.data.path);
} else if(e.data.action == 'externalLink') {
that.navigateToExternalLink(e.data.url);
} else if(e.data.action == 'loadImage') {
that.loadImageRequest(iframe, e.data.src, e.data.id);
} else if(e.data.action == 'showMedia') {
that.showMediaRequest(e.data.path);
messageHandler: function(e) {
let that = this;
let iframe = document.getElementById("md-editor");
let win = iframe.contentWindow;
if (win == null ) {
that.close();
} else {
if ((e.origin === "null" || e.origin === that.frameDomain()) && e.source === iframe.contentWindow) {
if (e.data.action == 'pong') {
that.isIframeInitialised = true;
} else if(e.data.action == 'navigateTo') {
that.navigateToRequest(iframe, e.data.path);
} else if(e.data.action == 'externalLink') {
that.navigateToExternalLink(e.data.url);
} else if(e.data.action == 'loadImage') {
that.loadImageRequest(iframe, e.data.src, e.data.id);
} else if(e.data.action == 'showMedia') {
that.showMediaRequest(e.data.path);
}
}
}
});
// Note that we're sending the message to "*", rather than some specific
// origin. Sandboxed iframes which lack the 'allow-same-origin' header
// don't have an origin which you can target: you'll have to send to any
// origin, which might alow some esoteric attacks. Validate your output!
this.showSpinner = true;
let theme = this.$store.getters.currentTheme;
let subPath = this.propAppArgs.subPath != null ? this.propAppArgs.subPath
: this.scopedPath.substring(0, this.scopedPath.length -1);
let extension = that.currFilename.substring(that.currFilename.lastIndexOf('.') + 1);
let func = function() {
iframe.contentWindow.postMessage({action: "respondToNavigateTo", theme: theme
, text:new TextDecoder().decode(data), extension: extension, subPath: subPath}, '*');
that.showSpinner = false;
};
that.setupIFrameMessaging(iframe, func);
setTimeout(() => {
if (!that.isIframeInitialised)
that.$toast.error("Unable to register service worker. Viewer will not work offline. \nTo enable offline usage, allow 3rd party cookies for " + window.location.protocol + "//[*]." + window.location.host + "\n Note: this is not tracking", {timeout:false});
}, 1000 * 10)
},
},
resetEditor: function(func) {
let iframe = document.getElementById("md-editor");
if (iframe != null) {
iframe.parentNode.removeChild(iframe);
window.removeEventListener('message', this.messageHandler);
}
this.isIframeInitialised = false;
let that = this;
Vue.nextTick(function() {
that.startListener(func);
});
},
startListener: function(func) {
let that = this;
let iframeContainer = document.getElementById("md-container");
let iframe = document.createElement('iframe');
iframe.id = 'md-editor';
iframe.style.width = '100%';
iframe.style.height = '100%';
iframe.frameBorder="0";
iframeContainer.appendChild(iframe);
Vue.nextTick(function() {
iframe.src = that.frameUrl();
window.addEventListener('message', that.messageHandler);
that.showSpinner = true;
that.setupIFrameMessaging(iframe, func);
setTimeout(() => {
if (!that.isIframeInitialised)
that.$toast.error("Unable to register service worker. Viewer will not work offline. \nTo enable offline usage, allow 3rd party cookies for " + window.location.protocol + "//[*]." + window.location.host + "\n Note: this is not tracking", {timeout:false});
}, 1000 * 10);
});
},
setupIFrameMessaging: function(iframe, func) {
if (this.isIframeInitialised) {
func();
func(iframe);
} else {
iframe.contentWindow.postMessage({action: 'ping'}, '*');
let that = this;
Expand Down Expand Up @@ -343,7 +358,7 @@ module.exports = {
var future = peergos.shared.util.Futures.incomplete();
this.context.getByPath(filePath).thenApply(function(fileOpt){
if (fileOpt.ref == null) {
that.showErrorMessage("path not found!: " + filePath);
//that.showErrorMessage("path not found!: " + filePath);
future.complete(null);
} else {
let file = fileOpt.get();
Expand Down

0 comments on commit 27f7270

Please sign in to comment.