We Keep Coding

How to preserve colors when paste into Quill code-block?

I copy code from VSCode to Quill, it has a nice color scheme. But when I enable code-block, it becomes just dark and boring. Is there any way to preserve original colors?

The colorscheme you see in VSCode is what's called syntax highlighting, and its done dynamically, i.e. is procedural and only "exists" in VSCode as it reads that code and displays it to you in some kind of visual buffer.
Typically, when working with code snippets/markup/markdown and a clipboard which copies and pastes, its pretty much just the text. Code, like this html code you are working with here, is never what is called rich text. Mainly because rich text is already a kind of code! It is something which defines the bold and colored aspects of your text (or image uris, links, etc), that, when you see it in Word or your web browser, it is something that has been parsed as a code and turned into a presentation of formatted text (in a way, the entire history of software and/or application development revolves around this very idea, consider the history of WYSIWG).
For this reason, something like html markup existing in your IDE which is itself only a "representation" of html markup, would be quite a weird thing that would be complicated to handle, not to mention quite distressing ontologically in coding world.
What you need is something that will reproduce the same procedural syntax highlighting you see in VSCode within css/js within Quilljs, and... your in luck!
https://quilljs.com/docs/modules/syntax/
That seems to be what you need, and you can even configure it to the exact colors you like in VSCode with some patience. (Quill is using the highlight.js library internally, as the module description page notes, so thats why the config link is pointing to those docs.)

how to create a style selector in google closure editor

I wonder how difficult it is to create a working "style selector" selector in the goog closure editor similar to the one in tinymce.
I mean a selector of text styles such as
heading 1
heading 2
heading 3
paragraph
From the documentation I take that there's none available by default, even though there are slightly related default buttons such as bold etc. The logic for the pre-existing buttons I am aware of are provided in a plugin called basictextformatter.js.
I'm familiar with writing plugins and I would implement this using the .execCommandInternal function, and using the ToolbarFactory to create a selectButton.
But my issue is, do I really have to write all the logic from scratch, such as: how much text to enclose in the style selection if the selection is a caret, and removing previous styles on applying new selections, handling cross-browser tagging insonsistencies, displaying the selected style in the button and all of this?
As it seems to be a standard feature in many other editors, is there a chance I have just missed a pre-existing plugin function or other building blocks?
I'd be grateful for any hints for not re-inventing the wheel.

It sounds like you're referring to "plugins," which are objects you can inject into Google Closure's goog.editor.Field text editor. There are many standard plugins that are included in the Google Closure Library (bold, italicize, underline, make a link, etc), though you can always roll your own. For example, I had to make my own paste plugin that removed HTML formatting from pasted text.
After you pick out the plugins you want, you can then add buttons to the editor's toolbar which fire command events that those injected plugins listen to.
Here's a blog post that gives a much better explanation of how to actually set this up than I ever could here:
http://closuretools.blogspot.com/2010/07/introducing-closure-library-editor.html

Well I think I found the answer.
There's a plugin which is part of the lib called HeaderFormatter. It's unfortunately dependent on BasicFormatter plugin and doesn't seem to come with a default button (you have to create your own) - but looks exactly like it's the answer to this question.

making a text edit field

I am a beginner in HTML5, CSS3, and JavaScript. I reached my limit for the use of the trial version of Microsoft's OneNote. I like the program so much, I want to make an equivalent of it as an html version so I won't have to empty my pockets for the paid version.
The part I need help with is the part where you type in your notes. I don't know how to make a text edit field in html. Is it possible to do something like that? I would be satisfied if it could only do the same functions as note pad. Just so long as I am able to do the simple type and edit functions. Can someone show me how to code this or lead me to a site that teaches something like this?
Thanks! Tony.

There are plenty of solutions out there. Nicedit, CKEditor, etc. These all have a Rich text interface, and are javascript managed.
The simplest solution would be to just use a <textarea> which would allow for plain text input only.

The simplest way is to use the <textarea> tag in HTML. See this link too.

You can also use HTML5 Data caching to save your notes locally through your browser after implementing your textarea tags.
Here's a neat little plugin that should be relatively minor to install/use.
https://github.com/ekdevdes/storage.js

Is there a way to create your own HTML element?

Is there a way to create your own HTML element? I want to make a specially designed check box.
I imagine such a thing would be done in JavaScript. Something akin to document.createHTMLElement but the ability to design your own element (and tag).

