Improves styling of source editor and crashes

apps/ui/src/ui/SourceEditor.css

@@ -0,0 +1,7 @@
+.monaco-editor {
+    --vscode-editor-background: var(--color-editor);
+    --vscode-editorStickyScroll-background: var(--color-editor);
+    --vscode-breadcrumb-background: var(--color-editor);
+    --vscode-editorGutter-background: var(--color-editor);
+    --vscode-editorMarkerNavigation-background: var(--color-editor);
+}

apps/ui/src/ui/SourceEditor.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'react'
+import MEditor, { Monaco, EditorProps } from '@monaco-editor/react'
+import { editor as Editor } from 'monaco-editor'
+import './SourceEditor.css'
+
+export interface SourceEditorProps extends EditorProps {
+    onMount?: (editor: Editor.IStandaloneCodeEditor, instance: Monaco) => void
+}
+
+export default function SourceEditor({ onMount, ...props }: SourceEditorProps) {
+
+    const [monaco, setMonaco] = useState<Editor.IStandaloneCodeEditor | undefined>()
+
+    function handleMount(editor: Editor.IStandaloneCodeEditor, instance: Monaco) {
+        instance.editor.defineTheme('default', {
+            base: 'vs-dark',
+            inherit: true,
+            rules: [{
+                background: '#0d121e',
+                token: '',
+            }],
+            colors: {
+                'editor.background': '#0d121e',
+            },
+        })
+        instance.editor.setTheme('default')
+        if (!monaco) setMonaco(editor)
+        onMount?.(editor, instance)
+    }
+
+    return (
+        <MEditor
+            {...props}
+            onMount={handleMount}
+            options={{ wordWrap: 'on' }}
+            theme="vs-dark"
+        />
+    )
+}

apps/ui/src/variables.css

@@ -35,6 +35,8 @@
     --color-shadow: rgba(0, 0, 0, 0.1);
     --color-shadow-soft: rgba(0, 0, 0, 0.05);
 
+    --color-editor: #0d121e;
+
     --border-radius: 8px;
     --border-radius-inner: 6px;
     --border-radius-outer: 14px;

apps/ui/src/views/campaign/CampaignPreview.css

