Skip to content

Commit

Permalink
Merge pull request #11 from jmulet/fix/issue_10
Browse files Browse the repository at this point in the history 
Fix/issue 10
  • Loading branch information
@jmulet
jmulet authored Aug 25, 2024
2 parents 54fdb15 + 25a2117 commit 5dffd06
Show file tree
Hide file tree
Showing 10 changed files with 132 additions and 98 deletions.
2 changes: 1 addition & 1 deletion amd/build/cm6pro-lazy.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion amd/build/cm6pro-lazy.min.js.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion amd/build/ui.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion amd/build/ui.min.js.map
View file

Large diffs are not rendered by default.

10 changes: 9 additions & 1 deletion amd/src/cm6pro-lazy.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
// @ts-nocheck
/* eslint-disable */
/**
The data structure for documents. @nonabstract
Expand Down Expand Up @@ -28692,6 +28691,15 @@ class CodeProEditor {
const beautified = prettify(source);
this.setValue(beautified);
}

/**
* Puts focus the editor
*/
focus() {
if (!this._editorView.hasFocus) {
this._editorView.focus();
}
}
}

export { CodeProEditor as default };
174 changes: 90 additions & 84 deletions amd/src/ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,18 +45,33 @@ const toggleClasses = function(el, classList) {
* Handle action
* @param {TinyMCE} editor
*/
export const handleAction = (editor) => {
export const handleAction = async(editor) => {
if (modal === null) {
createDialogue(editor);
} else {
modal.show();
codeEditorInstance.setValue(editor.getContent());
await createDialogue();
}
// Issue, editor var does not get updated
// Bind save action to the correct editor
const $btn = modal.footer.find("button.btn[data-action]");
$btn.off("click.codepro").on("click.codepro", (evt) => {
if (evt.target.classList.contains("btn-primary")) {
// eslint-disable-next-line camelcase
const updatedCode = codeEditorInstance.getValue({source_view: true});
editor.setContent(updatedCode);
}
modal.hide();
// Delete content
codeEditorInstance.setValue();
});

// eslint-disable-next-line camelcase
codeEditorInstance.setValue(editor.getContent({source_view: true}));
modal.show();
setTimeout(() => codeEditorInstance.focus(), 500);
};

const createDialogue = async(editor) => {
const createDialogue = async() => {
const data = {
elementid: editor.id
elementid: Math.random().toString(32).substring(2)
};

// Show modal with buttons.
Expand All @@ -65,7 +80,7 @@ const createDialogue = async(editor) => {
templateContext: data,
large: true
});
modal.getRoot().find(".modal-dialog.modal-lg").css("max-width", "85%");
modal.getRoot().find(".modal-dialog.modal-lg").addClass("tiny_codepro-dlg");
// Disable keyboard events (ESC key) on this modal
modal.getRoot().off('keydown');
// Prevent modal from closing on outside clicks
Expand All @@ -74,85 +89,76 @@ const createDialogue = async(editor) => {
});
modal.body.css("overflow-y", "overlay");

// Load cm6 on demand
require(['tiny_codepro/cm6pro-lazy'], (CodeProEditor) => {
const targetElem = modal.body.find('.tiny_codepro-editor-area')[0];
codeEditorInstance = new CodeProEditor(targetElem);
return new Promise((resolve) => {
// Load cm6 on demand
require(['tiny_codepro/cm6pro-lazy'], (CodeProEditor) => {
const targetElem = modal.body.find('.tiny_codepro-editor-area')[0];
codeEditorInstance = new CodeProEditor(targetElem);

modal.footer.find("button.btn[data-action]").on("click", (evt) => {
if (evt.target.classList.contains("btn-primary")) {
const updatedCode = codeEditorInstance.getValue();
editor.setContent(updatedCode);
}
modal.hide();
// Delete content
codeEditorInstance.setValue();
});
modal.footer.find("button.btn.btn-light").on("click", (evt) => {
evt.preventDefault();
const ds = evt.currentTarget.dataset;
const icon = evt.currentTarget.querySelector("i.fa");
const $dlgElem = modal.getRoot().find(dialogQuery);
if (ds.fs) {
if (ds.fs === "false") {
// Set fullscreen mode
ds.fs = "true";
modal.header.hide();
$dlgElem.removeClass("modal-dialog modal-lg modal-dialog-scrollable");
$dlgElem.addClass("tiny_codepro-fullscreen");
} else {
// Set to modal-lg
ds.fs = "false";
modal.header.show();
$dlgElem.removeClass("tiny_codepro-fullscreen");
$dlgElem.addClass("modal-dialog modal-lg modal-dialog-scrollable");
}
setPref("fs", ds.fs, true);
} else if (ds.theme) {
if (ds.theme === "light") {
ds.theme = "dark";
codeEditorInstance.setTheme("dark");
$dlgElem.addClass("tiny_codepro-dark");
} else {
ds.theme = "light";
codeEditorInstance.setTheme("light");
$dlgElem.removeClass("tiny_codepro-dark");
modal.footer.find("button.btn.btn-light").on("click", (evt) => {
evt.preventDefault();
const ds = evt.currentTarget.dataset;
const icon = evt.currentTarget.querySelector("i.fa");
const $dlgElem = modal.getRoot().find(dialogQuery);
if (ds.fs) {
if (ds.fs === "false") {
// Set fullscreen mode
ds.fs = "true";
modal.header.hide();
$dlgElem.removeClass("modal-dialog modal-lg modal-dialog-scrollable");
$dlgElem.addClass("tiny_codepro-fullscreen");
} else {
// Set to modal-lg
ds.fs = "false";
modal.header.show();
$dlgElem.removeClass("tiny_codepro-fullscreen");
$dlgElem.addClass("modal-dialog modal-lg modal-dialog-scrollable");
}
setPref("fs", ds.fs, true);
} else if (ds.theme) {
if (ds.theme === "light") {
ds.theme = "dark";
codeEditorInstance.setTheme("dark");
$dlgElem.addClass("tiny_codepro-dark");
} else {
ds.theme = "light";
codeEditorInstance.setTheme("light");
$dlgElem.removeClass("tiny_codepro-dark");
}
toggleClasses(icon, ["fa-sun-o", "fa-moon-o"]);
setPref("theme", ds.theme, true);
} else if (ds.wrap) {
if (ds.wrap === "true") {
ds.wrap = false;
codeEditorInstance.setLineWrapping(false);
} else {
ds.wrap = true;
codeEditorInstance.setLineWrapping(true);
}
setPref("wrap", ds.wrap, true);
toggleClasses(icon, ["fa-exchange", "fa-long-arrow-right"]);
} else if (ds.prettify) {
codeEditorInstance.prettify();
}
toggleClasses(icon, ["fa-sun-o", "fa-moon-o"]);
setPref("theme", ds.theme, true);
} else if (ds.wrap) {
if (ds.wrap === "true") {
ds.wrap = false;
codeEditorInstance.setLineWrapping(false);
} else {
ds.wrap = true;
codeEditorInstance.setLineWrapping(true);
}
setPref("wrap", ds.wrap, true);
toggleClasses(icon, ["fa-exchange", "fa-long-arrow-right"]);
} else if (ds.prettify) {
codeEditorInstance.prettify();
});
modal.getRoot().on(ModalEvents.hidden, () => {
codeEditorInstance.setValue();
});

// Setting stored preferences
const currentTheme = getPref("theme", "light");
const currentWrap = getPref("wrap", "false");
const currentFs = getPref("fs", "false");
if (currentTheme !== "light") {
modal.footer.find("button.btn.btn-light[data-theme]").click();
}
if (currentWrap === "true") {
modal.footer.find("button.btn.btn-light[data-wrap]").click();
}
if (currentFs === "true") {
modal.footer.find("button.btn.btn-light[data-fs]").click();
}
resolve(modal);
});
modal.getRoot().on(ModalEvents.hidden, () => {
codeEditorInstance.setValue();
});

// Setting stored preferences
const currentTheme = getPref("theme", "light");
const currentWrap = getPref("wrap", "false");
const currentFs = getPref("fs", "false");
if (currentTheme !== "light") {
modal.footer.find("button.btn.btn-light[data-theme]").click();
}
if (currentWrap === "true") {
modal.footer.find("button.btn.btn-light[data-wrap]").click();
}
if (currentFs === "true") {
modal.footer.find("button.btn.btn-light[data-fs]").click();
}

modal.show();
codeEditorInstance.setValue(editor.getContent());
});
};
9 changes: 9 additions & 0 deletions libs/codemirror/cm6pro.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,5 +116,14 @@ export default class CodeProEditor {
const beautified = prettify(source);
this.setValue(beautified);
}

/**
* Puts focus the editor
*/
focus() {
if (!this._editorView.hasFocus) {
this._editorView.focus();
}
}
}

22 changes: 15 additions & 7 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,8 @@
.tiny_codepro-editor-area .cm-editor {
height: 100%;
}
.tiny_codepro-fullscreen {
position: fixed;
left: 0;
right: 0;
width: 100%;
height: 100%;
max-width: 100% !important;
.tiny_codepro-editor-area .cm-editor.cm-focused {
outline: 1px dotted #3e3e3e !important;
}
.tiny_codepro-fullscreen .modal-content {
height: 100%;
Expand Down Expand Up @@ -46,4 +41,17 @@
}
.tiny_codepro-left > button {
width: 40px;
}
@media screen and (min-width: 576px) {
.tiny_codepro-dlg {
max-width: 85% !important;
}
}
.tiny_codepro-fullscreen {
position: fixed;
left: 0;
right: 0;
width: 100%;
height: 100%;
max-width: 100% !important;
}
3 changes: 3 additions & 0 deletions upgrade.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,6 @@ Move cm6pro dependency as a /amd/src module. Avoid defining requirejs paths manu
Disable modal close on backdrop clicks
Updated helplinktext

== 1.1.2 ==
Fix Issue #10: Wrong area target to insert htmlcode
Get focus on editor when opened
4 changes: 2 additions & 2 deletions version.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
defined('MOODLE_INTERNAL') || die();

$plugin->component = 'tiny_codepro';
$plugin->release = '1.1.1';
$plugin->release = '1.1.2';
$plugin->requires = 2022112800;
$plugin->maturity = MATURITY_STABLE;
$plugin->version = 2024071902;
$plugin->version = 2024082502;

0 comments on commit 5dffd06

Please sign in to comment.