Wrap fenced code blocks on-demand

docs/userGuide/plugins/codeBlockCopyButtons.mbdf

@@ -1,6 +1,6 @@
 ### Plugin: `codeBlockCopyButtons`
 
-This plugin adds a 'copy' button to fenced code blocks so that readers can copy the code easily.
+This plugin adds a *copy* button to fenced code blocks so that readers can copy the code easily.
 
 To enable it, simply add `codeBlockCopyButtons` to your site's plugins.
 
@@ -13,6 +13,6 @@ To enable it, simply add `codeBlockCopyButtons` to your site's plugins.
 }
 ```
 
-This is what it'll look like once added
+This is what it'll look like once added:
 
 <pic src="{{baseUrl}}/images/copyCode.png" width="750" alt="copyCode"/>

docs/userGuide/plugins/codeBlockWrapButtons.mbdf

@@ -0,0 +1,28 @@
+### Plugin: `codeBlockWrapButtons`
+
+This plugin adds a *wrap text* button to fenced code blocks so that readers can read long lines of code without scrolling sideways.
+
+To enable it, simply add `codeBlockWrapButtons` to your site's plugins.
+
+```js {heading="site.json"}
+{
+  ...
+  "plugins": [
+    "codeBlockWrapButtons"
+  ],
+}
+```
+
+This is what it'll look like once added:
+
+<pic src="{{baseUrl}}/images/wrapCodeOff.png" width="750" alt="wrapCodeOff"/>
+
+Clicking the *wrap text* button will result in the following:
+
+<pic src="{{baseUrl}}/images/wrapCodeOn.png" width="750" alt="wrapCodeOn"/>
+
+In case a single long word is encountered, it will be split across multiple lines similar to the following:
+
+<pic src="{{baseUrl}}/images/wrapCodeOnWordBreak.png" width="750" alt="wrapCodeOnWordBreak"/>
+
+--Note: the default `foo` code was replaced with [_Lorem ipsum_](https://en.wikipedia.org/wiki/Lorem_ipsum) text for demonstration purposes.--

docs/userGuide/syntax/code.mbdf

@@ -168,6 +168,17 @@ A _copy_ button can be added to code blocks using the `codeBlockCopyButtons` plu
 </panel>
 <br>
 
+##### Wrap text button
+
+A _wrap text_ button can be added to code blocks using the `codeBlockWrapButtons` plugin:
+
+<panel type="seamless" header="**User Guide: Using Plugins → Plugin: `codeBlockWrapButtons`**" popup-url="usingPlugins.html#plugin-codeblockwrapbuttons">
+
+  <include src="../plugins/codeBlockWrapButtons.mbdf" />
+
+</panel>
+<br>
+
 #### Inline Code
 ##### Syntax coloring
 

docs/userGuide/usingPlugins.md

@@ -58,6 +58,7 @@ MarkBind has a set of built-in plugins that can be used immediately without inst
 
 <include src="plugins/algolia.mbdf" />
 <include src="plugins/codeBlockCopyButtons.mbdf" />
+<include src="plugins/codeBlockWrapButtons.mbdf" />
 <include src="plugins/tags.mbdf" />
 <include src="plugins/googleAnalytics.mbdf" />
 <include src="plugins/disqus.mbdf" />

packages/core-web/src/styles/markbind.css

@@ -24,6 +24,7 @@ pre > code.hljs {
     background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
     border-radius: 5px;
     counter-reset: line;
+    width: 100%;
 }
 
 pre > code.hljs[heading] {
@@ -201,6 +202,7 @@ li.footnote-item:target {
     text-align: right;
     top: 0;
     width: 3em;
+    height: 100%;
 }
 
 /* hide popover, tooltip content */
@@ -241,41 +243,46 @@ li.footnote-item:target {
     opacity: 1;
 }
 
-/* "Copy" code block button */
+/* "Copy" and "wrap text" code block buttons */
 pre {
     position: relative;
+    display: flex;
 }
 
-button.copy-btn {
+.function-btn-container {
+    display: grid;
+    height: max-content;
+}
+
+button.function-btn {
     border: none;
     background-color: transparent;
     color: darkgray;
     cursor: pointer;
     display: inline-block;
     padding: 0.35rem;
-    position: absolute;
-    right: 0.1rem;
-    top: 0.1rem;
     text-align: center;
     white-space: nowrap;
 }
 
-.copy-btn:hover {
+.function-btn:hover {
     transition: all 0.5s ease;
-    box-shadow: 0 0 0.25rem rgba(173, 173, 173, 0.8);
+    color: gray;
 }
 
-.copy-btn-body {
+.function-btn-body {
     align-items: center;
     display: flex;
 }
 
-.copy-btn svg {
+.function-btn svg {
     fill: currentColor;
 }
 
-.copy-btn:focus {
-    box-shadow: 0 0 0.125rem rgba(173, 173, 173, 0.8);
+/* Wrap class used for "wrap text" button. */
+code.wrap {
+    white-space: pre-wrap;
+    word-wrap: break-word;
 }
 
 /* Octicon sizing */

packages/core/src/plugins/codeBlockButtonsAssets/codeBlockButtonsContainer.js

@@ -0,0 +1,18 @@
+const cheerio = module.parent.require('cheerio');
+const CONTAINER_HTML = '<div class="function-btn-container"></div>';
+
+function isFunctionBtnContainer(node) {
+  return cheerio(node).hasClass('function-btn-container');
+}
+
+function doesFunctionBtnContainerExistInNode(node) {
+  return cheerio(node)
+    .children()
+    .is((index, element) => isFunctionBtnContainer(element));
+}
+
+module.exports = {
+  CONTAINER_HTML,
+  isFunctionBtnContainer,
+  doesFunctionBtnContainerExistInNode,
+};

packages/core/src/plugins/codeBlockCopyButtons.js

@@ -1,4 +1,9 @@
 const cheerio = module.parent.require('cheerio');
+const {
+  CONTAINER_HTML,
+  doesFunctionBtnContainerExistInNode,
+  isFunctionBtnContainer,
+} = require('./codeBlockButtonsAssets/codeBlockButtonsContainer');
 
 const COPY_ICON = `
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -16,8 +21,8 @@ const COPY_ICON = `
 `;
 
 function getButtonHTML() {
-  const html = `<button onclick="copyCodeBlock(this)" class="copy-btn">
-    <div class="copy-btn-body">
+  const html = `<button onclick="copyCodeBlock(this)" class="function-btn">
+    <div class="function-btn-body">
     ${COPY_ICON}
     </div>
     </button>`;
@@ -26,7 +31,7 @@ function getButtonHTML() {
 
 const copyCodeBlockScript = `<script>
     function copyCodeBlock(element) {
-        const pre = element.parentElement;
+        const pre = element.parentElement.parentElement;
         const codeElement = pre.querySelector('code');
 
         // create dummy text element to select() the text field
@@ -43,10 +48,10 @@ const copyCodeBlockScript = `<script>
 module.exports = {
   getScripts: () => [copyCodeBlockScript],
   processNode: (pluginContext, node) => {
-    if (node.name !== 'pre') {
-      return;
+    if (node.name === 'pre' && !doesFunctionBtnContainerExistInNode(node)) {
+      cheerio(node).append(CONTAINER_HTML);
+    } else if (isFunctionBtnContainer(node)) {
+      cheerio(node).append(getButtonHTML());
     }
-
-    cheerio(node).append(getButtonHTML());
   },
 };

packages/core/src/plugins/codeBlockWrapButtons.js

@@ -0,0 +1,55 @@
+// NOTE: this code is a modified copy of codeBlockCopyButtons.js
+
+const cheerio = module.parent.require('cheerio');
+const {
+  CONTAINER_HTML,
+  isFunctionBtnContainer,
+  doesFunctionBtnContainerExistInNode,
+} = require('./codeBlockButtonsAssets/codeBlockButtonsContainer');
+
+const WRAP_ICON = `
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+  width="18" height="18" viewBox="0 0 18 18" version="1.1">
+    <g id="surface1">
+      <path id="path17964" d="M 1.109375 0 L 1.109375 2.5351562 L 2.0410156 2.5351562 L
+      2.0410156 0.93164062 L 4.8203125 0.93164062 L 4.8203125 9.3222656 L 3.4746094
+      9.3222656 L 3.4746094 10.144531 L 8.8027344 10.144531 L 8.8027344 9.3222656 L
+      7.4492188 9.3222656 L 7.4492188 0.93164062 L 10.25 0.93164062 L 10.25 2.5351562 L
+      11.166016 2.5351562 L 11.166016 0 L 1.109375 0 z M 10.84375 5.1054688 L 10.84375
+      6.6074219 C 12.268027 6.6074219 13.40625 7.7456444 13.40625 9.1699219 C 13.40625
+      10.185673 12.827237 11.055036 11.978516 11.470703 L 11.978516 9.5175781 L 7.1386719
+      12.3125 L 11.978516 15.105469 L 11.978516 13.072266 C 13.66701 12.577757 14.910156
+      11.012746 14.910156 9.1699219 C 14.910156 6.9333638 13.080308 5.1054688 10.84375
+      5.1054688 z " />
+    </g>
+</svg>
+`;
+
+function getButtonHTML() {
+  const html = `<button onclick="toggleCodeBlockWrap(this)" class="function-btn">
+    <div class="function-btn-body">
+      ${WRAP_ICON}
+    </div>
+    </button>`;
+  return html;
+}
+
+const wrapCodeBlockScript = `<script>
+    function toggleCodeBlockWrap(element) {
+      const pre = element.parentElement.parentElement;
+      const codeElement = $(pre.querySelector('code'));
+
+      codeElement.toggleClass('wrap');
+    }
+    </script>`;
+
+module.exports = {
+  getScripts: () => [wrapCodeBlockScript],
+  processNode: (pluginContext, node) => {
+    if (node.name === 'pre' && !doesFunctionBtnContainerExistInNode(node)) {
+      cheerio(node).append(CONTAINER_HTML);
+    } else if (isFunctionBtnContainer(node)) {
+      cheerio(node).append(getButtonHTML());
+    }
+  },
+};