I did a live editor with docsify. Am I reinventing the wheel?

[ed-parsadanyan]

Hi everyone. I was experimenting with docsify.js recently and wanted to make it a part of one API service (basically you make api requests and get pages with docsify included.

As part of one endpoint, I wanted to give a user an ability to edit the existing file right in a browser (something similar to what stackedit.io offers)

After some wrestling with doscify and creating a tiny plugin, I was able to achieve the goal:

The plugin is passed in the window.$docsify

    plugins: [
      function(hook, _vm) {
        vm = _vm;
        
        hook.beforeEach(function(content) {
          return editor.value;
        });
      }
    ]

then, there's an event listener editor.addEventListener('input', updatePreview); which forces the re-rendering:

  let timeout;
  function updatePreview() {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      if (vm) {
        const markdownSection = document.querySelector('.markdown-section');
        if (markdownSection) {
          const compiler = new window.DocsifyCompiler({
            basePath: '/',
            relativePath: false,
            fallbackLanguages: [],
            nameLink: '/',
            routerMode: 'hash'
          }, vm.router);
          
          const html = compiler.compile(editor.value);
          markdownSection.innerHTML = html;
          window.Prism.highlightAll();
        }
      }
    }, 500);
  }

Am I reinventing the wheel? Should I convert this into a separate standalone plugin?