How to modify or remove default context menu items and how to create submenus in custom context menu?

I’m using Autodesk Forge Viewer version 7.x and I have two questions regarding the context menu behavior.

  1. Is it possible to modify or remove the default context menu items?
    By default, when right-clicking in the viewer, it shows built-in items such as:

    • Isolate
    • Hide selected
    • Show all objects

Is there any supported way to rename or remove these default items?

  1. How to create submenus using registerContextMenuCallback?
    I successfully used viewer.registerContextMenuCallback to add custom context menu items. However, I couldn’t find any documentation or examples about adding submenus under a parent item.

Here is a simplified example of what I’m trying to achieve:

Javascript

viewer.registerContextMenuCallback('my-extension', (menu, status) => {
  menu.push({
    title: 'Custom Action',
    target: () => { console.log('clicked'); },
    // How to add submenu here?
  });
});

Is there a supported way to define a submenu structure in Forge Viewer?

Environment:

  • Autodesk Viewer version: 7.x
  • Browser: Chrome (latest)*
  • Goal: Customize the right-click (context) menu*

Any insights or code examples would be greatly appreciated!

How to modify or remove default context menu items in Autodesk Viewer 7.x, and how to create submenus in custom context menu?

I’m using Autodesk Forge Viewer version 7.x and I have two questions regarding the context menu behavior.

  1. Is it possible to modify or remove the default context menu items?
    By default, when right-clicking in the viewer, it shows built-in items such as:

    • Isolate
    • Hide selected
    • Show all objects

Is there any supported way to rename or remove these default items?

  1. How to create submenus using registerContextMenuCallback?
    I successfully used viewer.registerContextMenuCallback to add custom context menu items. However, I couldn’t find any documentation or examples about adding submenus under a parent item.

Here is a simplified example of what I’m trying to achieve:

Javascript

viewer.registerContextMenuCallback('my-extension', (menu, status) => {
  menu.push({
    title: 'Custom Action',
    target: () => { console.log('clicked'); },
    // How to add submenu here?
  });
});

Is there a supported way to define a submenu structure in Forge Viewer?

Environment:

  • Autodesk Viewer version: 7.x
  • Browser: Chrome (latest)*
  • Goal: Customize the right-click (context) menu*

Any insights or code examples would be greatly appreciated!

How to block rendering of child component until a condition is met?

I have a component which is using several hooks to get data and then give it to a child component. I want the child component to re-render only when the hooks all had answered.

const [data1, loading1] = useData1();
const [data2, loading2] = useData2();
const [data3, loading3] = useData3();

const isLoading = loading1 || loading2 || loading3;

return isLoading ? <></> : <ChildComp data1={data1} data2={data2} data3={data3} />

If I do just this, then when one of the hook change, I have a flash of a white page.

What I would like instead is something like this:

return <Loader isLoading={isLoading}>
  <ChildComp data1={data1} data2={data2} data3={data3} />
</Loader>

where the Loader component is a CircularProgress, but most importantly, it blocks ChildComp to re-render while isLoading is true, still displaying behind the CircularProgress the previous state of the child component. What I want to avoid is that the 3 fetch calls are done, and so I have 3 re-rendering because data1, data2 and data3 won’t arrive at the same time.

How can I achieve that?

How do I select an object with # in the beginning?

How do you select a private object using javascript?

I tried searching google but I just couldn’t understand the terms so I ended up asking here.

I’m trying to select an object so I can put it in the page so I can see the track artist, I was successful on selecting the title because it didn’t have an object that begins with #, how do you select a private object?

javascript file

error I get when function is triggered

the response when GET

How does useState work in React, and why is state not updating immediately? [duplicate]

I’m new to React and trying to understand how useState works. I’m using a simple counter to test state updates, but I’m confused by how setCount behaves.

Here’s my code:

import React, { useState, useEffect } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    const handleClick = () => {
        setCount(count + 1);
        console.log("Clicked count:", count); // Always shows previous value
    };

    useEffect(() => {
        console.log("Updated count (useEffect):", count);
    }, [count]);

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={handleClick}>Increment</button>
        </div>
    );
}

