Update website with new bracket matching

FIameCaster · Aug 25, 2023 · a21ba9d · a21ba9d
1 parent bc682f2
commit a21ba9d
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 14 deletions.
diff --git a/website/index.html b/website/index.html
@@ -4,14 +4,14 @@
 	<meta charset="UTF-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<meta name="description" content="Lightweight, extensible code editor for the web using Prism">
+	<meta name="description" content="Lightweight, extensible code editor component for the web using Prism">
 	<title>Prism code editor</title>
 	<script type="module" src="src/index.ts"></script>
 </head>
 <body>
 	<main>
 		<h1>Prism code editor</h1>
-		<p class="description">Lightweight, extensible code editor for the web using <a class="link" href="https://prismjs.com">Prism</a></p>
+		<p class="description">Lightweight, extensible code editor component for the web using <a class="link" href="https://prismjs.com">Prism</a></p>
 		<div class="rows">
 			<a class="btn" href="https://github.com/FIameCaster/prism-code-editor">Documentation</a>
 			<div class="input-group">
@@ -85,10 +85,10 @@ <h2>With framewords</h2>
 		<p>This is how the component could be used:</p>
 		<div style="--height: 22.3rem;"></div>
 	</section>
-	<section style="--height: 52.3rem">
+	<section style="--height: 54.3rem">
 		<h2>Advanced usage</h2>
 		<p>With little effort, you can fully customize which extensions are added and how they're loaded.</p>
-		<p>To minimize your main javascript bundle, you can dynamically import most extensions. This can be made easier by creating a module that exports a function adding the extensions.</p>
+		<p>To minimize your main javascript bundle, you can dynamically import extensions. This can be made easier by creating a module that exports a function adding the extensions.</p>
 		<div></div>
 		<div></div>
 	</section>

diff --git a/website/src/dynamic.ts b/website/src/dynamic.ts
@@ -15,6 +15,7 @@ import { defaultCommands } from "prism-code-editor/commands"
 import { highlightSelectionMatches, searchWidget } from "prism-code-editor/search"
 import { cursorPosition } from "prism-code-editor/cursor"
 import { matchTags } from "prism-code-editor/match-tags"
+import { highlightBracketPairs } from "prism-code-editor/highlight-brackets"
 import { code } from "./examples2"
 import { PrismEditor, getModifierCode, isMac } from "prism-code-editor"
 import { loadTheme } from "prism-code-editor/themes"
@@ -57,6 +58,7 @@ const theme = <HTMLSelectElement>document.getElementById("themes"),
 			searchWidget(),
 			highlightSelectionMatches(),
 			matchTags(),
+			highlightBracketPairs(),
 			defaultCommands(cursor),
 			cursor,
 		)
@@ -125,8 +127,7 @@ runBtn.onclick = () => {
 	}
 
 	editor1.remove()
-	editor1 = newEditor
-	addWidgets?.(editor1)
+	addWidgets?.(editor1 = newEditor)
 	toggleActive()
 	newEditor.textarea.focus()
 }

diff --git a/website/src/examples2.ts b/website/src/examples2.ts
@@ -46,13 +46,13 @@ import "prism-code-editor/copy-button.css"
 import "prism-code-editor/languages/html"
 import "prism-code-editor/languages/clike"
 import "prism-code-editor/languages/css"
-
 import { PrismEditor } from "prism-code-editor"
 import { searchWidget, highlightSelectionMatches } from "prism-code-editor/search"
 import { defaultCommands } from "prism-code-editor/commands"
 import { cursorPosition } from "prism-code-editor/cursor"
 import { copyButton } from "prism-code-editor/copy-button"
 import { matchTags } from "prism-code-editor/match-tags"
+import { highlightBracketPairs } from "prism-code-editor/highlight-brackets"
 
 export const addExtensions = (editor: PrismEditor) => {
   const cursor = cursorPosition()
@@ -62,6 +62,7 @@ export const addExtensions = (editor: PrismEditor) => {
     defaultCommands(cursor),
     copyButton(),
     matchTags(),
+    highlightBracketPairs(),
     cursor,
   )
 }`,
@@ -73,8 +74,9 @@ import "prismjs/components/prism-clike.js"
 import "prismjs/components/prism-javascript.js"
 
 import { createEditor } from "prism-code-editor"
-import { matchBrackets } from "prism-code-editor/match-brackets"
+import { bracketMatcher } from "prism-code-editor/match-brackets"
 import { indentGuides } from "prism-code-editor/guides"
+
 // Importing styles
 import "prism-code-editor/layout.css"
 import "prism-code-editor/scrollbar.css"
@@ -85,7 +87,7 @@ const editor = createEditor(
   "#editor",
   { language: "html" },
   indentGuides(),
-  matchBrackets()
+  bracketMatcher(true),
 )
 
 import('./extensions').then(module => {

diff --git a/website/src/index.ts b/website/src/index.ts
@@ -1,20 +1,21 @@
 import Prism from "prism-code-editor/prism-core"
 import "./javascript"
 import { EditorOptions, createEditor } from "prism-code-editor"
-import { indentGuides } from "prism-code-editor/guides"
-import { matchBrackets } from "prism-code-editor/match-brackets"
 import "prism-code-editor/layout.css"
 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 { 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, indentGuides(), matchBrackets())
+const makeEditor = (container: ParentNode | string, options?: Partial<EditorOptions>) => 
+	createEditor(Prism, container, options, bracketMatcher(true), indentGuides())
+
 
 const editor = makeEditor(wrapper, {
 	language: "javascript",
@@ -37,6 +38,6 @@ editors[2].scrollContainer.style.maxHeight = "22.3rem"
 editors[2].scrollContainer.before(sections[3].children[2])
 editors[6].scrollContainer.before(sections[5].children[2])
 
-setTimeout(() => import("./dynamic"))
+import("./dynamic")
 
 export { editor, editors, startOptions, wrapper, sections, makeEditor, style }