Merge d414d01 into 37cc019

Author: zchsh

.changeset/two-impalas-speak.md

@@ -0,0 +1,5 @@
+---
+'@hashicorp/react-code-block': minor
+---
+
+Implements support for code wrapping, through an options.wrapCode boolean property.

packages/code-block/docs.mdx

@@ -34,6 +34,9 @@ Longer lines of code may take up more space than the available content width. In
 ````
 ```
 A line that goes on for a very long time so that it overflows the container in which it is located, which might be a pretty wide container.
+This is a second line of code.
+And a third line.
+And another line, this is the fourth line.
 ```
 ````
 
@@ -42,7 +45,54 @@ A line that goes on for a very long time so that it overflows the container in w
 <CodeBlock
   options={{ showClipboard: true }}
   theme="dark"
-  code={`A line that goes on for a very long time so that it overflows the container in which it is located, which might be a pretty wide container.`}
+  code={`A line that goes on for a very long time so that it overflows the container in which it is located, which might be a pretty wide container.\nThis is a second line of code.\nAnd a third line.\nAnd another line, this is the fourth line.`}
+/>
+
+Note this also works with line numbers and line highlighting.
+
+<CodeBlock
+  options={{ showClipboard: true, lineNumbers: true, highlight: '1,3' }}
+  theme="dark"
+  code={`A line that goes on for a very long time so that it overflows the container in which it is located, which might be a pretty wide container.\nThis is a second line of code.\nAnd a third line.\nAnd another line, this is the fourth line.`}
+/>
+
+#### Wrap Code
+
+In cases where wrapping code to new lines is preferred over horizontal scrolling, the `options.wrapCode` prop can be set to `true`. Note that this option is not yet supported in MDX contexts.
+
+`Source`
+
+````
+```
+A line that goes on for a very long time so that it overflows the container in which it is located, which might be a pretty wide container.
+This is a second line of code.
+And a third line.
+And another line, this is the fourth line.
+```
+````
+
+`Result`
+
+<CodeBlock
+  options={{
+    showClipboard: true,
+    wrapCode: true,
+  }}
+  theme="dark"
+  code={`A line that goes on for a very long time so that it overflows the container in which it is located, which might be a pretty wide container.\nThis is a second line of code.\nAnd a third line.\nAnd another line, this is the fourth line.`}
+/>
+
+Note this also works with line numbers and line highlighting.
+
+<CodeBlock
+  options={{
+    showClipboard: true,
+    lineNumbers: true,
+    wrapCode: true,
+    highlight: '1,3',
+  }}
+  theme="dark"
+  code={`A line that goes on for a very long time so that it overflows the container in which it is located, which might be a pretty wide container.\nThis is a second line of code.\nAnd a third line.\nAnd another line, this is the fourth line.`}
 />
 
 #### Syntax Highlighting
