Fork me on GitHub

Has anybody successfully found/implemented a codemirror component that works with reagent? I’ve tried two different libraries that profess to offer react components for codemirror, but ran into problems with both. The second library ( kinda works, but whenever the state atom changes the cursor loses its place and goes back to the start of the document. This doesn’t happen in the pure-JS example provided with the library, so my suspicion is that I’m using Reagent wrong, but I’m not sure how exactly. Sample code here:


has anyone else run into the problem where they make a form-2 component, set up some state in the outer form, then re-shuffle the components in a parent component, and suddenly the outer state no longer matches the inner component?


@mpdairy: yes that can be a problem. Solved by either dynamic subscriptions (very little docs, sorry) or completely blowing away the component and starting again .


Let me get you a link


@mikethompson Thanks! That’ll probably suffice for now. What do I do when I want to force the codemirror to re-render based on a change in state from elsewhere?


You have to make sure your component takes the text as a prop. Then in the component-did-update you can shove in new value


The component should NOT access the text via an ratom.


Because when that triggers an update ... component-did-update does not get called


Is that enough info ?


I’m not quite sure how to not access the text via an ratom, as the component still needs some output destination to write it to.


But I think it’s enough that I can look up the rest by myself, thanks!


Ok thanks @mikethompson I think I figured out a way to do it. My thing in the outer form was a fn that returns a dynamically created reaction. I just basically memoized that function and then moved it to the inside and make the component a form-1


Oh! also, I need to add keys to my components. that's why they were getting mixed up


that fixed it


@mpdairy: excellent. @tim.mccarthy: here's a brief description in response to skapoor:


In the parent, get the text via a ratom or subscription or whatever ... then pass it into the child component (which has codemirror) as a prop


That way the text is arriving as a prop. When props change, a component get rerendered AND the lifecycle methods get called. You want those lifecycle methods getting called!


Hope that makes sense


@mikethompson did you write all that documentation for re-frame? It's been amazingly helpful for understanding reagent


yes, parts really should be across in reagent Wiki


well thank you. the part explaining r/atoms and reactions was very valuable for my project


Kind of you to say, thanks.


@mikethompson: Using the example you linked earlier as a base, I made a version ( of editor that accepts an input string as the text value, and an output atom as a destination for output. I made two editors that in theory should be outputting to each other’s inputs, but this isn’t being reflected when I do any editing. The ratoms are being updated, but no re-render is triggered unless I edit the source and figwheel re-runs render-component. Is this because the editors are Form-3 components with unimplemented lifecycle functions (e.g. :component-did-update) or am I misunderstanding something more fundamental?


Got it working with one-way output by implementing :component-will-receive-props (fn [this new-props] (.setValue (.getDoc @cm-atom) (nth new-props 1))). If I hook it up in both directions, I’m back to square 1 with the cursor resetting after each keystroke, but I think this is good enough for now. Thanks!


(where cm-atom is an atom I use to store the codemirror instance)


Anyone knows about a reagent input component that only accepts numbers as input, both integers and floats, and both with imperial and metric decimal separator (i.e. one point one as both 1.1 and 1,1 based on the locale)? Preferably it shows numbers-only keyboards on mobile devices. As far as I can see, the input component in re-com doesn’t do this, but I may have missed something.


It looks like you missed the re-com demo/docs for input which shows how to do it.


Just supply a :validation-regex


@grav: yes, I agree it's consistent; I just wanted to point out that depending on how you cause the re-render, you get different event sequences


@mikethompson: does it also show the right keyboard on mobile devices?


No idea. Hopefully the readme makes our agenda clear.


From: > We can also confirm that none of the components have been designed with mobile in mind, and that there's no attempt to handle media queries. We said we had a desktop app focus, right?


It may or may not work, dunno


Yup, that’s why I emphasized it in my original question 😉 I’ll try it out.


@luposlip your ability to control the keyboard on mobile devices is limited. in web views you can control the keyboard that is shown with the type attribute of input tags... see for iOS details


(i haven't looked at android yet @luposlip )


It must be somewhat similar. I’ll investigate.


Hi all, I'm getting crazy getting facebook fixed-data-table to work with Reagent simple_smile


I'm having problem passing components as parameter


I write something like this


Everything is wired up correctly, a part from that [Cell "X"] form that React doesn't like


So how would you pass that component around following the javascript example?


I think I need the equivalent of (sablono/html [:cell "hi"]) that expands the vector into a React component, but I don't know where to find it


I'm not sure it will help your specific question, in fact, you may already be more advanced than what's given here, but there is a gist on this component: Other than that, perhaps you are after this?


@frankie: see also (although I can't vouch for the correctness of the code)