Highlighted Comments Not Visible in PlateStatic Mode

[ganeshrvel]

I'm building a table where each cell renders a Plate editor. Since rendering multiple Plate editors within table cells leads to Error: Maximum update depth exceeded, I started using PlateStatic for non-editable (preview) mode, as suggested here: [Issue #3773](#3773).

For rendering the Plate editor in preview mode, I use CommentLeafStatic. Everything works fine, except that I'm unable to see the highlighted text in PlateStatic.

When I try this implementation, it throws the following error:

export function CommentLeafStatic({
  children,
  className,
  ...props
}: SlateLeafProps<TCommentText>) {
  const { leaf, nodeProps } = props;

  const state = useCommentLeafState({ leaf });
  const { props: rootProps } = useCommentLeaf(state);

  if (!state.commentCount) {
    return <>{children}</>;
  }

  let aboveChildren = <>{children}</>;

  if (!state.isActive) {
    for (let i = 1; i < state.commentCount; i++) {
      aboveChildren = <span className="bg-highlight/25">{aboveChildren}</span>;
    }
  }

  return (
    <SlateLeaf
      {...props}
      className={cn(
        className,
        'border-b-2 border-b-highlight/35 hover:bg-highlight/25',
        state.isActive ? 'bg-highlight/25' : 'bg-highlight/15',
      )}
      nodeProps={{
        ...rootProps,
        ...nodeProps,
      }}
    >
      {aboveChildren}
    </SlateLeaf>
  );
}

Error Message:

comment-leaf-static.tsx:10 Error: Plate hooks must be used inside a Plate or PlateController
    at usePlateStore (createPlateStore.ts:130:11)
    at useEditorRef (createPlateStore.ts:208:17)
    at useEditorPlugin (useEditorPlugin.ts:24:18)
    at useCommentLeafState (useCommentLeaf.ts:14:33)
    at CommentLeafStatic (comment-leaf-static.tsx:17:35)
    ...

It seems like useCommentLeafState depends on Plate's context, which might not be available in PlateStatic mode.

Are there any examples of rendering highlighted comments in PlateStatic? Is there an alternative approach to achieve this in read-only mode?

Thanks!

[felixfeng33]

I can see the highlighted text in here
Just can't open popover what do you mean by highlighted text.Is it only invisible in the table?