mirror of
				https://github.com/go-gitea/gitea.git
				synced 2025-10-30 01:04:25 +01:00 
			
		
		
		
	To keep blame info accurate and to avoid [changes like this](https://github.com/go-gitea/gitea/pull/29977/files#diff-c3422631a14edbe1e508c4b22f0c718db318be08a6e889427802f9b6165d88d6R359), it's good to always have a trailing comma, so let's enforce it in JS. This rule is completely automatically fixable with `make lint-js-fix` and that's what I did here.
		
			
				
	
	
		
			90 lines
		
	
	
		
			3.5 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			90 lines
		
	
	
		
			3.5 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
| import {initMarkupContent} from '../markup/content.js';
 | |
| import {validateTextareaNonEmpty, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.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');
 | |
|   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();
 | |
| }
 |