Fix error with contentEditable (excalidraw#803)

stvnshpd · Feb 22, 2020 · 43236be · 43236be
1 parent 277eeb4
commit 43236be
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/src/components/ProjectName.tsx b/src/components/ProjectName.tsx
@@ -31,12 +31,19 @@ export class ProjectName extends Component<Props> {
       e.currentTarget.blur();
     }
   };
+  private makeEditable = (editable: HTMLSpanElement) => {
+    try {
+      editable.contentEditable = "plaintext-only";
+    } catch {
+      editable.contentEditable = "true";
+    }
+  };
 
   public render() {
     return (
       <span
         suppressContentEditableWarning
-        contentEditable={"plaintext-only" as any}
+        ref={this.makeEditable}
         data-type="wysiwyg"
         className="ProjectName"
         role="textbox"

diff --git a/src/element/textWysiwyg.tsx b/src/element/textWysiwyg.tsx
@@ -34,7 +34,11 @@ export function textWysiwyg({
   // But this solution has an issue — it allows to paste
   // multiline text, which is not currently supported
   const editable = document.createElement("div");
-  editable.contentEditable = "plaintext-only";
+  try {
+    editable.contentEditable = "plaintext-only";
+  } catch {
+    editable.contentEditable = "true";
+  }
   editable.tabIndex = 0;
   editable.innerText = initText;
   editable.dataset.type = "wysiwyg";