Okay, I've created an extension following the Getting Started page using flarum-cli, and I've added a storage setting for the Client ID, but I'm not sure how to proceed with injecting the script tag and wrapping <input>
, <textarea>
, and contenteditable=true
elements with <grammarly-editor-plugin>
EDIT: I was able to inject the script tag looking at the FoF Custom Footer plugin, now I just need to wrap
EDIT2: I got the code working, but it doesn't actually work despite the script and elements being there
extend(ForumApplication.prototype, 'mount', () => {
let observer = new MutationObserver((mutations) =>
mutations.forEach((mutation) =>
mutation.addedNodes.forEach((addedNode) => {
if (
addedNode.matches &&
!addedNode.closest("grammarly-editor-plugin") &&
(
addedNode.matches("input[type='text']") ||
addedNode.matches("textarea") ||
addedNode.matches("[contenteditable='true']"))
) {
let editorPlugin = document.createElement("grammarly-editor-plugin");
addedNode.parentNode.insertBefore(editorPlugin, addedNode);
editorPlugin.appendChild(addedNode);
}
})));
observer.observe(document, {
childList: true,
subtree: true
});
const script = document.createElement('script');
script.setAttribute('src', `https://unpkg.com/@grammarly/editor-sdk?clientId=${app.forum.attribute("grammarly_client_id")}`)
document.body.appendChild(script);
});
EDIT3: I managed to get it working! The plugin will be available on my GitHub once I publish it
https://github.com/ShayBox/flarum-grammarly