Move Writefull toolbar loading/initialisation into a React component (#16546)

GitOrigin-RevId: 1cb6efa7cab2babb33800fef9469fca3addbdaf5

services/web/config/settings.defaults.js

@@ -862,6 +862,7 @@ module.exports = {
     sourceEditorComponents: [],
     sourceEditorCompletionSources: [],
     sourceEditorSymbolPalette: [],
+    sourceEditorToolbarComponents: [],
     writefullEditorPromotion: [],
     langFeedbackLinkingWidgets: [],
     integrationLinkingWidgets: [],

services/web/frontend/js/features/source-editor/components/codemirror-editor.tsx

@@ -24,6 +24,10 @@ const sourceEditorComponents = importOverleafModules(
   'sourceEditorComponents'
 ) as { import: { default: ElementType }; path: string }[]
 
+const sourceEditorToolbarComponents = importOverleafModules(
+  'sourceEditorToolbarComponents'
+) as { import: { default: ElementType }; path: string }[]
+
 function CodeMirrorEditor() {
   // create the initial state
   const [state, setState] = useState(() => {
@@ -59,6 +63,11 @@ function CodeMirrorEditor() {
         <FigureModal />
         <CodeMirrorSearch />
         <CodeMirrorToolbar />
+        {sourceEditorToolbarComponents.map(
+          ({ import: { default: Component }, path }) => (
+            <Component key={path} />
+          )
+        )}
         <CodeMirrorCommandTooltip />
         <ReviewPanel />
         {sourceEditorComponents.map(