]> BookStack Code Mirror - hacks/blob - content/wysiwyg-autocompleter/head.html
Added wysiwyg autocompleter hack
[hacks] / content / wysiwyg-autocompleter / head.html
1 <script>
2     // Listen to the BookStack setup TinyMCE editor event to run custom actions against the editor instance.
3     window.addEventListener('editor-tinymce::setup', event => {
4         // Gain a reference to the TinyMCE editor instance.
5         const editor = event.detail.editor;
6
7         // Register a custom cat svg icon
8         editor.ui.registry.addIcon('insertcaticon', `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 72 72" fill="currentColor"><path d="M13.622 14.093c-.61-.007-1.013.055-1.15.2-.984 1.041 3.094 15.61 5.738 21.974a29.714 29.714 0 0 0-1.332 8.794 29.714 29.714 0 0 0 29.714 29.714 29.714 29.714 0 0 0 29.715-29.714 29.714 29.714 0 0 0-1.158-8.21c2.646-6.49 6.603-20.69 5.633-21.718-.886-.937-12.948 1.595-20.093 3.772a29.714 29.714 0 0 0-14.097-3.558 29.714 29.714 0 0 0-13.048 3.024c-5.932-1.906-16.39-4.24-19.922-4.278Zm6.678 6.139c2.817.03 11.16 1.892 15.891 3.412a23.703 23.703 0 0 1 10.408-2.413 23.703 23.703 0 0 1 11.245 2.839c5.7-1.736 15.321-3.756 16.027-3.009.775.82-2.382 12.147-4.493 17.324a23.703 23.703 0 0 1 .924 6.549A23.703 23.703 0 0 1 46.6 68.637a23.703 23.703 0 0 1-23.702-23.703 23.703 23.703 0 0 1 1.063-7.015c-2.11-5.076-5.362-16.697-4.578-17.528.11-.115.431-.165.918-.16z" transform="translate(-10.627 -8.434)"/></svg>`);
9
10         // add custom autocompleter
11         editor.ui.registry.addAutocompleter('autocompleter-cat', {
12             ch: ':', // the trigger character to open the autocompleter
13             minChars: 2, // lower number means searching sooner - but more lookups as we go
14             columns: 1, // must be 1 for text-based results
15             fetch: function (pattern, maxResults, fetchOptions) {
16                 // A function called when the autocompleter gets triggered, which gets passed 
17                 // the current matched text pattern, the maximum number of expected results and 
18                 // any additional fetch options. 
19                 // The function  should return a Promise containing matching results.
20
21                 return Promise.resolve(
22                     [
23                         {
24                             type: 'autocompleteitem',
25                             value: '<p><strong> Hello Cat 1! </strong></p>',
26                             text: 'Cat 1',
27                             icon: 'insertcaticon'
28                         },
29                         {
30                             type: 'autocompleteitem',
31                             value: '<p><strong> Hello Cat 2! </strong></p>',
32                             text: 'Cat 2',
33                             icon: 'insertcaticon'
34                         }
35                     ]
36                 );
37             },
38             onAction: function (autocompleteApi, rng, value) {
39                 // called when an item from the list is selected
40                 // we still need to be the one who does the insert in to the editor
41
42                 // insert in to the editor
43                 editor.selection.setRng(rng);
44                 editor.insertContent(value);
45             
46                 // hide the autocompleter
47                 autocompleteApi.hide();
48             }
49         });
50     });
51
52     
53 </script>