React-ace: рдХрд╛рд░реНрдпрдХрд░реНрддрд╛ рджреНрд╡рд╛рд░рд╛ рд╣рдЯрд╛рдП рдЧрдП рдореИрдиреБрдЕрд▓ рдПрдиреЛрдЯреЗрд╢рди

рдХреЛ рдирд┐рд░реНрдорд┐рдд 2 рдЬреБрд▓ре░ 2018  ┬╖  5рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: securingsincity/react-ace

рд╕рдВрдХрдЯ

рдореИрдВ рдЗрд╕ рддрд░рд╣ annotations рд╕рд╛рде react-ace рдШрдЯрдХ рдкреНрд░рд╕реНрддреБрдд рдХрд░ рд░рд╣рд╛ рд╣реВрдВ:

<ReactAce
  mode={'javascript'}
  // ...
  annotations={[{row: 0, column: 0, type: 'error', text: 'Some error.'}]}
/>

рдореИрдиреНрдпреБрдЕрд▓ рдПрдиреЛрдЯреЗрд╢рди рд╕рдВрдХреНрд╖рд┐рдкреНрдд рд░реВрдк рд╕реЗ рджрд┐рдЦрд╛рдИ рджреЗрдЧрд╛, рдлрд┐рд░ рдХрд╛рд░реНрдпрдХрд░реНрддрд╛ рдХреЗ рдЪрд▓рдиреЗ рдХреЗ рдмрд╛рдж рдЙрд╕реЗ рд╣рдЯрд╛ рджрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛ред
рдпрд╣ gif рдПрдХ рдкреЗрдЬ рд░рд┐рдлреНрд░реЗрд╢ рджрд┐рдЦрд╛рддрд╛ рд╣реИред рдкреНрд░рддреНрдпреЗрдХ рдкреГрд╖реНрда рд▓реЛрдб рдкрд░ рдПрдиреЛрдЯреЗрд╢рди рджрд┐рдЦрд╛рдИ рджреЗрддрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдлрд┐рд░ рд╣рдЯрд╛ рджрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред
annotation

рдореИрдВрдиреЗ рдХрд╛рд░реНрдпрдХрд░реНрддрд╛ рдХреЛ setOptions={{useWorker: false}} рд╕рд╛рде рдЕрдХреНрд╖рдо рдХрд░ рджрд┐рдпрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдпрд╣ рдореИрдиреНрдпреБрдЕрд▓ рд░реВрдк рд╕реЗ рдХрд┐рдП рдЧрдП рдПрдиреЛрдЯреЗрд╢рди рдХреЛ рднреА рдЕрдХреНрд╖рдо рдХрд░ рджреЗрддрд╛ рд╣реИред

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

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

annotations рдкреНрд░реЛрдк рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреЗ рдмрдЬрд╛рдп, рдореИрдВ рдореИрдиреНрдпреБрдЕрд▓ рд░реВрдк рд╕реЗ setAnnotations ред

const Editor = ({ annotations: customAnnotations = [], value }) => {
  const [annotations, setAnnotations] = useState([]);
  const [editor, setEditor] = useState();

  const nextAnnotations = [
    ...annotations.filter(({ custom }) => !custom),  // annotations by worker
    ...customAnnotations.map((annotation) => ({ ...annotation, custom: true })) // flag for exclusion
  ];

  useEffect(() => {
    if (editor) {
      editor.getSession().setAnnotations(nextAnnotations);
    }
  }, [editor, JSON.stringify(nextAnnotations)]);

  return (
    <ReactAce
      mode="html"
      onLoad={setEditor}
      onValidate={setAnnotations}
      setOptions={{ useWorker: true }}
      value={value}
   />
}

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

рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдПрдиреЛрдЯреЗрд╢рди рдХреЗ 2 рд╕реЗрдЯ рд╣реЛрдиреЗ рдЪрд╛рд╣рд┐рдПред рдореИрдиреНрдпреБрдЕрд▓ рд░реВрдк рд╕реЗ рдЬреЛрдбрд╝реЗ рдЧрдП рдПрдиреЛрдЯреЗрд╢рди рдФрд░ рдореЛрдб рдХреЗ рдкрд╛рд░реНрд╕рд░ рджреНрд╡рд╛рд░рд╛ рдЬреЗрдирд░реЗрдЯ рдХрд┐рдП рдЧрдП рдПрдиреЛрдЯреЗрд╢рдиред рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рд╡реЗ рд╡рд░реНрддрдорд╛рди рдореЗрдВ рдЯрдХрд░рд╛рддреЗ рд╣реИрдВ рдФрд░ рдПрдХ рджреВрд╕рд░реЗ рдХреЛ рдорд┐рдЯрд╛ рджреЗрддреЗ рд╣реИрдВ ...

рд╣рд╛рдБ, рдпрд╣реА рд╣реЛ рд░рд╣рд╛ рд╣реИред рдореБрдЭреЗ рдпрдХреАрди рдирд╣реАрдВ рд╣реИ рдХрд┐ рдХрд╛рд░реНрдпрдХрд░реНрддрд╛ рдХреЗ рдЬреАрд╡рдирдЪрдХреНрд░ рдХреЗ рдмрд╛рд╣рд░ рдПрдиреЛрдЯреЗрд╢рди рдореМрдЬреВрдж рд╣реЛрдирд╛ рд╕рдВрднрд╡ рд╣реИ рдпрд╛ рдирд╣реАрдВред

рдореИрдВ рдЙрд╕реА рдЪреБрдиреМрддреА рдХрд╛ рд╕рд╛рдордирд╛ рдХрд░ рд░рд╣рд╛ рд╣реВрдВред
рдореИрдВ рд╕рдВрдкрд╛рджрдХ рдХреЛ рдХрд╕реНрдЯрдо рдПрдиреЛрдЯреЗрд╢рди рдЬреЛрдбрд╝рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рд╣реЛрдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ, рдЬрдмрдХрд┐ рдЕрднреА рднреА рдХрд╛рд░реНрдпрдХрд░реНрддрд╛ рджреНрд╡рд╛рд░рд╛ рдПрдиреЛрдЯреЗрд╢рди рдХреЛ рд╕рдВрд░рдХреНрд╖рд┐рдд рдХрд░рдирд╛ рд╣реИред

рдЕрдкрдиреЗ рдХрд╕реНрдЯрдо рдПрдиреЛрдЯреЗрд╢рди рд╕реЗрдЯ рдХрд░рдиреЗ рдХреЗ рдмрд╛рдж, рдХрд╛рд░реНрдпрдХрд░реНрддрд╛ рдХреА рдПрдиреЛрдЯреЗрд╢рди рдореЗрд░рд╛ рдУрд╡рд░рд░рд╛рдЗрдб рдХрд░ рджреЗрддреА рд╣реИред
рдореИрдВрдиреЗ рдРрд╕реЗ рдХрд╛рд░реНрдпрдХрд░реНрддрд╛ рдХреЛ рдЕрдХреНрд╖рдо рдХрд░рдиреЗ рдХреЗ рд╕реБрдЭрд╛рд╡ рджреЗрдЦреЗ рд╣реИрдВред

setOptions={{useWorker: false}}

рдРрд╕рд╛ рдХрд░рдиреЗ рд╕реЗ рдХрд╛рд░реНрдпрдХрд░реНрддрд╛ рдХрд╛ рдПрдиреЛрдЯреЗрд╢рди рдЕрдХреНрд╖рдо рд╣реЛ рдЬрд╛рддрд╛ рд╣реИ, рд╣рд╛рд▓рд╛рдВрдХрд┐ рдореЗрд░реА рд╕рднреА рд▓рд╛рдЗрдирд┐рдВрдЧ/рд╡рд╛рдХреНрдпрд╡рд┐рдиреНрдпрд╛рд╕ рд╣рд╛рдЗрд▓рд╛рдЗрдЯрд┐рдВрдЧ рд╕рдорд╛рдкреНрдд рд╣реЛ рдЧрдИ рд╣реИред (рдмрд┐рд▓реНрдХреБрд▓ рдирд╣реАрдВ рдЬреЛ рдореИрдВ рдЪрд╛рд╣рддрд╛ рд╣реВрдБ)

рдореИрдВ рдЕрдкрдиреЗ рдХрд╕реНрдЯрдо рдПрдиреЛрдЯреЗрд╢рди рдХреЗ рд╕рд╛рде рдХрд╛рд░реНрдпрдХрд░реНрддрд╛ рдХреА рдПрдиреЛрдЯреЗрд╢рди рдХреЛ рдорд░реНрдЬ рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рд╣реЛрдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВред

рдХреНрдпрд╛ рдХреЛрдИ рд╕реБрдЭрд╛рд╡ рджреЗ рд╕рдХрддрд╛ рд╣реИ рдХрд┐ рдЗрд╕ рдмрд╛рд░реЗ рдореЗрдВ рдХреИрд╕реЗ рдЬрд╛рдирд╛ рд╣реИ?

рдирдорд╕реНрддреЗ, рдореИрдВ рдРрд╕реА рд╣реА рд╕реНрдерд┐рддрд┐ рдореЗрдВ рд╣реВрдВ, рдХрд╕реНрдЯрдо рддреНрд░реБрдЯрд┐ рд╕рдВрджреЗрд╢ рдЬреЛрдбрд╝рдиреЗ рдореЗрдВ рдЕрд╕рдорд░реНрде рд╣реВрдВред рдХреЛрдИ рднреА рд╕рдорд╛рдзрд╛рди?

annotations рдкреНрд░реЛрдк рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреЗ рдмрдЬрд╛рдп, рдореИрдВ рдореИрдиреНрдпреБрдЕрд▓ рд░реВрдк рд╕реЗ setAnnotations ред

const Editor = ({ annotations: customAnnotations = [], value }) => {
  const [annotations, setAnnotations] = useState([]);
  const [editor, setEditor] = useState();

  const nextAnnotations = [
    ...annotations.filter(({ custom }) => !custom),  // annotations by worker
    ...customAnnotations.map((annotation) => ({ ...annotation, custom: true })) // flag for exclusion
  ];

  useEffect(() => {
    if (editor) {
      editor.getSession().setAnnotations(nextAnnotations);
    }
  }, [editor, JSON.stringify(nextAnnotations)]);

  return (
    <ReactAce
      mode="html"
      onLoad={setEditor}
      onValidate={setAnnotations}
      setOptions={{ useWorker: true }}
      value={value}
   />
}
рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

nenadlukic picture nenadlukic  ┬╖  6рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

viridia picture viridia  ┬╖  4рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

SecMao picture SecMao  ┬╖  4рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

ghiden picture ghiden  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

Bobcui001 picture Bobcui001  ┬╖  5рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