How to insert text into an Ace Editor instance as a comment - comments

I am building a website where I want to allow people to code in almost any language that the Ace editor supports. Right now I have it redirect if they try to load a language that either isn't supported by Ace, or that I didn't list in my supported languages. I only have a few languages that I allow to run (because I haven't got others to work or don't know how to), and for all those other languages that aren't run-supported, I want to load the Ace editor with a note saying that the language they loaded isn't supported for running, but I want it to be a comment in that language.
I tried inserting the text using editor.setValue([message], -1). Then set the focus on the editor using editor.focus(). Then I select all the text with editor.selectAll(). And then use the editor.toggleCommentLines() to make it a comment. For some reason this doesn't work, and I am not sure why.
I know that I could just look up how to write comment in each of the languages that I am allowing, and then convert the message into a comment before inserting it into the editor, but I want an easier way if possible.
Is there an easier way to do it? Or should I just do what I said that I could?
Since I answered my own question, I want to ask another to see if anyone has the answer for this:
When in the Ace editor you can press CTRL+/ to toggle line comments. But if you press CTRL+SHIFT+/ it will toggle multiline comments. I don't see a function for this in the Ace editor documentation but because it works with a keyboard shortcut, there must be a way to do it programmatically, right?
If someone could figure this out, that would be great!
a user found it! See his comment to see the answer to this part.

I was trying a few more things, and one of them was doing a setTimeout on the editor.toggleCommentLines(), and that worked. The timeout worked best if I used 150ms or higher (I started with 2000 just to see if it worked at all, and then slowly moved down).
So the following code works to automatically insert a message and comment it out:
const editor = ace.edit([element]);
editor.setValue([message], 0); // You can also leave the second parameter blank, 0 is the default which automatically selects all.
setTimeout(() => {
editor.toggleCommentLines();
}, 150); // 150ms or more works best
You may also notice that this method clears out 2 methods that I was previously using. There are two reasons for this:
When using 0 instead of -1 for the second parameter of editor.setValue() it selects all the text.
Because we are using the editor variable, the editor doesn't need to be in "focus".

Related

In Visual Studio Code, is it possible to Edit the MiniMap View with settings

I'm updating some legacy code, because of my unfamiliarity to it, Its very difficult to find structures, especially if I step away for a week for other projects.
To alleviate this problem I've gone back to my old-school roots and started adding ascii text-art as comments above sections of code, using this tool:
http://patorjk.com/software/taag/#p=display&h=3&v=1&f=Big%20Money-ne&t=Reveal%0ACheck
This allows me to see via my MiniMap the titles of functions or sections of code I might need to come back to
The Thought then occured.. well surely someone else has this problem, and since VSCode seems to be written by the community, maybe someone has already written a plugin that would search the code for function titles (like Javadocs?) and display the title in a readable size?
If not, would it be easily coded? i.e. is the minimap just a very shrunk down copy(not easy) or is it structured and can be parsed and tweaked?
As long as your language plugin supports it, you can use cmd + shift + o to go to function definition.
All functions should also be listed in the Side Bar under "Outline"

CPropertySheet: How to get the child page from OnDrawItem

