如何让solid-mason适配高度不确定的元素？

我想让solid-mason库适配初始高度未定义的元素，但目前无法实现。问题出在NoteItem组件：由于文本内容量未知，元素高度不确定，导致库计算错误，出现元素重叠。调整窗口大小时，solid-mason的网格组件会重新计算整个布局，元素能回到正确位置，但我尝试在笔记组件中触发resize事件未能解决问题。

相关代码 #

export const NoteItem = (props: { noteInfo: NoteRef }) => {
  const [loading, setLoading] = createSignal(true);
  const [noteContent, setNoteContent] = createSignal('');

  const content = async () => {
    const note = await get_note_content(props.noteInfo.notepath);
    setNoteContent(note);
    setLoading(false);
  };

  onMount(() => {
    content();
  });

  return (
    <Show when={!loading()}>
      <Dialog>
        <DialogTrigger class="w-full">
          <div class="max-h-[500px] min-h-[50px] w-full overflow-hidden rounded-xl border border-transparent bg-foreground/10 p-6 shadow-md hover:border-secondary">
            <NoteContent content={noteContent()} />
          </div>
          {props.noteInfo.metadata.name === '' ? null : (
            <p class="mt-[10px] h-5 overflow-hidden text-ellipsis whitespace-nowrap text-center text-sm font-medium text-muted/80">
              {props.noteInfo.metadata.name}
            </p>
          )}
        </DialogTrigger>
        <ViewBox source={props.noteInfo} content={noteContent()} type="note" />
      </Dialog>
    </Show>
  );
};

const NoteContent = (props: { content: string }) => {
  const [container, setContainer] = createSignal<HTMLDivElement>();

  // createEffect(() => {
  //   window.dispatchEvent(new Event('resize'));
  // });

  createTiptapEditor(() => ({
    element: container()!,
    editable: false,
    extensions: [
      StarterKit,
      Markdown.configure({
        transformPastedText: true,
        transformCopiedText: true,
      }),
    ],
    editorProps: {
      attributes: {
        class:
          'focus:outline-none prose dark:prose-invert prose-sm sm:prose-base lg:prose-lg xl:prose-xl max-w-full h-full ',
      },
    },
    content: props.content,
  }));

  return <div ref={setContainer} class="h-full overflow-y-scroll text-start" />;
};

尝试的resize事件代码 #

createEffect(() => {
  window.dispatchEvent(new Event('resize'));
});

内容的提问来源于stack exchange，提问作者Ridy Franck