React-ace: рдХрдВрд╕реЛрд▓ рдореЗрдВ рддреНрд░реБрдЯрд┐, рдШрдЯрдХ рдХреЗ рдХрд╛рдо рдХрд░рдиреЗ рдХреЗ рддрд░реАрдХреЗ рдХреЛ рдкреНрд░рднрд╛рд╡рд┐рдд рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИред рд▓реЗрдХрд┐рди рдпрд╣ рдХрд╖реНрдЯрдкреНрд░рдж рд╣реИред

рдХреЛ рдирд┐рд░реНрдорд┐рдд 11 рдлрд╝рд░ре░ 2020  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: securingsincity/react-ace

рдореБрд╕реАрдмрдд

рдПрдХрд╛рдзрд┐рдХ рдореЛрдб рдЖрдпрд╛рдд рдХрд░рддреЗ рд╕рдордп рддреНрд░реБрдЯрд┐рдпрд╛рдБ

a8a2cc68-d2aa-4415-8e0e-e9de7978ead3:1 Refused to execute script from 'http://localhost:3000/worker-css.js' because its MIME type ('text/html') is not executable.
(anonymous) @ a8a2cc68-d2aa-4415-8e0e-e9de7978ead3:1
a8a2cc68-d2aa-4415-8e0e-e9de7978ead3:1 Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:3000/worker-css.js' failed to load.
    at blob:http://localhost:3000/a8a2cc68-d2aa-4415-8e0e-e9de7978ead3:1:1

рдпреЗ рддреНрд░реБрдЯрд┐рдпрд╛рдВ рдХреБрдЫ рднреА рдЧрдбрд╝рдмрдбрд╝ рдирд╣реАрдВ рдХрд░рддреА рд╣реИрдВ, рд╕рдм рдХреБрдЫ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ рдФрд░ рдпрд╣ рдореЛрдб рдХреЛ рд╕рдлрд▓рддрд╛рдкреВрд░реНрд╡рдХ рдмрджрд▓рдиреЗ рдХрд╛ рдкреНрд░рдмрдВрдзрди рдХрд░рддрд╛ рд╣реИред
рдореИрдВ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдХреЛ рд╡рд┐рднрд┐рдиреНрди рдореЛрдб (рд╕реАрдПрд╕рдПрд╕, рдЬрд╛рд╡рд╛рд╕реНрдХреНрд░рд┐рдкреНрдЯ, рдкрд╛рдпрдерди, рдЖрджрд┐) рдЪреБрдирдиреЗ рдХреА рдХреНрд╖рдорддрд╛ рджреЗ рд░рд╣рд╛ рд╣реВрдВред рдЗрд╕рд▓рд┐рдП рдореИрдВ рдПрдХ рдкрд┐рдХрд░ рд╕реВрдЪреА рдореЗрдВ рдЬреЛ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдкреВрдЫрддрд╛ рд╣реИ рдЙрд╕рдХреЗ рдЖрдзрд╛рд░ рдкрд░ рдореИрдВ рдкреНрд░реЛрдЧреНрд░рд╛рдорд┐рдХ рд░реВрдк рд╕реЗ рдореЛрдб рдЖрдпрд╛рдд рдХрд░ рд░рд╣рд╛ рд╣реВрдВред

рдЖрдкрдХреА рд╕рдорд╕реНрдпрд╛ рдХреЛ рдкреБрди: рдкреЗрд╢ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдирдореВрдирд╛ рдХреЛрдб

// This runs whenever a new mode is selected by the user
    const handleModeChange = (event) => {
      var currentMode = event.target.value;
      require(`ace-builds/src-noconflict/mode-${currentMode}`)
      setState({...state, currentMode})
    }


            <AceEditor
              mode={state.currentMode}
              width="100%"
              theme="twilight"
              value={state.code}
              onChange={onChange}
              name="code_editor"
              editorProps={{ $blockScrolling: true }}
            /> 

рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА

рд╕рдорд╛рдзрд╛рди:

рдореЗрд░реЗ рджреНрд╡рд╛рд░рд╛ import "ace-builds/webpack-resolver" рдЬреЛрдбрд╝рдиреЗ рдХреЗ рдмрд╛рдж рдЗрд╕рдХрд╛ рд╕рдорд╛рдзрд╛рди рдХрд┐рдпрд╛ рдЧрдпрд╛
рджреЗрдЦреЗрдВ https://github.com/securingsincity/react-ace/issues/725#issuecomment -543109155

рд╕рднреА 3 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

рдПрдХ рд╣реА рддреНрд░реБрдЯрд┐ рдкреНрд░рд╛рдкреНрдд рдХрд░рдирд╛

import AceEditor from "react-ace"

import "ace-builds/src-noconflict/mode-javascript"
import "ace-builds/src-noconflict/theme-monokai"
//...
  <AceEditor
      name="Ace-editor"
      mode="javascript"
      fontSize={15}
      wrapEnabled={true}
      value={beautify(JSON.stringify(state.stepDetails))}
      theme="monokai"
      onChange={handleSchemaChange}
      enableBasicAutocompletion={true}
      enableLiveAutocompletion={true}
      editorProps={{ $blockScrolling: true }}
    />

рд╕рдорд╛рдзрд╛рди:

рдореЗрд░реЗ рджреНрд╡рд╛рд░рд╛ import "ace-builds/webpack-resolver" рдЬреЛрдбрд╝рдиреЗ рдХреЗ рдмрд╛рдж рдЗрд╕рдХрд╛ рд╕рдорд╛рдзрд╛рди рдХрд┐рдпрд╛ рдЧрдпрд╛
рджреЗрдЦреЗрдВ https://github.com/securingsincity/react-ace/issues/725#issuecomment -543109155

рдзрдиреНрдпрд╡рд╛рдж @pi0neerpat !

рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