PoC: Expose wysiwyg element to manipulate from outside (#1356)

* expose wysiwyg element to manipulate from outside

* keep focus after changing style

* update editingElement correctly

* remove mistake

* update text only

* proper check for element

* udpate snapshots

* add error log

* remove try catch handler

* remove blur event

* add proper types

* merge if condition

* simplify if condition

Co-Authored-By: Lipis <lipiridis@gmail.com>

Co-authored-by: dwelle <luzar.david@gmail.com>
Co-authored-by: Lipis <lipiridis@gmail.com>
Co-authored-by: Fausto95 <faustino.kialungila@gmail.com>

src/element/index.ts

@@ -1,4 +1,8 @@
-import { ExcalidrawElement, NonDeletedExcalidrawElement } from "./types";
+import {
+  ExcalidrawElement,
+  NonDeletedExcalidrawElement,
+  NonDeleted,
+} from "./types";
 import { isInvisiblySmallElement } from "./sizeHelpers";
 
 export {
@@ -68,3 +72,9 @@ export function getNonDeletedElements(elements: readonly ExcalidrawElement[]) {
     readonly NonDeletedExcalidrawElement[]
   );
 }
+
+export function isNonDeletedElement<T extends ExcalidrawElement>(
+  element: T,
+): element is NonDeleted<T> {
+  return !element.isDeleted;
+}

src/element/textWysiwyg.tsx

@@ -1,5 +1,6 @@
 import { KEYS } from "../keys";
 import { selectNode } from "../utils";
+import { WysiwigElement } from "./types";
 
 function trimText(text: string) {
   // whitespace only → trim all because we'd end up inserting invisible element
@@ -40,7 +41,7 @@ export function textWysiwyg({
   textAlign,
   onSubmit,
   onCancel,
-}: TextWysiwygParams) {
+}: TextWysiwygParams): WysiwigElement {
   const editable = document.createElement("div");
   try {
     editable.contentEditable = "plaintext-only";
@@ -120,7 +121,6 @@ export function textWysiwyg({
       event.stopPropagation();
     }
   };
-  editable.onblur = handleSubmit;
 
   function stopEvent(event: Event) {
     event.stopPropagation();
@@ -137,7 +137,6 @@ export function textWysiwyg({
 
   function cleanup() {
     // remove events to ensure they don't late-fire
-    editable.onblur = null;
     editable.onpaste = null;
     editable.oninput = null;
     editable.onkeydown = null;
@@ -150,4 +149,12 @@ export function textWysiwyg({
   document.body.appendChild(editable);
   editable.focus();
   selectNode(editable);
+
+  return {
+    submit: handleSubmit,
+    changeStyle: (style: any) => {
+      Object.assign(editable.style, style);
+      editable.focus();
+    },
+  };
 }

src/element/types.ts

@@ -68,3 +68,8 @@ export type ResizeArrowFnType = (
   pointerY: number,
   perfect: boolean,
 ) => void;
+
+export type WysiwigElement = {
+  submit: () => void;
+  changeStyle: (style: Record<string, any>) => void;
+};