From 9b70e814dee65a5877898e5ae870e13f5473f9b3 Mon Sep 17 00:00:00 2001 From: FIameCaster <82079841+FIameCaster@users.noreply.github.com> Date: Sun, 3 Sep 2023 16:45:12 +0200 Subject: [PATCH] Added code folding example to website --- website/index.html | 7 +++++- website/src/dynamic.ts | 25 ++++++++++++------- website/src/examples2.ts | 52 ++++++++++++++++++++++++++++++++++++---- website/src/index.ts | 9 ++++--- website/src/style.css | 4 ++++ 5 files changed, 78 insertions(+), 19 deletions(-) diff --git a/website/index.html b/website/index.html index fd4257bd..6044af96 100644 --- a/website/index.html +++ b/website/index.html @@ -94,7 +94,7 @@

Advanced usage

Web components

-

The library includes a custom element wrapper for all 4 setups you can import.

+

The library includes a custom element wrapper for each of the 4 setups you can import.

The custom element can be used like this:

@@ -103,5 +103,10 @@

Web components

Various examples

+
+

Read-only code folding

+

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.

+
+
\ No newline at end of file diff --git a/website/src/dynamic.ts b/website/src/dynamic.ts index 7bce77ae..48e738bc 100644 --- a/website/src/dynamic.ts +++ b/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 = wrapper.querySelector(".error")! const errorMessage = errorEl.lastElementChild -const langs = ["tsx", "jsx", "typescript", "javascript", "typescript", "html", "javascript"] +const langs = ["tsx", "jsx", "typescript", "javascript", "typescript", "html", "javascript", "html"] const runBtn = document.getElementById("run") const theme = 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]: (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 diff --git a/website/src/examples2.ts b/website/src/examples2.ts index 084bfd29..7fbc0bcd 100644 --- a/website/src/examples2.ts +++ b/website/src/examples2.ts @@ -55,7 +55,6 @@ 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(), @@ -63,7 +62,7 @@ export const addExtensions = (editor: PrismEditor) => { 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]) ] }`, + ` + + + + + +
+ + +`, ] diff --git a/website/src/index.ts b/website/src/index.ts index a5ee4302..cfe16623 100644 --- a/website/src/index.ts +++ b/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(".editor-wrapper")! const sections = document.getElementsByTagName("section") -const makeEditor = (container: ParentNode | string, options?: Partial) => - createEditor(Prism, container, options, bracketMatcher(true), indentGuides()) - +const makeEditor = (container: ParentNode | string, options?: Partial) => + 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" }), ) diff --git a/website/src/style.css b/website/src/style.css index a6a91ebf..dbe10015 100644 --- a/website/src/style.css +++ b/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;