| 202 | } |
| 203 | |
| 204 | function renderEditor({ user, error }, instance) { |
| 205 | const container = document.createElement('div') |
| 206 | container.lang = "en-US" |
| 207 | container.className = 'gitment-container gitment-editor-container' |
| 208 | |
| 209 | const shouldDisable = user.login && !error ? '' : 'disabled' |
| 210 | const disabledTip = user.login ? '' : 'Login to Comment' |
| 211 | container.innerHTML = ` |
| 212 | ${ user.login |
| 213 | ? `<a class="gitment-editor-avatar" href="${user.html_url}" target="_blank"> |
| 214 | <img class="gitment-editor-avatar-img" src="${user.avatar_url}"/> |
| 215 | </a>` |
| 216 | : user.isLoggingIn |
| 217 | ? `<div class="gitment-editor-avatar">${spinnerIcon}</div>` |
| 218 | : `<a class="gitment-editor-avatar" href="${instance.loginLink}" title="login with GitHub"> |
| 219 | ${githubIcon} |
| 220 | </a>` |
| 221 | } |
| 222 | </a> |
| 223 | <div class="gitment-editor-main"> |
| 224 | <div class="gitment-editor-header"> |
| 225 | <nav class="gitment-editor-tabs"> |
| 226 | <button class="gitment-editor-tab gitment-selected">Write</button> |
| 227 | <button class="gitment-editor-tab">Preview</button> |
| 228 | </nav> |
| 229 | <div class="gitment-editor-login"> |
| 230 | ${ user.login |
| 231 | ? '<a class="gitment-editor-logout-link">Logout</a>' |
| 232 | : user.isLoggingIn |
| 233 | ? 'Logging in...' |
| 234 | : `<a class="gitment-editor-login-link" href="${instance.loginLink}">Login</a> with GitHub` |
| 235 | } |
| 236 | </div> |
| 237 | </div> |
| 238 | <div class="gitment-editor-body"> |
| 239 | <div class="gitment-editor-write-field"> |
| 240 | <textarea placeholder="Leave a comment" title="${disabledTip}" ${shouldDisable}></textarea> |
| 241 | </div> |
| 242 | <div class="gitment-editor-preview-field gitment-hidden"> |
| 243 | <div class="gitment-editor-preview gitment-markdown"></div> |
| 244 | </div> |
| 245 | </div> |
| 246 | </div> |
| 247 | <div class="gitment-editor-footer"> |
| 248 | <a class="gitment-editor-footer-tip" href="https://guides.github.com/features/mastering-markdown/" target="_blank"> |
| 249 | Styling with Markdown is supported |
| 250 | </a> |
| 251 | <button class="gitment-editor-submit" title="${disabledTip}" ${shouldDisable}>Comment</button> |
| 252 | </div> |
| 253 | ` |
| 254 | if (user.login) { |
| 255 | container.querySelector('.gitment-editor-logout-link').onclick = () => instance.logout() |
| 256 | } |
| 257 | |
| 258 | const writeField = container.querySelector('.gitment-editor-write-field') |
| 259 | const previewField = container.querySelector('.gitment-editor-preview-field') |
| 260 | |
| 261 | const textarea = writeField.querySelector('textarea') |