Fork me on GitHub
#clojurescript
<
2022-09-26
>
agh2o15:09:14

Wondering if someone wrote a slatejs (react highly configurable rich text editor) port to clojurescript that plays well with reframe (or any other similar editor). I found one (https://github.com/jhund/re-frame-and-reagent-and-slatejs) that is a bit outdated..

mkvlr17:09:58

we're using prosemirror which plays well with re-frame (we're dispatching & applying prosemirror through re-frames event loop)

agh2o20:09:31

Awesome thanks for the tip! Do you have any opinion of slate VS prose mirror?

agh2o20:09:47

Also, do you have a code snippet I could get started with?

Rupert (All Street)07:09:58

@U02FP0U7J1W - If you are not too tied into reframe then you could use a more 'react aligned' UI framework like #uix which would let you use SlateJS and other JavaScript libraries easily with just a bit of javascript interop (no external wrapper required). Note, SlateJS is pretty low level - you need to use a lot of plugins and deep integration to make it work and provide rich editing functionality.

mkvlr08:09:01

yes, I would always go with prosemirror, it's the best out there

mkvlr08:09:10

for something a bit easier to use I recommend https://tiptap.dev, it's also built on top of prosemirror

agh2o09:10:18

@U5H74UNSF How do you avoid the "Applying a mismatched transaction" problem when the sending of the transaction as an event and then updating the editor's state use a subscription takes longer than it takes for a user to enter another key? It seems more of a clojurescript/reframe question then it is a prosemirror (I think) It seems weird to me that this might even be a problem because I'm not sure the editor can rely on the default dispatchTransaction to be fast enough.. Is there a specifc way in which you update the state? I currently am holding the EditorState in the app-db (its smelly but I didn't want to hold the state in the views..). And thank you 🙂 edit: dispatch-sync helps but does not completely solve the problem

mkvlr12:10:15

yeah you should use dispatch-sync

mkvlr12:10:36

we keep the view in the app db state and then in the re-frame event handler we create a ::doc/render effect

(re-frame/reg-fx
 ::render
 (fn doc-render [{::keys [^js view state]}]
   (when (.-docView view)
     (.updateState view state))))

mkvlr12:10:29

keeping the view in the state isn’t needed though as the transaction event can carry it

mkvlr12:10:15

but yeah, it’s important you do the state update once per transaction and not via a subscription

agh2o13:10:30

ha nice! that's what ill do thanks!!