code-scope-highlighter 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -2,4 +2,8 @@
 
 ## v0.0.1 - 2024-07-03
 
-- Initial release
+- Initial release
+
+## v1.2.0
+
+- Added support for quotes, triple quotes, backticks, triple backticks.

package/LICENSE.md

@@ -1,9 +1,9 @@
 ---
 title: License
-description: MIT License for Code Highlighter
+description: MIT License for Code Scope Highlighter
 ---
 
-# 📄 License – Code Highlighter
+# 📄 License – Code Scope Highlighter
 
 This project is open-source and freely available under the terms below.
 
@@ -21,4 +21,4 @@ Permission is hereby granted, free of charge, to any person obtaining a copy of
 
 ---
 
-_Originally published at [github.com/joseavr/code-highlighter](https://github.com/joseavr/code-highlighter)_
+_Originally published at [github.com/joseavr/code-scope-highlighter](https://github.com/joseavr/code-scope-highlighter)_

package/README.md

@@ -11,7 +11,7 @@
 </p>
 
 
-# Code Highlighter - A Highlighter Extension for Better Readability
+# Code Scope Highlighter - A Highlighter Extension for Better Readability
 
 A customizable scope highlighter, inspired by Dr Racket IDE.
 
@@ -76,7 +76,7 @@ The extension now supports HTML tag highlighting with intelligent cursor positio
 
 ## 🗺️ Roadmap 
 
-- [x] **HTML support:** Implement highlighting for nested html tags.
+- [ ] **HTML support:** Implement highlighting for nested html tags.
 - [ ] **Language Specific Settings:** Implement highlighting for specific programming languages.
 - [ ] **Bracket Specific Settings:** Implement highlighting for specific matching bracket symbols.
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "code-scope-highlighter",
   "publisher": "joseavr",
-  "displayName": "Code Highlighter",
+  "displayName": "Code Scope Highlighter",
   "description": "Highlight the scope of matching brackets with customizable colors and flexible highlight modes.",
   "repository": "https://github.com/joseavr/code-highlighter",
   "icon": "code-scope-highlighter-logo.webp",
   "license": "MIT",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "engines": {
     "vscode": "^1.90.0"
   },

package/src/highlighter.ts

@@ -51,60 +51,120 @@ class Highlighter {
 		const offset = editor.document.offsetAt(editor.selection.active)
 		const text = editor.document.getText()
 
-		let backwardResult: MatchingBracket
-		let forwardResult: MatchingBracket
+		let leftbracket: MatchingBracket
+		let rightbracket: MatchingBracket
+
+		//
+		// Triple """ or ``` - cursor after closing
+		// 
+		// """..."""
+		//          ^
+		//
+		if (util.isCloseTripleQuote(text, offset - 1)) {
+			leftbracket = util.findLeftOpenTripleBracket(text, offset - 4, '"""')
+			rightbracket = { bracket: '"""', offset: offset - 3 }
+		} else if (util.isCloseTripleBacktick(text, offset - 1)) {
+			leftbracket = util.findLeftOpenTripleBracket(text, offset - 4, "```")
+			rightbracket = { bracket: "```", offset: offset - 3 }
+		}
+
+		//
+		// Triple """ or ``` - cursor at opening
+		//
+		// """..."""
+		// ^
+		else if (util.isOpenTripleQuote(text, offset)) {
+			leftbracket = { bracket: '"""', offset: offset }
+			rightbracket = util.findRightCloseTripleBracket(text, offset + 3, '"""')
+		} else if (util.isOpenTripleBacktick(text, offset)) {
+			leftbracket = { bracket: "```", offset: offset }
+			rightbracket = util.findRightCloseTripleBracket(text, offset + 3, "```")
+		}
 
+		// 
+		// Single char - cursor after closing
+		//
+		// Example:
 		// ^: cursor position
 		// (...)
 		//      ^
-		if (util.isCloseBracket(text.charAt(offset - 1))) {
-			backwardResult = util.findLeftBracket(text, offset - 2)
-			forwardResult = util.findRightBracket(text, offset - 1)
+		//
+		else if (util.isCloseBracket(text.charAt(offset - 1))) {
+			leftbracket = util.findLeftOpenBracket(text, offset - 2)
+			rightbracket = util.findRightCloseBracket(text, offset - 1)
 		}
 
+		//
+		// Single char - cursor at opening
+		//
+		// Example:
 		//  (...)
 		//  ^
+		//
 		else if (util.isOpenBracket(text.charAt(offset))) {
-			backwardResult = util.findLeftBracket(text, offset)
-			forwardResult = util.findRightBracket(text, offset + 1)
+			leftbracket = util.findLeftOpenBracket(text, offset)
+			rightbracket = util.findRightCloseBracket(text, offset + 1)
 		}
 
-		// (.)
+		//
+		// Cursor inside
+		//
+		// Example:
+		// (...)
 		//	 ^
 		else {
-			backwardResult = util.findLeftBracket(text, offset - 1)
-			forwardResult = util.findRightBracket(text, offset)
+			leftbracket = util.findLeftOpenBracket(text, offset - 1)
+			rightbracket = util.findRightCloseBracket(text, offset)
 		}
 
 		const shouldHighlight = util.shouldHighlight(
 			this.userConfigHighlightingMode,
 			offset,
-			backwardResult,
-			forwardResult
+			leftbracket,
+			rightbracket
 		)
 
-		// set up the decoratiosn to highlight the scope and matching brackets
+		//
+		// Set up the decorations to highlight the scope and matching brackets
+		// 
 		if (
-			util.isMatchingBracket(backwardResult.bracket, forwardResult.bracket) &&
+			util.isMatchingBracket(leftbracket.bracket, rightbracket.bracket) &&
 			shouldHighlight
 		) {
+			const bracketLength = leftbracket.bracket.length || 1
+			//
+			// Start must be the first index of the inside range
+			// 
 			let start =
-				backwardResult.offset < text.length
-					? backwardResult.offset + 1
-					: backwardResult.offset
-			let end = forwardResult.offset
-
+				leftbracket.offset < text.length
+					? leftbracket.offset + bracketLength
+					: leftbracket.offset
+			// 
+			// End must be the last index of the inside range + 1
+			// since vscode.Range second param is exclusive
+			// 
+			let end = rightbracket.offset
+
+			// 
+			// Open bracket decoration
+			// 
 			const start_decoration = new vscode.Range(
-				editor.document.positionAt(start - 1),
+				editor.document.positionAt(start - bracketLength),
 				editor.document.positionAt(start)
 			)
+			//
+			// Inside range decoration
+			//
 			const range_decoration = new vscode.Range(
 				editor.document.positionAt(start),
 				editor.document.positionAt(end)
 			)
+			//
+			// Close bracket decoration
+			//
 			const end_decoration = new vscode.Range(
 				editor.document.positionAt(end),
-				editor.document.positionAt(end + 1)
+				editor.document.positionAt(end + bracketLength)
 			)
 
 			var rangeDecorations = []

package/src/types.ts

@@ -1,5 +1,6 @@
 export interface MatchingBracket {
 	bracket: string
+	/** The offset must point the beginning of the bracket */
 	offset: number
 }
 

package/src/util.ts

@@ -1,26 +1,39 @@
 import * as vscode from "vscode"
 import { HighlighterMode, MatchingBracket } from "./types"
 
-let openingBrackets = ""
-let closingBrackets = ""
+const TRIPLE_QUOTE = '"""'
+const TRIPLE_BACKTICK = "```"
+
+let openingBrackets: string[] = []
+let closingBrackets: string[] = []
 
 function updateConfig() {
 	const activeEditor = vscode.window.activeTextEditor
 
 	if (activeEditor) {
-		openingBrackets = "({["
-		closingBrackets = ")}]"
+		openingBrackets = ["`", `'`, `"`, "(", "{", "["]
+		closingBrackets = ["`", `'`, `"`, ")", "}", "]"]
 	}
 }
 
 function isMatchingBracket(open: string, close: string) {
 	switch (open) {
+		case TRIPLE_QUOTE:
+			return close === TRIPLE_QUOTE
+		case TRIPLE_BACKTICK:
+			return close === TRIPLE_BACKTICK
 		case "(":
 			return close === ")"
 		case "{":
 			return close === "}"
 		case "[":
 			return close === "]"
+		case `"`:
+			return close === `"`
+		case `'`:
+			return close === `'`
+		case "`":
+			return close === "`"
 		default:
 			return false
 	}
@@ -34,19 +47,62 @@ function isCloseBracket(char: string) {
 	return closingBrackets.includes(char)
 }
 
-// Finds to the left the nearest open bracket using a stack.
-// Starting from the cursor position (index) to the beginning of the (text)
-function findLeftBracket(text: string, index: number): MatchingBracket {
+function isCloseTripleQuote(text: string, offset: number): boolean {
+	return (
+		offset >= 3 &&
+		text.charAt(offset) === '"' &&
+		text.charAt(offset - 1) === '"' &&
+		text.charAt(offset - 2) === '"'
+	)
+}
+
+function isOpenTripleQuote(text: string, offset: number): boolean {
+	return (
+		offset + 2 < text.length &&
+		text.charAt(offset) === '"' &&
+		text.charAt(offset + 1) === '"' &&
+		text.charAt(offset + 2) === '"'
+	)
+}
+
+function isCloseTripleBacktick(text: string, offset: number): boolean {
+	return (
+		offset >= 3 &&
+		text.charAt(offset) === "`" &&
+		text.charAt(offset - 1) === "`" &&
+		text.charAt(offset - 2) === "`"
+	)
+}
+
+function isOpenTripleBacktick(text: string, offset: number): boolean {
+	return (
+		offset + 2 < text.length &&
+		text.charAt(offset) === "`" &&
+		text.charAt(offset + 1) === "`" &&
+		text.charAt(offset + 2) === "`"
+	)
+}
+
+
+/** 
+ * Finds to the left, the nearest open bracket.
+ * 
+ * Scans starting from the cursor position `index` to the beginning of the `text`
+ * 
+ * @param text text from current editor tab
+ * @param index current position of the cursor in the text
+ */
+function findLeftOpenBracket(text: string, index: number): MatchingBracket {
 	const bracketStack = []
-	let offset = 0
-	let bracket = ""
+	let openbracketIndex = 0
+	let openbracket = ""
 
 	for (let i = index; i >= 0; i--) {
 		let char = text.charAt(i)
 		if (isOpenBracket(char)) {
 			if (bracketStack.length === 0) {
-				bracket = char
-				offset = i
+				openbracket = char
+				openbracketIndex = i
 				break
 			} else {
 				let top = bracketStack.pop()!
@@ -59,21 +115,28 @@ function findLeftBracket(text: string, index: number): MatchingBracket {
 		}
 	}
 
-	return { bracket, offset }
+	return { bracket: openbracket, offset: openbracketIndex }
 }
 
-// Finds to the right the nearest open bracket using a stack.
-// Starting from the cursor position (index) to the end of the (text)
-function findRightBracket(text: string, index: number): MatchingBracket {
+
+/**
+ * Finds to the right, the nearest close bracket.
+ * 
+ * Starting from the cursor position `index` to the end of the `text`
+ * 
+ * @param text text from current editor tab
+ * @param index current position of the cursor in the text
+ */
+function findRightCloseBracket(text: string, index: number): MatchingBracket {
 	const bracketStack = []
-	let offset = text.length
-	let bracket = ""
+	let closebracketIndex = text.length
+	let closebracket = ""
 	for (let i = index; i < text.length; i++) {
 		let char = text.charAt(i)
 		if (isCloseBracket(char)) {
 			if (bracketStack.length === 0) {
-				offset = i
-				bracket = char
+				closebracketIndex = i
+				closebracket = char
 				break
 			} else {
 				let top = bracketStack.pop()!
@@ -86,7 +149,58 @@ function findRightBracket(text: string, index: number): MatchingBracket {
 		}
 	}
 
-	return { bracket, offset }
+	return { bracket: closebracket, offset: closebracketIndex }
+}
+
+/**
+ * Finds the matching opening triple bracket (""" or ```) to the left.
+ * Use when cursor is after a closing triple.
+ */
+function findLeftOpenTripleBracket(
+	text: string,
+	startIndex: number,
+	triple: string
+): MatchingBracket {
+	const char = triple.charAt(0)
+
+	for (let i = startIndex; i >= 0; i--) {
+		if (
+			text.length > i + 2 &&
+			text.charAt(i) === char &&
+			text.charAt(i + 1) === char &&
+			text.charAt(i + 2) === char
+		) {
+			return { bracket: triple, offset: i }
+		}
+	}
+
+	// if not found
+	return { bracket: "", offset: 0 }
+}
+
+/**
+ * Finds the matching closing triple bracket (""" or ```) to the right.
+ * Use when cursor is after an opening triple.
+ */
+function findRightCloseTripleBracket(
+	text: string,
+	startIndex: number,
+	triple: string
+): MatchingBracket {
+	const char = triple.charAt(0)
+
+	for (let i = startIndex; i < text.length; i++) {
+		if (
+			text.length > i + 2 &&
+			text.charAt(i) === char &&
+			text.charAt(i + 1) === char &&
+			text.charAt(i + 2) === char
+		) {
+			return { bracket: triple, offset: i }
+		}
+	}
+
+	return { bracket: "", offset: text.length }
 }
 
 function shouldHighlight(
@@ -98,9 +212,10 @@ function shouldHighlight(
 	switch (highlighterMode) {
 		// highlight only when the cursor is next to the matching bracket
 		case HighlighterMode.Near:
+			const bracketLength = rightMatchingBracket.bracket.length || 1
 			return (
 				offset === leftMatchingBracket.offset ||
-				offset === rightMatchingBracket.offset + 1
+				offset === rightMatchingBracket.offset + bracketLength
 			)
 		case HighlighterMode.Always:
 			return true
@@ -140,8 +255,14 @@ export default {
 	isMatchingBracket,
 	isOpenBracket,
 	isCloseBracket,
-	findLeftBracket,
-	findRightBracket,
+	isCloseTripleQuote,
+	isOpenTripleQuote,
+	isCloseTripleBacktick,
+	isOpenTripleBacktick,
+	findLeftOpenBracket,
+	findRightCloseBracket,
+	findLeftOpenTripleBracket,
+	findRightCloseTripleBracket,
 	shouldHighlight,
 	setRangeStyle,
 	setEndStyle,