✨ Add minor improvements for text-editor-v2

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

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]

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.

frontend/src/app/main/ui/workspace/shapes/text/v2_editor_impl.js

@@ -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
-};

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")))