Use Markdowneditor in more places

options/locale/locale_en-US.ini

@@ -697,7 +697,7 @@ uid = UID
 webauthn = Two-Factor Authentication (Security Keys)
 
 public_profile = Public Profile
-biography_placeholder = Tell us a little bit about yourself! (You can use Markdown)
+biography_placeholder = Tell us a little bit about yourself!
 location_placeholder = Share your approximate location with others
 profile_desc = Control how your profile is show to other users. Your primary email address will be used for notifications, password recovery and web-based Git operations.
 password_username_disabled = Non-local users are not allowed to change their username. Please contact your site administrator for more details.

routers/web/org/projects.go

@@ -16,6 +16,8 @@
 	"code.gitea.io/gitea/models/unit"
 	"code.gitea.io/gitea/modules/base"
 	"code.gitea.io/gitea/modules/json"
+	"code.gitea.io/gitea/modules/markup"
+	"code.gitea.io/gitea/modules/markup/markdown"
 	"code.gitea.io/gitea/modules/optional"
 	"code.gitea.io/gitea/modules/setting"
 	"code.gitea.io/gitea/modules/templates"
@@ -145,6 +147,10 @@
 	ctx.Data["PageIsViewProjects"] = true
 	ctx.Data["HomeLink"] = ctx.ContextUser.HomeLink()
 	ctx.Data["CancelLink"] = ctx.ContextUser.HomeLink() + "/-/projects"
+	ctx.Data["ProjectMarkdownPreviewURL"] = fmt.Sprintf("%s/-/markup", ctx.ContextUser.HomeLink())
+	ctx.Data["ProjectMarkdownPreviewContext"] = ctx.ContextUser.HomeLink()
+	ctx.Data["ProjectMarkdownPreviewMode"] = "markdown"
+	ctx.Data["ProjectMarkdownHideRepoButtons"] = true
 	shared_user.RenderUserHeader(ctx)
 
 	err := shared_user.LoadHeaderCount(ctx)
@@ -260,6 +266,10 @@
 	ctx.Data["HomeLink"] = ctx.ContextUser.HomeLink()
 	ctx.Data["card_type"] = p.CardType
 	ctx.Data["CancelLink"] = fmt.Sprintf("%s/-/projects/%d", ctx.ContextUser.HomeLink(), p.ID)
+	ctx.Data["ProjectMarkdownPreviewURL"] = fmt.Sprintf("%s/-/markup", ctx.ContextUser.HomeLink())
+	ctx.Data["ProjectMarkdownPreviewContext"] = ctx.ContextUser.HomeLink()
+	ctx.Data["ProjectMarkdownPreviewMode"] = "markdown"
+	ctx.Data["ProjectMarkdownHideRepoButtons"] = true
 
 	ctx.HTML(http.StatusOK, tplProjectsNew)
 }

routers/web/repo/projects.go

@@ -137,6 +137,10 @@ func RenderNewProject(ctx *context.Context) {
 	ctx.Data["CardTypes"] = project_model.GetCardConfig()
 	ctx.Data["CanWriteProjects"] = ctx.Repo.Permission.CanWrite(unit.TypeProjects)
 	ctx.Data["CancelLink"] = ctx.Repo.Repository.Link() + "/projects"
+	ctx.Data["ProjectMarkdownPreviewURL"] = fmt.Sprintf("%s/markup", ctx.Repo.Repository.Link())
+	ctx.Data["ProjectMarkdownPreviewContext"] = ctx.Repo.Repository.Link()
+	ctx.Data["ProjectMarkdownPreviewMode"] = "comment"
+	ctx.Data["ProjectMarkdownHideRepoButtons"] = false
 	ctx.HTML(http.StatusOK, tplProjectsNew)
 }
 
@@ -240,6 +244,10 @@ func RenderEditProject(ctx *context.Context) {
 	ctx.Data["card_type"] = p.CardType
 	ctx.Data["redirect"] = ctx.FormString("redirect")
 	ctx.Data["CancelLink"] = fmt.Sprintf("%s/projects/%d", ctx.Repo.Repository.Link(), p.ID)
+	ctx.Data["ProjectMarkdownPreviewURL"] = fmt.Sprintf("%s/markup", ctx.Repo.Repository.Link())
+	ctx.Data["ProjectMarkdownPreviewContext"] = ctx.Repo.Repository.Link()
+	ctx.Data["ProjectMarkdownPreviewMode"] = "comment"
+	ctx.Data["ProjectMarkdownHideRepoButtons"] = false
 
 	ctx.HTML(http.StatusOK, tplProjectsNew)
 }

