script.js

document.addEventListener("DOMContentLoaded", () =>
  OC.Plugins.register("OCA.Files.NewFileMenu", {
    attach: function () {
      const refreshMenu = () => {
        const menu = document.querySelector(".newFileMenu ul");

        const addSeparator = (selector, title) => {
          const firtEl = document.querySelector(selector);

          const separator = document.createElement("li");
          separator.classList.add("menu-item-separator");
          separator.innerHTML = `
                      <div></div>
                      <p>${title}</p>
                  `;

          menu.insertBefore(separator, firtEl.parentNode);
        };

        const addExtension = (selector) => {
          const elements = document.querySelectorAll(selector);
          for (const el of elements) {
            const span = document.createElement("span");
            span.classList.add("menu-item-extension");
            span.innerText = "." + el.getAttribute("data-templatename").split(".")[1];
            el.appendChild(span);
          }
        };

        addSeparator(
          '.newFileMenu .menuitem[data-action*="template-new-onlyoffice"]',
          "ONLYOFFICE"
        );
        addSeparator(
          '.newFileMenu .menuitem[data-action*="template-new-richdocument"]',
          "COLLABORA"
        );

        addExtension(
          '.newFileMenu .menuitem[data-action*="template-new-onlyoffice"]'
        );
        addExtension(
          '.newFileMenu .menuitem[data-action*="template-new-richdocument"]'
        );
      };
      setTimeout(refreshMenu);
      document.querySelector(".new").addEventListener("click", refreshMenu);
    },
  })
);