#6034 – Make macromolecules switcher enabled by default

example-separate-editors/.eslintignore

@@ -0,0 +1,4 @@
+dist/
+public/
+build/
+config/

example-separate-editors/.eslintrc.json

@@ -0,0 +1,34 @@
+{
+  "root": false,
+  "env": {
+    "browser": true
+  },
+  "extends": [
+    "plugin:react/jsx-runtime",
+    "plugin:jsx-a11y/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:jest/recommended"
+  ],
+  "rules": {
+    "@typescript-eslint/ban-ts-comment": "warn",
+    "jsx-a11y/label-has-associated-control": "warn",
+    "jsx-a11y/no-static-element-interactions": "warn",
+    "jsx-a11y/no-autofocus": "warn",
+    "jsx-a11y/no-noninteractive-element-interactions": "warn",
+    "jsx-a11y/alt-text": "warn",
+    "jsx-a11y/click-events-have-key-events": "warn"
+  },
+  "overrides": [
+    {
+      "files": [
+        "**/__tests__/**/*.[jt]s?(x)",
+        "**/?(*.)+(spec|test).[jt]s?(x)"
+      ],
+      "extends": ["plugin:testing-library/react"],
+      "rules": {
+        "testing-library/no-container": "warn",
+        "testing-library/no-node-access": "warn"
+      }
+    }
+  ]
+}

example-separate-editors/.prettierignore

@@ -0,0 +1,2 @@
+build/
+dist/

example-separate-editors/.stylelintignore

@@ -0,0 +1,2 @@
+build/
+dist/

example-separate-editors/README.md

