- {{template "shared/combomarkdowneditor" (dict
+ {{template "shared/markdowneditor" (dict
"MarkdownPreviewUrl" (print .Repository.Link "/markup")
"MarkdownPreviewContext" .RepoLink
"TextareaName" "content"
diff --git a/templates/repo/issue/fields/textarea.tmpl b/templates/repo/issue/fields/textarea.tmpl
index 3ad69e1220622..55ec9e3b94fdd 100644
--- a/templates/repo/issue/fields/textarea.tmpl
+++ b/templates/repo/issue/fields/textarea.tmpl
@@ -1,18 +1,18 @@
{{$useMarkdownEditor := not .item.Attributes.render}}
-
+
{{template "repo/issue/fields/header" .}}
{{/* the real form element to provide the value */}}
{{if $useMarkdownEditor}}
- {{template "shared/combomarkdowneditor" (dict
+ {{template "shared/markdowneditor" (dict
"ContainerClasses" "tw-hidden"
"MarkdownPreviewUrl" (print .root.RepoLink "/markup")
"MarkdownPreviewContext" .root.RepoLink
"TextareaContent" .item.Attributes.value
"TextareaPlaceholder" .item.Attributes.placeholder
- "DropzoneParentContainer" ".combo-editor-dropzone"
+ "DropzoneParentContainer" ".editor-dropzone"
)}}
{{if .root.IsAttachmentEnabled}}
diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl
index c65b79dea70b8..054dce9c2ba92 100644
--- a/templates/repo/issue/view_content.tmpl
+++ b/templates/repo/issue/view_content.tmpl
@@ -146,7 +146,7 @@
- {{template "shared/combomarkdowneditor" (dict
+ {{template "shared/markdowneditor" (dict
"MarkdownPreviewUrl" (print .Repository.Link "/markup")
"MarkdownPreviewContext" .RepoLink
"TextareaName" "content"
diff --git a/templates/repo/release/new.tmpl b/templates/repo/release/new.tmpl
index c01f9a421b982..6834dfb19fbf1 100644
--- a/templates/repo/release/new.tmpl
+++ b/templates/repo/release/new.tmpl
@@ -49,7 +49,7 @@
- {{template "shared/combomarkdowneditor" (dict
+ {{template "shared/markdowneditor" (dict
"MarkdownPreviewUrl" (print .Repository.Link "/markup")
"MarkdownPreviewContext" .RepoLink
"TextareaName" "content"
diff --git a/templates/repo/wiki/new.tmpl b/templates/repo/wiki/new.tmpl
index 0f10e60c4f8fc..5918ebb212a56 100644
--- a/templates/repo/wiki/new.tmpl
+++ b/templates/repo/wiki/new.tmpl
@@ -22,7 +22,7 @@
{{if not .PageIsWikiEdit}}
{{$content = ctx.Locale.Tr "repo.wiki.welcome"}}
{{end}}
- {{template "shared/combomarkdowneditor" (dict
+ {{template "shared/markdowneditor" (dict
"MarkdownPreviewUrl" (print .Repository.Link "/markup")
"MarkdownPreviewContext" .RepoLink
"TextareaName" "content"
diff --git a/templates/shared/combomarkdowneditor.tmpl b/templates/shared/markdowneditor.tmpl
similarity index 91%
rename from templates/shared/combomarkdowneditor.tmpl
rename to templates/shared/markdowneditor.tmpl
index 96fcf04cef643..731ec3d58ea5c 100644
--- a/templates/shared/combomarkdowneditor.tmpl
+++ b/templates/shared/markdowneditor.tmpl
@@ -11,7 +11,7 @@ Template Attributes:
* DropzoneParentContainer: container for file upload (leave it empty if no upload)
* DisableAutosize: whether to disable automatic height resizing
*/}}
-
+
{{if .MarkdownPreviewUrl}}
diff --git a/web_src/css/codemirror/base.css b/web_src/css/codemirror/base.css
deleted file mode 100644
index aedf7d85608f4..0000000000000
--- a/web_src/css/codemirror/base.css
+++ /dev/null
@@ -1,49 +0,0 @@
-.ui .field:not(:last-child) .EasyMDEContainer .editor-statusbar {
- margin-bottom: -1em; /* when there is a statusbar, the "margin-bottom: 1em" of the "field" is not needed, because the statusbar is likely a blank line */
-}
-
-.EasyMDEContainer .CodeMirror {
- color: var(--color-input-text);
- background-color: var(--color-input-background);
- border-color: var(--color-secondary);
- font: 14px var(--fonts-monospace);
-}
-
-.EasyMDEContainer .CodeMirror.cm-s-default {
- border-radius: var(--border-radius);
- padding: 0 !important;
-}
-
-.EasyMDEContainer .CodeMirror.CodeMirror-fullscreen.CodeMirror-focused {
- border-right: 1px solid var(--color-primary) !important;
-}
-
-.CodeMirror-cursor {
- border-color: var(--color-caret) !important;
-}
-
-.CodeMirror .cm-comment {
- background: inherit !important;
-}
-
-.CodeMirror .CodeMirror-code {
- font: 14px var(--fonts-monospace);
-}
-
-.CodeMirror-selected {
- background: var(--color-primary-light-1) !important;
- color: var(--color-white) !important;
-}
-
-.CodeMirror-placeholder {
- color: var(--color-placeholder-text) !important;
- opacity: 1 !important;
-}
-
-.CodeMirror-focused {
- border-color: var(--color-primary) !important;
-}
-
-.CodeMirror :focus {
- outline: none;
-}
diff --git a/web_src/css/codemirror/dark.css b/web_src/css/codemirror/dark.css
deleted file mode 100644
index 8a20d1c004337..0000000000000
--- a/web_src/css/codemirror/dark.css
+++ /dev/null
@@ -1,106 +0,0 @@
-.CodeMirror.cm-s-default .cm-property,
-.CodeMirror.cm-s-paper .cm-property {
- color: #a0cc75;
-}
-
-.CodeMirror.cm-s-default .cm-header,
-.CodeMirror.cm-s-paper .cm-header {
- color: #9daccc;
-}
-
-.CodeMirror.cm-s-default .cm-quote,
-.CodeMirror.cm-s-paper .cm-quote {
- color: #009900;
-}
-
-.CodeMirror.cm-s-default .cm-keyword,
-.CodeMirror.cm-s-paper .cm-keyword {
- color: #cc8a61;
-}
-
-.CodeMirror.cm-s-default .cm-atom,
-.CodeMirror.cm-s-paper .cm-atom {
- color: #ef5e77;
-}
-
-.CodeMirror.cm-s-default .cm-number,
-.CodeMirror.cm-s-paper .cm-number {
- color: #ff5656;
-}
-
-.CodeMirror.cm-s-default .cm-def,
-.CodeMirror.cm-s-paper .cm-def {
- color: #e4e4e4;
-}
-
-.CodeMirror.cm-s-default .cm-variable-2,
-.CodeMirror.cm-s-paper .cm-variable-2 {
- color: #00bdbf;
-}
-
-.CodeMirror.cm-s-default .cm-variable-3,
-.CodeMirror.cm-s-paper .cm-variable-3 {
- color: #008855;
-}
-
-.CodeMirror.cm-s-default .cm-comment,
-.CodeMirror.cm-s-paper .cm-comment {
- color: #8e9ab3;
-}
-
-.CodeMirror.cm-s-default .cm-string,
-.CodeMirror.cm-s-paper .cm-string {
- color: #a77272;
-}
-
-.CodeMirror.cm-s-default .cm-string-2,
-.CodeMirror.cm-s-paper .cm-string-2 {
- color: #ff5500;
-}
-
-.CodeMirror.cm-s-default .cm-meta,
-.CodeMirror.cm-s-paper .cm-meta,
-.CodeMirror.cm-s-default .cm-qualifier,
-.CodeMirror.cm-s-paper .cm-qualifier {
- color: #ffb176;
-}
-
-.CodeMirror.cm-s-default .cm-builtin,
-.CodeMirror.cm-s-paper .cm-builtin {
- color: #b7c951;
-}
-
-.CodeMirror.cm-s-default .cm-bracket,
-.CodeMirror.cm-s-paper .cm-bracket {
- color: #999977;
-}
-
-.CodeMirror.cm-s-default .cm-tag,
-.CodeMirror.cm-s-paper .cm-tag {
- color: #f1d273;
-}
-
-.CodeMirror.cm-s-default .cm-attribute,
-.CodeMirror.cm-s-paper .cm-attribute {
- color: #bfcc70;
-}
-
-.CodeMirror.cm-s-default .cm-hr,
-.CodeMirror.cm-s-paper .cm-hr {
- color: #999999;
-}
-
-.CodeMirror.cm-s-default .cm-url,
-.CodeMirror.cm-s-paper .cm-url {
- color: #c5cfd0;
-}
-
-.CodeMirror.cm-s-default .cm-link,
-.CodeMirror.cm-s-paper .cm-link {
- color: #d8c792;
-}
-
-.CodeMirror.cm-s-default .cm-error,
-.CodeMirror.cm-s-paper .cm-error {
- color: #dbdbeb;
-}
diff --git a/web_src/css/codemirror/light.css b/web_src/css/codemirror/light.css
deleted file mode 100644
index aa89263bc1ce2..0000000000000
--- a/web_src/css/codemirror/light.css
+++ /dev/null
@@ -1 +0,0 @@
-/* Placeholder, there is no light theme, it uses CM defaults */
diff --git a/web_src/css/editor/fileeditor.css b/web_src/css/editor/fileeditor.css
index 444ee8c7e77ee..b97114ddb32f3 100644
--- a/web_src/css/editor/fileeditor.css
+++ b/web_src/css/editor/fileeditor.css
@@ -6,12 +6,6 @@
border: 0 !important;
}
-.repository.file.editor .tab[data-tab="write"] .CodeMirror {
- border-left: 0;
- border-right: 0;
- border-bottom: 0;
-}
-
.repo-editor-header {
display: flex;
margin: 1rem 0;
diff --git a/web_src/css/editor/combomarkdowneditor.css b/web_src/css/editor/markdowneditor.css
similarity index 65%
rename from web_src/css/editor/combomarkdowneditor.css
rename to web_src/css/editor/markdowneditor.css
index 8a2f4ea416019..be06b0c0aab7c 100644
--- a/web_src/css/editor/combomarkdowneditor.css
+++ b/web_src/css/editor/markdowneditor.css
@@ -1,8 +1,8 @@
-.combo-markdown-editor {
+.markdown-editor {
width: 100%;
}
-.combo-markdown-editor markdown-toolbar {
+.markdown-editor markdown-toolbar {
cursor: default;
display: flex;
align-items: center;
@@ -11,16 +11,16 @@
flex-wrap: wrap;
}
-.combo-markdown-editor .markdown-toolbar-group {
+.markdown-editor .markdown-toolbar-group {
display: flex;
}
-.combo-markdown-editor .markdown-toolbar-group:last-child {
+.markdown-editor .markdown-toolbar-group:last-child {
flex: 1;
justify-content: flex-end;
}
-.combo-markdown-editor .markdown-toolbar-button {
+.markdown-editor .markdown-toolbar-button {
border: none;
background: none;
user-select: none;
@@ -29,47 +29,18 @@
color: var(--color-text);
}
-.combo-markdown-editor .markdown-toolbar-button:hover {
+.markdown-editor .markdown-toolbar-button:hover {
color: var(--color-primary);
}
-.ui.form .combo-markdown-editor textarea.markdown-text-editor,
-.combo-markdown-editor textarea.markdown-text-editor {
+.ui.form .markdown-editor textarea.markdown-text-editor,
+.markdown-editor textarea.markdown-text-editor {
display: block;
width: 100%;
max-height: calc(100vh - var(--min-height-textarea));
resize: vertical;
}
-.combo-markdown-editor .CodeMirror-scroll {
- max-height: calc(100vh - var(--min-height-textarea));
-}
-
-/* use the same styles as markup/content.css */
-.combo-markdown-editor .CodeMirror-scroll .cm-header-1 {
- font-size: 2em;
-}
-
-.combo-markdown-editor .CodeMirror-scroll .cm-header-2 {
- font-size: 1.5em;
-}
-
-.combo-markdown-editor .CodeMirror-scroll .cm-header-3 {
- font-size: 1.25em;
-}
-
-.combo-markdown-editor .CodeMirror-scroll .cm-header-4 {
- font-size: 1em;
-}
-
-.combo-markdown-editor .CodeMirror-scroll .cm-header-5 {
- font-size: 0.875em;
-}
-
-.combo-markdown-editor .CodeMirror-scroll .cm-header-6 {
- font-size: 0.85em;
-}
-
text-expander {
display: block;
position: relative;
diff --git a/web_src/css/index.css b/web_src/css/index.css
index 40b1d3c8811d3..438dbc4e5f1ed 100644
--- a/web_src/css/index.css
+++ b/web_src/css/index.css
@@ -36,7 +36,6 @@
@import "./features/imagediff.css";
@import "./features/codeeditor.css";
@import "./features/projects.css";
-@import "./features/tribute.css";
@import "./features/console.css";
@import "./markup/content.css";
@@ -44,7 +43,6 @@
@import "./markup/asciicast.css";
@import "./chroma/base.css";
-@import "./codemirror/base.css";
@import "./font_i18n.css";
@import "./base.css";
@import "./home.css";
@@ -62,7 +60,7 @@
@import "./repo/header.css";
@import "./editor/fileeditor.css";
-@import "./editor/combomarkdowneditor.css";
+@import "./editor/markdowneditor.css";
@import "./org.css";
@import "./user.css";
diff --git a/web_src/css/review.css b/web_src/css/review.css
index 7534500e6fbce..32d31d63e3180 100644
--- a/web_src/css/review.css
+++ b/web_src/css/review.css
@@ -220,15 +220,8 @@
border: none;
}
-/* See the comment of createCommentEasyMDE() for the review editor */
-/* EasyMDE's options can not handle minHeight & maxHeight together correctly, we have to set minHeight in JS code */
-.review-box-panel .CodeMirror-scroll {
- min-height: 80px;
- max-height: calc(100vh - 360px);
-}
-
-.review-box-panel .combo-markdown-editor {
- width: 730px; /* this width matches current EasyMDE's toolbar's width */
+.review-box-panel .markdown-editor {
+ width: 730px;
max-width: calc(100vw - 70px); /* leave enough space on left, and align the page content */
}
diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css
index 626590ca5447b..2f7c786b7c217 100644
--- a/web_src/css/themes/theme-gitea-dark.css
+++ b/web_src/css/themes/theme-gitea-dark.css
@@ -1,5 +1,4 @@
@import "../chroma/dark.css";
-@import "../codemirror/dark.css";
:root {
--is-dark-theme: true;
diff --git a/web_src/css/themes/theme-gitea-light.css b/web_src/css/themes/theme-gitea-light.css
index f6913fbe22af4..3aed35a844739 100644
--- a/web_src/css/themes/theme-gitea-light.css
+++ b/web_src/css/themes/theme-gitea-light.css
@@ -1,5 +1,4 @@
@import "../chroma/light.css";
-@import "../codemirror/light.css";
:root {
--is-dark-theme: false;
diff --git a/web_src/js/features/comp/EasyMDEToolbarActions.js b/web_src/js/features/comp/EasyMDEToolbarActions.js
deleted file mode 100644
index c97d683704b1c..0000000000000
--- a/web_src/js/features/comp/EasyMDEToolbarActions.js
+++ /dev/null
@@ -1,152 +0,0 @@
-import {svg} from '../../svg.js';
-
-export function easyMDEToolbarActions(EasyMDE, editor) {
- const actions = {
- '|': '|',
- 'heading-1': {
- action: EasyMDE.toggleHeading1,
- icon: svg('octicon-heading'),
- title: 'Heading 1',
- },
- 'heading-2': {
- action: EasyMDE.toggleHeading2,
- icon: svg('octicon-heading'),
- title: 'Heading 2',
- },
- 'heading-3': {
- action: EasyMDE.toggleHeading3,
- icon: svg('octicon-heading'),
- title: 'Heading 3',
- },
- 'heading-smaller': {
- action: EasyMDE.toggleHeadingSmaller,
- icon: svg('octicon-heading'),
- title: 'Decrease Heading',
- },
- 'heading-bigger': {
- action: EasyMDE.toggleHeadingBigger,
- icon: svg('octicon-heading'),
- title: 'Increase 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 [key, value] of Object.entries(actions)) {
- if (typeof value !== 'string') {
- value.name = key;
- }
- }
-
- return actions;
-}
diff --git a/web_src/js/features/comp/ComboMarkdownEditor.js b/web_src/js/features/comp/MarkdownEditor.js
similarity index 53%
rename from web_src/js/features/comp/ComboMarkdownEditor.js
rename to web_src/js/features/comp/MarkdownEditor.js
index d3fab375a9396..410ef35e0305f 100644
--- a/web_src/js/features/comp/ComboMarkdownEditor.js
+++ b/web_src/js/features/comp/MarkdownEditor.js
@@ -1,14 +1,10 @@
import '@github/markdown-toolbar-element';
import '@github/text-expander-element';
import $ from 'jquery';
-import {attachTribute} from '../tribute.js';
-import {hideElem, showElem, autosize, isElemVisible} from '../../utils/dom.js';
-import {initEasyMDEPaste, initTextareaPaste} from './Paste.js';
-import {handleGlobalEnterQuickSubmit} from './QuickSubmit.js';
+import {autosize} from '../../utils/dom.js';
+import {initTextareaPaste} from './Paste.js';
import {renderPreviewPanelContent} from '../repo-editor.js';
-import {easyMDEToolbarActions} from './EasyMDEToolbarActions.js';
import {initTextExpander} from './TextExpander.js';
-import {showErrorToast} from '../../modules/toast.js';
import {POST} from '../../modules/fetch.js';
let elementIdCounter = 0;
@@ -19,37 +15,27 @@ let elementIdCounter = 0;
* @returns {boolean} returns true if validation succeeded.
*/
export function validateTextareaNonEmpty(textarea) {
- // When using EasyMDE, the original edit area HTML element is hidden, breaking HTML5 input validation.
- // The workaround (https://github.com/sparksuite/simplemde-markdown-editor/issues/324) doesn't work with contenteditable, so we just show an alert.
if (!textarea.value) {
- if (isElemVisible(textarea)) {
- textarea.required = true;
- const form = textarea.closest('form');
- form?.reportValidity();
- } else {
- // The alert won't hurt users too much, because we are dropping the EasyMDE and the check only occurs in a few places.
- showErrorToast('Require non-empty content');
- }
+ textarea.required = true;
+ const form = textarea.closest('form');
+ form?.reportValidity();
return false;
}
return true;
}
-class ComboMarkdownEditor {
+class MarkdownEditor {
constructor(container, options = {}) {
- container._giteaComboMarkdownEditor = this;
+ container._giteaMarkdownEditor = this;
this.options = options;
this.container = container;
}
async init() {
- this.prepareEasyMDEToolbarActions();
this.setupContainer();
this.setupTab();
this.setupDropzone();
this.setupTextarea();
-
- await this.switchToUserPreference();
}
applyEditorHeights(el, heights) {
@@ -66,7 +52,7 @@ class ComboMarkdownEditor {
setupTextarea() {
this.textarea = this.container.querySelector('.markdown-text-editor');
- this.textarea._giteaComboMarkdownEditor = this;
+ this.textarea._giteaMarkdownEditor = this;
this.textarea.id = `_combo_markdown_editor_${String(elementIdCounter++)}`;
this.textarea.addEventListener('input', (e) => this.options?.onContentChanged?.(this, e));
this.applyEditorHeights(this.textarea, this.options.editorHeights);
@@ -111,13 +97,6 @@ class ComboMarkdownEditor {
monospaceButton.setAttribute('aria-checked', String(enabled));
});
- const easymdeButton = this.container.querySelector('.markdown-switch-easymde');
- easymdeButton?.addEventListener('click', async (e) => {
- e.preventDefault();
- this.userPreferredEditor = 'easymde';
- await this.switchToEasyMDE();
- });
-
if (this.dropzone) {
initTextareaPaste(this.textarea, this.dropzone);
}
@@ -170,148 +149,41 @@ 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', '|', 'gitea-switch-to-textarea',
- ];
- }
-
- parseEasyMDEToolbar(EasyMDE, actions) {
- this.easyMDEToolbarActions = this.easyMDEToolbarActions || easyMDEToolbarActions(EasyMDE, this);
- const processed = [];
- for (const action of actions) {
- const actionButton = this.easyMDEToolbarActions[action];
- if (!actionButton) throw new Error(`Unknown EasyMDE toolbar action ${action}`);
- processed.push(actionButton);
- }
- return processed;
- }
-
- async switchToUserPreference() {
- if (this.userPreferredEditor === 'easymde') {
- await this.switchToEasyMDE();
- } else {
- this.switchToTextarea();
- }
- }
-
- switchToTextarea() {
- if (!this.easyMDE) return;
- showElem(this.textareaMarkdownToolbar);
- if (this.easyMDE) {
- this.easyMDE.toTextArea();
- this.easyMDE = null;
- }
- }
-
- async switchToEasyMDE() {
- if (this.easyMDE) return;
- // 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');
- const easyMDEOpt = {
- autoDownloadFontAwesome: false,
- element: this.textarea,
- forceSync: true,
- renderingConfig: {singleLineBreaks: false},
- indentWithTabs: false,
- tabSize: 4,
- spellChecker: false,
- inputStyle: 'contenteditable', // nativeSpellcheck requires contenteditable
- nativeSpellcheck: true,
- ...this.options.easyMDEOptions,
- };
- 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)});
- this.easyMDE.codemirror.setOption('extraKeys', {
- 'Cmd-Enter': (cm) => handleGlobalEnterQuickSubmit(cm.getTextArea()),
- 'Ctrl-Enter': (cm) => handleGlobalEnterQuickSubmit(cm.getTextArea()),
- Enter: (cm) => {
- const tributeContainer = document.querySelector('.tribute-container');
- if (!tributeContainer || tributeContainer.style.display === 'none') {
- cm.execCommand('newlineAndIndent');
- }
- },
- Up: (cm) => {
- const tributeContainer = document.querySelector('.tribute-container');
- if (!tributeContainer || tributeContainer.style.display === 'none') {
- return cm.execCommand('goLineUp');
- }
- },
- Down: (cm) => {
- const tributeContainer = document.querySelector('.tribute-container');
- if (!tributeContainer || tributeContainer.style.display === 'none') {
- return cm.execCommand('goLineDown');
- }
- },
- });
- this.applyEditorHeights(this.container.querySelector('.CodeMirror-scroll'), this.options.editorHeights);
- await attachTribute(this.easyMDE.codemirror.getInputField(), {mentions: true, emoji: true});
- initEasyMDEPaste(this.easyMDE, this.dropzone);
- hideElem(this.textareaMarkdownToolbar);
- }
-
value(v = undefined) {
if (v === undefined) {
- if (this.easyMDE) {
- return this.easyMDE.value();
- }
return this.textarea.value;
}
- if (this.easyMDE) {
- this.easyMDE.value(v);
- } else {
- this.textarea.value = v;
- }
+ this.textarea.value = v;
this.textareaAutosize?.resizeToFit();
}
focus() {
- if (this.easyMDE) {
- this.easyMDE.codemirror.focus();
- } else {
- this.textarea.focus();
- }
+ this.textarea.focus();
}
moveCursorToEnd() {
this.textarea.focus();
this.textarea.setSelectionRange(this.textarea.value.length, this.textarea.value.length);
- if (this.easyMDE) {
- this.easyMDE.codemirror.focus();
- this.easyMDE.codemirror.setCursor(this.easyMDE.codemirror.lineCount(), 0);
- }
}
-
- get userPreferredEditor() {
- return window.localStorage.getItem(`markdown-editor-${this.options.useScene ?? 'default'}`);
- }
- set userPreferredEditor(s) {
- window.localStorage.setItem(`markdown-editor-${this.options.useScene ?? 'default'}`, s);
- }
-}
-
-export function getComboMarkdownEditor(el) {
- if (el instanceof $) el = el[0];
- return el?._giteaComboMarkdownEditor;
}
-export async function initComboMarkdownEditor(container, options = {}) {
+export async function initMarkdownEditor(container, options = {}) {
if (container instanceof $) {
if (container.length !== 1) {
- throw new Error('initComboMarkdownEditor: container must be a single element');
+ throw new Error('initMarkdownEditor: container must be a single element');
}
container = container[0];
}
if (!container) {
- throw new Error('initComboMarkdownEditor: container is null');
+ throw new Error('initMarkdownEditor: container is null');
}
- const editor = new ComboMarkdownEditor(container, options);
+ const editor = new MarkdownEditor(container, options);
await editor.init();
return editor;
}
+
+export function getMarkdownEditor(el) {
+ if (el instanceof $) el = el[0];
+ return el?._giteaMarkdownEditor;
+}
diff --git a/web_src/js/features/comp/Paste.js b/web_src/js/features/comp/Paste.js
index b26296d1fc967..a2484ba351c3e 100644
--- a/web_src/js/features/comp/Paste.js
+++ b/web_src/js/features/comp/Paste.js
@@ -50,38 +50,6 @@ class TextareaEditor {
}
}
-class CodeMirrorEditor {
- constructor(editor) {
- this.editor = editor;
- }
-
- insertPlaceholder(value) {
- const editor = this.editor;
- const startPoint = editor.getCursor('start');
- const endPoint = editor.getCursor('end');
- editor.replaceSelection(value);
- endPoint.ch = startPoint.ch + value.length;
- editor.setSelection(startPoint, endPoint);
- editor.focus();
- triggerEditorContentChanged(editor.getTextArea());
- }
-
- replacePlaceholder(oldVal, newVal) {
- const editor = this.editor;
- const endPoint = editor.getCursor('end');
- if (editor.getSelection() === oldVal) {
- editor.replaceSelection(newVal);
- } else {
- editor.setValue(editor.getValue().replace(oldVal, newVal));
- }
- endPoint.ch -= oldVal.length;
- endPoint.ch += newVal.length;
- editor.setSelection(endPoint, endPoint);
- editor.focus();
- triggerEditorContentChanged(editor.getTextArea());
- }
-}
-
async function handleClipboardImages(editor, dropzone, images, e) {
const uploadUrl = dropzone.getAttribute('data-upload-url');
const filesContainer = dropzone.querySelector('.files');
@@ -133,15 +101,6 @@ function handleClipboardText(textarea, text, e) {
}
}
-export function initEasyMDEPaste(easyMDE, dropzone) {
- easyMDE.codemirror.on('paste', (_, e) => {
- const {images} = getPastedContent(e);
- if (images.length) {
- handleClipboardImages(new CodeMirrorEditor(easyMDE.codemirror), dropzone, images, e);
- }
- });
-}
-
export function initTextareaPaste(textarea, dropzone) {
textarea.addEventListener('paste', (e) => {
const {images, text} = getPastedContent(e);
diff --git a/web_src/js/features/emoji.js b/web_src/js/features/emoji.js
index 032a3efe8aa6a..cdeb527e0667e 100644
--- a/web_src/js/features/emoji.js
+++ b/web_src/js/features/emoji.js
@@ -1,15 +1,13 @@
import emojis from '../../../assets/emoji.json';
-const {assetUrlPrefix, customEmojis} = window.config;
-
-const tempMap = {...customEmojis};
+const tempMap = {...window.config.customEmojis};
for (const {emoji, aliases} of emojis) {
for (const alias of aliases || []) {
tempMap[alias] = emoji;
}
}
-export const emojiKeys = Object.keys(tempMap).sort((a, b) => {
+const emojiKeys = Object.keys(tempMap).sort((a, b) => {
if (a === '+1' || a === '-1') return -1;
if (b === '+1' || b === '-1') return 1;
return a.localeCompare(b);
@@ -20,18 +18,6 @@ for (const key of emojiKeys) {
emojiMap[key] = tempMap[key];
}
-// retrieve HTML for given emoji name
-export function emojiHTML(name) {
- let inner;
- if (Object.hasOwn(customEmojis, name)) {
- inner = `
`;
- } else {
- inner = emojiString(name);
- }
-
- return `${inner}`;
-}
-
// retrieve string for given emoji name
export function emojiString(name) {
return emojiMap[name] || `:${name}:`;
diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js
index b2e8ec4866f98..16f8c081583bb 100644
--- a/web_src/js/features/repo-diff.js
+++ b/web_src/js/features/repo-diff.js
@@ -3,7 +3,7 @@ import {initCompReactionSelector} from './comp/ReactionSelector.js';
import {initRepoIssueContentHistory} from './repo-issue-content.js';
import {initDiffFileTree} from './repo-diff-filetree.js';
import {initDiffCommitSelect} from './repo-diff-commitselect.js';
-import {validateTextareaNonEmpty} from './comp/ComboMarkdownEditor.js';
+import {validateTextareaNonEmpty} from './comp/MarkdownEditor.js';
import {initViewedCheckboxListenerFor, countAndUpdateViewedFiles, initExpandAndCollapseFilesButton} from './pull-view-file.js';
import {initImageDiff} from './imagediff.js';
import {showErrorToast} from '../modules/toast.js';
diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js
index 0d326aae581fd..031c861ff9096 100644
--- a/web_src/js/features/repo-issue.js
+++ b/web_src/js/features/repo-issue.js
@@ -3,7 +3,7 @@ import {htmlEscape} from 'escape-goat';
import {showTemporaryTooltip, createTippy} from '../modules/tippy.js';
import {hideElem, showElem, toggleElem} from '../utils/dom.js';
import {setFileFolding} from './file-fold.js';
-import {getComboMarkdownEditor, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js';
+import {getMarkdownEditor, initMarkdownEditor} from './comp/MarkdownEditor.js';
import {toAbsoluteUrl} from '../utils.js';
import {initDropzone} from './common-global.js';
import {POST, GET} from '../modules/fetch.js';
@@ -414,14 +414,14 @@ export async function handleReply($el) {
showElem($form);
const $textarea = $form.find('textarea');
- let editor = getComboMarkdownEditor($textarea);
+ let editor = getMarkdownEditor($textarea);
if (!editor) {
// FIXME: the initialization of the dropzone is not consistent.
// When the page is loaded, the dropzone is initialized by initGlobalDropzone, but the editor is not initialized.
// When the form is submitted and partially reload, none of them is initialized.
const dropzone = $form.find('.dropzone')[0];
if (!dropzone.dropzone) initDropzone(dropzone);
- editor = await initComboMarkdownEditor($form.find('.combo-markdown-editor'));
+ editor = await initMarkdownEditor($form.find('.markdown-editor'));
}
editor.focus();
return editor;
@@ -491,7 +491,7 @@ export function initRepoPullRequestReview() {
const $reviewBox = $('.review-box-panel');
if ($reviewBox.length === 1) {
- const _promise = initComboMarkdownEditor($reviewBox.find('.combo-markdown-editor'));
+ const _promise = initMarkdownEditor($reviewBox.find('.markdown-editor'));
}
// The following part is only for diff views
@@ -555,7 +555,7 @@ export function initRepoPullRequestReview() {
$td.find("input[name='path']").val(path);
initDropzone($td.find('.dropzone')[0]);
- const editor = await initComboMarkdownEditor($td.find('.combo-markdown-editor'));
+ const editor = await initMarkdownEditor($td.find('.markdown-editor'));
editor.focus();
} catch (error) {
console.error(error);
@@ -696,20 +696,20 @@ export function initSingleCommentEditor($commentForm) {
statusButton.textContent = statusText;
};
}
- initComboMarkdownEditor($commentForm.find('.combo-markdown-editor'), opts);
+ initMarkdownEditor($commentForm.find('.markdown-editor'), opts);
}
export function initIssueTemplateCommentEditors($commentForm) {
// pages:
// * new issue with issue template
- const $comboFields = $commentForm.find('.combo-editor-dropzone');
+ const $comboFields = $commentForm.find('.editor-dropzone');
const initCombo = async ($combo) => {
const $dropzoneContainer = $combo.find('.form-field-dropzone');
const $formField = $combo.find('.form-field-real');
- const $markdownEditor = $combo.find('.combo-markdown-editor');
+ const $markdownEditor = $combo.find('.markdown-editor');
- const editor = await initComboMarkdownEditor($markdownEditor, {
+ const editor = await initMarkdownEditor($markdownEditor, {
onContentChanged: (editor) => {
$formField.val(editor.value());
},
@@ -717,9 +717,9 @@ export function initIssueTemplateCommentEditors($commentForm) {
$formField.on('focus', async () => {
// deactivate all markdown editors
- showElem($commentForm.find('.combo-editor-dropzone .form-field-real'));
- hideElem($commentForm.find('.combo-editor-dropzone .combo-markdown-editor'));
- hideElem($commentForm.find('.combo-editor-dropzone .form-field-dropzone'));
+ showElem($commentForm.find('.editor-dropzone .form-field-real'));
+ hideElem($commentForm.find('.editor-dropzone .markdown-editor'));
+ hideElem($commentForm.find('.editor-dropzone .form-field-dropzone'));
// activate this markdown editor
hideElem($formField);
diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js
index 34320de1deb1a..cd447473c62df 100644
--- a/web_src/js/features/repo-legacy.js
+++ b/web_src/js/features/repo-legacy.js
@@ -22,7 +22,7 @@ import {initRepoSettingBranches} from './repo-settings.js';
import {initRepoPullRequestMergeForm} from './repo-issue-pr-form.js';
import {initRepoPullRequestCommitStatus} from './repo-issue-pr-status.js';
import {hideElem, showElem} from '../utils/dom.js';
-import {getComboMarkdownEditor, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js';
+import {getMarkdownEditor, initMarkdownEditor} from './comp/MarkdownEditor.js';
import {attachRefIssueContextPopup} from './contextpopup.js';
import {POST, GET} from '../modules/fetch.js';
@@ -52,10 +52,10 @@ export function initRepoCommentForm() {
const $commentForm = $('.comment.form');
if (!$commentForm.length) return;
- if ($commentForm.find('.field.combo-editor-dropzone').length) {
- // at the moment, if a form has multiple combo-markdown-editors, it must be an issue template form
+ if ($commentForm.find('.field.editor-dropzone').length) {
+ // at the moment, if a form has multiple markdown-editors, it must be an issue template form
initIssueTemplateCommentEditors($commentForm);
- } else if ($commentForm.find('.combo-markdown-editor').length) {
+ } else if ($commentForm.find('.markdown-editor').length) {
// it's quite unclear about the "comment form" elements, sometimes it's for issue comment, sometimes it's for file editor/uploader message
initSingleCommentEditor($commentForm);
}
@@ -324,7 +324,7 @@ async function onEditContent(event) {
const renderContent = segment.querySelector('.render-content');
const rawContent = segment.querySelector('.raw-content');
- let comboMarkdownEditor;
+ let markdownEditor;
/**
* @param {HTMLElement} dropzone
@@ -426,7 +426,7 @@ async function onEditContent(event) {
try {
const params = new URLSearchParams({
- content: comboMarkdownEditor.value(),
+ content: markdownEditor.value(),
context: editContentZone.getAttribute('data-context'),
});
for (const file of dz.files) params.append('files[]', file.uuid);
@@ -438,7 +438,7 @@ async function onEditContent(event) {
rawContent.textContent = '';
} else {
renderContent.innerHTML = data.content;
- rawContent.textContent = comboMarkdownEditor.value();
+ rawContent.textContent = markdownEditor.value();
const refIssues = renderContent.querySelectorAll('p .ref-issue');
attachRefIssueContextPopup(refIssues);
}
@@ -465,7 +465,7 @@ async function onEditContent(event) {
if (!editContentZone.innerHTML) {
editContentZone.innerHTML = document.getElementById('issue-comment-editor-template').innerHTML;
- comboMarkdownEditor = await initComboMarkdownEditor(editContentZone.querySelector('.combo-markdown-editor'));
+ markdownEditor = await initMarkdownEditor(editContentZone.querySelector('.markdown-editor'));
const dropzone = editContentZone.querySelector('.dropzone');
const dz = await setupDropzone(dropzone);
@@ -478,16 +478,16 @@ async function onEditContent(event) {
saveAndRefresh(dz);
});
} else {
- comboMarkdownEditor = getComboMarkdownEditor(editContentZone.querySelector('.combo-markdown-editor'));
+ markdownEditor = getMarkdownEditor(editContentZone.querySelector('.markdown-editor'));
}
// Show write/preview tab and copy raw content as needed
showElem(editContentZone);
hideElem(renderContent);
- if (!comboMarkdownEditor.value()) {
- comboMarkdownEditor.value(rawContent.textContent);
+ if (!markdownEditor.value()) {
+ markdownEditor.value(rawContent.textContent);
}
- comboMarkdownEditor.focus();
+ markdownEditor.focus();
}
export function initRepository() {
@@ -610,7 +610,7 @@ function initRepoIssueCommentEdit() {
editor = await handleReply($replyBtn);
} else {
// for normal issue/comment page
- editor = getComboMarkdownEditor($('#comment-form .combo-markdown-editor'));
+ editor = getMarkdownEditor($('#comment-form .markdown-editor'));
}
if (editor) {
if (editor.value()) {
diff --git a/web_src/js/features/repo-release.js b/web_src/js/features/repo-release.js
index f3cfa7441815b..5fb0515c076d1 100644
--- a/web_src/js/features/repo-release.js
+++ b/web_src/js/features/repo-release.js
@@ -1,5 +1,5 @@
import {hideElem, showElem} from '../utils/dom.js';
-import {initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js';
+import {initMarkdownEditor} from './comp/MarkdownEditor.js';
export function initRepoRelease() {
document.addEventListener('click', (e) => {
@@ -50,9 +50,9 @@ function initTagNameEditor() {
}
function initRepoReleaseEditor() {
- const editor = document.querySelector('.repository.new.release .combo-markdown-editor');
+ const editor = document.querySelector('.repository.new.release .markdown-editor');
if (!editor) {
return;
}
- initComboMarkdownEditor(editor);
+ initMarkdownEditor(editor);
}
diff --git a/web_src/js/features/repo-wiki.js b/web_src/js/features/repo-wiki.js
index 03a2c68c5a973..09b6b312b2f08 100644
--- a/web_src/js/features/repo-wiki.js
+++ b/web_src/js/features/repo-wiki.js
@@ -1,71 +1,11 @@
-import {initMarkupContent} from '../markup/content.js';
-import {validateTextareaNonEmpty, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js';
+import {validateTextareaNonEmpty} from './comp/MarkdownEditor.js';
import {fomanticMobileScreen} from '../modules/fomantic.js';
-import {POST} from '../modules/fetch.js';
async function initRepoWikiFormEditor() {
- const editArea = document.querySelector('.repository.wiki .combo-markdown-editor textarea');
+ const editArea = document.querySelector('.repository.wiki .markdown-editor textarea');
if (!editArea) return;
- const form = document.querySelector('.repository.wiki.new .ui.form');
- const editorContainer = form.querySelector('.combo-markdown-editor');
- let editor;
-
- let renderRequesting = false;
- let lastContent;
- const renderEasyMDEPreview = async function () {
- if (renderRequesting) return;
-
- const previewFull = editorContainer.querySelector('.EasyMDEContainer .editor-preview-active');
- const previewSide = editorContainer.querySelector('.EasyMDEContainer .editor-preview-active-side');
- const previewTarget = previewSide || previewFull;
- const newContent = editArea.value;
- if (editor && previewTarget && lastContent !== newContent) {
- renderRequesting = true;
- const formData = new FormData();
- formData.append('mode', editor.previewMode);
- formData.append('context', editor.previewContext);
- formData.append('text', newContent);
- formData.append('wiki', editor.previewWiki);
- try {
- const response = await POST(editor.previewUrl, {data: formData});
- const data = await response.text();
- lastContent = newContent;
- previewTarget.innerHTML = `
`;
- } else {
- inner = emojiString(name);
- }
-
- return `${inner}`;
-}
-
// retrieve string for given emoji name
export function emojiString(name) {
return emojiMap[name] || `:${name}:`;
diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js
index b2e8ec4866f98..16f8c081583bb 100644
--- a/web_src/js/features/repo-diff.js
+++ b/web_src/js/features/repo-diff.js
@@ -3,7 +3,7 @@ import {initCompReactionSelector} from './comp/ReactionSelector.js';
import {initRepoIssueContentHistory} from './repo-issue-content.js';
import {initDiffFileTree} from './repo-diff-filetree.js';
import {initDiffCommitSelect} from './repo-diff-commitselect.js';
-import {validateTextareaNonEmpty} from './comp/ComboMarkdownEditor.js';
+import {validateTextareaNonEmpty} from './comp/MarkdownEditor.js';
import {initViewedCheckboxListenerFor, countAndUpdateViewedFiles, initExpandAndCollapseFilesButton} from './pull-view-file.js';
import {initImageDiff} from './imagediff.js';
import {showErrorToast} from '../modules/toast.js';
diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js
index 0d326aae581fd..031c861ff9096 100644
--- a/web_src/js/features/repo-issue.js
+++ b/web_src/js/features/repo-issue.js
@@ -3,7 +3,7 @@ import {htmlEscape} from 'escape-goat';
import {showTemporaryTooltip, createTippy} from '../modules/tippy.js';
import {hideElem, showElem, toggleElem} from '../utils/dom.js';
import {setFileFolding} from './file-fold.js';
-import {getComboMarkdownEditor, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js';
+import {getMarkdownEditor, initMarkdownEditor} from './comp/MarkdownEditor.js';
import {toAbsoluteUrl} from '../utils.js';
import {initDropzone} from './common-global.js';
import {POST, GET} from '../modules/fetch.js';
@@ -414,14 +414,14 @@ export async function handleReply($el) {
showElem($form);
const $textarea = $form.find('textarea');
- let editor = getComboMarkdownEditor($textarea);
+ let editor = getMarkdownEditor($textarea);
if (!editor) {
// FIXME: the initialization of the dropzone is not consistent.
// When the page is loaded, the dropzone is initialized by initGlobalDropzone, but the editor is not initialized.
// When the form is submitted and partially reload, none of them is initialized.
const dropzone = $form.find('.dropzone')[0];
if (!dropzone.dropzone) initDropzone(dropzone);
- editor = await initComboMarkdownEditor($form.find('.combo-markdown-editor'));
+ editor = await initMarkdownEditor($form.find('.markdown-editor'));
}
editor.focus();
return editor;
@@ -491,7 +491,7 @@ export function initRepoPullRequestReview() {
const $reviewBox = $('.review-box-panel');
if ($reviewBox.length === 1) {
- const _promise = initComboMarkdownEditor($reviewBox.find('.combo-markdown-editor'));
+ const _promise = initMarkdownEditor($reviewBox.find('.markdown-editor'));
}
// The following part is only for diff views
@@ -555,7 +555,7 @@ export function initRepoPullRequestReview() {
$td.find("input[name='path']").val(path);
initDropzone($td.find('.dropzone')[0]);
- const editor = await initComboMarkdownEditor($td.find('.combo-markdown-editor'));
+ const editor = await initMarkdownEditor($td.find('.markdown-editor'));
editor.focus();
} catch (error) {
console.error(error);
@@ -696,20 +696,20 @@ export function initSingleCommentEditor($commentForm) {
statusButton.textContent = statusText;
};
}
- initComboMarkdownEditor($commentForm.find('.combo-markdown-editor'), opts);
+ initMarkdownEditor($commentForm.find('.markdown-editor'), opts);
}
export function initIssueTemplateCommentEditors($commentForm) {
// pages:
// * new issue with issue template
- const $comboFields = $commentForm.find('.combo-editor-dropzone');
+ const $comboFields = $commentForm.find('.editor-dropzone');
const initCombo = async ($combo) => {
const $dropzoneContainer = $combo.find('.form-field-dropzone');
const $formField = $combo.find('.form-field-real');
- const $markdownEditor = $combo.find('.combo-markdown-editor');
+ const $markdownEditor = $combo.find('.markdown-editor');
- const editor = await initComboMarkdownEditor($markdownEditor, {
+ const editor = await initMarkdownEditor($markdownEditor, {
onContentChanged: (editor) => {
$formField.val(editor.value());
},
@@ -717,9 +717,9 @@ export function initIssueTemplateCommentEditors($commentForm) {
$formField.on('focus', async () => {
// deactivate all markdown editors
- showElem($commentForm.find('.combo-editor-dropzone .form-field-real'));
- hideElem($commentForm.find('.combo-editor-dropzone .combo-markdown-editor'));
- hideElem($commentForm.find('.combo-editor-dropzone .form-field-dropzone'));
+ showElem($commentForm.find('.editor-dropzone .form-field-real'));
+ hideElem($commentForm.find('.editor-dropzone .markdown-editor'));
+ hideElem($commentForm.find('.editor-dropzone .form-field-dropzone'));
// activate this markdown editor
hideElem($formField);
diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js
index 34320de1deb1a..cd447473c62df 100644
--- a/web_src/js/features/repo-legacy.js
+++ b/web_src/js/features/repo-legacy.js
@@ -22,7 +22,7 @@ import {initRepoSettingBranches} from './repo-settings.js';
import {initRepoPullRequestMergeForm} from './repo-issue-pr-form.js';
import {initRepoPullRequestCommitStatus} from './repo-issue-pr-status.js';
import {hideElem, showElem} from '../utils/dom.js';
-import {getComboMarkdownEditor, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js';
+import {getMarkdownEditor, initMarkdownEditor} from './comp/MarkdownEditor.js';
import {attachRefIssueContextPopup} from './contextpopup.js';
import {POST, GET} from '../modules/fetch.js';
@@ -52,10 +52,10 @@ export function initRepoCommentForm() {
const $commentForm = $('.comment.form');
if (!$commentForm.length) return;
- if ($commentForm.find('.field.combo-editor-dropzone').length) {
- // at the moment, if a form has multiple combo-markdown-editors, it must be an issue template form
+ if ($commentForm.find('.field.editor-dropzone').length) {
+ // at the moment, if a form has multiple markdown-editors, it must be an issue template form
initIssueTemplateCommentEditors($commentForm);
- } else if ($commentForm.find('.combo-markdown-editor').length) {
+ } else if ($commentForm.find('.markdown-editor').length) {
// it's quite unclear about the "comment form" elements, sometimes it's for issue comment, sometimes it's for file editor/uploader message
initSingleCommentEditor($commentForm);
}
@@ -324,7 +324,7 @@ async function onEditContent(event) {
const renderContent = segment.querySelector('.render-content');
const rawContent = segment.querySelector('.raw-content');
- let comboMarkdownEditor;
+ let markdownEditor;
/**
* @param {HTMLElement} dropzone
@@ -426,7 +426,7 @@ async function onEditContent(event) {
try {
const params = new URLSearchParams({
- content: comboMarkdownEditor.value(),
+ content: markdownEditor.value(),
context: editContentZone.getAttribute('data-context'),
});
for (const file of dz.files) params.append('files[]', file.uuid);
@@ -438,7 +438,7 @@ async function onEditContent(event) {
rawContent.textContent = '';
} else {
renderContent.innerHTML = data.content;
- rawContent.textContent = comboMarkdownEditor.value();
+ rawContent.textContent = markdownEditor.value();
const refIssues = renderContent.querySelectorAll('p .ref-issue');
attachRefIssueContextPopup(refIssues);
}
@@ -465,7 +465,7 @@ async function onEditContent(event) {
if (!editContentZone.innerHTML) {
editContentZone.innerHTML = document.getElementById('issue-comment-editor-template').innerHTML;
- comboMarkdownEditor = await initComboMarkdownEditor(editContentZone.querySelector('.combo-markdown-editor'));
+ markdownEditor = await initMarkdownEditor(editContentZone.querySelector('.markdown-editor'));
const dropzone = editContentZone.querySelector('.dropzone');
const dz = await setupDropzone(dropzone);
@@ -478,16 +478,16 @@ async function onEditContent(event) {
saveAndRefresh(dz);
});
} else {
- comboMarkdownEditor = getComboMarkdownEditor(editContentZone.querySelector('.combo-markdown-editor'));
+ markdownEditor = getMarkdownEditor(editContentZone.querySelector('.markdown-editor'));
}
// Show write/preview tab and copy raw content as needed
showElem(editContentZone);
hideElem(renderContent);
- if (!comboMarkdownEditor.value()) {
- comboMarkdownEditor.value(rawContent.textContent);
+ if (!markdownEditor.value()) {
+ markdownEditor.value(rawContent.textContent);
}
- comboMarkdownEditor.focus();
+ markdownEditor.focus();
}
export function initRepository() {
@@ -610,7 +610,7 @@ function initRepoIssueCommentEdit() {
editor = await handleReply($replyBtn);
} else {
// for normal issue/comment page
- editor = getComboMarkdownEditor($('#comment-form .combo-markdown-editor'));
+ editor = getMarkdownEditor($('#comment-form .markdown-editor'));
}
if (editor) {
if (editor.value()) {
diff --git a/web_src/js/features/repo-release.js b/web_src/js/features/repo-release.js
index f3cfa7441815b..5fb0515c076d1 100644
--- a/web_src/js/features/repo-release.js
+++ b/web_src/js/features/repo-release.js
@@ -1,5 +1,5 @@
import {hideElem, showElem} from '../utils/dom.js';
-import {initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js';
+import {initMarkdownEditor} from './comp/MarkdownEditor.js';
export function initRepoRelease() {
document.addEventListener('click', (e) => {
@@ -50,9 +50,9 @@ function initTagNameEditor() {
}
function initRepoReleaseEditor() {
- const editor = document.querySelector('.repository.new.release .combo-markdown-editor');
+ const editor = document.querySelector('.repository.new.release .markdown-editor');
if (!editor) {
return;
}
- initComboMarkdownEditor(editor);
+ initMarkdownEditor(editor);
}
diff --git a/web_src/js/features/repo-wiki.js b/web_src/js/features/repo-wiki.js
index 03a2c68c5a973..09b6b312b2f08 100644
--- a/web_src/js/features/repo-wiki.js
+++ b/web_src/js/features/repo-wiki.js
@@ -1,71 +1,11 @@
-import {initMarkupContent} from '../markup/content.js';
-import {validateTextareaNonEmpty, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js';
+import {validateTextareaNonEmpty} from './comp/MarkdownEditor.js';
import {fomanticMobileScreen} from '../modules/fomantic.js';
-import {POST} from '../modules/fetch.js';
async function initRepoWikiFormEditor() {
- const editArea = document.querySelector('.repository.wiki .combo-markdown-editor textarea');
+ const editArea = document.querySelector('.repository.wiki .markdown-editor textarea');
if (!editArea) return;
- const form = document.querySelector('.repository.wiki.new .ui.form');
- const editorContainer = form.querySelector('.combo-markdown-editor');
- let editor;
-
- let renderRequesting = false;
- let lastContent;
- const renderEasyMDEPreview = async function () {
- if (renderRequesting) return;
-
- const previewFull = editorContainer.querySelector('.EasyMDEContainer .editor-preview-active');
- const previewSide = editorContainer.querySelector('.EasyMDEContainer .editor-preview-active-side');
- const previewTarget = previewSide || previewFull;
- const newContent = editArea.value;
- if (editor && previewTarget && lastContent !== newContent) {
- renderRequesting = true;
- const formData = new FormData();
- formData.append('mode', editor.previewMode);
- formData.append('context', editor.previewContext);
- formData.append('text', newContent);
- formData.append('wiki', editor.previewWiki);
- try {
- const response = await POST(editor.previewUrl, {data: formData});
- const data = await response.text();
- lastContent = newContent;
- previewTarget.innerHTML = `${data}
`;
- initMarkupContent();
- } catch (error) {
- console.error('Error rendering preview:', error);
- } finally {
- renderRequesting = false;
- setTimeout(renderEasyMDEPreview, 1000);
- }
- } else {
- setTimeout(renderEasyMDEPreview, 1000);
- }
- };
- renderEasyMDEPreview();
-
- editor = await initComboMarkdownEditor(editorContainer, {
- useScene: 'wiki',
- // EasyMDE has some problems of height definition, it has inline style height 300px by default, so we also use inline styles to override it.
- // And another benefit is that we only need to write the style once for both editors.
- // TODO: Move height style to CSS after EasyMDE removal.
- editorHeights: {minHeight: '300px', height: 'calc(100vh - 600px)'},
- previewMode: 'gfm',
- previewWiki: true,
- easyMDEOptions: {
- previewRender: (_content, previewTarget) => previewTarget.innerHTML, // disable builtin preview render
- toolbar: ['bold', 'italic', 'strikethrough', '|',
- 'heading-1', 'heading-2', 'heading-3', 'heading-bigger', 'heading-smaller', '|',
- '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',
- ],
- },
- });
-
- form.addEventListener('submit', (e) => {
+ document.querySelector('.repository.wiki.new .ui.form').addEventListener('submit', (e) => {
if (!validateTextareaNonEmpty(editArea)) {
e.preventDefault();
e.stopPropagation();
diff --git a/web_src/js/features/tribute.js b/web_src/js/features/tribute.js
deleted file mode 100644
index 02cd4843745e4..0000000000000
--- a/web_src/js/features/tribute.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import {emojiKeys, emojiHTML, emojiString} from './emoji.js';
-import {htmlEscape} from 'escape-goat';
-
-function makeCollections({mentions, emoji}) {
- const collections = [];
-
- if (emoji) {
- collections.push({
- trigger: ':',
- requireLeadingSpace: true,
- values: (query, cb) => {
- const matches = [];
- for (const name of emojiKeys) {
- if (name.includes(query)) {
- matches.push(name);
- if (matches.length > 5) break;
- }
- }
- cb(matches);
- },
- lookup: (item) => item,
- selectTemplate: (item) => {
- if (item === undefined) return null;
- return emojiString(item.original);
- },
- menuItemTemplate: (item) => {
- return `${emojiHTML(item.original)}${htmlEscape(item.original)}
`;
- },
- });
- }
-
- if (mentions) {
- collections.push({
- values: window.config.mentionValues ?? [],
- requireLeadingSpace: true,
- menuItemTemplate: (item) => {
- return `
-
- })
- ${htmlEscape(item.original.name)}
- ${item.original.fullname && item.original.fullname !== '' ? `${htmlEscape(item.original.fullname)}` : ''}
-
- `;
- },
- });
- }
-
- return collections;
-}
-
-export async function attachTribute(element, {mentions, emoji} = {}) {
- const {default: Tribute} = await import(/* webpackChunkName: "tribute" */'tributejs');
- const collections = makeCollections({mentions, emoji});
- const tribute = new Tribute({collection: collections, noMatchTemplate: ''});
- tribute.attach(element);
- return tribute;
-}
diff --git a/web_src/js/index.js b/web_src/js/index.js
index fc2f6b9b0b919..03fd80e6b1c2a 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -87,12 +87,14 @@ import {initRepoDiffCommitBranchesAndTags} from './features/repo-diff-commit.js'
import {initDirAuto} from './modules/dirauto.js';
import {initRepositorySearch} from './features/repo-search.js';
import {initColorPickers} from './features/colorpicker.js';
+import {migrateLocalStorage} from './utils/storage.js';
// Init Gitea's Fomantic settings
initGiteaFomantic();
initDirAuto();
onDomReady(() => {
+ migrateLocalStorage();
initGlobalCommon();
initGlobalTooltips();
diff --git a/web_src/js/utils/dom.js b/web_src/js/utils/dom.js
index fb23a71725fbf..2dba196de0db7 100644
--- a/web_src/js/utils/dom.js
+++ b/web_src/js/utils/dom.js
@@ -246,18 +246,6 @@ export function initSubmitEventPolyfill() {
document.body.addEventListener('focus', submitEventPolyfillListener);
}
-/**
- * Check if an element is visible, equivalent to jQuery's `:visible` pseudo.
- * Note: This function doesn't account for all possible visibility scenarios.
- * @param {HTMLElement} element The element to check.
- * @returns {boolean} True if the element is visible.
- */
-export function isElemVisible(element) {
- if (!element) return false;
-
- return Boolean(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
-}
-
// extract text and images from "paste" event
export function getPastedContent(e) {
const images = [];
diff --git a/web_src/js/utils/storage.js b/web_src/js/utils/storage.js
new file mode 100644
index 0000000000000..0df782cc940dd
--- /dev/null
+++ b/web_src/js/utils/storage.js
@@ -0,0 +1,16 @@
+export function migrateLocalStorage() {
+ if (!localStorage) return;
+
+ let storedVersion;
+ try {
+ storedVersion = JSON.parse(localStorage.getItem('version'));
+ } catch {
+ return; // don't do any migration if version parsing fails
+ }
+
+ if (storedVersion < 1) { // migrate to v1
+ localStorage.removeItem('markdown-editor-wiki');
+ localStorage.removeItem('markdown-editor-default');
+ localStorage.setItem('version', JSON.stringify(1));
+ }
+}
diff --git a/webpack.config.js b/webpack.config.js
index fdf80a5313f82..abf97f3c1701f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -79,7 +79,6 @@ export default {
fileURLToPath(new URL('web_src/js/jquery.js', import.meta.url)),
fileURLToPath(new URL('web_src/fomantic/build/semantic.js', import.meta.url)),
fileURLToPath(new URL('web_src/js/index.js', import.meta.url)),
- fileURLToPath(new URL('node_modules/easymde/dist/easymde.min.css', import.meta.url)),
fileURLToPath(new URL('web_src/fomantic/build/semantic.css', import.meta.url)),
fileURLToPath(new URL('web_src/css/index.css', import.meta.url)),
],