Merge pull request #118 from 10play/initial-content-fix

fix: initial content bug
10play · Jun 9, 2024 · 3b0080b · 3b0080b
2 parents 202075f + 16662d9
commit 3b0080b
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 28 deletions.
diff --git a/src/RichText/RichText.tsx b/src/RichText/RichText.tsx
@@ -11,7 +11,7 @@ import { editorHtml } from '../simpleWebEditor/build/editorHtml';
 import { type EditorMessage } from '../types/Messaging';
 import { useKeyboard } from '../utils';
 import type { EditorBridge } from '../types';
-import { getInjectedJS } from './utils';
+import { getInjectedJS, getInjectedJSBeforeContentLoad } from './utils';
 import { isFabric } from '../utils/misc';
 
 interface RichTextProps extends WebViewProps {
@@ -113,33 +113,9 @@ export const RichText = ({ editor, ...props }: RichTextProps) => {
         containerStyle={editor.theme.webviewContainer}
         source={source}
         injectedJavaScript={injectedJavaScript}
-        injectedJavaScriptBeforeContentLoaded={`${
-          editor.bridgeExtensions
-            ? `
-            window.bridgeExtensionConfigMap = '${JSON.stringify(
-              editor.bridgeExtensions.reduce((acc, bridge) => {
-                return {
-                  ...acc,
-                  [bridge.name]: {
-                    optionsConfig: bridge.config,
-                    extendConfig: bridge.extendConfig,
-                  },
-                };
-              }, {})
-            )}';
-
-            window.whiteListBridgeExtensions = [${editor.bridgeExtensions
-              .map((bridgeExtension) => `'${bridgeExtension.name}'`)
-              .join(',')}];
-                `
-            : ''
-        }${
-          editor.initialContent
-            ? `window.initialContent = '${editor.initialContent}';`
-            : ''
-        }
-          window.editable = ${editor.editable};
-        `}
+        injectedJavaScriptBeforeContentLoaded={getInjectedJSBeforeContentLoad(
+          editor
+        )}
         hideKeyboardAccessoryView={true}
         onMessage={onWebviewMessage}
         ref={editor.webviewRef}

diff --git a/src/RichText/utils.ts b/src/RichText/utils.ts
@@ -1,4 +1,5 @@
 import type BridgeExtension from '../bridges/base';
+import type { EditorBridge } from '../types';
 
 /**
  * Creates a new style element and appends it to the head of the document.
@@ -34,3 +35,40 @@ export const getInjectedJS = (bridgeExtensions: BridgeExtension[]) => {
   injectJS += styleSheets.join(' ');
   return injectJS;
 };
+
+/**
+ * Get js code to inject into webview before the content loads
+ */
+export const getInjectedJSBeforeContentLoad = (editor: EditorBridge) => {
+  return formatForInjection(`${
+    editor.bridgeExtensions
+      ? `
+      window.bridgeExtensionConfigMap = '${JSON.stringify(
+        editor.bridgeExtensions.reduce((acc, bridge) => {
+          return {
+            ...acc,
+            [bridge.name]: {
+              optionsConfig: bridge.config,
+              extendConfig: bridge.extendConfig,
+            },
+          };
+        }, {})
+      )}';
+
+      window.whiteListBridgeExtensions = [${editor.bridgeExtensions
+        .map((bridgeExtension) => `'${bridgeExtension.name}'`)
+        .join(',')}];
+          `
+      : ''
+  }${
+    editor.initialContent
+      ? `window.initialContent = '${editor.initialContent}';`
+      : ''
+  }
+    window.editable = ${editor.editable};
+  `);
+};
+
+const formatForInjection = (js: string) => {
+  return js.replace(/\n/g, '').trim();
+};