Merge branch 'main' into patch-1

CHANGELOG.md

@@ -1,3 +1,21 @@
+## v0.20.0 (2024-11-07)
+
+- Add optional selection argument to getHtmlContent flow type (#6803) Rajiv Anisetti
+- Fix importDOM for Layout plugin (#6799) Ivaylo Pavlov
+- lexical-playground Feature Add more keyboard shortcuts (#6754) Bedru Umer
+- lexical-website Documentation Update Add Documentation for html Property in Lexical Editor Configuration (#6770) Ajaezo Kingsley
+- lexical-yjs Bug Fix clean up dangling text after undo in collaboration (#6670) Michael Shafer
+- Lexical-website BugFix Change button text colour to improve visibility (#6796) Fadekemi Adebayo
+- lexical-markdown Feature add ability to control finding the end of a node matched by TextMatchTransformer (#6681) Alessio Gravili
+- lexical-react Bug Fix LexicalTypeaheadMenuPlugin SSR error ReferenceError document is not defined (#6794) Bedru Umer
+- lexical-website Chore upgrade to Docusaurus v3.6 - Docusaurus Faster (#6761) Sbastien Lorber
+- Bug Fix  ContextMenu Paste option not preserving style  (#6780) C.
+- lexical-playground Fix the placement of the fontSize button in the ToolbarPlugin  and hide the vertical scroll (Bug Fix) (#6786) Oluwasanya Olaoluwa
+- #6768 fix to avoid infinite markdown shortcut matchers run (#6778) Maksim Horbachevsky
+- lexical Feature Add onUpdate function during update with onUpdate (correct baselline) (#6773) Michael Landis
+- v0.19.0 (#6774) Sherry
+- v0.19.0 Lexical GitHub Actions Bot
+
 ## v0.19.0 (2024-10-28)
 
 - lexical Add missing commands to Lexical.js.flow (#6769) Sherry

examples/react-plain-text/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@lexical/react-plain-text-example",
   "private": true,
-  "version": "0.19.0",
+  "version": "0.20.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@lexical/react": "0.19.0",
-    "lexical": "0.19.0",
+    "@lexical/react": "0.20.0",
+    "lexical": "0.20.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/react-rich-collab/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lexical/react-rich-collab-example",
   "private": true,
-  "version": "0.19.0",
+  "version": "0.20.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -12,9 +12,9 @@
     "server:webrtc": "cross-env HOST=localhost PORT=1235 npx y-webrtc"
   },
   "dependencies": {
-    "@lexical/react": "0.19.0",
-    "@lexical/yjs": "0.19.0",
-    "lexical": "0.19.0",
+    "@lexical/react": "0.20.0",
+    "@lexical/yjs": "0.20.0",
+    "lexical": "0.20.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "y-webrtc": "^10.3.0",

examples/react-rich/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@lexical/react-rich-example",
   "private": true,
-  "version": "0.19.0",
+  "version": "0.20.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@lexical/react": "0.19.0",
-    "lexical": "0.19.0",
+    "@lexical/react": "0.20.0",
+    "lexical": "0.20.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/react-rich/src/App.tsx

@@ -5,27 +5,137 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 import {AutoFocusPlugin} from '@lexical/react/LexicalAutoFocusPlugin';
 import {LexicalComposer} from '@lexical/react/LexicalComposer';
 import {ContentEditable} from '@lexical/react/LexicalContentEditable';
 import {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
 import {HistoryPlugin} from '@lexical/react/LexicalHistoryPlugin';
 import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin';
+import {
+  $isTextNode,
+  DOMConversionMap,
+  DOMExportOutput,
+  Klass,
+  LexicalEditor,
+  LexicalNode,
+  ParagraphNode,
+  TextNode,
+} from 'lexical';
 
 import ExampleTheme from './ExampleTheme';
 import ToolbarPlugin from './plugins/ToolbarPlugin';
 import TreeViewPlugin from './plugins/TreeViewPlugin';
+import {parseAllowedColor, parseAllowedFontSize} from './styleConfig';
 
 const placeholder = 'Enter some rich text...';
 
+const removeStylesExportDOM = (
+  editor: LexicalEditor,
+  target: LexicalNode,
+): DOMExportOutput => {
+  const output = target.exportDOM(editor);
+  if (output && output.element instanceof HTMLElement) {
+    // Remove all inline styles and classes if the element is an HTMLElement
+    // Children are checked as well since TextNode can be nested
+    // in i, b, and strong tags.
+    for (const el of [
+      output.element,
+      ...output.element.querySelectorAll('[style],[class],[dir="ltr"]'),
+    ]) {
+      el.removeAttribute('class');
+      el.removeAttribute('style');
+      if (el.getAttribute('dir') === 'ltr') {
+        el.removeAttribute('dir');
+      }
+    }
+  }
+  return output;
+};
+
+const exportMap = new Map<
+  Klass<LexicalNode>,
+  (editor: LexicalEditor, target: LexicalNode) => DOMExportOutput
+>([
+  [ParagraphNode, removeStylesExportDOM],
+  [TextNode, removeStylesExportDOM],
+]);
+
+const getExtraStyles = (element: HTMLElement): string => {
+  // Parse styles from pasted input, but only if they match exactly the
+  // sort of styles that would be produced by exportDOM
+  let extraStyles = '';
+  const fontSize = parseAllowedFontSize(element.style.fontSize);
+  const backgroundColor = parseAllowedColor(element.style.backgroundColor);
+  const color = parseAllowedColor(element.style.color);
+  if (fontSize !== '' && fontSize !== '15px') {
+    extraStyles += `font-size: ${fontSize};`;
+  }
+  if (backgroundColor !== '' && backgroundColor !== 'rgb(255, 255, 255)') {
+    extraStyles += `background-color: ${backgroundColor};`;
+  }
+  if (color !== '' && color !== 'rgb(0, 0, 0)') {
+    extraStyles += `color: ${color};`;
+  }
+  return extraStyles;
+};
+
+const constructImportMap = (): DOMConversionMap => {
+  const importMap: DOMConversionMap = {};
+
+  // Wrap all TextNode importers with a function that also imports
+  // the custom styles implemented by the playground
+  for (const [tag, fn] of Object.entries(TextNode.importDOM() || {})) {
+    importMap[tag] = (importNode) => {
+      const importer = fn(importNode);
+      if (!importer) {
+        return null;
+      }
+      return {
+        ...importer,
+        conversion: (element) => {
+          const output = importer.conversion(element);
+          if (
+            output === null ||
+            output.forChild === undefined ||
+            output.after !== undefined ||
+            output.node !== null
+          ) {
+            return output;
+          }
+          const extraStyles = getExtraStyles(element);
+          if (extraStyles) {
+            const {forChild} = output;
+            return {
+              ...output,
+              forChild: (child, parent) => {
+                const textNode = forChild(child, parent);
+                if ($isTextNode(textNode)) {
+                  textNode.setStyle(textNode.getStyle() + extraStyles);
+                }
+                return textNode;
+              },
+            };
+          }
+          return output;
+        },
+      };
+    };
+  }
+
+  return importMap;
+};
+
 const editorConfig = {
+  html: {
+    export: exportMap,
+    import: constructImportMap(),
+  },
   namespace: 'React.js Demo',
-  nodes: [],
-  // Handling of errors during update
+  nodes: [ParagraphNode, TextNode],
   onError(error: Error) {
     throw error;
   },
-  // The editor theme
   theme: ExampleTheme,
 };
 

examples/react-rich/src/ExampleTheme.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 export default {
   code: 'editor-code',
   heading: {

examples/react-rich/src/styleConfig.ts

@@ -0,0 +1,25 @@
+/**
+ * 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.
+ *
+ */
+
+const MIN_ALLOWED_FONT_SIZE = 8;
+const MAX_ALLOWED_FONT_SIZE = 72;
+
+export const parseAllowedFontSize = (input: string): string => {
+  const match = input.match(/^(\d+(?:\.\d+)?)px$/);
+  if (match) {
+    const n = Number(match[1]);
+    if (n >= MIN_ALLOWED_FONT_SIZE && n <= MAX_ALLOWED_FONT_SIZE) {
+      return input;
+    }
+  }
+  return '';
+};
+
+export function parseAllowedColor(input: string) {
+  return /^rgb\(\d+, \d+, \d+\)$/.test(input) ? input : '';
+}

examples/react-table/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@lexical/react-table-example",
   "private": true,
-  "version": "0.19.0",
+  "version": "0.20.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@lexical/react": "0.19.0",
-    "lexical": "0.19.0",
+    "@lexical/react": "0.20.0",
+    "lexical": "0.20.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/vanilla-js-plugin/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@lexical/vanilla-js-plugin-example",
   "private": true,
-  "version": "0.19.0",
+  "version": "0.20.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@lexical/dragon": "0.19.0",
-    "@lexical/history": "0.19.0",
-    "@lexical/rich-text": "0.19.0",
-    "@lexical/utils": "0.19.0",
+    "@lexical/dragon": "0.20.0",
+    "@lexical/history": "0.20.0",
+    "@lexical/rich-text": "0.20.0",
+    "@lexical/utils": "0.20.0",
     "emoji-datasource-facebook": "15.1.2",
-    "lexical": "0.19.0"
+    "lexical": "0.20.0"
   },
   "devDependencies": {
     "typescript": "^5.2.2",

examples/vanilla-js/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@lexical/vanilla-js-example",
   "private": true,
-  "version": "0.19.0",
+  "version": "0.20.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@lexical/dragon": "0.19.0",
-    "@lexical/history": "0.19.0",
-    "@lexical/rich-text": "0.19.0",
-    "@lexical/utils": "0.19.0",
-    "lexical": "0.19.0"
+    "@lexical/dragon": "0.20.0",
+    "@lexical/history": "0.20.0",
+    "@lexical/rich-text": "0.20.0",
+    "@lexical/utils": "0.20.0",
+    "lexical": "0.20.0"
   },
   "devDependencies": {
     "typescript": "^5.2.2",