fix github line-height (#45 closes #41)

GitHub line-height

Author: nedtwigg

browser-extension/src/lib/enhancers/github/ghOptions.ts

@@ -0,0 +1,7 @@
+import type { Options } from 'overtype'
+
+export const commonGithubOptions: Options = {
+  autoResize: true,
+  lineHeight: 'var(--text-body-lineHeight-medium, 1.4285)',
+  padding: 'var(--base-size-16)',
+}

browser-extension/src/lib/enhancers/github/githubIssueAddComment.ts

@@ -2,6 +2,7 @@ import OverType, { type OverTypeInstance } from 'overtype'
 import type { CommentEnhancer, CommentSpot } from '../../enhancer'
 import { logger } from '../../logger'
 import { modifyDOM } from '../modifyDOM'
+import { commonGithubOptions } from './ghOptions'
 import { githubHighlighter } from './githubHighlighter'
 
 interface GitHubIssueAddCommentSpot extends CommentSpot {
@@ -47,9 +48,8 @@ export class GitHubIssueAddCommentEnhancer implements CommentEnhancer<GitHubIssu
   enhance(textArea: HTMLTextAreaElement, _spot: GitHubIssueAddCommentSpot): OverTypeInstance {
     const overtypeContainer = modifyDOM(textArea)
     return new OverType(overtypeContainer, {
-      autoResize: true,
+      ...commonGithubOptions,
       minHeight: '100px',
-      padding: 'var(--base-size-16)',
       placeholder: 'Use Markdown to format your comment',
     })[0]!
   }

browser-extension/src/lib/enhancers/github/githubIssueNewComment.ts

@@ -2,6 +2,7 @@ import OverType, { type OverTypeInstance } from 'overtype'
 import type { CommentEnhancer, CommentSpot } from '../../enhancer'
 import { logger } from '../../logger'
 import { modifyDOM } from '../modifyDOM'
+import { commonGithubOptions } from './ghOptions'
 import { githubHighlighter } from './githubHighlighter'
 
 interface GitHubIssueNewCommentSpot extends CommentSpot {
@@ -45,9 +46,8 @@ export class GitHubIssueNewCommentEnhancer implements CommentEnhancer<GitHubIssu
   enhance(textArea: HTMLTextAreaElement, _spot: GitHubIssueNewCommentSpot): OverTypeInstance {
     const overtypeContainer = modifyDOM(textArea)
     return new OverType(overtypeContainer, {
-      autoResize: true,
+      ...commonGithubOptions,
       minHeight: '400px',
-      padding: 'var(--base-size-16)',
       placeholder: 'Type your description here...',
     })[0]!
   }

browser-extension/src/lib/enhancers/github/githubPRAddComment.ts

@@ -2,6 +2,7 @@ import OverType, { type OverTypeInstance } from 'overtype'
 import type { CommentEnhancer, CommentSpot } from '../../enhancer'
 import { logger } from '../../logger'
 import { modifyDOM } from '../modifyDOM'
+import { commonGithubOptions } from './ghOptions'
 import { githubHighlighter } from './githubHighlighter'
 
 interface GitHubPRAddCommentSpot extends CommentSpot {
@@ -51,7 +52,7 @@ export class GitHubPRAddCommentEnhancer implements CommentEnhancer<GitHubPRAddCo
   enhance(textArea: HTMLTextAreaElement, _spot: GitHubPRAddCommentSpot): OverTypeInstance {
     const overtypeContainer = modifyDOM(textArea)
     return new OverType(overtypeContainer, {
-      autoResize: true,
+      ...commonGithubOptions,
       minHeight: '102px',
       padding: 'var(--base-size-8)',
       placeholder: 'Add your comment here...',

browser-extension/src/lib/enhancers/github/githubPRNewComment.ts

@@ -2,6 +2,7 @@ import OverType, { type OverTypeInstance } from 'overtype'
 import type { CommentEnhancer, CommentSpot } from '../../enhancer'
 import { logger } from '../../logger'
 import { modifyDOM } from '../modifyDOM'
+import { commonGithubOptions } from './ghOptions'
 import { githubHighlighter } from './githubHighlighter'
 
 interface GitHubPRNewCommentSpot extends CommentSpot {
@@ -50,9 +51,8 @@ export class GitHubPRNewCommentEnhancer implements CommentEnhancer<GitHubPRNewCo
   enhance(textArea: HTMLTextAreaElement, _spot: GitHubPRNewCommentSpot): OverTypeInstance {
     const overtypeContainer = modifyDOM(textArea)
     return new OverType(overtypeContainer, {
-      autoResize: true,
+      ...commonGithubOptions,
       minHeight: '250px',
-      padding: 'var(--base-size-16)',
       placeholder: 'Type your description here...',
     })[0]!
   }

browser-extension/src/lib/registries.ts

@@ -69,6 +69,7 @@ export class EnhancerRegistry {
             this.preparedEnhancers.add(enhancer)
           }
           const overtype = enhancer.enhance(textarea, spot)
+          this.handleDelayedValueInjection(overtype)
           return { enhancer, overtype, spot, textarea }
         }
       } catch (error) {
@@ -78,6 +79,24 @@ export class EnhancerRegistry {
     return null
   }
 
+  private handleDelayedValueInjection(overtype: OverTypeInstance): void {
+    // GitHub sometimes injects textarea content after a delay
+    // We need to trigger OverType to update its preview after such injections
+    // https://github.com/diffplug/gitcasso/issues/46
+    setTimeout(() => {
+      overtype.updatePreview()
+    }, 100)
+    setTimeout(() => {
+      overtype.updatePreview()
+    }, 200)
+    setTimeout(() => {
+      overtype.updatePreview()
+    }, 400)
+    setTimeout(() => {
+      overtype.updatePreview()
+    }, 8000)
+  }
+
   getEnhancerCount(): number {
     return this.enhancers.size
   }

browser-extension/tests/har-fixture.ts

@@ -18,6 +18,7 @@ vi.mock('overtype', () => {
       preview: document.createElement('div'),
       setValue: vi.fn(),
       textarea: document.createElement('textarea'),
+      updatePreview: vi.fn(),
       wrapper: document.createElement('div'),
     },
   ])