routers/web/web.go

@@ -32,7 +32,7 @@
 	"code.gitea.io/gitea/routers/web/feed"
 	"code.gitea.io/gitea/routers/web/healthcheck"
 	"code.gitea.io/gitea/routers/web/misc"
 	"code.gitea.io/gitea/routers/web/org"
 	org_setting "code.gitea.io/gitea/routers/web/org/setting"
 	"code.gitea.io/gitea/routers/web/repo"
 	"code.gitea.io/gitea/routers/web/repo/actions"
@@ -974,6 +974,8 @@
 	// end "/repo": create, migrate, search
 
 	m.Group("/{username}/-", func() {
+		m.Post("/markup", web.Bind(structs.MarkupOption{}), misc.Markup)
+
 		if setting.Packages.Enabled {
 			m.Group("/packages", func() {
 				m.Get("", user.ListPackages)

templates/org/settings/options.tmpl

@@ -22,9 +22,17 @@
 							<label for="email">{{ctx.Locale.Tr "org.settings.email"}}</label>
 							<input id="email" name="email" type="email" value="{{.Org.Email}}" maxlength="255">
 						</div>
-						<div class="field {{if .Err_Description}}error{{end}}">
+						<div class="field combo-markdown-editor-init {{if .Err_Description}}error{{end}}">
 							<label for="description">{{ctx.Locale.Tr "org.org_desc"}}</label>
-							<textarea id="description" name="description" rows="2" maxlength="255">{{.Org.Description}}</textarea>
+							{{template "shared/combomarkdowneditor" (dict
+								"MarkdownPreviewUrl" (printf "%s/-/markup" .Org.HomeLink)
+								"MarkdownPreviewContext" .Org.HomeLink
+								"MarkdownPreviewMode" "markdown"
+								"TextareaName" "description"
+								"TextareaContent" .Org.Description
+								"TextareaMaxLength" 255
+								"HideRepoButtons" true
+							)}}
 						</div>
 						<div class="field {{if .Err_Website}}error{{end}}">
 							<label for="website">{{ctx.Locale.Tr "org.settings.website"}}</label>

templates/projects/new.tmpl

@@ -16,9 +16,17 @@
 			<label>{{ctx.Locale.Tr "repo.projects.title"}}</label>
 			<input name="title" placeholder="{{ctx.Locale.Tr "repo.projects.title"}}" value="{{.title}}" autofocus required>
 		</div>
-		<div class="field">
+		<div class="field combo-markdown-editor-init">
 			<label>{{ctx.Locale.Tr "repo.projects.description"}}</label>
-			<textarea name="content" placeholder="{{ctx.Locale.Tr "repo.projects.description_placeholder"}}">{{.content}}</textarea>
+			{{template "shared/combomarkdowneditor" (dict
+				"MarkdownPreviewUrl" $.ProjectMarkdownPreviewURL
+				"MarkdownPreviewContext" $.ProjectMarkdownPreviewContext
+				"MarkdownPreviewMode"  $.ProjectMarkdownPreviewMode
+				"TextareaName" "content"
+				"TextareaContent" .content
+				"TextareaPlaceholder" (ctx.Locale.Tr "repo.projects.description_placeholder")
+				"HideRepoButtons" $.ProjectMarkdownHideRepoButtons
+			)}}
 		</div>
 
 		{{if not .PageIsEditProjects}}

templates/repo/release/new.tmpl

@@ -48,7 +48,7 @@
 				<div class="field {{if .Err_Title}}error{{end}}">
 					<input name="title" aria-label="{{ctx.Locale.Tr "repo.release.title"}}" placeholder="{{ctx.Locale.Tr "repo.release.title"}}" value="{{.title}}" autofocus maxlength="255">
 				</div>
-				<div class="field">
+				<div class="field combo-markdown-editor-init">
 					{{template "shared/combomarkdowneditor" (dict
 						"MarkdownPreviewUrl" (print .Repository.Link "/markup")
 						"MarkdownPreviewContext" .RepoLink

templates/repo/wiki/new.tmpl

@@ -25,6 +25,7 @@
 			{{template "shared/combomarkdowneditor" (dict
 				"MarkdownPreviewUrl" (print .Repository.Link "/markup")
 				"MarkdownPreviewContext" .RepoLink
+				"MarkdownPreviewMode" "gfm"
 				"TextareaName" "content"
 				"TextareaPlaceholder" (ctx.Locale.Tr "repo.wiki.page_content")
 				"TextareaAriaLabel" (ctx.Locale.Tr "repo.wiki.page_content")

templates/shared/combomarkdowneditor.tmpl

@@ -3,19 +3,22 @@ Template Attributes:
 * ContainerId: id attribute for the container element
 * ContainerClasses: additional classes for the container element
 * MarkdownPreviewUrl: preview url for the preview tab
+* MarkdownPreviewMode: the preview mode. possible values are markdown, comment, gfm and file. default is comment.
 * MarkdownPreviewContext: preview context for the preview tab
 * TextareaName: name attribute for the textarea
 * TextareaContent: content for the textarea
 * TextareaPlaceholder: placeholder attribute for the textarea
 * TextareaAriaLabel: aria-label attribute for the textarea
+* TextareaMaxLength: maxlength attribute for the textarea
 * DropzoneParentContainer: container for file upload (leave it empty if no upload)
 * DisableAutosize: whether to disable automatic height resizing
+* HideRepoButtons:  hide buttons that belong to repos (issue references)
 */}}
 <div {{if .ContainerId}}id="{{.ContainerId}}"{{end}} class="combo-markdown-editor {{.ContainerClasses}}" data-dropzone-parent-container="{{.DropzoneParentContainer}}">
 	{{if .MarkdownPreviewUrl}}
 	<div class="ui top tabular menu">
 		<a class="active item" data-tab-for="markdown-writer">{{template "shared/misc/tabtitle" (ctx.Locale.Tr "write")}}</a>
-		<a class="item" data-tab-for="markdown-previewer" data-preview-url="{{.MarkdownPreviewUrl}}" data-preview-context="{{.MarkdownPreviewContext}}">{{template "shared/misc/tabtitle" (ctx.Locale.Tr "preview")}}</a>
+		<a class="item" data-tab-for="markdown-previewer" data-preview-url="{{.MarkdownPreviewUrl}}" data-preview-context="{{.MarkdownPreviewContext}}" {{if .MarkdownPreviewMode}}data-preview-mode="{{.MarkdownPreviewMode}}"{{end}}>{{template "shared/misc/tabtitle" (ctx.Locale.Tr "preview")}}</a>
 	</div>
 	{{end}}
 	<div class="ui tab active" data-tab-panel="markdown-writer">
@@ -37,15 +40,17 @@ Template Attributes:
 			</div>
 			<div class="markdown-toolbar-group">
 				<md-mention class="markdown-toolbar-button" data-tooltip-content="{{ctx.Locale.Tr "editor.buttons.mention.tooltip"}}">{{svg "octicon-mention"}}</md-mention>
-				<md-ref class="markdown-toolbar-button" data-tooltip-content="{{ctx.Locale.Tr "editor.buttons.ref.tooltip"}}">{{svg "octicon-cross-reference"}}</md-ref>
+				{{if not .HideRepoButtons}}
+					<md-ref class="markdown-toolbar-button" data-tooltip-content="{{ctx.Locale.Tr "editor.buttons.ref.tooltip"}}">{{svg "octicon-cross-reference"}}</md-ref>
+				{{end}}
 			</div>
 			<div class="markdown-toolbar-group">
 				<button class="markdown-toolbar-button markdown-switch-monospace" role="switch" data-enable-text="{{ctx.Locale.Tr "editor.buttons.enable_monospace_font"}}" data-disable-text="{{ctx.Locale.Tr "editor.buttons.disable_monospace_font"}}">{{svg "octicon-typography"}}</button>
 				<button class="markdown-toolbar-button markdown-switch-easymde" data-tooltip-content="{{ctx.Locale.Tr "editor.buttons.switch_to_legacy.tooltip"}}">{{svg "octicon-arrow-switch"}}</button>
 			</div>
 		</markdown-toolbar>
 		<text-expander keys=": @" suffix="">
-			<textarea class="markdown-text-editor"{{if .TextareaName}} name="{{.TextareaName}}"{{end}}{{if .TextareaPlaceholder}} placeholder="{{.TextareaPlaceholder}}"{{end}}{{if .TextareaAriaLabel}} aria-label="{{.TextareaAriaLabel}}"{{end}}{{if .DisableAutosize}} data-disable-autosize="{{.DisableAutosize}}"{{end}}>{{.TextareaContent}}</textarea>
+			<textarea class="markdown-text-editor"{{if .TextareaName}} name="{{.TextareaName}}"{{end}}{{if .TextareaPlaceholder}} placeholder="{{.TextareaPlaceholder}}"{{end}}{{if .TextareaAriaLabel}} aria-label="{{.TextareaAriaLabel}}"{{end}}{{if .DisableAutosize}} data-disable-autosize="{{.DisableAutosize}}"{{end}} {{if .TextareaMaxLength}}maxlength="{{.TextareaMaxLength}}"{{end}}>{{.TextareaContent}}</textarea>
 		</text-expander>
 		<script>
 			if (localStorage?.getItem('markdown-editor-monospace') === 'true') {

templates/user/settings/profile.tmpl

@@ -25,9 +25,18 @@
 					<label>{{ctx.Locale.Tr "email"}}</label>
 					<p id="signed-user-email">{{.SignedUser.Email}}</p>
 				</div>
-				<div class="field {{if .Err_Description}}error{{end}}">
+				<div class="field combo-markdown-editor-init {{if .Err_Description}}error{{end}}">
 					<label for="description">{{ctx.Locale.Tr "user.user_bio"}}</label>
-					<textarea id="description" name="description" rows="2" placeholder="{{ctx.Locale.Tr "settings.biography_placeholder"}}" maxlength="255">{{.SignedUser.Description}}</textarea>
+					{{template "shared/combomarkdowneditor" (dict
+						"MarkdownPreviewUrl" (printf "%s/-/markup" .SignedUser.HomeLink)
+						"MarkdownPreviewContext" .SignedUser.HomeLink
+						"MarkdownPreviewMode" "markdown"
+						"TextareaName" "description"
+						"TextareaContent" .SignedUser.Description
+						"TextareaPlaceholder" (ctx.Locale.Tr "settings.biography_placeholder")
+						"TextareaMaxLength" 255
+						"HideRepoButtons" true
+					)}}
 				</div>
 				<div class="field {{if .Err_Website}}error{{end}}">
 					<label for="website">{{ctx.Locale.Tr "settings.website"}}</label>

web_src/js/features/comp/ComboMarkdownEditor.js

@@ -147,7 +147,7 @@ class ComboMarkdownEditor {
 
     this.previewUrl = tabPreviewer.getAttribute('data-preview-url');
     this.previewContext = tabPreviewer.getAttribute('data-preview-context');
-    this.previewMode = this.options.previewMode ?? 'comment';
+    this.previewMode = tabPreviewer.getAttribute('data-preview-mode') ?? 'comment';
     this.previewWiki = this.options.previewWiki ?? false;
     tabPreviewer.addEventListener('click', async () => {
       const formData = new FormData();

web_src/js/features/misc.js

@@ -0,0 +1,9 @@
+import {initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js';
+
+export function initComboMarkdownEditorGlobal() {
+  const markdownEditor = document.getElementsByClassName('combo-markdown-editor-init');
+
+  if (markdownEditor.length > 0) {
+    initComboMarkdownEditor(markdownEditor[0]);
+  }
+}

web_src/js/features/repo-release.js

@@ -1,5 +1,4 @@
 import {hideElem, showElem} from '../utils/dom.js';
-import {initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js';
 
 export function initRepoRelease() {
   document.addEventListener('click', (e) => {
@@ -16,7 +15,6 @@ export function initRepoReleaseNew() {
   if (!document.querySelector('.repository.new.release')) return;
 
   initTagNameEditor();
-  initRepoReleaseEditor();
 }
 
 function initTagNameEditor() {
@@ -48,11 +46,3 @@ function initTagNameEditor() {
     hideTargetInput(e.target);
   });
 }
-
-function initRepoReleaseEditor() {
-  const editor = document.querySelector('.repository.new.release .combo-markdown-editor');
-  if (!editor) {
-    return;
-  }
-  initComboMarkdownEditor(editor);
-}

web_src/js/features/repo-wiki.js

@@ -51,7 +51,6 @@ async function initRepoWikiFormEditor() {
     // 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

web_src/js/index.js

@@ -75,6 +75,7 @@ import {initRepoCodeFrequency} from './features/code-frequency.js';
 import {initRepoRecentCommits} from './features/recent-commits.js';
 import {initRepoDiffCommitBranchesAndTags} from './features/repo-diff-commit.js';
 import {initDirAuto} from './modules/dirauto.js';
+import {initComboMarkdownEditorGlobal} from './features/misc.js';
 import {initRepositorySearch} from './features/repo-search.js';
 import {initColorPickers} from './features/colorpicker.js';
 import {initAdminSelfCheck} from './features/admin/selfcheck.js';
@@ -193,5 +194,8 @@ onDomReady(() => {
   initRepoDiffView();
   initPdfViewer();
   initScopedAccessTokenCategories();
+
+  initComboMarkdownEditorGlobal();
+
   initColorPickers();
 });