Fix EasyMDE toolbar

web_src/js/features/comp/ComboMarkdownEditor.js

@@ -42,7 +42,6 @@ class ComboMarkdownEditor {
   }
 
   async init() {
-    this.prepareEasyMDEToolbarActions();
     this.setupTab();
     this.setupDropzone();
     this.setupTextarea();
@@ -204,11 +203,87 @@ class ComboMarkdownEditor {
     });
   }
 
-  prepareEasyMDEToolbarActions() {
+  prepareEasyMDEToolbarActions(EasyMDE) {
     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', '|',
+      {
+        name: 'heading',
+        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',
+      },
+      {
+        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',
+      },
+      '|',
       'gitea-switch-to-textarea',
     ];
 
@@ -259,7 +334,7 @@ class ComboMarkdownEditor {
   parseEasyMDEToolbar(actions) {
     const processed = [];
     for (const action of actions) {
-      if (action.startsWith('gitea-')) {
+      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);
@@ -281,6 +356,9 @@ 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);
+
     const easyMDEOpt = {
       autoDownloadFontAwesome: false,
       element: this.textarea,

web_src/js/svg.js

@@ -1,80 +1,99 @@
 import {h} from 'vue';
+import giteaDoubleChevronLeft from '../../public/img/svg/gitea-double-chevron-left.svg';
+import giteaDoubleChevronRight from '../../public/img/svg/gitea-double-chevron-right.svg';
+import giteaEmptyCheckbox from '../../public/img/svg/gitea-empty-checkbox.svg';
+import octiconArchive from '../../public/img/svg/octicon-archive.svg';
+import octiconBlocked from '../../public/img/svg/octicon-blocked.svg';
+import octiconBold from '../../public/img/svg/octicon-bold.svg';
+import octiconCheckbox from '../../public/img/svg/octicon-checkbox.svg';
+import octiconCheckCircleFill from '../../public/img/svg/octicon-check-circle-fill.svg';
 import octiconChevronDown from '../../public/img/svg/octicon-chevron-down.svg';
+import octiconChevronLeft from '../../public/img/svg/octicon-chevron-left.svg';
 import octiconChevronRight from '../../public/img/svg/octicon-chevron-right.svg';
 import octiconClock from '../../public/img/svg/octicon-clock.svg';
+import octiconCode from '../../public/img/svg/octicon-code.svg';
 import octiconCopy from '../../public/img/svg/octicon-copy.svg';
 import octiconDiffAdded from '../../public/img/svg/octicon-diff-added.svg';
 import octiconDiffModified from '../../public/img/svg/octicon-diff-modified.svg';
 import octiconDiffRemoved from '../../public/img/svg/octicon-diff-removed.svg';
 import octiconDiffRenamed from '../../public/img/svg/octicon-diff-renamed.svg';
 import octiconFile from '../../public/img/svg/octicon-file.svg';
 import octiconFileDirectoryFill from '../../public/img/svg/octicon-file-directory-fill.svg';
+import octiconFilter from '../../public/img/svg/octicon-filter.svg';
+import octiconGitBranch from '../../public/img/svg/octicon-git-branch.svg';
 import octiconGitMerge from '../../public/img/svg/octicon-git-merge.svg';
 import octiconGitPullRequest from '../../public/img/svg/octicon-git-pull-request.svg';
+import octiconHeading from '../../public/img/svg/octicon-heading.svg';
+import octiconHorizontalRule from '../../public/img/svg/octicon-horizontal-rule.svg';
+import octiconImage from '../../public/img/svg/octicon-image.svg';
 import octiconIssueClosed from '../../public/img/svg/octicon-issue-closed.svg';
 import octiconIssueOpened from '../../public/img/svg/octicon-issue-opened.svg';
+import octiconItalic from '../../public/img/svg/octicon-italic.svg';
 import octiconKebabHorizontal from '../../public/img/svg/octicon-kebab-horizontal.svg';
 import octiconLink from '../../public/img/svg/octicon-link.svg';
+import octiconListOrdered from '../../public/img/svg/octicon-list-ordered.svg';
+import octiconListUnordered from '../../public/img/svg/octicon-list-unordered.svg';
 import octiconLock from '../../public/img/svg/octicon-lock.svg';
+import octiconMeter from '../../public/img/svg/octicon-meter.svg';
 import octiconMilestone from '../../public/img/svg/octicon-milestone.svg';
 import octiconMirror from '../../public/img/svg/octicon-mirror.svg';
+import octiconOrganization from '../../public/img/svg/octicon-organization.svg';
 import octiconPlay from '../../public/img/svg/octicon-play.svg';
+import octiconPlus from '../../public/img/svg/octicon-plus.svg';
 import octiconProject from '../../public/img/svg/octicon-project.svg';
+import octiconQuote from '../../public/img/svg/octicon-quote.svg';
 import octiconRepo from '../../public/img/svg/octicon-repo.svg';
 import octiconRepoForked from '../../public/img/svg/octicon-repo-forked.svg';
 import octiconRepoTemplate from '../../public/img/svg/octicon-repo-template.svg';
+import octiconRss from '../../public/img/svg/octicon-rss.svg';
+import octiconSearch from '../../public/img/svg/octicon-search.svg';
 import octiconSidebarCollapse from '../../public/img/svg/octicon-sidebar-collapse.svg';
 import octiconSidebarExpand from '../../public/img/svg/octicon-sidebar-expand.svg';
-import octiconTriangleDown from '../../public/img/svg/octicon-triangle-down.svg';
-import octiconX from '../../public/img/svg/octicon-x.svg';
-import octiconCheckCircleFill from '../../public/img/svg/octicon-check-circle-fill.svg';
-import octiconXCircleFill from '../../public/img/svg/octicon-x-circle-fill.svg';
 import octiconSkip from '../../public/img/svg/octicon-skip.svg';
-import octiconMeter from '../../public/img/svg/octicon-meter.svg';
-import octiconBlocked from '../../public/img/svg/octicon-blocked.svg';
-import octiconSync from '../../public/img/svg/octicon-sync.svg';
-import octiconFilter from '../../public/img/svg/octicon-filter.svg';
-import octiconPlus from '../../public/img/svg/octicon-plus.svg';
-import octiconSearch from '../../public/img/svg/octicon-search.svg';
-import octiconArchive from '../../public/img/svg/octicon-archive.svg';
 import octiconStar from '../../public/img/svg/octicon-star.svg';
-import giteaDoubleChevronLeft from '../../public/img/svg/gitea-double-chevron-left.svg';
-import giteaDoubleChevronRight from '../../public/img/svg/gitea-double-chevron-right.svg';
-import octiconChevronLeft from '../../public/img/svg/octicon-chevron-left.svg';
-import octiconOrganization from '../../public/img/svg/octicon-organization.svg';
+import octiconStrikethrough from '../../public/img/svg/octicon-strikethrough.svg';
+import octiconSync from '../../public/img/svg/octicon-sync.svg';
+import octiconTable from '../../public/img/svg/octicon-table.svg';
 import octiconTag from '../../public/img/svg/octicon-tag.svg';
-import octiconGitBranch from '../../public/img/svg/octicon-git-branch.svg';
-import octiconRss from '../../public/img/svg/octicon-rss.svg';
-import octiconCheckbox from '../../public/img/svg/octicon-checkbox.svg';
-import giteaEmptyCheckbox from '../../public/img/svg/gitea-empty-checkbox.svg';
+import octiconTriangleDown from '../../public/img/svg/octicon-triangle-down.svg';
+import octiconX from '../../public/img/svg/octicon-x.svg';
+import octiconXCircleFill from '../../public/img/svg/octicon-x-circle-fill.svg';
 
 const svgs = {
+  'gitea-double-chevron-left': giteaDoubleChevronLeft,
+  'gitea-double-chevron-right': giteaDoubleChevronRight,
+  'gitea-empty-checkbox': giteaEmptyCheckbox,
   'octicon-archive': octiconArchive,
   'octicon-blocked': octiconBlocked,
-  'octicon-checkbox': octiconCheckbox,
+  'octicon-bold': octiconBold,
   'octicon-check-circle-fill': octiconCheckCircleFill,
+  'octicon-checkbox': octiconCheckbox,
   'octicon-chevron-down': octiconChevronDown,
   'octicon-chevron-left': octiconChevronLeft,
   'octicon-chevron-right': octiconChevronRight,
   'octicon-clock': octiconClock,
+  'octicon-code': octiconCode,
   'octicon-copy': octiconCopy,
   'octicon-diff-added': octiconDiffAdded,
   'octicon-diff-modified': octiconDiffModified,
   'octicon-diff-removed': octiconDiffRemoved,
   'octicon-diff-renamed': octiconDiffRenamed,
-  'gitea-double-chevron-left': giteaDoubleChevronLeft,
-  'gitea-double-chevron-right': giteaDoubleChevronRight,
-  'gitea-empty-checkbox': giteaEmptyCheckbox,
   'octicon-file': octiconFile,
   'octicon-file-directory-fill': octiconFileDirectoryFill,
   'octicon-filter': octiconFilter,
   'octicon-git-branch': octiconGitBranch,
   'octicon-git-merge': octiconGitMerge,
   'octicon-git-pull-request': octiconGitPullRequest,
+  'octicon-heading': octiconHeading,
+  'octicon-horizontal-rule': octiconHorizontalRule,
+  'octicon-image': octiconImage,
   'octicon-issue-closed': octiconIssueClosed,
   'octicon-issue-opened': octiconIssueOpened,
+  'octicon-italic': octiconItalic,
   'octicon-kebab-horizontal': octiconKebabHorizontal,
   'octicon-link': octiconLink,
+  'octicon-list-ordered': octiconListOrdered,
+  'octicon-list-unordered': octiconListUnordered,
   'octicon-lock': octiconLock,
   'octicon-meter': octiconMeter,
   'octicon-milestone': octiconMilestone,
@@ -83,6 +102,7 @@ const svgs = {
   'octicon-play': octiconPlay,
   'octicon-plus': octiconPlus,
   'octicon-project': octiconProject,
+  'octicon-quote': octiconQuote,
   'octicon-repo': octiconRepo,
   'octicon-repo-forked': octiconRepoForked,
   'octicon-repo-template': octiconRepoTemplate,
@@ -92,7 +112,9 @@ const svgs = {
   'octicon-sidebar-expand': octiconSidebarExpand,
   'octicon-skip': octiconSkip,
   'octicon-star': octiconStar,
+  'octicon-strikethrough': octiconStrikethrough,
   'octicon-sync': octiconSync,
+  'octicon-table': octiconTable,
   'octicon-tag': octiconTag,
   'octicon-triangle-down': octiconTriangleDown,
   'octicon-x': octiconX,