What I expected:

I thought calling setCount(count + 1) would immediately update count, so logging it right after should show the new value.

What happened:

The console.log inside the click handler still logs the old value, not the updated one. But logging it inside useEffect works.

What I want to understand:

  • Why is setCount not updating state immediately?
  • How does React schedule and handle state updates in function components?

I want to understand the logic behind this so I can avoid confusion when working with state in future components.

Why docx-preview js in not rendering docx file properly?

I’m using docx-preview.js for render my laravel project storage docx file in Livewire component. When I render the page it’s not rending as expected. I’ve attached images for the reference. I’ve this code for render:

<div wire:ignore>
  <div id="document-container" class="overflow-auto xl:h-[calc(100vh-117px)] border border-gray rounded-3xl w-full mx-auto xl:w-[768px] 2xl:w-[896px]"></div>
</div>

JS Code:
document.addEventListener('DOMContentLoaded', function () {
  renderDocx()
});
function renderDocx() {
  let templateObjectId = @this.templateObjectId;

  axios.get(`/template-objects/${templateObjectId}/personalize/preview`, {
    responseType: 'arraybuffer'
  }).then(response => {
    let currentDocument = new Blob([response.data])
     if (!currentDocument)
        return;

    docx.renderAsync(currentDocument, container)
     .then((x) => {
          renderThumbnails(container, document.querySelector("#document-container"));
             console.log(x);
      });
    });
}

Personalize Preview Route code function:

public static function previewTemplate(TemplateObject $templateObject)
{
  abort_if((! $templateObject->temporary_file_path || ! Storage::disk('local')->exists($templateObject->temporary_file_path)), Response::HTTP_NOT_FOUND);

        // Get the file path
  $path = Storage::disk('local')->path($templateObject->temporary_file_path);

        // Serve the file with the headers
  return response()->file($path, [
    'Content-Type' => mime_content_type($path),
  ]);
}

Issue image
Working image

Redirecting to a page named after the entered password?

I am so sorry to have to post here but I really can’t find anything to help me doing what I have in mind. And I apologize in advance if my request is ridiculous.

I would like a password field as well as submit button to be displayed on my website. Let’s call it welcome.html for example. If I click the button without entering anything in the password field I would like to be redirected to welcome.html (same page).

But if I enter 123 in the password field I would like to be redirected to welcome123.html and if I enter 456 in the password field I would like to be redirected to welcome456.html and if I enter 789 in the password field I would like to be redirected to welcome789.html and so on.

Below is the script I already have. It works quite well but there are two issues :

  1. I’m limited to only one password at a time.
  2. The password is visible in the page source.
<div align="left">
  <form>
      <div class="group">      
      <input type="password" name="password" id="accesspasswd" required>
      <span class="highlight"></span>
      <span class="bar"></span><IMG SRC="images/padlock.png" WIDTH="100" onclick="onSubmit()">
    </div>
  </form>
</div>
</punlock>
</div>

<script>
     function onSubmit() {
          if (document.getElementById('accesspasswd').value == 'MYPASSWORD') 
{window.location.href = 'welcomeMYPASSWORD.html'; }
else{window.location.href = 'welcome.html'; }
     };
</script>

Can someone help me achieving what I would like to get, please ?

Thank you very much for reading.

Regards.

My react-hot-toast in Nextjs doesn’t fire until their is another toast present

So my toast.success(“Message 1”) will not show until there is a toast.success(“Message 2”) also present after it.

Only way to show it is if I click submit on form twice very quickly.Or have more than one toast in same function,Then also the first one shows up normally but the second one won’t show up until I click submit twice in quick succession.

I tried with chatgpt for 2-3 hours none of it’s solutions work.

I am using Nextjs and React-hot-toast 2.4.1 Here is the relevant section:-

