Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.

editor.dev.js 8.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279
  1. attachDocumentEditor = function (editorElement, commitDialogElement)
  2. {
  3. var edit = require("./prosemirror/dist/edit")
  4. require("./prosemirror/dist/inputrules/autoinput")
  5. require("./prosemirror/dist/menu/menubar")
  6. require("./prosemirror/dist/markdown")
  7. var _menu = require("./prosemirror/dist/menu/menu")
  8. var content = document.querySelector('#editor');
  9. content.style.display = "none";
  10. var gitblitCommands = new _menu.MenuCommandGroup("gitblitCommands");
  11. var viewCommands = new _menu.MenuCommandGroup("viewCommands");
  12. var textCommands = new _menu.MenuCommandGroup("textCommands");
  13. var insertCommands = new _menu.MenuCommandGroup("insertCommands");
  14. var menuItems = [gitblitCommands, viewCommands, textCommands, _menu.inlineGroup, _menu.blockGroup, _menu.historyGroup, insertCommands];
  15. const updateCmd = Object.create(null);
  16. updateCmd["GitblitCommit"] = {
  17. label: "GitblitCommit",
  18. run: function() {
  19. commitDialogElement.modal({show:true});
  20. editorElement.value = pm.getContent('markdown');
  21. },
  22. menu: {
  23. group: "gitblitCommands", rank: 10,
  24. display: {
  25. render: function(cmd, pm) { return renderFontAwesomeIcon(cmd, pm, "fa-save"); }
  26. }
  27. }
  28. };
  29. updateCmd["FullScreen"] = {
  30. label: "Toggle Fullscreen",
  31. derive: "toggle",
  32. run: function(pm) {
  33. //Maintain the scroll context
  34. var initialScroll = window.scrollY;
  35. var navs = [document.querySelector("div.repositorynavbar"), document.querySelector("div.navbar"), document.querySelector("div.docnav")];
  36. var offset = navs.reduce(function(p, c) { return p + c.offsetHeight; }, 0);
  37. navs.forEach(function(e) { e.classList.toggle("forceHide"); });
  38. if (!toggleFullScreen(document.documentElement)) {
  39. offset = 60;
  40. } else {
  41. offset -= 60;
  42. }
  43. pm.signal("commandsChanged");
  44. //Browsers don't seem to accept a scrollTo straight after a full screen
  45. setTimeout(function(){window.scrollTo(0, Math.max(0,initialScroll - offset));}, 100);
  46. },
  47. menu: {
  48. group: "viewCommands", rank: 11,
  49. display: {
  50. render: function(cmd, pm) { return renderFontAwesomeIcon(cmd, pm, "fa-arrows-alt"); }
  51. }
  52. },
  53. active: function active(pm) { return getFullScreenElement() ? true : false; }
  54. };
  55. updateCmd["heading1"] = {
  56. derive: "toggle",
  57. run: function(pm) {
  58. var selection = pm.selection;
  59. var from = selection.from;
  60. var to = selection.to;
  61. var attr = {name:"make", level:"1"};
  62. var node = pm.doc.resolve(from).parent;
  63. if (node && node.hasMarkup(pm.schema.nodes.heading, attr)) {
  64. return pm.tr.setBlockType(from, to, pm.schema.defaultTextblockType(), {}).apply(pm.apply.scroll);
  65. } else {
  66. return pm.tr.setBlockType(from, to, pm.schema.nodes.heading, attr).apply(pm.apply.scroll);
  67. }
  68. },
  69. active: function active(pm) {
  70. var node = pm.doc.resolve(pm.selection.from).parent;
  71. if (node && node.hasMarkup(pm.schema.nodes.heading, {name:"make", level:"1"})) {
  72. return true;
  73. }
  74. return false;
  75. },
  76. menu: {
  77. group: "textCommands", rank: 1,
  78. display: {
  79. render: function(cmd, pm) { return renderFontAwesomeIcon(cmd, pm, "fa-header fa-header-x fa-header-1"); }
  80. },
  81. },
  82. select: function(){return true;}
  83. };
  84. updateCmd["heading2"] = {
  85. derive: "toggle",
  86. run: function(pm) {
  87. var selection = pm.selection;
  88. var from = selection.from;
  89. var to = selection.to;
  90. var attr = {name:"make", level:"2"};
  91. var node = pm.doc.resolve(from).parent;
  92. if (node && node.hasMarkup(pm.schema.nodes.heading, attr)) {
  93. return pm.tr.setBlockType(from, to, pm.schema.defaultTextblockType(), {}).apply(pm.apply.scroll);
  94. } else {
  95. return pm.tr.setBlockType(from, to, pm.schema.nodes.heading, attr).apply(pm.apply.scroll);
  96. }
  97. },
  98. active: function active(pm) {
  99. var node = pm.doc.resolve(pm.selection.from).parent;
  100. if (node && node.hasMarkup(pm.schema.nodes.heading, {name:"make", level:"2"})) {
  101. return true;
  102. }
  103. return false;
  104. },
  105. menu: {
  106. group: "textCommands", rank: 2,
  107. display: {
  108. render: function(cmd, pm) { return renderFontAwesomeIcon(cmd, pm, "fa-header fa-header-x fa-header-2"); }
  109. },
  110. },
  111. select: function(){return true;}
  112. };
  113. updateCmd["heading3"] = {
  114. derive: "toggle",
  115. run: function(pm) {
  116. var selection = pm.selection;
  117. var from = selection.from;
  118. var to = selection.to;
  119. var attr = {name:"make", level:"3"};
  120. var node = pm.doc.resolve(from).parent;
  121. if (node && node.hasMarkup(pm.schema.nodes.heading, attr)) {
  122. return pm.tr.setBlockType(from, to, pm.schema.defaultTextblockType(), {}).apply(pm.apply.scroll);
  123. } else {
  124. return pm.tr.setBlockType(from, to, pm.schema.nodes.heading, attr).apply(pm.apply.scroll);
  125. }
  126. },
  127. active: function active(pm) {
  128. var node = pm.doc.resolve(pm.selection.from).parent;
  129. if (node && node.hasMarkup(pm.schema.nodes.heading, {name:"make", level:"3"})) {
  130. return true;
  131. }
  132. return false;
  133. },
  134. menu: {
  135. group: "textCommands", rank: 3,
  136. display: {
  137. render: function(cmd, pm) { return renderFontAwesomeIcon(cmd, pm, "fa-header fa-header-x fa-header-3"); }
  138. },
  139. },
  140. select: function(){return true;}
  141. };
  142. updateCmd["strong:toggle"] = {
  143. menu: {
  144. group: "textCommands", rank: 4,
  145. display: {
  146. render: function(cmd, pm) { return renderFontAwesomeIcon(cmd, pm, "fa-bold"); }
  147. }
  148. },
  149. select: function(){return true;}
  150. };
  151. updateCmd["em:toggle"] = {
  152. menu: {
  153. group: "textCommands", rank: 5,
  154. display: {
  155. render: function(cmd, pm) { return renderFontAwesomeIcon(cmd, pm, "fa-italic"); }
  156. }
  157. },
  158. select: function(){return true;}
  159. };
  160. updateCmd["code:toggle"] = {
  161. menu: {
  162. group: "textCommands", rank: 6,
  163. display: {
  164. render: function(cmd, pm) { return renderFontAwesomeIcon(cmd, pm, "fa-code"); }
  165. }
  166. },
  167. select: function(){return true;}
  168. };
  169. updateCmd["image:insert"] = {
  170. menu: {
  171. group: "insertCommands", rank: 1,
  172. display: {
  173. render: function(cmd, pm) { return renderFontAwesomeIcon(cmd, pm, "fa-picture-o"); }
  174. }
  175. }
  176. };
  177. updateCmd["selectParentNode"] = {
  178. menu: {
  179. group: "insertCommands", rank: 10,
  180. display: {
  181. render: function(cmd, pm) { return renderFontAwesomeIcon(cmd, pm, "fa-arrow-circle-o-left"); }
  182. }
  183. }
  184. };
  185. var pm = window.pm = new edit.ProseMirror({
  186. place: document.querySelector('#visualEditor'),
  187. autoInput: true,
  188. doc: content.value,
  189. menuBar: { float:true, content: menuItems},
  190. commands: edit.CommandSet.default.update(updateCmd),
  191. docFormat: "markdown"
  192. });
  193. var scrollStart = document.querySelector(".ProseMirror").offsetTop;
  194. var ticking = false;
  195. window.addEventListener("scroll", function() {
  196. var scrollPosition = window.scrollY;
  197. if (!ticking) {
  198. window.requestAnimationFrame(function() {
  199. if (!getFullScreenElement() && (scrollPosition > scrollStart)) {
  200. document.querySelector(".ProseMirror-menubar").classList.add("scrolling");
  201. } else {
  202. document.querySelector(".ProseMirror-menubar").classList.remove("scrolling");
  203. }
  204. ticking = false;
  205. });
  206. }
  207. ticking = true;
  208. });
  209. }
  210. function renderFontAwesomeIcon(cmd, pm, classNames) {
  211. var node = document.createElement("div");
  212. node.className = "ProseMirror-icon";
  213. var icon = document.createElement("i");
  214. icon.setAttribute("class", "fa fa-fw " + classNames);
  215. var active = cmd.active(pm);
  216. if (active || cmd.spec.invert) node.classList.add("ProseMirror-menu-active");
  217. node.appendChild(icon);
  218. return node;
  219. }
  220. function getFullScreenElement() {
  221. return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
  222. }
  223. function toggleFullScreen(e) {
  224. if (getFullScreenElement()) {
  225. if (document.exitFullscreen) { document.exitFullscreen(); }
  226. else if (document.msExitFullscreen) { document.msExitFullscreen(); }
  227. else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); }
  228. else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); }
  229. return true;
  230. } else {
  231. if (e.requestFullscreen) { e.requestFullscreen(); }
  232. else if (e.msRequestFullscreen) { e.msRequestFullscreen(); }
  233. else if (e.mozRequestFullScreen) { e.mozRequestFullScreen(); }
  234. else if (e.webkitRequestFullscreen) { e.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); }
  235. }
  236. return false;
  237. }
  238. commitChanges = function() {
  239. document.querySelector('form#documentEditor').submit();
  240. }