@@ -219,7 +269,7 @@ function hello() {
   options={{ lineNumbers: true, showClipboard: true }}
   code={`<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'bar'</span>
 <span class="token keyword">function</span> <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-{/* */}  <span class="token keyword control-flow">return</span> <span class="token known-class-name class-name">Math</span><span class="token punctuation">.</span><span class="token method function property-access">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token number">0.5</span> <span class="token operator">?</span> <span class="token string">'Hello'</span> <span class="token operator">:</span> <span class="token string">'Bonjour'</span>
+  <span class="token keyword control-flow">return</span> <span class="token known-class-name class-name">Math</span><span class="token punctuation">.</span><span class="token method function property-access">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token number">0.5</span> <span class="token operator">?</span> <span class="token string">'Hello'</span> <span class="token operator">:</span> <span class="token string">'Bonjour'</span>
 <span class="token punctuation">}</span>`}
 />
 

packages/code-block/index.tsx

@@ -21,12 +21,13 @@ import s from './style.module.css'
 
 export interface CodeBlockOptions {
   showChrome?: boolean
-  highlight?: boolean
+  highlight?: string
   lineNumbers?: boolean
   showClipboard?: boolean
   showWindowBar?: boolean
   filename?: string
   heading?: string
+  wrapCode?: boolean
 }
 
 export interface CodeBlockProps {
@@ -48,10 +49,10 @@ function CodeBlock({
   onCopyCallBack,
   options = {
     showChrome: false,
-    highlight: false,
     lineNumbers: false,
     showClipboard: false,
     showWindowBar: false,
+    wrapCode: false,
   },
 }: CodeBlockProps) {
   const copyRef = useRef<HTMLPreElement>()
@@ -76,6 +77,7 @@ function CodeBlock({
     lineNumbers,
     showClipboard,
     showWindowBar,
+    wrapCode,
   } = options
   if (showWindowBar) {
     console.warn(
@@ -119,6 +121,7 @@ function CodeBlock({
           highlight={highlight}
           lineNumbers={lineNumbers}
           hasFloatingCopyButton={hasFloatingCopyButton}
+          wrapCode={wrapCode}
         />
         {hasFloatingCopyButton ? (
           <div className={s.copyButtonContainer}>

packages/code-block/partials/code-lines/style.module.css renamed to packages/code-block/partials/code-lines/code-lines.module.css

@@ -9,6 +9,12 @@ code-block/theme-(dark|light).module.css
 to be present.
 */
 
+/*
+
+SHARED
+
+*/
+
 pre.pre {
   --code-padding: 16px;
   --code-font-size: 0.84375rem; /* 13.5 px at default text size */
@@ -32,6 +38,83 @@ pre.pre {
   overflow: hidden;
 }
 
+.LineNumber {
+  composes: g-type-code from global;
+  display: block;
+  font-size: var(--code-font-size);
+  line-height: var(--code-line-height);
+  white-space: pre;
+  padding: 0 var(--code-padding);
+  color: var(--text-color-faded);
+
+  &.wrap {
+    border-right: 1px solid var(--divider-line-color);
+  }
+
+  &.highlight {
+    background: var(--background-highlighted-line);
+    color: var(--text-color-base);
+  }
+
+  &.dim > * {
+    color: var(--text-color-faded);
+  }
+}
+
+.LineOfCode {
+  composes: g-type-code from global;
+  display: block;
+  color: var(--text-color-base);
+  padding-right: calc(var(--code-padding) * 2);
+  padding-left: var(--code-padding);
+  font-size: var(--code-font-size);
+  line-height: var(--code-line-height);
+  min-width: max-content;
+  white-space: pre;
+
+  &.wrap {
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    min-width: 0;
+    width: 100%;
+  }
+
+  &.padRight {
+    /* Adds right padding so that the floating copy button
+    does not obscure content at the end of the line */
+    padding-right: 96px;
+  }
+
+  &.highlight {
+    background: var(--background-highlighted-line);
+  }
+
+  &.dim {
+    opacity: 0.7;
+
+    &,
+    & * {
+      /* !important is necessary here to override
+      syntax highlight color styles, which are
+      globally scoped by necessity */
+      color: var(--text-color-faded) !important;
+    }
+  }
+}
+
+/*
+
+SCROLL OVERFLOW LAYOUT
+
+*/
+
+.numbersColumn {
+  display: block;
+  border-right: 1px solid var(--divider-line-color);
+  flex-shrink: 0;
+  padding: var(--code-padding) 0;
+}
+
 .linesColumn {
   display: block;
   flex-grow: 1;
@@ -76,70 +159,36 @@ pre.pre {
   }
 }
 
-.linesWrapper {
+.linesScrollableContent {
   display: flex;
   width: max-content;
   min-width: 100%;
   flex-direction: column;
   flex-shrink: 0;
 }
 
-.numbersColumn {
-  display: block;
-  border-right: 1px solid var(--divider-line-color);
-  flex-shrink: 0;
-  padding: var(--code-padding) 0;
-}
+/*
 
-.LineNumber {
-  composes: g-type-code from global;
-  display: block;
-  font-size: var(--code-font-size);
-  line-height: var(--code-line-height);
-  white-space: pre;
-  padding: 0 var(--code-padding);
-  color: var(--text-color-faded);
+WRAP LAYOUT
 
-  &.isHighlighted {
-    background: var(--background-highlighted-line);
-    color: var(--text-color-base);
-  }
+*/
 
-  &.isNotHighlighted > * {
-    color: var(--text-color-faded);
-  }
+.wrappedLinesContainer {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  flex-shrink: 0;
 }
 
-.LineOfCode {
-  composes: g-type-code from global;
-  display: block;
-  color: var(--text-color-base);
-  padding-right: calc(var(--code-padding) * 2);
-  padding-left: var(--code-padding);
-  font-size: var(--code-font-size);
-  line-height: var(--code-line-height);
-  min-width: max-content;
-  white-space: pre;
-
-  &.hasFloatingCopyButton {
-    /* Adds right padding so that the floating copy button
-    does not obscure content at the end of the line */
-    padding-right: 96px;
-  }
-
-  &.isHighlighted {
-    background: var(--background-highlighted-line);
-  }
-
-  &.isNotHighlighted {
-    opacity: 0.7;
+.wrappedLine {
+  display: flex;
+  flex-wrap: nowrap;
+}
 
-    &,
-    & * {
-      /* !important is necessary here to override
-      syntax highlight color styles, which are
-      globally scoped by necessity */
-      color: var(--text-color-faded) !important;
-    }
-  }
+/* adds space at the top and bottom of the block,
+   while supporting a continuous border for line numbers */
+.wrappedLinesSpacer {
+  display: flex;
+  flex-wrap: nowrap;
+  height: var(--code-padding);
 }