@openedx/frontend-app-instructor-dashboard 1.0.0-alpha.29 → 1.0.0-alpha.30

package/dist/components/CodeEditor.d.ts

@@ -0,0 +1,5 @@
+interface CodeEditorProps {
+    data: string;
+}
+declare const CodeEditor: ({ data }: CodeEditorProps) => import("react/jsx-runtime").JSX.Element;
+export default CodeEditor;

package/dist/components/CodeEditor.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useRef } from 'react';
+import { EditorView, basicSetup } from 'codemirror';
+import { EditorState } from '@codemirror/state';
+const decodeHtml = (raw) => {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(raw, 'text/html');
+    return doc.documentElement.textContent || '';
+};
+const CodeEditor = ({ data }) => {
+    const editorRef = useRef(null);
+    const containerRef = useCallback((node) => {
+        if (editorRef.current) {
+            editorRef.current.destroy();
+            editorRef.current = null;
+        }
+        if (node && data) {
+            editorRef.current = new EditorView({
+                state: EditorState.create({
+                    doc: decodeHtml(data),
+                    extensions: [
+                        basicSetup,
+                        EditorState.readOnly.of(true),
+                        EditorView.editable.of(false),
+                    ],
+                }),
+                parent: node,
+            });
+        }
+    }, [data]);
+    return _jsx("div", { ref: containerRef });
+};
+export default CodeEditor;
+//# sourceMappingURL=CodeEditor.js.map

package/dist/components/CodeEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditor.js","sourceRoot":"","sources":["../../src/components/CodeEditor.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAMhD,MAAM,UAAU,GAAG,CAAC,GAAW,EAAU,EAAE;IACzC,MAAM,MAAM,GAAG,IAAI,SAAS,EAAE,CAAC;IAC/B,MAAM,GAAG,GAAG,MAAM,CAAC,eAAe,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC;IACrD,OAAO,GAAG,CAAC,eAAe,CAAC,WAAW,IAAI,EAAE,CAAC;AAC/C,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,EAAE,IAAI,EAAmB,EAAE,EAAE;IAC/C,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAElD,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,IAA2B,EAAE,EAAE;QAC/D,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YACtB,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;YAC5B,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;QAC3B,CAAC;QACD,IAAI,IAAI,IAAI,IAAI,EAAE,CAAC;YACjB,SAAS,CAAC,OAAO,GAAG,IAAI,UAAU,CAAC;gBACjC,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC;oBACxB,GAAG,EAAE,UAAU,CAAC,IAAI,CAAC;oBACrB,UAAU,EAAE;wBACV,UAAU;wBACV,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAC;wBAC7B,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC;qBAC9B;iBACF,CAAC;gBACF,MAAM,EAAE,IAAI;aACb,CAAC,CAAC;QACL,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,cAAK,GAAG,EAAE,YAAY,GAAI,CAAC;AACpC,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { useCallback, useRef } from 'react';\nimport { EditorView, basicSetup } from 'codemirror';\nimport { EditorState } from '@codemirror/state';\n\ninterface CodeEditorProps {\n  data: string,\n}\n\nconst decodeHtml = (raw: string): string => {\n  const parser = new DOMParser();\n  const doc = parser.parseFromString(raw, 'text/html');\n  return doc.documentElement.textContent || '';\n};\n\nconst CodeEditor = ({ data }: CodeEditorProps) => {\n  const editorRef = useRef<EditorView | null>(null);\n\n  const containerRef = useCallback((node: HTMLDivElement | null) => {\n    if (editorRef.current) {\n      editorRef.current.destroy();\n      editorRef.current = null;\n    }\n    if (node && data) {\n      editorRef.current = new EditorView({\n        state: EditorState.create({\n          doc: decodeHtml(data),\n          extensions: [\n            basicSetup,\n            EditorState.readOnly.of(true),\n            EditorView.editable.of(false),\n          ],\n        }),\n        parent: node,\n      });\n    }\n  }, [data]);\n\n  return <div ref={containerRef} />;\n};\n\nexport default CodeEditor;\n"]}

package/dist/grading/components/GradingConfigurationModal.js

