123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279 |
- attachDocumentEditor = function (editorElement, commitDialogElement)
- {
- var edit = require("./prosemirror/dist/edit")
- require("./prosemirror/dist/inputrules/autoinput")
- require("./prosemirror/dist/menu/menubar")
- require("./prosemirror/dist/markdown")
- var _menu = require("./prosemirror/dist/menu/menu")
-
-
- var content = document.querySelector('#editor');
- content.style.display = "none";
-
- var gitblitCommands = new _menu.MenuCommandGroup("gitblitCommands");
- var viewCommands = new _menu.MenuCommandGroup("viewCommands");
- var textCommands = new _menu.MenuCommandGroup("textCommands");
- var insertCommands = new _menu.MenuCommandGroup("insertCommands");
-
- var menuItems = [gitblitCommands, viewCommands, textCommands, _menu.inlineGroup, _menu.blockGroup, _menu.historyGroup, insertCommands];
-
- const updateCmd = Object.create(null);
-
- updateCmd["GitblitCommit"] = {
- label: "GitblitCommit",
- run: function() {
- commitDialogElement.modal({show:true});
- editorElement.value = pm.getContent('markdown');
- },
- menu: {
- group: "gitblitCommands", rank: 10,
- display: {
- render: function(cmd, pm) { return renderFontAwesomeIcon(cmd, pm, "fa-save"); }
- }
- }
- };
-
- updateCmd["FullScreen"] = {
- label: "Toggle Fullscreen",
- derive: "toggle",
- run: function(pm) {
- //Maintain the scroll context
- var initialScroll = window.scrollY;
- var navs = [document.querySelector("div.repositorynavbar"), document.querySelector("div.navbar"), document.querySelector("div.docnav")];
- var offset = navs.reduce(function(p, c) { return p + c.offsetHeight; }, 0);
- navs.forEach(function(e) { e.classList.toggle("forceHide"); });
-
- if (!toggleFullScreen(document.documentElement)) {
- offset = 60;
- } else {
- offset -= 60;
- }
-
- pm.signal("commandsChanged");
-
- //Browsers don't seem to accept a scrollTo straight after a full screen
- setTimeout(function(){window.scrollTo(0, Math.max(0,initialScroll - offset));}, 100);
-
- },
- menu: {
- group: "viewCommands", rank: 11,
- display: {
- render: function(cmd, pm) { return renderFontAwesomeIcon(cmd, pm, "fa-arrows-alt"); }
- }
- },
- active: function active(pm) { return getFullScreenElement() ? true : false; }
- };
-
- updateCmd["heading1"] = {
- derive: "toggle",
- run: function(pm) {
- var selection = pm.selection;
- var from = selection.from;
- var to = selection.to;
- var attr = {name:"make", level:"1"};
-
- var node = pm.doc.resolve(from).parent;
- if (node && node.hasMarkup(pm.schema.nodes.heading, attr)) {
- return pm.tr.setBlockType(from, to, pm.schema.defaultTextblockType(), {}).apply(pm.apply.scroll);
- } else {
- return pm.tr.setBlockType(from, to, pm.schema.nodes.heading, attr).apply(pm.apply.scroll);
- }
-
- },
- active: function active(pm) {
- var node = pm.doc.resolve(pm.selection.from).parent;
- if (node && node.hasMarkup(pm.schema.nodes.heading, {name:"make", level:"1"})) {
- return true;
- }
- return false;
- },
- menu: {
- group: "textCommands", rank: 1,
- display: {
- render: function(cmd, pm) { return renderFontAwesomeIcon(cmd, pm, "fa-header fa-header-x fa-header-1"); }
- },
- },
- select: function(){return true;}
- };
-
- updateCmd["heading2"] = {
- derive: "toggle",
- run: function(pm) {
- var selection = pm.selection;
- var from = selection.from;
- var to = selection.to;
- var attr = {name:"make", level:"2"};
-
- var node = pm.doc.resolve(from).parent;
- if (node && node.hasMarkup(pm.schema.nodes.heading, attr)) {
- return pm.tr.setBlockType(from, to, pm.schema.defaultTextblockType(), {}).apply(pm.apply.scroll);
- } else {
- return pm.tr.setBlockType(from, to, pm.schema.nodes.heading, attr).apply(pm.apply.scroll);
- }
-
- },
- active: function active(pm) {
- var node = pm.doc.resolve(pm.selection.from).parent;
- if (node && node.hasMarkup(pm.schema.nodes.heading, {name:"make", level:"2"})) {
- return true;
- }
- return false;
- },
- menu: {
- group: "textCommands", rank: 2,
- display: {
- render: function(cmd, pm) { return renderFontAwesomeIcon(cmd, pm, "fa-header fa-header-x fa-header-2"); }
- },
- },
- select: function(){return true;}
- };
-
- updateCmd["heading3"] = {
- derive: "toggle",
- run: function(pm) {
- var selection = pm.selection;
- var from = selection.from;
- var to = selection.to;
- var attr = {name:"make", level:"3"};
-
- var node = pm.doc.resolve(from).parent;
- if (node && node.hasMarkup(pm.schema.nodes.heading, attr)) {
- return pm.tr.setBlockType(from, to, pm.schema.defaultTextblockType(), {}).apply(pm.apply.scroll);
- } else {
- return pm.tr.setBlockType(from, to, pm.schema.nodes.heading, attr).apply(pm.apply.scroll);
- }
-
- },
- active: function active(pm) {
- var node = pm.doc.resolve(pm.selection.from).parent;
- if (node && node.hasMarkup(pm.schema.nodes.heading, {name:"make", level:"3"})) {
- return true;
- }
- return false;
- },
- menu: {
- group: "textCommands", rank: 3,
- display: {
- render: function(cmd, pm) { return renderFontAwesomeIcon(cmd, pm, "fa-header fa-header-x fa-header-3"); }
- },
- },
- select: function(){return true;}
- };
-
- updateCmd["strong:toggle"] = {
- menu: {
- group: "textCommands", rank: 4,
- display: {
- render: function(cmd, pm) { return renderFontAwesomeIcon(cmd, pm, "fa-bold"); }
- }
- },
- select: function(){return true;}
- };
-
- updateCmd["em:toggle"] = {
- menu: {
- group: "textCommands", rank: 5,
- display: {
- render: function(cmd, pm) { return renderFontAwesomeIcon(cmd, pm, "fa-italic"); }
- }
- },
- select: function(){return true;}
- };
-
- updateCmd["code:toggle"] = {
- menu: {
- group: "textCommands", rank: 6,
- display: {
- render: function(cmd, pm) { return renderFontAwesomeIcon(cmd, pm, "fa-code"); }
- }
- },
- select: function(){return true;}
- };
-
- updateCmd["image:insert"] = {
- menu: {
- group: "insertCommands", rank: 1,
- display: {
- render: function(cmd, pm) { return renderFontAwesomeIcon(cmd, pm, "fa-picture-o"); }
- }
- }
- };
-
- updateCmd["selectParentNode"] = {
- menu: {
- group: "insertCommands", rank: 10,
- display: {
- render: function(cmd, pm) { return renderFontAwesomeIcon(cmd, pm, "fa-arrow-circle-o-left"); }
- }
- }
- };
-
- var pm = window.pm = new edit.ProseMirror({
- place: document.querySelector('#visualEditor'),
- autoInput: true,
- doc: content.value,
- menuBar: { float:true, content: menuItems},
- commands: edit.CommandSet.default.update(updateCmd),
- docFormat: "markdown"
- });
-
-
- var scrollStart = document.querySelector(".ProseMirror").offsetTop;
-
-
- var ticking = false;
- window.addEventListener("scroll", function() {
- var scrollPosition = window.scrollY;
- if (!ticking) {
- window.requestAnimationFrame(function() {
- if (!getFullScreenElement() && (scrollPosition > scrollStart)) {
- document.querySelector(".ProseMirror-menubar").classList.add("scrolling");
- } else {
- document.querySelector(".ProseMirror-menubar").classList.remove("scrolling");
- }
- ticking = false;
- });
- }
- ticking = true;
- });
- }
-
- function renderFontAwesomeIcon(cmd, pm, classNames) {
- var node = document.createElement("div");
- node.className = "ProseMirror-icon";
- var icon = document.createElement("i");
- icon.setAttribute("class", "fa fa-fw " + classNames);
-
- var active = cmd.active(pm);
-
- if (active || cmd.spec.invert) node.classList.add("ProseMirror-menu-active");
- node.appendChild(icon);
- return node;
- }
-
-
-
- function getFullScreenElement() {
- return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
- }
-
- function toggleFullScreen(e) {
- if (getFullScreenElement()) {
- if (document.exitFullscreen) { document.exitFullscreen(); }
- else if (document.msExitFullscreen) { document.msExitFullscreen(); }
- else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); }
- else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); }
- return true;
- } else {
- if (e.requestFullscreen) { e.requestFullscreen(); }
- else if (e.msRequestFullscreen) { e.msRequestFullscreen(); }
- else if (e.mozRequestFullScreen) { e.mozRequestFullScreen(); }
- else if (e.webkitRequestFullscreen) { e.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); }
- }
- return false;
- }
-
- commitChanges = function() {
- document.querySelector('form#documentEditor').submit();
- }
-
|