Community Extension: A calculation 'widget'

[mcshaz]

Description

Summary

look at the simplified working example

TLDR; version

This is a simple proof of concept to design an extension meeting the following requirements:

• simple WYSIWYG editing of text - explaining a result, inline with the result of a calculation
• ability to add, edit and delete simple formulas, the result of which which will be calculated once the variables are known
• display the underlying formula creating the displayed result on hover
• a narrow immutable symbol used inline to represent the formula. This is because:
  • displaying the whole formula inline would result in less readability
  • displaying a formula editor in a modal allows more formula specific options and formatting of the formula itself

Final use case will be for calculating and displaying drug doses

URL

Source Code

https://github.com/mcshaz/tiptap-calculation-example/tree/main

Github pages working example

https://mcshaz.github.io/tiptap-calculation-example/

About

The particular code I would be interested in peoples thoughts are:
https://github.com/mcshaz/tiptap-calculation-example/blob/main/src/tiptap/Calculation.ts
and
https://github.com/mcshaz/tiptap-calculation-example/blob/main/src/tiptap/helpers/ClickNodeHandler.ts

The extension borrows heavily from the Tiptap Mentions Plugin

Type

Document Editor

Other

Pull requests, suggestions and code reviews (including to improve adherance to Tiptap or Vue style guides and recommended practice or improving use cases and extensibility) are welcome...

[bdbch]

Hey @mcshaz cool! I tried to test it and had my browser tab hanging up when I clicked on the gray squares inside the editor content. What is the expected behavior there?