epam · NataliaLoginova · Feb 10, 2025 · Feb 9, 2025 · Feb 10, 2025
diff --git a/demo/package.json b/demo/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^12.1.3",
+    "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.4.1",
     "@types/node": "^16.11.26",

diff --git a/example/config/webpack.config.js b/example/config/webpack.config.js
@@ -6,6 +6,7 @@ const {
   addWebpackResolve,
 } = require('customize-cra');
 const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 const HtmlReplaceWebpackPlugin = require('html-replace-webpack-plugin');
 const GitRevisionPlugin = require('git-revision-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
@@ -39,6 +40,51 @@ module.exports = override(
       },
     ]),
   ),
+  addWebpackPlugin(
+    new CopyPlugin({
+      patterns: [
+        // {
+        //   from: '../node_modules/ketcher-standalone/**/*.wasm',
+        //   to: '[name][ext]',
+        // },
+        {
+          from: 'serve.json',
+          to: '.',
+        },
+      ],
+    }),
+  ),
+  (config) => {
+    config.plugins = config.plugins.filter(
+      (plugin) => !(plugin instanceof HtmlWebpackPlugin),
+    );
+    config.plugins.push(
+      new HtmlWebpackPlugin({
+        filename: 'index.html',
+        template: 'public/index.html',
+        chunks: ['main'],
+        inject: true,
+      }),
+      new HtmlWebpackPlugin({
+        filename: 'popup.html',
+        template: 'public/popup.html',
+        chunks: ['popup'],
+        inject: true,
+      }),
+      new HtmlWebpackPlugin({
+        filename: 'duo.html',
+        template: 'public/duo.html',
+        chunks: ['duo'],
+        inject: true,
+      }),
+    );
+    config.entry = {
+      main: './src/index.tsx',
+      popup: './src/popupIndex.tsx',
+      duo: './src/duoIndex.tsx',
+    };
+    return config;
+  },
 );
 
 module.exports.envVariables = envVariables;
diff --git a/example/package.json b/example/package.json
@@ -30,8 +30,8 @@
     "test:prettier": "prettier --check \"./**/*.{js,ts,jsx,tsx,json}\"",
     "prettier:write": "prettier --write \"./**/*.{js,jsx,json,ts,tsx}\"",
     "stylelint:fix": "stylelint \"./**/*.{css,less}\" --formatter verbose --fix",
-    "serve:remote": "serve -s dist/remote -l 4001",
-    "serve:standalone": "serve -s dist/standalone -l 4002",
+    "serve:remote": "serve dist/remote -c serve.json -p 4001",
+    "serve:standalone": "serve dist/standalone -c serve.json -p 4002",
     "eject": "react-scripts eject"
   },
   "dependencies": {
@@ -65,12 +65,11 @@
     "prettier": "^2.5.1",
     "react-app-rewired": "^2.2.1",
     "react-scripts": "^5.0.1",
-    "serve": "^13.0.2",
+    "serve": "^14.2.4",
     "shx": "^0.3.3",
     "source-map-loader": "^3.0.1",
-    "stylelint": "13.13.1",
     "typescript": "^4.5.2",
-    "vite": "^4.5.6",
+    "vite": "^4.5.5",
     "vite-plugin-commonjs": "^0.10.4",
     "vite-plugin-html": "^3.2.0",
     "vite-plugin-raw": "^1.0.3",

diff --git a/example/public/duo.html b/example/public/duo.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Ketcher is a web-based chemical structure editor"
+    />
+    <link
+      rel="shortcut icon"
+      type="image/x-icon"
+      href="%PUBLIC_URL%/favicon.ico"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="%PUBLIC_URL%/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="%PUBLIC_URL%/favicon-16x16.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="%PUBLIC_URL%/apple-touch-icon.png"
+    />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <title>Duo Ketcher @@version</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/example/public/popup.html b/example/public/popup.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Ketcher is a web-based chemical structure editor"
+    />
+    <link
+      rel="shortcut icon"
+      type="image/x-icon"
+      href="%PUBLIC_URL%/favicon.ico"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="%PUBLIC_URL%/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="%PUBLIC_URL%/favicon-16x16.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="%PUBLIC_URL%/apple-touch-icon.png"
+    />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <title>Popup Ketcher @@version</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/example/serve.json b/example/serve.json
@@ -0,0 +1,20 @@
+{
+  "rewrites": [
+    {
+      "source": "/popup",
+      "destination": "/popup.html"
+    },
+    {
+      "source": "/duo",
+      "destination": "/duo.html"
+    },
+    {
+      "source": "/iframe",
+      "destination": "/iframe.html"
+    },
+    {
+      "source": "!/**/*.html",
+      "destination": "/index.html"
+    }
+  ]
+}
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -2,11 +2,8 @@ import 'ketcher-react/dist/index.css';
 
 import { useState } from 'react';
 import { ButtonsConfig, Editor, InfoModal } from 'ketcher-react';
-import {
-  Ketcher,
-  RemoteStructServiceProvider,
-  StructServiceProvider,
-} from 'ketcher-core';
+import { Ketcher } from 'ketcher-core';
+import { getStructServiceProvider } from './utils';
 
 const getHiddenButtonsConfig = (): ButtonsConfig => {
   const searchParams = new URLSearchParams(window.location.search);
@@ -21,19 +18,7 @@ const getHiddenButtonsConfig = (): ButtonsConfig => {
   }, {});
 };
 
