Added code folding example to website

website/index.html

@@ -94,7 +94,7 @@ <h2>Advanced usage</h2>
 	</section>
 	<section style="--height: 32.3rem;">
 		<h2>Web components</h2>
-		<p>The library includes a custom element wrapper for all 4 setups you can import.</p>
+		<p>The library includes a custom element wrapper for each of the 4 setups you can import.</p>
 		<div></div>
 		<p>The custom element can be used like this:</p>
 		<div></div>
@@ -103,5 +103,10 @@ <h2>Web components</h2>
 		<h2 style="border: 0; padding: 0;">Various examples</h2>
 		<div></div>
 	</section>
+	<section class="folding">
+		<h2>Read-only code folding</h2>
+		<p>In read-only editor's, you can add code folding. You can see both how the code folding works and how to add it below.</p>
+		<div></div>
+	</section>
 </body>
 </html>

website/src/dynamic.ts

@@ -1,5 +1,6 @@
 import "prism-code-editor/search.css"
 import "prism-code-editor/copy-button.css"
+import "prism-code-editor/code-folding.css"
 import "prism-code-editor/languages"
 import "prismjs/components/prism-markup"
 import "prismjs/components/prism-css"
@@ -14,6 +15,7 @@ import { copyButton } from "prism-code-editor/copy-button"
 import { defaultCommands } from "prism-code-editor/commands"
 import { highlightSelectionMatches, searchWidget } from "prism-code-editor/search"
 import { cursorPosition } from "prism-code-editor/cursor"
+import { readOnlyCodeFolding } from "prism-code-editor/code-folding"
 import { matchTags } from "prism-code-editor/match-tags"
 import { highlightBracketPairs } from "prism-code-editor/highlight-brackets"
 import { code } from "./examples2"
@@ -47,20 +49,19 @@ const tabs = wrapper.querySelectorAll(".tab")
 const errorEl = <HTMLDivElement>wrapper.querySelector(".error")!
 const errorMessage = <HTMLPreElement>errorEl.lastElementChild
 
