You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

EasyMDEToolbarActions.js 3.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. import {svg} from '../../svg.js';
  2. export function easyMDEToolbarActions(EasyMDE, editor) {
  3. const actions = {
  4. '|': '|',
  5. 'heading-1': {
  6. action: EasyMDE.toggleHeading1,
  7. icon: svg('octicon-heading'),
  8. title: 'Heading 1',
  9. },
  10. 'heading-2': {
  11. action: EasyMDE.toggleHeading2,
  12. icon: svg('octicon-heading'),
  13. title: 'Heading 2',
  14. },
  15. 'heading-3': {
  16. action: EasyMDE.toggleHeading3,
  17. icon: svg('octicon-heading'),
  18. title: 'Heading 3',
  19. },
  20. 'heading-smaller': {
  21. action: EasyMDE.toggleHeadingSmaller,
  22. icon: svg('octicon-heading'),
  23. title: 'Decrease Heading',
  24. },
  25. 'heading-bigger': {
  26. action: EasyMDE.toggleHeadingBigger,
  27. icon: svg('octicon-heading'),
  28. title: 'Increase Heading',
  29. },
  30. 'bold': {
  31. action: EasyMDE.toggleBold,
  32. icon: svg('octicon-bold'),
  33. title: 'Bold',
  34. },
  35. 'italic': {
  36. action: EasyMDE.toggleItalic,
  37. icon: svg('octicon-italic'),
  38. title: 'Italic',
  39. },
  40. 'strikethrough': {
  41. action: EasyMDE.toggleStrikethrough,
  42. icon: svg('octicon-strikethrough'),
  43. title: 'Strikethrough',
  44. },
  45. 'quote': {
  46. action: EasyMDE.toggleBlockquote,
  47. icon: svg('octicon-quote'),
  48. title: 'Quote',
  49. },
  50. 'code': {
  51. action: EasyMDE.toggleCodeBlock,
  52. icon: svg('octicon-code'),
  53. title: 'Code',
  54. },
  55. 'link': {
  56. action: EasyMDE.drawLink,
  57. icon: svg('octicon-link'),
  58. title: 'Link',
  59. },
  60. 'unordered-list': {
  61. action: EasyMDE.toggleUnorderedList,
  62. icon: svg('octicon-list-unordered'),
  63. title: 'Unordered List',
  64. },
  65. 'ordered-list': {
  66. action: EasyMDE.toggleOrderedList,
  67. icon: svg('octicon-list-ordered'),
  68. title: 'Ordered List',
  69. },
  70. 'image': {
  71. action: EasyMDE.drawImage,
  72. icon: svg('octicon-image'),
  73. title: 'Image',
  74. },
  75. 'table': {
  76. action: EasyMDE.drawTable,
  77. icon: svg('octicon-table'),
  78. title: 'Table',
  79. },
  80. 'horizontal-rule': {
  81. action: EasyMDE.drawHorizontalRule,
  82. icon: svg('octicon-horizontal-rule'),
  83. title: 'Horizontal Rule',
  84. },
  85. 'preview': {
  86. action: EasyMDE.togglePreview,
  87. icon: svg('octicon-eye'),
  88. title: 'Preview',
  89. },
  90. 'fullscreen': {
  91. action: EasyMDE.toggleFullScreen,
  92. icon: svg('octicon-screen-full'),
  93. title: 'Fullscreen',
  94. },
  95. 'side-by-side': {
  96. action: EasyMDE.toggleSideBySide,
  97. icon: svg('octicon-columns'),
  98. title: 'Side by Side',
  99. },
  100. // gitea's custom actions
  101. 'gitea-checkbox-empty': {
  102. action(e) {
  103. const cm = e.codemirror;
  104. cm.replaceSelection(`\n- [ ] ${cm.getSelection()}`);
  105. cm.focus();
  106. },
  107. icon: svg('gitea-empty-checkbox'),
  108. title: 'Add Checkbox (empty)',
  109. },
  110. 'gitea-checkbox-checked': {
  111. action(e) {
  112. const cm = e.codemirror;
  113. cm.replaceSelection(`\n- [x] ${cm.getSelection()}`);
  114. cm.focus();
  115. },
  116. icon: svg('octicon-checkbox'),
  117. title: 'Add Checkbox (checked)',
  118. },
  119. 'gitea-switch-to-textarea': {
  120. action: () => {
  121. editor.userPreferredEditor = 'textarea';
  122. editor.switchToTextarea();
  123. },
  124. icon: svg('octicon-arrow-switch'),
  125. title: 'Revert to simple textarea',
  126. },
  127. 'gitea-code-inline': {
  128. action(e) {
  129. const cm = e.codemirror;
  130. const selection = cm.getSelection();
  131. cm.replaceSelection(`\`${selection}\``);
  132. if (!selection) {
  133. const cursorPos = cm.getCursor();
  134. cm.setCursor(cursorPos.line, cursorPos.ch - 1);
  135. }
  136. cm.focus();
  137. },
  138. icon: svg('octicon-chevron-right'),
  139. title: 'Add Inline Code',
  140. },
  141. };
  142. for (const [key, value] of Object.entries(actions)) {
  143. if (typeof value !== 'string') {
  144. value.name = key;
  145. }
  146. }
  147. return actions;
  148. }