"use client";
import React from "react";
import { useForm, SubmitHandler } from "react-hook-form"
import { Inputs } from "@/types/contactinputs";
import toast from "react-hot-toast";
const Contact = () => {
    const {
        register, handleSubmit, watch, formState: { errors, isSubmitted, isSubmitSuccessful, isSubmitting }, reset,
    } = useForm<Inputs>({
        defaultValues: {
            fullName: "",
            email: "",
        }
    })
    const onSubmitfunc: SubmitHandler<Inputs> = async (data) => {
        console.log(data);
        toast.success("Message 1");
        // toast.success("Message 2");
    };
    // console.log(watch("fullName")) // watch input value by passing the name of it
    return (
        <>
            <h1 className="text-xl">
                Send a message
            </h1>
            <div >
                {errors.fullName && < div> *Please enter a valid Full Name</ div>}
                {errors.email && < div>*Please enter a valid Email</ div>}
            </div>
            <form
                method="POST"
                onSubmit={handleSubmit(onSubmitfunc)}
                className="flex"
            >
                <div >
                    <input
                        {...register("fullName", { required: true, minLength: 3, maxLength: 70 })}
                        type="text"
                        placeholder="Full name"
                    />
                    <input
                        {...register("email", { required: true, minLength: 5, maxLength: 70, pattern: /^[^@]+@[^@]+.[^@]+$/ })}
                        type="email"
                        placeholder="Email address"
                    />
                </div>
                <div>

                    <button
                        type="submit"
                        disabled={isSubmitting}
                        className="bg-black"
                    >
                        Send Message

                    </button>
                </div>
            </form>
        </>
    );
};
export default Contact;

Edit: console.log(data); works as expected every time,showing the right data in console everytime,even though it is in same block.

Instagram API splitting carousel into individual posts

I am using the instagram API in my social media planner site.

When a user posts a carousel, the carousel appears in their grid fine.

The publish post functionality in particular.

However, if you follow that user, you will see the individual slides that appear to have been posted as seperate image with different like counts to the carousel.

But the individual images don’t appear in the users account or on their grid – only in the feed.

I’ve double checked my app logic and all it does, it creates the media containers for each image, polls them to check they are ready, then creates the carousel container, polls to check when its ready, then publishes the carousel container.

Has anyone experienced this issue with the IG API? I can replicate the issue too.

The images attached are from the same carousel post. So I’m doubtful this is some intentional instagram behaviour because its can be useless to have a slide like the “Follow for more” when its not accompanied by the others.

example of failed post

Error: Cannot find the browser. – trying to run testcafe test in docker container

I am having an issue running my testcafe tests within my docker container. I keep hitting this error:

Error: Cannot find the browser. "chrome:headless         --no-sandbox         --disable-dev-shm-usage         --headless=new         --enable-pinch         --window-size=1920,1080         --force-device-scale-factor=1         --window-position=0,0         --noerrdialogs         --disable-infobars         --no-default-browser-check         --kiosk         --disable-session-crashed-bubble         --disable-features=TranslateUI         --no-first-run         --simulate-critical-update         --enable-logging=stderr         --v=0         --disable-pinch         --disable-gpu         --disable-component-update         --allow-insecure-localhost         --ignore-certificate-errors         --allow-running-insecure-content         --test-type" is neither a known browser alias, nor a path to an executable file.

I have setup my dockerfile:

FROM node:22-bullseye

# Install required packages
RUN apt-get update && apt-get install -y 
  wget 
  curl 
  gnupg 
  ca-certificates 
  awscli

# Download and install Chrome via .deb
RUN wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb 
  && apt-get install -y ./google-chrome-stable_current_amd64.deb || apt-get -f install -y 
  && rm google-chrome-stable_current_amd64.deb

# Symlink for TestCafe to find Chrome
RUN ln -s /usr/bin/google-chrome-stable /usr/bin/google-chrome

WORKDIR /app
COPY . .
RUN yarn config set strict-ssl false
RUN yarn install

CMD ["yarn", "run", "ci:test"]

I have then built that image and then I run the bash script which does this:

#!/bin/bash

