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:
image

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?