-<script type="application/x-scittle">(require (quote [reagent.core :as r]))</script><div id="id4"><script type="application/x-scittle">(reagent.dom/render [(fn [] (let [output-ref (atom nil) editor-ref (atom nil) show-editor? (r/atom true) layout (r/atom :right) repl-output (r/atom []) scroll-to-bottom! (fn* [] (when (clojure.core/deref output-ref) (js/setTimeout (fn [] (set! (.-scrollTop (clojure.core/deref output-ref)) (.-scrollHeight (clojure.core/deref output-ref)))) 10))) eval-code! (fn [code] (let [captured-output (atom []) result (binding [*print-fn* (fn* [p1__75453#] (swap! captured-output conj p1__75453#)) *print-err-fn* (fn* [p1__75454#] (swap! captured-output conj (str "ERR: " p1__75454#)))] (try (pr-str (js/scittle.core.eval_string code)) (catch :default e (str "Error: " (.-message e))))) output-str (when (seq (clojure.core/deref captured-output)) (clojure.string/join "" (clojure.core/deref captured-output)))] (swap! repl-output into (cond-> [(str "> " code)] output-str (conj output-str) :always (conj result))) (scroll-to-bottom!)))] (.addEventListener js/document "click" (fn [e] (when (clojure.core/deref editor-ref) (when-let [code-container (.. e -target (closest ".sourceCode"))] (when-let [code-element (.querySelector code-container "code")] (let [code-text (.-textContent code-element)] (set! (.-value (clojure.core/deref editor-ref)) code-text) (.focus (clojure.core/deref editor-ref)))))))) (fn [] (let [collapsed? (not (clojure.core/deref show-editor?)) is-bottom? (= (clojure.core/deref layout) :bottom) toggle! (fn* [] (swap! show-editor? not)) switch-layout! (fn* [] (reset! layout (if (= (clojure.core/deref layout) :right) :bottom :right))) collapsed-size "40px" full-size "350px"] [:<> [:div#scittle-sidebar.card.shadow-sm {:style (merge {:position "fixed", :z-index "1200", :display "flex", :flex-direction "column"} (if is-bottom? {:left "0", :right "0", :bottom "0", :height (if collapsed? collapsed-size full-size)} {:top "0", :right "0", :width (if collapsed? collapsed-size full-size), :height "100vh", :padding-top "77px"}))} (when (not collapsed?) [:div.d-flex.justify-content-between.align-items-center {:style {:flex "0 0 auto", :order "0"}} [:div.btn-group [:button.btn.btn-outline-primary.btn-sm {:on-click toggle!} (if is-bottom? [:i.bi.bi-chevron-bar-down] [:i.bi.bi-chevron-bar-right]) " Hide"] [:button.btn.btn-outline-secondary.btn-sm {:on-click switch-layout!} "↕ Switch Layout"]] [:small.text-muted "Ctrl+Enter to eval"]]) (when collapsed? [:button.btn.btn-outline-primary.w-100.h-100 {:on-click toggle!} (if is-bottom? [:i.bi.bi-chevron-bar-up] [:i.bi.bi-chevron-bar-left])]) (when (not collapsed?) [:div.card-body.p-0 {:style {:flex "1 1 auto", :order "1", :display "flex", :flex-direction (if is-bottom? "row" "column")}} [:div.position-relative {:style {:flex "1 1 0", :overflow "hidden"}} [:textarea.form-control.border-0 {:ref (fn* [p1__75455#] (reset! editor-ref p1__75455#)), :on-key-down (fn [e] (when (and (.-ctrlKey e) (= (.-key e) "Enter")) (eval-code! (.. e -target -value)))), :placeholder "Type Clojure code here...\nCtrl+Enter to evaluate\nClick copy buttons in code blocks to paste here", :style {:resize "none", :width "100%", :height "100%", :box-sizing "border-box", :font-family "var(--bs-font-monospace)", :font-size "0.875rem", :border-radius "0", :overflow-y "auto"}}]] [:div.position-relative {:style {:flex "1 1 0", :overflow "hidden"}} [:div.position-absolute.top-0.end-0.badge.bg-secondary.m-2 {:style {:font-size "0.65rem", :z-index "10"}} "Output"] [:div#repl-output.sourceCode.border-start {:ref (fn* [p1__75456#] (reset! output-ref p1__75456#)), :class (if is-bottom? "border-start" "border-top"), :style {:height "100%", :padding "0.75rem", :overflow-y "auto", :font-family "var(--bs-font-monospace)", :font-size "0.8125rem", :line-height "1.4"}} (for [[i output] (map-indexed vector (clojure.core/deref repl-output))] [:div.mb-1 {:key i} output])]]]) [:style (str (when (clojure.core/deref show-editor?) (if is-bottom? (str ".content { margin-bottom: " full-size " !important; }") (str ".content { margin-right: " full-size " !important; }"))))]]]))))] (js/document.getElementById "id4"))</script></div>
0 commit comments