Why Flyout Menus option is not showing

InDesign
,
1

Screenshot (7)
Screenshot (7)324×571 9.39 KB

"Hello Everyone,

I’m having trouble with the flyout menu in InDesign. The menu is not showing up when I hover over it. Can you please help me resolve this issue?

import ReactDOM from "react-dom";

const _id = Symbol("_id");
const _root = Symbol("_root");
const _attachment = Symbol("_attachment");
const _Component = Symbol("_Component");
const _menuItems = Symbol("_menuItems");

export class PanelController {
    
    constructor(Component, { id, menuItems } = {}) {
        this[_id] = null;
        this[_root] = null;
        this[_attachment] = null;
        this[_Component] = null;
        this[_menuItems] = [];

        this[_Component] = Component;
        this[_id] = id;
        this[_menuItems] = menuItems || [];
        this.menuItems = this[_menuItems].map(menuItem => ({
            id: menuItem.id,
            label: menuItem.label,
            enabled: menuItem.enabled || true,
            checked: menuItem.checked || false
        }));

        [ "create", "show", "hide", "destroy", "invokeMenu" ].forEach(fn => this[fn] = this[fn].bind(this));
    }

    create() {
        this[_root] = document.createElement("div");
        this[_root].style.height = "100vh";
        this[_root].style.overflow = "auto";
        this[_root].style.padding = "8px";

        ReactDOM.render(this[_Component]({panel: this}), this[_root]);

        return this[_root];
    }

    show(event)  {
        if (!this[_root]) this.create();
        this[_attachment] = event;
        this[_attachment].appendChild(this[_root]);
    }

    hide() {
        if (this[_attachment] && this[_root]) {
            this[_attachment].removeChild(this[_root]);
            this[_attachment] = null;
        }
        console.log("Hide");
    }

    destroy() {
        console.log("Distroyed");
     }

    invokeMenu(id) {
        const menuItem = this[_menuItems].find(c => c.id === id);
        console.log("menuItems: ",menuItem)
        if (menuItem) {
            const handler = menuItem.oninvoke;
            if (handler) {
                handler();
            }
        }
    }
}

and Calling like this

const menuItems = [
  { id: "item1", label: "Item 1", enabled: true, checked: false, oninvoke: () => console.log("Item 1 clicked") },
  { id: "item2", label: "Item 2", enabled: true, checked: false, oninvoke: () => console.log("Item 2 clicked") }
];
const demosController = new PanelController(() => <Demos menuItems={demosController.menuItems} />, {
  id: "demos",
  menuItems,
});

Thank you

2

Based on the answer to Is it possible to add menu items dynamically from a plugin? - #2 by medium_jon, it seems like it isn’t supported, yet.

1 Like
3

@pklaschka
Thanks!
it seems like it isn’t supported, yet. - yes
But not solution found