I've added some code as found here Big problems with MFC/WinAPI to colour tab titles the same as the reset of the dialog, which works, but unfortunately all the tabs end up with the same name. This doesn't surprise me all that much as GetCurSel() is used to grab the text to use, and only one tab can currently be selected, but I'm struggling to see how you access the correct tab index from OnDrawItem().
I've googled and had a look on MSDN but don't see how anything passed to OnDrawItem lets you know which tab is currently being drawn, rather all the examples I've seen assume you're only interested in the one currently selected. All I want to do is something along the lines of GetWindowText() on the child window and redraw with that. I'm also unsure of the parent/child/sibling relationship between the sheet, tab control and page - it depends who you listen to.
I should probably add that I'm also unsure why all the tabs are redrawn when I select one. I don't know if this is normal or something specific to this implementation (that's something I'm looking at, but like seemingly everything else in this code base it's multiply inherited several times over ...).
Cheers for any help.
Not to worry, I now realise lpDrawItemStruct->itemID holds the tab index so I can get a handle to the tab using that.

ACE Editor -> Loaded script is highlighted by default

I am loading script into the Ace editor, and upon render, the entire script is highlighted as if someone did a ctrl+a (select all). How do make the contents "unselected" ... seems like it should work that way by default.
Based on documentation, it seems like I could workaround with:
session.getSelection().clearSelection();
... and based on this SO question, it seems I could also do this:
editor.setValue(str, -1) // moves cursor to the start
editor.setValue(str, 1) // moves cursor to the end
Neither work...
You may be able to remove some of the following, it's hard to say without seeing your code, but this should definitely cover it.
editor.setValue('hello world');
editor.clearSelection(1);
editor.gotoLine(1);
editor.getSession().setScrollTop(1);
editor.blur();
editor.focus();
I had the same problem, and I worked around it this way
editor.once('focus', function(){
editor.selection.clearSelection()
})
So it seems that in some cases the editor is not ready yet to accept the command.

Multiple synchronized CKEditor instances on the same page?

I'm working on a document-editing application using CKEditor, where the user can open multiple documents side-by-side in a pair of editor instances.
Most of the time, the user will be editing two different documents, but it's also possible that the two editor instances might contain different views of the same document. That makes things tricky, since I'd like to changes in one editor instance to be immediately reflected in the other instance.
Without hacking the CKEditor core, is something like that possible?
If not, would it be possible to write a plugin that would provide that kind of functionality?
What about if I was willing to get into the core code and hack around a bit? How difficult would it be?
This is a very similar case to a collaborative editing like Google Docs allows. The only differences are that you won't need to synchronize this via network and that it's very unlikely (if not impossible) that the same documents will be modified by two users at the same time. This makes things simpler... a little bit.
A year ago me and my colleague (we are both CKEditor core devs) took part in Node.JS Knockout and our plan was to create a collaborative editor based on CKEditor. It was only 48h, so the result is not impressive, but it worked. The source code is here.
The main problem you'll have is applying changes from editor A to editor B without breaking a caret position in editor B. Basically, you cannot just take data from editor A and set them in editor B, because everything in editor B will be reset including scroll position and caret. Unless this is not a problem, but I assume it is.
So you would need to:
either find a nice algorithm for extracting changes (like diff, but working on a DOM tree, not an HTML string) made in editor A and an algorithm to apply them to editor B (and this is what we implemented on Node.JS Knockout),
or find a way to guess caret position after resetting data in editor B; for example you can remember the caret context in editor B before setting data and try to find it in data that will be loaded.
Both ways are doable, but the first way will give better results if you'll implement it well. However, if your you don't know enough about DOM and contenteditable, then this task may overwhelm you. In this case I would advise to block possibility of opening one document twice.

Rich Edit Control: Prevent Rich Formatting?

How do you prevent the user from changing anything other than the text in a Win32 Rich Edit control?
(i.e. They shouldn't be able to change the formatting of any text, add graphics, etc.; if they copy-paste new text, only the text should be kept, and associated formatting should be discarded.)
I've never found a particularly elegant way to handle this: what I've done in the past is:
1) Catch WM_KEYDOWN messages for the control and discard all formatting keys (Ctrl+E,J,R,L,1,2,5,+, and Ctrl+Shift+A,7)
2) Catch all paste operations by catching WM_COMMAND messages with an id of ID_EDIT_PASTE, and replace the paste message with a message EM_PASTESPECIAL,CF_UNICODETEXT to the control. (This is with MFC: Depending on what framework or language you're using, this may require catching Ctrl+V and similar rather than ID_EDIT_PASTE.)
Not pretty, I conceed, but it seems to work.
This answer is probably a bit late but for anybody else looking for an answer to this questions, the best way that I've found have total control of paste operations in a Rich edit control is to provide an implementation of IRichEditOleCallback::QueryAcceptData and then return S_FALSE to stop them all together or to filter out certain clip board formats by changing the lpcfFormat parameter.
The CRichEditView::QueryAcceptData function in MFC provides an excellent example of how this can be done. This will work for all kinds of paste operations including drag and drop so is the best way to get full control of what happens.
Even later :)
SendMessage(wndEdit, EM_SETEDITSTYLE, SES_EMULATESYSEDIT, SES_EMULATESYSEDIT)
seems to do the trick: paste pastes plain text, and the formatting hot keys are disabled.
SES_EMULATESYSEDIT: When this bit is on, rich edit attempts to emulate the system edit control (default: 0).
You still retain some of the "bonus" features of the richedit, such as scrollbars on demand.
Note: While this will prevent the pasting of richly formatted text into the RichEdit control, it will also prevent you from programatically formatting the text; all rich formatting is disabled.

Resources