Merge pull request #18 from 10play/add-build-step

Fix: Add Build Into ts File

.gitignore

@@ -12,7 +12,6 @@ jsconfig.json
 # Xcode
 #
 build/
-!src/editor/build
 !example/src/Examples/Advanced/Editor/build
 *.pbxuser
 !default.pbxuser

package.json

@@ -37,7 +37,7 @@
   ],
   "scripts": {
     "editor:dev": "vite",
-    "editor:build": "vite build",
+    "editor:build": "vite build && node ./scripts/buildEditor.js",
     "example": "yarn workspace tentap-example",
     "test": "jest",
     "typecheck": "tsc --noEmit",

scripts/buildEditor.js

@@ -0,0 +1,31 @@
+const fs = require('fs');
+const path = require('path');
+
+// This script takes the editor html file and places it into a ts variable
+// so that it can be imported without the babel-plugin-inline-import plugin
+const webDIR = path.resolve(__dirname, '../src/simpleWebEditor');
+
+const createContent = (html) => {
+  html = html.replace(/([`$])/g, '\\$1');
+  return (
+    '/* eslint-disable */\n' +
+    'export const editorHtml = String.raw`\n' +
+    html +
+    "\n`.replace(/\\\\([`$])/g, '\\$1')"
+  );
+};
+
+const build = async () => {
+  try {
+    const editorPath = path.join(webDIR, 'build/index.html');
+    const editorHtml = fs.readFileSync(editorPath, 'utf8');
+    const editorTs = createContent(editorHtml);
+    const editorTsPath = path.join(webDIR, 'editorHtml.ts');
+    fs.writeFileSync(editorTsPath, editorTs);
+    console.log('Built Editor!');
+  } catch (error) {
+    console.error('Error building editor', error);
+  }
+};
+
+build();

src/RichText/RichText.tsx

@@ -6,8 +6,7 @@ import {
   type WebViewMessageEvent,
 } from 'react-native-webview';
 
-// @ts-ignore
-import editorHTML from '../simpleWebEditor/build/index.html';
+import { editorHtml } from '../simpleWebEditor/editorHtml';
 
 import { type EditorMessage } from '../types/Messaging';
 import { useKeyboard } from '../utils';
@@ -54,7 +53,7 @@ export const RichText = ({ editor }: RichTextProps) => {
   const { keyboardHeight: iosKeyboardHeight, isKeyboardUp } = useKeyboard();
   const source: WebViewProps['source'] = editor.DEV
     ? { uri: editor.DEV_SERVER_URL || DEV_SERVER_URL }
-    : { html: editor.customSource || editorHTML };
+    : { html: editor.customSource || editorHtml };
 
   const onWebviewMessage = (event: WebViewMessageEvent) => {
     const { data } = event.nativeEvent;