mirror of
				https://github.com/go-gitea/gitea.git
				synced 2025-10-31 10:56:10 +01:00 
			
		
		
		
	Convert frontend code to typescript (#31559)
None of the frontend js/ts files was touched besides these two commands
(edit: no longer true, I touched one file in
61105d0618
because of a deprecation that was not showing before the rename).
`tsc` currently reports 778 errors, so I have disabled it in CI as
planned.
Everything appears to work fine.
			
			
This commit is contained in:
		
							
								
								
									
										89
									
								
								web_src/js/features/repo-wiki.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										89
									
								
								web_src/js/features/repo-wiki.ts
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,89 @@ | ||||
| import {initMarkupContent} from '../markup/content.ts'; | ||||
| import {validateTextareaNonEmpty, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.ts'; | ||||
| import {fomanticMobileScreen} from '../modules/fomantic.ts'; | ||||
| import {POST} from '../modules/fetch.ts'; | ||||
|  | ||||
| async function initRepoWikiFormEditor() { | ||||
|   const editArea = document.querySelector('.repository.wiki .combo-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 = `<div class="markup ui segment">${data}</div>`; | ||||
|         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) => { | ||||
|     if (!validateTextareaNonEmpty(editArea)) { | ||||
|       e.preventDefault(); | ||||
|       e.stopPropagation(); | ||||
|     } | ||||
|   }); | ||||
| } | ||||
|  | ||||
| function collapseWikiTocForMobile(collapse) { | ||||
|   if (collapse) { | ||||
|     document.querySelector('.wiki-content-toc details')?.removeAttribute('open'); | ||||
|   } | ||||
| } | ||||
|  | ||||
| export function initRepoWikiForm() { | ||||
|   if (!document.querySelector('.page-content.repository.wiki')) return; | ||||
|  | ||||
|   fomanticMobileScreen.addEventListener('change', (e) => collapseWikiTocForMobile(e.matches)); | ||||
|   collapseWikiTocForMobile(fomanticMobileScreen.matches); | ||||
|  | ||||
|   initRepoWikiFormEditor(); | ||||
| } | ||||
		Reference in New Issue
	
	Block a user