Added the ability to show/hide line numbers in a code block (#1333)

* Added line numbers dropdown

* Added a state to update the dropdown

* Get data-linenumbers in the EditorContent component

* Updated the CSS styles to render line number only when data-linenumbers is specified

* [TEMP] Update OverlayManager story for demo purposes

* Fixed codeblock padding

* Revert "[TEMP] Update OverlayManager story for demo purposes"

This reverts commit 9e3b964.

---------

Co-authored-by: Praveen Murali <[email protected]>

Author: AbhayVAshokan

Diff for: src/components/Editor/CustomExtensions/CodeBlock/CodeBlockComponent.jsx

@@ -7,14 +7,17 @@ import { Dropdown, Input, Button } from "neetoui";
 import { difference, intersection, union } from "ramda";
 import { useTranslation } from "react-i18next";
 
-import { SORTED_LANGUAGE_LIST } from "./constants";
+import { LINE_NUMBER_OPTIONS, SORTED_LANGUAGE_LIST } from "./constants";
 import { codeBlockHighlightKey } from "./plugins";
 
 const { Menu, MenuItem } = Dropdown;
 
 const CodeBlockComponent = ({ node, editor, updateAttributes }) => {
   const [keyword, setKeyword] = useState("");
   const [showHighlightButton, setShowHighlightButton] = useState(false);
+  const [showLineNumbers, setShowLineNumbers] = useState(
+    node.attrs.linenumbers
+  );
   const ref = useRef();
 
   const { t } = useTranslation();
@@ -104,6 +107,33 @@ const CodeBlockComponent = ({ node, editor, updateAttributes }) => {
             className="neeto-editor-codeblock-options"
             contentEditable={false}
           >
+            <Dropdown
+              appendTo={() => document.body}
+              buttonSize="small"
+              buttonStyle="tertiary"
+              icon={Down}
+              strategy="fixed"
+              zIndex={99999}
+              label={
+                showLineNumbers === "true"
+                  ? LINE_NUMBER_OPTIONS[0].label
+                  : LINE_NUMBER_OPTIONS[1].label
+              }
+            >
+              <Menu className="neeto-editor-codeblock-options__menu">
+                {LINE_NUMBER_OPTIONS.map(({ label, value }) => (
+                  <MenuItem.Button
+                    key={label}
+                    onClick={() => {
+                      setShowLineNumbers(value);
+                      updateAttributes({ linenumbers: value });
+                    }}
+                  >
+                    {label}
+                  </MenuItem.Button>
+                ))}
+              </Menu>
+            </Dropdown>
             <Dropdown
               appendTo={() => document.body}
               buttonSize="small"

Diff for: src/components/Editor/CustomExtensions/CodeBlock/ExtensionConfig.js

@@ -21,6 +21,14 @@ export default CodeBlockLowlight.extend({
             attributes.highlightedLines?.join(",") ?? "",
         }),
       },
+      linenumbers: {
+        default: "false",
+        parseHTML: element => element.dataset.linenumbers || "false",
+        renderHTML: attributes =>
+          attributes.linenumbers === "true"
+            ? { "data-linenumbers": "true" }
+            : {},
+      },
     };
   },
   addProseMirrorPlugins() {

Diff for: src/components/Editor/CustomExtensions/CodeBlock/constants.js

@@ -1,6 +1,12 @@
+import { t } from "i18next";
 import { lowlight } from "lowlight";
 
 export const SORTED_LANGUAGE_LIST = [
   ...lowlight.listLanguages(),
   "html",
 ].sort();
+
+export const LINE_NUMBER_OPTIONS = [
+  { label: t("neetoEditor.codeblock.showLineNumbers"), value: "true" },
+  { label: t("neetoEditor.codeblock.hideLineNumbers"), value: "false" },
+];

Diff for: src/components/EditorContent/index.jsx

@@ -18,7 +18,7 @@ import ImagePreview from "./ImagePreview";
 import {
   substituteVariables,
   applyLineHighlighting,
-  applySyntaxHighlighting,
+  applySyntaxHighlightingAndLineNumbers,
 } from "./utils";
 import { buildHeaderLinks } from "./utils/headers";
 
@@ -34,7 +34,7 @@ const EditorContent = ({
   const editorContentRef = useRef(null);
 
   const htmlContent = substituteVariables(
-    applySyntaxHighlighting(content),
+    applySyntaxHighlightingAndLineNumbers(content),
     variables
   );
   const sanitize = DOMPurify.sanitize;

Diff for: src/components/EditorContent/utils/index.js

@@ -64,13 +64,14 @@ export const highlightLinesElement = (code, options) => {
   highlightLinesCode(code, options);
 };
 
-export const applySyntaxHighlighting = content => {
+export const applySyntaxHighlightingAndLineNumbers = content => {
   lowlight.highlightAuto("");
   let highlightedAST = {};
 
   return content.replace(CODE_BLOCK_REGEX, (_, language, code) => {
-    const regex = /data-highlighted-lines="([^"]*)"/;
-    const match = content.match(regex);
+    const highlightRegex = /data-highlighted-lines="([^"]*)"/;
+    const linenumbersRegex = /data-linenumbers/;
+    const highlightMatch = content.match(highlightRegex);
 
     if (language && LANGUAGE_LIST.includes(language)) {
       highlightedAST = lowlight.highlight(language, transformCode(code));
@@ -85,9 +86,14 @@ export const applySyntaxHighlighting = content => {
       buildReactElementFromAST
     );
 
-    return `<pre data-highlighted-lines=${
-      match?.[1] ?? ""
-    }><code>${renderToString(highlightedNode)}</code></pre>`;
+    const dataHighlight = `data-highlighted-lines=${highlightMatch?.[1] ?? ""}`;
+    const dataLinenumbers = content.match(linenumbersRegex)
+      ? `data-linenumbers="true"`
+      : "";
+
+    return `<pre ${dataLinenumbers} ${dataHighlight}><code>${renderToString(
+      highlightedNode
+    )}</code></pre>`;
   });
 };
 

Diff for: src/styles/editor/editor-content.scss

@@ -370,31 +370,31 @@
     }
 
     counter-reset: line-number;
