code.gitea.io/gitea@v1.21.7/web_src/js/features/repo-wiki.js (about)

     1  import $ from 'jquery';
     2  import {initMarkupContent} from '../markup/content.js';
     3  import {validateTextareaNonEmpty, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js';
     4  import {fomanticMobileScreen} from '../modules/fomantic.js';
     5  
     6  const {csrfToken} = window.config;
     7  
     8  async function initRepoWikiFormEditor() {
     9    const $editArea = $('.repository.wiki .combo-markdown-editor textarea');
    10    if (!$editArea.length) return;
    11  
    12    const $form = $('.repository.wiki.new .ui.form');
    13    const $editorContainer = $form.find('.combo-markdown-editor');
    14    let editor;
    15  
    16    let renderRequesting = false;
    17    let lastContent;
    18    const renderEasyMDEPreview = function () {
    19      if (renderRequesting) return;
    20  
    21      const $previewFull = $editorContainer.find('.EasyMDEContainer .editor-preview-active');
    22      const $previewSide = $editorContainer.find('.EasyMDEContainer .editor-preview-active-side');
    23      const $previewTarget = $previewSide.length ? $previewSide : $previewFull;
    24      const newContent = $editArea.val();
    25      if (editor && $previewTarget.length && lastContent !== newContent) {
    26        renderRequesting = true;
    27        $.post(editor.previewUrl, {
    28          _csrf: csrfToken,
    29          mode: editor.previewMode,
    30          context: editor.previewContext,
    31          text: newContent,
    32          wiki: editor.previewWiki,
    33        }).done((data) => {
    34          lastContent = newContent;
    35          $previewTarget.html(`<div class="markup ui segment">${data}</div>`);
    36          initMarkupContent();
    37        }).always(() => {
    38          renderRequesting = false;
    39          setTimeout(renderEasyMDEPreview, 1000);
    40        });
    41      } else {
    42        setTimeout(renderEasyMDEPreview, 1000);
    43      }
    44    };
    45    renderEasyMDEPreview();
    46  
    47    editor = await initComboMarkdownEditor($editorContainer, {
    48      useScene: 'wiki',
    49      // EasyMDE has some problems of height definition, it has inline style height 300px by default, so we also use inline styles to override it.
    50      // And another benefit is that we only need to write the style once for both editors.
    51      // TODO: Move height style to CSS after EasyMDE removal.
    52      editorHeights: {minHeight: '300px', height: 'calc(100vh - 600px)'},
    53      previewMode: 'gfm',
    54      previewWiki: true,
    55      easyMDEOptions: {
    56        previewRender: (_content, previewTarget) => previewTarget.innerHTML, // disable builtin preview render
    57        toolbar: ['bold', 'italic', 'strikethrough', '|',
    58          'heading-1', 'heading-2', 'heading-3', 'heading-bigger', 'heading-smaller', '|',
    59          'gitea-code-inline', 'code', 'quote', '|', 'gitea-checkbox-empty', 'gitea-checkbox-checked', '|',
    60          'unordered-list', 'ordered-list', '|',
    61          'link', 'image', 'table', 'horizontal-rule', '|',
    62          'preview', 'fullscreen', 'side-by-side', '|', 'gitea-switch-to-textarea'
    63        ],
    64      },
    65    });
    66  
    67    $form.on('submit', () => {
    68      if (!validateTextareaNonEmpty($editArea)) {
    69        return false;
    70      }
    71    });
    72  }
    73  
    74  function collapseWikiTocForMobile(collapse) {
    75    if (collapse) {
    76      document.querySelector('.wiki-content-toc details')?.removeAttribute('open');
    77    }
    78  }
    79  
    80  export function initRepoWikiForm() {
    81    if (!document.querySelector('.page-content.repository.wiki')) return;
    82  
    83    fomanticMobileScreen.addEventListener('change', (e) => collapseWikiTocForMobile(e.matches));
    84    collapseWikiTocForMobile(fomanticMobileScreen.matches);
    85  
    86    initRepoWikiFormEditor();
    87  }