Skip to content

Commit

Permalink
fix(designer-ui): Remove problematic call to setIsValuePlaintext (#…
Browse files Browse the repository at this point in the history
…4979)

* Remove problematic call to `setIsValuePlaintext`

* Clean up an unused variable

* Ensure 'safe for lexical' is checked when switching view
  • Loading branch information
ek68794998 committed Jun 14, 2024
1 parent 43070e2 commit 7ded280
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 20 deletions.
20 changes: 13 additions & 7 deletions libs/designer-ui/src/lib/html/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,14 @@ import { HTMLChangePlugin } from './plugins/toolbar/helper/HTMLChangePlugin';
import { isHtmlStringValueSafeForLexical } from './plugins/toolbar/helper/util';
import { useState } from 'react';

const isValueSafeForLexical = (value: ValueSegment[]) => {
const blankNodeMap = new Map<string, ValueSegment>();
const initialValueString = convertSegmentsToString(value, blankNodeMap);
return isHtmlStringValueSafeForLexical(initialValueString, blankNodeMap);
};

export const HTMLEditor = ({ initialValue, onChange, ...baseEditorProps }: BaseEditorProps): JSX.Element => {
const [isValuePlaintext, setIsValuePlaintext] = useState(() => {
const blankNodeMap = new Map<string, ValueSegment>();
const initialValueString = convertSegmentsToString(initialValue, blankNodeMap);
return !isHtmlStringValueSafeForLexical(initialValueString, blankNodeMap);
});
const [isValuePlaintext, setIsValuePlaintext] = useState(() => !isValueSafeForLexical(initialValue));
const [isSwitchFromPlaintextBlocked, setIsSwitchFromPlaintextBlocked] = useState(() => isValuePlaintext);
const [value, setValue] = useState<ValueSegment[]>(initialValue);

Expand All @@ -23,6 +25,11 @@ export const HTMLEditor = ({ initialValue, onChange, ...baseEditorProps }: BaseE
onChange?.({ value: value });
};

const handleSetIsValuePlaintext = (newIsPlaintext: boolean) => {
setIsValuePlaintext(newIsPlaintext);
setIsSwitchFromPlaintextBlocked(!isValueSafeForLexical(value));
};

return (
<EditorWrapper
{...baseEditorProps}
Expand All @@ -39,12 +46,11 @@ export const HTMLEditor = ({ initialValue, onChange, ...baseEditorProps }: BaseE
}}
isSwitchFromPlaintextBlocked={isSwitchFromPlaintextBlocked}
onBlur={handleBlur}
setIsValuePlaintext={setIsValuePlaintext}
setIsValuePlaintext={handleSetIsValuePlaintext}
>
<HTMLChangePlugin
isValuePlaintext={isValuePlaintext}
setIsSwitchFromPlaintextBlocked={setIsSwitchFromPlaintextBlocked}
setIsValuePlaintext={setIsValuePlaintext}
setValue={onValueChange}
/>
</EditorWrapper>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,31 +22,20 @@ import { $getRoot } from 'lexical';
export interface HTMLChangePluginProps {
isValuePlaintext: boolean;
setIsSwitchFromPlaintextBlocked: (value: boolean) => void;
setIsValuePlaintext: (isValuePlaintext: boolean) => void;
setValue: (newVal: ValueSegment[]) => void;
}

export const HTMLChangePlugin = ({
isValuePlaintext,
setIsSwitchFromPlaintextBlocked,
setIsValuePlaintext,
setValue,
}: HTMLChangePluginProps) => {
export const HTMLChangePlugin = ({ isValuePlaintext, setIsSwitchFromPlaintextBlocked, setValue }: HTMLChangePluginProps) => {
const onChange = (editorState: EditorState, editor: LexicalEditor) => {
const nodeMap = new Map<string, ValueSegment>();
let isNewValuePlaintext = isValuePlaintext;

editorState.read(() => {
const editorString = getChildrenNodes($getRoot(), nodeMap);
const isSafeForLexical = isHtmlStringValueSafeForLexical(editorString, nodeMap);

setIsSwitchFromPlaintextBlocked(!isSafeForLexical);
if (!isSafeForLexical) {
isNewValuePlaintext = true;
setIsValuePlaintext(isNewValuePlaintext);
}

convertEditorState(editor, nodeMap, { isValuePlaintext: isNewValuePlaintext }).then(setValue);
convertEditorState(editor, nodeMap, { isValuePlaintext }).then(setValue);
});
};
return <OnChangePlugin ignoreSelectionChange onChange={onChange} />;
Expand Down

0 comments on commit 7ded280

Please sign in to comment.