search

polotno-project / polotno-board

Roadmap and bug-tracker for the Polotno project.
https://polotno.dev/
9 stars 1 forks source link

Questions about the new AI Write button on Text Elements #88

Open ADTC opened 2 weeks ago

ADTC commented 2 weeks ago
  1. Is it possible to disable this feature introduced in SDK 2.14.0? Since it's very new, I suppose there's no documentation update for it yet. For those who want to, how do we hide it or remove it? (In our case, we like it and want to keep it so this question is just for doc's sake.)
  2. Is it possible to utilize this feature in other areas? We have a custom side panel with a text box. We would like to make this feature available in the text box in some way or form. Would that be possible? Screenshot 2024-09-25 at 10 06 42 PM

A mockup of a side panel with a text box that has AI Write button.

lavrton commented 2 weeks ago

For (1), docs are here: https://polotno.com/docs/toolbar. Overwriting TextAiWrite component.

For (2), I would need to think about it. It should be possible, but I am not sure about API yet. Make a public React component? Make a documented server API? Something else?

ADTC commented 2 weeks ago

Make a documented server API

I believe that would just be exporting the rewrite function and documenting the arguments it takes. The user may need to implement their own UI in this case. But you can also export the existing UI as a new component, as described below.

Make a public React component

You can generalize the UI part of the component of TextAIWrite into a new component that accepts as a callback function prop, the function to change the text, then we can reuse the new component anywhere we like with a different callback function prop which uses the above server API to generate new text and use it however it sees fit.

This will be my first approach, but there could be others. For example, you can do something similar to the above, but instead of the callback function prop accepting the arguments for rewrite function, the new component itself can call the rewrite function and then the callback function prop can accept the final rewritten text, which it can then do whatever it wants with the text. (In case of TextAIWrite component, it will replace the text in the Text element. In other cases, the user can code it to replace the text inside an input text box component for example.)

This way, you no longer need to export the rewrite function and document it, and instead you can continue to keep it private. This will be my second more refined approach.