Add /esm/ vanilla js example to playground

etrepum · Mar 11, 2024 · d7aaaae · d7aaaae
1 parent c6cdc50
commit d7aaaae
Show file tree

Hide file tree

Showing 9 changed files with 386 additions and 0 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -83,6 +83,13 @@ module.exports = {
         'header/header': OFF,
       },
     },
+    {
+      // These aren't compiled, but they're written in module JS
+      files: ['packages/lexical-playground/esm/*.js'],
+      parserOptions: {
+        sourceType: 'module',
+      },
+    },
     {
       files: [
         'packages/**/src/__tests__/**',

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/lexical-playground/esm/index.esm.js b/packages/lexical-playground/esm/index.esm.js
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {registerDragonSupport} from '@lexical/dragon';
+import {createEmptyHistoryState, registerHistory} from '@lexical/history';
+import {HeadingNode, QuoteNode, registerRichText} from '@lexical/rich-text';
+import {mergeRegister} from '@lexical/utils';
+import {createEditor} from 'lexical';
+
+import prepopulatedRichText from './prepopulatedRichText.esm.js';
+
+const editorRef = document.getElementById('lexical-editor');
+const stateRef = document.getElementById('lexical-state');
+
+const initialConfig = {
+  namespace: 'Vanilla JS Demo',
+  // Register nodes specific for @lexical/rich-text
+  nodes: [HeadingNode, QuoteNode],
+  onError: (error) => {
+    throw error;
+  },
+  theme: {
+    // Adding styling to Quote node, see styles.css
+    quote: 'PlaygroundEditorTheme__quote',
+  },
+};
+const editor = createEditor(initialConfig);
+editor.setRootElement(editorRef);
+
+// Registering Plugins
+mergeRegister(
+  registerRichText(editor),
+  registerDragonSupport(editor),
+  registerHistory(editor, createEmptyHistoryState(), 300),
+);
+
+editor.update(prepopulatedRichText, {tag: 'history-merge'});
+
+editor.registerUpdateListener(({editorState}) => {
+  stateRef.value = JSON.stringify(editorState.toJSON(), undefined, 2);
+});
diff --git a/packages/lexical-playground/esm/index.html b/packages/lexical-playground/esm/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="Lexical Basic - Vanilla JS with ESM" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Lexical Basic - Vanilla JS with ESM</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <h1>Lexical Basic - Vanilla JS with ESM</h1>
+    <div class="editor-wrapper">
+      <div id="lexical-editor" contenteditable></div>
+    </div>
+    <h4>Editor state:</h4>
+    <textarea id="lexical-state"></textarea>
+    <script type="importmap">
+      {
+        "imports": {
+          "lexical": "./dist/Lexical.esm.js",
+          "@lexical/clipboard": "./dist/LexicalClipboard.esm.js",
+          "@lexical/dragon": "./dist/LexicalDragon.esm.js",
+          "@lexical/history": "./dist/LexicalHistory.esm.js",
+          "@lexical/html": "./dist/LexicalHtml.esm.js",
+          "@lexical/rich-text": "./dist/LexicalRichText.esm.js",
+          "@lexical/selection": "./dist/LexicalSelection.esm.js",
+          "@lexical/utils": "./dist/LexicalUtils.esm.js"
+        }
+      }
+    </script>
+    <script type="module" src="./index.esm.js"></script>
+  </body>
+</html>
diff --git a/packages/lexical-playground/esm/prepopulatedRichText.esm.js b/packages/lexical-playground/esm/prepopulatedRichText.esm.js
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import {$createHeadingNode, $createQuoteNode} from '@lexical/rich-text';
+import {$createParagraphNode, $createTextNode, $getRoot} from 'lexical';
+
+export default function prepopulatedRichText() {
+  const root = $getRoot();
+  if (root.getFirstChild() !== null) {
+    return;
+  }
+
+  const heading = $createHeadingNode('h1');
+  heading.append($createTextNode('Welcome to the Vanilla JS Lexical Demo!'));
+  root.append(heading);
+  const quote = $createQuoteNode();
+  quote.append(
+    $createTextNode(
+      `In case you were wondering what the text area at the bottom is – it's the debug view, showing the current state of the editor. `,
+    ),
+  );
+  root.append(quote);
+  const paragraph = $createParagraphNode();
+  paragraph.append(
+    $createTextNode('This is a demo environment built with '),
+    $createTextNode('lexical').toggleFormat('code'),
+    $createTextNode('.'),
+    $createTextNode(' Try typing in '),
+    $createTextNode('some text').toggleFormat('bold'),
+    $createTextNode(' with '),
+    $createTextNode('different').toggleFormat('italic'),
+    $createTextNode(' formats.'),
+  );
+  root.append(paragraph);
+}