I am using slate js rich text editor, everything is working as expected. I am using separate editor for inserting math equation, how it works is
User writes text in slate editor
Then to insert equation user writes eqation in maths editor and click on insert equation
On click of this button i add new block like
change.insertInline({
type: 'equation',
data: { math: editor.getMathML() }
})
and handling render of the block by renderNode function
and one more block to continue writing in editor like change.insertBlock('paragraph')
Functionality wise everything is working as expected, but since i am adding equation as a block slate is rendering it in new line.
My questions are
How can i render customBlock in same line
Is there any other way of continue editing in same editor apart from change.insertBlock('paragraph')
Use CSS to "display: inline". The element can be a block but still render inline.
Related
I was writing my own text editor in Electron using React and I tried to do some basic syntax highlighting. The user writes their code inside a textarea, but there is no way to insert markup inside a textarea so I can't color text that way.
I found this jquery plugin which adds a backdrop behind the textarea so we can put a background color in certain places however I wanted the text themselves to be colored (which can't be done as the textarea is in front of the backdrop).
Any ideas about how other IDEs like Visual Studio Code (also written in electron) pulled this off?
There are multiple approaches that can work here.
One way could be using a div with a contenteditable="true" attribute instead of a textarea. This way you can both write text inside the element and style its contents. Of course this creates its own issues that would have to be dealt with - when to parse the code, how to reposition the caret and more. Depending on the approach, MutationObserver could come in handy.
Another way would be to not use any built-in writing functionalities at all and implement your own. Listen to keyboard events and programatically insert characters. In that case you would also need to implement your own caret, selection etc., which is not easy.
VS Code is open source, so you can actually take a look under the hood and see how the editor is made. They use a completely bespoke editor called Monaco but its source code is in the VS Code repo. This file is a good start.
I'm trying to use TUI Image Editor (https://github.com/nhn/tui.image-editor) in my Cordova app on Android.
It is based on Fabric.js and overall working reasonably, however I have major problems with the text annotation: If the edited text is in the lower part of the screen, the Android softkeyboard is covering the text input and doesn't scroll it into view. This also happens when I run the page in the normal Android Chrome browser.
Are there any recipes or examples how to get that working with Fabric.js?
I had the same problem, and I just avoided using the IText and Textbox objects. I just used the html input field and object with type Text in fabric.js without editing inside canvas, and editing inside input and changing text object to input value. Because if you will use the IText and Textbox objects, you will face problems with editing text on small texts, or text objects with a small scale, where editing inside canvas will be difficult and annoying.
If you still want to scroll to text object I can't give you a full solution. But I think you can use canvas events for text
canvas.on('text:editing:entered', (textObject) => {
// calculate canvas offset and textObject offset and scroll to this position
})
I am playing around various ways to try circumvent Cross-origin issues when loading (node, not img) SVG into a local html file. There's no reason I can't just simply use a web-server, but this is for fun/educational purposes.
So, current experiment is this: inside the SVG which is embedded via <object> tag, I have a script which makes a new <text> and writes the entire SVG there. The idea was to write it down, delete all other nodes and make a select-all copy the entire text in the window (it's a pop-up window) and then return to original HTML document to paste the text in and then make my inline SVG!
The parts I have working are all the way up to the 'select-all' piece. I know that we have the ability to select text out of a <textarea> with .select(), but inside of SVG that's not a thing. Now I'm stumped whether it's even possible to dispatch the Cmd+A keys , or anything, in order to get the browser to select-all.
Alternatively I can just change the .svg to '.txt' which would make my pop-up-copy strategy at least work past the select-all part, but if it takes post-processing my svg manually then it defeats the purpose of these experimentations!
Ideas welcome! :)
I've developed a shell (imitating the ubuntu terminal --> can only edit text after current prompt) by a PyQt QTextEdit.
The thing is when I select some text, the cursor moves as I'm selecting this text (so it disappers from the current command line) and I would like the cursor to stay where it is (only when I select text because I want it to move when I move it programmatically by textEdit.moveCursor(...)) at the same time I'm selecting the text.
Does anybody have any idea of how could I do that?
My solution for now, is to save the position at any change of it (except when it changes by a click), and when I copy some text en paste it, it'll be automatically pasted in the last position the cursor was before the click. That works perfectly but it's "ugly" for the user because, as I said, when he selects the text the cursor disappears of the current line and is where the user is selecting the text. Not like in ubuntu terminal.
Thanks in advance! And sorry for my english.
Adri
I don't see an easy solution to implement this with a text editor API. A terminal is a hack, basically. It mixes a read-only element (anything above the current prompt) with a text editor.
My approach would be to create two text editors, make one read only and display the results of all operations there. If you hide the borders of the two editors, then it will look like a single one. You may have to forward a bunch of events (like scrolling with the keyboard) to the read-only display.
I am developing xmpp-client app. One of the features is sending smiles and user should have ability to edit its like usuall text. Emoticons editing in Viber App is best example of what i want to implement.
I already tried three ways to solve problem:
I create emoticon like usual UIImageView and place it as a subview on UITextView using current caret rect. I use 5 whitespaces as a text placeholder in text view. There are two problems: with placing emoticons on new line when inserting text in the middle(printing whitespace not make caret move to new line); when user placing caret using magnify glass, he can move caret through emoticon(through 5 whitespaces), as delegate method not called during this process.
I have tried EGOTextView. There are problems with caret position and resizing when new line should be added. And there are some rendering artifacts when using it one line size.
I also have tried using UIWebView. But there were great problems with resizing based on text size and other artifacts with speed of response when becoming first responder.
May be some one could give me advice of really working solution?
Any suggestion please?
Thanks!