Set line-height to match github. Also extract shared options to a single object.

Author: WebsByTodd

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]!
   }