Skip to content

Commit

Permalink
Improve website examples and word highlighting
Browse files Browse the repository at this point in the history
  • Loading branch information
FIameCaster committed Nov 4, 2023
1 parent e8bc475 commit 34b866e
Show file tree
Hide file tree
Showing 5 changed files with 50 additions and 48 deletions.
9 changes: 4 additions & 5 deletions website/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ <h2>Basic usage</h2>
<div style="height:29.4rem"></div>
</section>
<section>
<h2>With framewords</h2>
<h2>With frameworks</h2>
<p>The API is very friendly towards creating wrappers for most frameworks. Under is an example of a wrapper for React.</p>
<div style="height:55.4rem"></div>
<p>This is how the component could be used:</p>
Expand All @@ -91,9 +91,9 @@ <h2>With framewords</h2>
<section>
<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 extensions. This can be made easier by creating a module that exports a function adding the extensions.</p>
<div style="height:53.4rem"></div>
<div style="height:47.4rem"></div>
<div style="height:45.4rem"></div>
<p>To minimize your main javascript bundle, you can dynamically import extensions.</p>
<div style="height:49.4rem"></div>
</section>
<section>
<h2>Web components</h2>
Expand All @@ -104,7 +104,6 @@ <h2>Web components</h2>
</section>
<section>
<h2 style="border: 0; padding: 0;">Various examples</h2>
<p>The word highlighting extension has also been added to the editor below.</p>
<div style="height:79.4rem"></div>
</section>
<section id="folding">
Expand Down
22 changes: 14 additions & 8 deletions website/src/dynamic.ts
Original file line number Diff line number Diff line change
Expand Up @@ -90,13 +90,22 @@ const langs = [
"tsx",
"jsx",
"typescript",
"javascript",
"typescript",
"typescript",
"html",
"javascript",
"markdown",
]

const addWordHighlight = (editor: PrismEditor, jsx?: boolean) => {
let selector =
".string,.comment,.keyword,.regex" + (jsx ? ",.tag>.tag,.tag>.attr-value,.plain-text" : "")

editor.addExtensions(
highlightCurrentWord(start => !getClosestToken(editor, selector, 0, 0, start)),
)
}

const inputs = ["readOnly", "wordWrap", "lineNumbers"].map(
id => <HTMLInputElement>document.getElementById(id)!,
)
Expand All @@ -118,17 +127,13 @@ const observer = new IntersectionObserver(entries =>
language: langs[index - 1],
value: code[index - 1],
},
matchBrackets(true),
matchBrackets(),
indentGuides(),
copyButton(),
))
addExtensions(editor)
if (index == 7) {
editor.addExtensions(
highlightCurrentWord(
start => !getClosestToken(editor, ".string,.comment,.keyword,.regex", 0, 0, start),
),
)
if (index < 6 || index == 7) {
addWordHighlight(editor, index < 3)
}
if (index == 8) {
editor.addExtensions(readOnlyCodeFolding(markdownFolding))
Expand Down Expand Up @@ -187,6 +192,7 @@ inputs.forEach(
)
addExtensions(editor)
addExtensions(editors[0])
addWordHighlight(editors[0])
editors[0].addExtensions(copyButton())

commands.Enter = (e, selection, value) => {
Expand Down
63 changes: 30 additions & 33 deletions website/src/examples2.ts
Original file line number Diff line number Diff line change
Expand Up @@ -38,34 +38,8 @@ export const PrismEditorReact = forwardRef((
/>
}`,

`// extensions.ts
import "prism-code-editor/search.css"
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) => {
editor.addExtensions(
highlightSelectionMatches(),
searchWidget(),
defaultCommands(),
copyButton(),
matchTags(),
highlightBracketPairs(),
cursorPosition(),
)
}`,

`import "prism-code-editor/grammars/markup"
`// index.ts
import "prism-code-editor/grammars/markup"
import "prism-code-editor/grammars/css-extras"
import "prism-code-editor/grammars/js-extras"
Expand All @@ -78,16 +52,39 @@ import "prism-code-editor/layout.css"
import "prism-code-editor/scrollbar.css"
import "prism-code-editor/themes/github-dark.css"
const editor = createEditor(
export const editor = createEditor(
"#editor",
{ language: "html" },
indentGuides(),
matchBrackets(),
)
import('./extensions')`,

import('./extensions').then(module => {
module.addExtensions(editor)
})`,
`// extensions.ts
import "prism-code-editor/search.css"
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 { 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"
import { editor } from "./index"
editor.addExtensions(
highlightSelectionMatches(),
searchWidget(),
defaultCommands(),
copyButton(),
matchTags(),
highlightBracketPairs(),
cursorPosition(),
)`,

`import {
addBasicEditor, PrismEditorElement
Expand Down Expand Up @@ -123,7 +120,7 @@ console.log(editorElement.editor)`,
`import { createEditor } from "prism-code-editor"
const editor = createEditor("#editor", { language: "html" })
// Adding the word highlighting that's present in this editor
// Adding the word highlighting extension
import { highlightCurrentWord } from "prism-code-editor/search"
import { getClosestToken } from "prism-code-editor/utils"
Expand Down
2 changes: 1 addition & 1 deletion website/src/javascript.ts
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ Object.assign(js, {
},
{
pattern:
/(^|[^.]|\.\.\.\s*)\b(?:await|break|catch|continue|do|else|finally|for|if|return|switch|throw|try|while|yield)\b/,
/(^|[^.]|\.\.\.\s*)\b(?:await|break|case|catch|continue|do|else|finally|for|if|return|switch|throw|try|while|yield)\b/,
alias: "control-flow",
lookbehind: true,
},
Expand Down
2 changes: 1 addition & 1 deletion website/src/jsLangs.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 34b866e

Please sign in to comment.