fix(playground): tabs stackblitz example loads in Safari (#3287)

Author: sean-perkins

src/components/global/Playground/index.tsx

@@ -546,10 +546,30 @@ export default function Playground({
 
     if (hasUsageTargetOptions) {
       editorOptions.files = Object.keys(codeSnippets[usageTarget])
-        .map((fileName) => ({
-          [fileName]: hostRef.current!.querySelector<HTMLElement>(`#${getCodeSnippetId(usageTarget, fileName)} code`)
-            .outerText,
-        }))
+        .map((fileName) => {
+          const codeBlock = hostRef.current!.querySelector<HTMLElement>(
+            `#${getCodeSnippetId(usageTarget, fileName)} code`
+          );
+          let code = codeBlock.outerText;
+
+          if (code.trim().length === 0) {
+            /**
+             * Safari has an issue where accessing the `outerText` on a non-visible
+             * DOM element results in a string with only whitespace. To work around this,
+             * we create a clone of the element, not attached to the DOM, and parse
+             * the outerText from that.
+             *
+             * Only in Safari does this persist whitespace & line breaks, so we
+             * explicitly check for when the code is empty to use this workaround.
+             */
+            const el = document.createElement('div');
+            el.innerHTML = codeBlock.innerHTML;
+            code = el.outerText;
+          }
+          return {
+            [fileName]: code,
+          };
+        })
         .reduce((acc, curr) => ({ ...acc, ...curr }), {});
       editorOptions.dependencies = (code[usageTarget] as UsageTargetOptions).dependencies;
     }

static/usage/v6/tabs/router/angular/app_module_ts.md

@@ -11,7 +11,7 @@ import { ExampleComponent } from './example.component';
 import { AppRoutingModule } from './app-routing.module';
 
 @NgModule({
-  imports: [BrowserModule, FormsModule, AppRoutingModule, IonicModule.forRoot()],
+  imports: [BrowserModule, FormsModule, AppRoutingModule, IonicModule.forRoot({})],
   declarations: [AppComponent, ExampleComponent],
   bootstrap: [AppComponent],
 })

static/usage/v7/tabs/router/angular/app_module_ts.md

@@ -11,7 +11,7 @@ import { ExampleComponent } from './example.component';
 import { AppRoutingModule } from './app-routing.module';
 
 @NgModule({
-  imports: [BrowserModule, FormsModule, AppRoutingModule, IonicModule.forRoot()],
+  imports: [BrowserModule, FormsModule, AppRoutingModule, IonicModule.forRoot({})],
   declarations: [AppComponent, ExampleComponent],
   bootstrap: [AppComponent],
 })