Commit 17f06b07 authored by Bruno Burke's avatar Bruno Burke 😁

remove cljsjs dependencies, fix syntax-highlighting in programming-exercise and ce-code

parent 7e02001f
Pipeline #45382 passed with stages
in 1 minute and 47 seconds
......@@ -9,7 +9,7 @@
"devDependencies": {
"sortablejs": "^1.7.0",
"materialize-css": "^1.0.0",
"codemirror": "^5.29.0",
"codemirror": "^5.56.0",
"mathjs": "^6.0.2",
"tinymce": "^5.2.1",
"quill": "^1.3.5",
......
......@@ -13,10 +13,8 @@
[clj-http "3.10.1"]
[wwsoftware/clj-helper "0.0.3.2"]
[cljs-ajax "0.8.0"]
[cljsjs/codemirror "5.44.0-1"]
[cheshire "5.10.0"] ;;; clj-http json support
[devcards "0.2.7" :exclusions [cljsjs/react]]
[cljsjs/react-json-view "1.19.1-0"]]
[devcards "0.2.7" :exclusions [cljsjs/react]]]
:aliases {"fig" ["trampoline" "run" "-m" "figwheel.main"]
"build-dev" ["trampoline" "run" "-m" "figwheel.main" "-b" "dev" "-r"]}
......
......@@ -13,6 +13,11 @@
<script src="node_modules/sortablejs/Sortable.js"></script>
<script src="node_modules/codemirror/lib/codemirror.js"></script>
<script src="node_modules/codemirror/mode/python/python.js"></script>
<script src="node_modules/codemirror/mode/clojure/clojure.js"></script>
<script src="node_modules/codemirror/mode/javascript/javascript.js"></script>
<script src="node_modules/codemirror/mode/clike/clike.js"></script>
<script src="node_modules/codemirror/mode/commonlisp/commonlisp.js"></script>
<script src="node_modules/codemirror/mode/scheme/scheme.js"></script>
<script src="node_modules/katex/dist/katex.js"></script>
<script src="node_modules/katex/dist/contrib/auto-render.min.js"></script>
<link rel="stylesheet" href="node_modules/katex/dist/katex.css">
......
......@@ -69,7 +69,6 @@
(or value [])
(or value ""))
:on-change (fn [event]
(js/console.log multiple)
(let [value (-> event
.-target
.-value)]
......
......@@ -125,13 +125,17 @@
(defn component-error [error]
[:div.container
[:p.red
[:img.secondary-content {:src the-scream}]
[:i.material-icons.black.yellow-text "warning"]
" SCHWERWIEGENDER FEHLER "
[:i.material-icons.black.yellow-text "warning"]
[:br]
(str error)]])
[:div.columns.has-background-danger
[:div.column.is-one-fifth
[:img.secondary-content {:src the-scream}]
]
[:div.column.is-four-fifth
[:span.icon [:i.fas.fa-exclamation-triangle]]
[:span "SCHWERWIEGENDER FEHLER"]
[:span.icon [:i.fas.fa-exclamation-triangle]][:hr ]
[:span (str error)]
]
]])
(defn styles [style-urls]
[:<>
......
......@@ -4,8 +4,6 @@
[lernmeister.components.content-elements.core :as ce-core]
[lernmeister.components.content-elements.blockly.blocks :as bblock]
[lernmeister.components.content-elements.blockly.show :refer [blockly-component]]
[cljsjs.codemirror]
[cljsjs.codemirror.mode.python]
[lernmeister.components.ui :as ui]
[oops.core :refer [oget]]))
......
......@@ -2,12 +2,11 @@
(:require [reagent.core :as reagent]
[lernmeister.components.exercise-types.programming.spec :refer [programming-languages]]
[lernmeister.components.content-elements.core :as ce-core]
[cljsjs.codemirror]
[cljsjs.codemirror.mode.python]
[lernmeister.components.content-elements.code.show :refer [code-editor]]
[lernmeister.components.ui :as ui]))
(defn code-editor [code]
#_(defn code-editor [code]
(let [cm-atom (atom nil)
id (str (gensym) "_code_editor")]
(reagent/create-class
......@@ -40,5 +39,9 @@
:options programming-languages
:on-change #(swap! element assoc :language %)}]]
[ui/field {:label "Code"}
[code-editor (reagent/cursor element [:code])]]])))
[code-editor
{:code (get-in @element [:code])
:language (:language @element)
:on-change #(swap! element assoc :code %)}]
]])))
(ns lernmeister.components.content-elements.code.show
(:require [reagent.core :as reagent]
[reagent.dom :as rdom]
[lernmeister.components.content-elements.core :as ce-core]
[lernmeister.components.common :as common]
[lernmeister.components.ui :as ui]))
(defn code-editor [code & {:keys [language on-change cm-editor-id]}]
(defn get-codemirror-mode [language]
(case (name language)
"python2" "python"
"python3" "python"
"common-lisp" "commonlisp"
"c" "text/x-csrc"
(name language)))
(defn code-editor [{:keys [code language on-change cm-editor-id]}]
(let [cm-atom (atom nil)
status (reagent/atom {})
id (str (gensym) "_code_editor")]
......@@ -12,19 +22,32 @@
{
:display-name "code-editor"
:component-did-mount
(fn []
(let [code-editor (js/document.getElementById id)
cm-editor (.fromTextArea js/CodeMirror code-editor
(clj->js {:mode (or (name language) "python")
(fn [comp]
(let [dom-node (rdom/dom-node comp)
{:keys [language]} (reagent/props comp)
syntax-language (get-codemirror-mode language)
code-editor (js/document.getElementById id)
cm-editor
(.fromTextArea js/CodeMirror dom-node (clj->js {:mode syntax-language
:lineNumbers true}))
#_(.fromTextArea js/CodeMirror code-editor
(clj->js {:mode syntax-language
:lineNumbers true}))]
(.setOption cm-editor "mode" syntax-language)
(.on cm-editor "change" #(on-change (.getValue cm-editor)))
(.setValue cm-editor (or code ""))
;(.setSize cm-editor nil 200)
(reset! cm-atom cm-editor)))
:component-did-update
(fn [this]
(let [{:keys [language]} (reagent/props this)]
(when @cm-atom
(.setOption @cm-atom "mode" (get-codemirror-mode language)))))
:reagent-render
(fn [code & {:keys [language on-change]}]
[:textarea {:id id
:defaultValue code}]
(fn [{:keys [code language on-change]}]
[:textarea {:id id
:defaultValue code}]
)
}
)))
......@@ -53,15 +76,17 @@
:reagent-render
(fn [element & {:keys [result answer on-change]}]
(let [coderesult (:code-result @status)
code-language (:language element :python)
code-runner-pending (:code-runner-pending @status)]
[:div.ce-code
[:div.code-editor
[code-editor (or answer
[code-editor
{:code (or answer
(get-in element [:code])
"")
:language :python
:language code-language
:on-change on-change
:cm-editor-id cm-editor-id]
:cm-editor-id cm-editor-id}]
[:br]
]
[:div.code-action
......
(ns lernmeister.components.exercise-types.programming.views.edit
(:require [reagent.core :as reagent]
[reagent.dom :as rdom]
[lernmeister.components.exercise-types.programming.spec :refer [programming-languages]]
[lernmeister.components.exercise-types.edit :as e-edit]
[lernmeister.components.ui :as ui]
[cljsjs.codemirror]
[cljsjs.codemirror.mode.python])
[lernmeister.components.content-elements.code.show :as code-show]
[lernmeister.components.ui :as ui])
(:use [lernmeister.components.jshelper :only [$ get-unique-id try-number-parse]]))
(defn get-new-unit-test []
{:id (get-unique-id "ut") :testcode "" :title "" :points 0})
(defn code-editor [code]
(defn code-editor [{:keys [code]}]
(let [cm-atom (atom nil)
id (str (gensym) "_code_editor")]
(reagent/create-class
{:display-name "code-editor"
:component-did-mount
(fn []
(let [code-editor (js/document.getElementById id)
cm-editor (.fromTextArea js/CodeMirror code-editor (clj->js {:lineNumbers true
:mode "python"}))]
(fn [comp]
(let [dom-node (rdom/dom-node comp)
{:keys [language]} (reagent/props comp)
syntax-language (code-show/get-codemirror-mode language)
code-editor (js/document.getElementById id)
cm-editor (.fromTextArea
js/CodeMirror
dom-node (clj->js {:lineNumbers true
:mode syntax-language}))]
(.on cm-editor "change" #(reset! code (.getValue cm-editor)))
(.setSize cm-editor nil 200)
(reset! cm-atom cm-editor)))
:component-did-update
(fn [this]
(let [{:keys [language]} (reagent/props this)]
(when @cm-atom
(.setOption @cm-atom "mode" (code-show/get-codemirror-mode language)))))
:reagent-render
(fn [code]
(fn [{:keys [code]}]
[:textarea {:id id :defaultValue @code}])})))
(defn settings [exercise-core]
......@@ -52,7 +62,9 @@
:on-change #(swap! exercise-core assoc :language %)}]]]
[:div.input-field.col.s12
[:label.active {:for "code"} "Codevorgabe"]
[code-editor (reagent/cursor exercise-core [:code-template])]]]]))})))
[code-editor
{:code (reagent/cursor exercise-core [:code-template])
:language (:language @exercise-core)}]]]]))})))
(defn show-row []
(reagent/create-class
......
(ns lernmeister.components.exercise-types.programming.views.show
(:require [reagent.core :as reagent]
[reagent.dom :as rdom]
[lernmeister.components.content-elements.core :as content-manager]
[lernmeister.components.content-elements.exercise.show :as ce-ex]
[lernmeister.components.content-elements.exercise.task-description :refer [default-task-description]]
[lernmeister.components.content-elements.code.show :as code-show]
[lernmeister.components.common :as common]
[lernmeister.components.exercise-types.programming.coderunner :refer [run-code]]
[clojure.string]
[cljsjs.codemirror]
[cljsjs.codemirror.mode.python]
[cljsjs.codemirror.mode.clojure]
[cljsjs.codemirror.mode.javascript]
[cljsjs.codemirror.mode.clike]))
[clojure.string]))
(defn is-correct [result]
(console.log (clj->js result))
......@@ -57,7 +54,7 @@
))
(defn code-editor [code & {:keys [language on-change cm-editor-id]}]
(defn code-editor [{:keys [code language on-change cm-editor-id]}]
(let [cm-atom (atom nil)
status (reagent/atom {})
id (str (gensym) "_code_editor")]
......@@ -66,23 +63,30 @@
:display-name "code-editor"
:component-will-unmount (fn [] (.toTextArea @cm-atom))
:component-did-mount
(fn []
(let [code-editor (js/document.getElementById id)
cm-editor (.fromTextArea js/CodeMirror code-editor (clj->js {:mode (or (name language) "python")
:lineNumbers true}))]
(fn [comp]
(let [dom-node (rdom/dom-node comp)
{:keys [language]} (reagent/props comp)
syntax-language (code-show/get-codemirror-mode language)
code-editor (js/document.getElementById id)
cm-editor (.fromTextArea
js/CodeMirror dom-node
(clj->js {:mode syntax-language
:lineNumbers true}))]
(.on cm-editor "change" #(on-change (.getValue cm-editor)))
(.setOption cm-editor "mode" syntax-language)
(.setValue cm-editor (or code ""))
;(.setSize cm-editor nil 200)
(reset! cm-atom cm-editor)))
:component-did-update
(fn [this]
(let [{:keys [language]} (reagent/props this)]
(when @cm-atom
(.setOption @cm-atom "mode" (code-show/get-codemirror-mode language)))))
:reagent-render
(fn [code & {:keys [language on-change]}]
(fn [{:keys [code language on-change]}]
[:textarea {:id id
:defaultValue code
}]
)
}
)))
:defaultValue code}])})))
(defn exercise-renderer [exercise {:keys [result answer on-change status] :as data}]
......@@ -122,12 +126,13 @@
[:span.card-title [:b (:title exercise)]]
[default-task-description (get-in exercise [:core :task-description])]
(if-not result
[code-editor (or answer
(get-in exercise [:core :code-template])
"")
:language :python
[code-editor
{:code (or answer
(get-in exercise [:core :code-template])
"")
:language (get-in exercise [:core :language])
:on-change on-change
:cm-editor-id cm-editor-id]
:cm-editor-id cm-editor-id}]
[:div [:p "Deine Lösung:"]
[common/codebox answer]])
[:br]
......
......@@ -4,7 +4,6 @@
[lernmeister.components.exercise-types.core :as etypes]
[clojure.pprint :refer [pprint]]
[cljs.reader :refer [read-string]]
[cljsjs.react-json-view]
[lernmeister.components.core :refer [init-exercise-types]]
[reagent.core :as r]
[reagent.dom :as rdom]
......@@ -16,7 +15,7 @@
;; home
(init-exercise-types)
;;; TODO switch to bulma-css
(defn atom-showcase [atom]
(let [answer (r/atom nil)
result (r/atom nil)
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment