blocko.blocks.paragraph
on-input!cljs
(on-input! content-state caret-location-state index event)Whenever a key is pressed, we want to update the content-state atom
so that whenever a on-paste event occurs, it would take correct
content as the basis of which to calculate where to paste the clip.
Reason being that whenever you type new text into the contentEditable,
even though we do update the global state, it doesn't really update
that component's inner content-state atom, and so when a paste
happens it only takes into account the initial state of it, and not the
new one, resulting in cursor placement then going wrong and setting in
the beginning of the text instead of the end of the paste location,
because the pasted index is further away than the actual content has
indexes.
Oh, almost forgot, we also update the caret-location-state, so that
the component would trigger caret positioning (which it does only if
the caret-location-state is not nil and the content-state is as
long or longer than caret-location-state). This is needed because
after updating content-state, the component re-renders, and the caret
location is lost and we want to set it in the right place again.
Whenever a key is pressed, we want to update the `content-state` atom so that whenever a `on-paste` event occurs, it would take correct content as the basis of which to calculate where to paste the clip. Reason being that whenever you type new text into the `contentEditable`, even though we do update the global state, it doesn't really update that component's inner `content-state` atom, and so when a paste happens it only takes into account the initial state of it, and not the new one, resulting in cursor placement then going wrong and setting in the beginning of the text instead of the end of the paste location, because the pasted index is further away than the actual content has indexes. Oh, almost forgot, we also update the `caret-location-state`, so that the component would trigger caret positioning (which it does only if the `caret-location-state` is not `nil` and the `content-state` is as long or longer than `caret-location-state`). This is needed because after updating `content-state`, the component re-renders, and the caret location is lost and we want to set it in the right place again.
on-key-press!cljs
(on-key-press! index event)Detect if the user pressed the enter key or not. If
the user did, we want to disable the default behaviour, which
usually is creating a new line, and instead create a new
paragraph block below it.
Detect if the user pressed the `enter` key or not. If the user did, we want to disable the default behaviour, which usually is creating a new line, and instead create a new paragraph block below it.
on-paste!cljs
(on-paste! content-state caret-location-state event)Prevents the default behaviour of a paste event from happening, and
instead reads the contents of the clipboard, parses it (to remove any
horrible mark-up that might come with it), and then inserts it at the
desired position inside and updates the content-state atom with the
new content, as well as updates the caret-location-state atom with
the new caret position which is what the caret location was when
pasting + the length of the pasted content.
We update the caret-location-state atom so that we could do caret
placement on a :component-did-update event, because otherwise the
caret placement would break on paste.
Prevents the default behaviour of a paste event from happening, and instead reads the contents of the clipboard, parses it (to remove any horrible mark-up that might come with it), and then inserts it at the desired position inside and updates the `content-state` atom with the new content, as well as updates the `caret-location-state` atom with the new caret position which is what the caret location was when pasting + the length of the pasted content. We update the `caret-location-state` atom so that we could do caret placement on a `:component-did-update` event, because otherwise the caret placement would break on paste.
place-caret!cljs
(place-caret! ref content-state caret-location-state)Places a caret at the desired caret-location-state position
inside the ref element. But only does it if the length of
content-state is the same or exceeds caret-location-state. This
is because we cannot place a caret in an index that does not exist i.e
is out of range.
Once the caret has been placed in its position, we reset the
caret-location-state to nil, so that this placement would not occur
on every render, but only when we set the caret-location-state to
something other than nil (and, like said before, content-state
either is the same or exceeds caret-location-state).
Places a caret at the desired `caret-location-state` position inside the `ref` element. But only does it if the length of `content-state` is the same or exceeds `caret-location-state`. This is because we cannot place a caret in an index that does not exist i.e is out of range. Once the caret has been placed in its position, we reset the `caret-location-state` to `nil`, so that this placement would not occur on every render, but only when we set the `caret-location-state` to something other than `nil` (and, like said before, `content-state` either is the same or exceeds `caret-location-state`).
rendercljs
(render {:keys [id ref focus content-state caret-location-state index]})Renders the actual DOM output of the paragraph block and hooks to it many of its necessary events.
Renders the actual DOM output of the paragraph block and hooks to it many of its necessary events.
cljdoc is a website building & hosting documentation for Clojure/Script libraries
× close