BookStack Code Mirror - bookstack/blob - resources/js/wysiwyg-tinymce/toolbars.js

   1 /**
   2  * @param {WysiwygConfigOptions} options
   3  * @return {String}
   4  */
   5 export function getPrimaryToolbar(options) {
   6     const textDirPlugins = options.textDirection === 'rtl' ? 'ltr rtl' : '';
   7
   8     const toolbar = [
   9         'undo redo',
  10         'styles',
  11         'bold italic underline forecolor backcolor formatoverflow',
  12         'alignleft aligncenter alignright alignjustify',
  13         'bullist numlist listoverflow',
  14         textDirPlugins,
  15         'link customtable imagemanager-insert insertoverflow',
  16         'code about fullscreen',
  17     ];
  18
  19     return toolbar.filter(row => Boolean(row)).join(' | ');
  20 }
  21
  22 /**
  23  * @param {Editor} editor
  24  */
  25 function registerPrimaryToolbarGroups(editor) {
  26     editor.ui.registry.addGroupToolbarButton('formatoverflow', {
  27         icon: 'more-drawer',
  28         tooltip: 'More',
  29         items: 'strikethrough superscript subscript inlinecode removeformat',
  30     });
  31     editor.ui.registry.addGroupToolbarButton('listoverflow', {
  32         icon: 'more-drawer',
  33         tooltip: 'More',
  34         items: 'tasklist outdent indent',
  35     });
  36     editor.ui.registry.addGroupToolbarButton('insertoverflow', {
  37         icon: 'more-drawer',
  38         tooltip: 'More',
  39         items: 'customhr codeeditor drawio media details',
  40     });
  41 }
  42
  43 /**
  44  * @param {Editor} editor
  45  */
  46 function registerLinkContextToolbar(editor) {
  47     editor.ui.registry.addContextToolbar('linkcontexttoolbar', {
  48         predicate(node) {
  49             return node.closest('a') !== null;
  50         },
  51         position: 'node',
  52         scope: 'node',
  53         items: 'link unlink openlink',
  54     });
  55 }
  56
  57 /**
  58  * @param {Editor} editor
  59  */
  60 function registerImageContextToolbar(editor) {
  61     editor.ui.registry.addContextToolbar('imagecontexttoolbar', {
  62         predicate(node) {
  63             return node.closest('img') !== null && !node.hasAttribute('data-mce-object');
  64         },
  65         position: 'node',
  66         scope: 'node',
  67         items: 'image',
  68     });
  69 }
  70
  71 /**
  72  * @param {Editor} editor
  73  */
  74 function registerObjectContextToolbar(editor) {
  75     editor.ui.registry.addContextToolbar('objectcontexttoolbar', {
  76         predicate(node) {
  77             return node.closest('img') !== null && node.hasAttribute('data-mce-object');
  78         },
  79         position: 'node',
  80         scope: 'node',
  81         items: 'media',
  82     });
  83 }
  84
  85 /**
  86  * @param {Editor} editor
  87  */
  88 export function registerAdditionalToolbars(editor) {
  89     registerPrimaryToolbarGroups(editor);
  90     registerLinkContextToolbar(editor);
  91     registerImageContextToolbar(editor);
  92     registerObjectContextToolbar(editor);
  93 }