[lexical] Bug Fix: Handle MutationObserver/input event re-ordering wh…

…en using contentEditable inside of an iframe (#7045)
facebook · Jan 13, 2025 · 8bd22d5 · 8bd22d5
1 parent 930629c
commit 8bd22d5
Show file tree

Hide file tree

Showing 18 changed files with 1,386 additions and 117 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -82,7 +82,7 @@ module.exports = {
               // @lexical/yjs
               'createBinding',
             ],
-            isLexicalProvider: ['updateEditor'],
+            isLexicalProvider: ['updateEditor', 'updateEditorSync'],
             isSafeDollarFunction: '$createRootNode',
           }),
         ],

diff --git a/examples/vanilla-js-iframe/README.md b/examples/vanilla-js-iframe/README.md
@@ -0,0 +1,8 @@
+# Vanilla JS example in an iframe
+
+Here we have simplest Lexical setup in rich text configuration (`@lexical/rich-text`) with history (`@lexical/history`) and accessibility (`@lexical/dragon`) features enabled using an iframe
+for the contentEditable surface.
+
+**Run it locally:** `npm i && npm run dev`
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/facebook/lexical/tree/main/examples/vanilla-js-iframe?file=src/main.ts)
diff --git a/examples/vanilla-js-iframe/index.html b/examples/vanilla-js-iframe/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Lexical Basic - Vanilla JS iframe</title>
+  </head>
+  <body>
+    <template id="app-template">
+      <div>
+        <h1>Lexical Basic - Vanilla JS iframe</h1>
+        <div class="editor-wrapper">
+          <div id="lexical-editor" contenteditable></div>
+        </div>
+        <h4>Editor state:</h4>
+        <textarea id="lexical-state"></textarea>
+      </div>
+    </template>
+    <iframe
+      id="app-iframe"
+      height="100%"
+      style="
+        border: none;
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+      "
+      width="100%"></iframe>
+    <script src="/src/main.ts" type="module"></script>
+  </body>
+</html>