Language Server: Implement Toggle Comment Service (#1308)

https://github.com/user-attachments/assets/13cc88a8-bba9-420f-aac3-9e1622829ec5

Resolves #136

Author: marcoroth

javascript/packages/language-server/src/comment_service.ts

@@ -0,0 +1,277 @@
+import { TextEdit, Range, Position } from "vscode-languageserver/node"
+import { TextDocument } from "vscode-languageserver-textdocument"
+
+import { Visitor } from "@herb-tools/core"
+import { ParserService } from "./parser_service"
+
+import { lspLine } from "./range_utils"
+import { isERBCommentNode } from "@herb-tools/core"
+
+import type {
+  Node,
+  ERBNode,
+  ERBContentNode,
+  HTMLCommentNode,
+  HTMLTextNode,
+  HTMLElementNode,
+} from "@herb-tools/core"
+
+type LineContext = "erb-comment" | "html-comment" | "erb-tag" | "html-content" | "empty"
+
+interface LineInfo {
+  line: number
+  context: LineContext
+  node: Node | null
+}
+
+class LineContextCollector extends Visitor {
+  public lineMap: Map<number, LineInfo> = new Map()
+
+  visitERBNode(node: ERBNode): void {
+    if (!node.tag_opening || !node.tag_closing) return
+
+    const startLine = lspLine(node.tag_opening.location.start)
+
+    if (isERBCommentNode(node)) {
+      this.setLine(startLine, "erb-comment", node)
+    } else {
+      this.setLine(startLine, "erb-tag", node)
+    }
+  }
+
+  visitERBContentNode(node: ERBContentNode): void {
+    this.visitERBNode(node)
+    this.visitChildNodes(node)
+  }
+
+  visitHTMLCommentNode(node: HTMLCommentNode): void {
+    const startLine = lspLine(node.location.start)
+    const endLine = lspLine(node.location.end)
+
+    for (let line = startLine; line <= endLine; line++) {
+      this.setLine(line, "html-comment", node)
+    }
+
+    this.visitChildNodes(node)
+  }
+
+  visitHTMLElementNode(node: HTMLElementNode): void {
+    const startLine = lspLine(node.location.start)
+    const endLine = lspLine(node.location.end)
+
+    for (let line = startLine; line <= endLine; line++) {
+      if (!this.lineMap.has(line)) {
+        this.setLine(line, "html-content", node)
+      }
+    }
+
+    this.visitChildNodes(node)
+  }
+
+  visitHTMLTextNode(node: HTMLTextNode): void {
+    const startLine = lspLine(node.location.start)
+    const endLine = lspLine(node.location.end)
+
+    for (let line = startLine; line <= endLine; line++) {
+      if (!this.lineMap.has(line)) {
+        this.setLine(line, "html-content", node)
+      }
+    }
+
+    this.visitChildNodes(node)
+  }
+
+  private setLine(line: number, context: LineContext, node: Node): void {
+    const existing = this.lineMap.get(line)
+
+    if (existing) {
+      if (existing.context === "erb-comment" || existing.context === "erb-tag") return
+
+      if (context === "erb-comment" || context === "erb-tag") {
+        this.lineMap.set(line, { line, context, node })
+
+        return
+      }
+
+      if (existing.context === "html-comment") return
+    }
+
+    this.lineMap.set(line, { line, context, node })
+  }
+}
+
+export class CommentService {
+  private parserService: ParserService
+
+  constructor(parserService: ParserService) {
+    this.parserService = parserService
+  }
+
+  toggleLineComment(document: TextDocument, range: Range): TextEdit[] {
+    const parseResult = this.parserService.parseDocument(document)
+    const collector = new LineContextCollector()
+
+    collector.visit(parseResult.document)
+
+    const startLine = range.start.line
+    const endLine = range.end.line
+    const lineInfos: LineInfo[] = []
+
+    for (let line = startLine; line <= endLine; line++) {
+      const lineText = document.getText(Range.create(line, 0, line + 1, 0)).replace(/\n$/, "")
+
+      if (lineText.trim() === "") {
+        continue
+      }
+
+      const info = collector.lineMap.get(line)
+      const trimmed = lineText.trim()
+
+      if (trimmed.startsWith("<!--") && trimmed.endsWith("-->")) {
+        lineInfos.push({ line, context: "html-comment", node: null })
+      } else if (info) {
+        lineInfos.push(info)
+      } else {
+        lineInfos.push({ line, context: "html-content", node: null })
+      }
+    }
+
+    if (lineInfos.length === 0) return []
+
+    const allCommented = lineInfos.every(
+      info => info.context === "erb-comment" || info.context === "html-comment"
+    )
+
+    const edits: TextEdit[] = []
+
+    if (allCommented) {
+      for (const info of lineInfos) {
+        const lineText = document.getText(Range.create(info.line, 0, info.line + 1, 0)).replace(/\n$/, "")
+        const edit = this.uncommentLine(info, lineText)
+
+        if (edit) edits.push(edit)
+      }
+    } else {
+      for (const info of lineInfos) {
+        if (info.context === "erb-comment" || info.context === "html-comment") continue
+
+        const lineText = document.getText(Range.create(info.line, 0, info.line + 1, 0)).replace(/\n$/, "")
+        const edit = this.commentLine(info, lineText)
+
+        if (edit) edits.push(edit)
+      }
+    }
+
+    return edits
+  }
+
+  toggleBlockComment(document: TextDocument, range: Range): TextEdit[] {
+    const startLine = range.start.line
+    const endLine = range.end.line
+
+    const firstLineText = document.getText(Range.create(startLine, 0, startLine + 1, 0)).replace(/\n$/, "")
+    const lastLineText = document.getText(Range.create(endLine, 0, endLine + 1, 0)).replace(/\n$/, "")
+    const isWrapped = firstLineText.trim() === "<% if false %>" && lastLineText.trim() === "<% end %>"
+
+    if (isWrapped) {
+      return [
+        TextEdit.del(Range.create(endLine, 0, endLine + 1, 0)),
+        TextEdit.del(Range.create(startLine, 0, startLine + 1, 0)),
+      ]
+    } else {
+      const firstLineIndent = this.getIndentation(firstLineText)
+
+      return [
+        TextEdit.insert(Position.create(endLine + 1, 0), `${firstLineIndent}<% end %>\n`),
+        TextEdit.insert(Position.create(startLine, 0), `${firstLineIndent}<% if false %>\n`),
+      ]
+    }
+  }
+
+  private commentLine(info: LineInfo, lineText: string): TextEdit | null {
+    const lineRange = Range.create(info.line, 0, info.line, lineText.length)
+
+    if (info.context === "erb-tag") {
+      const isSingleERBTag = /^\s*<%(?:(?!%>).)*%>\s*$/.test(lineText)
+
+      if (!isSingleERBTag) {
+        const indent = this.getIndentation(lineText)
+        const content = lineText.trimStart()
+
+        return TextEdit.replace(lineRange, `${indent}<!-- ${content} -->`)
+      }
+
+      const node = info.node as ERBContentNode
+      if (!node?.tag_opening) return null
+
+      if (lspLine(node.tag_opening.location.start) !== info.line) {
+        return null
+      }
+
+      const insertColumn = node.tag_opening.location.start.column + 2
+
+      return TextEdit.insert(Position.create(info.line, insertColumn), "#")
+    }
+
+    if (info.context === "html-content") {
+      const indent = this.getIndentation(lineText)
+      const content = lineText.trimStart()
+
+      return TextEdit.replace(lineRange, `${indent}<!-- ${content} -->`)
+    }
+
+    return null
+  }
+
+  private uncommentLine(info: LineInfo, lineText: string): TextEdit | null {
+    const lineRange = Range.create(info.line, 0, info.line, lineText.length)
+
+    if (info.context === "erb-comment") {
+      const node = info.node as ERBContentNode
+      if (!node?.tag_opening || !node?.tag_closing) return null
+
+      const contentValue = (node as any).content?.value as string | null
+      const trimmedContent = contentValue?.trim() || ""
+
+      if (trimmedContent.startsWith("<") && !trimmedContent.startsWith("<%")) {
+        const indent = this.getIndentation(lineText)
+
+        return TextEdit.replace(lineRange, `${indent}${trimmedContent}`)
+      }
+
+      if (lspLine(node.tag_opening.location.start) !== info.line) return null
+
+      const hashColumn = node.tag_opening.location.start.column + 2
+
+      if (
+        contentValue?.startsWith(" graphql ") ||
+        contentValue?.startsWith(" %= ") ||
+        contentValue?.startsWith(" == ") ||
+        contentValue?.startsWith(" % ") ||
+        contentValue?.startsWith(" = ") ||
+        contentValue?.startsWith(" - ")
+      ) {
+        return TextEdit.del(Range.create(info.line, hashColumn, info.line, hashColumn + 2))
+      }
+
+      return TextEdit.del(Range.create(info.line, hashColumn, info.line, hashColumn + 1))
+    }
+
+    if (info.context === "html-comment") {
+      const indent = this.getIndentation(lineText)
+      const match = lineText.match(/<!--\s*(.*?)\s*-->/)
+
+      if (match) {
+        return TextEdit.replace(lineRange, `${indent}${match[1]}`)
+      }
+    }
+
+    return null
+  }
+
+  private getIndentation(lineText: string): string {
+    const match = lineText.match(/^(\s*)/)
+
+    return match ? match[1] : ""
+  }
+}

javascript/packages/language-server/src/index.ts

@@ -10,3 +10,4 @@ export * from "./utils"
 export * from "./range_utils"
 export * from "./cli"
 export * from "./document_highlight_service"
+export * from "./comment_service"

javascript/packages/language-server/src/server.ts

@@ -14,6 +14,8 @@ import {
   CodeActionKind,
   FoldingRangeParams,
   DocumentHighlightParams,
+  TextDocumentIdentifier,
+  Range,
 } from "vscode-languageserver/node"
 
 import { Service } from "./service"
@@ -195,6 +197,22 @@ export class Server {
 
       return this.service.foldingRangeService.getFoldingRanges(document)
     })
