Merge pull request #3599 from BookStackApp/editor_list_shortcuts

Add editor shortcuts for two main list types

resources/js/components/markdown-editor.js

@@ -211,13 +211,15 @@ class MarkdownEditor {
         extraKeys[`${metaKey}-3`] = cm => {replaceLineStart('####');};
         extraKeys[`${metaKey}-4`] = cm => {replaceLineStart('#####');};
         extraKeys[`${metaKey}-5`] = cm => {replaceLineStart('');};
-        extraKeys[`${metaKey}-d`] = cm => {replaceLineStart('');};
+        extraKeys[`${metaKey}-D`] = cm => {replaceLineStart('');};
         extraKeys[`${metaKey}-6`] = cm => {replaceLineStart('>');};
-        extraKeys[`${metaKey}-q`] = cm => {replaceLineStart('>');};
+        extraKeys[`${metaKey}-Q`] = cm => {replaceLineStart('>');};
         extraKeys[`${metaKey}-7`] = cm => {wrapSelection('\n```\n', '\n```');};
         extraKeys[`${metaKey}-8`] = cm => {wrapSelection('`', '`');};
         extraKeys[`Shift-${metaKey}-E`] = cm => {wrapSelection('`', '`');};
         extraKeys[`${metaKey}-9`] = cm => {wrapSelection('<p class="callout info">', '</p>');};
+        extraKeys[`${metaKey}-P`] = cm => {replaceLineStart('-')}
+        extraKeys[`${metaKey}-O`] = cm => {replaceLineStartForOrderedList()}
         cm.setOption('extraKeys', extraKeys);
 
         // Update data on content change
@@ -366,6 +368,19 @@ class MarkdownEditor {
             cm.setSelections([selections]);
         }
 
+        function replaceLineStartForOrderedList() {
+            const cursor = cm.getCursor();
+            const prevLineContent = cm.getLine(cursor.line - 1) || '';
+            const listMatch = prevLineContent.match(/^(\s*)(\d)([).])\s/) || [];
+
+            const number = (Number(listMatch[2]) || 0) + 1;
+            const whiteSpace = listMatch[1] || '';
+            const listMark = listMatch[3] || '.'
+
+            const prefix = `${whiteSpace}${number}${listMark}`;
+            return replaceLineStart(prefix);
+        }
+
         // Handle image upload and add image into markdown content
         function uploadImage(file) {
             if (file === null || file.type.indexOf('image') !== 0) return;

resources/js/wysiwyg/config.js

@@ -166,13 +166,13 @@ function getSetupCallback(options) {
     return function(editor) {
         editor.on('ExecCommand change input NodeChange ObjectResized', editorChange);
         listenForCommonEvents(editor);
-        registerShortcuts(editor);
         listenForDragAndPaste(editor, options);
 
         editor.on('init', () => {
             editorChange();
             scrollToQueryString(editor);
             window.editor = editor;
+            registerShortcuts(editor);
         });
 
         editor.on('PreInit', () => {

resources/js/wysiwyg/shortcuts.js

@@ -16,6 +16,8 @@ export function register(editor) {
     editor.shortcuts.add('meta+e', '', ['codeeditor', false, 'pre']);
     editor.shortcuts.add('meta+8', '', ['FormatBlock', false, 'code']);
     editor.shortcuts.add('meta+shift+E', '', ['FormatBlock', false, 'code']);
+    editor.shortcuts.add('meta+o', '', 'InsertOrderedList');
+    editor.shortcuts.add('meta+p', '', 'InsertUnorderedList');
 
     // Save draft shortcut
     editor.shortcuts.add('meta+S', '', () => {

resources/views/help/wysiwyg.blade.php

@@ -1,10 +1,10 @@
 @extends('layouts.plain')
-@section('document-class', setting()->getForCurrentUser('dark-mode-enabled') ? 'dark-mode ' : '')
+@section('document-class', 'bg-white ' .  (setting()->getForCurrentUser('dark-mode-enabled') ? 'dark-mode ' : ''))
 
 @section('content')
-    <div class="px-l pb-m m-s card">
+    <div class="p-m">
 
-        <h4>{{ trans('editor.editor_license') }}</h4>
+        <h4 class="mt-s">{{ trans('editor.editor_license') }}</h4>
         <p>
             {!! trans('editor.editor_tiny_license', ['tinyLink' => '<a href="https://www.tiny.cloud/" target="_blank" rel="noopener noreferrer">TinyMCE</a>']) !!}
             <br>
@@ -112,7 +112,21 @@
                 <td><code>Cmd</code>+<code>9</code></td>
                 <td>
                     {{ trans('editor.callouts') }} <br>
-                    {{ trans('editor.callouts_cycle') }}
+                    <small>{{ trans('editor.callouts_cycle') }}</small>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <code>Ctrl</code>+<code>O</code> <br>
+                    <code>Ctrl</code>+<code>P</code>
+                </td>
+                <td>
+                    <code>Cmd</code>+<code>O</code> <br>
+                    <code>Cmd</code>+<code>P</code>
+                </td>
+                <td>
+                    {{ trans('editor.list_numbered') }} <br>
+                    {{ trans('editor.list_bullet') }}
                 </td>
             </tr>
             <tr>