mirror of
https://github.com/penpot/penpot.git
synced 2025-05-23 02:06:11 +02:00
✨ Modularize js-beautify library related code
This commit is contained in:
parent
1318a5c3c8
commit
9cba125abe
3 changed files with 32 additions and 24 deletions
|
@ -6,7 +6,6 @@
|
||||||
|
|
||||||
(ns app.main.data.preview
|
(ns app.main.data.preview
|
||||||
(:require
|
(:require
|
||||||
["js-beautify" :as beautify]
|
|
||||||
[app.common.data :as d]
|
[app.common.data :as d]
|
||||||
[app.common.data.macros :as dm]
|
[app.common.data.macros :as dm]
|
||||||
[app.common.files.helpers :as cfh]
|
[app.common.files.helpers :as cfh]
|
||||||
|
@ -14,6 +13,7 @@
|
||||||
[app.main.data.workspace.state-helpers :as wsh]
|
[app.main.data.workspace.state-helpers :as wsh]
|
||||||
[app.main.fonts :as fonts]
|
[app.main.fonts :as fonts]
|
||||||
[app.main.refs :as refs]
|
[app.main.refs :as refs]
|
||||||
|
[app.util.code-beautify :as cb]
|
||||||
[app.util.code-gen :as cg]
|
[app.util.code-gen :as cg]
|
||||||
[app.util.timers :as ts]
|
[app.util.timers :as ts]
|
||||||
[beicon.v2.core :as rx]
|
[beicon.v2.core :as rx]
|
||||||
|
@ -38,15 +38,6 @@
|
||||||
</body>
|
</body>
|
||||||
</html>")
|
</html>")
|
||||||
|
|
||||||
(defn format-code [code type]
|
|
||||||
(cond-> code
|
|
||||||
(= type "svg")
|
|
||||||
(-> (str/replace "<defs></defs>" "")
|
|
||||||
(str/replace "><" ">\n<"))
|
|
||||||
|
|
||||||
(or (= type "svg") (= type "html"))
|
|
||||||
(beautify/html #js {"indent_size" 2})))
|
|
||||||
|
|
||||||
(defn update-preview-window
|
(defn update-preview-window
|
||||||
[preview code width height]
|
[preview code width height]
|
||||||
(when preview
|
(when preview
|
||||||
|
@ -86,11 +77,11 @@
|
||||||
(dm/str
|
(dm/str
|
||||||
fontfaces-css "\n"
|
fontfaces-css "\n"
|
||||||
(-> (cg/generate-style-code objects style-type all-children)
|
(-> (cg/generate-style-code objects style-type all-children)
|
||||||
(format-code style-type)))
|
(cb/format-code style-type)))
|
||||||
|
|
||||||
markup-code
|
markup-code
|
||||||
(-> (cg/generate-markup-code objects markup-type [shape])
|
(-> (cg/generate-markup-code objects markup-type [shape])
|
||||||
(format-code markup-type))]
|
(cb/format-code markup-type))]
|
||||||
|
|
||||||
(update-preview-window
|
(update-preview-window
|
||||||
preview
|
preview
|
||||||
|
|
|
@ -7,7 +7,6 @@
|
||||||
(ns app.main.ui.viewer.inspect.code
|
(ns app.main.ui.viewer.inspect.code
|
||||||
(:require-macros [app.main.style :as stl])
|
(:require-macros [app.main.style :as stl])
|
||||||
(:require
|
(:require
|
||||||
["js-beautify" :as beautify]
|
|
||||||
[app.common.data :as d]
|
[app.common.data :as d]
|
||||||
[app.common.data.macros :as dm]
|
[app.common.data.macros :as dm]
|
||||||
[app.common.files.helpers :as cfh]
|
[app.common.files.helpers :as cfh]
|
||||||
|
@ -26,6 +25,7 @@
|
||||||
[app.main.ui.hooks.resize :refer [use-resize-hook]]
|
[app.main.ui.hooks.resize :refer [use-resize-hook]]
|
||||||
[app.main.ui.icons :as i]
|
[app.main.ui.icons :as i]
|
||||||
[app.main.ui.shapes.text.fontfaces :refer [shapes->fonts]]
|
[app.main.ui.shapes.text.fontfaces :refer [shapes->fonts]]
|
||||||
|
[app.util.code-beautify :as cb]
|
||||||
[app.util.code-gen :as cg]
|
[app.util.code-gen :as cg]
|
||||||
[app.util.dom :as dom]
|
[app.util.dom :as dom]
|
||||||
[app.util.http :as http]
|
[app.util.http :as http]
|
||||||
|
@ -51,15 +51,6 @@
|
||||||
</body>
|
</body>
|
||||||
</html>")
|
</html>")
|
||||||
|
|
||||||
(defn format-code [code type]
|
|
||||||
(cond-> code
|
|
||||||
(= type "svg")
|
|
||||||
(-> (str/replace "<defs></defs>" "")
|
|
||||||
(str/replace "><" ">\n<"))
|
|
||||||
|
|
||||||
(or (= type "svg") (= type "html"))
|
|
||||||
(beautify/html #js {"indent_size" 2})))
|
|
||||||
|
|
||||||
(defn get-flex-elements [page-id shapes from]
|
(defn get-flex-elements [page-id shapes from]
|
||||||
(let [ids (mapv :id shapes)
|
(let [ids (mapv :id shapes)
|
||||||
ids (hooks/use-equal-memo ids)
|
ids (hooks/use-equal-memo ids)
|
||||||
|
@ -151,14 +142,14 @@
|
||||||
(dm/str
|
(dm/str
|
||||||
fontfaces-css "\n"
|
fontfaces-css "\n"
|
||||||
(-> (cg/generate-style-code objects style-type all-children)
|
(-> (cg/generate-style-code objects style-type all-children)
|
||||||
(format-code style-type)))))
|
(cb/format-code style-type)))))
|
||||||
|
|
||||||
markup-code
|
markup-code
|
||||||
(mf/use-memo
|
(mf/use-memo
|
||||||
(mf/deps markup-type shapes images-data)
|
(mf/deps markup-type shapes images-data)
|
||||||
(fn []
|
(fn []
|
||||||
(-> (cg/generate-markup-code objects markup-type shapes)
|
(-> (cg/generate-markup-code objects markup-type shapes)
|
||||||
(format-code markup-type))))
|
(cb/format-code markup-type))))
|
||||||
|
|
||||||
on-markup-copied
|
on-markup-copied
|
||||||
(mf/use-callback
|
(mf/use-callback
|
||||||
|
|
26
frontend/src/app/util/code_beautify.cljs
Normal file
26
frontend/src/app/util/code_beautify.cljs
Normal file
|
@ -0,0 +1,26 @@
|
||||||
|
;; This Source Code Form is subject to the terms of the Mozilla Public
|
||||||
|
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||||
|
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||||
|
;;
|
||||||
|
;; Copyright (c) KALEIDOS INC
|
||||||
|
|
||||||
|
(ns app.util.code-beautify
|
||||||
|
(:require
|
||||||
|
["js-beautify" :as beautify]
|
||||||
|
[cuerdas.core :as str]))
|
||||||
|
|
||||||
|
(defn format-html
|
||||||
|
[data]
|
||||||
|
(beautify/html data #js {:indent_size 2}))
|
||||||
|
|
||||||
|
(defn format-code
|
||||||
|
[code type]
|
||||||
|
(let [type (if (keyword? type) (name type) type)]
|
||||||
|
(cond-> code
|
||||||
|
(= type "svg")
|
||||||
|
(-> (str/replace "<defs></defs>" "")
|
||||||
|
(str/replace "><" ">\n<"))
|
||||||
|
|
||||||
|
(or (= type "svg") (= type "html"))
|
||||||
|
(format-html))))
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue