Script parameters - Fluid Topics - Latest

In Topic content scripts, functions can use the map, topic, or container built-in parameters. They are all optional.

Their role is the following:

1. The container parameter is the topic's HTML content. Use it to modify the HTML content of the topic.

   For example, the following script makes the text color red:

   export default function example({container}) {
       container.style.color = "red";
   }
   

   In this other example, the script replaces regular HTML codeblocks (<pre> elements) by codeblocks with a copy-to-clipboard button:

   export default async function wrapCodeblocks({container}) {
       const codeblocks = container.querySelectorAll(
           "pre:not(.mermaid):not(.language-mermaid):not(.excluded)"
       );
   
       codeblocks.forEach((codeblock) => {
           const codeblockWrapper = document.createElement("ft-copy-block");
           codeblock.parentNode.replaceChild(codeblockWrapper, codeblock);
           codeblockWrapper.appendChild(codeblock);
       });
   }
   

2. The map parameter contains information about the current document. It contains the response body for the Get a map web service for the currently open document.

   For example, the following script displays a message in the user's console when the user is on a document with an ft:originId value of release-notes:

   export default function example({map}) {
       if (map.originId === "release-notes") {
           console.log("These are the release notes!");
       }
   }
   

3. The topic parameter contains information about the current topic. See Topic variable for more information.

   For example, the following script displays a message in the user's console when the user is on a topic with a title of "Introduction":

   export default function example({topic}) {
       if (topic.title === "Introduction") {
           console.log("Welcome!");
       }
   }
   

   Use the Get topic metadata JavaScript method to get a topic's metadata.