-const langs = ["tsx", "jsx", "typescript", "javascript", "typescript", "html", "javascript"]
+const langs = ["tsx", "jsx", "typescript", "javascript", "typescript", "html", "javascript", "html"]
 
 const runBtn = <HTMLButtonElement>document.getElementById("run")
 
 const theme = <HTMLSelectElement>document.getElementById("themes"),
 	addWidgets = (editor: PrismEditor) => {
-		const cursor = cursorPosition()
 		editor.addExtensions(
 			searchWidget(),
 			highlightSelectionMatches(),
 			matchTags(),
 			highlightBracketPairs(),
-			defaultCommands(cursor),
-			cursor,
+			defaultCommands(),
+			cursorPosition(),
 		)
 	},
 	toggleActive = () => {
@@ -83,10 +84,13 @@ const observer = new IntersectionObserver(
 	e =>
 		e.forEach(entry => {
 			if (!entry.isIntersecting) return
-
 			const index = editors.findIndex(e => e.scrollContainer == entry.target)
 			observer.unobserve(entry.target)
-			editors[index].setOptions({ value: code[index - 1], language: langs[index - 1] })
+			editors[index].setOptions({
+				value: code[index - 1],
+				language: langs[index - 1],
+				readOnly: index > 7,
+			})
 		}),
 	{
 		rootMargin: "9999px 0px 500px 0px",
@@ -127,7 +131,7 @@ runBtn.onclick = () => {
 	}
 
 	editor1.remove()
-	addWidgets?.(editor1 = newEditor)
+	addWidgets?.((editor1 = newEditor))
 	toggleActive()
 	newEditor.textarea.focus()
 }
@@ -137,16 +141,19 @@ for (const prop of ["readOnly", "wordWrap", "lineNumbers"]) {
 		const options = {
 			[prop]: (<HTMLInputElement>e.target).checked,
 		}
-		editors.forEach(editor => editor.setOptions(options))
+		editors.forEach((editor, i) => {
+			if (prop != "readOnly" || i < 8) editor.setOptions(options)
+		})
 	}
 }
 
-for (let i = 3; i < 7; i++) {
+for (let i = 3; i < 8; i++) {
 	sections[i].querySelectorAll(".prism-editor").forEach(el => observer.observe(el))
 }
 
 for (let e of [editor, editor1, ...editors]) addWidgets(e)
 editors.forEach(e => e.addExtensions(copyButton()))
+editors[8].addExtensions(readOnlyCodeFolding())
 
 const commands = editor.keyCommandMap,
 	oldEnter = commands.Enter

website/src/examples2.ts

@@ -55,15 +55,14 @@ import { matchTags } from "prism-code-editor/match-tags"
 import { highlightBracketPairs } from "prism-code-editor/highlight-brackets"
 
 export const addExtensions = (editor: PrismEditor) => {
-  const cursor = cursorPosition()
   editor.addExtensions(
     highlightSelectionMatches(),
     searchWidget(),
     defaultCommands(cursor),
     copyButton(),
     matchTags(),
     highlightBracketPairs(),
-    cursor,
+    cursorPosition(),
   )
 }`,
 
@@ -74,7 +73,7 @@ import "prismjs/components/prism-clike.js"
 import "prismjs/components/prism-javascript.js"
 
 import { createEditor } from "prism-code-editor"
-import { bracketMatcher } from "prism-code-editor/match-brackets"
+import { matchBrackets } from "prism-code-editor/match-brackets"
 import { indentGuides } from "prism-code-editor/guides"
 
 // Importing styles
@@ -87,7 +86,7 @@ const editor = createEditor(
   "#editor",
   { language: "html" },
   indentGuides(),
-  bracketMatcher(true),
+  matchBrackets(true),
 )
 
 import('./extensions').then(module => {
@@ -170,4 +169,49 @@ languages.whatever = {
     ([start, end], value) => /\\[]|\\(\\)|{}/.test(value[start - 1] + value[end])
   ]
 }`,
+	`<!DOCTYPE html>
+<html lang="en">
+<head>
+	<style>
+		/* You probably want to give extra space for the fold gutters */
+		.prism-editor {
+			--number-spacing: 1.5em;
+		}
+	</style>
+</head>
+<body>
+	<div id="myEditor"></div>
+	<script type="module">
+		import { readOnlyCodeFolding } from "prism-code-editor/code-folding"
+		import { createEditor } from "prism-code-editor"
+		import { indentGuides } from "prism-code-editor/guides"
+		import { matchBrackets } from "prism-code-editor/match-brackets"
+		import { matchTags } from "prism-code-editor/match-tags"
+		import "prism-code-editor/code-folding.css"
+
+		/* Not all necessary imports are shown above.
+
+		To fold matching curly/square brackets or XML elements,
+		you will need a bracket matcher and a tag matcher respectively.
+		Those extensions should be added before the code folding.
+
+		Folding of multiline comments is also supported, but you will
+		need to import language specific behavior for it to work. */
+
+		const editor = createEditor(
+			Prism,
+			"#myEditor",
+			{
+				language: "html",
+				readOnly: true,
+				value: "<div>\\n  test\\n</div>"
+			},
+			indentGuides(),
+			matchBrackets(true),
+			matchTags(),
+			readOnlyCodeFolding()
+		)
+	</script>
+</body>
+</html>`,
 ]

website/src/index.ts

@@ -6,16 +6,15 @@ import "prism-code-editor/scrollbar.css"
 import "./style.css"
 import initialTheme from "prism-code-editor/themes/github-dark.css?inline"
 import { startOptions, basicUsage } from "./examples1"
-import { bracketMatcher } from "prism-code-editor/match-brackets"
+import { matchBrackets } from "prism-code-editor/match-brackets"
 import { indentGuides } from "prism-code-editor/guides"
 
 const style = document.createElement("style")
 const wrapper = document.querySelector<HTMLDivElement>(".editor-wrapper")!
 const sections = document.getElementsByTagName("section")
 
-const makeEditor = (container: ParentNode | string, options?: Partial<EditorOptions>) => 
-	createEditor(Prism, container, options, bracketMatcher(true), indentGuides())
-
+const makeEditor = (container: ParentNode | string, options?: Partial<EditorOptions>) =>
+	createEditor(Prism, container, options, matchBrackets(true), indentGuides())
 
 const editor = makeEditor(wrapper, {
 	language: "javascript",
@@ -26,7 +25,7 @@ for (const section of sections) {
 	section.querySelectorAll("div").forEach(div => div.remove())
 }
 
-const editors = [2, 3, 3, 4, 4, 5, 5, 6].map(data =>
+const editors = [2, 3, 3, 4, 4, 5, 5, 6, 7].map(data =>
 	makeEditor(sections[data], { language: "javascript" }),
 )
 

website/src/style.css

@@ -289,6 +289,10 @@ option {
 	font-size: 1.8rem;
 }
 
+.folding {
+	--number-spacing: 1.5em;
+}
+
 @media (prefers-color-scheme: dark) {
 	:root {
 		--bg: #0d1117;