Add useShowInvisibles extension

Author: jonpyt

src/extensions/search/index.ts

@@ -3,3 +3,4 @@ export type { SearchAPI, SearchFilter } from "./search"
 export * from "./replace"
 export * from "./widget"
 export * from "./selection"
+export * from "./invisibles"

src/extensions/search/invisibles.css

@@ -0,0 +1 @@
+@import "prism-code-editor/invisibles.css";

src/extensions/search/invisibles.ts

@@ -0,0 +1,36 @@
+import { useLayoutEffect } from "react"
+import { useStableRef } from "../../core"
+import { PrismEditor } from "../../types"
+import { useEditorSearch } from "./search"
+
+const useShowInvisibles = (editor: PrismEditor, alwaysShow?: boolean) => {
+	const show = useStableRef([alwaysShow])
+	const searchAPI = useEditorSearch(editor, "pce-invisibles")
+	show[0] = alwaysShow
+
+	useLayoutEffect(() => {
+		let prev: string
+		const matches = searchAPI.matches
+		const container = searchAPI.container
+		const nodes = container.children
+		const tabs: boolean[] = []
+		const update = () => {
+			const value = editor.value
+			const [start, end] = editor.getSelection()
+
+			if (!show[0] || prev != (prev = value)) {
+				searchAPI.search(" |\t", true, false, true, show[0] ? undefined : [start, end])
+				for (let i = 0, l = matches.length; i < l; i++) {
+					if ((value[matches[i][0]] == "\t") == !tabs[i]) {
+						nodes[i].className = (tabs[i] = !tabs[i]) ? "pce-tab" : ""
+					}
+				}
+			}
+		}
+
+		if (editor.value) update()
+		return editor.on("selectionChange", update)
+	}, [])
+}
+
+export { useShowInvisibles }

src/testsite/App.tsx

@@ -12,12 +12,13 @@ import "../prism/languages/tsx"
 import "../prism/languages/jsdoc"
 import "./style.css"
 import "../extensions/search/search.css"
+import "../extensions/search/invisibles.css"
 import "../languages/jsx"
 import { useBracketMatcher } from "../extensions/match-brackets"
 import { useHightlightBracketPairs } from "../extensions/match-brackets/highlight"
 import { IndentGuides } from "../extensions/guides"
 import { PrismEditor } from "../types"
-import { useHighlightSelectionMatches } from "../extensions/search/selection"
+import { useHighlightSelectionMatches, useShowInvisibles } from "../extensions/search"
 import { useOverscroll } from "../extensions/overscroll"
 import { useHighlightMatchingTags, useTagMatcher } from "../extensions/match-tags"
 import { useDefaultCommands, useEditHistory } from "../extensions/commands"
@@ -65,9 +66,9 @@ const Extensions = ({ editor }: { editor: PrismEditor }) => {
 	useHighlightSelectionMatches(editor)
 	useCopyButton(editor)
 	useCursorPosition(editor)
+	useShowInvisibles(editor)
 	useAutoComplete(editor, {
 		filter: fuzzyFilter,
-		closeOnBlur: false
 	})
 	return (
 		<>