Netsyms/easy-markdown-editor
2
0
Fork 0
mirror of https://github.com/Ionaru/easy-markdown-editor synced 2025-06-29 06:01:01 -06:00
Code Issues Releases Wiki Activity

Merge pull request #316 from smundro/bugfix-fullscreen-sidebyside-handle

Browse Source 
Bugfix: Correctly keep preview active during fullscreen-toggle
This commit is contained in:
Jeroen Akkerman 2021-03-27 16:29:15 +01:00 committed by GitHub
commit 113c5b45b1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 88 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
example/index_sideBySideFullscreenFalse.html Normal file
View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Example / Preview / sideBySideFullscreen : false</title>
<link rel="stylesheet" href="../dist/easymde.min.css">
<script src="../dist/easymde.min.js"></script>
</head>
<body>
<textarea></textarea>
<script>
var easyMDE = new EasyMDE({sideBySideFullscreen: false});
</script>
</body>
</html>

8
src/css/easymde.css
View File

@ -41,7 +41,7 @@
width: 50% !important; width: 50% !important;
} }
.EasyMDEContainer .CodeMirror-sided.sided--no-fullscreen { .EasyMDEContainer.sided--no-fullscreen .CodeMirror-sided {
border-right: none!important; border-right: none!important;
border-bottom-right-radius: 0px; border-bottom-right-radius: 0px;
position: relative; position: relative;
@ -118,7 +118,7 @@
padding: 0; padding: 0;
} }
.editor-toolbar.sided--no-fullscreen { .EasyMDEContainer.sided--no-fullscreen .editor-toolbar {
width: 100%; width: 100%;
} }
@ -201,7 +201,7 @@
text-align: right; text-align: right;
} }
.editor-statusbar.sided--no-fullscreen { .EasyMDEContainer.sided--no-fullscreen .editor-statusbar {
width: 100%; width: 100%;
} }
@ -253,7 +253,7 @@
display: block display: block
} }
.editor-preview-active-side.sided--no-fullscreen { .EasyMDEContainer.sided--no-fullscreen .editor-preview-active-side {
flex: 1 1 auto; flex: 1 1 auto;
height: auto; height: auto;
position: static; position: static;

98
src/js/easymde.js
View File

@ -138,6 +138,50 @@ function fixShortcut(name) {
return name; return name;
} }
/**
* Class handling utility methods.
*/
var CLASS_REGEX = {};
/**
* Convert a className string into a regex for matching (and cache).
* Note that the RegExp includes trailing spaces for replacement
* (to ensure that removing a class from the middle of the string will retain
* spacing between other classes.)
* @param {String} className Class name to convert to regex for matching.
* @returns {RegExp} Regular expression option that will match className.
*/
function getClassRegex (className) {
return CLASS_REGEX[className] || (CLASS_REGEX[className] = new RegExp('\\s*' + className + '(\\s*)', 'g'));
}
/**
* Add a class string to an element.
* @param {Element} el DOM element on which to add className.
* @param {String} className Class string to apply
* @returns {void}
*/
function addClass (el, className) {
if (!el || !className) return;
var classRegex = getClassRegex(className);
if (el.className.match(classRegex)) return; // already applied
el.className += ' ' + className;
}
/**
* Remove a class string from an element.
* @param {Element} el DOM element from which to remove className.
* @param {String} className Class string to remove
* @returns {void}
*/
function removeClass (el, className) {
if (!el || !className) return;
var classRegex = getClassRegex(className);
if (!el.className.match(classRegex)) return; // not available to remove
el.className = el.className.replace(classRegex, '$1');
}
/** /**
* Create dropdown block * Create dropdown block
*/ */
@ -332,11 +376,21 @@ function toggleFullScreen(editor) {
document.body.style.overflow = saved_overflow; document.body.style.overflow = saved_overflow;
} }
// Hide side by side if needed, retain current state if sideBySideFullscreen is disabled var wrapper = cm.getWrapperElement();
if (editor.options.sideBySideFullscreen !== false) { var sidebyside = wrapper.nextSibling;
var sidebyside = cm.getWrapperElement().nextSibling;
if (/editor-preview-active-side/.test(sidebyside.className)) if (/editor-preview-active-side/.test(sidebyside.className)) {
if (editor.options.sideBySideFullscreen === false) {
// if side-by-side not-fullscreen ok, apply classes as needed
var easyMDEContainer = wrapper.parentNode;
if (cm.getOption('fullScreen')) {
removeClass(easyMDEContainer, 'sided--no-fullscreen');
} else {
addClass(easyMDEContainer, 'sided--no-fullscreen');
}
} else {
toggleSideBySide(editor); toggleSideBySide(editor);
}
} }
if (editor.options.onToggleFullScreen) { if (editor.options.onToggleFullScreen) {
@ -881,32 +935,12 @@ function toggleSideBySide(editor) {
var toolbarButton = editor.toolbarElements && editor.toolbarElements['side-by-side']; var toolbarButton = editor.toolbarElements && editor.toolbarElements['side-by-side'];
var useSideBySideListener = false; var useSideBySideListener = false;
var noFullscreenItems = [ var easyMDEContainer = wrapper.parentNode;
wrapper.parentNode, // easyMDEContainer
editor.gui.toolbar,
wrapper,
preview,
editor.gui.statusbar,
];
function addNoFullscreenClass(el) {
el.className += ' sided--no-fullscreen';
}
function removeNoFullscreenClass(el) {
if (el != null) {
el.className = el.className.replace(
/\s*sided--no-fullscreen\s*/g, ''
);
}
}
if (/editor-preview-active-side/.test(preview.className)) { if (/editor-preview-active-side/.test(preview.className)) {
if (cm.getOption('sideBySideNoFullscreen')) { if (editor.options.sideBySideFullscreen === false) {
cm.setOption('sideBySideNoFullscreen', false); // if side-by-side not-fullscreen ok, remove classes when hiding side
noFullscreenItems.forEach(function (el) { removeClass(easyMDEContainer, 'sided--no-fullscreen');
removeNoFullscreenClass(el);
});
} }
preview.className = preview.className.replace( preview.className = preview.className.replace(
/\s*editor-preview-active-side\s*/g, '' /\s*editor-preview-active-side\s*/g, ''
@ -920,12 +954,8 @@ function toggleSideBySide(editor) {
setTimeout(function () { setTimeout(function () {
if (!cm.getOption('fullScreen')) { if (!cm.getOption('fullScreen')) {
if (editor.options.sideBySideFullscreen === false) { if (editor.options.sideBySideFullscreen === false) {
cm.setOption('sideBySideNoFullscreen', true); // if side-by-side not-fullscreen ok, add classes when not fullscreen and showing side
noFullscreenItems.forEach(function(el) { addClass(easyMDEContainer, 'sided--no-fullscreen');
if (el != null) {
addNoFullscreenClass(el);
}
});
} else { } else {
toggleFullScreen(editor); toggleFullScreen(editor);
} }