1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51
52. 52
53. 53
54. 54
55. 55
56. 56
57. 57
58. 58
59. 59
60. 60
61. 61
62. 62
63. 63
64. 64
65. 65
66. 66
67. 67
68. 68
69. 69
70. 70
71. 71
72. 72
73. 73
74. 74
75. 75
76. 76
77. 77
78. 78
79. 79
80. 80
81. 81
82. 82
83. 83
84. 84
85. 85
86. 86
87. 87
88. 88
89. 89
90. 90
91. 91
92. 92
93. 93
94. 94
95. 95
96. 96
97. 97
98. 98
99. 99
100. 100
101. 101
102. 102
103. 103
104. 104
105. 105
106. 106
107. 107
108. 108
109. 109
110. 110
111. 111
112. 112
113. 113
114. 114
115. 115
116. 116
117. 117
118. 118
119. 119
120. 120
121. 121
122. 122
123. 123
124. 124
125. 125
126. 126

import attachTribute from '../tribute.js';

/**
 * create an EasyMDE editor for comment
 * @param textarea jQuery or HTMLElement
 * @returns {null|EasyMDE}
 */
export function createCommentEasyMDE(textarea) {
  if (textarea instanceof jQuery) {
    textarea = textarea[0];
  }
  if (!textarea) {
    return null;
  }

  const easyMDE = new window.EasyMDE({
    autoDownloadFontAwesome: false,
    element: textarea,
    forceSync: true,
    renderingConfig: {
      singleLineBreaks: false
    },
    indentWithTabs: false,
    tabSize: 4,
    spellChecker: false,
    toolbar: ['bold', 'italic', 'strikethrough', '|',
      'heading-1', 'heading-2', 'heading-3', 'heading-bigger', 'heading-smaller', '|',
      'code', 'quote', '|', {
        name: 'checkbox-empty',
        action(e) {
          const cm = e.codemirror;
          cm.replaceSelection(`\n- [ ] ${cm.getSelection()}`);
          cm.focus();
        },
        className: 'fa fa-square-o',
        title: 'Add Checkbox (empty)',
      },
      {
        name: 'checkbox-checked',
        action(e) {
          const cm = e.codemirror;
          cm.replaceSelection(`\n- [x] ${cm.getSelection()}`);
          cm.focus();
        },
        className: 'fa fa-check-square-o',
        title: 'Add Checkbox (checked)',
      }, '|',
      'unordered-list', 'ordered-list', '|',
      'link', 'image', 'table', 'horizontal-rule', '|',
      'clean-block', '|',
      {
        name: 'revert-to-textarea',
        action(e) {
          e.toTextArea();
        },
        className: 'fa fa-file',
        title: 'Revert to simple textarea',
      },
    ]
  });
  const inputField = easyMDE.codemirror.getInputField();
  inputField.classList.add('js-quick-submit');
  easyMDE.codemirror.setOption('extraKeys', {
    Enter: () => {
      const tributeContainer = document.querySelector('.tribute-container');
      if (!tributeContainer || tributeContainer.style.display === 'none') {
        return CodeMirror.Pass;
      }
    },
    Backspace: (cm) => {
      if (cm.getInputField().trigger) {
        cm.getInputField().trigger('input');
      }
      cm.execCommand('delCharBefore');
    }
  });
  attachTribute(inputField, {mentions: true, emoji: true});

  // TODO: that's the only way we can do now to attach the EasyMDE object to a HTMLElement
  inputField._data_easyMDE = easyMDE;
  textarea._data_easyMDE = easyMDE;
  return easyMDE;
}

/**
 * get the attached EasyMDE editor created by createCommentEasyMDE
 * @param el jQuery or HTMLElement
 * @returns {null|EasyMDE}
 */
export function getAttachedEasyMDE(el) {
  if (el instanceof jQuery) {
    el = el[0];
  }
  if (!el) {
    return null;
  }
  return el._data_easyMDE;
}

/**
 * validate if the given textarea from a form, is non-empty.
 * @param {jQuery | HTMLElement} form
 * @param {jQuery | HTMLElement} textarea
 * @returns {boolean} returns true if validation succeeded.
 */
export function validateTextareaNonEmpty(form, textarea) {
  if (form instanceof jQuery) {
    form = form[0];
  }
  if (textarea instanceof jQuery) {
    textarea = textarea[0];
  }

  const $markdownEditorTextArea = $(getAttachedEasyMDE(textarea).codemirror.getInputField());
  // The original edit area HTML element is hidden and replaced by the
  // SimpleMDE/EasyMDE editor, breaking HTML5 input validation if the text area is empty.
  // This is a workaround for this upstream bug.
  // See https://github.com/sparksuite/simplemde-markdown-editor/issues/324
  if (textarea.value.length) {
    $markdownEditorTextArea.prop('required', true);
    form.reportValidity();
    return false;
  }
  $markdownEditorTextArea.prop('required', false);
  return true;
}