@@ -0,0 +1,6 @@
+This example was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+It is linked to the @ketcher/react package in the parent directory for development purposes.
+
+To run application for development purposes, please check instructions:
+[DEVNOTES.md](https://github.com/epam/ketcher/blob/master/DEVNOTES.md)

example-separate-editors/config/webpack.config.js

@@ -0,0 +1,51 @@
+const {
+  override,
+  addBundleVisualizer,
+  addWebpackModuleRule,
+  addWebpackPlugin,
+} = require('customize-cra');
+const webpack = require('webpack');
+const HtmlReplaceWebpackPlugin = require('html-replace-webpack-plugin');
+const GitRevisionPlugin = require('git-revision-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
+
+const gitRevisionPlugin = new GitRevisionPlugin();
+const applicationVersion = gitRevisionPlugin.version().split('-')[0];
+
+const envVariables = {
+  MODE: process.env.MODE || 'standalone',
+  API_PATH: process.env.REACT_APP_API_PATH,
+  ENABLE_POLYMER_EDITOR: !!process.env.ENABLE_POLYMER_EDITOR,
+  KETCHER_ENABLE_REDUX_LOGGER: JSON.stringify(false),
+};
+
+module.exports = override(
+  addBundleVisualizer({}, true),
+  addWebpackModuleRule({
+    test: /\.js$/,
+    enforce: 'pre',
+    loader: 'source-map-loader',
+    exclude: /node_modules/,
+  }),
+  addWebpackPlugin(new webpack.EnvironmentPlugin(envVariables)),
+  addWebpackPlugin(
+    new HtmlReplaceWebpackPlugin([
+      {
+        pattern: '@@version',
+        replacement: applicationVersion,
+      },
+    ]),
+  ),
+  addWebpackPlugin(
+    new CopyPlugin({
+      patterns: [
+        {
+          from: '../node_modules/ketcher-standalone/**/*.wasm',
+          to: '[name][ext]',
+        },
+      ],
+    }),
+  ),
+);
+
+module.exports.envVariables = envVariables;

example-separate-editors/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "example-separate-editors",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev:standalone": "cross-env MODE=standalone vite",
+    "dev:standalone:macro": "cross-env ENABLE_POLYMER_EDITOR=true MODE=standalone vite",
+    "dev:remote": "cross-env MODE=remote vite",
+    "start:standalone": "cross-env MODE=standalone react-app-rewired start",
+    "start:remote": "cross-env MODE=remote react-app-rewired start",
+    "init:build": "shx mkdir -p build",
+    "init:dist": "cross-env-shell shx mkdir -p dist/$MODE",
+    "delete:dist": "cross-env-shell shx rm -rf dist/$MODE",
+    "copy:build": "cross-env-shell shx cp -r build/. dist/$MODE",
+    "prebuild": "cross-env-shell run-s init:build delete:dist init:dist",
+    "postbuild": "cross-env-shell npm run copy:build",
+    "build:remote": "cross-env-shell MODE=remote run-s prebuild build:react postbuild",
+    "build:standalone": "cross-env-shell MODE=standalone run-s prebuild build:react postbuild",
+    "build:react": "cross-env-shell MODE=$MODE react-app-rewired build && echo $MODE",
+    "build:react:analyze": "react-app-rewired build --analyze",
+    "build": "npm run build:standalone && npm run build:remote",
+    "build:standalone:analyze": "cross-env MODE=standalone run-s prebuild build:react:analyze postbuild",
+    "build:remote:analyze": "cross-env MODE=remote run-s prebuild build:react:analyze postbuild",
+    "test": "run-s test:prettier test:stylelint test:eslint:quiet test:types test:unit",
+    "test:eslint": "eslint . --ext .ts,.js,.jsx,.tsx",
+    "test:eslint:quiet": "npm run test:eslint -- --quiet",
+    "test:eslint:fix": "npm run test:eslint -- --fix",
+    "test:types": "tsc --noEmit",
+    "test:unit": "react-app-rewired test --passWithNoTests --watchAll=false",
+    "test:stylelint": "stylelint \"./**/*.{css,less}\" --formatter",
+    "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",
+    "eject": "react-scripts eject"
+  },
+  "dependencies": {
+    "ketcher-core": "*",
+    "ketcher-macromolecules": "*",
+    "ketcher-react": "*",
+    "ketcher-standalone": "*",
+    "normalize.css": "^8.0.1",
+    "react": "^18.2.0",
+    "react-app-polyfill": "^2.0.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-replace": "^5.0.2",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.5.0",
+    "@testing-library/user-event": "^7.2.1",
+    "@types/jest": "^27.0.3",
+    "@types/node": "^16.11.12",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.8",
+    "@vitejs/plugin-react": "^4.0.0",
+    "@welldone-software/why-did-you-render": "^4.3.1",
+    "copy-webpack-plugin": "^12.0.2",
+    "cross-env": "^7.0.3",
+    "customize-cra": "^1.0.0",
+    "eslint": "^8.44.0",
+    "git-revision-webpack-plugin": "^3.0.6",
+    "html-replace-webpack-plugin": "^2.5.6",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.5.1",
+    "react-app-rewired": "^2.2.1",
+    "react-scripts": "^5.0.1",
+    "serve": "^13.0.2",
+    "shx": "^0.3.3",
+    "source-map-loader": "^3.0.1",
+    "stylelint": "13.13.1",
+    "typescript": "^4.5.2",
+    "vite": "^4.5.5",
+    "vite-plugin-html": "^3.2.0",
+    "vite-plugin-raw": "^1.0.3",
+    "vite-plugin-svgr": "^2.4.0",
+    "webpack-bundle-analyzer": "^4.8.0"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "ie 11",
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "config-overrides-path": "config/webpack.config.js"
+}

example-separate-editors/public/iframe.html

@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <style>
+      .modal {
+        display: block;
+        position: fixed;
+        z-index: 1;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        background-color: rgb(0, 0, 0);
+        background-color: rgba(0, 0, 0, 0.4);
+      }
+
+      .modal-content {
+        background-color: #fefefe;
+        margin: 0% auto;
+        padding: 20px;
+        border: 1px solid #888;
+        width: 80%;
+      }
+
+      .close {
+        color: #aaa;
+        float: right;
+        font-size: 28px;
+        font-weight: bold;
+      }
+
+      .close:hover,
+      .close:focus {
+        color: black;
+        text-decoration: none;
+        cursor: pointer;
+      }
+
+      .inputs {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .columns {
+        width: 100%;
+        display: flex;
+        gap: 40px;
+      }
+
+      .columns > div:nth-child(2) {
+        width: 80%;
+      }
+
+      textarea {
+        width: 100%;
+        height: 500px;
+      }
+
+      input {
+        margin: 5px 0;
+      }
+
+      label {
+        margin-right: 20px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="columns">
+      <div>
+        <button>Open Modal</button>
+        <div class="inputs">
+          <div>
+            <label>Height</label>
+            <input placeholder="height" class="height" />
+          </div>
+          <div>
+            <label>Width</label>
+            <input placeholder="width" class="width" />
+          </div>
+        </div>
+      </div>
+      <div>
+        <textarea
+          class="molecule"
+          placeholder="Insert a molecule here..."
+        ></textarea>
+      </div>
+    </div>
+    <script defer>
+      const button = document.querySelector('button')
+      const textarea = document.querySelector('.molecule')
+      const width = document.querySelector('.width')
+      const height = document.querySelector('.height')
+      const modalContent = `
+        <div class="modal-content">
+            <span class="close">&times;</span>
+            <iframe
+            width="784"
+            height="624"
+            id="iframe"
+            src="env_url"
+            sandbox="allow-scripts allow-same-origin"
+            ></iframe>
+        </div>
+      `
+      let modal
+      let closeIcon;
+      let iframe;
+
+      function closeModal() {
+        closeIcon.removeEventListener('click', closeModal)
+        modal.remove()
+      }
+
+      function createModal() {
+        modal = document.createElement('div')
+        modal.classList.add('modal')
+        modal.innerHTML = modalContent
+        document.body.appendChild(modal)
+
+        closeIcon = document.querySelector('.close')
+        iframe = document.getElementById('iframe')
+        iframe.style.height = height.value + 'px'
+        iframe.style.width = width.value + 'px'
+
+        closeIcon.addEventListener('click', closeModal)
+      }
+
+      button.onclick = createModal
+      window.onclick = function (event) {
+        if (event.target == modal) {
+            closeModal()
+        }
+      }
+
+      window.addEventListener('message', (event) => {
+        if (event.data.eventType === 'init') {
+          iframe.contentWindow.ketcher.setMolecule(textarea.value)
+        }
+      })
+    </script>
+  </body>
+</html>

example-separate-editors/public/index.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>Ketcher @@version</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>