├── resources ├── icons │ ├── icon_16.png │ └── icon_128.png └── manifest_template.json ├── .travis.yml ├── .gitignore ├── src └── textarea_to_code_editor │ ├── macros.clj │ ├── content │ ├── chrome.cljs │ ├── handlers.cljs │ ├── core.cljs │ └── editor.cljs │ ├── background │ ├── modes.cljs │ ├── chrome.cljs │ ├── core.cljs │ └── handlers.cljs │ └── core.clj ├── README.md ├── test └── textarea_to_code_editor │ ├── content │ ├── handlers_test.cljs │ └── editor_test.cljs │ └── background │ ├── modes_test.cljs │ └── handlers_test.cljs ├── project.clj └── LICENSE /resources/icons/icon_16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nvbn/textarea-to-code-editor/HEAD/resources/icons/icon_16.png -------------------------------------------------------------------------------- /resources/icons/icon_128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nvbn/textarea-to-code-editor/HEAD/resources/icons/icon_128.png -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: clojure 2 | lein: lein2 3 | jdk: 4 | - oraclejdk7 5 | before_install: 6 | - sudo add-apt-repository ppa:chris-lea/node.js -y 7 | - sudo apt-get update -qq 8 | - sudo apt-get install -qq phantomjs nodejs 9 | - sudo npm install -g bower 10 | install: 11 | - lein2 bower install 12 | script: 13 | - lein2 cljsbuild test 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /target 2 | /classes 3 | /checkouts 4 | pom.xml 5 | pom.xml.asc 6 | *.jar 7 | *.class 8 | /.lein-* 9 | /.nrepl-port 10 | .lein-deps-sum 11 | .lein-repl-history 12 | .lein-plugins/ 13 | resources/public/cljs-target/ 14 | hs_err* 15 | /resources/*.js 16 | /resources/manifest.json 17 | /resources/components 18 | /resources/background 19 | /resources/content 20 | .idea 21 | *iml 22 | -------------------------------------------------------------------------------- /src/textarea_to_code_editor/macros.clj: -------------------------------------------------------------------------------- 1 | (ns textarea-to-code-editor.macros 2 | (:require [clojure.tools.macro :refer [name-with-attributes]])) 3 | 4 | (defmacro defhandler 5 | "Defines messages handler which not fails on errors." 6 | [name & body] 7 | (let [[name [args & body]] (name-with-attributes name body)] 8 | `(defn ~name 9 | ~args 10 | (try (do ~@body) 11 | (catch :default e# 12 | (println e#)))))) 13 | -------------------------------------------------------------------------------- /resources/manifest_template.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "{{ name }}", 3 | "description": "{{ description }}", 4 | "version": "{{ version }}", 5 | "permissions": [ 6 | "contextMenus", 7 | "tabs", 8 | "http://*/*", 9 | "https://*/*" 10 | ], 11 | "background": { 12 | "scripts": {{ background-scripts|json|safe }} 13 | }, 14 | "content_scripts": [ 15 | { 16 | "matches": ["*://*/*"], 17 | "js": {{ content-scripts|json|safe }}, 18 | "run_at": "document_end" 19 | } 20 | ], 21 | "web_accessible_resources": [ 22 | "content/*" 23 | ], 24 | "icons": { 25 | "16": "icons/icon_16.png", 26 | "128": "icons/icon_128.png" 27 | }, 28 | "manifest_version": 2 29 | } 30 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # textarea-to-code-editor 2 | 3 | [![Build Status](https://travis-ci.org/nvbn/textarea-to-code-editor.svg)](https://travis-ci.org/nvbn/textarea-to-code-editor) 4 | 5 | Chrome extension for converting textarea to code editor 6 | 7 | [![Available in the chrome web store](https://developer.chrome.com/webstore/images/ChromeWebStore_Badge_v2_206x58.png)](https://chrome.google.com/webstore/detail/kcapdaijpdnhajjgdimlhoaaaiplkobj) 8 | 9 | ## Building 10 | 11 | For building local version of extensions you should run: 12 | 13 | ```bash 14 | lein bower install 15 | lein cljsbuild once 16 | lein run 17 | ``` 18 | 19 | And install unpacked extension from `resources`. 20 | 21 | For running tests: 22 | 23 | ```bash 24 | lein cljsbuild test 25 | ``` 26 | -------------------------------------------------------------------------------- /src/textarea_to_code_editor/content/chrome.cljs: -------------------------------------------------------------------------------- 1 | (ns textarea-to-code-editor.content.chrome 2 | (:require-macros [cljs.core.async.macros :refer [go-loop go]]) 3 | (:require [cljs.core.async :refer [! chan]] 4 | [cognitect.transit :as t])) 5 | 6 | (defn available? [] (aget js/window "chrome")) 7 | 8 | (defn subscribe-to-runtime! 9 | "Puts all runtime messages to msg-chan." 10 | [msg-chan] 11 | (.. js/chrome -runtime -onMessage 12 | (addListener #(go (>! msg-chan 13 | (conj (t/read (t/reader :json) %1) 14 | %2)))))) 15 | 16 | (defn get-runtime-chan 17 | "Returns channel for send message to runtime." 18 | [] 19 | (let [ch (chan)] 20 | (go-loop [] 21 | (.. js/chrome -runtime 22 | (sendMessage (t/write (t/writer :json) (> used-modes 26 | (remove #(= mode %)) 27 | (into [mode]) 28 | (take used-modes-limit))) 29 | 30 | (defn get-unused-modes 31 | "Returns list with ordered unused modes." 32 | [modes used-modes] 33 | (->> modes 34 | (filter (complement (set used-modes))) 35 | (sort-by :caption))) 36 | -------------------------------------------------------------------------------- /src/textarea_to_code_editor/content/handlers.cljs: -------------------------------------------------------------------------------- 1 | (ns textarea-to-code-editor.content.handlers 2 | (:require-macros [cljs.core.async.macros :refer [go]] 3 | [textarea-to-code-editor.macros :refer [defhandler]]) 4 | (:require [cljs.core.match :refer-macros [match]] 5 | [cljs.core.async :refer [>!]] 6 | [textarea-to-code-editor.content.editor :as e])) 7 | 8 | (defhandler change-mode! 9 | "Changes editor mode." 10 | [el mode hover-chan] 11 | (when el 12 | (match [(e/is-editor? el) mode] 13 | [true :textarea] (e/to-textarea! el) 14 | [false _] (e/to-code-editor! el mode hover-chan) 15 | [true _] (e/change-editor-mode! el mode)))) 16 | 17 | (defhandler populate-context-menu! 18 | "Populates context menu with available modes." 19 | [el runtime-chan] 20 | (go (>! runtime-chan [:populate-context-menu 21 | {:current-mode (e/get-editor-mode el) 22 | :modes (e/get-modes)}])) 23 | el) 24 | 25 | (defhandler clear-context-menu! 26 | "Clears context menu." 27 | [runtime-chan] 28 | (go (>! runtime-chan [:clear-context-menu nil])) 29 | nil) 30 | -------------------------------------------------------------------------------- /src/textarea_to_code_editor/content/core.cljs: -------------------------------------------------------------------------------- 1 | (ns textarea-to-code-editor.content.core 2 | (:require-macros [cljs.core.async.macros :refer [go-loop]]) 3 | (:require [cljs.core.match :refer-macros [match]] 4 | [cljs.core.async :refer [! chan]] 4 | [cognitect.transit :as t])) 5 | 6 | (defn available? [] (aget js/window "chrome")) 7 | 8 | (defn get-sender-chan 9 | "Returns channel for sending response to tab." 10 | [sender] 11 | (let [tab-id (.. sender -tab -id) 12 | ch (chan)] 13 | (go-loop [] 14 | (.. js/chrome -tabs (sendMessage tab-id (t/write (t/writer :json) 15 | (! msg-chan (conj (t/read (t/reader :json) %1) 24 | (get-sender-chan %2))))))) 25 | 26 | (defn clear-context-menu! 27 | "Removes all create context menus." 28 | [] 29 | (.. js/chrome -contextMenus (removeAll))) 30 | 31 | (defn create-context-menu! 32 | "Creates new context menu." 33 | [menu] 34 | (.. js/chrome -contextMenus (create (clj->js menu)))) 35 | -------------------------------------------------------------------------------- /src/textarea_to_code_editor/background/core.cljs: -------------------------------------------------------------------------------- 1 | (ns textarea-to-code-editor.background.core 2 | (:require-macros [cljs.core.async.macros :refer [go-loop]]) 3 | (:require [cljs.core.match :refer-macros [match]] 4 | [cljs.core.async :refer [> (for [script paths 10 | :let [file (io/file (io/resource script))]] 11 | (if (.isDirectory file) 12 | (map #(string/replace (.getPath %) #"^.*resources/" "") 13 | (.listFiles file)) 14 | [script])) 15 | flatten 16 | sort 17 | (filter #(-> % io/resource io/file .isDirectory not)))) 18 | 19 | (defn -main 20 | "Generates new manifest.json on lein run" 21 | [& _] 22 | (let [project-data (read-string (slurp "project.clj")) 23 | [_ project-name project-version & _] project-data 24 | project-name (string/replace (str project-name) #"-" " ") 25 | project-map (apply hash-map (drop 3 project-data)) 26 | content-scripts (list-resources (:content-scripts project-map)) 27 | background-scripts (list-resources (:background-scripts project-map))] 28 | (with-open [wrtr (io/writer "resources/manifest.json")] 29 | (.write wrtr (render-file "manifest_template.json" 30 | {:name project-name 31 | :version project-version 32 | :description (:description project-map) 33 | :content-scripts content-scripts 34 | :background-scripts background-scripts})))) 35 | (println "Manifest updated!")) 36 | -------------------------------------------------------------------------------- /test/textarea_to_code_editor/content/handlers_test.cljs: -------------------------------------------------------------------------------- 1 | (ns textarea-to-code-editor.content.handlers-test 2 | (:require-macros [cljs.core.async.macros :refer [go]] 3 | [clj-di.test :refer [with-reset]]) 4 | (:require [cemerick.cljs.test :refer-macros [deftest testing is done]] 5 | [cljs.core.async :refer [! chan]] 5 | [textarea-to-code-editor.background.chrome :as c] 6 | [textarea-to-code-editor.background.modes :as m])) 7 | 8 | (defn create-context-menus! 9 | "Creates context menus instances in chrome." 10 | [& menus] 11 | (doseq [menu (flatten menus)] 12 | (c/create-context-menu! (assoc menu 13 | :contexts [:all])))) 14 | 15 | (defn get-menus-for-modes 16 | "Returns params for context menus for passed modes" 17 | [modes current-mode parent-id sender-chan msg-chan] 18 | (for [mode modes] 19 | {:title (:caption mode) 20 | :parentId parent-id 21 | :type :checkbox 22 | :checked (= current-mode mode) 23 | :onclick #(go (>! sender-chan [:change-mode mode]) 24 | (>! msg-chan [:update-used-modes mode nil]))})) 25 | 26 | (defhandler populate-context-menu! 27 | "Shows context menu when mouse on textarea." 28 | [{:keys [current-mode modes]} used-modes sender-chan msg-chan] 29 | (c/clear-context-menu!) 30 | (create-context-menus! 31 | {:title "Textarea to code editor" 32 | :id :textarea-to-code-editor} 33 | {:title "Normal textarea" 34 | :parentId :textarea-to-code-editor 35 | :type :checkbox 36 | :checked (nil? current-mode) 37 | :onclick #(go (>! sender-chan [:change-mode :textarea]))} 38 | {:parentId :textarea-to-code-editor 39 | :type :separator} 40 | (get-menus-for-modes (m/sanitize-used-modes modes used-modes) 41 | current-mode :textarea-to-code-editor 42 | sender-chan msg-chan) 43 | {:title "More" 44 | :parentId :textarea-to-code-editor 45 | :id :textarea-to-editor-more} 46 | (get-menus-for-modes (m/get-unused-modes modes used-modes) 47 | current-mode :textarea-to-editor-more 48 | sender-chan msg-chan))) 49 | 50 | (defhandler clear-context-menu! 51 | "Clears context menu safely." 52 | [] 53 | (c/clear-context-menu!)) 54 | 55 | (defhandler update-used-modes! 56 | "Updates list of used modes in local storage." 57 | [storage mode] 58 | (swap! storage update-in [:used-modes] 59 | m/update-used-modes mode)) 60 | -------------------------------------------------------------------------------- /src/textarea_to_code_editor/content/editor.cljs: -------------------------------------------------------------------------------- 1 | (ns textarea-to-code-editor.content.editor 2 | (:require-macros [cljs.core.async.macros :refer [go]]) 3 | (:require [cljs.core.async :refer [>! ! ch [:enter-editor (current-target %) nil]))) 16 | (listen! :mouseleave #(go (! ch [:leave-editor nil nil]))))) 18 | 19 | (defn init-editor! 20 | "Initializes text editor." 21 | [textarea editor-el {:keys [mode]}] 22 | (let [editor (.edit js/ace editor-el)] 23 | (doto editor 24 | (.setTheme "ace/theme/monokai") 25 | (.setValue (value textarea)) 26 | (.. getSession (setMode mode)) 27 | (.. getSession (on "change" #(set-value! textarea (.getValue editor))))))) 28 | 29 | (defn div-from-textarea! 30 | "Creates div from textarea." 31 | [textarea] 32 | (let [id (str (gensym))] 33 | (doto textarea 34 | (insert-before! (str "
")) 39 | (set-attr! :data-editor-id id) 40 | (set-styles! {:display "none"})) 41 | (by-id id))) 42 | 43 | (defn to-code-editor! 44 | "Converts textarea to code editor." 45 | [el mode hover-chan] 46 | (let [editor-el (div-from-textarea! el)] 47 | (subscribe-to-hover! editor-el hover-chan) 48 | (init-editor! el editor-el mode))) 49 | 50 | (defn is-editor? 51 | "Returns true when element is editor." 52 | [el] 53 | (= (.-tagName el) "DIV")) 54 | 55 | (defn get-modes 56 | "Returns all available editor modes." 57 | [] 58 | (let [ace-modes (.. js/ace (require "ace/ext/modelist") -modes)] 59 | (for [mode ace-modes] 60 | {:caption (.-caption mode) 61 | :mode (.-mode mode)}))) 62 | 63 | (defn get-editor-mode 64 | "Returns current editor mode." 65 | [el] 66 | (when (is-editor? el) 67 | (let [mode-id (.. js/ace (edit el) getSession getMode -$id)] 68 | (first (filter #(= (:mode %) mode-id) (get-modes)))))) 69 | 70 | (defn change-editor-mode! 71 | "Changes editor mode." 72 | [el {:keys [mode]}] 73 | (.. js/ace (edit el) getSession (setMode mode)) 74 | el) 75 | 76 | (defn to-textarea! 77 | "Converts code editor back to textarea." 78 | [el] 79 | (set-styles! (sel (str "[data-editor-id=" (attr el :id) "]")) 80 | {:display "block"}) 81 | (destroy! el)) 82 | -------------------------------------------------------------------------------- /test/textarea_to_code_editor/background/modes_test.cljs: -------------------------------------------------------------------------------- 1 | (ns textarea-to-code-editor.background.modes-test 2 | (:require [cemerick.cljs.test :refer-macros [deftest is testing]] 3 | [textarea-to-code-editor.background.modes :as m])) 4 | 5 | (deftest test-sanitize-modes 6 | (testing "Invalid used modes should be removed" 7 | (is (= (m/sanitize-used-modes [{:caption "Python" 8 | :mode "ace/mode/python"}] 9 | [{:caption "Python" 10 | :mode "ace/mode/python"} 11 | {:caption "HTML" 12 | :mode "ace/mode/html"}]) 13 | [{:caption "Python" 14 | :mode "ace/mode/python"}])))) 15 | 16 | (deftest test-update-used-modes 17 | (testing "Used mode should be added to list when it not used before" 18 | (is (= (m/update-used-modes [{:caption "Python" 19 | :mode "ace/mode/python"} 20 | {:caption "HTML" 21 | :mode "ace/mode/html"}] 22 | {:caption "JavaScript" 23 | :mode "ace/mode/javascript"}) 24 | [{:caption "JavaScript" 25 | :mode "ace/mode/javascript"} 26 | {:caption "Python" 27 | :mode "ace/mode/python"} 28 | {:caption "HTML" 29 | :mode "ace/mode/html"}]))) 30 | (testing "Used mode should be moved to first place in list if it used before" 31 | (is (= (m/update-used-modes [{:caption "Python" 32 | :mode "ace/mode/python"} 33 | {:caption "HTML" 34 | :mode "ace/mode/html"}] 35 | {:caption "HTML" 36 | :mode "ace/mode/html"}) 37 | [{:caption "HTML" 38 | :mode "ace/mode/html"} 39 | {:caption "Python" 40 | :mode "ace/mode/python"}]))) 41 | (testing "Oldest used mode should be removed if count of modes > `used-modes-limit`" 42 | (with-redefs [m/used-modes-limit 1] 43 | (is (= (m/update-used-modes [{:caption "Python" 44 | :mode "ace/mode/python"}] 45 | {:caption "HTML" 46 | :mode "ace/mode/html"}) 47 | [{:caption "HTML" 48 | :mode "ace/mode/html"}]))))) 49 | 50 | (deftest test-get-unused-modes 51 | (testing "Should return only unused modes" 52 | (is (= (m/get-unused-modes [{:caption "Python" 53 | :mode "ace/mode/python"} 54 | {:caption "HTML" 55 | :mode "ace/mode/html"}] 56 | [{:caption "HTML" 57 | :mode "ace/mode/html"}]) 58 | [{:caption "Python" 59 | :mode "ace/mode/python"}])))) 60 | -------------------------------------------------------------------------------- /project.clj: -------------------------------------------------------------------------------- 1 | (defproject textarea-to-code-editor "0.5" 2 | :description "Chrome extension for converting textarea to code editor" 3 | :url "https://github.com/nvbn/textarea-to-code-editor" 4 | :license {:name "Eclipse Public License" 5 | :url "http://www.eclipse.org/legal/epl-v10.html"} 6 | :dependencies [[org.clojure/clojure "1.8.0"] 7 | [org.clojure/clojurescript "1.7.228"] 8 | [org.clojure/core.match "0.3.0-alpha4"] 9 | [org.clojure/core.async "0.2.371"] 10 | [com.cognitect/transit-cljs "0.8.237"] 11 | [com.cemerick/clojurescript.test "0.3.3"] 12 | [domina "1.0.3"] 13 | [clj-di "0.5.0"] 14 | [selmer "0.8.0"] 15 | [alandipert/storage-atom "1.2.4"] 16 | [org.clojure/tools.macro "0.1.2"]] 17 | :plugins [[lein-cljsbuild "1.1.3"] 18 | [com.cemerick/clojurescript.test "0.3.3"] 19 | [lein-bower "0.5.1"]] 20 | :bower-dependencies [[ace-builds "~1.2.3"]] 21 | :bower {:directory "resources/components/"} 22 | :jvm-opts ["-Xss16m"] 23 | :content-scripts ["content/main.js" 24 | "components/ace-builds/src/" 25 | "components/ace-builds/src/snippets/"] 26 | :background-scripts ["background/main.js"] 27 | :main textarea-to-code-editor.core 28 | :cljsbuild {:builds {:background {:source-paths ["src/textarea_to_code_editor/background/"] 29 | :compiler {:output-to "resources/background/main.js" 30 | :output-dir "resources/background/" 31 | :source-map "resources/background/main.js.map" 32 | :optimizations :whitespace 33 | :pretty-print true}} 34 | :content {:source-paths ["src/textarea_to_code_editor/content/"] 35 | :compiler {:output-to "resources/content/main.js" 36 | :output-dir "resources/content/" 37 | :source-map "resources/content/main.js.map" 38 | :optimizations :whitespace 39 | :pretty-print true}} 40 | :test {:source-paths ["src/" "test/"] 41 | :compiler {:output-to "target/cljs-test.js" 42 | :optimizations :whitespace 43 | :pretty-print false}}} 44 | :test-commands {"test" ["phantomjs" :runner 45 | "resources/components/ace-builds/src/ace.js" 46 | "resources/components/ace-builds/src/mode-clojure.js" 47 | "resources/components/ace-builds/src/mode-python.js" 48 | "resources/components/ace-builds/src/theme-monokai.js" 49 | "resources/components/ace-builds/src/ext-modelist.js" 50 | "target/cljs-test.js"]}}) 51 | -------------------------------------------------------------------------------- /test/textarea_to_code_editor/content/editor_test.cljs: -------------------------------------------------------------------------------- 1 | (ns textarea-to-code-editor.content.editor-test 2 | (:require-macros [cljs.core.async.macros :refer [go]]) 3 | (:require [cemerick.cljs.test :refer-macros [deftest testing is done use-fixtures]] 4 | [cljs.core.async :refer [! chan]] 5 | [domina.css :refer [sel]] 6 | [domina.events :refer [dispatch! root-element is-event-target?]] 7 | [domina :refer [append! styles attr has-class? classes 8 | destroy-children! by-id nodes value]] 9 | [textarea-to-code-editor.content.editor :as e])) 10 | 11 | (use-fixtures :each 12 | (fn [f] 13 | (f) 14 | (destroy-children! (sel "body")))) 15 | 16 | (def mode {:caption "Clojure" 17 | :mode "ace/mode/clojure"}) 18 | 19 | (def py-mode {:caption "Python" 20 | :mode "ace/mode/python"}) 21 | 22 | (defn add-el-with-random-id! 23 | ([el] (add-el-with-random-id! el "")) 24 | ([el content] 25 | (let [el-id (str (gensym)) 26 | el-name (clj->js el)] 27 | (append! (sel "body") (str "<" el-name " id='" el-id "'>" content "")) 28 | (by-id el-id)))) 29 | 30 | (deftest ^:async test-subscribe-to-hover! 31 | (go (let [el (add-el-with-random-id! :textarea "test") 32 | ch (chan)] 33 | (e/subscribe-to-hover! el ch) 34 | (testing "On mouse enter" 35 | (dispatch! el :mouseenter {}) 36 | (is (= (first ( (e/get-modes) first :mode)) 78 | (is (-> (e/get-modes) first :caption)))) 79 | 80 | (deftest test-get-editor-mode 81 | (testing "nil for not editor" 82 | (let [textarea (add-el-with-random-id! :textarea)] 83 | (is (nil? (e/get-editor-mode textarea))))) 84 | (testing "current mode for editor" 85 | (let [textarea (add-el-with-random-id! :textarea) 86 | div (add-el-with-random-id! :div)] 87 | (e/init-editor! textarea div mode) 88 | (is (= (e/get-editor-mode div) mode))))) 89 | 90 | (deftest test-change-editor-mode! 91 | (testing "Change editor mode" 92 | (let [textarea (add-el-with-random-id! :textarea) 93 | div (add-el-with-random-id! :div)] 94 | (e/init-editor! textarea div mode) 95 | (e/change-editor-mode! div py-mode) 96 | (is (= (e/get-editor-mode div) py-mode))))) 97 | 98 | (deftest test-to-textarea! 99 | (let [textarea (add-el-with-random-id! :textarea) 100 | div (add-el-with-random-id! :div)] 101 | (e/init-editor! textarea div mode) 102 | (e/to-textarea! div) 103 | (testing "Div should be removed" 104 | (is (-> (sel "div") nodes count zero?))))) 105 | -------------------------------------------------------------------------------- /test/textarea_to_code_editor/background/handlers_test.cljs: -------------------------------------------------------------------------------- 1 | (ns textarea-to-code-editor.background.handlers-test 2 | (:require-macros [cljs.core.async.macros :refer [go]] 3 | [clj-di.test :refer [with-reset]]) 4 | (:require [cemerick.cljs.test :refer-macros [deftest is testing done]] 5 | [cljs.core.async :refer [