Use Markdowneditor in more places

options/locale/locale_en-US.ini

@@ -636,7 +636,7 @@ uid = UID
 webauthn = 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

@@ -18,6 +18,8 @@ import (
 	"code.gitea.io/gitea/modules/base"
 	"code.gitea.io/gitea/modules/context"
 	"code.gitea.io/gitea/modules/json"
+	"code.gitea.io/gitea/modules/markup"
+	"code.gitea.io/gitea/modules/markup/markdown"
 	"code.gitea.io/gitea/modules/setting"
 	"code.gitea.io/gitea/modules/util"
 	"code.gitea.io/gitea/modules/web"
@@ -100,7 +102,15 @@ func Projects(ctx *context.Context) {
 	}
 
 	for _, project := range projects {
-		project.RenderedContent = project.Description
+		project.RenderedContent, err = markdown.RenderString(&markup.RenderContext{
+			Ctx:       ctx,
+			URLPrefix: ctx.ContextUser.HomeLink(),
+			Metas:     map[string]string{"mode": "document"},
+		}, project.Description)
+		if err != nil {
+			ctx.ServerError("RenderString", err)
+			return
+		}
 	}
 
 	err = shared_user.LoadHeaderCount(ctx)
@@ -142,6 +152,10 @@ func RenderNewProject(ctx *context.Context) {
 	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)
@@ -268,6 +282,10 @@ func RenderEditProject(ctx *context.Context) {
 	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)
 }
@@ -391,7 +409,16 @@ func ViewProject(ctx *context.Context) {
 		}
 	}
 
-	project.RenderedContent = project.Description
+	project.RenderedContent, err = markdown.RenderString(&markup.RenderContext{
+		Ctx:       ctx,
+		URLPrefix: ctx.ContextUser.HomeLink(),
+		Metas:     map[string]string{"mode": "document"},
+	}, project.Description)
+	if err != nil {
+		ctx.ServerError("RenderString", err)
+		return
+	}
+
 	ctx.Data["LinkedPRs"] = linkedPrsMap
 	ctx.Data["PageIsViewProjects"] = true
 	ctx.Data["CanWriteProjects"] = canWriteProjects(ctx)

routers/web/repo/projects.go

@@ -129,6 +129,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)
 }
 
@@ -236,6 +240,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

@@ -923,6 +923,8 @@ func registerRoutes(m *web.Route) {
 	}, reqSignIn)
 
 	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 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">{{ctx.Locale.Tr "write"}}</a>
-		<a class="item" data-tab-for="markdown-previewer" data-preview-url="{{.MarkdownPreviewUrl}}" data-preview-context="{{.MarkdownPreviewContext}}">{{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}}>{{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 js-quick-submit"{{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 js-quick-submit"{{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 for="email">{{ctx.Locale.Tr "email"}}</label>
 					<p>{{.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

@@ -145,7 +145,7 @@ class ComboMarkdownEditor {
 
     this.previewUrl = $tabPreviewer.attr('data-preview-url');
     this.previewContext = $tabPreviewer.attr('data-preview-context');
-    this.previewMode = this.options.previewMode ?? 'comment';
+    this.previewMode = $tabPreviewer.attr('data-preview-mode') ?? 'comment';
     this.previewWiki = this.options.previewWiki ?? false;
     $tabPreviewer.on('click', () => {
       $.post(this.previewUrl, {

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,6 +1,5 @@
 import $ from 'jquery';
 import {hideElem, showElem} from '../utils/dom.js';
-import {initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js';
 
 export function initRepoRelease() {
   $(document).on('click', '.remove-rel-attach', function() {
@@ -16,7 +15,6 @@ export function initRepoReleaseNew() {
   if (!$repoReleaseNew.length) return;
 
   initTagNameEditor();
-  initRepoReleaseEditor();
 }
 
 function initTagNameEditor() {
@@ -43,11 +41,3 @@ function initTagNameEditor() {
     }
   });
 }
-
-function initRepoReleaseEditor() {
-  const $editor = $('.repository.new.release .combo-markdown-editor');
-  if ($editor.length === 0) {
-    return;
-  }
-  const _promise = initComboMarkdownEditor($editor);
-}

web_src/js/features/repo-wiki.js

@@ -50,7 +50,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

@@ -85,6 +85,7 @@ import {initRepoIssueList} from './features/repo-issue-list.js';
 import {initCommonIssueListQuickGoto} from './features/common-issue-list.js';
 import {initRepoDiffCommitBranchesAndTags} from './features/repo-diff-commit.js';
 import {initDirAuto} from './modules/dirauto.js';
+import {initComboMarkdownEditorGlobal} from './features/misc.js';
 
 // Init Gitea's Fomantic settings
 initGiteaFomantic();
@@ -184,4 +185,6 @@ onDomReady(() => {
   initRepoDiffView();
   initPdfViewer();
   initScopedAccessTokenCategories();
+
+  initComboMarkdownEditorGlobal();
 });