feat: remove wrapping support

Microflash · Aug 2, 2024 · c10ac8f · c10ac8f
1 parent 919d61c
commit c10ac8f
Show file tree

Hide file tree

Showing 8 changed files with 236 additions and 290 deletions.
diff --git a/README.md b/README.md
@@ -23,7 +23,6 @@
 	- [Example: Codeblock with title](#example-codeblock-with-title)
 	- [Example: Codeblock with prompts](#example-codeblock-with-prompts)
 	- [Example: Codeblock with command and its output](#example-codeblock-with-command-and-its-output)
-	- [Example: Codeblock with wrapped lines](#example-codeblock-with-wrapped-lines)
 	- [Example: Codeblock with highlighted lines](#example-codeblock-with-highlighted-lines)
 	- [Example: Codeblock with added and removed lines](#example-codeblock-with-added-and-removed-lines)
 	- [Example: Codeblock with unknown language](#example-codeblock-with-unknown-language)
@@ -50,7 +49,6 @@ The following additonal features are also available out of box:
 - line numbers
 - line highlights
 - annotations for added and removed lines
-- conditionally wrapping lines
 - prompt character
 - title and language information
 - highlighting inline `code` elements
@@ -437,38 +435,6 @@ The above codeblock gets rendered as:
 
 The plugin marks the output lines with `[data-unselectable]` attribute. You can set `user-select: none` for such elements using CSS. See [`index.css`](./src/index.css#L139).
 
-### Example: Codeblock with wrapped lines
-
-Sometimes you may want to avoid scrolling a long line containing important information at the very end. In such cases, you can wrap the codeblock with `wrap="true"` property.
-
-	```sh wrap="true"
-	# download the formula for node@20.5.1
-	curl -o node.rb https://raw.githubusercontent.com/Homebrew/homebrew-core/442f9cc511ce6dfe75b96b2c83749d90dde914d2/Formula/n/node.rb
-
-	# install with the downloaded formula
-	brew install node.rb
-	```
-
-The above codeblock gets rendered as:
-
-```html
-<div class="hl hl-sh">
-  <div class="hl-header">
-    <div class="hl-language">sh</div>
-  </div>
-<pre id="MC41OTIxMDEz" style="--hl-line-number-gutter-factor: 1" data-pre-wrap=""><code tabindex="0"><span class="line"><span class="line-number" aria-hidden="true">1</span><span class="pl-c"># download the formula for node@20.5.1</span></span>
-<span class="line"><span class="line-number" aria-hidden="true">2</span>curl -o node.rb https://raw.githubusercontent.com/Homebrew/homebrew-core/442f9cc511ce6dfe75b96b2c83749d90dde914d2/Formula/n/node.rb</span>
-<span class="line"><span class="line-number" aria-hidden="true">3</span></span>
-<span class="line"><span class="line-number" aria-hidden="true">4</span><span class="pl-c"># install with the downloaded formula</span></span>
-<span class="line"><span class="line-number" aria-hidden="true">5</span>brew install node.rb</span>
-</code></pre>
-</div>
-```
-
-![Syntax Highlighting codeblock with wrapped lines](./samples/codeblock-with-wrapped-lines.png)
-
-When you set `wrap="true"`, the plugin attaches a `[data-pre-wrap]` attribute on the `pre` element. You can use CSS to set `white-space: pre-wrap` on the `code` element to enable wrapping. See [`index.css`](./src/index.css#L68).
-
 ### Example: Codeblock with highlighted lines
 
 You can highlight lines by specifying the line numbers (or even, range of line numbers) between curly braces in the codeblock metadata.

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@microflash/rehype-starry-night",
-	"version": "6.1.0",
+	"version": "7.0.0",
 	"description": "rehype plugin to highlight codeblocks with Starry Night",
 	"license": "MIT",
 	"keywords": [
@@ -66,7 +66,7 @@
 		"remark-parse": "^11.0.0",
 		"remark-rehype": "^11.1.0",
 		"unified": "^11.0.5",
-		"vitest": "^2.0.4"
+		"vitest": "^2.0.5"
 	},
 	"packageManager": "pnpm@9.6.0"
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/samples/codeblock-with-wrapped-lines.png b/samples/codeblock-with-wrapped-lines.png
diff --git a/src/index.css b/src/index.css
@@ -62,11 +62,7 @@
 	padding: var(--hlLineGap) 0;
 	cursor: auto;
 	touch-action: auto;
-	white-space: var(--hlCodeWhiteSpace, pre);
-}
-
-.hl pre[data-pre-wrap]>code {
-	--hlCodeWhiteSpace: pre-wrap;
+	white-space: pre;
 }
 
 .hl .line {

diff --git a/src/rehype-starry-night/index.js b/src/rehype-starry-night/index.js
@@ -117,12 +117,6 @@ export default function rehypeStarryNight(userOptions = {}) {
 				preProps["style"] += `; --hl-line-marker-gutter-factor: ${globalOptions.lineMarkerGutterFactor}`;
 			}
 
-			// add `data-pre-wrap` property to indicate if the codeblock should be wrapped
-			const { wrap = "" } = globalOptions?.metadata;
-			if (wrap.trim() === "true") {
-				preProps["data-pre-wrap"] = "";
-			}
-
 			// prepare codeblock nodes
 			const preChildren = [];
 			for (const [lineNumber, line] of lines) {

diff --git a/test/rehype-starry-night/fixtures.js b/test/rehype-starry-night/fixtures.js
@@ -98,14 +98,6 @@ curl localhost:8080/greeter?name=Anya
 Hello, Anya!
 \`\`\`
 `,
-	},
-	{
-		title: "codeblock with wrapped lines",
-		input: `
-\`\`\`sh wrap="true"
-/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
-\`\`\`
-`
 	},
 	{
 		title: "codeblock with highlighted lines",

diff --git a/test/rehype-starry-night/snapshots/codeblock_with_wrapped_lines.html b/test/rehype-starry-night/snapshots/codeblock_with_wrapped_lines.html