Sets the editor content decorator script helpers in the window object. (

#1290)

* Updated the headerlinks script to attach the helper function to the window object.

* Updated the codeblock highlight script to append the helper function to the window object.

* Updated the documentation.

src/components/EditorContent/codeBlockHighlight.js

@@ -56,34 +56,45 @@ const addCopyToClipboardButton = codeElement => {
   codeElement.parentNode.appendChild(copyButton);
 };
 
-function applyCodeblockDecorations(codeElement) {
-  const preElement = codeElement.closest("pre");
-  hljs.highlightElement(codeElement);
-  addCopyToClipboardButton(codeElement);
-
-  const linesToHighlight = getHighlightedLines(preElement, codeElement);
-  const highlightLinesOptions = linesToHighlight
-    .filter(line => line > 0)
-    .map(line => ({
-      start: line,
-      end: line,
-      color: "rgba(255, 255, 0, 0.2)",
-    }));
-  hljs.highlightLinesElement(codeElement, highlightLinesOptions);
-}
-
-const fetchHighlightLinesScript = () => {
+const applyDecorations = () => {
+  document.querySelectorAll("pre code").forEach(codeElement => {
+    const preElement = codeElement.closest("pre");
+    hljs.highlightElement(codeElement);
+    addCopyToClipboardButton(codeElement);
+
+    const linesToHighlight = getHighlightedLines(preElement, codeElement);
+    const highlightLinesOptions = linesToHighlight
+      .filter(line => line > 0)
+      .map(line => ({
+        start: line,
+        end: line,
+        color: "rgba(255, 255, 0, 0.2)",
+      }));
+    hljs.highlightLinesElement(codeElement, highlightLinesOptions);
+  });
+};
+
+const checkContextAndApplyDecorations = () => {
+  // Don't have to load the script if the `hljs.highlightLinesElement` is in the context.
+  if (hljs.highlightLinesElement) return applyDecorations();
+
   const script = document.createElement("script");
   script.src = highlightLinesScriptCDNPath;
   script.async = true;
   document.head.appendChild(script);
-  script.addEventListener("load", () => {
-    document.querySelectorAll("pre code").forEach(applyCodeblockDecorations);
-  });
+
+  return script.addEventListener("load", applyDecorations);
 };
 
-(function () {
+(() => {
   if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", fetchHighlightLinesScript);
-  } else fetchHighlightLinesScript();
+    document.addEventListener(
+      "DOMContentLoaded",
+      checkContextAndApplyDecorations
+    );
+  } else checkContextAndApplyDecorations();
+
+  window.neetoEditor = window.neetoEditor ?? {};
+  window.neetoEditor.applyCodeblockDecorations =
+    checkContextAndApplyDecorations;
 })();

src/components/EditorContent/headerLinks.js

@@ -1,7 +1,17 @@
+// eslint-disable-next-line @bigbinary/neeto/file-name-and-export-name-standards
 import { buildHeaderLinks } from "./utils/headers";
 
-document.addEventListener("DOMContentLoaded", () => {
+const applyDecorations = () => {
   const editorContent = document.querySelector(".neeto-editor-content");
 
   if (editorContent) buildHeaderLinks(editorContent);
-});
+};
+
+(() => {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", applyDecorations);
+  } else applyDecorations();
+
+  window.neetoEditor = window.neetoEditor ?? {};
+  window.neetoEditor.applyHeaderDecorations = applyDecorations;
+})();

stories/Walkthroughs/Output/Output.stories.mdx

@@ -112,6 +112,13 @@ file.
 ></script>
 ```
 
+This script exposes the helper function `applyCodeblockDecorations` via the window object. You can use it to apply syntax highlighting.
+```react
+useEffect(() => {
+  window.neetoEditor?.applyCodeblockDecorations?.()
+}, [])
+```
+
 #### Make headings navigable in NextJS websites
 
 Add the following lines to the SSG/SSR pages. The pages need not be converted to client side rendering for this to work.
@@ -122,3 +129,10 @@ Add the following lines to the SSG/SSR pages. The pages need not be converted to
   strategy="beforeInteractive"
 />
 ```
+
+This script exposes the helper function `applyHeaderDecorations` via the window object. You can use it to make the headers navigable.
+```react
+useEffect(() => {
+  window.neetoEditor?.applyHeaderDecorations?.()
+}, [])
+```