Add code example: Embed Ketcher into React SPA

[mohacsizs]

Could you implement a code example that shows how to embed a non-full-size ketcher react component into a single page react application?

Please showcase the following:

• Embed a non-full-size (e.g. 640px*640px) ketcher into a react SPA
• Import a molecule from a textarea (MOL or SMILES) to ketcher by pressing a button on the page
• Display the molecule as MOL or SMILES in a div, and update the text when the molecule is changed in the editor

[AndreiMazol]

Dear @mohacsizs ,

example of injecting Ketcher into react app can be found here. If you want to render it in non-full-size mode you should wrap component by additional parent node with fixed size.
For details please look at the picture below:

Best regards,
Ketcher team

[Yuting918]

Hi Kether team,

Thank you so much for showing this. But I have trouble utilizing this example (This is highly likely being my issue, I am really new to this realm). Below is what I've tried:

1. I cloned the whole repository into my local machine
2. 1 went into the example directory https://github.com/epam/ketcher/tree/master/example of my local copy
3. I use yarn install and then yarn start
4. yarn start gives errors like 'Couldn't find a script named "start".' etc... I fixed it by installing packages with yarn
5. File finally complies but I got the following error:

Can anyone please help how shall I utilizing the ketcher package with the example or maybe inform me at which step I made a mistake. It would be really appreciated. Many thanks in advance.

ERROR in main
Module not found: Error: Can't resolve './src' in '/Users/yutingq/Desktop/Projects/0.WebDev/ketcher/ketcher/example'
resolve './src' in '/Users/yutingq/Desktop/Projects/0.WebDev/ketcher/ketcher/example'
  using description file: /Users/yutingq/Desktop/Projects/0.WebDev/ketcher/ketcher/example/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/yutingq/Desktop/Projects/0.WebDev/ketcher/ketcher/example/package.json (relative path: ./src)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/yutingq/Desktop/Projects/0.WebDev/ketcher/ketcher/example/src is not a file
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/yutingq/Desktop/Projects/0.WebDev/ketcher/ketcher/example/src.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /Users/yutingq/Desktop/Projects/0.WebDev/ketcher/ketcher/example/src.json doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        /Users/yutingq/Desktop/Projects/0.WebDev/ketcher/ketcher/example/src.wasm doesn't exist
      as directory
        existing directory /Users/yutingq/Desktop/Projects/0.WebDev/ketcher/ketcher/example/src
          using description file: /Users/yutingq/Desktop/Projects/0.WebDev/ketcher/ketcher/example/package.json (relative path: ./src)
            using path: /Users/yutingq/Desktop/Projects/0.WebDev/ketcher/ketcher/example/src/index
              using description file: /Users/yutingq/Desktop/Projects/0.WebDev/ketcher/ketcher/example/package.json (relative path: ./src/index)
                no extension
                  Field 'browser' doesn't contain a valid alias configuration
                  /Users/yutingq/Desktop/Projects/0.WebDev/ketcher/ketcher/example/src/index doesn't exist
                .js
                  Field 'browser' doesn't contain a valid alias configuration
                  /Users/yutingq/Desktop/Projects/0.WebDev/ketcher/ketcher/example/src/index.js doesn't exist
                .json
                  Field 'browser' doesn't contain a valid alias configuration
                  /Users/yutingq/Desktop/Projects/0.WebDev/ketcher/ketcher/example/src/index.json doesn't exist
                .wasm
                  Field 'browser' doesn't contain a valid alias configuration
                  /Users/yutingq/Desktop/Projects/0.WebDev/ketcher/ketcher/example/src/index.wasm doesn't exist

webpack 5.70.0 compiled with 1 error in 361 ms

[luna215]

When I try to inject Ketcher onto my project and try to build my project, I get the following errors:

