Sep 22, 2025 · Sep 16, 2025 · Sep 17, 2025 · Sep 17, 2025
diff --git a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx
 ];

 const childrenMap = {
  value: stringExposingStateControl("value"),
  value: stringExposingStateControl("value"),
  delta: stringExposingStateControl("delta"),
  hideToolbar: BoolControl,
  readOnly: BoolControl,
  hideToolbar: boolean;
  readOnly: boolean;
  autoHeight: boolean;
  onChange: (html: string, deltaJSON: string, text: string) => void;
  onChange: (html: string, deltaJSON: string, text: string) => void;
  $style: RichTextEditorStyleType;
  contentScrollBar: boolean;
  tabIndex?: number;
  const wrapperRef = useRef<HTMLDivElement>(null);
  const editorRef = useRef<ReactQuill>(null);

   // know exactly when the editor mounts
   const [editorReady, setEditorReady] = useState(false);
   const setEditorRef = (node: ReactQuill | null) => {
     (editorRef as any).current = node as any;
     setEditorReady(!!node);
   };

  const getQuill = () => (editorRef.current as any)?.getEditor?.();

  const tryParseDelta = (v: unknown) => {
        (editor.scroll.domNode as HTMLElement).tabIndex = props.tabIndex;
      }
    }
  }, [props.tabIndex, key]);
  }, [props.tabIndex, key]);

  const contains = (parent: HTMLElement, descendant: HTMLElement) => {
    try {

  useEffect(() => {
    const q = getQuill();

    if (!q) {
      const v = props.value ?? "";
      const looksHtml = /<\/?[a-z][\s\S]*>/i.test(v);
      setContent(looksHtml ? v : `<p class="">${v}</p>`);
      return;
    }

      setContent(html);
      return;
    }

    const v = props.value ?? "";
    const looksHtml = /<\/?[a-z][\s\S]*>/i.test(v);
    const html = looksHtml ? v : `<p class="">${v}</p>`;
    setContent(html);
  }, [props.value]);
  }, [props.value, editorReady]);


  const handleClickWrapper = (e: React.MouseEvent<HTMLDivElement>) => {
      <Suspense fallback={<Skeleton />}>
        <ReactQuillEditor
          key={key}
          ref={editorRef}
          ref={setEditorRef}
          bounds={`#${id}`}
          modules={{
            toolbar: JSON.parse(props.toolbar),
 }

 const RichTextEditorCompBase = new UICompBuilder(childrenMap, (props) => {
  const propsRef = useRef(props);
  propsRef.current = props;

  const debouncedOnChangeRef = useRef(
    debounce((html: string, deltaJSON: string, text: string) => {
 props.value.onChange(html);
 props.delta.onChange(deltaJSON);
 props.onEvent("change");
    },1000)
 propsRef.current.value.onChange(html);
 propsRef.current.delta.onChange(deltaJSON);
 propsRef.current.onEvent("change");
    },500)
  );

    const handleChange = (html: string, deltaJSON: string, text: string) => {
      debouncedOnChangeRef.current?.(html, deltaJSON, text);
  useEffect(() => {
    return () => {
      debouncedOnChangeRef.current?.cancel();
    };
  }, []);

  const handleChange = (html: string, deltaJSON: string, text: string) => {
    debouncedOnChangeRef.current?.(html, deltaJSON, text);
  };

  return (
    <RichTextEditor
Original file line number	Diff line number	Diff line change
Expand Up		@@ -171,7 +171,7 @@ const toolbarOptions = [
		];

		const childrenMap = {
		value: stringExposingStateControl("value"),
		value: stringExposingStateControl("value"),
		delta: stringExposingStateControl("delta"),
		hideToolbar: BoolControl,
		readOnly: BoolControl,
Expand All		@@ -195,7 +195,7 @@ interface IProps {
		hideToolbar: boolean;
		readOnly: boolean;
		autoHeight: boolean;
		onChange: (html: string, deltaJSON: string, text: string) => void;
		onChange: (html: string, deltaJSON: string, text: string) => void;
		$style: RichTextEditorStyleType;
		contentScrollBar: boolean;
		tabIndex?: number;
Expand All		@@ -209,6 +209,13 @@ function RichTextEditor(props: IProps) {
		const wrapperRef = useRef<HTMLDivElement>(null);
		const editorRef = useRef<ReactQuill>(null);

		// know exactly when the editor mounts
		const [editorReady, setEditorReady] = useState(false);
		const setEditorRef = (node: ReactQuill \| null) => {
		(editorRef as any).current = node as any;
		setEditorReady(!!node);
		};

		const getQuill = () => (editorRef.current as any)?.getEditor?.();

		const tryParseDelta = (v: unknown) => {
Expand DownExpand Up		@@ -251,7 +258,7 @@ function RichTextEditor(props: IProps) {
		(editor.scroll.domNode as HTMLElement).tabIndex = props.tabIndex;
		}
		}
		}, [props.tabIndex, key]);
		}, [props.tabIndex, key]);

		const contains = (parent: HTMLElement, descendant: HTMLElement) => {
		try {
Expand All		@@ -267,11 +274,7 @@ function RichTextEditor(props: IProps) {

		useEffect(() => {
		const q = getQuill();

		if (!q) {
		const v = props.value ?? "";
		const looksHtml = /<\/?[a-z][\s\S]*>/i.test(v);
		setContent(looksHtml ? v : `<p class="">${v}</p>`);
		return;
		}

Expand All		@@ -282,12 +285,11 @@ function RichTextEditor(props: IProps) {
		setContent(html);
		return;
		}

		const v = props.value ?? "";
		const looksHtml = /<\/?[a-z][\s\S]*>/i.test(v);
		const html = looksHtml ? v : `<p class="">${v}</p>`;
		setContent(html);
		}, [props.value]);
		}, [props.value, editorReady]);


		const handleClickWrapper = (e: React.MouseEvent<HTMLDivElement>) => {
Expand DownExpand Up		@@ -316,7 +318,7 @@ function RichTextEditor(props: IProps) {
		<Suspense fallback={<Skeleton />}>
		<ReactQuillEditor
		key={key}
		ref={editorRef}
		ref={setEditorRef}
		bounds={`#${id}`}
		modules={{
		toolbar: JSON.parse(props.toolbar),
Expand All		@@ -339,17 +341,26 @@ function RichTextEditor(props: IProps) {
		}

		const RichTextEditorCompBase = new UICompBuilder(childrenMap, (props) => {
		const propsRef = useRef(props);
		propsRef.current = props;

		const debouncedOnChangeRef = useRef(
		debounce((html: string, deltaJSON: string, text: string) => {
		props.value.onChange(html);
		props.delta.onChange(deltaJSON);
		props.onEvent("change");
		},1000)
		propsRef.current.value.onChange(html);
		propsRef.current.delta.onChange(deltaJSON);
		propsRef.current.onEvent("change");
		},500)
		);

		const handleChange = (html: string, deltaJSON: string, text: string) => {
		debouncedOnChangeRef.current?.(html, deltaJSON, text);
		useEffect(() => {
		return () => {
		debouncedOnChangeRef.current?.cancel();
		};
		}, []);

		const handleChange = (html: string, deltaJSON: string, text: string) => {
		debouncedOnChangeRef.current?.(html, deltaJSON, text);
		};

		return (
		<RichTextEditor
Expand Down