diff --git a/src/main/twirl/gitbucket/core/repo/editor.scala.html b/src/main/twirl/gitbucket/core/repo/editor.scala.html index ddc13568c..fd3d73d17 100644 --- a/src/main/twirl/gitbucket/core/repo/editor.scala.html +++ b/src/main/twirl/gitbucket/core/repo/editor.scala.html @@ -21,12 +21,12 @@
@repository.name / @pathList.zipWithIndex.map { case (section, i) => - @section / + @section / } - +
@gitbucket.core.helper.html.acenavbar() @@ -57,9 +57,9 @@
@if(fileName.isEmpty){ - Cancel + Cancel } else { - Cancel + Cancel } @@ -71,122 +71,32 @@
+ + + + + + } } - - - - - diff --git a/src/main/twirl/gitbucket/core/wiki/edit.scala.html b/src/main/twirl/gitbucket/core/wiki/edit.scala.html index 8aa47e2fd..8c39674a5 100644 --- a/src/main/twirl/gitbucket/core/wiki/edit.scala.html +++ b/src/main/twirl/gitbucket/core/wiki/edit.scala.html @@ -28,117 +28,37 @@
- +
- - + + + + + + } -} - +} \ No newline at end of file diff --git a/src/main/webapp/assets/common/js/editor.js b/src/main/webapp/assets/common/js/editor.js new file mode 100644 index 000000000..d119928c4 --- /dev/null +++ b/src/main/webapp/assets/common/js/editor.js @@ -0,0 +1,194 @@ +(function () { + document.addEventListener('DOMContentLoaded', () => { + /** + * element to attach images or documents by dragging & dropping, or selecting them. + * @type {Element} + */ + const clickable = document.querySelector(".clickable"); + + /** + * A function to update the file mode of the Ace editor + */ + const updateFileMode = function () { + if (gitbucket.getFileName() != "") { + var modelist = ace.require("ace/ext/modelist"); + var mode = modelist.getModeForPath(gitbucket.getFileName()); + gitbucket.editor.getSession().setMode(mode.mode); + } + }; + + /** + * A function to update status of commit button + */ + const updateCommitButtonStatus = function () { + if (gitbucket.editor.getValue() == $('#initial').val() && $('#newFileName').val() == $('#oldFileName').val()) { + $('#commitButton').attr('disabled', true); + } else { + $('#commitButton').attr('disabled', false); + } + } + + // Initialize the editor contents + $('#editor').text($('#initial').val()); + + // Initializing Ace editor + gitbucket.editor = ace.edit("editor"); + + // Initialize Ace editor keyboard handler + var aceKeyboard = localStorage.getItem("gitbucket:editor:keyboard") || ""; + gitbucket.editor.setKeyboardHandler(aceKeyboard == "" ? null : aceKeyboard); + + var aceKeyboardSelect = document.getElementById("aceKeyboardSelect"); + aceKeyboardSelect.value = aceKeyboard; + + // Event handler to change the keyboard handler for the Ace editor + aceKeyboardSelect.addEventListener('change', () => { + gitbucket.editor.setKeyboardHandler(aceKeyboardSelect.value == "" ? null : aceKeyboardSelect.value); + localStorage.setItem("gitbucket:editor:keyboard", aceKeyboardSelect.value); + }, true) + + // Initialize the Ace editor theme + if (typeof localStorage.getItem('gitbucket:editor:theme') == "string") { + $('#theme').val(localStorage.getItem('gitbucket:editor:theme')); + } + + gitbucket.editor.setTheme("ace/theme/" + $('#theme').val()); + + // Event handler to change the Ace editor theme + $('#theme').change(function () { + gitbucket.editor.setTheme("ace/theme/" + $('#theme').val()); + localStorage.setItem('gitbucket:editor:theme', $('#theme').val()); + }); + + // Initialize text wrapping for Ace editor + if (localStorage.getItem('gitbucket:editor:wrap') == 'true') { + gitbucket.editor.getSession().setUseWrapMode(true); + $('#wrap').val('true'); + } + + // Event handler to change text wrapping for Ace editor + $('#wrap').change(function () { + if ($('#wrap option:selected').val() == 'true') { + gitbucket.editor.getSession().setUseWrapMode(true); + localStorage.setItem('gitbucket:editor:wrap', 'true'); + } else { + gitbucket.editor.getSession().setUseWrapMode(false); + localStorage.setItem('gitbucket:editor:wrap', 'false'); + } + }); + + // Initialize file mode for Ace editor + updateFileMode(); + + // Determine whether Ace Editor can be edited + if (gitbucket.protected) { + gitbucket.editor.setReadOnly(true); + } + + // Initialize tabSize, newLineMode, and useSoftTabs for the Ace editor. + gitbucket.editor.getSession().setOption("tabSize", gitbucket.tabSize); + gitbucket.editor.getSession().setOption("newLineMode", gitbucket.newLineMode); + gitbucket.editor.getSession().setOption("useSoftTabs", gitbucket.useSoftTabs); + + // Controls the activation of the commit button when using the repository file editor. + if (!document.location.href.endsWith("/_edit")) { + gitbucket.editor.on('change', function () { + updateCommitButtonStatus(); + }); + + $('#newFileName').watch(function () { + updateCommitButtonStatus(); + updateFileMode(); + }); + } + + // When the Commit button is clicked, the form content will be overwritten with the editor content. + $('#commitButton').click(function () { + $('#content').val(gitbucket.editor.getValue()); + }); + + // An event handler that defines what happens when the code button is clicked. + $('#btn-code').click(function () { + $('#editor').show(); + $('#preview').hide(); + $('#btn-preview').removeClass('active'); + if (clickable) clickable.style.display = "block"; + }); + + // An event handler that defines what happens when the preview button is clicked. + $('#btn-preview').click(function () { + $('#editor').hide(); + $('#preview').show(); + $('#btn-code').removeClass('active'); + if (clickable) clickable.style.display = "none"; + + // Determine if rendering is possible + $.get(gitbucket.isRenderableUrl + gitbucket.getFileName(), function (data) { + if (data === 'true') { + // update preview + $('#preview').html(gitbucket.previewTemplate); + $.post(gitbucket.previewUrl, { + content: gitbucket.editor.getValue(), + enableWikiLink: gitbucket.enableWikiLink, + filename: gitbucket.getFilePath(), + enableRefsLink: false, + enableLineBreaks: false, + enableTaskList: false + }, function (data) { + $('#preview').empty().append( + $('
').html(data)); + prettyPrint(); + }); + } else { + // Show diff + $('#preview').empty() + .append($('
')) + .append($('