oakes / paren-soup Goto Github PK

Currently I'm calling preventDefault when pressing enter and then manually calling (.execCommand js/document "insertHTML" false "\n"), so I get a proper newline character rather than a <br> tag. This works fine in webkit-based browsers but in Edge it has no effect.

This is a kind of beginner question and I am not sure if this is the right place to ask, but I run into problems trying to use paren-soup in another project.

I would like to use paren-soup inside devcards. I've tried the lein dep 0.1.2 , and running lein install inside the cloned repo (0.1.3) inside the project I want to use it in.

I get

Compile Error
clojure.lang.ExceptionInfo : failed compiling file:src/devc/core.cljs
clojure.lang.ExceptionInfo : Referred var cljs.tools.reader/*wrap-value-and-add-metadata?* does not exist
Error on file , line , column

I've downloaded cljs.jar and put it inside the projects root assuming that is what was needed because of: ", but you will need to build your own copy of ClojureScript until a version is released with this patch.".

But it didn't make a difference, any pointers of what to try next?

I imagine this is where Nightcode editor issues go. (This is in Nightcode 2.5.6 running on Windows)
In this case, I pasted dependency info from github into the :depencencies vector and that seems to have removed the carriage return at the end of the line. You can see where the :aot bit jumped up to the end of the line.

Paren-soup is awesome! Is it possible to use "dir" function?

Although atoms such as numbers usually are formatted as single HTML elements in paren-soup, a single atom is sometimes formatted as multiple HTML elements. As a consequence, the cropped state text will contain only a fragment of the atom, resulting in an incorrect parse.

This issue can be replicated from Firefox (but not Chrome) in the paren-soup demo:

1. Type in the number 123 on say line 3 in the editor.
2. Open the DOM inspector of the web browser to view the associated HTML element, expected to be: <span class="number">123</span>
3. Type an arrow right, then arrow left to return the cursor to be just after the number.
4. Type 4 to make the number 1234.
5. In the DOM inspector, the atom is now encoded as two elements: <span class="number">123</span><span class="number">4</span>

This issue may cause unexpected rendering of atoms. For example, if a custom stylesheet declares .number elements to have a border, a number may display as two or more boxes.

Thanks for developing this library! I'm using it to develop a computational linguistics course at UCSD, and it's a really useful tool.

Is there a way to make variable definitions persist across code boxes? It would be useful to be able to define a variable in a box earlier in the page, and then use the definition in a later box.

I'm not sure how to safely update the contents of the editor from 'outside'.

I found https://github.com/lovasoa/react-contenteditable/blob/master/src/react-contenteditable.js but I'm not quite sure how to reconcile the behaviour there with what paren-soup is doing.

I have this code in paren-soup:

(defn prime? [n]
  (if (< n 2) false
    (not
      (reduce #(or % %2)
        (for [a (range 2 n)]
          (zero? (mod n a)))))))

For some reason, there's an error in the anonymous function, #(or % %2), at the %2:

Arg literal must be %, %& or %integer

But the arg literal is %integer.

The code works perfectly on clojurescript.io, which recognises the %2.

When typing with the cursor just after a delimiter, the style of the inserted character briefly is styled as the delimiter.

The challenge is that the same caret position may correspond to several insertion points in the markup. For example, if the caret is after the ( below, the insertion points can be either before or after the </span> end-tag:

<span class="delimiter">(</span>

As is, when navigating the text, if the caret is behind the ( the insertion point for typed text will be within the delimiter element. I've gone down the rabbit hole to find a solution to move the insertion point to after the delimiter element.

Various CSS hacks was a dead end - and I've tried a few. A promising quick fix was to set the delimiter span element to contenteditable=false, but there were still inconsistencies like when deleting a character after the delimiter.

Others have had similar challenges with range and carets, like this Rangy issue: timdown/rangy#366 What actually worked to expel the cursor from a marked element while keeping the caret in the same place was:

1. Create an element with a single character text object
2. Insert it after (or before) the marked element
3. Move the cursor to its text
4. Set contenteditable of the marked element to false
5. Remove the text node.

This forces the insertion cursor to the empty element. Working at least in Firefox and Chrome, working around a long standing bug in the latter.

Calling this function from paren-soup.core during update-cursor-position! (before the highlighting) fixes the problem by expelling the insertion point from the delimiter element - at least in Chrome and Firefox:

(defn reset-insertion-cursor []
  {:post [(not (dom/get-focused-elem "delimiter"))]}
  (when-let [delimiter (dom/get-focused-elem "delimiter")]
    (let [parent (.-parentElement delimiter)
          opening? (boolean (.-nextSibling delimiter))
          element (.createElement js/document "span")
          content (.appendChild element (.createTextNode js/document "\u200B"))
          range (.getRangeAt (.getSelection js/document) 0)]
      (if (zero? (.-startOffset range))
        (let [reference (if opening? parent delimiter)] 
          (.insertBefore (.-parentElement reference) element reference))
        (let [reference (if opening? delimiter parent)]
          (js/rangy.dom.insertAfter element reference)))
      (doto range
         .deleteContents
         (.setStartAfter content)
         (.setEndAfter content)
         (.collapse false))
      (.setAttribute delimiter "contenteditable" "false")
      (.removeChild element content)))) 

Hi,
I wanted to tell you that some colors were too light in the light theme, but it seems that your repo already contains the color "gold" for numbers instead of "FFD700".
So maybe your demo uses some old code?
I tried to investigate the gh-pages branch but the files seem to be both at "Hide the scroll bars".
I'm missing something, but what?

when using parinfer, It's really difficult to edit from

(foo
   (bar)
   (baz))

to

(xxx (foo
          (bar)
          (baz)))

with some stuff like aggressive-indent-mode, using parinfer will be more effective.

The execCommand function in Javascript is now considered obsolete but is used in create-editor:

Substituting with (dom/insert-text! "\n") seems to do the trick to replace the functionality.

Hey Zach, how could I use paren-soup in a React-based ClojureScript app using something like Reagent?

Assuming a start like this:

• Add [paren-soup "2.8.6"] to your dependencies.

What comes next?

Can this be hosted as a sub section of an existing page?

How do I invoke the compiler loop from ClojureScript? (the example shows how to do it with plain HTML & Javascript)

Can I provide context such as already defined defns and defs?

Is there an example Hiccup form for generating the required HTML?

Once I know the answer to these questions I will write up some documentation and issue a PR.

Currently what paren-soup does with a statement is it evaluates it until the statement is finished, even when it might take a while to finish. For example:

(defn fibonacci [n]
  (if (< n 2) n
    (+ (fibonacci (- n 1)) (fibonacci (- n 2)))))

(fibonacci 200)

Obviously that will take a long time to finish, but the whole section that I tested the code on became unresponsive. Is it better to either time the function out after a certain period of time, or to listen for a change to the statement (e.g. a backspace on the 200 to become 20) for re-evaluation?

I am using ClojureScript 1.9.229 and paren-soup 2.10.3.
Requiring paren-soup results in:
No such namespace: clojure.spec.alpha, could not locate clojure/spec/alpha.cljs, clojure/spec/alpha.cljc, or Closure namespace "clojure.spec.alpha"