Add a custom action to a page's top action bar

[JaneSjs]

User Inquiry: T16386 - Page Content Actions https://surveyjs.answerdesk.io/internal/ticket/details/T16386

Currently, it is possible to register custom page actions using the creator.onGetPageActions event. Custom actions appear as follows:

Introduce an option to register custom actions within the following action bar:

Also, add an option to move the Add Question action to the top bar..

[JaneSjs]

It appears that it is possible to register a custom page title actions using the creator.onDefineElementMenuItems event.

 creator.onDefineElementMenuItems.add((sender, options) => {
      if (options.obj.getType() === "page") {
        const page = options.obj;
        options.items.push({
          id: "clear-page",
          title: "Clear Page",
          iconName: "icon-clear",
          action: () => {
            page.questions.forEach((question) => {
              page.removeElement(question);
            });
          },
        });
      }
});

Additionally, if you wish to display the Add Question button in a top bar, use the creator.onGetPageActions event to remove the existing Add Question action and add a custom action using the creator.onDefineElementMenuItems event.

creator.onGetPageActions.add((sender, options) => {
      options.actions = [];
});

 creator.onDefineElementMenuItems.add((sender, options) => {
      if (options.obj.getType() === "page") {
        const page = options.obj;
        //...
        options.items.push({
          id: "add-question",
          title: "Add Question",
          iconName: "icon-add",
          action: () => {
            page.addNewQuestion("text");
          },
        });
      }
})    

View CodeSandbox