@@ -4,11 +4,12 @@ import { Button, ModalDialog } from '@openedx/paragon';
 import { useIntl } from '@openedx/frontend-base';
 import messages from '../../grading/messages';
 import { useGradingConfiguration } from '../../grading/data/apiHook';
+import CodeEditor from '../../components/CodeEditor';
 const GradingConfigurationModal = ({ isOpen, onClose }) => {
     const intl = useIntl();
     const { courseId = '' } = useParams();
     const { data = null } = useGradingConfiguration(courseId);
-    return (_jsxs(ModalDialog, { title: intl.formatMessage(messages.gradingConfiguration), isOpen: isOpen, onClose: onClose, isOverflowVisible: false, children: [_jsx(ModalDialog.Header, { children: _jsx("h3", { children: intl.formatMessage(messages.gradingConfiguration) }) }), _jsx(ModalDialog.Body, { children: _jsx("p", { children: data !== null && data !== void 0 ? data : intl.formatMessage(messages.noGradingConfiguration) }) }), _jsx(ModalDialog.Footer, { children: _jsx(Button, { onClick: onClose, children: intl.formatMessage(messages.close) }) })] }));
+    return (_jsxs(ModalDialog, { size: "lg", title: intl.formatMessage(messages.gradingConfiguration), isOpen: isOpen, onClose: onClose, isOverflowVisible: false, children: [_jsx(ModalDialog.Header, { className: "p-3 pl-4 border-bottom", children: _jsx(ModalDialog.Title, { as: "h3", className: "m-0", children: intl.formatMessage(messages.gradingConfiguration) }) }), _jsx(ModalDialog.Body, { children: data ? _jsx(CodeEditor, { data: data }) : _jsx("p", { children: intl.formatMessage(messages.noGradingConfiguration) }) }), _jsx(ModalDialog.Footer, { className: "p-4 border-top", children: _jsx(Button, { onClick: onClose, children: intl.formatMessage(messages.close) }) })] }));
 };
 export default GradingConfigurationModal;
 //# sourceMappingURL=GradingConfigurationModal.js.map

