tiptap icon indicating copy to clipboard operation
tiptap copied to clipboard

Draft: (vue-3) render node only once

Open Rirax opened this issue 10 months ago • 2 comments

Please describe your changes

In this PR we change the way nodes are rendered into Vue components and held in locale state during content loading.

For each node in EditorContent.ts, the current node and all its predecessors are rendered for each new node, which implies a performance issue.

To avoid all nodes being rendered each time, we now keep the rendered nodes as a reference

How did you accomplish your changes

Since we cannot mutate the Editor props in render method of EditorContent, we move the logic to render a node in VueRenderer.ts. Instead of keeping a Map of VueRenderer instance for each node, we keep the rendered VNodes in Map.

For each new node, we render it and add it to the existing Map. The render method of EditorContent now retrieves the VNodes and renders them.

How have you tested your changes

[add a detailed description of how you tested your changes here]

How can we verify your changes

[add a detailed description of how we can verify your changes here]

Remarks

[add any additional remarks here]

Checklist

  • [x] The changes are not breaking the editor
  • [x] Added tests where possible
  • [x] Followed the guidelines
  • [x] Fixed linting issues

Related issues

Link to the related issues here

Rirax avatar Apr 08 '24 15:04 Rirax

Deploy Preview for tiptap-embed ready!

Name Link
Latest commit 5cdab904bec3753809f0ddf06bab4c6456117c26
Latest deploy log https://app.netlify.com/sites/tiptap-embed/deploys/66140c9f2d1f8200085b1d09
Deploy Preview https://deploy-preview-5041--tiptap-embed.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] avatar Apr 08 '24 15:04 netlify[bot]

@Rirax LGTM but it seems there is a test failing in a Vue demo (regarding a Vue demo for the Drawing example). Could you verify and maybe take a look at that?

bdbch avatar May 10 '24 00:05 bdbch

Hi @bdbch thanks for the review. I've revised my approach here https://github.com/ueberdosis/tiptap/pull/5206

Rirax avatar Jun 04 '24 09:06 Rirax

Closed in favor of https://github.com/ueberdosis/tiptap/pull/5206

nperez0111 avatar Jun 12 '24 06:06 nperez0111