# Load .env variables
set -a
source .env
set +a

# Set defaults if not already defined
SNAPSHOT=${SNAPSHOT:-actual}
TESTS=${TESTS:-tests/test/*.test.ts}

# Run Docker container with env vars
docker run -it --rm 
  -v "$PWD":/app 
  -w /app 
  -e ENV="$ENV" 
  -e STATE="$STATE" 
  -e NAMESPACE="$NAMESPACE" 
  -e PRODUCT="$PRODUCT" 
  -e TESTS="$TESTS" 
  -e SNAPSHOT="$SNAPSHOT" 
  -e BROWSER="chrome" 
  -e HEADLESS="true" 
  visual-test-runner

I run this command:

yarn run:snapshot

which calls on the bash script:

"run:snapshot": "bash shared/scripts/run-snapshot.sh",

Finally my test runner which I know works for all the other test suites (not using docker and runs on chrome)

 if (process.env.HEADLESS === 'true') {
      localBrowserConfig =
        'chrome:headless 
        --no-sandbox 
        --disable-dev-shm-usage 
        --headless=new 
        --enable-pinch 
        --window-size=1920,1080 
        --force-device-scale-factor=1 
        --window-position=0,0 
        --noerrdialogs 
        --disable-infobars 
        --no-default-browser-check 
        --kiosk 
        --disable-session-crashed-bubble 
        --disable-features=TranslateUI 
        --no-first-run 
        --simulate-critical-update 
        --enable-logging=stderr 
        --v=0 
        --disable-pinch 
        --disable-gpu 
        --disable-component-update 
        --allow-insecure-localhost 
        --ignore-certificate-errors 
        --allow-running-insecure-content 
        --test-type';
    } else {
      localBrowserConfig =
        'chrome 
      --window-size=1920,1080 
      --force-device-scale-factor=1 
      --allow-insecure-localhost 
      --allow-running-insecure-content 
      --ignore-certificate-errors 
      --test-type';
    }

----

      .browsers(
        !process.env.BROWSER
          ? 'chrome:headless 
          --no-sandbox 
          --disable-dev-shm-usage 
          --headless=new 
          --enable-pinch 
          --window-size=1920,1080 
          --window-position=0,0 
          --noerrdialogs 
          --disable-infobars 
          --no-default-browser-check 
          --kiosk 
          --disable-session-crashed-bubble 
          --disable-features=TranslateUI 
          --no-first-run 
          --simulate-critical-update 
          --enable-logging=stderr 
          --v=0 
          --disable-pinch 
          --disable-gpu 
          --disable-component-update 
          --allow-insecure-localhost 
          --ignore-certificate-errors 
          --allow-running-insecure-content 
          --test-type'
          : localBrowserConfig
      )

How can this be resolved to bypass the error I am receiving?

How to show a custom footer only on the last printed page using pure HTML and CSS?

I need to generate a printed document directly in the browser (Chrome), using only HTML and CSS

My goal is to:
display a custom footer (e.g., a specific string) only on the last printed page.
Here’s what I’ve tried:

@media print {
  #last_page {
    page: last_page;
  }
}
@page last_page {
  @bottom-left {
    content: "Rodapé";
  }
}

However, this approach always causes a page break before the final page, which wastes space

Is there any better solution to show a custom footer only on the last physical printed page, without forcing a page break?
Obs: the content of page is dynamic

Weird behavior when focusing on an element

Clicking on the focus button makes #container move up 1 pixel:

<html>
   <body>
      <div style="overflow: hidden" id="root">
         <div style="margin: -1px" id="container">
            <div id="spacer" style="height: 2px"></div>
            <div id="focusable" tabindex="0">foo</div>
         </div>
      </div>
      <button onclick="document.getElementById('focusable').focus()">focus</button>
   </body>
</html>

A few observations:
On Chrome/Edge, the height for #spacer needs to be at least 1px more than #container’s negative margin.
On Firefox the height doesn’t seem to matter, but if you execute the code as an html file and not from the snippet, you’ll need to hard-reload (ctrl-f5) between runs otherwise #container stays in its shifted position.

What the heck?

How to improve TCP server performance for large file uploads from remote clients?

I’m building a simple TCP server in Node.js to retrieve large PDF files from clients. Everything works fine when I send data from the same machine (localhost) — I get large chunks of 65536 bytes and the file is saved almost instantly.

However, when I send the same file (around 20 MB) from a remote machine over the local network, the data.length drops to around 1436 bytes per chunk, and the server receives the relevant file very slowly (about 30 seconds, which is very slow), even though my internet connection is good (around 64 Mbps).

To be specific:

Local connection: Chunks are ~65536 bytes, total transfer time ≈ 1 second

Remote connection: Chunks are ~1436 bytes, total transfer time ≈ 20 seconds

Here’s a simplified version of my TCP server code:

const net = require("net");
const crypto = require("crypto");
const fs = require("fs");
require("dotenv").config();

const server = net.createServer((socket) => {
    socket.setNoDelay(true);
    const chunks = [];

    socket.on("data", (data) => {
        chunks.push(data);
        console.log(data.length); // 65536 for localhost, 1436 for remote clients.
        if (data.toString("utf8").endsWith("DONE")) {
            const bytes = Buffer.concat(chunks).slice(0, -(Buffer.from("DONE", "utf8").length));
            console.log(bytes.length); // 20 MB
            fs.writeFile(crypto.randomUUID() + ".bin", bytes, (err) => socket.write(JSON.stringify({ success: !err })));
        }
    });
});

server.listen(process.env.PORT, process.env.DEDICATED_SERVER_IPV4, () => console.log("Running..."));

Here’s a simpler version of my TCP client code:

const net = require("net");
const fs = require("fs");
require("dotenv").config();

fs.readFile("file.bin", (err, bytes) => {
    if (!err) {
        console.log(bytes.length); // 20 MB
        const client = net.createConnection({ port: process.env.PORT, host: process.env.DEDICATED_SERVER_IPV4 }, () => {
            client.write(bytes);
            client.write("DONE");
        });

        client.on("data", (data) => console.log(data.toString()));
    } else console.error(err.stack);
});

What I’ve tried:

Increased highWaterMark to 1 MB.

Called socket.setNoDelay(true) to disable Nagle’s algorithm.

Verified that the issue only occurs when the sender is on a different machine.

Same file, same code — only difference is local vs remote client.

My questions:
Why does data.length drop to ~1436 bytes and is the file transfer very slow when the client is remote?

Is this caused by TCP MSS, MTU, or buffering behavior in Node.js or the OS?

And the most important one: How can I optimize my TCP server for faster large file uploads over remote connections?

Any help or insights would be greatly appreciated!

Thanks in advance.

Text clipped at 37kb when trying to make blob or arraybuffer and upload to sharepoint

I am trying to upload json data as a text file to SharePoint with javascripts stingify method using either blob or array buffer, but I keep getting only the first 37kb of the content saved. This is similar to the browsers dev console using JSON.stringify(json) as shown in the attached image. The text is only 100-200 kb. I can see the Blob and arraybuffers are only 37kb, and if I click the show more in the dev console, it is all there but I don’t have that luxury in the code. WTH, how do I fix this? screenshot

let data = hot.getSourceData()[0]
    console.log(data)

    let json = JSON.stringify(data)
    const file = new Blob([json], { type: 'text/plain' });
  
    sprLib.folder('myfolder').upload({
      name: "textdata.json",
      data: file,
      overwrite: true, //always true
    })

Possible to add code blocks to tags, without using libraries?

Is it possible to obtain code blocks, like these ones that have designated background and font, inside a <textarea>? To visualize, the Notion note-taking app allows users to type plain texts and code blocks at the same time (although they didn’t do it as <textarea> tags):
enter image description here

Is it possible to realize this without using libraries like tinymce, done in vanilla JavaScript or React? I understand the form data submitted form <textarea> is of String type, which makes it difficult to transform into other types.

Thank you!