>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3570097. --> Reported by: [marcus_johansson](https://www.drupal.org/user/385947) Related to !1148 !1143 >>> <p>[Tracker]<br> <strong>Update Summary: </strong>[One-line status update for stakeholders]<br> <strong>Short Description: </strong>Create a build script for MDXEditor with mentions<br> <strong>Check-in Date: </strong>MM/DD/YYYY<br> <em>Metadata is used by the <a href="https://www.drupalstarforge.ai/" title="AI Tracker">AI Tracker.</a> Docs and additional fields <a href="https://www.drupalstarforge.ai/ai-dashboard/docs" title="AI Issue Tracker Documentation">here</a>.</em><br> [/Tracker]</p> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>There are a lot of different places where we want to add a prompt field that can be used for AI, including Context Control Center, AI Agents, Automators, Prompt Library.</p> <p>We have done some research on different prompt libraries in <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/ai/issues/3525122" title="Status: Closed (fixed)">#3525122: [Research] AI Prompt Management @mentions type functionality</a></span>. The library that ticks all boxes is <a href="https://mdxeditor.dev/">MDXEditor</a>. If its built together with the <a href="https://github.com/mdx-editor/extras">Extras Plugins</a> that has @mdxeditor/typeahead-plugin it can also do custom mentions.</p> <p>In our case we need to optionally autocomplete "[" for tokens and "{" for custom context.</p> <p>There is a vibe coded working version at <a href="https://workflows-of-ai.com/frontend-test/mdxeditor.html">https://workflows-of-ai.com/frontend-test/mdxeditor.html</a>. The zip of this will also be given.</p> <p>What is important is that the build replaces a normal textarea so we have graceful fallback.</p> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <ul> <li>Create a folder called js_builds and under it mdxeditor.</li> <li>Create a package json that uses a web build tool that can both be live reloaded in dev mode and have a build to ../js/mdxeditor.js or something similar. Vite is used by Canvas AI, so unless there is some other reason, use this.</li> <li>Build it with @mdxeditor/typeahead-plugin so it can either be data elements on the textarea, see example above, or be loaded via ajax from an endpoint. It should handle both "[" for tokens and "{" for custom context.</li> <li>Build it with all the toolbar items from the demo above.</li> <li>Make it possible to both read and write to the textarea from external js.</li> <li>Make it so it attaches and renders on textareas of specific data tag, see demo.</li> </ul> <h3 id="summary-remaining-tasks">Remaining tasks</h3> <h3>Optional: Other details as applicable (e.g., User interface changes, API changes, Data model changes)</h3> <h3 id="summary-ai-usage">AI usage (if applicable)</h3> <p>[ ] AI Assisted Issue<br> This issue was generated with AI assistance, but was reviewed and refined by the creator.</p> <p>[ ] AI Assisted Code<br> This code was mainly generated by a human, with AI autocompleting or parts AI generated, but under full human supervision.</p> <p>[ ] AI Generated Code<br> This code was mainly generated by an AI with human guidance, and reviewed, tested, and refined by a human.</p> <p>[ ] Vibe Coded<br> This code was generated by an AI and has only been functionally tested.</p> > Related issue: [Issue #3525122](https://www.drupal.org/node/3525122)