Repository: go-gitea/gitea
File: web_src/js/features/comp/ComboMarkdownEditor.ts (TypeScript)

Code before:
 * @returns {boolean} returns true if validation succeeded.
 */
export function validateTextareaNonEmpty(textarea: HTMLTextAreaElement) {
  // When using EasyMDE, the original edit area HTML element is hidden, breaking HTML5 input validation.
  // The workaround (https://github.com/sparksuite/simplemde-markdown-editor/issues/324) doesn't work with contenteditable, so we just show an alert.
  if (!textarea.value) {
    if (isElemVisible(textarea)) {
      textarea.required = true;
      const form = textarea.closest('form');
      form?.reportValidity();
    } else {
      // The alert won't hurt users too much, because we are dropping the EasyMDE and the check only occurs in a few places.
      showErrorToast('Require non-empty content');
    }
    return false;
  }
  return true;
}

/** Returns whether the user currently has the monospace font setting enabled */
function isMonospaceEnabled() {
  return getLocalStorageSetting('markdown-editor-monospace') === 'true';
}

/** Apply font to the provided or all textareas on the page and optionally save on localStorage */
function applyMonospace(enabled: boolean, {textarea, save}: {textarea?: HTMLTextAreaElement, save?: boolean}) {
  for (const el of textarea ? [textarea] : document.querySelectorAll('.markdown-text-editor')) {
    el.classList.toggle('tw-font-mono', enabled);
  }
  if (save) {
    setLocalStorageSetting('markdown-editor-monospace', String(enabled));
  }
}

type Heights = {
  minHeight?: string,
  height?: string,
  maxHeight?: string,
};

type ComboMarkdownEditorOptions = {
  editorHeights?: Heights,
  easyMDEOptions?: EasyMDE.Options,
};

type ComboMarkdownEditorTextarea = HTMLTextAreaElement & {_giteaComboMarkdownEditor: any};
type ComboMarkdownEditorContainer = HTMLElement & {_giteaComboMarkdownEditor?: any};

export class ComboMarkdownEditor {
  static EventEditorContentChanged = EventEditorContentChanged;
  static EventUploadStateChanged = EventUploadStateChanged;

Review comment (suggestion):
It should be a method of `ComboMarkdownEditor`

And to change others, `getComboMarkdownEditor` and call their instance's method.

Code after:
 * @returns {boolean} returns true if validation succeeded.
 */
export function validateTextareaNonEmpty(textarea: HTMLTextAreaElement) {
  // When using EasyMDE, the original edit area HTML element is hidden, breaking HTML5 input validation.
  // The workaround (https://github.com/sparksuite/simplemde-markdown-editor/issues/324) doesn't work with contenteditable, so we just show an alert.
  if (!textarea.value) {
    if (isElemVisible(textarea)) {
      textarea.required = true;
      const form = textarea.closest('form');
      form?.reportValidity();
    } else {
      // The alert won't hurt users too much, because we are dropping the EasyMDE and the check only occurs in a few places.
      showErrorToast('Require non-empty content');
    }
    return false;
  }
  return true;
}

type Heights = {
  minHeight?: string,
  height?: string,
  maxHeight?: string,
};

type ComboMarkdownEditorOptions = {
  editorHeights?: Heights,
  easyMDEOptions?: EasyMDE.Options,
};

type ComboMarkdownEditorTextarea = HTMLTextAreaElement & {_giteaComboMarkdownEditor: any};
type ComboMarkdownEditorContainer = HTMLElement & {_giteaComboMarkdownEditor?: any};

export class ComboMarkdownEditor {
  static EventEditorContentChanged = EventEditorContentChanged;
  static EventUploadStateChanged = EventUploadStateChanged;

  public container: HTMLElement;

  options: ComboMarkdownEditorOptions;

  tabEditor: HTMLElement;
  tabPreviewer: HTMLElement;

  supportEasyMDE: boolean;
  easyMDE: any;
  easyMDEToolbarActions: any;
  easyMDEToolbarDefault: any;

  textarea: ComboMarkdownEditorTextarea;
  textareaMarkdownToolbar: HTMLElement;