I am in the process of enhancing a document editing product with the capability to embed a fully functional Excel spreadsheet within a ProseMirror editor. The objective is to allow users to interact with the spreadsheet (e.g., editing, formatting, utilizing formulas) seamlessly within their documents.
I’m reaching out to see if anyone has experience or knowledge of integrating a complete Excel spreadsheet into ProseMirror. While I mentioned SheetJS as an example, I’m certainly open to exploring other third-party libraries or approaches that offer similar functionalities. The essential features we’re looking for include:
Full interactivity with the spreadsheet directly in the ProseMirror editor, enabling users to edit cells, apply formatting, and use formulas as they would in Excel.
Additional Context:
The integration should not only render the spreadsheet but also support full user interaction within the ProseMirror environment.
I’m keen to hear about any libraries, plugins, or custom implementations that could facilitate embedding a fully interactive spreadsheet.
For instance, I have a screen recording of a product that supports this feature, illustrating the type of integration I’m aiming for.
I appreciate your time and any advice you can provide. Thank you!
For instance, I have a screen recording of a product that supports this feature, illustrating the type of integration I’m aiming for.
What product is that screen recording from?
The objective is to allow users to interact with the spreadsheet (e.g., editing, formatting, utilizing formulas) seamlessly within their documents.
Looking at that screen recording, you’re going to need a lot of plugins and an extensive custom node view.
custom node view to draw cell references when cell editor is open
disable default editing of cells with ProseMirror and instead open a custom cell editor onDoubleClick or onKeyDown; CodeMirror with a spreadsheet language is good for this
listen to changes in cell content only, and sending that to your spreadsheet engine (I’ve used HyperFormula for this in the past); listener on spreadsheet engine to send back computed values to the cell node views
custom plugin to handle cell selection navigation with arrow keys, and multi-cell selection
Honestly the keyword here is “seamless”. Building a spreadsheet by itself is already a hard task. Having to figure out whether to keep cell state in ProseMirror, or externally and then derive ProseMirror State from some type of global state is an in-depth decision.
This is about a multi-user collaborative document software called Lark. I’m looking for a feature-complete open-source spreadsheet project. Similar to embedding a nodeView type of CodeMirror in ProseMirror, I want to delegate complex functionalities and interactions to the spreadsheet project. The goal is to integrate the transaction systems of the spreadsheet and ProseMirror, handling the interactions between the spreadsheet’s nodeview and ProseMirror at their boundaries.