@@ -1,5 +1,5 @@
 .preview-source-editor {
-    background: #1E1E1E;
+    background: var(--color-editor);
     display: flex;
     position: relative;
     align-items: stretch;

apps/ui/src/views/campaign/CampaignPreview.tsx

@@ -1,6 +1,5 @@
 import { useContext, useMemo, useState, useEffect, useCallback } from 'react'
 import { CampaignContext, LocaleContext, ProjectContext } from '../../contexts'
-import SourceEditor from '@monaco-editor/react'
 import './CampaignPreview.css'
 import api from '../../api'
 import Preview from '../../ui/Preview'
@@ -17,6 +16,7 @@ import Modal, { ModalProps } from '../../ui/Modal'
 import { SearchTable, useSearchTableState } from '../../ui/SearchTable'
 import { ChannelType, TemplateProofParams, User } from '../../types'
 import FormWrapper from '../../ui/form/FormWrapper'
+import SourceEditor from '../../ui/SourceEditor'
 
 interface UserLookupProps extends Omit<ModalProps, 'title'> {
     onSelected: (user: User) => void
@@ -115,8 +115,10 @@ export default function CampaignPreview() {
     useEffect(() => { handleEditorChange(value) }, [value, template])
 
     const handleEditorChange = useMemo(() => debounce(async (value?: string) => {
-        const { data } = await api.templates.preview(project.id, template.id, JSON.parse(value ?? '{}'))
-        setData(data)
+        try {
+            const { data } = await api.templates.preview(project.id, template.id, JSON.parse(value ?? '{}'))
+            setData(data)
+        } catch {}
     }), [template])
 
     const handleSendProof = async (recipient: string) => {
@@ -150,10 +152,7 @@ export default function CampaignPreview() {
                         <SourceEditor
                             defaultLanguage="json"
                             defaultValue={value}
-                            value={value}
                             onChange={setValue}
-                            options={{ wordWrap: 'on' }}
-                            theme="vs-dark"
                         />
                     </div>
                 </Column>

apps/ui/src/views/campaign/editor/EmailEditor.css

@@ -93,9 +93,7 @@
     padding: 20px;
 }
 
-.source-editor {
-    --color-editor: #0d121e;
-
+.source-editor {    
     background: var(--color-editor);
     border-radius: var(--border-radius);
     border: 1px solid #1a1f2b;
@@ -105,14 +103,6 @@
     flex-direction: column;
 }
 
-.source-editor .monaco-editor {
-    --vscode-editor-background: var(--color-editor);
-    --vscode-editorStickyScroll-background: var(--color-editor);
-    --vscode-breadcrumb-background: var(--color-editor);
-    --vscode-editorGutter-background: var(--color-editor);
-    --vscode-editorMarkerNavigation-background: var(--color-editor);
-}
-
 .source-editor .ui-tabs {
     border-bottom: 0;
 }

apps/ui/src/views/campaign/editor/HtmlEditor.tsx

@@ -1,12 +1,12 @@
 import { useState } from 'react'
 import { Image, Template } from '../../../types'
-import SourceEditor, { Monaco } from '@monaco-editor/react'
 import { editor as Editor } from 'monaco-editor'
 import Button from '../../../ui/Button'
 import ImageGalleryModal from '../ImageGalleryModal'
 import Preview from '../../../ui/Preview'
 import Tabs from '../../../ui/Tabs'
 import { ImageIcon } from '../../../ui/icons'
+import SourceEditor from '../../../ui/SourceEditor'
 
 export default function HtmlEditor({ template, setTemplate }: { template: Template, setTemplate: (template: Template) => void }) {
 
@@ -15,19 +15,7 @@ export default function HtmlEditor({ template, setTemplate }: { template: Templa
     const [selectedIndex, setSelectedIndex] = useState(0)
     const [showImages, setShowImages] = useState(false)
 
-    function handleMount(editor: Editor.IStandaloneCodeEditor, instance: Monaco) {
-        instance.editor.defineTheme('default', {
-            base: 'vs-dark',
-            inherit: true,
-            rules: [{
-                background: '#0d121e',
-                token: '',
-            }],
-            colors: {
-                'editor.background': '#0d121e',
-            },
-        })
-        instance.editor.setTheme('default')
+    function handleMount(editor: Editor.IStandaloneCodeEditor) {
         if (!monaco) setMonaco(editor)
     }
 
@@ -84,8 +72,6 @@ export default function HtmlEditor({ template, setTemplate }: { template: Templa
                                     defaultValue={template.data.html}
                                     onChange={handleHtmlChange}
                                     onMount={handleMount}
-                                    options={{ wordWrap: 'on' }}
-                                    theme="vs-dark"
                                 />
                                 <div className="editor-toolbar">
                                     <Button
@@ -105,8 +91,6 @@ export default function HtmlEditor({ template, setTemplate }: { template: Templa
                                 defaultValue={template.data.text}
                                 onChange={handleTextChange}
                                 onMount={handleMount}
-                                options={{ wordWrap: 'on' }}
-                                theme="vs-dark"
                             />,
                         }]}
                     />

apps/ui/src/views/journey/steps/Update.tsx

@@ -1,10 +1,9 @@
 import { JourneyStepType } from '../../../types'
-import SourceEditor from '@monaco-editor/react'
-import { useContext, useState } from 'react'
-import { PreferencesContext } from '../../../ui/PreferencesContext'
+import { useState } from 'react'
 import { UpdateStepIcon } from '../../../ui/icons'
 import Modal from '../../../ui/Modal'
 import Button from '../../../ui/Button'
+import SourceEditor from '../../../ui/SourceEditor'
 
 interface UpdateConfig {
     template: string // handlebars template for json object
@@ -19,7 +18,6 @@ export const updateStep: JourneyStepType<UpdateConfig> = {
         template: '{\n\n}\n',
     }),
     Edit: ({ onChange, value }) => {
-        const [{ mode }] = useContext(PreferencesContext)
         const [open, setOpen] = useState(false)
         return (
             <>
@@ -65,7 +63,6 @@ export const updateStep: JourneyStepType<UpdateConfig> = {
                         value={value.template ?? ''}
                         height={500}
                         width="100%"
-                        theme={mode === 'dark' ? 'vs-dark' : undefined}
                         language="json"
                     />
                 </Modal>

apps/ui/src/views/project/ProjectSidebar.tsx

@@ -53,7 +53,12 @@ export default function ProjectSidebar({ children, links }: PropsWithChildren<Si
 
     return (
         project && <Sidebar
-            links={links?.filter(({ minRole }) => !minRole || checkProjectRole(minRole, project.role))}
+            links={
+                links?.filter(({ minRole }) =>
+                    !minRole
+                    || checkProjectRole(minRole, project.role),
+                ).map(({ minRole, ...props }) => props)
+            }
             prepend={
                 <SingleSelect
                     value={project}