Merge pull request #72 from solidjs/modderme123-m

Modderme123 m

Author: amoutonbrady

src/components/editor/index.tsx

@@ -29,12 +29,13 @@ const Editor: Component<Props> = (props) => {
 
   if (props.formatter) {
     languages.registerDocumentFormattingEditProvider('typescript', {
-      provideDocumentFormattingEdits: async (model) => {
+      async provideDocumentFormattingEdits(model) {
         props.formatter!.postMessage({
           event: 'FORMAT',
           code: model.getValue(),
           pos: editor.getPosition(),
         });
+
         return new Promise((resolve, reject) => {
           props.formatter!.addEventListener(
             'message',
@@ -72,11 +73,14 @@ const Editor: Component<Props> = (props) => {
         enabled: props.withMinimap,
       },
     });
+
     editor.onDidChangeModelContent(() => {
       props.onDocChange?.(editor.getValue());
     });
+
     props.ref?.(editor);
   };
+
   // Initialize Monaco
   onMount(() => setupEditor());
   onCleanup(() => editor?.dispose());
@@ -85,9 +89,11 @@ const Editor: Component<Props> = (props) => {
     editor.setModel(model());
     liftOff();
   });
+
   createEffect(() => {
     mEditor.setTheme(props.isDark ? 'vs-dark-plus' : 'vs-light-plus');
   });
+
   createEffect(() => {
     const fontSize = zoomState.fontSize;
     editor.updateOptions({ fontSize });

src/components/editor/setupSolid.ts

@@ -95,6 +95,7 @@ editor.defineTheme('vs-dark-plus', vsDark as editor.IStandaloneThemeData);
 editor.defineTheme('vs-light-plus', vsLight as editor.IStandaloneThemeData);
 
 const hookLanguages = languages.setLanguageConfiguration;
+
 languages.setLanguageConfiguration = (
   languageId: string,
   configuration: languages.LanguageConfiguration,
@@ -105,8 +106,8 @@ languages.setLanguageConfiguration = (
 
 export async function liftOff(): Promise<void> {
   await loadingWasm;
+
   // wireTmGrammars only cares about the language part, but asks for all of monaco
   // we fool it by just passing in an object with languages
-
   await wireTmGrammars({ languages } as any, registry, grammars);
 }

src/components/preview.tsx

@@ -192,6 +192,7 @@ export const Preview: Component<Props> = (props) => {
 
   onMount(() => {
     iframe.srcdoc = html;
+    iframe.addEventListener('load', attachToIframe);
   });
 
   return (
@@ -204,7 +205,6 @@ export const Preview: Component<Props> = (props) => {
         title="Solid REPL"
         class="overflow-auto p-2 w-full h-full dark:bg-other"
         ref={iframe}
-        onLoad={attachToIframe}
         // @ts-ignore
         sandbox="allow-popups-to-escape-sandbox allow-scripts allow-popups allow-forms allow-pointer-lock allow-top-navigation allow-modals allow-same-origin"
       ></iframe>

src/components/repl.tsx

@@ -316,9 +316,9 @@ export const Repl: Component<ReplProps> = (props) => {
                   fallback={<span>.{tab.type}</span>}
                 >
                   <select
-                    class="bg-none p-0"
+                    class="dark:bg-gray-700 bg-none p-0"
                     value={tab.type}
-                    onChange={(e) => {
+                    onBlur={(e) => {
                       setEdit(-1);
                       actions.setTabType(id(tab), e.currentTarget.value);
                     }}