package/dist/grading/components/GradingConfigurationModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"GradingConfigurationModal.js","sourceRoot":"","sources":["../../../src/grading/components/GradingConfigurationModal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAOpE,MAAM,yBAAyB,GAAG,CAAC,EAAE,MAAM,EAAE,OAAO,EAAkC,EAAE,EAAE;IACxF,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IACvB,MAAM,EAAE,QAAQ,GAAG,EAAE,EAAE,GAAG,SAAS,EAAwB,CAAC;IAC5D,MAAM,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,uBAAuB,CAAC,QAAQ,CAAC,CAAC;IAE1D,OAAO,CACL,MAAC,WAAW,IAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,oBAAoB,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,KAAK,aAC/H,KAAC,WAAW,CAAC,MAAM,cACjB,uBAAK,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,oBAAoB,CAAC,GAAM,GACzC,EACrB,KAAC,WAAW,CAAC,IAAI,cACf,sBAAI,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,sBAAsB,CAAC,GAAK,GACnD,EACnB,KAAC,WAAW,CAAC,MAAM,cACjB,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,YAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAU,GACpD,IACT,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,yBAAyB,CAAC","sourcesContent":["import { useParams } from 'react-router-dom';\nimport { Button, ModalDialog } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\nimport messages from '@src/grading/messages';\nimport { useGradingConfiguration } from '@src/grading/data/apiHook';\n\ninterface GradingConfigurationModalProps {\n  isOpen: boolean,\n  onClose: () => void,\n}\n\nconst GradingConfigurationModal = ({ isOpen, onClose }: GradingConfigurationModalProps) => {\n  const intl = useIntl();\n  const { courseId = '' } = useParams<{ courseId: string }>();\n  const { data = null } = useGradingConfiguration(courseId);\n\n  return (\n    <ModalDialog title={intl.formatMessage(messages.gradingConfiguration)} isOpen={isOpen} onClose={onClose} isOverflowVisible={false}>\n      <ModalDialog.Header>\n        <h3>{intl.formatMessage(messages.gradingConfiguration)}</h3>\n      </ModalDialog.Header>\n      <ModalDialog.Body>\n        <p>{data ?? intl.formatMessage(messages.noGradingConfiguration)}</p>\n      </ModalDialog.Body>\n      <ModalDialog.Footer>\n        <Button onClick={onClose}>{intl.formatMessage(messages.close)}</Button>\n      </ModalDialog.Footer>\n    </ModalDialog>\n  );\n};\n\nexport default GradingConfigurationModal;\n"]}
+{"version":3,"file":"GradingConfigurationModal.js","sourceRoot":"","sources":["../../../src/grading/components/GradingConfigurationModal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,UAAU,MAAM,4BAA4B,CAAC;AAOpD,MAAM,yBAAyB,GAAG,CAAC,EAAE,MAAM,EAAE,OAAO,EAAkC,EAAE,EAAE;IACxF,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IACvB,MAAM,EAAE,QAAQ,GAAG,EAAE,EAAE,GAAG,SAAS,EAAwB,CAAC;IAC5D,MAAM,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,uBAAuB,CAAC,QAAQ,CAAC,CAAC;IAE1D,OAAO,CACL,MAAC,WAAW,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,oBAAoB,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,KAAK,aACzI,KAAC,WAAW,CAAC,MAAM,IAAC,SAAS,EAAC,wBAAwB,YACpD,KAAC,WAAW,CAAC,KAAK,IAAC,EAAE,EAAC,IAAI,EAAC,SAAS,EAAC,KAAK,YACvC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,oBAAoB,CAAC,GAChC,GACD,EACrB,KAAC,WAAW,CAAC,IAAI,cACd,IAAI,CAAC,CAAC,CAAC,KAAC,UAAU,IAAC,IAAI,EAAE,IAAI,GAAI,CAAC,CAAC,CAAC,sBAAI,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,sBAAsB,CAAC,GAAK,GAChF,EACnB,KAAC,WAAW,CAAC,MAAM,IAAC,SAAS,EAAC,gBAAgB,YAC5C,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,YAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAU,GACpD,IACT,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,yBAAyB,CAAC","sourcesContent":["import { useParams } from 'react-router-dom';\nimport { Button, ModalDialog } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\nimport messages from '@src/grading/messages';\nimport { useGradingConfiguration } from '@src/grading/data/apiHook';\nimport CodeEditor from '@src/components/CodeEditor';\n\ninterface GradingConfigurationModalProps {\n  isOpen: boolean,\n  onClose: () => void,\n}\n\nconst GradingConfigurationModal = ({ isOpen, onClose }: GradingConfigurationModalProps) => {\n  const intl = useIntl();\n  const { courseId = '' } = useParams<{ courseId: string }>();\n  const { data = null } = useGradingConfiguration(courseId);\n\n  return (\n    <ModalDialog size=\"lg\" title={intl.formatMessage(messages.gradingConfiguration)} isOpen={isOpen} onClose={onClose} isOverflowVisible={false}>\n      <ModalDialog.Header className=\"p-3 pl-4 border-bottom\">\n        <ModalDialog.Title as=\"h3\" className=\"m-0\">\n          {intl.formatMessage(messages.gradingConfiguration)}\n        </ModalDialog.Title>\n      </ModalDialog.Header>\n      <ModalDialog.Body>\n        {data ? <CodeEditor data={data} /> : <p>{intl.formatMessage(messages.noGradingConfiguration)}</p>}\n      </ModalDialog.Body>\n      <ModalDialog.Footer className=\"p-4 border-top\">\n        <Button onClick={onClose}>{intl.formatMessage(messages.close)}</Button>\n      </ModalDialog.Footer>\n    </ModalDialog>\n  );\n};\n\nexport default GradingConfigurationModal;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/frontend-app-instructor-dashboard",
-  "version": "1.0.0-alpha.29",
+  "version": "1.0.0-alpha.30",
   "description": "The Open edX Instructor Dashboard",
   "repository": {
     "type": "git",
@@ -57,6 +57,7 @@
   },
   "dependencies": {
     "@edx/openedx-atlas": "^0.7.0",
+    "codemirror": "^6.0.2",
     "lodash": "^4.17.23"
   },
   "devDependencies": {