diff --git a/editor/src/index.js b/editor/src/index.js index 1d2149e..bb5d9ce 100644 --- a/editor/src/index.js +++ b/editor/src/index.js @@ -13,7 +13,7 @@ import 'jquery-contextmenu'; import getCaretCoordinates from './caret-position' import moment from 'moment' import mermaid from 'mermaid' -import { parseDOTNetwork, Network } from "vis-network/peer"; +import {Network, parseDOTNetwork} from "vis-network/peer"; import PrismJS from 'prismjs' import 'prismjs/plugins/filter-highlight-all/prism-filter-highlight-all' import 'prismjs/components/prism-php' @@ -87,7 +87,10 @@ function addIndicator(editor, indicator) { let holder = document.getElementById('editor'); function showSearchResults(searchTool, query, input, value, resultType) { - showSearchResultsExtended('#link-complete', 'link-template', searchTool, query, input, value, resultType, {showOnlyResults:true, belowCursor: true}) + showSearchResultsExtended('#link-complete', 'link-template', searchTool, query, input, value, resultType, { + showOnlyResults: true, + belowCursor: true + }) } function showSearchResultsExtended(element, template, searchTool, query, input, value, resultType, options) { @@ -113,6 +116,16 @@ function showSearchResultsExtended(element, template, searchTool, query, input, var templateText = document.getElementById(template).innerHTML; var rendered = Mustache.render(templateText, {page: value, results: results}, {}, ['[[', ']]']); + let selected = $lc.find('li.selected'); + if (selected) { + let selectedPos = $lc.find('li').index(selected[0]) + rendered = $(rendered) + const $lis = $lc.find('li') + if ($lis.length >= 1) { + selectedPos = Math.min(selectedPos, $lis.length - 1) + rendered.find('li')[selectedPos].classList.add('selected') + } + } $lc.html(rendered).fadeIn() } @@ -126,37 +139,6 @@ $(document).on('keydown', '.keyboard-list', function (event) { $popup.fadeOut() return false } - if (event.key === 'Enter') { - const element = $popup.find('li.selected') - const linkName = element.text() - $popup.trigger('popup:selected', [linkName, $popup.data('result-type'), element]) - $popup.fadeOut() - return false - } - if (event.key === 'ArrowUp') { - const selected = $popup.find('li.selected') - const prev = selected.prev('li') - if (prev.length) { - prev.addClass('selected') - selected.removeClass('selected') - prev[0].scrollIntoView({block: 'center', inline: 'nearest'}) - } else { - // move back from dropdown to input - $popup.trigger('popup:leave') - selected.removeClass('selected') - } - return false - } - if (event.key === 'ArrowDown') { - const selected = $popup.find('li.selected') - const next = selected.next('li'); - if (next.length) { - next.addClass('selected') - selected.removeClass('selected') - next[0].scrollIntoView({block: 'center', inline: 'nearest'}) - } - return false - } return true }) @@ -207,7 +189,7 @@ if (holder) { linkify: true, highlight: function (str, lang) { if (lang === 'mermaid') { - return '
'+str+'
'; + return '
' + str + '
'; } return ''; } @@ -323,11 +305,39 @@ if (holder) { if (event.key === 'Escape' && isVisible) { $lc.fadeOut() return false - } + } else if (event.key === 'Enter' && isVisible) { + const element = $lc.find('li.selected') + const linkName = element.text() + $lc.trigger('popup:selected', [linkName, $lc.data('result-type'), element]) + $lc.fadeOut() + return false + } else if (event.key === 'ArrowUp' && isVisible) { + const selected = $lc.find('li.selected') + const prev = selected.prev('li') + if (prev.length) { + prev.addClass('selected') + selected.removeClass('selected') + prev[0].scrollIntoView({block: 'center', inline: 'nearest'}) + } else { + // move back from dropdown to input + $lc.trigger('popup:leave') + selected.removeClass('selected') + } + return false + } else if (event.key === 'ArrowDown' && isVisible) { + const selected = $lc.find('li.selected') + if (!selected.length) { + $lc.find('li:not(.selected):first-child').addClass('selected') + return false + } + + const next = selected.next('li'); + if (next.length) { + next.addClass('selected') + selected.removeClass('selected') + next[0].scrollIntoView({block: 'center', inline: 'nearest'}) + } - if (event.key === 'ArrowDown' && isVisible) { - $lc.focus() - $lc.find('li:first-child').addClass('selected') return false } @@ -362,6 +372,15 @@ if (holder) { searchEnabled = false return false; } + const ignoreKeys = { + 'ArrowUp': true, + 'ArrowDown': true, + 'Enter': true, + } + + if (event.key in ignoreKeys) { + return false + } let value = input.value let end = input.selectionEnd diff --git a/templates/layout.html b/templates/layout.html index a9d1a2b..d9e673c 100644 --- a/templates/layout.html +++ b/templates/layout.html @@ -288,7 +288,7 @@
- + {{ block "footer_scripts" . }} {{ end }}