diff --git a/frontend/shadow-cljs.edn b/frontend/shadow-cljs.edn index 0c0b91b57..4d79481ae 100644 --- a/frontend/shadow-cljs.edn +++ b/frontend/shadow-cljs.edn @@ -62,6 +62,12 @@ :depends-on #{:shared} :init-fn app.rasterizer/init}} + :js-options + {:entry-keys ["module" "browser" "main"] + :resolve {"penpot/vendor/text-editor-v2" + {:target :file + :file "vendor/text_editor_v2.js"}}} + :compiler-options {:output-feature-set :es2020 :output-wrapper false diff --git a/frontend/src/app/main/data/workspace/texts.cljs b/frontend/src/app/main/data/workspace/texts.cljs index 9089965d1..bdba04321 100644 --- a/frontend/src/app/main/data/workspace/texts.cljs +++ b/frontend/src/app/main/data/workspace/texts.cljs @@ -469,7 +469,7 @@ (styles/get-styles-from-style-declaration) ((comp update-node-fn migrate-node))) styles (styles/attrs->styles attrs)] - (.applyStylesToSelection text-editor-instance styles)))))))) + (.applyStylesToSelection ^js text-editor-instance styles)))))))) ;; --- RESIZE UTILS @@ -732,7 +732,7 @@ (let [text-editor-instance (:workspace-editor state) styles (styles/attrs->styles attrs)] (when (some? text-editor-instance) - (.applyStylesToSelection text-editor-instance styles))))))) + (.applyStylesToSelection ^js text-editor-instance styles))))))) (defn update-all-attrs [ids attrs] diff --git a/frontend/src/app/main/ui/workspace/shapes/text/v2_editor.cljs b/frontend/src/app/main/ui/workspace/shapes/text/v2_editor.cljs index c8791d9ca..e12421f29 100644 --- a/frontend/src/app/main/ui/workspace/shapes/text/v2_editor.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/text/v2_editor.cljs @@ -7,7 +7,7 @@ (ns app.main.ui.workspace.shapes.text.v2-editor (:require-macros [app.main.style :as stl]) (:require - ["./v2_editor_impl.js" :as impl] + ["penpot/vendor/text-editor-v2" :as editor.v2] [app.common.data :as d] [app.common.data.macros :as dm] [app.common.geom.shapes :as gsh] @@ -28,6 +28,22 @@ [goog.events :as events] [rumext.v2 :as mf])) +(def ^:private TextEditor + editor.v2/default) + +(defn- create-editor + [element options] + (new TextEditor element (obj/clone options))) + +(defn- set-editor-root! + [instance root] + (set! (.-root ^TextEditor instance) root) + instance) + +(defn- get-editor-root + [instance] + (.-root ^TextEditor instance)) + (mf/defc text-editor-html "Text editor (HTML)" {::mf/wrap [mf/memo] @@ -53,7 +69,7 @@ (fn [] (let [text-editor-instance (mf/ref-val text-editor-instance-ref) container (mf/ref-val text-editor-container-ref) - new-content (content/dom->cljs (impl/getRoot text-editor-instance))] + new-content (content/dom->cljs (get-editor-root text-editor-instance))] (when (some? new-content) (st/emit! (dwt/v2-update-text-shape-content shape-id new-content true))) (dom/set-style! container "opacity" 0)))) @@ -74,7 +90,7 @@ (mf/use-fn (fn [] (let [text-editor-instance (mf/ref-val text-editor-instance-ref) - new-content (content/dom->cljs (impl/getRoot text-editor-instance))] + new-content (content/dom->cljs (get-editor-root text-editor-instance))] (when (some? new-content) (st/emit! (dwt/v2-update-text-shape-content shape-id new-content true))) ;; FIXME: We need to find a better way to trigger layout changes. @@ -85,7 +101,7 @@ (mf/use-fn (fn [] (let [text-editor-instance (mf/ref-val text-editor-instance-ref) - new-content (content/dom->cljs (impl/getRoot text-editor-instance))] + new-content (content/dom->cljs (get-editor-root text-editor-instance))] (when (some? new-content) (st/emit! (dwt/v2-update-text-shape-content shape-id new-content true)))))) @@ -105,7 +121,7 @@ style-defaults (styles/get-style-defaults (d/merge txt/default-attrs default-font)) text-editor-options #js {:styleDefaults style-defaults :selectionImposterElement (mf/ref-val text-editor-selection-ref)} - text-editor-instance (impl/createTextEditor text-editor text-editor-options)] + text-editor-instance (create-editor text-editor text-editor-options)] (mf/set-ref-val! text-editor-instance-ref text-editor-instance) (.addEventListener text-editor-instance "blur" on-blur) (.addEventListener text-editor-instance "focus" on-focus) @@ -114,7 +130,7 @@ (.addEventListener text-editor-instance "change" on-change) (st/emit! (dwt/update-editor text-editor-instance)) (when (some? content) - (impl/setRoot text-editor-instance (content/cljs->dom content))) + (set-editor-root! text-editor-instance (content/cljs->dom content))) (st/emit! (dwt/focus-editor)) ;; This function is called when the component is unmount. diff --git a/frontend/src/app/main/ui/workspace/shapes/text/v2_editor_impl.js b/frontend/src/app/main/ui/workspace/shapes/text/v2_editor_impl.js deleted file mode 100644 index c950d3cf9..000000000 --- a/frontend/src/app/main/ui/workspace/shapes/text/v2_editor_impl.js +++ /dev/null @@ -1,61 +0,0 @@ -/** - * 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 - */ - -import TextEditor from "./new_editor/TextEditor.js"; - -/** - * Applies styles to the current selection or the - * saved selection. - * - * @param {TextEditor} editor - * @param {*} styles - */ -export function applyStylesToSelection(editor, styles) { - return editor.applyStylesToSelection(styles); -} - -/** - * Returns the editor root. - * - * @param {TextEditor} editor - * @returns {HTMLDivElement} - */ -export function getRoot(editor) { - return editor.root; -} - -/** - * Sets the editor root. - * - * @param {TextEditor} editor - * @param {HTMLDivElement} root - * @returns {TextEditor} - */ -export function setRoot(editor, root) { - editor.root = root; - return editor; -} - -/** - * Creates a new Text Editor instance. - * - * @param {HTMLElement} element - * @param {object} options - * @returns {TextEditor} - */ -export function createTextEditor(element, options) { - return new TextEditor(element, { - ...options, - }); -} - -export default { - createTextEditor, - setRoot, - getRoot -}; diff --git a/frontend/src/debug.cljs b/frontend/src/debug.cljs index 9ccbd442a..d127c4bf1 100644 --- a/frontend/src/debug.cljs +++ b/frontend/src/debug.cljs @@ -509,3 +509,8 @@ #_(.reload js/location) (fn [cause] (js/console.log "EE:" cause))))))) + + +(defn ^:export enable-text-v2 + [] + (st/emit! (features/enable-feature "text-editor/v2"))) diff --git a/frontend/src/app/main/ui/workspace/shapes/text/new_editor/TextEditor.js b/frontend/vendor/text_editor_v2.js similarity index 100% rename from frontend/src/app/main/ui/workspace/shapes/text/new_editor/TextEditor.js rename to frontend/vendor/text_editor_v2.js