mirror of
				https://github.com/go-gitea/gitea
				synced 2025-11-04 13:28:25 +00:00 
			
		
		
		
	Fix EasyMDE toolbar (#24489)
Fixes https://github.com/go-gitea/gitea/issues/24486 The "clean block" button is gone because I could not find a matching octicon. Order of buttons is roughly equal to textarea. <img width="824" alt="Screenshot 2023-05-02 at 21 10 00" src="https://user-images.githubusercontent.com/115237/235762593-ceccb260-e665-4932-ac8a-ef6fe8406a3c.png"> --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
		@@ -8,7 +8,7 @@ import {handleGlobalEnterQuickSubmit} from './QuickSubmit.js';
 | 
			
		||||
import {emojiString} from '../emoji.js';
 | 
			
		||||
import {renderPreviewPanelContent} from '../repo-editor.js';
 | 
			
		||||
import {matchEmoji, matchMention} from '../../utils/match.js';
 | 
			
		||||
import {svg} from '../../svg.js';
 | 
			
		||||
import {easyMDEToolbarActions} from './EasyMDEToolbarActions.js';
 | 
			
		||||
 | 
			
		||||
let elementIdCounter = 0;
 | 
			
		||||
 | 
			
		||||
@@ -206,66 +206,20 @@ class ComboMarkdownEditor {
 | 
			
		||||
 | 
			
		||||
  prepareEasyMDEToolbarActions() {
 | 
			
		||||
    this.easyMDEToolbarDefault = [
 | 
			
		||||
      'bold', 'italic', 'strikethrough', '|', 'heading-1', 'heading-2', 'heading-3', 'heading-bigger', 'heading-smaller', '|',
 | 
			
		||||
      'code', 'quote', '|', 'gitea-checkbox-empty', 'gitea-checkbox-checked', '|',
 | 
			
		||||
      'unordered-list', 'ordered-list', '|', 'link', 'image', 'table', 'horizontal-rule', '|', 'clean-block', '|',
 | 
			
		||||
      'gitea-switch-to-textarea',
 | 
			
		||||
      'bold', 'italic', 'strikethrough', '|', 'heading-1', 'heading-2', 'heading-3',
 | 
			
		||||
      'heading-bigger', 'heading-smaller', '|', 'code', 'quote', '|', 'gitea-checkbox-empty',
 | 
			
		||||
      'gitea-checkbox-checked', '|', 'unordered-list', 'ordered-list', '|', 'link', 'image',
 | 
			
		||||
      'table', 'horizontal-rule', '|', 'gitea-switch-to-textarea',
 | 
			
		||||
    ];
 | 
			
		||||
 | 
			
		||||
    this.easyMDEToolbarActions = {
 | 
			
		||||
      'gitea-checkbox-empty': {
 | 
			
		||||
        action(e) {
 | 
			
		||||
          const cm = e.codemirror;
 | 
			
		||||
          cm.replaceSelection(`\n- [ ] ${cm.getSelection()}`);
 | 
			
		||||
          cm.focus();
 | 
			
		||||
        },
 | 
			
		||||
        icon: svg('gitea-empty-checkbox'),
 | 
			
		||||
        title: 'Add Checkbox (empty)',
 | 
			
		||||
      },
 | 
			
		||||
      'gitea-checkbox-checked': {
 | 
			
		||||
        action(e) {
 | 
			
		||||
          const cm = e.codemirror;
 | 
			
		||||
          cm.replaceSelection(`\n- [x] ${cm.getSelection()}`);
 | 
			
		||||
          cm.focus();
 | 
			
		||||
        },
 | 
			
		||||
        icon: svg('octicon-checkbox'),
 | 
			
		||||
        title: 'Add Checkbox (checked)',
 | 
			
		||||
      },
 | 
			
		||||
      'gitea-switch-to-textarea': {
 | 
			
		||||
        action: () => {
 | 
			
		||||
          this.userPreferredEditor = 'textarea';
 | 
			
		||||
          this.switchToTextarea();
 | 
			
		||||
        },
 | 
			
		||||
        icon: svg('octicon-file'),
 | 
			
		||||
        title: 'Revert to simple textarea',
 | 
			
		||||
      },
 | 
			
		||||
      'gitea-code-inline': {
 | 
			
		||||
        action(e) {
 | 
			
		||||
          const cm = e.codemirror;
 | 
			
		||||
          const selection = cm.getSelection();
 | 
			
		||||
          cm.replaceSelection(`\`${selection}\``);
 | 
			
		||||
          if (!selection) {
 | 
			
		||||
            const cursorPos = cm.getCursor();
 | 
			
		||||
            cm.setCursor(cursorPos.line, cursorPos.ch - 1);
 | 
			
		||||
          }
 | 
			
		||||
          cm.focus();
 | 
			
		||||
        },
 | 
			
		||||
        icon: svg('octicon-chevron-right'),
 | 
			
		||||
        title: 'Add Inline Code',
 | 
			
		||||
      }
 | 
			
		||||
    };
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  parseEasyMDEToolbar(actions) {
 | 
			
		||||
  parseEasyMDEToolbar(EasyMDE, actions) {
 | 
			
		||||
    this.easyMDEToolbarActions = this.easyMDEToolbarActions || easyMDEToolbarActions(EasyMDE, this);
 | 
			
		||||
    const processed = [];
 | 
			
		||||
    for (const action of actions) {
 | 
			
		||||
      if (action.startsWith('gitea-')) {
 | 
			
		||||
        const giteaAction = this.easyMDEToolbarActions[action];
 | 
			
		||||
        if (!giteaAction) throw new Error(`Unknown EasyMDE toolbar action ${action}`);
 | 
			
		||||
        processed.push(giteaAction);
 | 
			
		||||
      } else {
 | 
			
		||||
        processed.push(action);
 | 
			
		||||
      }
 | 
			
		||||
      const actionButton = this.easyMDEToolbarActions[action];
 | 
			
		||||
      if (!actionButton) throw new Error(`Unknown EasyMDE toolbar action ${action}`);
 | 
			
		||||
      processed.push(actionButton);
 | 
			
		||||
    }
 | 
			
		||||
    return processed;
 | 
			
		||||
  }
 | 
			
		||||
@@ -293,7 +247,7 @@ class ComboMarkdownEditor {
 | 
			
		||||
      nativeSpellcheck: true,
 | 
			
		||||
      ...this.options.easyMDEOptions,
 | 
			
		||||
    };
 | 
			
		||||
    easyMDEOpt.toolbar = this.parseEasyMDEToolbar(easyMDEOpt.toolbar ?? this.easyMDEToolbarDefault);
 | 
			
		||||
    easyMDEOpt.toolbar = this.parseEasyMDEToolbar(EasyMDE, easyMDEOpt.toolbar ?? this.easyMDEToolbarDefault);
 | 
			
		||||
 | 
			
		||||
    this.easyMDE = new EasyMDE(easyMDEOpt);
 | 
			
		||||
    this.easyMDE.codemirror.on('change', (...args) => {this.options?.onContentChanged?.(this, ...args)});
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user