+
+    this.connection.onRequest('herb/toggleLineComment', (params: { textDocument: TextDocumentIdentifier, range: Range }) => {
+      const document = this.service.documentService.get(params.textDocument.uri)
+
+      if (!document) return []
+
+      return this.service.commentService.toggleLineComment(document, params.range)
+    })
+
+    this.connection.onRequest('herb/toggleBlockComment', (params: { textDocument: TextDocumentIdentifier, range: Range }) => {
+      const document = this.service.documentService.get(params.textDocument.uri)
+
+      if (!document) return []
+
+      return this.service.commentService.toggleBlockComment(document, params.range)
+    })
   }
 
   listen() {

javascript/packages/language-server/src/service.ts

@@ -14,6 +14,7 @@ import { CodeActionService } from "./code_action_service"
 import { DocumentSaveService } from "./document_save_service"
 import { FoldingRangeService } from "./folding_range_service"
 import { DocumentHighlightService } from "./document_highlight_service"
+import { CommentService } from "./comment_service"
 
 import { version } from "../package.json"
 
@@ -34,6 +35,7 @@ export class Service {
   documentSaveService: DocumentSaveService
   foldingRangeService: FoldingRangeService
   documentHighlightService: DocumentHighlightService
+  commentService: CommentService
 
   constructor(connection: Connection, params: InitializeParams) {
     this.connection = connection
@@ -50,6 +52,7 @@ export class Service {
     this.documentSaveService = new DocumentSaveService(this.connection, this.settings, this.autofixService, this.formattingService)
     this.foldingRangeService = new FoldingRangeService(this.parserService)
     this.documentHighlightService = new DocumentHighlightService(this.parserService)
+    this.commentService = new CommentService(this.parserService)
 
     if (params.initializationOptions) {
       this.settings.globalSettings = params.initializationOptions as PersonalHerbSettings