argimenes / standoff-properties-editor Goto Github PK
View Code? Open in Web Editor NEWA standoff properties editor in JavaScript
License: MIT License
A standoff properties editor in JavaScript
License: MIT License
Hi, first thanks for this great library and the extensive work which was put in. Also of course thanks for making it publicly available. I am working on a small annotation tool which incorporates your library. We only use the Editor class of your library. There are some caveats which we detected and for some I also found workarounds and fixes, which I'd like to contribute upstream. So, if things work well there might be issue reports and also pull requests following :-)
I've noticed that selected nodes detection does not work correctly in all cases in Firefox. This is due to https://bugzilla.mozilla.org/show_bug.cgi?id=957724#c10
In contrast to chromium, in ff, depending where a user clicks it might be the case that the selection range starts at the span previous to the first selected char with startOffset = 1 (instead of the start span with startOffset = 0). This can be reproduced by double clicking a word in the editor and then add an annotation. The annotation will include the spaces surrounding the word.
I will attach a pull request to fix this. The pull request also fixes that getSelectionNodes()
will crash if selection is outside of editor div or if the selection is empty. In the project we develop we need to detect if selection is cleared. Currently the Editor does not notify the selectors in that case. It would be nice if this could be added. I am happy to include this into the pull request (don't know if this has any side effects to the other parts of the library which I don't use, hence I didn't include this for now)
To fix that, I simply call updateSelectors()
in any case in handleMouseUpEvent()
and let updateSelectors()
also notify the selectors if selection is null.
best
Martin
This is really an impressive standoff editor, and I'm looking forward to exploring it more thoroughly. Just as an initial test, I tried typing the Arabic word اختبار ("test") in the demo, and it looks like this:
RTL text would need to be represented using the HTML dir
attribute (see Structural markup and right-to-left text in HTML).
Also, Arabic letters have to be joined together. Putting each character in a separate <span>
seems to breaks the joining of letters, but I've read that this can be solved by adding a zero-width joiner Unicode character.
How easy do you think it would be to do this? I would be glad to try to help, with some guidance.
like the GND or VIAF
Can we add a new annotation layer for layout in TEI:
tei/layout/emph rend=”red” [red text]
tei/layout/expan abbr="" [blue text]
tei/layout/corr sic="original" [green underline]
tei/layout/del cause=“moved“, rend=”striked out”, unit="line" quantity="2" [striked out]
tei/layout/add place="margin, above etc." [orange text]
tei/layout/gap reason=“not readable“ [underlined white space]
tei/layout/surplus [brown underline]
Annotation labels in the monitor bar should be ordered by nearest to furthest.
Selecting a single character and overwriting it should result in the deletion of the selected character and insertion of the new one; but two characters end up deleted instead of just one.
Annotation labels can be quite long as they include the name, attributes, and action buttons: consider putting everything to the right of the name into a container that can be toggled in and out.
A ZPA is zero-width in the text stream so these buttons do not apply.
for the places.
Copy across the code from Codex to load 'text' annotations (e.g., note, del, add, etc.) into a SPEEDy modal window.
Moving a ZPA with the left/right arrows results in the adjacent text being swallowed up into the ZPA text, rather than the ZPA itself being moved.
Use sanitize-html to reduce HTML to a restricted set of tags, attributes, and styles, possibly add whitespace normalization, extract the plain text and map HTML tags to a list of properties. This feature would also allow pasting styled text (e.g. from Word or Google Docs) into the editor.
For visualizing a paragraph background colouring would be usefull, maybe for lines, pages and sentences too ?
In our project, we need to handle the newline characters similar as all other characters are handled by speedy.
Currently, it is hardcoded that newline characters will be skipped while processing text.
It would be nice to make this configurable.
I've therefore created already a pull request: #29
You can add a link to codex in the README ?
so copy and paste is not possible
I think JSON have not the problem of overlapping that have XML. Why then do we use XML instead of JSON?? Or is there something I'm missing in the general picture??
The way I usually type an accented character (on macOS with the British keyboard) is that I first type the accent, then the character it will combine with. For example, to get ü, I type Alt-U to get the umlaut, then 'u'.
If I do this in the editor demo, something strange happens. Starting with an empty editor window, I type the umlaut, and this appears:
Then when I type the 'u':
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.