Minimal example for React+TypeScript in a SPA, preferably with FluentUI v9 theming

[LarsKemmann]

Describe the bug
The documentation does not provide any guidance on how to use React to actually use RoosterJS. Ideally, there would be a minimal example that shows the steps needed to add RoosterJS to a React app along with Fluent UI v9 (React) and a <FluentProvider>, set the contents from React State (useState), and update React State when the contents change (i.e., as the user types).

That's it. It feels like a really simple thing that anyone trying to use this library would want to know. I hate to submit question-like bugs, but I've now spent almost an hour digging through docs, Stack Overflow, Codepen examples, etc. and found nothing.

[JiuqingSong]

Hi, do you want to make a contribution with a demo?

Thanks.

[LarsKemmann]

No, the problem is I have no idea how on Earth to do what I'm asking you to document. 😂 ~Lars

…

________________________________ From: Jiuqing Song ***@***.***> Sent: Wednesday, May 8, 2024 7:30:18 PM To: microsoft/roosterjs ***@***.***> Cc: Lars Kemmann ***@***.***>; Author ***@***.***> Subject: Re: [microsoft/roosterjs] Minimal example for React+TypeScript in a SPA, preferably with FluentUI v9 theming (Issue #2618) Hi, do you want to make a contribution with a demo? Thanks. — Reply to this email directly, view it on GitHub<#2618 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ABMQNPLBMPDMEHMOO2BXKV3ZBKYQVAVCNFSM6AAAAABHJRFWMCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMBRGY2TSMJWGA>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[JiuqingSong]

Actually, I have no idea either. I have never used FluentUI v9 before. But roosterjs is designed to be framework-independent, it is just a pure javascript library without any dependency to any other framework, which means it should be able to work together with any framework. In fact, developing the editor engine and developing a UI wrapper are totally different things. The UI wrapper is not our major goal.

We focus on the editor engine itself, but not the UI component. Anyone who have interest can develop their own UI wrapper of roosterjs. We have a roosterjs-react library just because we need a demo site to show how roosterjs works and we also use it as a test platform. But it doesn't mean roosterjs-react is the main output, it is actually just a demo.

[LarsKemmann]

Ah, well that's helpful to know. Thank you. I might end up contributing an example, no promises though. 😅

[pradeept95]

Hi @LarsKemmann , We are using Fluent UI v9 for all of our projects and we needed editor for some of the application. I tried to put everything I can and the way I understand. .

Here is the link of the editor implementation: https://github.com/pradeept95/fluent-extension-packages/tree/main/packages/fluent-input-extensions/src/lib/FluentEditor

Please let me know if anything that I can improve or If I am using something wrong way!

If you just want to use in your project, I have published npm package as well (It also includes other input like PeoplePicker and FilePicker though), so you can do

 npm install @prt-ts/fluent-input-extensions

Now, you can use as follows:

// import
import { FluentEditor } from "@prt-ts/fluent-input-extensions";


// in jsx

<FluentEditor  {...props} />

Here is the list of available props: https://github.com/pradeept95/fluent-extension-packages/blob/main/packages/fluent-input-extensions/src/lib/FluentEditor/FluentEditorTypes.tsx

Here is the screenshot taken from one of my application:

If you have any questions, or suggestion, please let me know.

Thank You!

[pradeept95]

FYI: @JiuqingSong

[JiuqingSong]

Thanks @pradeept95