[0] node_modules/ketcher-core/dist/application/formatters/formatterFactory.d.ts(19,5): error TS18028: Private identifiers are only available when targeting ECMAScript 2015 and higher.
[0] node_modules/ketcher-core/dist/application/indigo.d.ts(39,5): error TS18028: Private identifiers are only available when targeting ECMAScript 2015 and higher.
[0] node_modules/ketcher-core/dist/application/ketcher.d.ts(23,5): error TS18028: Private identifiers are only available when targeting ECMAScript 2015 and higher.
[0] node_modules/ketcher-core/dist/application/ketcherBuilder.d.ts(20,5): error TS18028: Private identifiers are only available when targeting ECMAScript 2015 and higher.
[0] node_modules/ketcher-core/dist/application/render/restruct/reenhancedFlag.d.ts(20,5): error TS18028: Private identifiers are only available when targeting ECMAScript 2015 and higher.
[0] node_modules/ketcher-core/dist/application/render/restruct/retext.d.ts(16,38): error TS7016: Could not find a declaration file for module 'draft-js'. '/Users/paulluna/development/molstar-private/node_modules/draft-js/lib/Draft.js' implicitly has an 'any' type.
[0]   Try `npm i --save-dev @types/draft-js` if it exists or add a new declaration (.d.ts) file containing `declare module 'draft-js';`
[0] node_modules/ketcher-core/dist/domain/entities/fragment.d.ts(25,5): error TS18028: Private identifiers are only available when targeting ECMAScript 2015 and higher.
[0] node_modules/ketcher-core/dist/domain/entities/functionalGroup.d.ts(3,5): error TS18028: Private identifiers are only available when targeting ECMAScript 2015 and higher.
[0] tsc --incremental exited with code 2
[1] node_modules/ketcher-core/dist/domain/entities/functionalGroup.d.ts(3,5): error TS18028: Private identifiers are only available when targeting ECMAScript 2015 and higher.
[1] node_modules/ketcher-core/dist/domain/entities/fragment.d.ts(25,5): error TS18028: Private identifiers are only available when targeting ECMAScript 2015 and higher.
[1] node_modules/ketcher-core/dist/application/formatters/formatterFactory.d.ts(19,5): error TS18028: Private identifiers are only available when targeting ECMAScript 2015 and higher.
[1] node_modules/ketcher-core/dist/application/render/restruct/reenhancedFlag.d.ts(20,5): error TS18028: Private identifiers are only available when targeting ECMAScript 2015 and higher.
[1] node_modules/ketcher-core/dist/application/render/restruct/retext.d.ts(16,38): error TS7016: Could not find a declaration file for module 'draft-js'. '/Users/paulluna/development/molstar-private/node_modules/draft-js/lib/Draft.js' implicitly has an 'any' type.
[1]   Try `npm i --save-dev @types/draft-js` if it exists or add a new declaration (.d.ts) file containing `declare module 'draft-js';`
[1] node_modules/ketcher-core/dist/application/indigo.d.ts(39,5): error TS18028: Private identifiers are only available when targeting ECMAScript 2015 and higher.
[1] node_modules/ketcher-core/dist/application/ketcher.d.ts(23,5): error TS18028: Private identifiers are only available when targeting ECMAScript 2015 and higher.
[1] node_modules/ketcher-core/dist/application/ketcherBuilder.d.ts(20,5): error TS18028: Private identifiers are only available when targeting ECMAScript 2015 and higher.
[1] tsc --build tsconfig.commonjs.json --incremental exited with code 1

Anyone else run into this?

[luna215]

These are my tsconfig:

{
    "compilerOptions": {
        "declaration": true,
        "target": "es5",
        "alwaysStrict": true,
        "noImplicitAny": true,
        "noImplicitThis": true,
        "sourceMap": false,
        "noUnusedLocals": true,
        "strictNullChecks": true,
        "strictFunctionTypes": true,
        "module": "CommonJS",
        "esModuleInterop": true,
        "moduleResolution": "node",
        "importHelpers": true,
        "noEmitHelpers": true,
        "allowSyntheticDefaultImports": true,
        "jsx": "react-jsx",
        "lib": [ "es6", "dom", "esnext.asynciterable", "es2016" ],
        "rootDir": "src",
        "outDir": "lib/commonjs"
    },
    "include": [ "src/**/*" ]
}