-let structServiceProvider: StructServiceProvider =
-  new RemoteStructServiceProvider(
-    process.env.API_PATH || process.env.REACT_APP_API_PATH,
-  );
-
-if (process.env.MODE === 'standalone') {
-  const {
-    StandaloneStructServiceProvider,
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-  } = require('ketcher-standalone');
-  structServiceProvider =
-    new StandaloneStructServiceProvider() as StructServiceProvider;
-}
+const structServiceProvider = getStructServiceProvider();
 
 const App = () => {
   const hiddenButtonsConfig = getHiddenButtonsConfig();

diff --git a/example/src/DuoApp.tsx b/example/src/DuoApp.tsx
@@ -0,0 +1,112 @@
+import 'ketcher-react/dist/index.css';
+import { useState } from 'react';
+import { ButtonsConfig, Editor, InfoModal } from 'ketcher-react';
+import { Ketcher } from 'ketcher-core';
+import { getStructServiceProvider } from './utils';
+
+const getHiddenButtonsConfig = (): ButtonsConfig => {
+  const searchParams = new URLSearchParams(window.location.search);
+  const hiddenButtons = searchParams.get('hiddenControls');
+
+  if (!hiddenButtons) return {};
+
+  return hiddenButtons.split(',').reduce((acc, button) => {
+    if (button) acc[button] = { hidden: true };
+
+    return acc;
+  }, {});
+};
+
+const structServiceProvider = getStructServiceProvider();
+
+const DuoApp = () => {
+  const hiddenButtonsConfig = getHiddenButtonsConfig();
+  const [hasError, setHasError] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+
+  // setTimeout(() => {
+  //   document
+  //     .querySelector('.MuiPaper-root')
+  //     ?.setAttribute('style', `min-width: 680px; min-height: 680px`);
+  // }, 500);
+
+  return (
+    <div className="container">
+      <div className="box">
+        {/* The first editor instance */}
+        <Editor
+          errorHandler={(message: string) => {
+            setHasError(true);
+            setErrorMessage(message.toString());
+          }}
+          buttons={hiddenButtonsConfig}
+          staticResourcesUrl={process.env.PUBLIC_URL}
+          structServiceProvider={structServiceProvider}
+          onInit={(ketcher: Ketcher) => {
+            window.ketcher = ketcher;
+
+            window.parent.postMessage(
+              {
+                eventType: 'init',
+              },
+              '*',
+            );
+            window.scrollTo(0, 0);
+          }}
+        />
+        {hasError && (
+          <InfoModal
+            message={errorMessage}
+            close={() => {
+              setHasError(false);
+
+              // Focus on editor after modal is closed
+              const cliparea: HTMLElement | null =
+                document.querySelector('.cliparea');
+              cliparea?.focus();
+            }}
+          />
+        )}{' '}
+      </div>
+
+      <div className="box">
+        {/* The first editor instance */}
+        <Editor
+          errorHandler={(message: string) => {
+            setHasError(true);
+            setErrorMessage(message.toString());
+          }}
+          buttons={hiddenButtonsConfig}
+          staticResourcesUrl={process.env.PUBLIC_URL}
+          structServiceProvider={structServiceProvider}
+          onInit={(ketcher: Ketcher) => {
+            window.ketcher = ketcher;
+
+            window.parent.postMessage(
+              {
+                eventType: 'init',
+              },
+              '*',
+            );
+            window.scrollTo(0, 0);
+          }}
+        />
+        {hasError && (
+          <InfoModal
+            message={errorMessage}
+            close={() => {
+              setHasError(false);
+
+              // Focus on editor after modal is closed
+              const cliparea: HTMLElement | null =
+                document.querySelector('.cliparea');
+              cliparea?.focus();
+            }}
+          />
+        )}{' '}
+      </div>
+    </div>
+  );
+};
+
+export default DuoApp;