Skip to content

Instantly share code, notes, and snippets.

View Reinmar's full-sized avatar
🚀
Hello!

Piotrek Koszuliński Reinmar

🚀
Hello!
View GitHub Profile
@Reinmar
Reinmar / html-editors.md
Created January 28, 2019 10:14 — forked from manigandham/rich-text-html-editors.md
Rich text / HTML editors and frameworks

Strictly Frameworks

Abstracted Editors

These use separate document structures instead of HTML, some are more modular libraries than full editors

  • ProseMirror - http://prosemirror.net/ - supports collaborative editing, offers similar options to Mobiledoc for data structure
@Reinmar
Reinmar / i18n.md
Last active January 10, 2017 15:05

Process

  1. We code the features using the t() functions in which we define the English value of a string (and, optionally, a context). E.g. t( 'Bold' ) or t( 'Button [context: clothing]' ) (the [context: clothing] will be automatically removed upon build on, in the dev mode, on runtime). Each context must be defined in lang/contexts.json of a package which uses it or in the ckeditor5-core/lang/contexts.json (for common strings).
  2. From time to time, we run a tool which scans code for all t() usages, extract strings from it, builds a contexts map (based on all lang/contexts.json files) and checks whether all used strings have defined contexts. Then builds a PO file with English strings and contexts and upload it to Transifex.
  3. Then we run a tool which downloads all PO files for all defined language and put them back in lang/ directories.
  4. When building an editor, a specific bundler read PO files and create translation map(s) for chosen language(s) based on them and bundles those as d
(master 041eec8) p@m /www/ckeditor5/ckeditor5-core> npm set progress=false
(master 041eec8) p@m /www/ckeditor5/ckeditor5-core> rm -rf ~/.npm && rm -rf node_modules/
(master 041eec8) p@m /www/ckeditor5/ckeditor5-core> time npm install
npm WARN deprecated [email protected]: lodash@<2.0.0 is no longer maintained. Upgrade to lodash@^3.0.0
npm WARN prefer global [email protected] should be installed with -g
> [email protected] postinstall /www/ckeditor5/ckeditor5-core/node_modules/guppy-pre-commit
> guppy pre-commit
guppy: Installed git-hook: /www/ckeditor5/ckeditor5-core/.git/hooks/pre-commit
This file has been truncated, but you can view the full file.
12006 silly mapToRegistry uri https://registry.npmjs.org/regjsparser
12007 verbose request uri https://registry.npmjs.org/regenerate
12008 verbose request no auth needed
12009 info attempt registry request try #1 at 11:18:29 PM
12010 verbose request using bearer token for auth
12011 verbose etag "5ON53K48516Y2UVNMVYERXQLI"
12012 http request GET https://registry.npmjs.org/regenerate
12013 verbose request uri https://registry.npmjs.org/regjsparser
12014 verbose request no auth needed
12015 info attempt registry request try #1 at 11:18:29 PM
# HEAD detached at 4.4.4
# Changes not staged for commit:
# (use "git add/rm <file>..." to update what will be committed)
# (use "git checkout -- <file>..." to discard changes in working directory)
#
# deleted: plugins/a11yhelp/dialogs/a11yhelp.js
# deleted: plugins/a11yhelp/dialogs/lang/_translationstatus.txt
# deleted: plugins/a11yhelp/dialogs/lang/ar.js
# deleted: plugins/a11yhelp/dialogs/lang/bg.js
# deleted: plugins/a11yhelp/dialogs/lang/ca.js

Reasons why it doesn't make sense to make jQuery CKEditor's dependency

  1. CKEditor would use very limited part of jQuery - only basic DOM methods, some tools maybe.
  2. CKEditor needs very specific DOM methods. The vast majority of features implemented in CKEDITOR.dom.* are not available in jQuery. Huge range API, walker, iterator, editing-specific DOM traversal methods, etc. (really - >75% of dom.*) - all of that would have to be implemented.
  3. I don't know how jQuery's API can be extended, but I guess that CKEditor's extensions would look ridiculous. Overall effect could not be good.
  4. CKEditor deals with extreme browser bugs (contenteditable FTW!) and very uncommon DOM operations and algorithms, so even existing jQuery's features may not be suitable in some cases. Currently we have full control over methods' implementation, so we may introduce necessary tweaks.
  5. CKEditor rarely works on collections of elements - jQuery API's biggest feature would not be consumed. Moreover - it would be a perfo

TL;DR I'm a CKEditor core dev, I watched http://vimeo.com/76219173 in which CKEditor was mentioned, I'm sad now.

Disclaimer: I am a CKEditor core developer since January 2012, so I've been working nearly exclusively with contenteditable for almost two years. That made me an expert in some of fields that WYSIWYG editor deals with and gave me a decent knowledge about the rest. Although, my opinion may be biased.

I watched the video from "contenteditable: Roll for sanity" presentation by Garann Means with great interest. The contenteditable feature is a base for all WYSIWYG editors (except those with completely custom rendering system like Google Docs), but is not popular and most web developers have no idea about such thing (what on the other hand does not surprise me). What's more, those who stumble upon it quite often fall into the standard trap:

Hey, we just met and this is crazy, but we've got few hours so let's create a new WYSIWYG editor maybe!

This approach to web devel

@Reinmar
Reinmar / clipboardData.html
Last active December 19, 2015 22:28
Clipboard data taken from Chrome's (Blink's) implementation of W3C's Clipboard API. Two paragraphs were copied and pasted in the same location...
<p style="color: rgb(51, 51, 51); font-family: sans-serif, Arial, Verdana, 'Trebuchet MS'; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20.796875px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px;">This is some<span class="Apple-converted-space"> </span><strong>sample text</strong>. You are using CKEditor.</p>
<p style="color: rgb(51, 51, 51); font-family: sans-serif, Arial, Verdana, 'Trebuchet MS'; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20.796875px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px;">WTF...</p>
CKTESTER.editor = { config : { autoParagraph : false } };
CKTESTER.test(
{
test_a : function()
{
var editor = this.editor,
editable = editor.editable();
editable.setHtml( 'abcdef' );
@Reinmar
Reinmar / gist:1452344
Created December 9, 2011 16:52
JS ninja
// I've just found shit like this:
var sth =
option.type == 't1'
? v1
: option.type == 't2'
? v2
: option.type == 't3'
? v3
: null;