Skip to content

Commit

Permalink
fix: Slow performance on a large site during text editing (#3351)
Browse files Browse the repository at this point in the history
## Description

Update edited element on blur


https://fast-canvas-edit.development.webstudio.is/builder/ab3439dc-8eab-4050-a5b4-71247fba7d4c

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
  • Loading branch information
istarkov authored May 14, 2024
1 parent 8cdc103 commit 36d477e
Showing 1 changed file with 27 additions and 3 deletions.
30 changes: 27 additions & 3 deletions apps/builder/app/canvas/features/text-editor/text-editor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,14 @@ import {
$createLineBreakNode,
$getSelection,
$isRangeSelection,
type EditorState,
} from "lexical";
import { LinkNode } from "@lexical/link";
import { LexicalComposer } from "@lexical/react/LexicalComposer";
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
import { nanoid } from "nanoid";
import { createRegularStyleSheet } from "@webstudio-is/css-engine";
Expand All @@ -30,6 +30,7 @@ import {
$convertTextToLexical,
} from "./interop";
import { colord } from "colord";
import { useEffectEvent } from "~/shared/hook-utils/effect-event";

const BindInstanceToNodePlugin = ({ refs }: { refs: Refs }) => {
const [editor] = useLexicalComposerContext();
Expand Down Expand Up @@ -113,6 +114,29 @@ const CaretColorPlugin = () => {
return null;
};

const OnChangeOnBlurPlugin = ({
onChange,
}: {
onChange: (editorState: EditorState) => void;
}) => {
const [editor] = useLexicalComposerContext();
const handleChange = useEffectEvent(onChange);

useEffect(() => {
const handleBlur = () => {
handleChange(editor.getEditorState());
};

// https://github.com/facebook/lexical/blob/867d449b2a6497ff9b1fbdbd70724c74a1044d8b/packages/lexical-react/src/LexicalNodeEventPlugin.ts#L59C12-L67C8
return editor.registerRootListener((rootElement, prevRootElement) => {
rootElement?.addEventListener("blur", handleBlur);
prevRootElement?.removeEventListener("blur", handleBlur);
});
}, [editor, handleChange]);

return null;
};

const RemoveParagaphsPlugin = () => {
const [editor] = useLexicalComposerContext();

Expand Down Expand Up @@ -266,8 +290,8 @@ export const TextEditor = ({
/>
<LinkPlugin />
<HistoryPlugin />
<OnChangePlugin
ignoreSelectionChange={true}

<OnChangeOnBlurPlugin
onChange={(editorState) => {
editorState.read(() => {
const treeRootInstance = instances.get(rootInstanceSelector[0]);
Expand Down

0 comments on commit 36d477e

Please sign in to comment.