Codemirror in textareas

[orazionelson]

Hello,
is it possible to use Codemirror with Fore?
I saw some commented code in a demo page called "codemirror.html", but I don't know how to use it.
Thanks,
Alfredo

[JoernT]

tried it some time before but had some issues with CSS. For what purpose do you need it?

[orazionelson]

I'm trying to integrate Fore with my framework for TEI editing: ARACNE
Actually the mask for editing appears like the screenshot below.

[JoernT]

very much looks like a problem with lifecycle - codemirror not being loaded when it should be or something. Can't say much without example. We integrate codemirror in some other web components and it was a bit tricky i remember.

Inspecting console and network tab will probably show something.

[orazionelson]

Hello,
i made some job, i found a way to integrate the web components and refreshing the textarea after Fore loading, and It works!

Then I added some basic code to manage decently an XML structure in CodeMirror, and this doesn't work.
Formatting is a bit critical: too much spaces at the beginning of lines and the editor doesn't wrap the lines.

Anyway the worst problem is that editing in CodeMirror does not update the source on input.

https://gist.github.com/orazionelson/f47d48e1125011496a04aad88189b469

[orazionelson]

Hi,
I found the way to call codemirror without using wc.
CM catches directly the textarea in fx-control.
I find this approach more flexible for my targets: setting up CM is easier, and the CM options work (linewrapping, folding etc etc).
You can see the gist:
https://gist.github.com/orazionelson/4515534b2479c7975133a9ef49b22de1

But there are 2 problems:

1. FORE parses the textarea content before CM, so the tags are lost because Fore parses them.
2. Also in this case the editing doesn't update the source

Is it possible to recompile FORE with textareas in raw mode or add an attribute to enable/disable the parsing?

[JoernT]

Yeah - that's cool - like it as a first approach.

We cannot suppress parsing as that would stop everything from working ;) That's already done when instances have been loaded.

But - i guess we can find a way to serialize the bound nodes of the control containing the textarea when passing in and deserializing when setting the value. I have no ready-made recipe for it yet but interesting problem to think about.

can you please add the xml files to the gist also? Cannot run your page without them.

[orazionelson]

Hello,
of the three xml files:

            <fx-instance src="models/header.xml"></fx-instance>
            <fx-instance id="config" src="models/config.xml"></fx-instance>
            <fx-instance id="templates" src="models/templates.xml"></fx-instance>

You just need for the first one (header.xml), and you can find it here:
https://gist.githubusercontent.com/orazionelson/f47d48e1125011496a04aad88189b469/raw/63e1cef05f3e3aa8a95de39951a6cd10f6e44b0a/header.xml

You can comment the other two lines with instances.

Thanks,
Alfredo

[JoernT]

@orazionelson i just pushed an example that either displays and updates the codemirror component. You can check it out in /demo/codemirror-raw.html on dev branch.

Certainly not very generic for now but it works. Let me know what you think.

[orazionelson]

Hello @JoernT ,
great, great job!
I compiled fore-all.js and now it works fine inside my eXist application and with my codemirror script (that's a bit more complex than the one used in the example).
But there is still a little problem: if you enable in codemirror-raw.html page these lines:

`                   <details class="log">
                        <summary>Data</summary>
                        <pre>
                            {log('default')}
                        </pre>
                    </details>`

You can see that after editing the textarea:

1. the XML tags are encoded
2. the container element (i.e. summary) is duplicated

I solved quite easily the second problem by using 2 lines of code in codemirror trigger:

`            //REMOVE FIRST AND LAST LINE
            editor.getDoc().replaceRange("", {line:0,ch:0},{line:1,ch:0})
            editor.getDoc().replaceRange("", {line:editor.lastLine(),ch:0},{line:editor.lastLine()})`

But I have no idea of how to solve the first problem.

Thanks,
Alfredo

[JoernT]

well, yes - that's true. Didn't watch close enough. As the 'setvalue' function of control usually is just for setting a value (as the name implies ;) it's converted to a string. What actually is needed here is a replace of the referenced node. That certainly can be implemented. However i can make no promises that will happen within days as there's much work around here and i have to do this in spare time. Would however be a cool feature to have.

[orazionelson]

Hello,
I undestand, but I hope for a solution because the new version of my XML-TEI framework will be based on Fore.
For now I found the way to create the textareas also for the document body by using an external XML file as model.
Here is the gist:
https://gist.github.com/orazionelson/85fe53f8205dbd6db9f17258b60eb25c

[JoernT]

btw - you can use properly namespaced tei with your external files like so:

        <fx-instance 
            id="default" 
            src="....xml" 
            xpath-default-namespace="http://www.tei-c.org/ns/1.0"/>

The xpath-default-namespace attribute will make sure that your xpathes are not required to use prefixes so instead of 'tei:teiHeader' you can simply write 'teiHeader'. The external XML of course then needs a proper namespace declaration.

[orazionelson]

Thanks for the suggestion, I'll think about but I think there is a problem with my framework logic.

In the framework there is a collection layer where admin/main-editor sets some of the data for the teiHeader (ex. the publisher).
Other teiHeader data are at single document level and the owner are the editors.

When a single editor ends his job on all the documents in the collection, the main-editor runs a compiling function that merges the "collection level data" with the "single document data" in a valid TEI document with the right namespace.
(The editor, even if he writes on a TEI file without namespace, still has the possibility to validate the document against TEI because in that case it launches an on-the-fly compilation on the single document.)

[JoernT]

as a follow-up on this thead... we are currently developing a standalone web component wrapping up codemirror for Fore and others. It will use the latest codemirror 6 and directly pass a node to codemirror. The relevant parts in Fore are already implemented and will be merged soon into dev. The component is already working but still lacks some docs before rollout. I will follow up on this.

[orazionelson]

Thank you very much.
I'm not really experienced with web components but I'm confident to find the way to integrate it with my application.
Bye,
Alfredo

[fbaube]

I wonder whether anyone is trying this with Prosemirror.

[JoernT]

to be honest i haven't heard of it before, but yes, it should be possible. However from very quick scanning their docs i can't see immediately where and how. However Fore has been designed to connect to any component as long as it offers an API that lets us connect to the 'in' and 'out' of the component and react to their value changes.

For at least 90% of what i have dealt with so far that possible without much effort. However these inline code editors are all quite complex beasts and may be required some work to play nicely.

Ideally a library or component you integrate fires an event when their content changes and provides a way to pass in the data as string or DOM Node.

Update to this thread:
There's a web component for wrapping codemirror which makes it much easier to integrate - https://github.com/JinnElements/jinn-codemirror.

It gets a serialized node as input and returns us nodes again.

We are using that in a quite complex page to edit some TEI snippets.