No, there isn't.
The HTML elements are limited to what the browser will handle. That is to say, if you created a custom firefox plugin, and then had it handle your special tag, then you "could" do it, for varying interpretations of "doing it". A list of all elements for a particular version of HTML may be found here: http://www.w3.org/TR/html4/index/elements.html
Probably, however, you don't actually want to. If you want to "combine" several existing elements in such a way as they operate together, then you can do that very JavaScript. For example, if you'd like a checkbox to, when clicked, show a dropdown list somewhere, populated with various things, you may do that.
Perhaps you may like to elaborate on what you actually want to achieve, and we can help further.

Yes, you can create your own tags. You have to create a Schema and import it on your page, and write a JavaScript layer to convert your new tags into existing HTML tags.
An example is fbml (Facebook Markup Language), which includes a schema and a JavaScript layer that Facebook wrote. See this: Open Graph protocol.
Using it you can make a like button really easily:
<fb:like href="http://developers.facebook.com/" width="450" height="80"/>

The easiest way would be probably to write a plugin say in Jquery (or Dojo, MooTools, pick one).
In case of jQuery you can find some plugins here http://plugins.jquery.com/ and use them as a sample.

You need to write own doctype or/and use own namespace to do this.
http://msdn.microsoft.com/en-us/magazine/cc301515.aspx

No, there is not. Moreover it is not allowed in HTML5.
Take a look at Ample SDK JavaScript GUI library that enables any custom elements or event namespaces client-side (this way XUL for example was implemented there) without interferring with the rules of HTML5.
Take a look into for example how XUL scale element implemented: http://github.com/clientside/amplesdk/blob/master/ample/languages/xul/elements/scale.js and its default stylesheet: http://github.com/clientside/amplesdk/blob/master/ample/languages/xul/themes/default/input.css

It's a valid question, but I think the name of the game from the UI side is progressive markup. Build out valid w3 compliant tags and then style them appropriately with javascript (in my case Jquery or Dojo) and CSS. A well-written block of CSS can be reused over and over (my favorite case is Jquery UI with themeroller) and style nearly any element on the page with just a one or two-word addition to the class declaration.
Here's some good Jquery/Javascript/CSS solutions that are relatively simple:
http://www.filamentgroup.com/examples/customInput/
http://aaronweyenberg.com/90/pretty-checkboxes-with-jquery
http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/
Here's the spec for the upcoming (and promising) JqueryUI update for form elements:http://wiki.jqueryui.com/Checkbox
If you needed to validate input, this is an easy way to get inline validation with a single class or id tag: http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
Ok, so my solution isn't a 10 character, one line solution. However, Jquery Code aside, each individual tag wouldn't be much more than:
<input type="checkbox" id="theid">
So, while there would be a medium chunk of Jquery code, the individual elements would be very small, which is important if you're repeating it 250 times (programmatically) as my last project required. It's easy to code, degrades well, validates well, and because progressive markup would be on the user's end, have virtually no cost on the server end.
My current project is in Symfony--not my choice--which uses complex, bulky server-side tags to render form elements, validate, do javascript onclick, style, etc. This seems like what you were asking for at first....and let me tell you, it's CLUNKY. One tag to call a link can be 10 lines of code long! After being forced to do it, I'm not a fan.

Hm. The first thought is that you could create your own element and do a transformation with XSLT to the valid HTML then.

With the emergence of the emerging W3 Web Components standard, specifically the Custom Elements spec, you can now create your own custom HTML elements and register them with the parser with the document.register() DOM method.
X-Tag is a helpful sugar library, developed by Mozilla, that makes it even easier to work with Web Components, have a look: X-Tags.org

Rich Text Editor with Gmail style spell check

I am after a JavaScript Rich Text Editor that supports highlighting words and triggering events when those highlighted words are clicked, like what Gmail does when in spellcheck mode.
I will need to heavily customize any existing solution, so something that is easy to extend would be ideal. Currently I am leaning towards TinyMCE.

Richtextbox or HTML?
If it is HTML, then you should stick with TinyMCE. :
It's (very) easy to integrate
It works across browsers
The toolbars were easy to modify
Wordpress uses it!
For what its worth, we also looked at FCKEditor but preferred TinyMCE
UPDATE: While some users wanted it, spell checking has never been on the "essentials" list. It has always been quicker / cheaper for us to teach the handful of users how to use the spell checking features of IE, Firefox or Chrome instead of putting it in the editor.
Imagine trying to code the 3 been soup example!!!

TinyMCE seems to be the best one these days. You might want to take a look at FCKEditor and HTMLArea as well. You can find a list of such WYSIWYG HTML editors here.