+  }
 
-    .highlight-line {
-      position: relative;
-      padding-left: 3.125rem;
-
-      &::before {
-        color: rgba(var(--neeto-editor-content-code-line-number-color));
-        content: counter(line-number);
-        counter-increment: line-number;
-        font-size: 85%;
-        font-weight: 400;
-        position: absolute;
-        left: 0;
-        padding-left: 0.625rem;
-        padding-right: 1rem;
-        width: 3.125rem;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-      }
+  pre[data-linenumbers] .highlight-line {
+    position: relative;
+    padding-left: 3.125rem;
+
+    &::before {
+      color: rgba(var(--neeto-editor-content-code-line-number-color));
+      content: counter(line-number);
+      counter-increment: line-number;
+      font-size: 85%;
+      font-weight: 400;
+      position: absolute;
+      left: 0;
+      padding-left: 0.625rem;
+      padding-right: 1rem;
+      width: 3.125rem;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
 
-      &:last-child::before {
-        content: "";
-      }
+    &:last-child::before {
+      content: "";
     }
   }
 
@@ -410,7 +410,11 @@
     display: block;
     width: 100%;
     overflow-x: auto;
-    padding: 0.75rem 0.75rem 0.75rem 0px;
+    padding: 0.75rem;
+  }
+
+  pre[data-linenumbers]>code {
+    padding-left: 0;
   }
 
   // Blockquote

Diff for: src/translations/en.json

@@ -147,6 +147,10 @@
     },
     "editorContent": {
       "imagePreviewAltText": "Image Preview"
+    },
+    "codeblock": {
+      "showLineNumbers": "Show line numbers",
+      "hideLineNumbers": "Hide line numbers"
     }
   }
 }