Skip to content

Commit

Permalink
EasyMDE actions
Browse files Browse the repository at this point in the history
  • Loading branch information
@wxiaoguang
wxiaoguang committed May 2, 2023
1 parent 9bf3292 commit 9e9a4e7
Show file tree
Hide file tree
Showing 3 changed files with 160 additions and 170 deletions.
182 changes: 13 additions & 169 deletions web_src/js/features/comp/ComboMarkdownEditor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ 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;

Expand Down Expand Up @@ -42,6 +43,7 @@ class ComboMarkdownEditor {
}

async init() {
this.prepareEasyMDEToolbarActions();
this.setupTab();
this.setupDropzone();
this.setupTextarea();
Expand Down Expand Up @@ -203,177 +205,22 @@ class ComboMarkdownEditor {
});
}

prepareEasyMDEToolbarActions(EasyMDE, isWiki) {
prepareEasyMDEToolbarActions() {
this.easyMDEToolbarDefault = [
{
name: 'heading-1',
action: EasyMDE.toggleHeading1,
icon: svg('octicon-heading'),
title: 'Heading',
},
{
name: 'heading-2',
action: EasyMDE.toggleHeading2,
icon: svg('octicon-heading'),
title: 'Heading',
},
{
name: 'heading-3',
action: EasyMDE.toggleHeading3,
icon: svg('octicon-heading'),
title: 'Heading',
},
'|',
{
name: 'bold',
action: EasyMDE.toggleBold,
icon: svg('octicon-bold'),
title: 'Bold',
},
{
name: 'italic',
action: EasyMDE.toggleItalic,
icon: svg('octicon-italic'),
title: 'Italic',
},
{
name: 'strikethrough',
action: EasyMDE.toggleStrikethrough,
icon: svg('octicon-strikethrough'),
title: 'Strikethrough',
},
'|',
{
name: 'quote',
action: EasyMDE.toggleBlockquote,
icon: svg('octicon-quote'),
title: 'Quote',
},
isWiki && 'gitea-code-inline',
{
name: 'code',
action: EasyMDE.toggleCodeBlock,
icon: svg('octicon-code'),
title: 'Code',
},
{
name: 'link',
action: EasyMDE.drawLink,
icon: svg('octicon-link'),
title: 'Link',
},
'|',
{
name: 'unordered-list',
action: EasyMDE.toggleUnorderedList,
icon: svg('octicon-list-unordered'),
title: 'Unordered List',
},
{
name: 'ordered-list',
action: EasyMDE.toggleOrderedList,
icon: svg('octicon-list-ordered'),
title: 'Ordered List',
},
'|',
'gitea-checkbox-empty',
'gitea-checkbox-checked',
'|',
{
name: 'image',
action: EasyMDE.drawImage,
icon: svg('octicon-image'),
title: 'Image',
},
{
name: 'table',
action: EasyMDE.drawTable,
icon: svg('octicon-table'),
title: 'Table',
},
{
name: 'horizontal-rule',
action: EasyMDE.drawHorizontalRule,
icon: svg('octicon-horizontal-rule'),
title: 'Horizontal Rule',
},
isWiki && '|',
isWiki && {
name: 'preview',
action: EasyMDE.togglePreview,
icon: svg('octicon-eye'),
title: 'Preview',
},
isWiki && {
name: 'fullscreen',
action: EasyMDE.toggleFullScreen,
icon: svg('octicon-screen-full'),
title: 'Fullscreen',
},
isWiki && {
name: 'side-by-side',
action: EasyMDE.toggleSideBySide,
icon: svg('octicon-columns'),
title: 'Side by Side',
},
'|',
'bold', 'italic', 'strikethrough', '|', 'heading-1', 'heading-2', 'heading-3', '|',
'code', 'quote', '|', 'gitea-checkbox-empty', 'gitea-checkbox-checked', '|',
'unordered-list', 'ordered-list', '|', 'link', 'image', 'table', 'horizontal-rule', '|',
'gitea-switch-to-textarea',
].filter(Boolean);

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-arrow-switch'),
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 (typeof action === 'string' && 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;
}
Expand All @@ -389,9 +236,6 @@ class ComboMarkdownEditor {
async switchToEasyMDE() {
// EasyMDE's CSS should be loaded via webpack config, otherwise our own styles can not overwrite the default styles.
const {default: EasyMDE} = await import(/* webpackChunkName: "easymde" */'easymde');

this.prepareEasyMDEToolbarActions(EasyMDE, this.options.easyMDEOptions.isWiki);

const easyMDEOpt = {
autoDownloadFontAwesome: false,
element: this.textarea,
Expand All @@ -404,7 +248,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)});
Expand Down
140 changes: 140 additions & 0 deletions web_src/js/features/comp/EasyMDEToolbarActions.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
import {svg} from '../../svg.js';

export function easyMDEToolbarActions(EasyMDE, editor) {
const actions = {
'|': '|',
'heading-1': {
action: EasyMDE.toggleHeading1,
icon: svg('octicon-heading'),
title: 'Heading',
},
'heading-2': {
action: EasyMDE.toggleHeading2,
icon: svg('octicon-heading'),
title: 'Heading',
},
'heading-3': {
action: EasyMDE.toggleHeading3,
icon: svg('octicon-heading'),
title: 'Heading',
},
'bold': {
action: EasyMDE.toggleBold,
icon: svg('octicon-bold'),
title: 'Bold',
},
'italic': {
action: EasyMDE.toggleItalic,
icon: svg('octicon-italic'),
title: 'Italic',
},
'strikethrough': {
action: EasyMDE.toggleStrikethrough,
icon: svg('octicon-strikethrough'),
title: 'Strikethrough',
},
'quote': {
action: EasyMDE.toggleBlockquote,
icon: svg('octicon-quote'),
title: 'Quote',
},
'code': {
action: EasyMDE.toggleCodeBlock,
icon: svg('octicon-code'),
title: 'Code',
},
'link': {
action: EasyMDE.drawLink,
icon: svg('octicon-link'),
title: 'Link',
},
'unordered-list': {
action: EasyMDE.toggleUnorderedList,
icon: svg('octicon-list-unordered'),
title: 'Unordered List',
},
'ordered-list': {
action: EasyMDE.toggleOrderedList,
icon: svg('octicon-list-ordered'),
title: 'Ordered List',
},
'image': {
action: EasyMDE.drawImage,
icon: svg('octicon-image'),
title: 'Image',
},
'table': {
action: EasyMDE.drawTable,
icon: svg('octicon-table'),
title: 'Table',
},
'horizontal-rule': {
action: EasyMDE.drawHorizontalRule,
icon: svg('octicon-horizontal-rule'),
title: 'Horizontal Rule',
},
'preview': {
action: EasyMDE.togglePreview,
icon: svg('octicon-eye'),
title: 'Preview',
},
'fullscreen': {
action: EasyMDE.toggleFullScreen,
icon: svg('octicon-screen-full'),
title: 'Fullscreen',
},
'side-by-side': {
action: EasyMDE.toggleSideBySide,
icon: svg('octicon-columns'),
title: 'Side by Side',
},

// gitea's custom actions
'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: () => {
editor.userPreferredEditor = 'textarea';
editor.switchToTextarea();
},
icon: svg('octicon-arrow-switch'),
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',
}
};
for (const action in actions) {
if (action !== '|') {
actions[action].name = action;
}
}
return actions;
}
8 changes: 7 additions & 1 deletion web_src/js/features/repo-wiki.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,13 @@ async function initRepoWikiFormEditor() {
previewWiki: true,
easyMDEOptions: {
previewRender: (_content, previewTarget) => previewTarget.innerHTML, // disable builtin preview render
isWiki: true,
toolbar: ['bold', 'italic', 'strikethrough', '|',
'heading-1', 'heading-2', 'heading-3', '|',
'gitea-code-inline', 'code', 'quote', '|', 'gitea-checkbox-empty', 'gitea-checkbox-checked', '|',
'unordered-list', 'ordered-list', '|',
'link', 'image', 'table', 'horizontal-rule', '|',
'preview', 'fullscreen', 'side-by-side', '|', 'gitea-switch-to-textarea'
],
},
});

Expand Down

0 comments on commit 9e9a4e7

Please sign in to comment.