Dan Brown

Added link selector to markdown editor

...@@ -271,8 +271,6 @@ module.exports = function (ngApp, events) { ...@@ -271,8 +271,6 @@ module.exports = function (ngApp, events) {
271 scope.mdModel = content; 271 scope.mdModel = content;
272 scope.mdChange(markdown(content)); 272 scope.mdChange(markdown(content));
273 273
274 - console.log('test');
275 -
276 element.on('change input', (event) => { 274 element.on('change input', (event) => {
277 content = element.val(); 275 content = element.val();
278 $timeout(() => { 276 $timeout(() => {
...@@ -304,6 +302,7 @@ module.exports = function (ngApp, events) { ...@@ -304,6 +302,7 @@ module.exports = function (ngApp, events) {
304 const input = element.find('[markdown-input] textarea').first(); 302 const input = element.find('[markdown-input] textarea').first();
305 const display = element.find('.markdown-display').first(); 303 const display = element.find('.markdown-display').first();
306 const insertImage = element.find('button[data-action="insertImage"]'); 304 const insertImage = element.find('button[data-action="insertImage"]');
305 + const insertEntityLink = element.find('button[data-action="insertEntityLink"]')
307 306
308 let currentCaretPos = 0; 307 let currentCaretPos = 0;
309 308
...@@ -355,6 +354,13 @@ module.exports = function (ngApp, events) { ...@@ -355,6 +354,13 @@ module.exports = function (ngApp, events) {
355 input[0].selectionEnd = caretPos + ('![](http://'.length); 354 input[0].selectionEnd = caretPos + ('![](http://'.length);
356 return; 355 return;
357 } 356 }
357 +
358 + // Insert entity link shortcut
359 + if (event.which === 75 && event.ctrlKey && event.shiftKey) {
360 + showLinkSelector();
361 + return;
362 + }
363 +
358 // Pass key presses to controller via event 364 // Pass key presses to controller via event
359 scope.$emit('editor-keydown', event); 365 scope.$emit('editor-keydown', event);
360 }); 366 });
...@@ -370,6 +376,26 @@ module.exports = function (ngApp, events) { ...@@ -370,6 +376,26 @@ module.exports = function (ngApp, events) {
370 }); 376 });
371 }); 377 });
372 378
379 + function showLinkSelector() {
380 + window.showEntityLinkSelector((entity) => {
381 + let selectionStart = currentCaretPos;
382 + let selectionEnd = input[0].selectionEnd;
383 + let textSelected = (selectionEnd !== selectionStart);
384 + let currentContent = input.val();
385 +
386 + if (textSelected) {
387 + let selectedText = currentContent.substring(selectionStart, selectionEnd);
388 + let linkText = `[${selectedText}](${entity.link})`;
389 + input.val(currentContent.substring(0, selectionStart) + linkText + currentContent.substring(selectionEnd));
390 + } else {
391 + let linkText = ` [${entity.name}](${entity.link}) `;
392 + input.val(currentContent.substring(0, selectionStart) + linkText + currentContent.substring(selectionStart))
393 + }
394 + input.change();
395 + });
396 + }
397 + insertEntityLink.click(showLinkSelector);
398 +
373 } 399 }
374 } 400 }
375 }]); 401 }]);
......
...@@ -140,6 +140,11 @@ $(function () { ...@@ -140,6 +140,11 @@ $(function () {
140 $(this).fadeOut(240); 140 $(this).fadeOut(240);
141 }); 141 });
142 142
143 + $('.markdown-display').on('click', 'a', function(event) {
144 + event.preventDefault();
145 + window.open($(this).attr('href'));
146 + });
147 +
143 }); 148 });
144 149
145 // Page specific items 150 // Page specific items
......
...@@ -19,22 +19,9 @@ ...@@ -19,22 +19,9 @@
19 19
20 20
21 </div> 21 </div>
22 - @include('partials/image-manager', ['imageType' => 'gallery', 'uploaded_to' => $page->id])
23 22
24 - <div id="entity-selector-wrap"> 23 + @include('partials/image-manager', ['imageType' => 'gallery', 'uploaded_to' => $page->id])
25 - <div class="overlay" entity-link-selector> 24 + @include('partials/entity-selector-popup')
26 - <div class="popup-body small flex-child">
27 - <div class="popup-header primary-background">
28 - <div class="popup-title">Entity Select</div>
29 - <button type="button" class="corner-button neg button">x</button>
30 - </div>
31 - @include('partials/entity-selector', ['name' => 'entity-selector'])
32 - <div class="popup-footer">
33 - <button type="button" disabled="true" class="button entity-link-selector-confirm pos corner-button">Select</button>
34 - </div>
35 - </div>
36 - </div>
37 - </div>
38 25
39 <script> 26 <script>
40 (function() { 27 (function() {
......
...@@ -73,6 +73,8 @@ ...@@ -73,6 +73,8 @@
73 <span class="float left">Editor</span> 73 <span class="float left">Editor</span>
74 <div class="float right buttons"> 74 <div class="float right buttons">
75 <button class="text-button" type="button" data-action="insertImage"><i class="zmdi zmdi-image"></i>Insert Image</button> 75 <button class="text-button" type="button" data-action="insertImage"><i class="zmdi zmdi-image"></i>Insert Image</button>
76 + &nbsp;|&nbsp;
77 + <button class="text-button" type="button" data-action="insertEntityLink"><i class="zmdi zmdi-link"></i>Insert Entity Link</button>
76 </div> 78 </div>
77 </div> 79 </div>
78 80
......
1 +<div id="entity-selector-wrap">
2 + <div class="overlay" entity-link-selector>
3 + <div class="popup-body small flex-child">
4 + <div class="popup-header primary-background">
5 + <div class="popup-title">Entity Select</div>
6 + <button type="button" class="corner-button neg button popup-close">x</button>
7 + </div>
8 + @include('partials/entity-selector', ['name' => 'entity-selector'])
9 + <div class="popup-footer">
10 + <button type="button" disabled="true" class="button entity-link-selector-confirm pos corner-button">Select</button>
11 + </div>
12 + </div>
13 + </div>
14 +</div>
...\ No newline at end of file ...\ No newline at end of file