Commit 8a12793d authored by Bruno Burke's avatar Bruno Burke 🍔
Browse files

use codemirror6 and shadow-cljs

parent 68a0343c
Pipeline #116507 passed with stages
in 2 minutes and 40 seconds
......@@ -7,6 +7,7 @@
/resources/public/node_modules
/resources/public/package-lock.json
/resources/bundle.js
/resources/public/devcards/js/
/src/css_bundle.js
/docs/schemas
/docs/schema-documentation
......@@ -30,4 +31,5 @@ doo-index.html
/node_modules
package-lock.json
.lsp/
.shadow-cljs/
/.clj-kondo/.cache
......@@ -7,16 +7,26 @@
"start": "rm -rf resources/public/node_modules resources/public/js && rm -rf node_modules && npm install && mv node_modules resources/public/ && mkdir -p resources/public/js && ln -s resources/public/node_modules node_modules && mv node_modules/prismjs resources/public/js/"
},
"devDependencies": {
"@codemirror/lang-cpp": "^6.0.1",
"@codemirror/lang-java": "^6.0.0",
"@codemirror/lang-javascript": "^6.0.1",
"@codemirror/lang-markdown": "^6.0.0",
"@codemirror/lang-python": "^6.0.0",
"@codemirror/language": "~6.2.0",
"@codemirror/legacy-modes": "^6.1.0",
"bulma": "0.9.2",
"chart.js": "3.6.2",
"codemirror": "^5.61.1",
"codemirror": "~6.0.1",
"css-loader": "^5.2.5",
"file-loader": "^6.2.0",
"highlight.js": "^10.6.0",
"katex": "0.12.0",
"marked": "^2.0.1",
"materialize-css": "^1.0.0",
"mathjs": "^6.6.5",
"prismjs": "1.19.0",
"quill": "^1.3.5",
"shadow-cljs": "2.11.23",
"sortablejs": "^1.13.0",
"style-loader": "^2.0.0",
"tinymce": "^5.8.1",
......@@ -24,6 +34,9 @@
"webpack-cli": "^4.7.0"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.15.3"
"@fortawesome/fontawesome-free": "^5.15.3",
"create-react-class": "15.6.3",
"react": "17.0.1",
"react-dom": "17.0.1"
}
}
<!DOCTYPE html>
<html>
<head>
<title>leukipp.components.devcards</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="node_modules/tinymce/tinymce.js"></script>
<link rel="stylesheet" href="node_modules/bulma/css/bulma.min.css">
<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="css/screen.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<script src="/js/test.js"></script>
<script>leukipp.components.devcards.init();</script>
</body>
</html>
{:dev-http
{3000 "resources/public"
3004 ["resources/public/devcards" "resources/public"]} ; public included to serve static assets under the same path as 3000 /img/shadow.png
:source-paths ["src/cljs" "src/cljc" "src/devcards"]
:dependencies
[[reagent "1.1.1"]
[re-frame "1.2.0"]
[devcards "0.2.7"]
[com.troy-west/frequencies "0.1.1"] ;;; cljs ready version of [com.stuartsierra/frequencies "0.1.0"]
[binaryage/oops "0.7.1"]
[hickory "0.7.1"]
[wwsoftware/clj-helper "0.0.3.11"]
[wwsoftware/bulma-ui "0.0.7"]
[cljs-ajax "0.8.0"]]
:builds
{:devcards
{:target :browser-test ; using :browser-test to pickup all files that match `-test$`
:ns-regexp "-cards$" ; default option for :browser-test is -test$
:test-dir "resources/public/devcards"
:runner-ns leukipp.components.devcards ; must have init fn to run
:compiler-options {:devcards true
:output-feature-set :es8}
:js-options {:resolve
{"devcards-marked"
{:target :npm
:require "marked"}
"devcards-syntax-highlighter"
{:target :npm
:require "highlight.js"}}}}}}
......@@ -7,58 +7,77 @@
[leukipp.components.exercise-types.programming.spec :refer [programming-languages]]
[oops.core :refer [oset!+]]
[reagent.core :as reagent]
[reagent.dom :as rdom]))
[reagent.dom :as rdom]
[codemirror :refer [EditorView basicSetup]]
["@codemirror/language" :refer [StreamLanguage]]
["@codemirror/lang-javascript" :refer [javascript]]
["@codemirror/lang-cpp" :refer [cpp]]
["@codemirror/lang-markdown" :refer [markdown]]
["@codemirror/lang-python" :refer [python]]
["@codemirror/legacy-modes/mode/commonlisp" :refer [commonlisp]]
["@codemirror/legacy-modes/mode/r" :refer [r]]
["@codemirror/legacy-modes/mode/clike" :refer [clike]]
["@codemirror/legacy-modes/mode/clojure" :refer [clojure]]))
(defn get-codemirror-mode [language]
(let [language (or language "python")]
(case (name language)
"python2" "python"
"python3" "python"
"common-lisp" "commonlisp"
"c" "text/x-csrc"
"r" "text/x-rsrc"
"rmarkdown" "text/x-markdown"
"markdown" "text/x-markdown"
(name language))))
"python2" (python)
"python3" (python)
"common-lisp" (.define StreamLanguage commonlisp)
"clojure" (.define StreamLanguage clojure)
"c" (.define StreamLanguage clike)
"r" (.define StreamLanguage r)
"rmarkdown" (markdown)
"markdown" (markdown)
(python))))
(defn code-editor [{:keys [code language on-change cm-editor-id]}]
(let [cm-atom (atom nil)
status (reagent/atom {})
id (str (gensym) "_code_editor")]
(reagent/create-class
{
:display-name "code-editor"
{:display-name "code-editor"
:component-did-mount
(fn [comp]
(fn [comp]
(let [dom-node (rdom/dom-node comp)
{:keys [language]} (reagent/props comp)
{:keys [language code]} (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 ""))
update-listener (fn [tr]
(let [new-text (-> tr
.-state
.-doc
.toString)]
(on-change new-text)))
initial-code (or code "")
cm-editor (new EditorView (clj->js {:extensions [basicSetup
(.of (-> EditorView
.-updateListener) update-listener)
syntax-language]
:parent code-editor}))]
(.dispatch cm-editor (clj->js {:changes {:from 0
:to (-> cm-editor
.-state
.-doc
.-length)
:insert initial-code}}))
#_(.setOption cm-editor "mode" syntax-language)
#_(.setValue cm-editor (or code ""))
;(.setSize cm-editor nil 200)
(reset! cm-atom cm-editor)))
(reset! cm-atom cm-editor)
#_(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)))))
#_(js/console.debug @cm-atom)
#_(when @cm-atom
(.setOption @cm-atom "mode" (get-codemirror-mode language)))))
:reagent-render
(fn [{:keys [code language on-change]}]
[:textarea {:id id
:defaultValue code}]
)
}
)))
[:div {:id id}])})))
(defn code-component [element & {:keys [answer on-change status run-code]}]
......
(ns leukipp.components.ce-blockly
(ns leukipp.components.ce-blockly-cards
(:require-macros
[devcards.core :refer [defcard-doc
defcard-rg
......
(ns leukipp.components.ce-code-cards
(:require-macros
[devcards.core :refer [defcard-doc
defcard-rg
defcard
mkdn-pprint-source]])
(:require
[devcards.core]
[leukipp.components.content-editor :as ceditor]
[leukipp.components.content-elements.core :as ce-core]
[leukipp.components.core]
[leukipp.components.page-editor :as peditor]
[leukipp.components.sample-request :as sample-request]
[reagent.core :as reagent]))
(def testds1 {:data
"\"a\",\"b\",\"c\"\n\1,2,3"
:separator ","})
(defmethod ce-core/receive-options :code [element]
{:code-runner-url "/api/coderunner"
:run-code (fn [element code callback options]
(if (= (:render-type options) :plot)
(callback sample-request/r-plot)
(callback sample-request/r-default)))
:available-datasets [{:id "testds1"
:title "Testdataset 1"
:type :atom}]
:load-datasets (fn [dataset]
(js/console.log "Load Dataset type " (:type dataset))
(case (:id dataset)
"testds1" testds1
[]
))
})
(defonce state (reagent/atom {:type :page
:settings {}
:content [{:id "rexample"
:type :code
:code "x <- 1:10; y = x*x
# Basic plot
qplot(x,y)
# Add line
qplot(x, y, geom=c(\" point \", \" line \"))
# Use data from a data frame
qplot(mpg, wt, data=mtcars)"
:language :r}
{:id "dffd"
:type :code
:code "C = [39.2, 36.5, 37.3, 38, 37.8] F = list(map(lambda x: (float(9)/5)*x + 32, C)) print(F)"
:language :python3}]}))
(defcard-rg page-editor
(fn [ _]
[:div
[peditor/editor state
:forbidden-types #{}]])
state
{:inspect-data true
:watch-atom true})
(defcard-rg content-editor
(fn [ _]
[:div
[ceditor/editor (reagent/cursor state [:content])
:page-settings (:settings @state)
:forbidden-types #{}]])
state
{:inspect-data true
:watch-atom true})
(defcard-rg page-content-element
(fn [ _]
[:div
[ce-core/show @state]]))
(ns leukipp.components.ce-invalid
(ns leukipp.components.ce-invalid-cards
(:require-macros
[devcards.core :refer [defcard-doc
defcard-rg
......
(ns leukipp.components.ce-shuffle
(ns leukipp.components.ce-shuffle-cards
(:require-macros
[devcards.core :refer [defcard-doc
defcard-rg
......
(ns leukipp.components.ce-video
(ns leukipp.components.ce-video-cards
(:require-macros
[devcards.core :refer [defcard-doc
defcard-rg
......
(ns leukipp.components.content-editor-card
(ns leukipp.components.content-editor-cards
(:require-macros
[devcards.core :refer [defcard-doc
defcard-rg
......
(ns leukipp.components.core-card
(:require
[devcards.core :as dc]
[leukipp.components.ce-blockly]
[leukipp.components.ce-blockly-cards]
[leukipp.components.ce-code]
[leukipp.components.ce-invalid]
[leukipp.components.ce-shuffle]
[leukipp.components.ce-video]
[leukipp.components.content-editor-card]
[leukipp.components.ce-invalid-cards]
[leukipp.components.ce-shuffle-cards]
[leukipp.components.ce-video-cards]
[leukipp.components.content-editor-cards]
[leukipp.components.core :as core]
[leukipp.components.exercise-calculation]
[leukipp.components.exercise-cloze-card]
[leukipp.components.exercise-editor-card]
[leukipp.components.exercise-expression]
[leukipp.components.exercise-list-card]
[leukipp.components.exercise-mc-card]
[leukipp.components.exercise-multi-exercise]
[leukipp.components.exercise-multistep-calculation]
[leukipp.components.exercise-programming]
[leukipp.components.exercise-sc-card]
[leukipp.components.exercise-simpletext-card]
[leukipp.components.exercise-sorting-card]
[leukipp.components.exercise-matching]
[leukipp.components.exercise-text-correction-card]
[leukipp.components.first-card]
[leukipp.components.logic-card]
[leukipp.components.logic-card-custom-attributes]
[leukipp.components.multimethod-reagent-component-card]
[leukipp.components.question-editor-card]
[leukipp.components.survey]
[leukipp.components.table-card]
[leukipp.components.tex-test-card]
[leukipp.components.ui-showcase]))
[leukipp.components.exercise-calculation-cards]
[leukipp.components.exercise-cloze-cards]
[leukipp.components.exercise-editor-cards]
[leukipp.components.exercise-expression-cards]
[leukipp.components.exercise-list-cards]
[leukipp.components.exercise-mc-cards]
[leukipp.components.exercise-multi-exercise-cards]
[leukipp.components.exercise-multistep-calculation-cards]
[leukipp.components.exercise-programming-cards]
[leukipp.components.exercise-sc-cards]
[leukipp.components.exercise-simpletext-cards]
[leukipp.components.exercise-sorting-cards]
[leukipp.components.exercise-matching-cards]
[leukipp.components.exercise-text-correction-cards]
[leukipp.components.first-cards]
[leukipp.components.logic-cards]
[leukipp.components.logic-custom-attributes-cards]
[leukipp.components.multimethod-reagent-component-cards]
[leukipp.components.question-editor-cards]
[leukipp.components.survey-cards]
[leukipp.components.table-cards]
[leukipp.components.tex-test-cards]
[leukipp.components.ui-showcase-cards]))
(core/init-exercise-types)
(dc/start-devcard-ui!)
(ns leukipp.components.devcards
(:require [devcards.core :as dc :include-macros true]
["highlight.js" :as hljs]
["marked" :as marked]))
(js/goog.exportSymbol "DevcardsSyntaxHighlighter" hljs)
(js/goog.exportSymbol "DevcardsMarked" marked)
(defn ^:export init []
(dc/start-devcard-ui!))
(ns leukipp.components.exercise-calculation
(ns leukipp.components.exercise-calculation-cards
(:require
[devcards.core :refer [defcard-rg]]
[leukipp.components.content-elements.core :as ce-core]
......
(ns leukipp.components.exercise-cloze-card
(ns leukipp.components.exercise-cloze-cards
(:require-macros
[devcards.core :refer [defcard-doc
defcard-rg
......
(ns leukipp.components.exercise-editor-card
(ns leukipp.components.exercise-editor-cards
(:require-macros
[devcards.core
:refer [defcard-doc defcard-rg defcard mkdn-pprint-source]])
......
(ns leukipp.components.exercise-expression
(ns leukipp.components.exercise-expression-cards
(:require-macros
[devcards.core :refer [defcard-doc
defcard-rg
......
(ns leukipp.components.exercise-list-card
(ns leukipp.components.exercise-list-cards
(:require-macros
[devcards.core :refer [defcard-doc
defcard-rg
......
(ns leukipp.components.exercise-matching
(ns leukipp.components.exercise-matching-cards
(:require-macros
[devcards.core :refer [defcard-doc
defcard-rg
......
(ns leukipp.components.exercise-mc-card
(ns leukipp.components.exercise-mc-cards
(:require-macros
[devcards.core :refer [defcard-doc
defcard-rg
......
Supports Markdown
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