We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
when ever I change the language as javascript of editor it throws this issue.
version I'm using is
"react-ace": "^10.1.0", "ace-builds": "^1.15.0", "next": "^13.1.6", "react": "^18.2.0", "react-dom": "^18.2.0",
import React, { useEffect } from 'react'; import AceEditor from 'react-ace'; import { getLanguageIdForAceEditor } from '/lib/helpers'; import 'ace-builds/webpack-resolver'; import 'ace-builds/src-noconflict/snippets/c_cpp'; import 'ace-builds/src-noconflict/snippets/java'; import 'ace-builds/src-noconflict/snippets/python'; import 'ace-builds/src-noconflict/snippets/php'; import 'ace-builds/src-noconflict/snippets/ruby'; import 'ace-builds/src-noconflict/snippets/csharp'; import 'ace-builds/src-noconflict/snippets/swift'; import 'ace-builds/src-noconflict/snippets/perl'; import 'ace-builds/src-noconflict/snippets/javascript' import 'ace-builds/src-noconflict/mode-java'; import 'ace-builds/src-noconflict/mode-c_cpp'; import 'ace-builds/src-noconflict/mode-python'; import 'ace-builds/src-noconflict/mode-ruby'; import 'ace-builds/src-noconflict/mode-php'; import 'ace-builds/src-noconflict/mode-csharp'; import 'ace-builds/src-noconflict/mode-swift'; import 'ace-builds/src-noconflict/mode-perl'; import 'ace-builds/src-noconflict/mode-javascript' import 'ace-builds/src-noconflict/theme-xcode'; import 'ace-builds/src-noconflict/ext-language_tools'; import 'ace-builds/src-noconflict/ext-searchbox'; const CodeEditor = ({ editorHead, editorCode, editorTail, languageId, handleEditorChange, disableCopyPaste }) => { //Call function to the stop the event listeners function stop(event) { event.stopPropagation(); event.preventDefault(); return false; } //Restrict copy, paste, cut events for code editor by classname useEffect(() => { let editor = document.getElementsByClassName('ace')[0]; if(editor && disableCopyPaste) { editor.addEventListener('copy', stop, true) editor.addEventListener('paste', stop, true) editor.addEventListener('cut', stop, true) editor.addEventListener('contextmenu', stop, true) } // eslint-disable-next-line react-hooks/exhaustive-deps }, []) return( <> {editorHead && <AceEditor mode={getLanguageIdForAceEditor(languageId)} theme="xcode" name="ace-head" value={editorHead} width="100%" showPrintMargin={false} style={{ pointerEvents: 'none', opacity: '0.8' }} setOptions={{ enableBasicAutocompletion: true, enableLiveAutocompletion: true, enableSnippets: true, readOnly: true, showLineNumbers: false, showFoldWidgets: false, minLines: parseInt(editorHead.split(/\r\n|\r|\n/).length) + 1, maxLines: 'Infinity', highlightSelectedWord: false, highlightActiveLine: false, highlightGutterLine: false }} /> } <AceEditor mode={getLanguageIdForAceEditor(languageId ? languageId : 'c')} theme="xcode" className={'ace'} onChange={handleEditorChange} name="ace-code" value={editorCode} width="100%" showPrintMargin={false} editorProps={{ blockScrolling: true }} setOptions={{ enableBasicAutocompletion: true, enableLiveAutocompletion: true, enableSnippets: true, minLines: 10, maxLines: 'Infinity', dragEnabled: false }} /> {editorTail && <AceEditor mode={getLanguageIdForAceEditor(languageId ? languageId : 'c')} theme="xcode" name="ace-tail" value={editorTail} width="100%" showPrintMargin={false} style={{ pointerEvents: 'none', opacity: '0.8' }} setOptions={{ enableBasicAutocompletion: true, enableLiveAutocompletion: true, enableSnippets: true, readOnly: true, showLineNumbers: false, showFoldWidgets: false, minLines: parseInt(editorTail.split(/\r\n|\r|\n/).length) + 1, maxLines: 'Infinity', highlightSelectedWord: false, highlightActiveLine: false, highlightGutterLine: false }} /> } </> ); } export default React.memo(CodeEditor);
import React, { useEffect, useRef, useState } from 'react'; import { useInterval } from 'ahooks'; import Image from 'next/legacy/image' import { toast } from 'react-toastify'; import axios from '/lib/axios'; import dynamic from 'next/dynamic' import Button from '/components/Button'; import ContentCard from '/components/ContentCard'; import { usePrograms } from '/hooks/programs'; import CompilationStatus from '/components/Programs/CompilationStatus'; import question from '/public/icons/question.svg'; import { autoCodeRecordInterval, judgingDelay, judgingMaxTries } from '/components/Constant'; import { handleException } from '/lib/helpers'; import { useRouter } from 'next/router'; import Tooltip from '/components/Tooltip'; import EditorSplitView from '/components/Programs/EditorSplitView'; import { editorActions } from '/components/Constant'; const DynamicCodeEditorWithNoSSR = dynamic( () => import('/components/Programs/CodeEditor'), { ssr: false } ) let timeOutId; const EditorLayout = ({ languages, sectionId, contestId, problemId, latestSubmitLanguageId, notify, runCodeNotification, disableCopyPaste, isSplitView, editorCode, editorHead, editorTail, languageId, dispatchEditor }) => { const router = useRouter() const { programSubmit, languageCode } = usePrograms(); const [checkBox, setCheckBox] = useState(false); const [customInput, setCustomInput] = useState(null); const [submitLoader, setSubmitLoader] = useState(false); const [runLoader, setRunLoader] = useState(false); const [judgingResult, setJudgingResult] = useState(null) const [judgingResultLoader, setJudgingResultLoader] = useState(false) const [viewCompileStatus, setViewCompileStatus] = useState(false) const [submissionId, setSubmissionId] = useState(''); const [cancelSubmission, setCancelSubmission] = useState(false); const [codeAction, setCodeAction] = useState('') const codeActionRef = useRef(codeAction); codeActionRef.current = codeAction; let judgingTries = 0; useEffect(() => { if (languageId) { languageCode({ sectionId, problemId, languageId, dispatchEditor }) } return () => { clearTimeout(timeOutId); } }, []) // eslint-disable-line react-hooks/exhaustive-deps const onLanguageChange = (languageId) => { dispatchEditor({ type:editorActions.LANGUAGE_CHANGE, payload:languageId }) languageCode({ sectionId, problemId, languageId, dispatchEditor }) } const handleEditorChange = (value) => { dispatchEditor({ type:editorActions.HANDLE_EDITOR_CHANGE, payload: value }) } return(<DynamicCodeEditorWithNoSSR editorHead={editorHead} editorCode={editorCode} editorTail={editorTail} languageId={languageId} handleEditorChange={handleEditorChange} disableCopyPaste={disableCopyPaste} />) } export default React.memo(EditorLayout);
could any one please fix this issue?
The text was updated successfully, but these errors were encountered:
I have the same problem, did you fixed it?
Sorry, something went wrong.
i have the same problem, you can manually set useWorker to false first to resolve this problem
<AceEditor setOptions={{ useWorker: false }} />
No branches or pull requests
Uncaught NetworkError: Failed to execute 'importScripts' on 'WorkerGlobalScope':
when ever I change the language as javascript of editor it throws this issue.
version I'm using is
Sample code
codeEditor.js
editorLayout.js
could any one please fix this issue?
The text was updated successfully, but these errors were encountered: