How are custom textarea elements designed?

• EditorJS-LaTeX

  1 32 4.5 JavaScript

  LaTeX block support for EditorJS

I found this library: https://editorjs.io. Looks pretty solid with +15K stars on github and this plugin for LaTeX support: https://github.com/mdgaziur/EditorJS-LaTeX (this one has only 5 stars but you can see how the plugin works and it looks very easy to integrate with LaTeX, it uses a LaTeX library)

• Editor.js

  38 26,912 8.0 TypeScript

  A block-style editor with clean JSON output

  

I found this library: https://editorjs.io. Looks pretty solid with +15K stars on github and this plugin for LaTeX support: https://github.com/mdgaziur/EditorJS-LaTeX (this one has only 5 stars but you can see how the plugin works and it looks very easy to integrate with LaTeX, it uses a LaTeX library)

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• Draft.js

  40 22,309 8.2 JavaScript

  Discontinued A React framework for building text editors.

  

A good place to start with is the library docs — for draftjs that is https://draftjs.org/docs/getting-started and https://draftjs.org/docs/advanced-topics-entities. Every editor library is different and draftjs has a quite unique approach with its own concepts (Entities, Decorators, ContentBlock, Modifiers, ContentState, etc). Once you have a grasp of the basic concepts you can take a look at a basic demo like the one on his website https://github.com/facebook/draft-js/tree/10ca1ad44843e970c4314f85a8f37d26f842ebf9/website

• draft-js-katex-plugin

  1 32 0.0 JavaScript

  A Katex plugin for DraftJS.

The point here is that the library will help you to build the editor part for your widget: keybindings, selection, decorators, styling, etc. So all you have to do is to build a VERY basic editor, taking the draftjs most basic examples as reference, and then start implementing your own buttons that will end up calling your functions which will make use of the Draft Modifier API to insert/change text/blocks. You can use the same plugin from the example: https://github.com/letranloc/draft-js-katex-plugin (easiest way) or use the plugin as reference to build your own LaTeX implementation on draftjs.

Suggest a related project