ckeditor5-image-upload-base64
Version:
The development environment of CKEditor 5 – the best browser-based rich text editor.
5,255 lines • 446 kB
HTML
<div class="position-relative js-header-wrapper " style="box-sizing: border-box; position: relative !important; color: rgb(36, 41, 46); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> <header class="Header-old header-logged-out position-relative f4 py-2" role="banner" style="box-sizing: border-box; display: block; position: relative !important; padding-top: 8px !important; padding-bottom: 8px !important; font-size: 16px !important; z-index: 32; color: rgba(255, 255, 255, 0.7); background-color: rgb(36, 41, 46);"> <div class="container-lg d-flex px-3" style="box-sizing: border-box; max-width: 1012px; margin-right: auto; margin-left: auto; padding-left: 16px !important; padding-right: 16px !important; display: flex !important;"> <div class="HeaderMenu HeaderMenu--logged-out d-flex flex-justify-between flex-items-center flex-auto" style="box-sizing: border-box; justify-content: space-between !important; align-items: center !important; flex: 1 1 auto !important; display: flex !important;"> <div class="d-flex flex-items-center px-0 text-center text-left" style="box-sizing: border-box; align-items: center !important; padding-left: 0px !important; padding-right: 0px !important; text-align: center !important; display: flex !important;"> <a class="HeaderMenu-link d-inline-block no-underline border border-gray-dark rounded-1 px-2 py-1" data-ga-click="(Logged out) Header, clicked Sign up, text:sign-up" href="https://github.com/join?source_repo=ckeditor%2Fckeditor5" style="box-sizing: border-box; background: transparent; color: rgb(255, 255, 255); text-decoration: none !important; border: 1px solid rgb(209, 213, 218) !important; border-radius: 3px !important; padding: 4px 8px !important; display: inline-block !important; transition: all 0.4s ease 0s;">Sign up</a> </div> </div> </div> </header> </div> <div class="show-on-focus" id="start-of-content" style="box-sizing: border-box; position: absolute; width: 1px; height: 1px; overflow: hidden; margin: 0px; clip: rect(1px, 1px, 1px, 1px); color: rgb(36, 41, 46); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> </div> <div id="js-flash-container" style="box-sizing: border-box; color: rgb(36, 41, 46); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> </div> <div class="application-main " data-commit-hovercards-enabled="" style="box-sizing: border-box; color: rgb(36, 41, 46); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> <div itemscope="" itemtype="http://schema.org/SoftwareSourceCode" style="box-sizing: border-box;"> <main data-pjax-container="" id="js-repo-pjax-container" style="box-sizing: border-box; display: block;"> <div class="pagehead repohead readability-menu experiment-repo-nav pt-3 pb-0" style="box-sizing: border-box; padding-bottom: 0px; padding-top: 24px; position: relative; margin-bottom: 24px; border-bottom: 1px solid rgb(225, 228, 232); background-color: rgb(250, 251, 252);"> <div class="container-lg mb-4 px-3 d-flex" style="box-sizing: border-box; max-width: 1012px; margin-right: auto; margin-left: auto; margin-bottom: 24px !important; padding-left: 16px !important; padding-right: 16px !important; display: flex !important;"> <div class="flex-auto min-width-0 width-fit mr-3" style="box-sizing: border-box; flex: 1 1 auto !important; max-width: 100%; min-width: 0px !important; margin-right: 16px !important;"> <h1 class="public d-flex flex-wrap flex-items-center break-word float-none" style="box-sizing: border-box; font-size: 18px; margin: 0px; font-weight: 400; flex-wrap: wrap !important; align-items: center !important; float: none !important; word-break: break-word !important; overflow-wrap: break-word !important; display: flex !important; line-height: 26px; position: relative; max-width: 635px; color: rgb(88, 96, 105);"> <svg aria-hidden="true" class="octicon octicon-repo mr-1" height="16" version="1.1" viewbox="0 0 12 16" width="12"> <path d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z" fill-rule="evenodd"> </path> </svg><span class="author" itemprop="author" style="box-sizing: border-box;"><a class="url fn" data-hovercard-type="organization" data-hovercard-url="/orgs/ckeditor/hovercard" href="https://github.com/ckeditor" rel="author" style="box-sizing: border-box; background-color: initial; color: rgb(3, 102, 214); text-decoration: none;">ckeditor</a></span><span class="path-divider" style="box-sizing: border-box; margin: 0px 0.25em;">/</span><strong class="mr-2" itemprop="name" style="box-sizing: border-box; font-weight: 600; margin-right: 8px !important;"><a data-pjax="#js-repo-pjax-container" href="https://github.com/ckeditor/ckeditor5" style="box-sizing: border-box; background-color: initial; color: rgb(3, 102, 214); text-decoration: none;">ckeditor5</a></strong> </h1> </div> <ul class="pagehead-actions flex-shrink-0" style="box-sizing: border-box; padding-left: 0px; margin: 0px; flex-shrink: 0 !important; position: relative; z-index: 31; float: right;"> <li style="box-sizing: border-box; float: left; margin: 0px 10px 0px 0px; font-size: 11px; color: rgb(36, 41, 46); list-style-type: none;"> <a aria-label="You must be signed in to watch a repository" class="tooltipped tooltipped-s btn btn-sm btn-with-count" href="https://github.com/login?return_to=%2Fckeditor%2Fckeditor5" rel="nofollow" style="box-sizing: border-box; background-color: rgb(239, 243, 246); color: rgb(36, 41, 46); text-decoration: none; position: relative; display: inline-block; padding: 3px 10px; font-size: 12px; font-weight: 600; line-height: 20px; white-space: nowrap; vertical-align: middle; cursor: pointer; user-select: none; background-repeat: repeat-x; background-position: -1px -1px; background-size: 110% 110%; border: 1px solid rgba(27, 31, 35, 0.2); border-radius: 0.25em 0px 0px 0.25em; -webkit-appearance: none; background-image: linear-gradient(-180deg, rgb(250, 251, 252), rgb(239, 243, 246) 90%); float: left;"><svg aria-hidden="true" class="octicon octicon-eye v-align-text-bottom" height="16" version="1.1" viewbox="0 0 16 16" width="16"> <path d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z" fill-rule="evenodd"> </path> </svg><span> </span>Watch</a><a aria-label="119 users are watching this repository" class="social-count" href="https://github.com/ckeditor/ckeditor5/watchers" style="box-sizing: border-box; background-color: rgb(255, 255, 255); color: rgb(36, 41, 46); text-decoration: none; float: left; padding: 3px 10px; font-size: 12px; font-weight: 600; line-height: 20px; vertical-align: middle; border-width: 1px 1px 1px 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-top-color: rgba(27, 31, 35, 0.2); border-right-color: rgba(27, 31, 35, 0.2); border-bottom-color: rgba(27, 31, 35, 0.2); border-image: initial; border-left-style: initial; border-left-color: initial; border-top-right-radius: 3px; border-bottom-right-radius: 3px;">119</a> </li> <li style="box-sizing: border-box; float: left; margin: 0px 10px 0px 0px; font-size: 11px; color: rgb(36, 41, 46); list-style-type: none;"> <a aria-label="You must be signed in to star a repository" class="btn btn-sm btn-with-count tooltipped tooltipped-s" href="https://github.com/login?return_to=%2Fckeditor%2Fckeditor5" rel="nofollow" style="box-sizing: border-box; background-color: rgb(239, 243, 246); color: rgb(36, 41, 46); text-decoration: none; position: relative; display: inline-block; padding: 3px 10px; font-size: 12px; font-weight: 600; line-height: 20px; white-space: nowrap; vertical-align: middle; cursor: pointer; user-select: none; background-repeat: repeat-x; background-position: -1px -1px; background-size: 110% 110%; border: 1px solid rgba(27, 31, 35, 0.2); border-radius: 0.25em 0px 0px 0.25em; -webkit-appearance: none; background-image: linear-gradient(-180deg, rgb(250, 251, 252), rgb(239, 243, 246) 90%); float: left;"><svg aria-label="star" class="octicon octicon-star v-align-text-bottom" height="16" role="img" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z" fill-rule="evenodd"> </path> </svg><span> </span>Star</a><a aria-label="3004 users starred this repository" class="social-count js-social-count" href="https://github.com/ckeditor/ckeditor5/stargazers" style="box-sizing: border-box; background-color: rgb(255, 255, 255); color: rgb(36, 41, 46); text-decoration: none; float: left; padding: 3px 10px; font-size: 12px; font-weight: 600; line-height: 20px; vertical-align: middle; border-width: 1px 1px 1px 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-top-color: rgba(27, 31, 35, 0.2); border-right-color: rgba(27, 31, 35, 0.2); border-bottom-color: rgba(27, 31, 35, 0.2); border-image: initial; border-left-style: initial; border-left-color: initial; border-top-right-radius: 3px; border-bottom-right-radius: 3px;">3k</a> </li> <li style="box-sizing: border-box; float: left; margin: 0px; font-size: 11px; color: rgb(36, 41, 46); list-style-type: none;"> <a aria-label="You must be signed in to fork a repository" class="btn btn-sm btn-with-count tooltipped tooltipped-s" href="https://github.com/login?return_to=%2Fckeditor%2Fckeditor5" rel="nofollow" style="box-sizing: border-box; background-color: rgb(239, 243, 246); color: rgb(36, 41, 46); text-decoration: none; position: relative; display: inline-block; padding: 3px 10px; font-size: 12px; font-weight: 600; line-height: 20px; white-space: nowrap; vertical-align: middle; cursor: pointer; user-select: none; background-repeat: repeat-x; background-position: -1px -1px; background-size: 110% 110%; border: 1px solid rgba(27, 31, 35, 0.2); border-radius: 0.25em 0px 0px 0.25em; -webkit-appearance: none; background-image: linear-gradient(-180deg, rgb(250, 251, 252), rgb(239, 243, 246) 90%); float: left;"><svg aria-hidden="true" class="octicon octicon-repo-forked v-align-text-bottom" height="16" version="1.1" viewbox="0 0 10 16" width="10"> <path d="M8 1a1.993 1.993 0 00-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 002 1a1.993 1.993 0 00-1 3.72V6.5l3 3v1.78A1.993 1.993 0 005 15a1.993 1.993 0 001-3.72V9.5l3-3V4.72A1.993 1.993 0 008 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z" fill-rule="evenodd"> </path> </svg><span> </span>Fork</a><a aria-label="635 users forked this repository" class="social-count" href="https://github.com/ckeditor/ckeditor5/network/members" style="box-sizing: border-box; background-color: rgb(255, 255, 255); color: rgb(36, 41, 46); text-decoration: none; float: left; padding: 3px 10px; font-size: 12px; font-weight: 600; line-height: 20px; vertical-align: middle; border-width: 1px 1px 1px 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-top-color: rgba(27, 31, 35, 0.2); border-right-color: rgba(27, 31, 35, 0.2); border-bottom-color: rgba(27, 31, 35, 0.2); border-image: initial; border-left-style: initial; border-left-color: initial; border-top-right-radius: 3px; border-bottom-right-radius: 3px;">635</a> </li> </ul> </div> <nav aria-label="Repository" class="hx_reponav reponav js-repo-nav js-sidenav-container-pjax clearfix container-lg px-3" data-pjax="#js-repo-pjax-container" itemscope="" itemtype="http://schema.org/BreadcrumbList" style="box-sizing: border-box; display: block; max-width: 1012px; margin-right: auto; margin-left: auto; padding-left: 16px !important; padding-right: 16px !important; position: relative; top: 1px; margin-top: -5px;"> <div class="d-inline" style="box-sizing: border-box; display: inline !important;"><span itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" style="box-sizing: border-box;"><a class="js-selected-navigation-item reponav-item" data-hotkey="g c" data-selected-links="repo_source repo_downloads repo_commits repo_releases repo_tags repo_branches repo_packages /ckeditor/ckeditor5" href="https://github.com/ckeditor/ckeditor5" itemprop="url" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105); text-decoration: none; float: left; padding: 7px 12px 8px !important; white-space: nowrap; border-width: 3px 1px 1px; border-style: solid; border-color: transparent; border-image: initial; border-radius: 3px 3px 0px 0px;"><svg aria-hidden="true" class="octicon octicon-code" height="16" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3zm-5 0L0 8l4.5 5L6 11.5 2.5 8 6 4.5 4.5 3z" fill-rule="evenodd"> </path> </svg></a></span></div> <span itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" style="box-sizing: border-box;"><a class="js-selected-navigation-item reponav-item" data-hotkey="g c" data-selected-links="repo_source repo_downloads repo_commits repo_releases repo_tags repo_branches repo_packages /ckeditor/ckeditor5" href="https://github.com/ckeditor/ckeditor5" itemprop="url" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105); text-decoration: none; float: left; padding: 7px 12px 8px !important; white-space: nowrap; border-width: 3px 1px 1px; border-style: solid; border-color: transparent; border-image: initial; border-radius: 3px 3px 0px 0px;"><span> </span><span itemprop="name" style="box-sizing: border-box;">Code</span> </a></span><span itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" style="box-sizing: border-box;"><a aria-current="page" class="js-selected-navigation-item selected reponav-item" data-hotkey="g i" data-selected-links="repo_issues repo_labels repo_milestones /ckeditor/ckeditor5/issues" href="https://github.com/ckeditor/ckeditor5/issues" itemprop="url" style="box-sizing: border-box; background-color: rgb(255, 255, 255); color: rgb(36, 41, 46); text-decoration: none; float: left; padding: 7px 12px 8px !important; white-space: nowrap; border-width: 3px 1px 1px; border-style: solid; border-color: rgb(227, 98, 9) rgb(225, 228, 232) transparent; border-image: initial; border-radius: 3px 3px 0px 0px;"> </a></span> <div class="d-inline" style="box-sizing: border-box; display: inline !important;"><span itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" style="box-sizing: border-box;"><a aria-current="page" class="js-selected-navigation-item selected reponav-item" data-hotkey="g i" data-selected-links="repo_issues repo_labels repo_milestones /ckeditor/ckeditor5/issues" href="https://github.com/ckeditor/ckeditor5/issues" itemprop="url" style="box-sizing: border-box; background-color: rgb(255, 255, 255); color: rgb(36, 41, 46); text-decoration: none; float: left; padding: 7px 12px 8px !important; white-space: nowrap; border-width: 3px 1px 1px; border-style: solid; border-color: rgb(227, 98, 9) rgb(225, 228, 232) transparent; border-image: initial; border-radius: 3px 3px 0px 0px;"><svg aria-hidden="true" class="octicon octicon-issue-opened" height="16" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 011.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z" fill-rule="evenodd"> </path> </svg></a></span></div> <span itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" style="box-sizing: border-box;"><a aria-current="page" class="js-selected-navigation-item selected reponav-item" data-hotkey="g i" data-selected-links="repo_issues repo_labels repo_milestones /ckeditor/ckeditor5/issues" href="https://github.com/ckeditor/ckeditor5/issues" itemprop="url" style="box-sizing: border-box; background-color: rgb(255, 255, 255); color: rgb(36, 41, 46); text-decoration: none; float: left; padding: 7px 12px 8px !important; white-space: nowrap; border-width: 3px 1px 1px; border-style: solid; border-color: rgb(227, 98, 9) rgb(225, 228, 232) transparent; border-image: initial; border-radius: 3px 3px 0px 0px;"><span> </span><span itemprop="name" style="box-sizing: border-box;">Issues</span><span> </span><span class="Counter" style="box-sizing: border-box; display: inline-block; padding: 2px 4px !important; font-size: 12px; font-weight: 600; line-height: 1; color: rgb(68, 77, 86); background-color: rgba(27, 31, 35, 0.08); border-radius: 20px;">1,175</span> </a></span><span itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" style="box-sizing: border-box;"><a class="js-selected-navigation-item reponav-item" data-hotkey="g p" data-selected-links="repo_pulls checks /ckeditor/ckeditor5/pulls" data-skip-pjax="true" href="https://github.com/ckeditor/ckeditor5/pulls" itemprop="url" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105); text-decoration: none; float: left; padding: 7px 12px 8px !important; white-space: nowrap; border-width: 3px 1px 1px; border-style: solid; border-color: transparent; border-image: initial; border-radius: 3px 3px 0px 0px;"> </a></span> <div class="d-inline" style="box-sizing: border-box; display: inline !important;"><span itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" style="box-sizing: border-box;"><a class="js-selected-navigation-item reponav-item" data-hotkey="g p" data-selected-links="repo_pulls checks /ckeditor/ckeditor5/pulls" data-skip-pjax="true" href="https://github.com/ckeditor/ckeditor5/pulls" itemprop="url" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105); text-decoration: none; float: left; padding: 7px 12px 8px !important; white-space: nowrap; border-width: 3px 1px 1px; border-style: solid; border-color: transparent; border-image: initial; border-radius: 3px 3px 0px 0px;"><svg aria-hidden="true" class="octicon octicon-git-pull-request" height="16" version="1.1" viewbox="0 0 12 16" width="12"> <path d="M11 11.28V5c-.03-.78-.34-1.47-.94-2.06C9.46 2.35 8.78 2.03 8 2H7V0L4 3l3 3V4h1c.27.02.48.11.69.31.21.2.3.42.31.69v6.28A1.993 1.993 0 0010 15a1.993 1.993 0 001-3.72zm-1 2.92c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zM4 3c0-1.11-.89-2-2-2a1.993 1.993 0 00-1 3.72v6.56A1.993 1.993 0 002 15a1.993 1.993 0 001-3.72V4.72c.59-.34 1-.98 1-1.72zm-.8 10c0 .66-.55 1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z" fill-rule="evenodd"> </path> </svg></a></span></div> <span itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" style="box-sizing: border-box;"><a class="js-selected-navigation-item reponav-item" data-hotkey="g p" data-selected-links="repo_pulls checks /ckeditor/ckeditor5/pulls" data-skip-pjax="true" href="https://github.com/ckeditor/ckeditor5/pulls" itemprop="url" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105); text-decoration: none; float: left; padding: 7px 12px 8px !important; white-space: nowrap; border-width: 3px 1px 1px; border-style: solid; border-color: transparent; border-image: initial; border-radius: 3px 3px 0px 0px;"><span> </span><span itemprop="name" style="box-sizing: border-box;">Pull requests</span><span> </span><span class="Counter" style="box-sizing: border-box; display: inline-block; padding: 2px 4px !important; font-size: 12px; font-weight: 600; line-height: 1; color: rgb(68, 77, 86); background-color: rgba(27, 31, 35, 0.08); border-radius: 20px;">6</span> </a></span><span class="position-relative float-left" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" style="box-sizing: border-box; position: relative !important; float: left !important;"><a class="js-selected-navigation-item reponav-item" data-hotkey="g w" data-selected-links="repo_actions /ckeditor/ckeditor5/actions" data-skip-pjax="true" href="https://github.com/ckeditor/ckeditor5/actions" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105); text-decoration: none; float: left; padding: 7px 12px 8px !important; white-space: nowrap; border-width: 3px 1px 1px; border-style: solid; border-color: transparent; border-image: initial; border-radius: 3px 3px 0px 0px;"> </a></span> <div class="d-inline" style="box-sizing: border-box; display: inline !important;"><span class="position-relative float-left" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" style="box-sizing: border-box; position: relative !important; float: left !important;"><a class="js-selected-navigation-item reponav-item" data-hotkey="g w" data-selected-links="repo_actions /ckeditor/ckeditor5/actions" data-skip-pjax="true" href="https://github.com/ckeditor/ckeditor5/actions" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105); text-decoration: none; float: left; padding: 7px 12px 8px !important; white-space: nowrap; border-width: 3px 1px 1px; border-style: solid; border-color: transparent; border-image: initial; border-radius: 3px 3px 0px 0px;"><svg aria-hidden="true" class="octicon octicon-play" height="16" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M14 8A7 7 0 110 8a7 7 0 0114 0zm-8.223 3.482l4.599-3.066a.5.5 0 000-.832L5.777 4.518A.5.5 0 005 4.934v6.132a.5.5 0 00.777.416z" fill-rule="evenodd"> </path> </svg></a></span></div> <span class="position-relative float-left" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" style="box-sizing: border-box; position: relative !important; float: left !important;"><a class="js-selected-navigation-item reponav-item" data-hotkey="g w" data-selected-links="repo_actions /ckeditor/ckeditor5/actions" data-skip-pjax="true" href="https://github.com/ckeditor/ckeditor5/actions" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105); text-decoration: none; float: left; padding: 7px 12px 8px !important; white-space: nowrap; border-width: 3px 1px 1px; border-style: solid; border-color: transparent; border-image: initial; border-radius: 3px 3px 0px 0px;"><span> </span>Actions </a></span><a class="js-selected-navigation-item reponav-item" data-hotkey="g w" data-selected-links="repo_wiki /ckeditor/ckeditor5/wiki" href="https://github.com/ckeditor/ckeditor5/wiki" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105); text-decoration: none; float: left; padding: 7px 12px 8px !important; white-space: nowrap; border-width: 3px 1px 1px; border-style: solid; border-color: transparent; border-image: initial; border-radius: 3px 3px 0px 0px;"> </a> <div class="d-inline" style="box-sizing: border-box; display: inline !important;"><a class="js-selected-navigation-item reponav-item" data-hotkey="g w" data-selected-links="repo_wiki /ckeditor/ckeditor5/wiki" href="https://github.com/ckeditor/ckeditor5/wiki" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105); text-decoration: none; float: left; padding: 7px 12px 8px !important; white-space: nowrap; border-width: 3px 1px 1px; border-style: solid; border-color: transparent; border-image: initial; border-radius: 3px 3px 0px 0px;"><svg aria-hidden="true" class="octicon octicon-book" height="16" version="1.1" viewbox="0 0 16 16" width="16"> <path d="M3 5h4v1H3V5zm0 3h4V7H3v1zm0 2h4V9H3v1zm11-5h-4v1h4V5zm0 2h-4v1h4V7zm0 2h-4v1h4V9zm2-6v9c0 .55-.45 1-1 1H9.5l-1 1-1-1H2c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h5.5l1 1 1-1H15c.55 0 1 .45 1 1zm-8 .5L7.5 3H2v9h6V3.5zm7-.5H9.5l-.5.5V12h6V3z" fill-rule="evenodd"> </path> </svg></a></div> <a class="js-selected-navigation-item reponav-item" data-hotkey="g w" data-selected-links="repo_wiki /ckeditor/ckeditor5/wiki" href="https://github.com/ckeditor/ckeditor5/wiki" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105); text-decoration: none; float: left; padding: 7px 12px 8px !important; white-space: nowrap; border-width: 3px 1px 1px; border-style: solid; border-color: transparent; border-image: initial; border-radius: 3px 3px 0px 0px;"><span> </span>Wiki </a><a class="js-selected-navigation-item reponav-item" data-selected-links="security alerts policy token_scanning code_scanning /ckeditor/ckeditor5/security/advisories" data-skip-pjax="true" href="https://github.com/ckeditor/ckeditor5/security/advisories" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105); text-decoration: none; float: left; padding: 7px 12px 8px !important; white-space: nowrap; border-width: 3px 1px 1px; border-style: solid; border-color: transparent; border-image: initial; border-radius: 3px 3px 0px 0px;"> </a> <div class="d-inline" style="box-sizing: border-box; display: inline !important;"><a class="js-selected-navigation-item reponav-item" data-selected-links="security alerts policy token_scanning code_scanning /ckeditor/ckeditor5/security/advisories" data-skip-pjax="true" href="https://github.com/ckeditor/ckeditor5/security/advisories" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105); text-decoration: none; float: left; padding: 7px 12px 8px !important; white-space: nowrap; border-width: 3px 1px 1px; border-style: solid; border-color: transparent; border-image: initial; border-radius: 3px 3px 0px 0px;"><svg aria-hidden="true" class="octicon octicon-shield" height="16" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M0 2l7-2 7 2v6.02C14 12.69 8.69 16 7 16c-1.69 0-7-3.31-7-7.98V2zm1 .75L7 1l6 1.75v5.268C13 12.104 8.449 15 7 15c-1.449 0-6-2.896-6-6.982V2.75zm1 .75L7 2v12c-1.207 0-5-2.482-5-5.985V3.5z" fill-rule="evenodd"> </path> </svg></a></div> <a class="js-selected-navigation-item reponav-item" data-selected-links="security alerts policy token_scanning code_scanning /ckeditor/ckeditor5/security/advisories" data-skip-pjax="true" href="https://github.com/ckeditor/ckeditor5/security/advisories" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105); text-decoration: none; float: left; padding: 7px 12px 8px !important; white-space: nowrap; border-width: 3px 1px 1px; border-style: solid; border-color: transparent; border-image: initial; border-radius: 3px 3px 0px 0px;"><span> </span>Security </a><a class="js-selected-navigation-item reponav-item" data-selected-links="repo_graphs repo_contributors dependency_graph pulse people /ckeditor/ckeditor5/pulse" href="https://github.com/ckeditor/ckeditor5/pulse" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105); text-decoration: none; float: left; padding: 7px 12px 8px !important; white-space: nowrap; border-width: 3px 1px 1px; border-style: solid; border-color: transparent; border-image: initial; border-radius: 3px 3px 0px 0px;"> </a> <div class="d-inline" style="box-sizing: border-box; display: inline !important;"><a class="js-selected-navigation-item reponav-item" data-selected-links="repo_graphs repo_contributors dependency_graph pulse people /ckeditor/ckeditor5/pulse" href="https://github.com/ckeditor/ckeditor5/pulse" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105); text-decoration: none; float: left; padding: 7px 12px 8px !important; white-space: nowrap; border-width: 3px 1px 1px; border-style: solid; border-color: transparent; border-image: initial; border-radius: 3px 3px 0px 0px;"><svg aria-hidden="true" class="octicon octicon-graph" height="16" version="1.1" viewbox="0 0 16 16" width="16"> <path d="M16 14v1H0V0h1v14h15zM5 13H3V8h2v5zm4 0H7V3h2v10zm4 0h-2V6h2v7z" fill-rule="evenodd"></path> </svg></a></div> <a class="js-selected-navigation-item reponav-item" data-selected-links="repo_graphs repo_contributors dependency_graph pulse people /ckeditor/ckeditor5/pulse" href="https://github.com/ckeditor/ckeditor5/pulse" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105); text-decoration: none; float: left; padding: 7px 12px 8px !important; white-space: nowrap; border-width: 3px 1px 1px; border-style: solid; border-color: transparent; border-image: initial; border-radius: 3px 3px 0px 0px;"><span> </span>Insights </a> </nav> </div> <div class="container-lg clearfix new-discussion-timeline experiment-repo-nav px-3" style="box-sizing: border-box; max-width: 1012px; margin-right: auto; margin-left: auto; padding-left: 16px !important; padding-right: 16px !important;"> <div class="repository-content " style="box-sizing: border-box;"> <div class="js-check-all-container" data-pjax="" style="box-sizing: border-box;"> <div class="js-pinned-issues-reorder-container" style="box-sizing: border-box;"> <h2 class="f4 mb-2 text-normal" style="box-sizing: border-box; margin-top: 0px; margin-bottom: 8px !important; font-weight: 400 !important; font-size: 16px !important;"> Pinned issues</h2> <div class="container-lg" style="box-sizing: border-box; max-width: 1012px; margin-right: auto; margin-left: auto;"> <div class="pl-3 d-flex gutter js-pinned-issues-reorder-list" style="box-sizing: border-box; margin-right: -16px; margin-left: -16px; padding-left: 16px !important; display: flex !important;"> <div class="pinned-issue-item d-flex flex-column col-4 p-2 mr-3 border border-gray-dark rounded-1 js-pinned-issue-list-item mb-3" style="box-sizing: border-box; width: 331.994px; border: 1px solid rgb(209, 213, 218) !important; border-radius: 3px !important; flex-direction: column !important; margin-right: 16px !important; margin-bottom: 16px !important; padding: 8px 16px !important; display: flex !important;"> <span class="d-block position-relative" style="box-sizing: border-box; position: relative !important; display: block !important;"><a class="link-gray-dark no-underline h4" href="https://github.com/ckeditor/ckeditor5/issues/5909" style="box-sizing: border-box; background-color: initial; color: rgb(36, 41, 46) !important; text-decoration: none !important; font-size: 16px !important; font-weight: 600 !important;"><span style="box-sizing: border-box;" title="📃 Iteration 29 roadmap 📃">📃 Iteration 29 roadmap 📃</span></a></span> <div class="mt-1 text-small text-gray pinned-item-desc" style="box-sizing: border-box; color: rgb(88, 96, 105) !important; margin-top: 4px !important; font-size: 12px !important; flex: 1 0 auto;"> <span class="opened-by" style="box-sizing: border-box;">#5909 opened<span> </span> <relative-time class="no-wrap" datetime="2019-12-05T09:13:05Z" style="box-sizing: border-box; white-space: nowrap !important;" title="Dec 5, 2019, 10:13 AM GMT+1"> on Dec 5, 2019</relative-time> <span> </span>by<span> </span><a class="muted-link" data-hovercard-type="user" data-hovercard-url="/users/mlewand/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+author%3Amlewand" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;" title="Open issues created by mlewand">mlewand</a> </span></div> <span class="mt-1" style="box-sizing: border-box; margin-top: 4px !important;"><svg aria-hidden="true" class="octicon octicon-issue-opened open" height="16" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 011.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z" fill-rule="evenodd"> </path> </svg><span> </span><span class="text-gray text-small mr-3" style="box-sizing: border-box; color: rgb(88, 96, 105) !important; margin-right: 16px !important; font-size: 12px !important;">Open</span><span> </span><a aria-label="3 comments" class="muted-link" href="https://github.com/ckeditor/ckeditor5/issues/5909" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;"><svg aria-hidden="true" class="octicon octicon-comment v-align-middle" height="16" version="1.1" viewbox="0 0 16 16" width="16"> <path d="M14 1H2c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h2v3.5L7.5 11H14c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zm0 9H7l-2 2v-2H2V2h12v8z" fill-rule="evenodd"> </path> </svg><span> </span><span class="text-small" style="box-sizing: border-box; font-size: 12px !important;">3</span></a></span> </div> <div class="pinned-issue-item d-flex flex-column col-4 p-2 mr-3 border border-gray-dark rounded-1 js-pinned-issue-list-item mb-3" style="box-sizing: border-box; width: 331.994px; border: 1px solid rgb(209, 213, 218) !important; border-radius: 3px !important; flex-direction: column !important; margin-right: 16px !important; margin-bottom: 16px !important; padding: 8px 16px !important; display: flex !important;"> <span class="d-block position-relative" style="box-sizing: border-box; position: relative !important; display: block !important;"><a class="link-gray-dark no-underline h4" href="https://github.com/ckeditor/ckeditor5/issues/5653" style="box-sizing: border-box; background-color: initial; color: rgb(36, 41, 46) !important; text-decoration: none !important; font-size: 16px !important; font-weight: 600 !important;"><span style="box-sizing: border-box;" title="📃 Iteration 28 roadmap 📃">📃 Iteration 28 roadmap 📃</span></a></span> <div class="mt-1 text-small text-gray pinned-item-desc" style="box-sizing: border-box; color: rgb(88, 96, 105) !important; margin-top: 4px !important; font-size: 12px !important; flex: 1 0 auto;"> <span class="opened-by" style="box-sizing: border-box;">#5653 by<span> </span><a class="muted-link" data-hovercard-type="user" data-hovercard-url="/users/mlewand/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+author%3Amlewand" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;" title="issues opened by mlewand">mlewand</a><span> </span>was closed<span> </span> <relative-time class="no-wrap" datetime="2019-12-05T09:26:08Z" style="box-sizing: border-box; white-space: nowrap !important;" title="Dec 5, 2019, 10:26 AM GMT+1"> on Dec 5, 2019</relative-time> </span></div> <span class="mt-1" style="box-sizing: border-box; margin-top: 4px !important;"><svg aria-hidden="true" class="octicon octicon-issue-closed closed" height="16" version="1.1" viewbox="0 0 16 16" width="16"> <path d="M7 10h2v2H7v-2zm2-6H7v5h2V4zm1.5 1.5l-1 1L12 9l4-4.5-1-1L12 7l-1.5-1.5zM8 13.7A5.71 5.71 0 012.3 8c0-3.14 2.56-5.7 5.7-5.7 1.83 0 3.45.88 4.5 2.2l.92-.92A6.947 6.947 0 008 1C4.14 1 1 4.14 1 8s3.14 7 7 7 7-3.14 7-7l-1.52 1.52c-.66 2.41-2.86 4.19-5.48 4.19v-.01z" fill-rule="evenodd"> </path> </svg><span> </span><span class="text-gray text-small mr-3" style="box-sizing: border-box; color: rgb(88, 96, 105) !important; margin-right: 16px !important; font-size: 12px !important;">Closed</span><span> </span><a aria-label="4 comments" class="muted-link" href="https://github.com/ckeditor/ckeditor5/issues/5653" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;"><svg aria-hidden="true" class="octicon octicon-comment v-align-middle" height="16" version="1.1" viewbox="0 0 16 16" width="16"> <path d="M14 1H2c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h2v3.5L7.5 11H14c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zm0 9H7l-2 2v-2H2V2h12v8z" fill-rule="evenodd"> </path> </svg><span> </span><span class="text-small" style="box-sizing: border-box; font-size: 12px !important;">4</span></a></span> </div> </div> </div> </div> <div class="d-flex flex-justify-between mb-3" style="box-sizing: border-box; justify-content: space-between !important; margin-bottom: 16px !important; display: flex !important;"> <div class="d-flex flex-justify-start flex-auto width-full " role="search" style="box-sizing: border-box; justify-content: flex-start !important; flex: 1 1 auto !important; width: 874.044px; display: flex !important;"> <form accept-charset="UTF-8" action="https://github.com/ckeditor/ckeditor5/issues" aria-label="Issues" class="subnav-search width-full ml-0" data-pjax="true" method="get" role="search" style="box-sizing: border-box; position: relative; margin-left: 0px !important; width: 607.156px;"> <input aria-label="Search all issues" class="form-control form-control subnav-search-input input-contrast width-full" data-hotkey="Control+/,Meta+/" id="js-issues-search" name="q" placeholder="Search all issues" style="box-sizing: border-box; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 14px; line-height: 20px; font-family: inherit; margin: 0px; overflow: visible; min-height: 34px; padding: 6px 8px 6px 30px; color: rgb(88, 96, 105); vertical-align: middle; background-color: rgb(250, 251, 252); background-repeat: no-repeat; background-position: right 8px center; border: 1px solid rgb(209, 213, 218); border-radius: 3px; outline: none; box-shadow: rgba(27, 31, 35, 0.075) 0px 1px 2px inset; width: 607.156px;" type="text" value="is:issue is:open " /><svg aria-hidden="true" class="octicon octicon-search subnav-search-icon" height="16" version="1.1" viewbox="0 0 16 16" width="16"> <path d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0013 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 000-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z" fill-rule="evenodd"> </path> </svg></form> <div class="ml-2 pl-2 " style="box-sizing: border-box; margin-left: 8px !important; padding-left: 8px !important;"> <nav aria-label="Issue" class="subnav-links float-left d-flex no-wrap" style="box-sizing: border-box; display: flex !important; float: left !important; white-space: nowrap !important;"> <a class="js-selected-navigation-item subnav-item" data-selected-links="repo_labels /ckeditor/ckeditor5/labels" href="https://github.com/ckeditor/ckeditor5/labels" selected_link="repo_issues" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105); text-decoration: none; position: relative; float: left; padding: 6px 14px; font-weight: 600; line-height: 20px; border: 1px solid rgb(225, 228, 232); border-top-left-radius: 3px; border-bottom-left-radius: 3px;"><svg aria-hidden="true" class="octicon octicon-tag" height="16" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M7.73 1.73C7.26 1.26 6.62 1 5.96 1H3.5C2.13 1 1 2.13 1 3.5v2.47c0 .66.27 1.3.73 1.77l6.06 6.06c.39.39 1.02.39 1.41 0l4.59-4.59a.996.996 0 000-1.41L7.73 1.73zM2.38 7.09c-.31-.3-.47-.7-.47-1.13V3.5c0-.88.72-1.59 1.59-1.59h2.47c.42 0 .83.16 1.13.47l6.14 6.13-4.73 4.73-6.13-6.15zM3.01 3h2v2H3V3h.01z" fill-rule="evenodd"> </path> </svg><span> </span>Labels<span> </span><span class="Counter " style="box-sizing: border-box; display: inline-block; padding: 2px 5px; font-size: 12px; font-weight: 600; line-height: 1; color: rgb(88, 96, 105); background-color: rgba(27, 31, 35, 0.08); border-radius: 20px;">92</span></a><a class="js-selected-navigation-item subnav-item" data-selected-links="repo_milestones /ckeditor/ckeditor5/milestones" href="https://github.com/ckeditor/ckeditor5/milestones" selected_link="repo_issues" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105); text-decoration: none; position: relative; float: left; padding: 6px 14px; font-weight: 600; line-height: 20px; border: 1px solid rgb(225, 228, 232); margin-left: -1px; border-top-right-radius: 3px; border-bottom-right-radius: 3px;"><svg aria-hidden="true" class="octicon octicon-milestone" height="16" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M8 2H6V0h2v2zm4 5H2c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h10l2 2-2 2zM8 4H6v2h2V4zM6 16h2V8H6v8z" fill-rule="evenodd"> </path> </svg><span> </span>Milestones<span> </span><span class="Counter " style="box-sizing: border-box; display: inline-block; padding: 2px 5px; font-size: 12px; font-weight: 600; line-height: 1; color: rgb(88, 96, 105); background-color: rgba(27, 31, 35, 0.08); border-radius: 20px;">6</span></a> </nav> </div> </div> <div class="ml-3 " data-pjax="" style="box-sizing: border-box; margin-left: 16px !important;"> <details class="details-reset details-overlay details-overlay-dark float-right" style="box-sizing: border-box; display: block; float: right !important;"> <summary class="btn btn-primary" data-ga-click="Issues, create new issue, view:issue_show location:issue_header style:button logged_in:false" role="button" style="box-sizing: border-box; display: inline-block; cursor: pointer; position: relative; padding: 6px 12px; font-size: 14px; font-weight: 600; line-height: 20px; white-space: nowrap; vertical-align: middle; user-select: none; background-repeat: repeat-x; background-position: -1px -1px; background-size: 110% 110%; border: 1px solid rgba(27, 31, 35, 0.2); border-radius: 0.25em; -webkit-appearance: none; color: rgb(255, 255, 255); background-color: rgb(40, 167, 69); background-image: linear-gradient(-180deg, rgb(52, 208, 88), rgb(40, 167, 69) 90%); list-style: none;"> New issue</summary> </details> </div> </div> <div class="Box mt-3 " style="box-sizing: border-box; background-color: rgb(255, 255, 255); border: 1px solid rgb(209, 213, 218); border-radius: 3px; margin-top: 16px !important;"> <div class="Box-header d-flex flex-justify-between" id="js-issues-toolbar" style="box-sizing: border-box; padding: 16px; margin: -1px -1px 0px; background-color: rgb(246, 248, 250); border: 1px solid rgb(209, 213, 218); border-top-left-radius: 3px; border-top-right-radius: 3px; justify-content: space-between !important; display: flex !important;"> <div class="table-list-filters flex-auto d-flex min-width-0" style="box-sizing: border-box; flex: 1 1 auto !important; min-width: 0px !important; display: flex !important;"> <div class="flex-auto " style="box-sizing: border-box; flex: 1 1 auto !important;"> <div class="table-list-header-toggle states flex-auto pl-0" style="box-sizing: border-box; flex: 1 1 auto !important; padding-left: 16px;"> <a class="btn-link selected" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aopen+is%3Aissue" style="box-sizing: border-box; background-color: initial; color: rgb(36, 41, 46); text-decoration: none; display: inline-block; padding: 0px; font-size: inherit; white-space: nowrap; cursor: pointer; user-select: none; border: 0px; -webkit-appearance: none; font-weight: 600;"><svg aria-hidden="true" class="octicon octicon-issue-opened" height="16" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 011.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z" fill-rule="evenodd"> </path> </svg><span> </span>1,175 Open</a><span> </span><a class="btn-link " href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aclosed" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105); text-decoration: none; display: inline-block; padding: 0px; font-size: inherit; white-space: nowrap; cursor: pointer; user-select: none; border: 0px; -webkit-appearance: none; margin-left: 10px;"><svg aria-hidden="true" class="octicon octicon-check" height="16" version="1.1" viewbox="0 0 12 16" width="12"> <path d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z" fill-rule="evenodd"></path> </svg><span> </span>4,640 Closed</a></div> </div> <div class="table-list-header-toggle no-wrap " style="box-sizing: border-box; white-space: nowrap !important;"> <details class="details-reset details-overlay d-inline-block position-relative px-3" id="author-select-menu" style="box-sizing: border-box; display: inline-block !important; position: relative !important; padding-left: 16px !important; padding-right: 16px !important;"> <summary aria-haspopup="menu" class="btn-link" data-hotkey="u" role="button" style="box-sizing: border-box; display: inline-block; cursor: pointer; padding: 0px; font-size: inherit; color: rgb(88, 96, 105); text-decoration: none; white-space: nowrap; user-select: none; background-color: initial; border: 0px; -webkit-appearance: none; list-style: none;" title="Author"> Author<span> </span> </summary> </details> <span> </span> <details class="details-reset details-overlay d-inline-block position-relative px-3" id="label-select-menu" style="box-sizing: border-box; display: inline-block !important; position: relative !important; padding-left: 16px !important; padding-right: 16px !important;"> <summary aria-haspopup="menu" class="btn-link" data-hotkey="l" role="button" style="box-sizing: border-box; display: inline-block; cursor: pointer; padding: 0px; font-size: inherit; color: rgb(88, 96, 105); text-decoration: none; white-space: nowrap; user-select: none; background-color: initial; border: 0px; -webkit-appearance: none; list-style: none;" title="Label"> Label<span> </span> </summary> </details> <span> </span><span style="box-sizing: border-box;"> </span> <details class="details-reset details-overlay d-inline-block position-relative px-3" id="project-select-menu" style="box-sizing: border-box; display: inline-block !important; position: relative !important; padding-left: 16px !important; padding-right: 16px !important;"> <summary aria-haspopup="menu" class="btn-link" data-hotkey="p" role="button" style="box-sizing: border-box; display: inline-block; cursor: pointer; padding: 0px; font-size: inherit; color: rgb(88, 96, 105); text-decoration: none; white-space: nowrap; user-select: none; background-color: initial; border: 0px; -webkit-appearance: none; list-style: none;"> <span style="box-sizing: border-box;"> Projects<span> </span> </span></summary><span style="box-sizing: border-box;"> </span> </details> <span style="box-sizing: border-box;"><span> </span> </span> <details class="details-reset details-overlay d-inline-block position-relative px-3" id="milestones-select-menu" style="box-sizing: border-box; display: inline-block !important; position: relative !important; padding-left: 16px !important; padding-right: 16px !important;"> <summary aria-haspopup="menu" class="btn-link" data-hotkey="m" role="button" style="box-sizing: border-box; display: inline-block; cursor: pointer; padding: 0px; font-size: inherit; color: rgb(88, 96, 105); text-decoration: none; white-space: nowrap; user-select: none; background-color: initial; border: 0px; -webkit-appearance: none; list-style: none;"> <span style="box-sizing: border-box;"> Milestones<span> </span> </span></summary><span style="box-sizing: border-box;"> </span> </details> <span style="box-sizing: border-box;"><span> </span> </span> <details class="details-reset details-overlay d-inline-block position-relative px-3" id="assignees-select-menu" style="box-sizing: border-box; display: inline-block !important; position: relative !important; padding-left: 16px !important; padding-right: 16px !important;"> <summary aria-haspopup="menu" class="btn-link" data-hotkey="a" role="button" style="box-sizing: border-box; display: inline-block; cursor: pointer; padding: 0px; font-size: inherit; color: rgb(88, 96, 105); text-decoration: none; white-space: nowrap; user-select: none; background-color: initial; border: 0px; -webkit-appearance: none; list-style: none;" title="Assignees"> Assignee<span> </span> </summary> </details> <span> </span> <details class="details-reset details-overlay d-inline-block position-relative pr-3 pr-sm-0 px-3" id="sort-select-menu" style="box-sizing: border-box; display: inline-block !important; position: relative !important; padding-right: 0px !important; padding-left: 16px !important;"> <summary aria-haspopup="menu" class="btn-link" role="button" style="box-sizing: border-box; display: inline-block; cursor: pointer; padding: 0px; font-size: inherit; color: rgb(88, 96, 105); text-decoration: none; white-space: nowrap; user-select: none; background-color: initial; border: 0px; -webkit-appearance: none; list-style: none;" title="Sort"> Sort<span> </span> </summary> </details> </div> </div> </div> <div aria-label="Issues" data-issue-and-pr-hovercards-enabled="" role="group" style="box-sizing: border-box;"> <div class="js-navigation-container js-active-navigation-container" style="box-sizing: border-box;"> <div class="Box-row Box-row--focus-gray p-0 mt-0 js-navigation-item js-issue-row" data-id="557464229" id="issue_6165" style="box-sizing: border-box; padding: 0px !important; margin-top: 0px !important; list-style-type: none; border-top: 1px solid transparent; border-top-left-radius: 2px; border-top-right-radius: 2px;"> <div class="d-flex Box-row--drag-hide position-relative" style="box-sizing: border-box; position: relative !important; display: flex !important;"> <div class="flex-shrink-0 pt-2 pl-3" style="box-sizing: border-box; flex-shrink: 0 !important; padding-top: 8px !important; padding-left: 16px !important;"> <span aria-label="Open issue" class="tooltipped tooltipped-e" style="box-sizing: border-box; position: relative;"><svg aria-hidden="true" class="octicon octicon-issue-opened open" height="16" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 011.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z" fill-rule="evenodd"> </path> </svg></span></div> <div class="flex-auto min-width-0 lh-condensed p-2 " style="box-sizing: border-box; flex: 1 1 auto !important; min-width: 0px !important; padding: 8px !important; line-height: 1.25 !important;"> <a class="link-gray-dark v-align-middle no-underline h4 js-navigation-open" data-hovercard-type="issue" data-hovercard-url="/ckeditor/ckeditor5/issues/6165/hovercard" href="https://github.com/ckeditor/ckeditor5/issues/6165" id="issue_6165_link" style="box-sizing: border-box; background-color: initial; color: rgb(36, 41, 46) !important; text-decoration: none !important; vertical-align: middle !important; font-size: 16px !important; font-weight: 600 !important;">Font styles are <span style="font-family:Georgia,serif;"><span style="color:#27ae60;"><span style="background-color:#dddddd;">not honored when pasti</span></span></span>ng from MS Word<span> </span></a><span class="labels lh-default " style="box-sizing: border-box; line-height: 1.5 !important; position: relative;"><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Apackage%3Afont" style="box-sizing: border-box; background-color: rgb(254, 242, 192); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="package:font">package:font</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Apackage%3Apaste-from-office" style="box-sizing: border-box; background-color: rgb(254, 242, 192); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="package:paste-from-office">package:paste-from-office</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Astatus%3Aconfirmed" style="box-sizing: border-box; background-color: rgb(230, 230, 230); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="status:confirmed">status:confirmed</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Asupport%3A1" style="box-sizing: border-box; background-color: rgb(170, 170, 170); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="An issue reported by a commercially licensed client.">support:1</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Atype%3Abug" style="box-sizing: border-box; background-color: rgb(221, 68, 68); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="type:bug">type:bug</a></span> <div class="mt-1 text-small text-gray" style="box-sizing: border-box; color: rgb(88, 96, 105) !important; margin-top: 4px !important; font-size: 12px !important;"> <span class="opened-by" style="box-sizing: border-box;">#6165 opened<span> </span> <relative-time class="no-wrap" datetime="2020-01-30T12:34:35Z" style="box-sizing: border-box; white-space: nowrap !important;" title="Jan 30, 2020, 1:34 PM GMT+1"> 2 hours ago </relative-time> <span> </span>by<span> </span><a class="muted-link" data-hovercard-type="user" data-hovercard-url="/users/jswiderski/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+author%3Ajswiderski" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;" title="Open issues created by jswiderski">jswiderski</a><span> </span> </span><span class="issue-meta-section css-truncate issue-milestone ml-2 " style="box-sizing: border-box; margin-left: 8px !important; max-width: 240px;"><a aria-label="nice-to-have" class="milestone-link muted-link css-truncate tooltipped tooltipped-n" href="https://github.com/ckeditor/ckeditor5/milestone/17" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none; position: relative;"><svg aria-label="Milestone" class="octicon octicon-milestone" height="16" role="img" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M8 2H6V0h2v2zm4 5H2c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h10l2 2-2 2zM8 4H6v2h2V4zM6 16h2V8H6v8z" fill-rule="evenodd"> </path> </svg><span> </span><span class="css-truncate-target" style="box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 100px; vertical-align: top;">nice-to-have</span></a></span> </div> </div> <div class="flex-shrink-0 col-3 pt-2 text-right pr-3 no-wrap d-grid grid-4-col grid-gap-2 " style="box-sizing: border-box; width: 244.5px; flex-shrink: 0 !important; padding-top: 8px !important; padding-right: 16px !important; text-align: right !important; white-space: nowrap !important; display: grid; column-gap: 8px; grid-template-columns: repeat(4, 1fr); grid-template-areas: "grid-col-1 grid-col-2 grid-col-3 grid-col-4";"> <div class="AvatarStack AvatarStack--right grid-col-1 " style="box-sizing: border-box; position: relative; min-width: 26px; height: 20px; grid-area: grid-col-1 / grid-col-1 / grid-col-1 / grid-col-1;"> <div aria-label="Assigned to " class="AvatarStack-body tooltipped tooltipped-sw tooltipped-multiline tooltipped-align-right-1 mt-1" style="box-sizing: border-box; position: absolute; margin-top: 4px !important; display: flex; background: rgb(255, 255, 255); right: 0px; flex-direction: row-reverse;"> </div> </div> <span class="grid-col-4" style="box-sizing: border-box; grid-area: grid-col-4 / grid-col-4 / grid-col-4 / grid-col-4;"><a aria-label="3 comments" class="muted-link" href="https://github.com/ckeditor/ckeditor5/issues/6165" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;"><svg aria-hidden="true" class="octicon octicon-comment v-align-middle" height="16" version="1.1" viewbox="0 0 16 16" width="16"> <path d="M14 1H2c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h2v3.5L7.5 11H14c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zm0 9H7l-2 2v-2H2V2h12v8z" fill-rule="evenodd"> </path> </svg><span> </span><span class="text-small text-bold" style="box-sizing: border-box; font-size: 12px !important; font-weight: 600 !important;">3</span></a></span> </div> </div> </div> <div class="Box-row Box-row--focus-gray p-0 mt-0 js-navigation-item js-issue-row" data-id="557464229" id="issue_6165" style="box-sizing: border-box; padding: 0px !important; margin-top: 0px !important; list-style-type: none; border-top: 1px solid transparent; border-top-left-radius: 2px; border-top-right-radius: 2px;"> <div class="d-flex Box-row--drag-hide position-relative" style="box-sizing: border-box; position: relative !important; display: flex !important;"> <div class="flex-shrink-0 pt-2 pl-3" style="box-sizing: border-box; flex-shrink: 0 !important; padding-top: 8px !important; padding-left: 16px !important;"> <span aria-label="Open issue" class="tooltipped tooltipped-e" style="box-sizing: border-box; position: relative;"><svg aria-hidden="true" class="octicon octicon-issue-opened open" height="16" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 011.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z" fill-rule="evenodd"> </path> </svg></span></div> <div class="flex-auto min-width-0 lh-condensed p-2 " style="box-sizing: border-box; flex: 1 1 auto !important; min-width: 0px !important; padding: 8px !important; line-height: 1.25 !important;"> <a class="link-gray-dark v-align-middle no-underline h4 js-navigation-open" data-hovercard-type="issue" data-hovercard-url="/ckeditor/ckeditor5/issues/6165/hovercard" href="https://github.com/ckeditor/ckeditor5/issues/6165" id="issue_6165_link" style="box-sizing: border-box; background-color: initial; color: rgb(36, 41, 46) !important; text-decoration: none !important; vertical-align: middle !important; font-size: 16px !important; font-weight: 600 !important;">Font styles are <span style="font-family:Georgia,serif;"><span style="color:#27ae60;"><span style="background-color:#dddddd;">not honored when pasti</span></span></span>ng from MS Word<span> </span></a><span class="labels lh-default " style="box-sizing: border-box; line-height: 1.5 !important; position: relative;"><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Apackage%3Afont" style="box-sizing: border-box; background-color: rgb(254, 242, 192); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="package:font">package:font</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Apackage%3Apaste-from-office" style="box-sizing: border-box; background-color: rgb(254, 242, 192); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="package:paste-from-office">package:paste-from-office</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Astatus%3Aconfirmed" style="box-sizing: border-box; background-color: rgb(230, 230, 230); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="status:confirmed">status:confirmed</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Asupport%3A1" style="box-sizing: border-box; background-color: rgb(170, 170, 170); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="An issue reported by a commercially licensed client.">support:1</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Atype%3Abug" style="box-sizing: border-box; background-color: rgb(221, 68, 68); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="type:bug">type:bug</a></span> <div class="mt-1 text-small text-gray" style="box-sizing: border-box; color: rgb(88, 96, 105) !important; margin-top: 4px !important; font-size: 12px !important;"> <span class="opened-by" style="box-sizing: border-box;">#6165 opened<span> </span> <relative-time class="no-wrap" datetime="2020-01-30T12:34:35Z" style="box-sizing: border-box; white-space: nowrap !important;" title="Jan 30, 2020, 1:34 PM GMT+1"> 2 hours ago </relative-time> <span> </span>by<span> </span><a class="muted-link" data-hovercard-type="user" data-hovercard-url="/users/jswiderski/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+author%3Ajswiderski" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;" title="Open issues created by jswiderski">jswiderski</a><span> </span> </span><span class="issue-meta-section css-truncate issue-milestone ml-2 " style="box-sizing: border-box; margin-left: 8px !important; max-width: 240px;"><a aria-label="nice-to-have" class="milestone-link muted-link css-truncate tooltipped tooltipped-n" href="https://github.com/ckeditor/ckeditor5/milestone/17" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none; position: relative;"><svg aria-label="Milestone" class="octicon octicon-milestone" height="16" role="img" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M8 2H6V0h2v2zm4 5H2c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h10l2 2-2 2zM8 4H6v2h2V4zM6 16h2V8H6v8z" fill-rule="evenodd"> </path> </svg><span> </span><span class="css-truncate-target" style="box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 100px; vertical-align: top;">nice-to-have</span></a></span> </div> </div> <div class="flex-shrink-0 col-3 pt-2 text-right pr-3 no-wrap d-grid grid-4-col grid-gap-2 " style="box-sizing: border-box; width: 244.5px; flex-shrink: 0 !important; padding-top: 8px !important; padding-right: 16px !important; text-align: right !important; white-space: nowrap !important; display: grid; column-gap: 8px; grid-template-columns: repeat(4, 1fr); grid-template-areas: "grid-col-1 grid-col-2 grid-col-3 grid-col-4";"> <div class="AvatarStack AvatarStack--right grid-col-1 " style="box-sizing: border-box; position: relative; min-width: 26px; height: 20px; grid-area: grid-col-1 / grid-col-1 / grid-col-1 / grid-col-1;"> <div aria-label="Assigned to " class="AvatarStack-body tooltipped tooltipped-sw tooltipped-multiline tooltipped-align-right-1 mt-1" style="box-sizing: border-box; position: absolute; margin-top: 4px !important; display: flex; background: rgb(255, 255, 255); right: 0px; flex-direction: row-reverse;"> </div> </div> <span class="grid-col-4" style="box-sizing: border-box; grid-area: grid-col-4 / grid-col-4 / grid-col-4 / grid-col-4;"><a aria-label="3 comments" class="muted-link" href="https://github.com/ckeditor/ckeditor5/issues/6165" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;"><svg aria-hidden="true" class="octicon octicon-comment v-align-middle" height="16" version="1.1" viewbox="0 0 16 16" width="16"> <path d="M14 1H2c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h2v3.5L7.5 11H14c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zm0 9H7l-2 2v-2H2V2h12v8z" fill-rule="evenodd"> </path> </svg><span> </span><span class="text-small text-bold" style="box-sizing: border-box; font-size: 12px !important; font-weight: 600 !important;">3</span></a></span> </div> </div> </div> <div class="Box-row Box-row--focus-gray p-0 mt-0 js-navigation-item js-issue-row" data-id="557464229" id="issue_6165" style="box-sizing: border-box; padding: 0px !important; margin-top: 0px !important; list-style-type: none; border-top: 1px solid transparent; border-top-left-radius: 2px; border-top-right-radius: 2px;"> <div class="d-flex Box-row--drag-hide position-relative" style="box-sizing: border-box; position: relative !important; display: flex !important;"> <div class="flex-shrink-0 pt-2 pl-3" style="box-sizing: border-box; flex-shrink: 0 !important; padding-top: 8px !important; padding-left: 16px !important;"> <span aria-label="Open issue" class="tooltipped tooltipped-e" style="box-sizing: border-box; position: relative;"><svg aria-hidden="true" class="octicon octicon-issue-opened open" height="16" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 011.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z" fill-rule="evenodd"> </path> </svg></span></div> <div class="flex-auto min-width-0 lh-condensed p-2 " style="box-sizing: border-box; flex: 1 1 auto !important; min-width: 0px !important; padding: 8px !important; line-height: 1.25 !important;"> <a class="link-gray-dark v-align-middle no-underline h4 js-navigation-open" data-hovercard-type="issue" data-hovercard-url="/ckeditor/ckeditor5/issues/6165/hovercard" href="https://github.com/ckeditor/ckeditor5/issues/6165" id="issue_6165_link" style="box-sizing: border-box; background-color: initial; color: rgb(36, 41, 46) !important; text-decoration: none !important; vertical-align: middle !important; font-size: 16px !important; font-weight: 600 !important;">Font styles are <span style="font-family:Georgia,serif;"><span style="color:#27ae60;"><span style="background-color:#dddddd;">not honored when pasti</span></span></span>ng from MS Word<span> </span></a><span class="labels lh-default " style="box-sizing: border-box; line-height: 1.5 !important; position: relative;"><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Apackage%3Afont" style="box-sizing: border-box; background-color: rgb(254, 242, 192); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="package:font">package:font</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Apackage%3Apaste-from-office" style="box-sizing: border-box; background-color: rgb(254, 242, 192); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="package:paste-from-office">package:paste-from-office</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Astatus%3Aconfirmed" style="box-sizing: border-box; background-color: rgb(230, 230, 230); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="status:confirmed">status:confirmed</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Asupport%3A1" style="box-sizing: border-box; background-color: rgb(170, 170, 170); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="An issue reported by a commercially licensed client.">support:1</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Atype%3Abug" style="box-sizing: border-box; background-color: rgb(221, 68, 68); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="type:bug">type:bug</a></span> <div class="mt-1 text-small text-gray" style="box-sizing: border-box; color: rgb(88, 96, 105) !important; margin-top: 4px !important; font-size: 12px !important;"> <span class="opened-by" style="box-sizing: border-box;">#6165 opened<span> </span> <relative-time class="no-wrap" datetime="2020-01-30T12:34:35Z" style="box-sizing: border-box; white-space: nowrap !important;" title="Jan 30, 2020, 1:34 PM GMT+1"> 2 hours ago </relative-time> <span> </span>by<span> </span><a class="muted-link" data-hovercard-type="user" data-hovercard-url="/users/jswiderski/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+author%3Ajswiderski" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;" title="Open issues created by jswiderski">jswiderski</a><span> </span> </span><span class="issue-meta-section css-truncate issue-milestone ml-2 " style="box-sizing: border-box; margin-left: 8px !important; max-width: 240px;"><a aria-label="nice-to-have" class="milestone-link muted-link css-truncate tooltipped tooltipped-n" href="https://github.com/ckeditor/ckeditor5/milestone/17" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none; position: relative;"><svg aria-label="Milestone" class="octicon octicon-milestone" height="16" role="img" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M8 2H6V0h2v2zm4 5H2c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h10l2 2-2 2zM8 4H6v2h2V4zM6 16h2V8H6v8z" fill-rule="evenodd"> </path> </svg><span> </span><span class="css-truncate-target" style="box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 100px; vertical-align: top;">nice-to-have</span></a></span> </div> </div> <div class="flex-shrink-0 col-3 pt-2 text-right pr-3 no-wrap d-grid grid-4-col grid-gap-2 " style="box-sizing: border-box; width: 244.5px; flex-shrink: 0 !important; padding-top: 8px !important; padding-right: 16px !important; text-align: right !important; white-space: nowrap !important; display: grid; column-gap: 8px; grid-template-columns: repeat(4, 1fr); grid-template-areas: "grid-col-1 grid-col-2 grid-col-3 grid-col-4";"> <div class="AvatarStack AvatarStack--right grid-col-1 " style="box-sizing: border-box; position: relative; min-width: 26px; height: 20px; grid-area: grid-col-1 / grid-col-1 / grid-col-1 / grid-col-1;"> <div aria-label="Assigned to " class="AvatarStack-body tooltipped tooltipped-sw tooltipped-multiline tooltipped-align-right-1 mt-1" style="box-sizing: border-box; position: absolute; margin-top: 4px !important; display: flex; background: rgb(255, 255, 255); right: 0px; flex-direction: row-reverse;"> </div> </div> <span class="grid-col-4" style="box-sizing: border-box; grid-area: grid-col-4 / grid-col-4 / grid-col-4 / grid-col-4;"><a aria-label="3 comments" class="muted-link" href="https://github.com/ckeditor/ckeditor5/issues/6165" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;"><svg aria-hidden="true" class="octicon octicon-comment v-align-middle" height="16" version="1.1" viewbox="0 0 16 16" width="16"> <path d="M14 1H2c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h2v3.5L7.5 11H14c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zm0 9H7l-2 2v-2H2V2h12v8z" fill-rule="evenodd"> </path> </svg><span> </span><span class="text-small text-bold" style="box-sizing: border-box; font-size: 12px !important; font-weight: 600 !important;">3</span></a></span> </div> </div> </div> <div class="Box-row Box-row--focus-gray p-0 mt-0 js-navigation-item js-issue-row" data-id="557464229" id="issue_6165" style="box-sizing: border-box; padding: 0px !important; margin-top: 0px !important; list-style-type: none; border-top: 1px solid transparent; border-top-left-radius: 2px; border-top-right-radius: 2px;"> <div class="d-flex Box-row--drag-hide position-relative" style="box-sizing: border-box; position: relative !important; display: flex !important;"> <div class="flex-shrink-0 pt-2 pl-3" style="box-sizing: border-box; flex-shrink: 0 !important; padding-top: 8px !important; padding-left: 16px !important;"> <span aria-label="Open issue" class="tooltipped tooltipped-e" style="box-sizing: border-box; position: relative;"><svg aria-hidden="true" class="octicon octicon-issue-opened open" height="16" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 011.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z" fill-rule="evenodd"> </path> </svg></span></div> <div class="flex-auto min-width-0 lh-condensed p-2 " style="box-sizing: border-box; flex: 1 1 auto !important; min-width: 0px !important; padding: 8px !important; line-height: 1.25 !important;"> <a class="link-gray-dark v-align-middle no-underline h4 js-navigation-open" data-hovercard-type="issue" data-hovercard-url="/ckeditor/ckeditor5/issues/6165/hovercard" href="https://github.com/ckeditor/ckeditor5/issues/6165" id="issue_6165_link" style="box-sizing: border-box; background-color: initial; color: rgb(36, 41, 46) !important; text-decoration: none !important; vertical-align: middle !important; font-size: 16px !important; font-weight: 600 !important;">Font styles are <span style="font-family:Georgia,serif;"><span style="color:#27ae60;"><span style="background-color:#dddddd;">not honored when pasti</span></span></span>ng from MS Word<span> </span></a><span class="labels lh-default " style="box-sizing: border-box; line-height: 1.5 !important; position: relative;"><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Apackage%3Afont" style="box-sizing: border-box; background-color: rgb(254, 242, 192); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="package:font">package:font</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Apackage%3Apaste-from-office" style="box-sizing: border-box; background-color: rgb(254, 242, 192); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="package:paste-from-office">package:paste-from-office</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Astatus%3Aconfirmed" style="box-sizing: border-box; background-color: rgb(230, 230, 230); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="status:confirmed">status:confirmed</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Asupport%3A1" style="box-sizing: border-box; background-color: rgb(170, 170, 170); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="An issue reported by a commercially licensed client.">support:1</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Atype%3Abug" style="box-sizing: border-box; background-color: rgb(221, 68, 68); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="type:bug">type:bug</a></span> <div class="mt-1 text-small text-gray" style="box-sizing: border-box; color: rgb(88, 96, 105) !important; margin-top: 4px !important; font-size: 12px !important;"> <span class="opened-by" style="box-sizing: border-box;">#6165 opened<span> </span> <relative-time class="no-wrap" datetime="2020-01-30T12:34:35Z" style="box-sizing: border-box; white-space: nowrap !important;" title="Jan 30, 2020, 1:34 PM GMT+1"> 2 hours ago </relative-time> <span> </span>by<span> </span><a class="muted-link" data-hovercard-type="user" data-hovercard-url="/users/jswiderski/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+author%3Ajswiderski" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;" title="Open issues created by jswiderski">jswiderski</a><span> </span> </span><span class="issue-meta-section css-truncate issue-milestone ml-2 " style="box-sizing: border-box; margin-left: 8px !important; max-width: 240px;"><a aria-label="nice-to-have" class="milestone-link muted-link css-truncate tooltipped tooltipped-n" href="https://github.com/ckeditor/ckeditor5/milestone/17" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none; position: relative;"><svg aria-label="Milestone" class="octicon octicon-milestone" height="16" role="img" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M8 2H6V0h2v2zm4 5H2c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h10l2 2-2 2zM8 4H6v2h2V4zM6 16h2V8H6v8z" fill-rule="evenodd"> </path> </svg><span> </span><span class="css-truncate-target" style="box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 100px; vertical-align: top;">nice-to-have</span></a></span> </div> </div> <div class="flex-shrink-0 col-3 pt-2 text-right pr-3 no-wrap d-grid grid-4-col grid-gap-2 " style="box-sizing: border-box; width: 244.5px; flex-shrink: 0 !important; padding-top: 8px !important; padding-right: 16px !important; text-align: right !important; white-space: nowrap !important; display: grid; column-gap: 8px; grid-template-columns: repeat(4, 1fr); grid-template-areas: "grid-col-1 grid-col-2 grid-col-3 grid-col-4";"> <div class="AvatarStack AvatarStack--right grid-col-1 " style="box-sizing: border-box; position: relative; min-width: 26px; height: 20px; grid-area: grid-col-1 / grid-col-1 / grid-col-1 / grid-col-1;"> <div aria-label="Assigned to " class="AvatarStack-body tooltipped tooltipped-sw tooltipped-multiline tooltipped-align-right-1 mt-1" style="box-sizing: border-box; position: absolute; margin-top: 4px !important; display: flex; background: rgb(255, 255, 255); right: 0px; flex-direction: row-reverse;"> </div> </div> <span class="grid-col-4" style="box-sizing: border-box; grid-area: grid-col-4 / grid-col-4 / grid-col-4 / grid-col-4;"><a aria-label="3 comments" class="muted-link" href="https://github.com/ckeditor/ckeditor5/issues/6165" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;"><svg aria-hidden="true" class="octicon octicon-comment v-align-middle" height="16" version="1.1" viewbox="0 0 16 16" width="16"> <path d="M14 1H2c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h2v3.5L7.5 11H14c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zm0 9H7l-2 2v-2H2V2h12v8z" fill-rule="evenodd"> </path> </svg><span> </span><span class="text-small text-bold" style="box-sizing: border-box; font-size: 12px !important; font-weight: 600 !important;">3</span></a></span> </div> </div> </div> <div class="Box-row Box-row--focus-gray p-0 mt-0 js-navigation-item js-issue-row" data-id="557464229" id="issue_6165" style="box-sizing: border-box; padding: 0px !important; margin-top: 0px !important; list-style-type: none; border-top: 1px solid transparent; border-top-left-radius: 2px; border-top-right-radius: 2px;"> <div class="d-flex Box-row--drag-hide position-relative" style="box-sizing: border-box; position: relative !important; display: flex !important;"> <div class="flex-shrink-0 pt-2 pl-3" style="box-sizing: border-box; flex-shrink: 0 !important; padding-top: 8px !important; padding-left: 16px !important;"> <span aria-label="Open issue" class="tooltipped tooltipped-e" style="box-sizing: border-box; position: relative;"><svg aria-hidden="true" class="octicon octicon-issue-opened open" height="16" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 011.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z" fill-rule="evenodd"> </path> </svg></span></div> <div class="flex-auto min-width-0 lh-condensed p-2 " style="box-sizing: border-box; flex: 1 1 auto !important; min-width: 0px !important; padding: 8px !important; line-height: 1.25 !important;"> <a class="link-gray-dark v-align-middle no-underline h4 js-navigation-open" data-hovercard-type="issue" data-hovercard-url="/ckeditor/ckeditor5/issues/6165/hovercard" href="https://github.com/ckeditor/ckeditor5/issues/6165" id="issue_6165_link" style="box-sizing: border-box; background-color: initial; color: rgb(36, 41, 46) !important; text-decoration: none !important; vertical-align: middle !important; font-size: 16px !important; font-weight: 600 !important;">Font styles are <span style="font-family:Georgia,serif;"><span style="color:#27ae60;"><span style="background-color:#dddddd;">not honored when pasti</span></span></span>ng from MS Word<span> </span></a><span class="labels lh-default " style="box-sizing: border-box; line-height: 1.5 !important; position: relative;"><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Apackage%3Afont" style="box-sizing: border-box; background-color: rgb(254, 242, 192); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="package:font">package:font</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Apackage%3Apaste-from-office" style="box-sizing: border-box; background-color: rgb(254, 242, 192); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="package:paste-from-office">package:paste-from-office</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Astatus%3Aconfirmed" style="box-sizing: border-box; background-color: rgb(230, 230, 230); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="status:confirmed">status:confirmed</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Asupport%3A1" style="box-sizing: border-box; background-color: rgb(170, 170, 170); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="An issue reported by a commercially licensed client.">support:1</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Atype%3Abug" style="box-sizing: border-box; background-color: rgb(221, 68, 68); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="type:bug">type:bug</a></span> <div class="mt-1 text-small text-gray" style="box-sizing: border-box; color: rgb(88, 96, 105) !important; margin-top: 4px !important; font-size: 12px !important;"> <span class="opened-by" style="box-sizing: border-box;">#6165 opened<span> </span> <relative-time class="no-wrap" datetime="2020-01-30T12:34:35Z" style="box-sizing: border-box; white-space: nowrap !important;" title="Jan 30, 2020, 1:34 PM GMT+1"> 2 hours ago </relative-time> <span> </span>by<span> </span><a class="muted-link" data-hovercard-type="user" data-hovercard-url="/users/jswiderski/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+author%3Ajswiderski" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;" title="Open issues created by jswiderski">jswiderski</a><span> </span> </span><span class="issue-meta-section css-truncate issue-milestone ml-2 " style="box-sizing: border-box; margin-left: 8px !important; max-width: 240px;"><a aria-label="nice-to-have" class="milestone-link muted-link css-truncate tooltipped tooltipped-n" href="https://github.com/ckeditor/ckeditor5/milestone/17" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none; position: relative;"><svg aria-label="Milestone" class="octicon octicon-milestone" height="16" role="img" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M8 2H6V0h2v2zm4 5H2c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h10l2 2-2 2zM8 4H6v2h2V4zM6 16h2V8H6v8z" fill-rule="evenodd"> </path> </svg><span> </span><span class="css-truncate-target" style="box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 100px; vertical-align: top;">nice-to-have</span></a></span> </div> </div> <div class="flex-shrink-0 col-3 pt-2 text-right pr-3 no-wrap d-grid grid-4-col grid-gap-2 " style="box-sizing: border-box; width: 244.5px; flex-shrink: 0 !important; padding-top: 8px !important; padding-right: 16px !important; text-align: right !important; white-space: nowrap !important; display: grid; column-gap: 8px; grid-template-columns: repeat(4, 1fr); grid-template-areas: "grid-col-1 grid-col-2 grid-col-3 grid-col-4";"> <div class="AvatarStack AvatarStack--right grid-col-1 " style="box-sizing: border-box; position: relative; min-width: 26px; height: 20px; grid-area: grid-col-1 / grid-col-1 / grid-col-1 / grid-col-1;"> <div aria-label="Assigned to " class="AvatarStack-body tooltipped tooltipped-sw tooltipped-multiline tooltipped-align-right-1 mt-1" style="box-sizing: border-box; position: absolute; margin-top: 4px !important; display: flex; background: rgb(255, 255, 255); right: 0px; flex-direction: row-reverse;"> </div> </div> <span class="grid-col-4" style="box-sizing: border-box; grid-area: grid-col-4 / grid-col-4 / grid-col-4 / grid-col-4;"><a aria-label="3 comments" class="muted-link" href="https://github.com/ckeditor/ckeditor5/issues/6165" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;"><svg aria-hidden="true" class="octicon octicon-comment v-align-middle" height="16" version="1.1" viewbox="0 0 16 16" width="16"> <path d="M14 1H2c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h2v3.5L7.5 11H14c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zm0 9H7l-2 2v-2H2V2h12v8z" fill-rule="evenodd"> </path> </svg><span> </span><span class="text-small text-bold" style="box-sizing: border-box; font-size: 12px !important; font-weight: 600 !important;">3</span></a></span> </div> </div> </div> <div class="Box-row Box-row--focus-gray p-0 mt-0 js-navigation-item js-issue-row" data-id="557464229" id="issue_6165" style="box-sizing: border-box; padding: 0px !important; margin-top: 0px !important; list-style-type: none; border-top: 1px solid transparent; border-top-left-radius: 2px; border-top-right-radius: 2px;"> <div class="d-flex Box-row--drag-hide position-relative" style="box-sizing: border-box; position: relative !important; display: flex !important;"> <div class="flex-shrink-0 pt-2 pl-3" style="box-sizing: border-box; flex-shrink: 0 !important; padding-top: 8px !important; padding-left: 16px !important;"> <span aria-label="Open issue" class="tooltipped tooltipped-e" style="box-sizing: border-box; position: relative;"><svg aria-hidden="true" class="octicon octicon-issue-opened open" height="16" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 011.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z" fill-rule="evenodd"> </path> </svg></span></div> <div class="flex-auto min-width-0 lh-condensed p-2 " style="box-sizing: border-box; flex: 1 1 auto !important; min-width: 0px !important; padding: 8px !important; line-height: 1.25 !important;"> <a class="link-gray-dark v-align-middle no-underline h4 js-navigation-open" data-hovercard-type="issue" data-hovercard-url="/ckeditor/ckeditor5/issues/6165/hovercard" href="https://github.com/ckeditor/ckeditor5/issues/6165" id="issue_6165_link" style="box-sizing: border-box; background-color: initial; color: rgb(36, 41, 46) !important; text-decoration: none !important; vertical-align: middle !important; font-size: 16px !important; font-weight: 600 !important;">Font styles are <span style="font-family:Georgia,serif;"><span style="color:#27ae60;"><span style="background-color:#dddddd;">not honored when pasti</span></span></span>ng from MS Word<span> </span></a><span class="labels lh-default " style="box-sizing: border-box; line-height: 1.5 !important; position: relative;"><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Apackage%3Afont" style="box-sizing: border-box; background-color: rgb(254, 242, 192); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="package:font">package:font</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Apackage%3Apaste-from-office" style="box-sizing: border-box; background-color: rgb(254, 242, 192); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="package:paste-from-office">package:paste-from-office</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Astatus%3Aconfirmed" style="box-sizing: border-box; background-color: rgb(230, 230, 230); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="status:confirmed">status:confirmed</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Asupport%3A1" style="box-sizing: border-box; background-color: rgb(170, 170, 170); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="An issue reported by a commercially licensed client.">support:1</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Atype%3Abug" style="box-sizing: border-box; background-color: rgb(221, 68, 68); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="type:bug">type:bug</a></span> <div class="mt-1 text-small text-gray" style="box-sizing: border-box; color: rgb(88, 96, 105) !important; margin-top: 4px !important; font-size: 12px !important;"> <span class="opened-by" style="box-sizing: border-box;">#6165 opened<span> </span> <relative-time class="no-wrap" datetime="2020-01-30T12:34:35Z" style="box-sizing: border-box; white-space: nowrap !important;" title="Jan 30, 2020, 1:34 PM GMT+1"> 2 hours ago </relative-time> <span> </span>by<span> </span><a class="muted-link" data-hovercard-type="user" data-hovercard-url="/users/jswiderski/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+author%3Ajswiderski" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;" title="Open issues created by jswiderski">jswiderski</a><span> </span> </span><span class="issue-meta-section css-truncate issue-milestone ml-2 " style="box-sizing: border-box; margin-left: 8px !important; max-width: 240px;"><a aria-label="nice-to-have" class="milestone-link muted-link css-truncate tooltipped tooltipped-n" href="https://github.com/ckeditor/ckeditor5/milestone/17" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none; position: relative;"><svg aria-label="Milestone" class="octicon octicon-milestone" height="16" role="img" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M8 2H6V0h2v2zm4 5H2c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h10l2 2-2 2zM8 4H6v2h2V4zM6 16h2V8H6v8z" fill-rule="evenodd"> </path> </svg><span> </span><span class="css-truncate-target" style="box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 100px; vertical-align: top;">nice-to-have</span></a></span> </div> </div> <div class="flex-shrink-0 col-3 pt-2 text-right pr-3 no-wrap d-grid grid-4-col grid-gap-2 " style="box-sizing: border-box; width: 244.5px; flex-shrink: 0 !important; padding-top: 8px !important; padding-right: 16px !important; text-align: right !important; white-space: nowrap !important; display: grid; column-gap: 8px; grid-template-columns: repeat(4, 1fr); grid-template-areas: "grid-col-1 grid-col-2 grid-col-3 grid-col-4";"> <div class="AvatarStack AvatarStack--right grid-col-1 " style="box-sizing: border-box; position: relative; min-width: 26px; height: 20px; grid-area: grid-col-1 / grid-col-1 / grid-col-1 / grid-col-1;"> <div aria-label="Assigned to " class="AvatarStack-body tooltipped tooltipped-sw tooltipped-multiline tooltipped-align-right-1 mt-1" style="box-sizing: border-box; position: absolute; margin-top: 4px !important; display: flex; background: rgb(255, 255, 255); right: 0px; flex-direction: row-reverse;"> </div> </div> <span class="grid-col-4" style="box-sizing: border-box; grid-area: grid-col-4 / grid-col-4 / grid-col-4 / grid-col-4;"><a aria-label="3 comments" class="muted-link" href="https://github.com/ckeditor/ckeditor5/issues/6165" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;"><svg aria-hidden="true" class="octicon octicon-comment v-align-middle" height="16" version="1.1" viewbox="0 0 16 16" width="16"> <path d="M14 1H2c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h2v3.5L7.5 11H14c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zm0 9H7l-2 2v-2H2V2h12v8z" fill-rule="evenodd"> </path> </svg><span> </span><span class="text-small text-bold" style="box-sizing: border-box; font-size: 12px !important; font-weight: 600 !important;">3</span></a></span> </div> </div> </div> <div aria-selected="false" class="Box-row Box-row--focus-gray p-0 mt-0 js-navigation-item js-issue-row" data-id="557435601" id="issue_6164" style="box-sizing: border-box; padding: 0px !important; margin-top: 0px !important; list-style-type: none; border-top: 1px solid rgb(225, 228, 232);"> <div class="d-flex Box-row--drag-hide position-relative" style="box-sizing: border-box; position: relative !important; display: flex !important;"> <div class="flex-shrink-0 pt-2 pl-3" style="box-sizing: border-box; flex-shrink: 0 !important; padding-top: 8px !important; padding-left: 16px !important;"> <span aria-label="Open issue" class="tooltipped tooltipped-e" style="box-sizing: border-box; position: relative;"><svg aria-hidden="true" class="octicon octicon-issue-opened open" height="16" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 011.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z" fill-rule="evenodd"> </path> </svg></span></div> <div class="flex-auto min-width-0 lh-condensed p-2 " style="box-sizing: border-box; flex: 1 1 auto !important; min-width: 0px !important; padding: 8px !important; line-height: 1.25 !important;"> <a class="link-gray-dark v-align-middle no-underline h4 js-navigation-open" data-hovercard-type="issue" data-hovercard-url="/ckeditor/ckeditor5/issues/6164/hovercard" href="https://github.com/ckeditor/ckeditor5/issues/6164" id="issue_6164_link" style="box-sizing: border-box; background-color: initial; color: rgb(36, 41, 46) !important; text-decoration: none !important; vertical-align: middle !important; font-size: 16px !important; font-weight: 600 !important;">CKEditor Supressing MouseDown Action Performed Inside React Component Block Widget</a><span> </span><span class="labels lh-default " style="box-sizing: border-box; line-height: 1.5 !important; position: relative;"><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Atype%3Abug" style="box-sizing: border-box; background-color: rgb(221, 68, 68); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="type:bug">type:bug</a></span> <div class="mt-1 text-small text-gray" style="box-sizing: border-box; color: rgb(88, 96, 105) !important; margin-top: 4px !important; font-size: 12px !important;"> <span class="opened-by" style="box-sizing: border-box;">#6164 opened<span> </span> <relative-time class="no-wrap" datetime="2020-01-30T11:35:02Z" style="box-sizing: border-box; white-space: nowrap !important;" title="Jan 30, 2020, 12:35 PM GMT+1"> 3 hours ago </relative-time> <span> </span>by<span> </span><a class="muted-link" data-hovercard-type="user" data-hovercard-url="/users/abhisheksirari/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+author%3Aabhisheksirari" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;" title="Open issues created by abhisheksirari">abhisheksirari</a> </span></div> </div> <div class="flex-shrink-0 col-3 pt-2 text-right pr-3 no-wrap d-grid grid-4-col grid-gap-2 " style="box-sizing: border-box; width: 244.5px; flex-shrink: 0 !important; padding-top: 8px !important; padding-right: 16px !important; text-align: right !important; white-space: nowrap !important; display: grid; column-gap: 8px; grid-template-columns: repeat(4, 1fr); grid-template-areas: "grid-col-1 grid-col-2 grid-col-3 grid-col-4";"> <div class="AvatarStack AvatarStack--right grid-col-1 " style="box-sizing: border-box; position: relative; min-width: 26px; height: 20px; grid-area: grid-col-1 / grid-col-1 / grid-col-1 / grid-col-1;"> <div aria-label="Assigned to " class="AvatarStack-body tooltipped tooltipped-sw tooltipped-multiline tooltipped-align-right-1 mt-1" style="box-sizing: border-box; position: absolute; margin-top: 4px !important; display: flex; background: rgb(255, 255, 255); right: 0px; flex-direction: row-reverse;"> </div> </div> </div> </div> </div> <div aria-selected="false" class="Box-row Box-row--focus-gray p-0 mt-0 js-navigation-item js-issue-row" data-id="556963730" id="issue_6161" style="box-sizing: border-box; padding: 0px !important; margin-top: 0px !important; list-style-type: none; border-top: 1px solid rgb(225, 228, 232);"> <div class="d-flex Box-row--drag-hide position-relative" style="box-sizing: border-box; position: relative !important; display: flex !important;"> <div class="flex-shrink-0 pt-2 pl-3" style="box-sizing: border-box; flex-shrink: 0 !important; padding-top: 8px !important; padding-left: 16px !important;"> <span aria-label="Open issue" class="tooltipped tooltipped-e" style="box-sizing: border-box; position: relative;"><svg aria-hidden="true" class="octicon octicon-issue-opened open" height="16" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 011.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z" fill-rule="evenodd"> </path> </svg></span></div> <div class="flex-auto min-width-0 lh-condensed p-2 " style="box-sizing: border-box; flex: 1 1 auto !important; min-width: 0px !important; padding: 8px !important; line-height: 1.25 !important;"> <a class="link-gray-dark v-align-middle no-underline h4 js-navigation-open" data-hovercard-type="issue" data-hovercard-url="/ckeditor/ckeditor5/issues/6161/hovercard" href="https://github.com/ckeditor/ckeditor5/issues/6161" id="issue_6161_link" style="box-sizing: border-box; background-color: initial; color: rgb(36, 41, 46) !important; text-decoration: none !important; vertical-align: middle !important; font-size: 16px !important; font-weight: 600 !important;">Special characters all /<span style="font-size:8px;"><span style="color:#2980b9;"> latin categories takes noticable l</span></span>onger time to load than others</a><span> </span><span class="labels lh-default " style="box-sizing: border-box; line-height: 1.5 !important; position: relative;"><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Adomain%3Aui%2Fux" style="box-sizing: border-box; background-color: rgb(254, 242, 192); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="domain:ui/ux">domain:ui/ux</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Apackage%3Aspecial-characters" style="box-sizing: border-box; background-color: rgb(254, 242, 192); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="package:special-characters">package:special-characters</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Atype%3Aenhancement" style="box-sizing: border-box; background-color: rgb(132, 182, 235); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="type:enhancement">type:enhancement</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Atype%3Aperformance" style="box-sizing: border-box; background-color: rgb(132, 182, 235); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="type:performance">type:performance</a></span> <div class="mt-1 text-small text-gray" style="box-sizing: border-box; color: rgb(88, 96, 105) !important; margin-top: 4px !important; font-size: 12px !important;"> <span class="opened-by" style="box-sizing: border-box;">#6161 opened<span> </span> <relative-time class="no-wrap" datetime="2020-01-29T16:10:15Z" style="box-sizing: border-box; white-space: nowrap !important;" title="Jan 29, 2020, 5:10 PM GMT+1"> 23 hours ago </relative-time> <span> </span>by<span> </span><a class="muted-link" data-hovercard-type="user" data-hovercard-url="/users/mlewand/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+author%3Amlewand" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;" title="Open issues created by mlewand">mlewand</a> </span></div> </div> <div class="flex-shrink-0 col-3 pt-2 text-right pr-3 no-wrap d-grid grid-4-col grid-gap-2 " style="box-sizing: border-box; width: 244.5px; flex-shrink: 0 !important; padding-top: 8px !important; padding-right: 16px !important; text-align: right !important; white-space: nowrap !important; display: grid; column-gap: 8px; grid-template-columns: repeat(4, 1fr); grid-template-areas: "grid-col-1 grid-col-2 grid-col-3 grid-col-4";"> <div class="AvatarStack AvatarStack--right grid-col-1 " style="box-sizing: border-box; position: relative; min-width: 26px; height: 20px; grid-area: grid-col-1 / grid-col-1 / grid-col-1 / grid-col-1;"> <div aria-label="Assigned to " class="AvatarStack-body tooltipped tooltipped-sw tooltipped-multiline tooltipped-align-right-1 mt-1" style="box-sizing: border-box; position: absolute; margin-top: 4px !important; display: flex; background: rgb(255, 255, 255); right: 0px; flex-direction: row-reverse;"> </div> </div> <span class="grid-col-4" style="box-sizing: border-box; grid-area: grid-col-4 / grid-col-4 / grid-col-4 / grid-col-4;"><a aria-label="1 comment" class="muted-link" href="https://github.com/ckeditor/ckeditor5/issues/6161" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;"><svg aria-hidden="true" class="octicon octicon-comment v-align-middle" height="16" version="1.1" viewbox="0 0 16 16" width="16"> <path d="M14 1H2c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h2v3.5L7.5 11H14c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zm0 9H7l-2 2v-2H2V2h12v8z" fill-rule="evenodd"> </path> </svg><span> </span><span class="text-small text-bold" style="box-sizing: border-box; font-size: 12px !important; font-weight: 600 !important;">1</span></a></span> </div> </div> </div> <div class="Box-row Box-row--focus-gray p-0 mt-0 js-navigation-item js-issue-row" data-id="556865644" id="issue_6160" style="box-sizing: border-box; padding: 0px !important; margin-top: 0px !important; list-style-type: none; border-top: 1px solid rgb(225, 228, 232);"> <div class="d-flex Box-row--drag-hide position-relative" style="box-sizing: border-box; position: relative !important; display: flex !important;"> <div class="flex-shrink-0 pt-2 pl-3" style="box-sizing: border-box; flex-shrink: 0 !important; padding-top: 8px !important; padding-left: 16px !important;"> <span aria-label="Open issue" class="tooltipped tooltipped-e" style="box-sizing: border-box; position: relative;"><svg aria-hidden="true" class="octicon octicon-issue-opened open" height="16" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 011.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z" fill-rule="evenodd"> </path> </svg></span></div> <div class="flex-auto min-width-0 lh-condensed p-2 " style="box-sizing: border-box; flex: 1 1 auto !important; min-width: 0px !important; padding: 8px !important; line-height: 1.25 !important;"> <a class="link-gray-dark v-align-middle no-underline h4 js-navigation-open" data-hovercard-type="issue" data-hovercard-url="/ckeditor/ckeditor5/issues/6160/hovercard" href="https://github.com/ckeditor/ckeditor5/issues/6160" id="issue_6160_link" style="box-sizing: border-box; background-color: initial; color: rgb(36, 41, 46) !important; text-decoration: none !important; vertical-align: middle !important; font-size: 16px !important; font-weight: 600 !important;">config.removePlugins string doesn't work for plugins added at a runtime</a><span> </span><span class="labels lh-default " style="box-sizing: border-box; line-height: 1.5 !important; position: relative;"><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Adomain%3Adx" style="box-sizing: border-box; background-color: rgb(254, 242, 192); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="domain:dx">domain:dx</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Atype%3Abug" style="box-sizing: border-box; background-color: rgb(221, 68, 68); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="type:bug">type:bug</a></span> <div class="mt-1 text-small text-gray" style="box-sizing: border-box; color: rgb(88, 96, 105) !important; margin-top: 4px !important; font-size: 12px !important;"> <span class="opened-by" style="box-sizing: border-box;">#6160 opened<span> </span> <relative-time class="no-wrap" datetime="2020-01-29T13:34:44Z" style="box-sizing: border-box; white-space: nowrap !important;" title="Jan 29, 2020, 2:34 PM GMT+1"> yesterday </relative-time> <span> </span>by<span> </span><a class="muted-link" data-hovercard-type="user" data-hovercard-url="/users/mlewand/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+author%3Amlewand" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;" title="Open issues created by mlewand">mlewand</a> </span></div> </div> <div class="flex-shrink-0 col-3 pt-2 text-right pr-3 no-wrap d-grid grid-4-col grid-gap-2 " style="box-sizing: border-box; width: 244.5px; flex-shrink: 0 !important; padding-top: 8px !important; padding-right: 16px !important; text-align: right !important; white-space: nowrap !important; display: grid; column-gap: 8px; grid-template-columns: repeat(4, 1fr); grid-template-areas: "grid-col-1 grid-col-2 grid-col-3 grid-col-4";"> <div class="AvatarStack AvatarStack--right grid-col-1 " style="box-sizing: border-box; position: relative; min-width: 26px; height: 20px; grid-area: grid-col-1 / grid-col-1 / grid-col-1 / grid-col-1;"> <div aria-label="Assigned to " class="AvatarStack-body tooltipped tooltipped-sw tooltipped-multiline tooltipped-align-right-1 mt-1" style="box-sizing: border-box; position: absolute; margin-top: 4px !important; display: flex; background: rgb(255, 255, 255); right: 0px; flex-direction: row-reverse;"> </div> </div> </div> </div> </div> <div aria-selected="false" class="Box-row Box-row--focus-gray p-0 mt-0 js-navigation-item js-issue-row" data-id="556840990" id="issue_6159" style="box-sizing: border-box; padding: 0px !important; margin-top: 0px !important; list-style-type: none; border-top: 1px solid rgb(225, 228, 232);"> <div class="d-flex Box-row--drag-hide position-relative" style="box-sizing: border-box; position: relative !important; display: flex !important;"> <div class="flex-shrink-0 pt-2 pl-3" style="box-sizing: border-box; flex-shrink: 0 !important; padding-top: 8px !important; padding-left: 16px !important;"> <span aria-label="Open issue" class="tooltipped tooltipped-e" style="box-sizing: border-box; position: relative;"><svg aria-hidden="true" class="octicon octicon-issue-opened open" height="16" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 011.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z" fill-rule="evenodd"> </path> </svg></span></div> <div class="flex-auto min-width-0 lh-condensed p-2 " style="box-sizing: border-box; flex: 1 1 auto !important; min-width: 0px !important; padding: 8px !important; line-height: 1.25 !important;"> <a class="link-gray-dark v-align-middle no-underline h4 js-navigation-open" data-hovercard-type="issue" data-hovercard-url="/ckeditor/ckeditor5/issues/6159/hovercard" href="https://github.com/ckeditor/ckeditor5/issues/6159" id="issue_6159_link" style="box-sizing: border-box; background-color: initial; color: rgb(36, 41, 46) !important; text-decoration: none !important; vertical-align: middle !important; font-size: 16px !important; font-weight: 600 !important;">Page s<span style="color:#27ae60;">crolling when deleting the first or last row of a t</span>able</a><span> </span><span class="labels lh-default " style="box-sizing: border-box; line-height: 1.5 !important; position: relative;"><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Adomain%3Aui%2Fux" style="box-sizing: border-box; background-color: rgb(254, 242, 192); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="domain:ui/ux">domain:ui/ux</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Apackage%3Atable" style="box-sizing: border-box; background-color: rgb(254, 242, 192); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="package:table">package:table</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Astatus%3Aconfirmed" style="box-sizing: border-box; background-color: rgb(230, 230, 230); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="status:confirmed">status:confirmed</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Atype%3Abug" style="box-sizing: border-box; background-color: rgb(221, 68, 68); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="type:bug">type:bug</a></span> <div class="mt-1 text-small text-gray" style="box-sizing: border-box; color: rgb(88, 96, 105) !important; margin-top: 4px !important; font-size: 12px !important;"> <span class="opened-by" style="box-sizing: border-box;">#6159 opened<span> </span> <relative-time class="no-wrap" datetime="2020-01-29T12:49:22Z" style="box-sizing: border-box; white-space: nowrap !important;" title="Jan 29, 2020, 1:49 PM GMT+1"> yesterday </relative-time> <span> </span>by<span> </span><a class="muted-link" data-hovercard-type="user" data-hovercard-url="/users/heroicyang/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+author%3Aheroicyang" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;" title="Open issues created by heroicyang">heroicyang</a> </span></div> </div> <div class="flex-shrink-0 col-3 pt-2 text-right pr-3 no-wrap d-grid grid-4-col grid-gap-2 " style="box-sizing: border-box; width: 244.5px; flex-shrink: 0 !important; padding-top: 8px !important; padding-right: 16px !important; text-align: right !important; white-space: nowrap !important; display: grid; column-gap: 8px; grid-template-columns: repeat(4, 1fr); grid-template-areas: "grid-col-1 grid-col-2 grid-col-3 grid-col-4";"> <div class="AvatarStack AvatarStack--right grid-col-1 " style="box-sizing: border-box; position: relative; min-width: 26px; height: 20px; grid-area: grid-col-1 / grid-col-1 / grid-col-1 / grid-col-1;"> <div aria-label="Assigned to " class="AvatarStack-body tooltipped tooltipped-sw tooltipped-multiline tooltipped-align-right-1 mt-1" style="box-sizing: border-box; position: absolute; margin-top: 4px !important; display: flex; background: rgb(255, 255, 255); right: 0px; flex-direction: row-reverse;"> </div> </div> <span class="grid-col-4" style="box-sizing: border-box; grid-area: grid-col-4 / grid-col-4 / grid-col-4 / grid-col-4;"><a aria-label="1 comment" class="muted-link" href="https://github.com/ckeditor/ckeditor5/issues/6159" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;"><svg aria-hidden="true" class="octicon octicon-comment v-align-middle" height="16" version="1.1" viewbox="0 0 16 16" width="16"> <path d="M14 1H2c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h2v3.5L7.5 11H14c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zm0 9H7l-2 2v-2H2V2h12v8z" fill-rule="evenodd"> </path> </svg><span> </span><span class="text-small text-bold" style="box-sizing: border-box; font-size: 12px !important; font-weight: 600 !important;">1</span></a></span> </div> </div> </div> <div aria-selected="false" class="Box-row Box-row--focus-gray p-0 mt-0 js-navigation-item js-issue-row" data-id="556769394" id="issue_6158" style="box-sizing: border-box; padding: 0px !important; margin-top: 0px !important; list-style-type: none; border-top: 1px solid rgb(225, 228, 232);"> <div class="d-flex Box-row--drag-hide position-relative" style="box-sizing: border-box; position: relative !important; display: flex !important;"> <div class="flex-shrink-0 pt-2 pl-3" style="box-sizing: border-box; flex-shrink: 0 !important; padding-top: 8px !important; padding-left: 16px !important;"> <span aria-label="Open issue" class="tooltipped tooltipped-e" style="box-sizing: border-box; position: relative;"><svg aria-hidden="true" class="octicon octicon-issue-opened open" height="16" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 011.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z" fill-rule="evenodd"> </path> </svg></span></div> <div class="flex-auto min-width-0 lh-condensed p-2 " style="box-sizing: border-box; flex: 1 1 auto !important; min-width: 0px !important; padding: 8px !important; line-height: 1.25 !important;"> <a class="link-gray-dark v-align-middle no-underline h4 js-navigation-open" data-hovercard-type="issue" data-hovercard-url="/ckeditor/ckeditor5/issues/6158/hovercard" href="https://github.com/ckeditor/ckeditor5/issues/6158" id="issue_6158_link" style="box-sizing: border-box; background-color: initial; color: rgb(36, 41, 46) !important; text-decoration: none !important; vertical-align: middle !important; font-size: 16px !important; font-weight: 600 !important;">Improve Locale.t() to handle context and plurals.</a><span> </span><span class="labels lh-default " style="box-sizing: border-box; line-height: 1.5 !important; position: relative;"><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Adomain%3Aaccessibility" style="box-sizing: border-box; background-color: rgb(254, 242, 192); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="domain:accessibility">domain:accessibility</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Adomain%3Adx" style="box-sizing: border-box; background-color: rgb(254, 242, 192); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="domain:dx">domain:dx</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Apackage%3Autils" style="box-sizing: border-box; background-color: rgb(254, 242, 192); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="package:utils">package:utils</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Atype%3Aenhancement" style="box-sizing: border-box; background-color: rgb(132, 182, 235); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="type:enhancement">type:enhancement</a></span> <div class="mt-1 text-small text-gray" style="box-sizing: border-box; color: rgb(88, 96, 105) !important; margin-top: 4px !important; font-size: 12px !important;"> <span class="opened-by" style="box-sizing: border-box;">#6158 opened<span> </span> <relative-time class="no-wrap" datetime="2020-01-29T10:27:11Z" style="box-sizing: border-box; white-space: nowrap !important;" title="Jan 29, 2020, 11:27 AM GMT+1"> yesterday </relative-time> <span> </span>by<span> </span><a class="muted-link" data-hovercard-type="user" data-hovercard-url="/users/phaux/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+author%3Aphaux" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;" title="Open issues created by phaux">phaux</a> </span></div> </div> <div class="flex-shrink-0 col-3 pt-2 text-right pr-3 no-wrap d-grid grid-4-col grid-gap-2 " style="box-sizing: border-box; width: 244.5px; flex-shrink: 0 !important; padding-top: 8px !important; padding-right: 16px !important; text-align: right !important; white-space: nowrap !important; display: grid; column-gap: 8px; grid-template-columns: repeat(4, 1fr); grid-template-areas: "grid-col-1 grid-col-2 grid-col-3 grid-col-4";"> <div class="AvatarStack AvatarStack--right grid-col-1 " style="box-sizing: border-box; position: relative; min-width: 26px; height: 20px; grid-area: grid-col-1 / grid-col-1 / grid-col-1 / grid-col-1;"> <div aria-label="Assigned to " class="AvatarStack-body tooltipped tooltipped-sw tooltipped-multiline tooltipped-align-right-1 mt-1" style="box-sizing: border-box; position: absolute; margin-top: 4px !important; display: flex; background: rgb(255, 255, 255); right: 0px; flex-direction: row-reverse;"> </div> </div> </div> </div> </div> <div aria-selected="false" class="Box-row Box-row--focus-gray p-0 mt-0 js-navigation-item js-issue-row" data-id="556664030" id="issue_6156" style="box-sizing: border-box; padding: 0px !important; margin-top: 0px !important; list-style-type: none; border-top: 1px solid rgb(225, 228, 232);"> <div class="d-flex Box-row--drag-hide position-relative" style="box-sizing: border-box; position: relative !important; display: flex !important;"> <div class="flex-shrink-0 pt-2 pl-3" style="box-sizing: border-box; flex-shrink: 0 !important; padding-top: 8px !important; padding-left: 16px !important;"> <span aria-label="Open issue" class="tooltipped tooltipped-e" style="box-sizing: border-box; position: relative;"><svg aria-hidden="true" class="octicon octicon-issue-opened open" height="16" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 011.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z" fill-rule="evenodd"> </path> </svg></span></div> <div class="flex-auto min-width-0 lh-condensed p-2 " style="box-sizing: border-box; flex: 1 1 auto !important; min-width: 0px !important; padding: 8px !important; line-height: 1.25 !important;"> <a class="link-gray-dark v-align-middle no-underline h4 js-navigation-open" data-hovercard-type="issue" data-hovercard-url="/ckeditor/ckeditor5/issues/6156/hovercard" href="https://github.com/ckeditor/ckeditor5/issues/6156" id="issue_6156_link" style="box-sizing: border-box; background-color: initial; color: rgb(36, 41, 46) !important; text-decoration: none !important; vertical-align: middle !important; font-size: 16px !important; font-weight: 600 !important;">Ckeditor 5 is not rendered the view<span> </span></a><span class="labels lh-default " style="box-sizing: border-box; line-height: 1.5 !important; position: relative;"><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Atype%3Abug" style="box-sizing: border-box; background-color: rgb(221, 68, 68); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="type:bug">type:bug</a></span> <div class="mt-1 text-small text-gray" style="box-sizing: border-box; color: rgb(88, 96, 105) !important; margin-top: 4px !important; font-size: 12px !important;"> <span class="opened-by" style="box-sizing: border-box;">#6156 opened<span> </span> <relative-time class="no-wrap" datetime="2020-01-29T06:25:49Z" style="box-sizing: border-box; white-space: nowrap !important;" title="Jan 29, 2020, 7:25 AM GMT+1"> yesterday </relative-time> <span> </span>by<span> </span><a class="muted-link" data-hovercard-type="user" data-hovercard-url="/users/lingamwin/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+author%3Alingamwin" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;" title="Open issues created by lingamwin">lingamwin</a> </span></div> </div> <div class="flex-shrink-0 col-3 pt-2 text-right pr-3 no-wrap d-grid grid-4-col grid-gap-2 " style="box-sizing: border-box; width: 244.5px; flex-shrink: 0 !important; padding-top: 8px !important; padding-right: 16px !important; text-align: right !important; white-space: nowrap !important; display: grid; column-gap: 8px; grid-template-columns: repeat(4, 1fr); grid-template-areas: "grid-col-1 grid-col-2 grid-col-3 grid-col-4";"> <div class="AvatarStack AvatarStack--right grid-col-1 " style="box-sizing: border-box; position: relative; min-width: 26px; height: 20px; grid-area: grid-col-1 / grid-col-1 / grid-col-1 / grid-col-1;"> <div aria-label="Assigned to " class="AvatarStack-body tooltipped tooltipped-sw tooltipped-multiline tooltipped-align-right-1 mt-1" style="box-sizing: border-box; position: absolute; margin-top: 4px !important; display: flex; background: rgb(255, 255, 255); right: 0px; flex-direction: row-reverse;"> </div> </div> </div> </div> </div> <div aria-selected="false" class="Box-row Box-row--focus-gray p-0 mt-0 js-navigation-item js-issue-row" data-id="556662531" id="issue_6155" style="box-sizing: border-box; padding: 0px !important; margin-top: 0px !important; list-style-type: none; border-top: 1px solid rgb(225, 228, 232);"> <div class="d-flex Box-row--drag-hide position-relative" style="box-sizing: border-box; position: relative !important; display: flex !important;"> <div class="flex-shrink-0 pt-2 pl-3" style="box-sizing: border-box; flex-shrink: 0 !important; padding-top: 8px !important; padding-left: 16px !important;"> <span aria-label="Open issue" class="tooltipped tooltipped-e" style="box-sizing: border-box; position: relative;"><svg aria-hidden="true" class="octicon octicon-issue-opened open" height="16" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 011.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z" fill-rule="evenodd"> </path> </svg></span></div> <div class="flex-auto min-width-0 lh-condensed p-2 " style="box-sizing: border-box; flex: 1 1 auto !important; min-width: 0px !important; padding: 8px !important; line-height: 1.25 !important;"> <a class="link-gray-dark v-align-middle no-underline h4 js-navigation-open" data-hovercard-type="issue" data-hovercard-url="/ckeditor/ckeditor5/issues/6155/hovercard" href="https://github.com/ckeditor/ckeditor5/issues/6155" id="issue_6155_link" style="box-sizing: border-box; background-color: initial; color: rgb(36, 41, 46) !important; text-decoration: none !important; vertical-align: middle !important; font-size: 16px !important; font-weight: 600 !important;">Render dynamic svg content into ckeditor<span> </span></a><span class="labels lh-default " style="box-sizing: border-box; line-height: 1.5 !important; position: relative;"><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Atype%3Afeature" style="box-sizing: border-box; background-color: rgb(132, 182, 235); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="type:feature">type:feature</a></span> <div class="mt-1 text-small text-gray" style="box-sizing: border-box; color: rgb(88, 96, 105) !important; margin-top: 4px !important; font-size: 12px !important;"> <span class="opened-by" style="box-sizing: border-box;">#6155 opened<span> </span> <relative-time class="no-wrap" datetime="2020-01-29T06:20:46Z" style="box-sizing: border-box; white-space: nowrap !important;" title="Jan 29, 2020, 7:20 AM GMT+1"> yesterday </relative-time> <span> </span>by<span> </span><a class="muted-link" data-hovercard-type="user" data-hovercard-url="/users/lingamwin/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+author%3Alingamwin" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;" title="Open issues created by lingamwin">lingamwin</a> </span></div> </div> <div class="flex-shrink-0 col-3 pt-2 text-right pr-3 no-wrap d-grid grid-4-col grid-gap-2 " style="box-sizing: border-box; width: 244.5px; flex-shrink: 0 !important; padding-top: 8px !important; padding-right: 16px !important; text-align: right !important; white-space: nowrap !important; display: grid; column-gap: 8px; grid-template-columns: repeat(4, 1fr); grid-template-areas: "grid-col-1 grid-col-2 grid-col-3 grid-col-4";"> <div class="AvatarStack AvatarStack--right grid-col-1 " style="box-sizing: border-box; position: relative; min-width: 26px; height: 20px; grid-area: grid-col-1 / grid-col-1 / grid-col-1 / grid-col-1;"> <div aria-label="Assigned to " class="AvatarStack-body tooltipped tooltipped-sw tooltipped-multiline tooltipped-align-right-1 mt-1" style="box-sizing: border-box; position: absolute; margin-top: 4px !important; display: flex; background: rgb(255, 255, 255); right: 0px; flex-direction: row-reverse;"> </div> </div> </div> </div> </div> <div aria-selected="false" class="Box-row Box-row--focus-gray p-0 mt-0 js-navigation-item js-issue-row" data-id="556394709" id="issue_6154" style="box-sizing: border-box; padding: 0px !important; margin-top: 0px !important; list-style-type: none; border-top: 1px solid rgb(225, 228, 232);"> <div class="d-flex Box-row--drag-hide position-relative" style="box-sizing: border-box; position: relative !important; display: flex !important;"> <div class="flex-shrink-0 pt-2 pl-3" style="box-sizing: border-box; flex-shrink: 0 !important; padding-top: 8px !important; padding-left: 16px !important;"> <span aria-label="Open issue" class="tooltipped tooltipped-e" style="box-sizing: border-box; position: relative;"><svg aria-hidden="true" class="octicon octicon-issue-opened open" height="16" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 011.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z" fill-rule="evenodd"> </path> </svg></span></div> <div class="flex-auto min-width-0 lh-condensed p-2 " style="box-sizing: border-box; flex: 1 1 auto !important; min-width: 0px !important; padding: 8px !important; line-height: 1.25 !important;"> <a class="link-gray-dark v-align-middle no-underline h4 js-navigation-open" data-hovercard-type="issue" data-hovercard-url="/ckeditor/ckeditor5/issues/6154/hovercard" href="https://github.com/ckeditor/ckeditor5/issues/6154" id="issue_6154_link" style="box-sizing: border-box; background-color: initial; color: rgb(36, 41, 46) !important; text-decoration: none !important; vertical-align: middle !important; font-size: 16px !important; font-weight: 600 !important;">Allow selection to be set on object elements</a><span> </span><span class="labels lh-default " style="box-sizing: border-box; line-height: 1.5 !important; position: relative;"><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Apackage%3Aengine" style="box-sizing: border-box; background-color: rgb(254, 242, 192); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="package:engine">package:engine</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Atype%3Aenhancement" style="box-sizing: border-box; background-color: rgb(132, 182, 235); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="type:enhancement">type:enhancement</a></span> <div class="mt-1 text-small text-gray" style="box-sizing: border-box; color: rgb(88, 96, 105) !important; margin-top: 4px !important; font-size: 12px !important;"> <span class="opened-by" style="box-sizing: border-box;">#6154 opened<span> </span> <relative-time class="no-wrap" datetime="2020-01-28T18:40:57Z" style="box-sizing: border-box; white-space: nowrap !important;" title="Jan 28, 2020, 7:40 PM GMT+1"> 2 days ago </relative-time> <span> </span>by<span> </span><a class="muted-link" data-hovercard-type="user" data-hovercard-url="/users/jodator/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+author%3Ajodator" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;" title="Open issues created by jodator">jodator</a><span> </span> </span><span class="issue-meta-section css-truncate issue-milestone ml-2 " style="box-sizing: border-box; margin-left: 8px !important; max-width: 240px;"><a aria-label="iteration 29" class="milestone-link muted-link css-truncate tooltipped tooltipped-n" href="https://github.com/ckeditor/ckeditor5/milestone/32" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none; position: relative;"><svg aria-label="Milestone" class="octicon octicon-milestone" height="16" role="img" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M8 2H6V0h2v2zm4 5H2c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h10l2 2-2 2zM8 4H6v2h2V4zM6 16h2V8H6v8z" fill-rule="evenodd"> </path> </svg><span> </span><span class="css-truncate-target" style="box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 100px; vertical-align: top;">iteration 29</span></a></span></div> </div> <div class="flex-shrink-0 col-3 pt-2 text-right pr-3 no-wrap d-grid grid-4-col grid-gap-2 " style="box-sizing: border-box; width: 244.5px; flex-shrink: 0 !important; padding-top: 8px !important; padding-right: 16px !important; text-align: right !important; white-space: nowrap !important; display: grid; column-gap: 8px; grid-template-columns: repeat(4, 1fr); grid-template-areas: "grid-col-1 grid-col-2 grid-col-3 grid-col-4";"> <div class="AvatarStack AvatarStack--right grid-col-1 " style="box-sizing: border-box; position: relative; min-width: 26px; height: 20px; grid-area: grid-col-1 / grid-col-1 / grid-col-1 / grid-col-1;"> <div aria-label="Assigned to jodator" class="AvatarStack-body tooltipped tooltipped-sw tooltipped-multiline tooltipped-align-right-1 mt-1" style="box-sizing: border-box; position: absolute; margin-top: 4px !important; display: flex; background: rgb(255, 255, 255); right: 0px; flex-direction: row-reverse;"> <a aria-label="jodator’s assigned issues" class="avatar" href="https://github.com/ckeditor/ckeditor5/issues?q=assignee%3Ajodator+is%3Aopen" style="box-sizing: initial; background-color: rgb(255, 255, 255); color: rgb(3, 102, 214); text-decoration: none; display: flex; overflow: hidden; line-height: 1; vertical-align: middle; border-radius: 2px; position: relative; z-index: 1; width: 20px; height: 20px; margin-right: 0px; border-right: 0px; transition: margin 0.1s ease-in-out 0s; margin-left: -11px; border-left: 1px solid rgb(255, 255, 255);"><img alt="@jodator" class="from-avatar" height="20" src="https://avatars1.githubusercontent.com/u/247363?s=40&v=4" style="box-sizing: border-box; border-style: none; border-radius: 2px;" width="20" /></a></div> </div> </div> </div> </div> <div aria-selected="false" class="Box-row Box-row--focus-gray p-0 mt-0 js-navigation-item js-issue-row" data-id="556244754" id="issue_6153" style="box-sizing: border-box; padding: 0px !important; margin-top: 0px !important; list-style-type: none; border-top: 1px solid rgb(225, 228, 232);"> <div class="d-flex Box-row--drag-hide position-relative" style="box-sizing: border-box; position: relative !important; display: flex !important;"> <div class="flex-shrink-0 pt-2 pl-3" style="box-sizing: border-box; flex-shrink: 0 !important; padding-top: 8px !important; padding-left: 16px !important;"> <span aria-label="Open issue" class="tooltipped tooltipped-e" style="box-sizing: border-box; position: relative;"><svg aria-hidden="true" class="octicon octicon-issue-opened open" height="16" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 011.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z" fill-rule="evenodd"> </path> </svg></span></div> <div class="flex-auto min-width-0 lh-condensed p-2 " style="box-sizing: border-box; flex: 1 1 auto !important; min-width: 0px !important; padding: 8px !important; line-height: 1.25 !important;"> <a class="link-gray-dark v-align-middle no-underline h4 js-navigation-open" data-hovercard-type="issue" data-hovercard-url="/ckeditor/ckeditor5/issues/6153/hovercard" href="https://github.com/ckeditor/ckeditor5/issues/6153" id="issue_6153_link" style="box-sizing: border-box; background-color: initial; color: rgb(36, 41, 46) !important; text-decoration: none !important; vertical-align: middle !important; font-size: 16px !important; font-weight: 600 !important;">CKEditor 5 - Toolbar is not starting correctly with hidden items when using 100% width</a><span> </span><span class="labels lh-default " style="box-sizing: border-box; line-height: 1.5 !important; position: relative;"><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Apending%3Afeedback" style="box-sizing: border-box; background-color: rgb(153, 153, 153); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="pending:feedback">pending:feedback</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Atype%3Abug" style="box-sizing: border-box; background-color: rgb(221, 68, 68); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="type:bug">type:bug</a></span> <div class="mt-1 text-small text-gray" style="box-sizing: border-box; color: rgb(88, 96, 105) !important; margin-top: 4px !important; font-size: 12px !important;"> <span class="opened-by" style="box-sizing: border-box;">#6153 opened<span> </span> <relative-time class="no-wrap" datetime="2020-01-28T14:26:06Z" style="box-sizing: border-box; white-space: nowrap !important;" title="Jan 28, 2020, 3:26 PM GMT+1"> 2 days ago </relative-time> <span> </span>by<span> </span><a class="muted-link" data-hovercard-type="user" data-hovercard-url="/users/aadmaquino/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+author%3Aaadmaquino" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;" title="Open issues created by aadmaquino">aadmaquino</a> </span></div> </div> <div class="flex-shrink-0 col-3 pt-2 text-right pr-3 no-wrap d-grid grid-4-col grid-gap-2 " style="box-sizing: border-box; width: 244.5px; flex-shrink: 0 !important; padding-top: 8px !important; padding-right: 16px !important; text-align: right !important; white-space: nowrap !important; display: grid; column-gap: 8px; grid-template-columns: repeat(4, 1fr); grid-template-areas: "grid-col-1 grid-col-2 grid-col-3 grid-col-4";"> <div class="AvatarStack AvatarStack--right grid-col-1 " style="box-sizing: border-box; position: relative; min-width: 26px; height: 20px; grid-area: grid-col-1 / grid-col-1 / grid-col-1 / grid-col-1;"> <div aria-label="Assigned to " class="AvatarStack-body tooltipped tooltipped-sw tooltipped-multiline tooltipped-align-right-1 mt-1" style="box-sizing: border-box; position: absolute; margin-top: 4px !important; display: flex; background: rgb(255, 255, 255); right: 0px; flex-direction: row-reverse;"> </div> </div> <span class="grid-col-4" style="box-sizing: border-box; grid-area: grid-col-4 / grid-col-4 / grid-col-4 / grid-col-4;"><a aria-label="3 comments" class="muted-link" href="https://github.com/ckeditor/ckeditor5/issues/6153" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;"><svg aria-hidden="true" class="octicon octicon-comment v-align-middle" height="16" version="1.1" viewbox="0 0 16 16" width="16"> <path d="M14 1H2c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h2v3.5L7.5 11H14c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zm0 9H7l-2 2v-2H2V2h12v8z" fill-rule="evenodd"> </path> </svg><span> </span><span class="text-small text-bold" style="box-sizing: border-box; font-size: 12px !important; font-weight: 600 !important;">3</span></a></span> </div> </div> </div> <div class="Box-row Box-row--focus-gray p-0 mt-0 js-navigation-item js-issue-row" data-id="556143005" id="issue_6151" style="box-sizing: border-box; padding: 0px !important; margin-top: 0px !important; list-style-type: none; border-top: 1px solid rgb(225, 228, 232);"> <div class="d-flex Box-row--drag-hide position-relative" style="box-sizing: border-box; position: relative !important; display: flex !important;"> <div class="flex-shrink-0 pt-2 pl-3" style="box-sizing: border-box; flex-shrink: 0 !important; padding-top: 8px !important; padding-left: 16px !important;"> <span aria-label="Open issue" class="tooltipped tooltipped-e" style="box-sizing: border-box; position: relative;"><svg aria-hidden="true" class="octicon octicon-issue-opened open" height="16" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 011.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z" fill-rule="evenodd"> </path> </svg></span></div> <div class="flex-auto min-width-0 lh-condensed p-2 " style="box-sizing: border-box; flex: 1 1 auto !important; min-width: 0px !important; padding: 8px !important; line-height: 1.25 !important;"> <a class="link-gray-dark v-align-middle no-underline h4 js-navigation-open" data-hovercard-type="issue" data-hovercard-url="/ckeditor/ckeditor5/issues/6151/hovercard" href="https://github.com/ckeditor/ckeditor5/issues/6151" id="issue_6151_link" style="box-sizing: border-box; background-color: initial; color: rgb(36, 41, 46) !important; text-decoration: none !important; vertical-align: middle !important; font-size: 16px !important; font-weight: 600 !important;">Test how Table features work with and without TableSelection</a><span> </span><span class="labels lh-default " style="box-sizing: border-box; line-height: 1.5 !important; position: relative;"><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Apackage%3Atable" style="box-sizing: border-box; background-color: rgb(254, 242, 192); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="package:table">package:table</a></span> <div class="mt-1 text-small text-gray" style="box-sizing: border-box; color: rgb(88, 96, 105) !important; margin-top: 4px !important; font-size: 12px !important;"> <span class="opened-by" style="box-sizing: border-box;">#6151 opened<span> </span> <relative-time class="no-wrap" datetime="2020-01-28T11:19:46Z" style="box-sizing: border-box; white-space: nowrap !important;" title="Jan 28, 2020, 12:19 PM GMT+1"> 2 days ago </relative-time> <span> </span>by<span> </span><a class="muted-link" data-hovercard-type="user" data-hovercard-url="/users/jodator/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+author%3Ajodator" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;" title="Open issues created by jodator">jodator</a><span> </span> </span><span class="issue-meta-section css-truncate issue-milestone ml-2 " style="box-sizing: border-box; margin-left: 8px !important; max-width: 240px;"><a aria-label="iteration 30" class="milestone-link muted-link css-truncate tooltipped tooltipped-n" href="https://github.com/ckeditor/ckeditor5/milestone/33" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none; position: relative;"><svg aria-label="Milestone" class="octicon octicon-milestone" height="16" role="img" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M8 2H6V0h2v2zm4 5H2c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h10l2 2-2 2zM8 4H6v2h2V4zM6 16h2V8H6v8z" fill-rule="evenodd"> </path> </svg><span> </span><span class="css-truncate-target" style="box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 100px; vertical-align: top;">iteration 30</span></a></span></div> </div> <div class="flex-shrink-0 col-3 pt-2 text-right pr-3 no-wrap d-grid grid-4-col grid-gap-2 " style="box-sizing: border-box; width: 244.5px; flex-shrink: 0 !important; padding-top: 8px !important; padding-right: 16px !important; text-align: right !important; white-space: nowrap !important; display: grid; column-gap: 8px; grid-template-columns: repeat(4, 1fr); grid-template-areas: "grid-col-1 grid-col-2 grid-col-3 grid-col-4";"> <div class="AvatarStack AvatarStack--right grid-col-1 " style="box-sizing: border-box; position: relative; min-width: 26px; height: 20px; grid-area: grid-col-1 / grid-col-1 / grid-col-1 / grid-col-1;"> <div aria-label="Assigned to " class="AvatarStack-body tooltipped tooltipped-sw tooltipped-multiline tooltipped-align-right-1 mt-1" style="box-sizing: border-box; position: absolute; margin-top: 4px !important; display: flex; background: rgb(255, 255, 255); right: 0px; flex-direction: row-reverse;"> </div> </div> </div> </div> </div> <div class="Box-row Box-row--focus-gray p-0 mt-0 js-navigation-item js-issue-row" data-id="556139612" id="issue_6150" style="box-sizing: border-box; padding: 0px !important; margin-top: 0px !important; list-style-type: none; border-top: 1px solid rgb(225, 228, 232);"> <div class="d-flex Box-row--drag-hide position-relative" style="box-sizing: border-box; position: relative !important; display: flex !important;"> <div class="flex-shrink-0 pt-2 pl-3" style="box-sizing: border-box; flex-shrink: 0 !important; padding-top: 8px !important; padding-left: 16px !important;"> <span aria-label="Open issue" class="tooltipped tooltipped-e" style="box-sizing: border-box; position: relative;"><svg aria-hidden="true" class="octicon octicon-issue-opened open" height="16" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 011.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z" fill-rule="evenodd"> </path> </svg></span></div> <div class="flex-auto min-width-0 lh-condensed p-2 " style="box-sizing: border-box; flex: 1 1 auto !important; min-width: 0px !important; padding: 8px !important; line-height: 1.25 !important;"> <a class="link-gray-dark v-align-middle no-underline h4 js-navigation-open" data-hovercard-type="issue" data-hovercard-url="/ckeditor/ckeditor5/issues/6150/hovercard" href="https://github.com/ckeditor/ckeditor5/issues/6150" id="issue_6150_link" style="box-sizing: border-box; background-color: initial; color: rgb(36, 41, 46) !important; text-decoration: none !important; vertical-align: middle !important; font-size: 16px !important; font-weight: 600 !important;">Align table styles UI to multi<span style="background-color:#e74c3c;">-range selection</span></a><span style="background-color:#e74c3c;"> </span><span class="labels lh-default " style="box-sizing: border-box; line-height: 1.5 !important; position: relative;"><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Adomain%3Aui%2Fux" style="box-sizing: border-box; background-color: rgb(254, 242, 192); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="domain:ui/ux"><span style="background-color:#e74c3c;">domain:ui/ux</span></a><span style="background-color:#e74c3c;"> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Apackage%3Atable" style="box-sizing: border-box; background-color: rgb(254, 242, 192); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="package:table"><span style="background-color:#e74c3c;">package:table</span></a><span style="background-color:#e74c3c;"> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Atype%3Aenhancement" style="box-sizing: border-box; background-color: rgb(132, 182, 235); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="type:enhancement"><span style="background-color:#e74c3c;">type:enhancement</span></a></span> <div class="mt-1 text-small text-gray" style="box-sizing: border-box; color: rgb(88, 96, 105) !important; margin-top: 4px !important; font-size: 12px !important;"> <span class="opened-by" style="box-sizing: border-box;"><span style="background-color:#e74c3c;">#6150 opened </span> <relative-time class="no-wrap" datetime="2020-01-28T11:13:28Z" style="box-sizing: border-box; white-space: nowrap !important;" title="Jan 28, 2020, 12:13 PM GMT+1"><span style="background-color:#e74c3c;"> 2 days ago</span> </relative-time><span style="background-color:#e74c3c;"> by </span><a class="muted-link" data-hovercard-type="user" data-hovercard-url="/users/jodator/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+author%3Ajodator" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;" title="Open issues created by jodator"><span style="background-color:#e74c3c;">jodator</span></a><span style="background-color:#e74c3c;"> </span> </span><span class="issue-meta-section css-truncate issue-milestone ml-2 " style="box-sizing: border-box; margin-left: 8px !important; max-width: 240px;"><a aria-label="iteration 30" class="milestone-link muted-link css-truncate tooltipped tooltipped-n" href="https://github.com/ckeditor/ckeditor5/milestone/33" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none; position: relative;"><svg aria-label="Milestone" class="octicon octicon-milestone" height="16" role="img" version="1.1" viewbox="0 0 14 16" width="14"><span style="background-color:#e74c3c;"> </span> <path d="M8 2H6V0h2v2zm4 5H2c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h10l2 2-2 2zM8 4H6v2h2V4zM6 16h2V8H6v8z" fill-rule="evenodd"><span style="background-color:#e74c3c;"> </span> </path><span style="background-color:#e74c3c;"> </span> </svg><span style="background-color:#e74c3c;"> </span><span class="css-truncate-target" style="box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 100px; vertical-align: top;"><span style="background-color:#e74c3c;">iteration 30</span></span></a></span></div> </div> <div class="flex-shrink-0 col-3 pt-2 text-right pr-3 no-wrap d-grid grid-4-col grid-gap-2 " style="box-sizing: border-box; width: 244.5px; flex-shrink: 0 !important; padding-top: 8px !important; padding-right: 16px !important; text-align: right !important; white-space: nowrap !important; display: grid; column-gap: 8px; grid-template-columns: repeat(4, 1fr); grid-template-areas: "grid-col-1 grid-col-2 grid-col-3 grid-col-4";"> <div class="AvatarStack AvatarStack--right grid-col-1 " style="box-sizing: border-box; position: relative; min-width: 26px; height: 20px; grid-area: grid-col-1 / grid-col-1 / grid-col-1 / grid-col-1;"> <div aria-label="Assigned to " class="AvatarStack-body tooltipped tooltipped-sw tooltipped-multiline tooltipped-align-right-1 mt-1" style="box-sizing: border-box; position: absolute; margin-top: 4px !important; display: flex; background: rgb(255, 255, 255); right: 0px; flex-direction: row-reverse;"> </div> </div> </div> </div> </div> <div class="Box-row Box-row--focus-gray p-0 mt-0 js-navigation-item js-issue-row" data-id="555523498" id="issue_6146" style="box-sizing: border-box; padding: 0px !important; margin-top: 0px !important; list-style-type: none; border-top: 1px solid rgb(225, 228, 232);"> <div class="d-flex Box-row--drag-hide position-relative" style="box-sizing: border-box; position: relative !important; display: flex !important;"> <div class="flex-shrink-0 pt-2 pl-3" style="box-sizing: border-box; flex-shrink: 0 !important; padding-top: 8px !important; padding-left: 16px !important;"> <span aria-label="Open issue" class="tooltipped tooltipped-e" style="box-sizing: border-box; position: relative;"><svg aria-hidden="true" class="octicon octicon-issue-opened open" height="16" version="1.1" viewbox="0 0 14 16" width="14"><span style="background-color:#e74c3c;"> </span> <path d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 011.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z" fill-rule="evenodd"><span style="background-color:#e74c3c;"> </span></path><span style="background-color:#e74c3c;"> </span> </svg></span></div> <div class="flex-auto min-width-0 lh-condensed p-2 " style="box-sizing: border-box; flex: 1 1 auto !important; min-width: 0px !important; padding: 8px !important; line-height: 1.25 !important;"> <a class="link-gray-dark v-align-middle no-underline h4 js-navigation-open" data-hovercard-type="issue" data-hovercard-url="/ckeditor/ckeditor5/issues/6146/hovercard" href="https://github.com/ckeditor/ckeditor5/issues/6146" id="issue_6146_link" style="box-sizing: border-box; background-color: initial; color: rgb(36, 41, 46) !important; text-decoration: none !important; vertical-align: middle !important; font-size: 16px !important; font-weight: 600 !important;"><span style="background-color:#e74c3c;">CKEditor Toolbar - Line break</span></a><span style="background-color:#e74c3c;"> </span><span class="labels lh-default " style="box-sizing: border-box; line-height: 1.5 !important; position: relative;"><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Atype%3Afeature" style="box-sizing: border-box; background-color: rgb(132, 182, 235); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="type:feature"><span style="background-color:#e74c3c;">type:feature</span></a></span> <div class="mt-1 text-small text-gray" style="box-sizing: border-box; color: rgb(88, 96, 105) !important; margin-top: 4px !important; font-size: 12px !important;"> <span class="opened-by" style="box-sizing: border-box;"><span style="background-color:#e74c3c;">#6146 opened </span> <relative-time class="no-wrap" datetime="2020-01-27T11:49:00Z" style="box-sizing: border-box; white-space: nowrap !important;" title="Jan 27, 2020, 12:49 PM GMT+1"><span style="background-color:#e74c3c;"> 3 days ago</span> </relative-time><span style="background-color:#e74c3c;"> by </span><a class="muted-link" data-hovercard-type="user" data-hovercard-url="/users/thorleifjaocbsen/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+author%3Athorleifjaocbsen" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;" title="Open issues created by thorleifjaocbsen"><span style="background-color:#e74c3c;">thorleifjaocbsen</span></a><span style="background-color:#e74c3c;"> </span> </span></div> </div> <div class="flex-shrink-0 col-3 pt-2 text-right pr-3 no-wrap d-grid grid-4-col grid-gap-2 " style="box-sizing: border-box; width: 244.5px; flex-shrink: 0 !important; padding-top: 8px !important; padding-right: 16px !important; text-align: right !important; white-space: nowrap !important; display: grid; column-gap: 8px; grid-template-columns: repeat(4, 1fr); grid-template-areas: "grid-col-1 grid-col-2 grid-col-3 grid-col-4";"> <div class="AvatarStack AvatarStack--right grid-col-1 " style="box-sizing: border-box; position: relative; min-width: 26px; height: 20px; grid-area: grid-col-1 / grid-col-1 / grid-col-1 / grid-col-1;"> <div aria-label="Assigned to " class="AvatarStack-body tooltipped tooltipped-sw tooltipped-multiline tooltipped-align-right-1 mt-1" style="box-sizing: border-box; position: absolute; margin-top: 4px !important; display: flex; background: rgb(255, 255, 255); right: 0px; flex-direction: row-reverse;"> </div> </div> </div> </div> </div> <div aria-selected="true" class="Box-row Box-row--focus-gray p-0 mt-0 js-navigation-item js-issue-row navigation-focus" data-id="555467929" id="issue_6145" style="box-sizing: border-box; padding: 0px !important; margin-top: 0px !important; list-style-type: none; border-top: 1px solid rgb(225, 228, 232); background-color: rgb(246, 248, 250);"> <div class="d-flex Box-row--drag-hide position-relative" style="box-sizing: border-box; position: relative !important; display: flex !important;"> <div class="flex-shrink-0 pt-2 pl-3" style="box-sizing: border-box; flex-shrink: 0 !important; padding-top: 8px !important; padding-left: 16px !important;"> <span aria-label="Open issue" class="tooltipped tooltipped-e" style="box-sizing: border-box; position: relative;"><svg aria-hidden="true" class="octicon octicon-issue-opened open" height="16" version="1.1" viewbox="0 0 14 16" width="14"><span style="background-color:#e74c3c;"> </span> <path d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 011.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z" fill-rule="evenodd"><span style="background-color:#e74c3c;"> </span></path><span style="background-color:#e74c3c;"> </span> </svg></span></div> <div class="flex-auto min-width-0 lh-condensed p-2 " style="box-sizing: border-box; flex: 1 1 auto !important; min-width: 0px !important; padding: 8px !important; line-height: 1.25 !important;"> <a class="link-gray-dark v-align-middle no-underline h4 js-navigation-open" data-hovercard-type="issue" data-hovercard-url="/ckeditor/ckeditor5/issues/6145/hovercard" href="https://github.com/ckeditor/ckeditor5/issues/6145" id="issue_6145_link" style="box-sizing: border-box; background-color: initial; color: rgb(36, 41, 46) !important; text-decoration: none !important; vertical-align: middle !important; font-size: 16px !important; font-weight: 600 !important;"><span style="background-color:#e74c3c;">Make the getResizeObserver re-use a single observer instance for performance reasons</span></a><span style="background-color:#e74c3c;"> </span><span class="labels lh-default " style="box-sizing: border-box; line-height: 1.5 !important; position: relative;"><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Adomain%3Aui%2Fux" style="box-sizing: border-box; background-color: rgb(254, 242, 192); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="domain:ui/ux"><span style="background-color:#e74c3c;">domain:ui/ux</span></a><span style="background-color:#e74c3c;"> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Apackage%3Autils" style="box-sizing: border-box; background-color: rgb(254, 242, 192); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="package:utils"><span style="background-color:#e74c3c;">package:utils</span></a><span style="background-color:#e74c3c;"> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Atype%3Aperformance" style="box-sizing: border-box; background-color: rgb(132, 182, 235); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="type:performance"><span style="background-color:#e74c3c;">type:performan</span>ce</a></span> <div class="mt-1 text-small text-gray" style="box-sizing: border-box; color: rgb(88, 96, 105) !important; margin-top: 4px !important; font-size: 12px !important;"> <span class="opened-by" style="box-sizing: border-box;">#6145 opened<span> </span> <relative-time class="no-wrap" datetime="2020-01-27T10:01:21Z" style="box-sizing: border-box; white-space: nowrap !important;" title="Jan 27, 2020, 11:01 AM GMT+1"> 3 days ago </relative-time> <span> </span>by<span> </span><a class="muted-link" data-hovercard-type="user" data-hovercard-url="/users/oleq/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+author%3Aoleq" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;" title="Open issues created by oleq">oleq</a><span> </span> </span><span class="issue-meta-section css-truncate issue-milestone ml-2 " style="box-sizing: border-box; margin-left: 8px !important; max-width: 240px;"><a aria-label="iteration 29" class="milestone-link muted-link css-truncate tooltipped tooltipped-n" href="https://github.com/ckeditor/ckeditor5/milestone/32" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none; position: relative;"><svg aria-label="Milestone" class="octicon octicon-milestone" height="16" role="img" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M8 2H6V0h2v2zm4 5H2c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h10l2 2-2 2zM8 4H6v2h2V4zM6 16h2V8H6v8z" fill-rule="evenodd"> </path> </svg><span> </span><span class="css-truncate-target" style="box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 100px; vertical-align: top;">iteration 29</span></a></span></div> </div> <div class="flex-shrink-0 col-3 pt-2 text-right pr-3 no-wrap d-grid grid-4-col grid-gap-2 " style="box-sizing: border-box; width: 244.5px; flex-shrink: 0 !important; padding-top: 8px !important; padding-right: 16px !important; text-align: right !important; white-space: nowrap !important; display: grid; column-gap: 8px; grid-template-columns: repeat(4, 1fr); grid-template-areas: "grid-col-1 grid-col-2 grid-col-3 grid-col-4";"> <div class="AvatarStack AvatarStack--right grid-col-1 " style="box-sizing: border-box; position: relative; min-width: 26px; height: 20px; grid-area: grid-col-1 / grid-col-1 / grid-col-1 / grid-col-1;"> <div aria-label="Assigned to " class="AvatarStack-body tooltipped tooltipped-sw tooltipped-multiline tooltipped-align-right-1 mt-1" style="box-sizing: border-box; position: absolute; margin-top: 4px !important; display: flex; background: rgb(246, 251, 255); right: 0px; flex-direction: row-reverse;"> </div> </div> <span class="grid-col-4" style="box-sizing: border-box; grid-area: grid-col-4 / grid-col-4 / grid-col-4 / grid-col-4;"><a aria-label="2 comments" class="muted-link" href="https://github.com/ckeditor/ckeditor5/issues/6145" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;"><svg aria-hidden="true" class="octicon octicon-comment v-align-middle" height="16" version="1.1" viewbox="0 0 16 16" width="16"> <path d="M14 1H2c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h2v3.5L7.5 11H14c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zm0 9H7l-2 2v-2H2V2h12v8z" fill-rule="evenodd"> </path> </svg><span> </span><span class="text-small text-bold" style="box-sizing: border-box; font-size: 12px !important; font-weight: 600 !important;">2</span></a></span> </div> </div> </div> <div class="Box-row Box-row--focus-gray p-0 mt-0 js-navigation-item js-issue-row" data-id="555236721" id="issue_6142" style="box-sizing: border-box; padding: 0px !important; margin-top: 0px !important; list-style-type: none; border-top: 1px solid rgb(225, 228, 232);"> <div class="d-flex Box-row--drag-hide position-relative" style="box-sizing: border-box; position: relative !important; display: flex !important;"> <div class="flex-shrink-0 pt-2 pl-3" style="box-sizing: border-box; flex-shrink: 0 !important; padding-top: 8px !important; padding-left: 16px !important;"> <span aria-label="Open issue" class="tooltipped tooltipped-e" style="box-sizing: border-box; position: relative;"><svg aria-hidden="true" class="octicon octicon-issue-opened open" height="16" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 011.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z" fill-rule="evenodd"> </path> </svg></span></div> <div class="flex-auto min-width-0 lh-condensed p-2 " style="box-sizing: border-box; flex: 1 1 auto !important; min-width: 0px !important; padding: 8px !important; line-height: 1.25 !important;"> <a class="link-gray-dark v-align-middle no-underline h4 js-navigation-open" data-hovercard-type="issue" data-hovercard-url="/ckeditor/ckeditor5/issues/6142/hovercard" href="https://github.com/ckeditor/ckeditor5/issues/6142" id="issue_6142_link" style="box-sizing: border-box; background-color: initial; color: rgb(36, 41, 46) !important; text-decoration: none !important; vertical-align: middle !important; font-size: 16px !important; font-weight: 600 !important;">Custom image uploader with URL</a><span> </span><span class="labels lh-default " style="box-sizing: border-box; line-height: 1.5 !important; position: relative;"><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Astatus%3Aconfirmed" style="box-sizing: border-box; background-color: rgb(230, 230, 230); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="status:confirmed">status:confirmed</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Atype%3Afeature" style="box-sizing: border-box; background-color: rgb(132, 182, 235); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="type:feature">type:feature</a></span> <div class="mt-1 text-small text-gray" style="box-sizing: border-box; color: rgb(88, 96, 105) !important; margin-top: 4px !important; font-size: 12px !important;"> <span class="opened-by" style="box-sizing: border-box;">#6142 opened<span> </span> <relative-time class="no-wrap" datetime="2020-01-26T14:32:48Z" style="box-sizing: border-box; white-space: nowrap !important;" title="Jan 26, 2020, 3:32 PM GMT+1"> 4 days ago </relative-time> <span> </span>by<span> </span><a class="muted-link" data-hovercard-type="user" data-hovercard-url="/users/ayaniv/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+author%3Aayaniv" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;" title="Open issues created by ayaniv">ayaniv</a><span> </span> </span><span class="issue-meta-section css-truncate issue-milestone ml-2 " style="box-sizing: border-box; margin-left: 8px !important; max-width: 240px;"><a aria-label="backlog" class="milestone-link muted-link css-truncate tooltipped tooltipped-n" href="https://github.com/ckeditor/ckeditor5/milestone/15" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none; position: relative;"><svg aria-label="Milestone" class="octicon octicon-milestone" height="16" role="img" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M8 2H6V0h2v2zm4 5H2c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h10l2 2-2 2zM8 4H6v2h2V4zM6 16h2V8H6v8z" fill-rule="evenodd"> </path> </svg><span> </span><span class="css-truncate-target" style="box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 100px; vertical-align: top;">backlog</span></a></span> </div> </div> <div class="flex-shrink-0 col-3 pt-2 text-right pr-3 no-wrap d-grid grid-4-col grid-gap-2 " style="box-sizing: border-box; width: 244.5px; flex-shrink: 0 !important; padding-top: 8px !important; padding-right: 16px !important; text-align: right !important; white-space: nowrap !important; display: grid; column-gap: 8px; grid-template-columns: repeat(4, 1fr); grid-template-areas: "grid-col-1 grid-col-2 grid-col-3 grid-col-4";"> <div class="AvatarStack AvatarStack--right grid-col-1 " style="box-sizing: border-box; position: relative; min-width: 26px; height: 20px; grid-area: grid-col-1 / grid-col-1 / grid-col-1 / grid-col-1;"> <div aria-label="Assigned to " class="AvatarStack-body tooltipped tooltipped-sw tooltipped-multiline tooltipped-align-right-1 mt-1" style="box-sizing: border-box; position: absolute; margin-top: 4px !important; display: flex; background: rgb(255, 255, 255); right: 0px; flex-direction: row-reverse;"> </div> </div> <span class="grid-col-4" style="box-sizing: border-box; grid-area: grid-col-4 / grid-col-4 / grid-col-4 / grid-col-4;"><a aria-label="3 comments" class="muted-link" href="https://github.com/ckeditor/ckeditor5/issues/6142" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;"><svg aria-hidden="true" class="octicon octicon-comment v-align-middle" height="16" version="1.1" viewbox="0 0 16 16" width="16"> <path d="M14 1H2c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h2v3.5L7.5 11H14c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zm0 9H7l-2 2v-2H2V2h12v8z" fill-rule="evenodd"> </path> </svg><span> </span><span class="text-small text-bold" style="box-sizing: border-box; font-size: 12px !important; font-weight: 600 !important;">3</span></a></span> </div> </div> </div> <div class="Box-row Box-row--focus-gray p-0 mt-0 js-navigation-item js-issue-row" data-id="555236082" id="issue_6141" style="box-sizing: border-box; padding: 0px !important; margin-top: 0px !important; list-style-type: none; border-top: 1px solid rgb(225, 228, 232);"> <div class="d-flex Box-row--drag-hide position-relative" style="box-sizing: border-box; position: relative !important; display: flex !important;"> <div class="flex-shrink-0 pt-2 pl-3" style="box-sizing: border-box; flex-shrink: 0 !important; padding-top: 8px !important; padding-left: 16px !important;"> <span aria-label="Open issue" class="tooltipped tooltipped-e" style="box-sizing: border-box; position: relative;"><svg aria-hidden="true" class="octicon octicon-issue-opened open" height="16" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 011.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z" fill-rule="evenodd"> </path> </svg></span></div> <div class="flex-auto min-width-0 lh-condensed p-2 " style="box-sizing: border-box; flex: 1 1 auto !important; min-width: 0px !important; padding: 8px !important; line-height: 1.25 !important;"> <a class="link-gray-dark v-align-middle no-underline h4 js-navigation-open" data-hovercard-type="issue" data-hovercard-url="/ckeditor/ckeditor5/issues/6141/hovercard" href="https://github.com/ckeditor/ckeditor5/issues/6141" id="issue_6141_link" style="box-sizing: border-box; background-color: initial; color: rgb(36, 41, 46) !important; text-decoration: none !important; vertical-align: middle !important; font-size: 16px !important; font-weight: 600 !important;">Toolbar isEnabled event</a><span> </span><span class="labels lh-default " style="box-sizing: border-box; line-height: 1.5 !important; position: relative;"><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Atype%3Afeature" style="box-sizing: border-box; background-color: rgb(132, 182, 235); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="type:feature">type:feature</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Atype%3Aquestion" style="box-sizing: border-box; background-color: rgb(132, 182, 235); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="type:question">type:question</a></span> <div class="mt-1 text-small text-gray" style="box-sizing: border-box; color: rgb(88, 96, 105) !important; margin-top: 4px !important; font-size: 12px !important;"> <span class="opened-by" style="box-sizing: border-box;">#6141 opened<span> </span> <relative-time class="no-wrap" datetime="2020-01-26T14:27:41Z" style="box-sizing: border-box; white-space: nowrap !important;" title="Jan 26, 2020, 3:27 PM GMT+1"> 4 days ago </relative-time> <span> </span>by<span> </span><a class="muted-link" data-hovercard-type="user" data-hovercard-url="/users/ayaniv/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+author%3Aayaniv" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;" title="Open issues created by ayaniv">ayaniv</a><span> </span> </span><span class="issue-meta-section css-truncate issue-milestone ml-2 " style="box-sizing: border-box; margin-left: 8px !important; max-width: 240px;"><a aria-label="backlog" class="milestone-link muted-link css-truncate tooltipped tooltipped-n" href="https://github.com/ckeditor/ckeditor5/milestone/15" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none; position: relative;"><svg aria-label="Milestone" class="octicon octicon-milestone" height="16" role="img" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M8 2H6V0h2v2zm4 5H2c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h10l2 2-2 2zM8 4H6v2h2V4zM6 16h2V8H6v8z" fill-rule="evenodd"> </path> </svg><span> </span><span class="css-truncate-target" style="box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 100px; vertical-align: top;">backlog</span></a></span> </div> </div> <div class="flex-shrink-0 col-3 pt-2 text-right pr-3 no-wrap d-grid grid-4-col grid-gap-2 " style="box-sizing: border-box; width: 244.5px; flex-shrink: 0 !important; padding-top: 8px !important; padding-right: 16px !important; text-align: right !important; white-space: nowrap !important; display: grid; column-gap: 8px; grid-template-columns: repeat(4, 1fr); grid-template-areas: "grid-col-1 grid-col-2 grid-col-3 grid-col-4";"> <div class="AvatarStack AvatarStack--right grid-col-1 " style="box-sizing: border-box; position: relative; min-width: 26px; height: 20px; grid-area: grid-col-1 / grid-col-1 / grid-col-1 / grid-col-1;"> <div aria-label="Assigned to " class="AvatarStack-body tooltipped tooltipped-sw tooltipped-multiline tooltipped-align-right-1 mt-1" style="box-sizing: border-box; position: absolute; margin-top: 4px !important; display: flex; background: rgb(255, 255, 255); right: 0px; flex-direction: row-reverse;"> </div> </div> <span class="grid-col-4" style="box-sizing: border-box; grid-area: grid-col-4 / grid-col-4 / grid-col-4 / grid-col-4;"><a aria-label="4 comments" class="muted-link" href="https://github.com/ckeditor/ckeditor5/issues/6141" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;"><svg aria-hidden="true" class="octicon octicon-comment v-align-middle" height="16" version="1.1" viewbox="0 0 16 16" width="16"> <path d="M14 1H2c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h2v3.5L7.5 11H14c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zm0 9H7l-2 2v-2H2V2h12v8z" fill-rule="evenodd"> </path> </svg><span> </span><span class="text-small text-bold" style="box-sizing: border-box; font-size: 12px !important; font-weight: 600 !important;">4</span></a></span> </div> </div> </div> <div class="Box-row Box-row--focus-gray p-0 mt-0 js-navigation-item js-issue-row" data-id="554829765" id="issue_6139" style="box-sizing: border-box; padding: 0px !important; margin-top: 0px !important; list-style-type: none; border-top: 1px solid rgb(225, 228, 232);"> <div class="d-flex Box-row--drag-hide position-relative" style="box-sizing: border-box; position: relative !important; display: flex !important;"> <div class="flex-shrink-0 pt-2 pl-3" style="box-sizing: border-box; flex-shrink: 0 !important; padding-top: 8px !important; padding-left: 16px !important;"> <span aria-label="Open issue" class="tooltipped tooltipped-e" style="box-sizing: border-box; position: relative;"><svg aria-hidden="true" class="octicon octicon-issue-opened open" height="16" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 011.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z" fill-rule="evenodd"> </path> </svg></span></div> <div class="flex-auto min-width-0 lh-condensed p-2 " style="box-sizing: border-box; flex: 1 1 auto !important; min-width: 0px !important; padding: 8px !important; line-height: 1.25 !important;"> <a class="link-gray-dark v-align-middle no-underline h4 js-navigation-open" data-hovercard-type="issue" data-hovercard-url="/ckeditor/ckeditor5/issues/6139/hovercard" href="https://github.com/ckeditor/ckeditor5/issues/6139" id="issue_6139_link" style="box-sizing: border-box; background-color: initial; color: rgb(36, 41, 46) !important; text-decoration: none !important; vertical-align: middle !important; font-size: 16px !important; font-weight: 600 !important;">Some ckeditor5-core tests do not cleanup properly</a><span> </span><span class="labels lh-default " style="box-sizing: border-box; line-height: 1.5 !important; position: relative;"><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Apackage%3Acore" style="box-sizing: border-box; background-color: rgb(254, 242, 192); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="package:core">package:core</a><span> </span><a class="d-inline-block IssueLabel" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+label%3Atype%3Abug" style="box-sizing: border-box; background-color: rgb(221, 68, 68); color: rgb(0, 0, 0); text-decoration: none; display: inline-block !important; height: 20px; padding: 0.15em 4px; font-size: 12px; font-weight: 600; line-height: 15px; border-radius: 2px; box-shadow: rgba(27, 31, 35, 0.12) 0px -1px 0px inset;" title="type:bug">type:bug</a></span> <div class="mt-1 text-small text-gray" style="box-sizing: border-box; color: rgb(88, 96, 105) !important; margin-top: 4px !important; font-size: 12px !important;"> <span class="opened-by" style="box-sizing: border-box;">#6139 opened<span> </span> <relative-time class="no-wrap" datetime="2020-01-24T16:22:03Z" style="box-sizing: border-box; white-space: nowrap !important;" title="Jan 24, 2020, 5:22 PM GMT+1"> 6 days ago </relative-time> <span> </span>by<span> </span><a class="muted-link" data-hovercard-type="user" data-hovercard-url="/users/jodator/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ckeditor/ckeditor5/issues?q=is%3Aissue+is%3Aopen+author%3Ajodator" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none;" title="Open issues created by jodator">jodator</a><span> </span> </span><span class="issue-meta-section css-truncate issue-milestone ml-2 " style="box-sizing: border-box; margin-left: 8px !important; max-width: 240px;"><a aria-label="iteration 29" class="milestone-link muted-link css-truncate tooltipped tooltipped-n" href="https://github.com/ckeditor/ckeditor5/milestone/32" style="box-sizing: border-box; background-color: initial; color: rgb(88, 96, 105) !important; text-decoration: none; position: relative;"><svg aria-label="Milestone" class="octicon octicon-milestone" height="16" role="img" version="1.1" viewbox="0 0 14 16" width="14"> <path d="M8 2H6V0h2v2zm4 5H2c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h10l2 2-2 2zM8 4H6v2h2V4zM6 16h2V8H6v8z" fill-rule="evenodd"> </path> </svg><span> </span><span class="css-truncate-target" style="box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 100px; vertical-align: top;">iteration 29</span></a></span></div> </div> <div class="flex-shrink-0 col-3 pt-2 text-right pr-3 no-wrap d-grid grid-4-col grid-gap-2 " style="box-sizing: border-box; width: 244.5px; flex-shrink: 0 !important; padding-top: 8px !important; padding-right: 16px !important; text-align: right !important; white-space: nowrap !important; display: grid; column-gap: 8px; grid-template-columns: repeat(4, 1fr); grid-template-areas: "grid-col-1 grid-col-2 grid-col-3 grid-col-4";"> <div class="AvatarStack AvatarStack--right grid-col-1 " style="box-sizing: border-box; position: relative; min-width: 26px; height: 20px; grid-area: grid-col-1 / grid-col-1 / grid-col-1 / grid-col-1;"> <div aria-label="Assigned to jodator" class="AvatarStack-body tooltipped tooltipped-sw tooltipped-multiline tooltipped-align-right-1 mt-1" style="box-sizing: border-box; position: absolute; margin-top: 4px !important; display: flex; background: rgb(255, 255, 255); right: 0px; flex-direction: row-reverse;"> <a aria-label="jodator’s assigned issues" class="avatar" href="https://github.com/ckeditor/ckeditor5/issues?q=assignee%3Ajodator+is%3Aopen" style="box-sizing: initial; background-color: rgb(255, 255, 255); color: rgb(3, 102, 214); text-decoration: none; display: flex; overflow: hidden; line-height: 1; vertical-align: middle; border-radius: 2px; position: relative; z-index: 1; width: 20px; height: 20px; margin-right: 0px; border-right: 0px; transition: margin 0.1s ease-in-out 0s; margin-left: -11px; border-left: 1px solid rgb(255, 255, 255);"><img alt="@jodator" class="from-avatar" height="20" src="https://avatars1.githubusercontent.com/u/247363?s=40&v=4" style="box-sizing: border-box; border-style: none; border-radius: 2px;" width="20" /></a></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </main> </div> </div> <nav class="r s t u v c w x y z ab" style="box-sizing: inherit; background-color: rgb(255, 255, 255); display: block; position: fixed; top: 0px; left: 0px; right: 0px; z-index: 500; box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px 0px; transition: transform 300ms ease 0s; will-change: transform; color: rgba(0, 0, 0, 0.8); font-family: BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> <div class="branch-journeys-top" style="box-sizing: inherit;"> <div class="r c" style="box-sizing: inherit; background-color: rgb(255, 255, 255); display: block;"> <div class="n p" style="box-sizing: inherit; display: flex; justify-content: center;"> <div class="ac ae af ag ah ai aj ak" style="box-sizing: inherit; max-width: 1192px; min-width: 0px; width: 935px; margin: 0px 64px;"> <div class="al n o am an" style="box-sizing: inherit; display: flex; align-items: center; height: 65px;"> <div class="n o ao w" style="box-sizing: inherit; display: flex; align-items: center; z-index: 500; flex: 1 0 auto;"> <div class="r g" style="box-sizing: inherit; display: block;"><br class="Apple-interchange-newline" /> <a href="https://foobar.test/example?source=post_page-----12345----------------------" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent;"><span class="bj io ip iq cz pg db cy dc dd ph" style="box-sizing: inherit; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-weight: 600; font-size: 28px; line-height: 36px; max-height: 36px; color: rgba(0, 0, 0, 0.9);">Content Uneditable</span></a></div> </div> <div class="r ar w" style="box-sizing: inherit; display: block; z-index: 500; flex: 0 0 auto;"> <div class="n o" style="box-sizing: inherit; display: flex; align-items: center;"> <div class="n g" style="box-sizing: inherit; display: flex;"> <div class="ku" id="lo-post-page-navbar-sign-in-link" style="box-sizing: inherit; visibility: visible;"> <div class="bq r" style="box-sizing: inherit; display: block; margin-left: 16px;"><span class="bj b bk bl bm bn r bo bp" style="box-sizing: inherit; font-weight: 400; display: block; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-style: normal; line-height: 20px; font-size: 15.8px; letter-spacing: 0px; color: rgba(0, 0, 0, 0.54); fill: rgba(0, 0, 0, 0.54);"><a class="pi pj av aw ax ay az ba bb bc pk pl bf bg bv bw" href="https://example.test/signin?source=post_page-----12345---------------------nav_reg-" rel="noopener" style="box-sizing: inherit; color: rgb(28, 153, 99); text-decoration: none; -webkit-tap-highlight-color: transparent; font-size: inherit; border: inherit; font-family: inherit; letter-spacing: inherit; font-weight: inherit; padding: 0px; margin: 0px; fill: rgb(2, 184, 117);">Sign in</a></span></div> </div> </div> <div class="ku" id="lo-post-page-navbar-get-started-button" style="box-sizing: inherit; visibility: visible;"> <div class="bq r" style="box-sizing: inherit; display: block; margin-left: 16px;"> <button class="bx by pi pj pm pk pl pn bc cb bj b bk bl bm bn cc cd ce cf cg bf" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; background: 0px center; overflow: visible; margin: 0px; font-weight: 400; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-style: normal; line-height: 20px; font-size: 15.8px; letter-spacing: 0px; padding: 8px 16px; border-radius: 4px; border-width: 1px; border-style: solid; display: inline-block; text-decoration: none; color: rgb(28, 153, 99); fill: rgb(2, 184, 117); border-color: rgb(2, 184, 117);">Get started</button></div> </div> </div> </div> </div> </div> </div> </div> </div> </nav> <div class="ch al r ci py" style="box-sizing: inherit; display: block; height: 65px; margin-bottom: 0px; color: rgba(0, 0, 0, 0.8); font-family: BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> </div> <article style="box-sizing: inherit; color: rgba(0, 0, 0, 0.8); font-family: BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> <section class="cj ck cl cm ak cn ce n co" style="box-sizing: border-box; display: flex; width: 728px; padding-left: 24px; padding-right: 24px; margin-left: auto; margin-right: auto; max-width: 728px; flex-direction: column;"> </section> <div style="box-sizing: inherit;"> <div class="dh u di dj dk dl" style="box-sizing: inherit; left: 0px; position: absolute; top: calc(100vh + 100px); bottom: calc(100vh + 100px); width: 10px; pointer-events: none;"> </div> <div class="cl cm cn gl" style="box-sizing: inherit; margin-left: auto; margin-right: auto; max-width: 728px; position: relative;"> <div class="r h g f e" style="box-sizing: inherit; display: block;"> <aside class="tq dh t" style="box-sizing: inherit; top: 0px; position: absolute; left: 728px; width: 152.5px;"> <div class="tu no dh tx pu ak" style="box-sizing: inherit; width: 152.5px; position: absolute; max-width: 100%; white-space: nowrap; margin-top: 6px; top: 2632.66px;"> <h4 class="bj dz eo bl bo" style="box-sizing: inherit; margin: 0px; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; line-height: 20px; color: rgba(0, 0, 0, 0.54); font-weight: 300; font-size: 15px;"> <span class="cf no pu cz db" style="box-sizing: inherit; display: inline-block; overflow: hidden; text-overflow: ellipsis; max-width: 100%; white-space: nowrap;">Top highlight</span></h4> </div> </aside> </div> </div> <section class="ez fa fb fc fd" style="box-sizing: inherit; word-break: break-word; overflow-wrap: break-word;"> <div class="gz ak" style="box-sizing: inherit; width: 1063px; clear: both;"> <figure class="pz gz ak paragraph-image" style="box-sizing: inherit; margin: 0px; width: 1063px; clear: both;"> <div class="qd r gl qe" style="box-sizing: inherit; display: block; position: relative; margin: auto; background-color: rgba(0, 0, 0, 0.05);"> <div class="qf r" style="box-sizing: inherit; display: block; padding-bottom: 708.664px;"> <div class="fw qa dh t u hw ak cz qb qc" style="box-sizing: inherit; top: 0px; left: 0px; width: 1063px; overflow: hidden; position: absolute; opacity: 0; height: 708.664px; transition: opacity 100ms ease 400ms; will-change: transform; transform: translateZ(0px);"> <img class="dh t u hw ak qg qh as tw" height="1200" role="presentation" src="https://example.test/max/60/1*Dr6FyBZoAP-EOqP-xtiA.jpeg?q=20" style="box-sizing: inherit; vertical-align: middle; top: 0px; left: 0px; width: 1063px; visibility: hidden; position: absolute; height: 708.664px; filter: blur(20px); transform: scale(1.1); transition: visibility 0ms ease 400ms;" width="1800" /></div> <img class="iz tt dh t u hw ak hu" height="1200" role="presentation" src="https://example.test/max/3600/1*Dr6FyBZoAP-EKF94n-xtiA.jpeg" style="box-sizing: inherit; vertical-align: middle; top: 0px; left: 0px; width: 1063px; position: absolute; background: rgb(255, 255, 255); height: 708.664px; opacity: 1; transition: opacity 400ms ease 0ms;" width="1800" /> </div> </div> <figcaption class="bo ea qi qj jc cn cl cm qk ql bj dz" data-selectable-paragraph="" style="box-sizing: inherit; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; color: rgba(0, 0, 0, 0.54); margin-left: auto; margin-right: auto; max-width: 728px; font-weight: 300; font-size: 16px; text-align: center; line-height: 1.4; margin-top: 10px;"> Author:<span> </span><a class="at cg fs ft fu fv" href="https://www.flickr.com/photos/bortabra/" rel="noopener nofollow" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(0, 0, 0, 0.84)\" /></svg>"); background-size: 1px 1px; background-position: 0px calc(1em + 1px);" target="_blank">Göran Ingman</a></figcaption> </figure> </div> <div class="n p" style="box-sizing: inherit; display: flex; justify-content: center;"> <div class="ac ae af ag ah dn aj ak" style="box-sizing: inherit; min-width: 0px; width: 680px; max-width: 680px; margin: 0px 64px;"> <div style="box-sizing: inherit;"> <div class="qm qn de bk nr b qo qp qq qr qs qt qu qv qw qx qy" id="8f99" style="box-sizing: inherit; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); font-family: Georgia, Cambria, "Times New Roman", Times, serif; line-height: 1.23; letter-spacing: 0px; margin-bottom: -0.27em; font-size: 40px; margin-top: 0.78em;"> <h1 class="nr b qo qz qq ra qs rb qu rc qw rd de" style="box-sizing: inherit; margin: 0px; font-weight: 400; color: rgba(0, 0, 0, 0.84); font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-size: 40px; line-height: 48px;"> ContentEditable — The Good, the Bad and the Ugly</h1> </div> <div class="do" style="box-sizing: inherit; margin-top: 32px;"> <div class="n dp dq dr ds" style="box-sizing: inherit; display: flex; justify-content: space-between;"> <div class="o n" style="box-sizing: inherit; display: flex; align-items: center;"> <div style="box-sizing: inherit;"><a href="https://example.test/@reinmarpl?source=post_page-----12345----------------------" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent;"><img alt="Piotrek Koszuliński" class="r dt du dv" height="48" src="https://example.test/fit/c/96/96/1*eTpp1WMpoogzN8gYIt1XCw.jpeg" style="box-sizing: inherit; vertical-align: middle; display: block; border-radius: 50%; height: 48px; width: 48px;" width="48" /></a></div> <div class="dw ak r" style="box-sizing: inherit; display: block; width: 183.617px; margin-left: 12px;"> <div class="n" style="box-sizing: inherit; display: flex;"> <div style="box-sizing: inherit; flex: 1 1 0%;"> <div class="dx n o dy" style="box-sizing: inherit; display: flex; align-items: center; margin-bottom: 2px;"> <span class="bj b bk bl bm bn r de q" style="box-sizing: inherit; font-weight: 400; fill: rgba(0, 0, 0, 0.84); display: block; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-style: normal; line-height: 20px; font-size: 15.8px; letter-spacing: 0px; color: rgba(0, 0, 0, 0.84);"><span class="bj dz ea bl cz da db cy dc dd de" style="box-sizing: inherit; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; line-height: 20px; display: -webkit-box; overflow: hidden; max-height: 20px; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; color: rgba(0, 0, 0, 0.84); font-weight: 300; font-size: 16px;"><a class="at au av aw ax ay az ba bb bc eb bf bg bh bi" href="https://example.test/@reinmarpl?source=post_page-----12345----------------------" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; fill: inherit; font-size: inherit; border: inherit; font-family: inherit; letter-spacing: inherit; font-weight: inherit; padding: 0px; margin: 0px;">Piotrek Koszuliński</a></span> </span> <div class="dg r ar h" style="box-sizing: inherit; display: block; flex: 0 0 auto; margin-left: 8px;"> <span class="bj b bk bl bm bn r de q" style="box-sizing: inherit; font-weight: 400; fill: rgba(0, 0, 0, 0.84); display: block; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-style: normal; line-height: 20px; font-size: 15.8px; letter-spacing: 0px; color: rgba(0, 0, 0, 0.84);"><button class="ec de q by ed ee ef eg bc bh eh ei ej ek el em cb bj b bk en eo bn cc cd ce cf cg bf" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; background: 0px center; overflow: visible; margin: 0px; font-weight: 400; fill: rgba(0, 0, 0, 0.84); font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-style: normal; letter-spacing: 0px; border-radius: 4px; border-width: 1px; border-style: solid; display: inline-block; text-decoration: none; color: rgba(0, 0, 0, 0.84); padding: 0px 8px; border-color: rgba(0, 0, 0, 0.54); line-height: 18px; font-size: 15px;">Follow</button> </span></div> <span class="bj b bk bl bm bn r de q" style="box-sizing: inherit; font-weight: 400; fill: rgba(0, 0, 0, 0.84); display: block; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-style: normal; line-height: 20px; font-size: 15.8px; letter-spacing: 0px; color: rgba(0, 0, 0, 0.84);"> </span> </div> </div> </div> <div style="box-sizing: inherit;"><span class="bj b bk bl bm bn r bo bp" style="box-sizing: inherit; font-weight: 400; display: block; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-style: normal; line-height: 20px; font-size: 15.8px; letter-spacing: 0px; color: rgba(0, 0, 0, 0.54); fill: rgba(0, 0, 0, 0.54);"><span class="bj dz ea bl cz da db cy dc dd bo" style="box-sizing: inherit; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; line-height: 20px; color: rgba(0, 0, 0, 0.54); display: -webkit-box; overflow: hidden; max-height: 20px; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-weight: 300; font-size: 16px;"><a class="at au av aw ax ay az ba bb bc eb bf bg bh bi" href="https://foobar.test/example/contenteditable-the-good-the-bad-and-the-ugly-12345?source=post_page-----12345----------------------" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; fill: inherit; font-size: inherit; border: inherit; font-family: inherit; letter-spacing: inherit; font-weight: inherit; padding: 0px; margin: 0px;">Aug 13, 2015</a><span> </span>·<span> </span>9<span> </span>min read </span></span></div> </div> </div> <div class="n ep eq er es et eu ev ew ab" style="box-sizing: inherit; display: flex; align-items: flex-end; margin-left: 30px;"> <div class="n o" style="box-sizing: inherit; display: flex; align-items: center;"> <div class="ex r ar" style="box-sizing: inherit; display: block; flex: 0 0 auto; padding-right: 8px;"> <a class="at au av aw ax ay az ba bb bc bd be bf bg bh bi" href="https://example.test/p/12345/share/twitter?source=post_actions_header---------------------------" rel="noopener nofollow" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; fill: inherit; font-size: inherit; border: inherit; font-family: inherit; letter-spacing: inherit; font-weight: inherit; padding: 0px; margin: 0px;" target="_blank"><svg class="q" height="29" width="29"> <path d="M22.05 7.54a4.47 4.47 0 0 0-3.3-1.46 4.53 4.53 0 0 0-4.53 4.53c0 .35.04.7.08 1.05A12.9 12.9 0 0 1 5 6.89a5.1 5.1 0 0 0-.65 2.26c.03 1.6.83 2.99 2.02 3.79a4.3 4.3 0 0 1-2.02-.57v.08a4.55 4.55 0 0 0 3.63 4.44c-.4.08-.8.13-1.21.16l-.81-.08a4.54 4.54 0 0 0 4.2 3.15 9.56 9.56 0 0 1-5.66 1.94l-1.05-.08c2 1.27 4.38 2.02 6.94 2.02 8.3 0 12.86-6.9 12.84-12.85.02-.24 0-.43 0-.65a8.68 8.68 0 0 0 2.26-2.34c-.82.38-1.7.62-2.6.72a4.37 4.37 0 0 0 1.95-2.51c-.84.53-1.81.9-2.83 1.13z"> </path> </svg></a></div> <div class="ex r ar" style="box-sizing: inherit; display: block; flex: 0 0 auto; padding-right: 8px;"> <a class="at au av aw ax ay az ba bb bc bd be bf bg bh bi" href="https://example.test/p/12345/share/facebook?source=post_actions_header---------------------------" rel="noopener nofollow" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; fill: inherit; font-size: inherit; border: inherit; font-family: inherit; letter-spacing: inherit; font-weight: inherit; padding: 0px; margin: 0px;" target="_blank"><svg class="q" height="29" width="29"> <path d="M23.2 5H5.8a.8.8 0 0 0-.8.8V23.2c0 .44.35.8.8.8h9.3v-7.13h-2.38V13.9h2.38v-2.38c0-2.45 1.55-3.66 3.74-3.66 1.05 0 1.95.08 2.2.11v2.57h-1.5c-1.2 0-1.48.57-1.48 1.4v1.96h2.97l-.6 2.97h-2.37l.05 7.12h5.1a.8.8 0 0 0 .79-.8V5.8a.8.8 0 0 0-.8-.79"> </path> </svg></a></div> <div class="ey r ao" style="box-sizing: inherit; display: block; flex: 1 0 auto; margin-right: -6px;"> <a class="at au av aw ax ay az ba bb bc bd be bf bg bh bi" href="https://example.test/foo?x=y&source=post_actions_header--------------------------bookmark_sidebar-" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; fill: inherit; font-size: inherit; border: inherit; font-family: inherit; letter-spacing: inherit; font-weight: inherit; padding: 0px; margin: 0px;"><svg height="25" viewbox="0 0 25 25" width="25"> <path d="M19 6a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v14.66h.01c.01.1.05.2.12.28a.5.5 0 0 0 .7.03l5.67-4.12 5.66 4.13a.5.5 0 0 0 .71-.03.5.5 0 0 0 .12-.29H19V6zm-6.84 9.97L7 19.64V6a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v13.64l-5.16-3.67a.49.49 0 0 0-.68 0z" fill-rule="evenodd"></path> </svg></a></div> </div> </div> </div> </div> </div> </div> </div> </section> <hr class="re dz ip rf rg jc rh ri rj rk rl" style="box-sizing: inherit; font-weight: 300; font-size: 28px; text-align: center; font-family: Georgia, Cambria, "Times New Roman", Times, serif; border: none; margin-top: 30px;" /> <section class="ez fa fb fc fd" style="box-sizing: inherit; word-break: break-word; overflow-wrap: break-word;"> <div class="n p" style="box-sizing: inherit; display: flex; justify-content: center;"> <div class="ac ae af ag ah dn aj ak" style="box-sizing: inherit; min-width: 0px; width: 680px; max-width: 680px; margin: 0px 64px;"> <p class="fe ff de bk fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="da55" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px;"> <span style="font-family:Times New Roman,Times,serif; font-size:26px; color:#ecf0f1; background-color:#27ae60;">Every once in a while some developer notices that</span> there’s<span> </span><em class="rm" style="box-sizing: inherit; font-style: italic;">still</em><span> </span>no<span> </span><em class="rm" style="box-sizing: inherit; font-style: italic;">perfect</em><span> </span>WYSIWYG editor for the web on the market and then this happens:</p> <figure class="rn ro rp rq rr gz" style="box-sizing: inherit; margin: 56px 0px 0px; clear: both;"> <div class="qd r gl" style="box-sizing: inherit; display: block; position: relative; margin: auto;"> <div class="rs r" style="box-sizing: inherit; display: block;"><iframe allowfullscreen="" class="dh t u hw ak" frameborder="0" height="0" scrolling="auto" src="https://example.test/media/fc4300fefc5617f3fb0a833563a03072" style="box-sizing: inherit; top: 0px; left: 0px; width: 680px; position: absolute; height: 0px;" title="Piotrek Koszuliński on Twitter" width="0"></iframe></div> </div> </figure> <p class="fe ff de bk fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="3dba" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px;"> How hard can it be? We’ve got<span> </span><a class="at cg fs ft fu fv" href="http://html5demos.com/contenteditable" rel="noopener nofollow" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(0, 0, 0, 0.84)\" /></svg>"); background-size: 1px 1px; background-position: 0px calc(1em + 1px);" target="_blank">contentEditable</a>,<span> </span><a class="at cg fs ft fu fv" href="https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand" rel="noopener nofollow" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(0, 0, 0, 0.84)\" /></svg>"); background-size: 1px 1px; background-position: 0px calc(1em + 1px);" target="_blank"><em class="rm" style="box-sizing: inherit; font-style: italic;">exec<span style="color:#2980b9;">Command()</span></em></a><span style="color:#2980b9;"> and </span><a class="at cg fs ft fu fv" href="https://developer.mozilla.org/en-US/docs/Web/API/Document/queryCommandState" rel="noopener nofollow" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(0, 0, 0, 0.84)\" /></svg>"); background-size: 1px 1px; background-position: 0px calc(1em + 1px);" target="_blank"><span style="color:#2980b9;"><em class="rm" style="box-sizing: inherit; font-style: italic;">queryCommandState()</em></span></a><span style="color:#2980b9;">. Now, let’s just add some toolbar with stylish buttons to enable applying bold and linking the text. We’ll </span>work a bit on typography, use some trendy SVG/font icons for the buttons, add some CSS transitions here and there and we are mostly ready. Right?</p> <p class="fe ff de bk fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="db6d" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px;"> Just a couple of details left… How do I force the<span> </span><em class="rm" style="box-sizing: inherit; font-style: italic;">bold</em><span> </span>command to use<span> </span><em class="rm" style="box-sizing: inherit; font-style: italic;"><strong></em><span> </span>instead of<span> </span><em class="rm" style="box-sizing: inherit; font-style: italic;"><b></em><span> </span>(choose whichever you like more, actually) in every browser, force the<span> </span><em class="rm" style="box-sizing: inherit; font-style: italic;">Enter</em><span> </span>key to create new paragraphs instead of those ugly<span> </span><em class="rm" style="box-sizing: inherit; font-style: italic;"><br></em><span> </span>or<span> </span><em class="rm" style="box-sizing: inherit; font-style: italic;"><div></em><span> </span>and fix that damn pasting. I don’t want all those inline styles!</p> <p class="fe ff de bk fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="571f" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px;"> style="font-size:10px; font-family:Verdana,Geneva,sans-serif;"><span style="color:#e67e22;">A month and several questions on </span><a class="at cg fs ft fu fv" href="http://stackoverflow.com/" rel="noopener nofollow" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(0, 0, 0, 0.84)\" /></svg>"); background-size: 1px 1px; background-position: 0px calc(1em + 1px);" target="_blank"><span style="color:#e67e22;">StackOverflow</span></a><span style="color:#e67e22;"> later the project is either dead or full of most brutal hacks which seem to work (that’s actually the worst situation — poor end-users). The developer joins the <em class="rm" style="box-sizing: inherit; font-style: italic;">“contentEditable is evil”</em> club and hates WYSIWYG editors even more.</span></span></p> <p class="fe ff de bk fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="df42" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px;"> Those three small details — how the<span> </span><em class="rm" style="box-sizing: inherit; font-style: italic;">bold</em><span> </span>command and<span> </span><em class="rm" style="box-sizing: inherit; font-style: italic;">Enter</em><span> </span>key work plus cleaning up pasted data are just the tip of the iceberg, but they are already enough to make even a skilled JavaScript developer hate<span> </span><em class="rm" style="box-sizing: inherit; font-style: italic;">“this entire contentEditable”</em>.</p> <p class="fe ff de bk fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="1253" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px;"> Let’s consider how the behavior of the<span> </span><span style="color:#2ecc71;"><em class="rm" style="box-sizing: inherit; font-style: italic;">bold</em> command can be altered. I’ve seen many approaches from the hacky ones like using mutation observers, through normalisation of HTML when retrieving it from the editor, to a complete (in my opinion, the only real) solution which is reimplementing the <em class="rm" style="box-sizing: inherit; font-style: italic;">execCommand()</em> behavior</span> in JavaScript. But again, this is only the tip of the iceberg.</p> <p class="fe ff de bk fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="cf16" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px;"> If you chose the mutation observers, you may need to deal with preserving selection (as it may be reset when you modify the DOM around it) or with the<span> </span><a class="at cg fs ft fu fv" href="http://www.w3.org/wiki/Web_Editing_APIs/UndoManager_Problem_Descriptions" rel="noopener nofollow" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(0, 0, 0, 0.84)\" /></svg>"); background-size: 1px 1px; background-position: 0px calc(1em + 1px);" target="_blank">undo manager</a>.</p> <p class="fe ff de bk fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="047f" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px;"> If you accepted normalisation of the output you’re pretty safe, but I can hardly imagine the same approach to the<span> </span><em class="rm" style="box-sizing: inherit; font-style: italic;">Enter</em><span> </span>key support and well… it smells bad.</p> <p class="fe ff de bk fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="9b1d" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px;"> If you’re a purist like me, you would perhaps try to implement<span> </span><em class="rm" style="box-sizing: inherit; font-style: italic;">execCommand()</em><span> </span>in JavaScript. The algorithm is pretty straightforward — get the<span> </span><a class="at cg fs ft fu fv" href="https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection" rel="noopener nofollow" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(0, 0, 0, 0.84)\" /></svg>"); background-size: 1px 1px; background-position: 0px calc(1em + 1px);" target="_blank">selection</a>, get<span> </span><a class="at cg fs ft fu fv" href="https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt" rel="noopener nofollow" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(0, 0, 0, 0.84)\" /></svg>"); background-size: 1px 1px; background-position: 0px calc(1em + 1px);" target="_blank">ranges</a><span> </span>(did I mention that Firefox supports multi-range selections?), do a couple of DOM operations, make selection, implement undo manager (because your changes won’t be recorded by the native one) and you’re safe. Except that:</p> <ul style="box-sizing: inherit; margin: 0px; padding: 0px; list-style: none none;"> <li class="fe ff de bk fg b fh fi fj fk fl fm fn fo fp fq fr rt ru rv" data-selectable-paragraph="" id="95b2" style="box-sizing: inherit; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; margin-bottom: -0.46em; list-style-type: disc; margin-left: 30px; padding-left: 0px; font-size: 21px; margin-top: 2em;"> <mark class="tr ts gp" style="box-sizing: inherit; cursor: pointer; background-color: rgb(233, 253, 240); color: currentcolor;">You were fired for delaying the project for a few months</mark>.</li> <li class="fe ff de bk fg b fh rw fj rx fl ry fn rz fp sa fr rt ru rv" data-selectable-paragraph="" id="1e25" style="box-sizing: inherit; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; margin-bottom: -0.46em; list-style-type: disc; margin-left: 30px; padding-left: 0px; font-size: 21px; margin-top: 1.05em;"> Your tests don’t pass in any other browser (oh and did I mention that<span> </span><a class="at cg fs ft fu fv" href="https://bugs.webkit.org/show_bug.cgi?id=15256" rel="noopener nofollow" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(0, 0, 0, 0.84)\" /></svg>"); background-size: 1px 1px; background-position: 0px calc(1em + 1px);" target="_blank">Blink and WebKit</a>’s selection systems are broken? Yes… the bug is 8 years old) and you’re about to implement one of the most ugly hacks you’ll ever see.</li> <li class="fe ff de bk fg b fh rw fj rx fl ry fn rz fp sa fr rt ru rv" data-selectable-paragraph="" id="6b50" style="box-sizing: inherit; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; margin-bottom: -0.46em; list-style-type: disc; margin-left: 30px; padding-left: 0px; font-size: 21px; margin-top: 1.05em;"> First bug reports start to appear and you start to realise how many more cases your implementation needs to support.</li> <li class="fe ff de bk fg b fh rw fj rx fl ry fn rz fp sa fr rt ru rv" data-selectable-paragraph="" id="e92b" style="box-sizing: inherit; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; margin-bottom: -0.46em; list-style-type: disc; margin-left: 30px; padding-left: 0px; font-size: 21px; margin-top: 1.05em;"> You still need to implement the<span> </span><em class="rm" style="box-sizing: inherit; font-style: italic;">Enter</em><span> </span>key support and do something with the damn pasting.</li> <li class="fe ff de bk fg b fh rw fj rx fl ry fn rz fp sa fr rt ru rv" data-selectable-paragraph="" id="1fdf" style="box-sizing: inherit; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; margin-bottom: -0.46em; list-style-type: disc; margin-left: 30px; padding-left: 0px; font-size: 21px; margin-top: 1.05em;"> You’ve just noticed that you also need to reimplement<span> </span><em class="rm" style="box-sizing: inherit; font-style: italic;">Backspace</em><span> </span>and<span> </span><em class="rm" style="box-sizing: inherit; font-style: italic;">Delete</em><span> </span>key support in<span> </span><a class="at cg fs ft fu fv" href="http://code.google.com/p/chromium/issues/detail?id=226941" rel="noopener nofollow" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(0, 0, 0, 0.84)\" /></svg>"); background-size: 1px 1px; background-position: 0px calc(1em + 1px);" target="_blank">Blink</a><span> </span>and<span> </span><a class="at cg fs ft fu fv" href="https://bugs.webkit.org/show_bug.cgi?id=114791" rel="noopener nofollow" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(0, 0, 0, 0.84)\" /></svg>"); background-size: 1px 1px; background-position: 0px calc(1em + 1px);" target="_blank">WebKit</a><span> </span>as these engines love inline styles far more than you do.</li> <li class="fe ff de bk fg b fh rw fj rx fl ry fn rz fp sa fr rt ru rv" data-selectable-paragraph="" id="1efa" style="box-sizing: inherit; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; margin-bottom: -0.46em; list-style-type: disc; margin-left: 30px; padding-left: 0px; font-size: 21px; margin-top: 1.05em;"> You’ve noticed that some engines return a<span> </span><em class="rm" style="box-sizing: inherit; font-style: italic;">href</em><span> </span>attribute with an absolute URL even though you made a link with a relative URL.</li> <li class="fe ff de bk fg b fh rw fj rx fl ry fn rz fp sa fr rt ru rv" data-selectable-paragraph="" id="4235" style="box-sizing: inherit; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; margin-bottom: -0.46em; list-style-type: disc; margin-left: 30px; padding-left: 0px; font-size: 21px; margin-top: 1.05em;"> Gosh… we only talked about four most basic features — when will you add support for images?</li> <li class="fe ff de bk fg b fh rw fj rx fl ry fn rz fp sa fr rt ru rv" data-selectable-paragraph="" id="c34d" style="box-sizing: inherit; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; margin-bottom: -0.46em; list-style-type: disc; margin-left: 30px; padding-left: 0px; font-size: 21px; margin-top: 1.05em;"> Didn’t you know that the selection has a direction?</li> </ul> <p class="fe ff de bk fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="ad67" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px;"> Enough. I think I’ve made the point.<span> </span><a class="at cg fs ft fu fv" href="https://example.test/why-contenteditable-is-terrible-122d8a40e480" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(0, 0, 0, 0.84)\" /></svg>"); background-size: 1px 1px; background-position: 0px calc(1em + 1px);" target="_blank">ContentEditable is terrible</a>. Related APIs and their implementations such as selection, clipboard and drag and drop are incomplete and/or inconsistent and buggy. Range API is complicated and inconvenient. But your fridge isn’t empty yet and now you know what to do.</p> </div> </div> </section> <hr class="re dz ip rf rg jc rh ri rj rk rl" style="box-sizing: inherit; font-weight: 300; font-size: 28px; text-align: center; font-family: Georgia, Cambria, "Times New Roman", Times, serif; border: none; margin-top: 30px;" /> <section class="ez fa fb fc fd" style="box-sizing: inherit; word-break: break-word; overflow-wrap: break-word;"> <div class="n p" style="box-sizing: inherit; display: flex; justify-content: center;"> <div class="ac ae af ag ah dn aj ak" style="box-sizing: inherit; min-width: 0px; width: 680px; max-width: 680px; margin: 0px 64px;"> <h1 class="sb sc de bk bj io qo sd qq se sf sg sh si sj sk sl" data-selectable-paragraph="" id="b63d" style="box-sizing: inherit; margin: 1.25em 0px -0.28em; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-style: normal; color: rgba(0, 0, 0, 0.84); font-weight: 600; line-height: 1.12; letter-spacing: -0.022em; font-size: 34px;"> Goodbye, contentEditable</h1> <p class="fe ff de bk fg b fh sm fj sn fl so fn sp fp sq fr ez" data-selectable-paragraph="" id="2bea" style="box-sizing: inherit; margin: 0.86em 0px -0.46em; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px;"> The idea is simple. ContentEditable is evil and the Selection API is its evil twin. Avoid them as much as possible. So what’s the plan?</p> <ol style="box-sizing: inherit; margin: 0px; padding: 0px; list-style: none none;"> <li class="fe ff de bk fg b fh fi fj fk fl fm fn fo fp fq fr sr ru rv" data-selectable-paragraph="" id="0cb0" style="box-sizing: inherit; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; margin-bottom: -0.46em; margin-left: 30px; padding-left: 0px; list-style-type: decimal; font-size: 21px; margin-top: 2em;"> You need a custom selection system. It must be doable nowadays to get position (represented by a range, but we’ll simplify this in a moment) in the DOM on<span> </span><em class="rm" style="box-sizing: inherit; font-style: italic;">mousedown</em>/<em class="rm" style="box-sizing: inherit; font-style: italic;">mousemove</em>. You’ll display your custom caret (whoa… you can control its style now) and text selection (it’s a simple<span> </span><em class="rm" style="box-sizing: inherit; font-style: italic;"><span></em>).</li> <li class="fe ff de bk fg b fh rw fj rx fl ry fn rz fp sa fr sr ru rv" data-selectable-paragraph="" id="9e21" style="box-sizing: inherit; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; margin-bottom: -0.46em; margin-left: 30px; padding-left: 0px; list-style-type: decimal; font-size: 21px; margin-top: 1.05em;"> You need to handle typing. Let’s listen to the keyboard events and insert given character into the editor.</li> <li class="fe ff de bk fg b fh rw fj rx fl ry fn rz fp sa fr sr ru rv" data-selectable-paragraph="" id="f390" style="box-sizing: inherit; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; margin-bottom: -0.46em; margin-left: 30px; padding-left: 0px; list-style-type: decimal; font-size: 21px; margin-top: 1.05em;"> You need to handle navigation using the<span> </span><em class="rm" style="box-sizing: inherit; font-style: italic;">Arrow</em><span> </span>keys. Left and right seem easy, up and down a bit trickier but if you have point 1, you’ll do this too. Wait, there’s the<span> </span><em class="rm" style="box-sizing: inherit; font-style: italic;">Alt</em><span> </span>modifier which makes the<span> </span><em class="rm" style="box-sizing: inherit; font-style: italic;">Left</em><span> </span>and<span> </span><em class="rm" style="box-sizing: inherit; font-style: italic;">Right Arrow</em><span> </span>keys jump entire words. But of course you’ll look for spaces in the text and that’s it — told you, it’s trivial!</li> <li class="fe ff de bk fg b fh rw fj rx fl ry fn rz fp sa fr sr ru rv" data-selectable-paragraph="" id="ec90" style="box-sizing: inherit; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; margin-bottom: -0.46em; margin-left: 30px; padding-left: 0px; list-style-type: decimal; font-size: 21px; margin-top: 1.05em;"> Then you need to do something with pasting. You see that with the Clipboard API you can listen to the paste event on the document and retrieve the data from the data transfer. You can also use the old<span> </span><a class="at cg fs ft fu fv" href="http://docs.ckeditor.com/#!/guide/dev_clipboard-section-paste-bin" rel="noopener nofollow" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(0, 0, 0, 0.84)\" /></svg>"); background-size: 1px 1px; background-position: 0px calc(1em + 1px);" target="_blank">paste bin mechanism</a>.</li> </ol> <p class="fe ff de bk fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="5fe0" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px;"> The world is beautiful again. You’re surrounded by well known APIs or your own code which you can finally control. Say bye to that terrible feeling of being hopeless. You use the Selection API and ranges only for a direct interaction with the browser, but internally you implemented different mechanisms, more appropriate for text editing. No need to work on that ambiguous DOM. Only text, styles, indexes and translation to DOM. Applying bold is now a simple algorithm — add the style to selected letters and your automatic translation will update the DOM.</p> <p class="fe ff de bk fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="b7d3" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px;"> The food in the fridge is scarce, so you publish your project on<span> </span><a class="at cg fs ft fu fv" href="http://github.com/" rel="noopener nofollow" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(0, 0, 0, 0.84)\" /></svg>"); background-size: 1px 1px; background-position: 0px calc(1em + 1px);" target="_blank">GitHub</a>. You start receiving first bug reports, but no worries, no software is perfect from day one.</p> <blockquote class="ss st su" style="box-sizing: inherit; margin: 0px 0px 0px -20px; box-shadow: rgba(0, 0, 0, 0.84) 3px 0px 0px 0px inset; padding-left: 23px;"> <p class="fe ff de rm fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="c90a" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-style: italic; font-size: 21px;"> <strong class="fg sv" style="box-sizing: inherit; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-weight: 700;">How Do I Type Polish Characters?</strong></p> <p class="fe ff de rm fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="50de" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-style: italic; font-size: 21px;"> When I press<span> </span><em class="bk" style="box-sizing: inherit; font-style: normal;">Alt+L</em><span> </span>I expect that ‘ł’ is inserted, but your editor inserts ‘l’.</p> </blockquote> <p class="fe ff de bk fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="aab3" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px;"> Right, let’s see what you can do. You don’t know the keyboard layout, so you can’t simply check for the<span> </span><em class="rm" style="box-sizing: inherit; font-style: italic;">Alt</em><span> </span>modifier. Besides, there’re too many languages. OK, there’s<span> </span><a class="at cg fs ft fu fv" href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key" rel="noopener nofollow" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(0, 0, 0, 0.84)\" /></svg>"); background-size: 1px 1px; background-position: 0px calc(1em + 1px);" target="_blank"><em class="rm" style="box-sizing: inherit; font-style: italic;">KeyboardEvent.key</em></a><span> </span>from<span> </span><a class="at cg fs ft fu fv" href="https://w3c.github.io/uievents/" rel="noopener nofollow" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(0, 0, 0, 0.84)\" /></svg>"); background-size: 1px 1px; background-position: 0px calc(1em + 1px);" target="_blank">DOM level 3</a><span> </span>but so far it only works in IEs and Firefox.<span> </span><a class="at cg fs ft fu fv" href="https://code.google.com/p/chromium/issues/detail?id=263724" rel="noopener nofollow" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(0, 0, 0, 0.84)\" /></svg>"); background-size: 1px 1px; background-position: 0px calc(1em + 1px);" target="_blank">Blink will support</a><span> </span>it soon, too, so you can wait. There’s a high chance that all major browsers will support it within a reasonable time. </p> <blockquote class="ss st su" style="box-sizing: inherit; margin: 0px 0px 0px -20px; box-shadow: rgba(0, 0, 0, 0.84) 3px 0px 0px 0px inset; padding-left: 23px;"> <p class="fe ff de rm fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="6129" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-style: italic; font-size: 21px;"> <strong class="fg sv" style="box-sizing: inherit; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-weight: 700;">How Do I Type Accents?</strong></p> <p class="fe ff de rm fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="2495" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-style: italic; font-size: 21px;"> I have a Spanish keyboard layout. When I press ‘`’ and then a letter (e.g. `u`) I expect to first see the ‘tick’ and then letter ‘ù’ in the same place.</p> </blockquote> <p class="fe ff de bk fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="4a53" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px;"> Wait, what? Does he say that two keys are transformed into one letter? That’s crazy… you can handle these special cases somehow (if you can find out what keyboard layout is in use), but let’s hope that there aren’t many languages which work this way.</p> <blockquote class="ss st su" style="box-sizing: inherit; margin: 0px 0px 0px -20px; box-shadow: rgba(0, 0, 0, 0.84) 3px 0px 0px 0px inset; padding-left: 23px;"> <p class="fe ff de rm fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="abb9" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-style: italic; font-size: 21px;"> <strong class="fg sv" style="box-sizing: inherit; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-weight: 700;">How Do I Type Hiragana Characters?</strong></p> <p class="fe ff de rm fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="f7a1" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-style: italic; font-size: 21px;"> When I start typing this popup should appear and the word I’m currently typing should be underlined. It’s the so-called composition.</p> </blockquote> <figure class="rn ro rp rq rr gz cl cm paragraph-image" style="box-sizing: inherit; margin: 56px auto 0px; clear: both;"> <div class="sx sy gl sz ak" style="box-sizing: inherit; width: 680px; position: relative; transition: transform 300ms cubic-bezier(0.2, 0, 0.2, 1) 0s; cursor: zoom-in; z-index: auto;"> <div class="cl cm sw" style="box-sizing: inherit; margin-left: auto; margin-right: auto; max-width: 2008px;"> <div class="qd r gl qe" style="box-sizing: inherit; display: block; position: relative; margin: auto; background-color: rgba(0, 0, 0, 0.05);"> <div class="ta r" style="box-sizing: inherit; display: block; padding-bottom: 171.352px;"> <div class="fw qa dh t u hw ak cz qb qc" style="box-sizing: inherit; top: 0px; left: 0px; width: 680px; overflow: hidden; position: absolute; opacity: 0; height: 171.352px; transition: opacity 100ms ease 400ms; will-change: transform; transform: translateZ(0px);"> <img class="dh t u hw ak qg qh as tw" height="506" role="presentation" src="https://example.test/max/60/1*yhycdntbbkwkR0pd6cT8yA.png?q=20" style="box-sizing: inherit; vertical-align: middle; top: 0px; left: 0px; width: 680px; visibility: hidden; position: absolute; height: 171.352px; filter: blur(20px); transform: scale(1.1); transition: visibility 0ms ease 400ms;" width="2008" /></div> <img class="iz tt dh t u hw ak hu" height="506" role="presentation" src="https://example.test/max/4016/1*yhycdntbbkwkR0pd6cT8yA.png" style="box-sizing: inherit; vertical-align: middle; top: 0px; left: 0px; width: 680px; position: absolute; background: rgb(255, 255, 255); height: 171.352px; opacity: 1; transition: opacity 400ms ease 0ms;" width="2008" /> </div> </div> </div> </div> </figure> <p class="fe ff de bk fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="e6e0" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px;"> Right,<span> </span><a class="at cg fs ft fu fv" href="https://developer.mozilla.org/en-US/docs/Web/Events/compositionstart" rel="noopener nofollow" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(0, 0, 0, 0.84)\" /></svg>"); background-size: 1px 1px; background-position: 0px calc(1em + 1px);" target="_blank">composition events</a>. You’re sure you can do something with them (if only the browser would fire them). What’s worse, you find out that the<span> </span><a class="at cg fs ft fu fv" href="https://en.wikipedia.org/wiki/Input_method" rel="noopener nofollow" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(0, 0, 0, 0.84)\" /></svg>"); background-size: 1px 1px; background-position: 0px calc(1em + 1px);" target="_blank">Input Method Engine</a><span> </span>works differently in every OS and is often integrated with the OS (e.g. it learns new words and implements smart autocompletion). You’re beginning to feel hopeless once again. But then a brilliant idea comes to your mind — you can use a hidden textarea from which you’ll read the input. If you position it close to the caret you’ll even have the popup. You only lose contextual suggestions. There’s also some work on<span> </span><a class="at cg fs ft fu fv" href="http://www.w3.org/TR/ime-api/" rel="noopener nofollow" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(0, 0, 0, 0.84)\" /></svg>"); background-size: 1px 1px; background-position: 0px calc(1em + 1px);" target="_blank">opening the IME API</a>. One day you’ll remove all the hacks!</p> <blockquote class="ss st su" style="box-sizing: inherit; margin: 0px 0px 0px -20px; box-shadow: rgba(0, 0, 0, 0.84) 3px 0px 0px 0px inset; padding-left: 23px;"> <p class="fe ff de rm fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="fece" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-style: italic; font-size: 21px;"> <strong class="fg sv" style="box-sizing: inherit; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-weight: 700;">How Do I Type Using My iPad?</strong></p> <p class="fe ff de rm fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="1009" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-style: italic; font-size: 21px;"> When I tap the editor, the keyboard does not appear.</p> </blockquote> <p class="fe ff de bk fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="598a" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px;"> No focus in an editable field = no keyboard. Surely the trick with a hidden textarea will work. Will it? How do you paste now?</p> <blockquote class="ss st su" style="box-sizing: inherit; margin: 0px 0px 0px -20px; box-shadow: rgba(0, 0, 0, 0.84) 3px 0px 0px 0px inset; padding-left: 23px;"> <p class="fe ff de rm fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="39b6" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-style: italic; font-size: 21px;"> <strong class="fg sv" style="box-sizing: inherit; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-weight: 700;">Alt+Left/Right Arrow Should Jump Over One Word</strong></p> <p class="fe ff de rm fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="6269" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-style: italic; font-size: 21px;"> This text ‘ພາສາຈີນແມ່ນພາສາໜຶ່ງທີ່ເວົ້າໃນປະເທດຈີນ.’ contains many words, but your editor handles it as one word.</p> </blockquote> <p class="fe ff de bk fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="c890" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px;"> But where are the spaces?!</p> <blockquote class="ss st su" style="box-sizing: inherit; margin: 0px 0px 0px -20px; box-shadow: rgba(0, 0, 0, 0.84) 3px 0px 0px 0px inset; padding-left: 23px;"> <p class="fe ff de rm fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="a8f2" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-style: italic; font-size: 21px;"> <strong class="fg sv" style="box-sizing: inherit; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-weight: 700;">Undoing by Shaking Does Not Work on iPhone</strong></p> </blockquote> <p class="fe ff de bk fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="fb28" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px;"> Right, it’s bound to<span> </span><em class="rm" style="box-sizing: inherit; font-style: italic;">Ctrl+Z</em>. Time to use the accelerometer. </p> <blockquote class="ss st su" style="box-sizing: inherit; margin: 0px 0px 0px -20px; box-shadow: rgba(0, 0, 0, 0.84) 3px 0px 0px 0px inset; padding-left: 23px;"> <p class="fe ff de rm fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="5018" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-style: italic; font-size: 21px;"> <strong class="fg sv" style="box-sizing: inherit; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-weight: 700;">Keyboard Is Hidden When I Do a Selection on iPhone/iPad</strong></p> </blockquote> <p class="fe ff de bk fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="3f69" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px;"> Right. Focus moves from the hidden textarea to the document…</p> <blockquote class="ss st su" style="box-sizing: inherit; margin: 0px 0px 0px -20px; box-shadow: rgba(0, 0, 0, 0.84) 3px 0px 0px 0px inset; padding-left: 23px;"> <p class="fe ff de rm fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="0b27" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-style: italic; font-size: 21px;"> <strong class="fg sv" style="box-sizing: inherit; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-weight: 700;">Spell Checking Doesn’t Work</strong></p> </blockquote> <p class="fe ff de bk fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="8634" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px;"> The horror! The horror!</p> <blockquote class="ss st su" style="box-sizing: inherit; margin: 0px 0px 0px -20px; box-shadow: rgba(0, 0, 0, 0.84) 3px 0px 0px 0px inset; padding-left: 23px;"> <p class="fe ff de rm fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="e568" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-style: italic; font-size: 21px;"> <strong class="fg sv" style="box-sizing: inherit; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-weight: 700;">I Can’t Use Your Editor with a Keyboard and a Screen Reader</strong></p> <p class="fe ff de rm fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="6e09" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-style: italic; font-size: 21px;"> Your editor isn’t accessible. Normally when I tab into an editor, my screen reader notifies me about it. Then, when I navigate through the text it reads the surrounding words. It also reads what I type. Nothing like this happens in your editor. BTW. Did you see<span> </span><a class="at cg fs ft fu fv" href="http://www.w3.org/TR/2dcontext/#best-practices" rel="noopener nofollow" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(0, 0, 0, 0.84)\" /></svg>"); background-size: 1px 1px; background-position: 0px calc(1em + 1px);" target="_blank">http://www.w3.org/TR/2dcontext/#best-practices</a>?</p> </blockquote> <p class="fe ff de bk fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="fcfb" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px;"> No, you didn’t. And you should have.</p> </div> </div> </section> <hr class="re dz ip rf rg jc rh ri rj rk rl" style="box-sizing: inherit; font-weight: 300; font-size: 28px; text-align: center; font-family: Georgia, Cambria, "Times New Roman", Times, serif; border: none; margin-top: 30px;" /> <section class="ez fa fb fc fd" style="box-sizing: inherit; word-break: break-word; overflow-wrap: break-word;"> <div class="n p" style="box-sizing: inherit; display: flex; justify-content: center;"> <div class="ac ae af ag ah dn aj ak" style="box-sizing: inherit; min-width: 0px; width: 680px; max-width: 680px; margin: 0px 64px;"> <h1 class="sb sc de bk bj io qo sd qq se sf sg sh si sj sk sl" data-selectable-paragraph="" id="741f" style="box-sizing: inherit; margin: 1.25em 0px -0.28em; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-style: normal; color: rgba(0, 0, 0, 0.84); font-weight: 600; line-height: 1.12; letter-spacing: -0.022em; font-size: 34px;"> Back to Square One (and a Half)</h1> <p class="fe ff de bk fg b fh sm fj sn fl so fn sp fp sq fr ez" data-selectable-paragraph="" id="a4eb" style="box-sizing: inherit; margin: 0.86em 0px -0.46em; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px;"> I think the lesson learned is that contentEditable may be terrible, but it is already here. I’m sure that for all the issues that I mentioned there will be native APIs one day, but believe me — that day is not yet to come. Standardising such complex features is an extremely tough job, because what you see is still the tip of the iceberg. Even though I’m working with contentEditable for nearly four years (that’s nothing comparing to Frederico Knabben’s 13 :D) I still find W3C’s<span> </span><a class="at cg fs ft fu fv" href="https://lists.w3.org/Archives/Public/public-webapps/" rel="noopener nofollow" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(0, 0, 0, 0.84)\" /></svg>"); background-size: 1px 1px; background-position: 0px calc(1em + 1px);" target="_blank">public-web-apps</a><span> </span>and<span> </span><a class="at cg fs ft fu fv" href="https://lists.w3.org/Archives/Public/public-editing-tf/" rel="noopener nofollow" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(0, 0, 0, 0.84)\" /></svg>"); background-size: 1px 1px; background-position: 0px calc(1em + 1px);" target="_blank">public-editing-tf</a><span> </span>mailing lists eye-opening. Moreover, there are many use cases for editing in the browsers and even WYSIWYG text editors differ among themselves so it would be unfair to lock browsers just for one use case.</p> </div> </div> </section> <hr class="re dz ip rf rg jc rh ri rj rk rl" style="box-sizing: inherit; font-weight: 300; font-size: 28px; text-align: center; font-family: Georgia, Cambria, "Times New Roman", Times, serif; border: none; margin-top: 30px;" /> <section class="ez fa fb fc fd" style="box-sizing: inherit; word-break: break-word; overflow-wrap: break-word;"> <div class="n p" style="box-sizing: inherit; display: flex; justify-content: center;"> <div class="ac ae af ag ah dn aj ak" style="box-sizing: inherit; min-width: 0px; width: 680px; max-width: 680px; margin: 0px 64px;"> <h1 class="sb sc de bk bj io qo sd qq se sf sg sh si sj sk sl" data-selectable-paragraph="" id="3eec" style="box-sizing: inherit; margin: 1.25em 0px -0.28em; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-style: normal; color: rgba(0, 0, 0, 0.84); font-weight: 600; line-height: 1.12; letter-spacing: -0.022em; font-size: 34px;"> The Editing Task Force</h1> <p class="fe ff de bk fg b fh sm fj sn fl so fn sp fp sq fr ez" data-selectable-paragraph="" id="bec6" style="box-sizing: inherit; margin: 0.86em 0px -0.46em; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px;"> Talking about standards — contentEditable needs one, because we need contentEditable. Years will pass before there will be any chance of implementing a full featured, stable and usable WYSIWYG editor without contentEditable. Therefore, the<span> </span><a class="at cg fs ft fu fv" href="http://www.w3.org/wiki/Editing_Taskforce" rel="noopener nofollow" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(0, 0, 0, 0.84)\" /></svg>"); background-size: 1px 1px; background-position: 0px calc(1em + 1px);" target="_blank">W3C Editing Task Force</a><span> </span>was created last year (which I and Frederico Knabben joined) where some tough discussions started on what to do with the current situation. I will write a separate post about this effort as it looks really promising. </p> <p class="fe ff de bk fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="aba0" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px;"> (Edit: You can read more about contentEditable standardization in<span> </span><a class="at cg fs ft fu fv" href="https://foobar.test/example/fixing-contenteditable-1a9a5073c35d" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(0, 0, 0, 0.84)\" /></svg>"); background-size: 1px 1px; background-position: 0px calc(1em + 1px);" target="_blank">”Fixing ContentEditable”</a>.)</p> </div> </div> </section> <hr class="re dz ip rf rg jc rh ri rj rk rl" style="box-sizing: inherit; font-weight: 300; font-size: 28px; text-align: center; font-family: Georgia, Cambria, "Times New Roman", Times, serif; border: none; margin-top: 30px;" /> <section class="ez fa fb fc fd" style="box-sizing: inherit; word-break: break-word; overflow-wrap: break-word;"> <div class="n p" style="box-sizing: inherit; display: flex; justify-content: center;"> <div class="ac ae af ag ah dn aj ak" style="box-sizing: inherit; min-width: 0px; width: 680px; max-width: 680px; margin: 0px 64px;"> <h1 class="sb sc de bk bj io qo sd qq se sf sg sh si sj sk sl" data-selectable-paragraph="" id="74d1" style="box-sizing: inherit; margin: 1.25em 0px -0.28em; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-style: normal; color: rgba(0, 0, 0, 0.84); font-weight: 600; line-height: 1.12; letter-spacing: -0.022em; font-size: 34px;"> ContentEditable — the Good Parts</h1> <p class="fe ff de bk fg b fh sm fj sn fl so fn sp fp sq fr ez" data-selectable-paragraph="" id="8c4a" style="box-sizing: inherit; margin: 0.86em 0px -0.46em; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px;"> ContentEditable is like JavaScript, only Douglas Crockford hasn’t written a book about it yet. But (like JavaScript) it also has its good parts (yeah, I know — the good/bad ratio is debatable). It’s amazing that adding one attribute to an HTML element enables typing, selection, keyboard navigation, spell checking, drag and drop, pasting, undo manager. That all of this is integrated with the OS, that such editor can be used with a screen reader or on a touchscreen device and that it’s well<span> </span><a class="at cg fs ft fu fv" href="https://en.wikipedia.org/wiki/Internationalization_and_localization" rel="noopener nofollow" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(0, 0, 0, 0.84)\" /></svg>"); background-size: 1px 1px; background-position: 0px calc(1em + 1px);" target="_blank">internationalised</a>. Let’s focus on these good parts and forget the bad ones.</p> <p class="fe ff de bk fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="a3ef" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px;"> Over the past years, while working on CKEditor I noticed that we were gradually replacing native features with our own implementations. It started with a custom behavior of the<span> </span><em class="rm" style="box-sizing: inherit; font-style: italic;">Enter</em><span> </span>key, commands (from the<span> </span><em class="rm" style="box-sizing: inherit; font-style: italic;">execCommand()</em><span> </span>API, to ability to apply, remove and check state of a specific style like<span> </span><em class="rm" style="box-sizing: inherit; font-style: italic;">bold</em>), undo manager and intercepted pasting so the pasted content can be filtered out. Then some improvements to the selection system were added (such as locking it when the editor is blurred, which allows the implementation of modals) together with enhanced navigation in tables and completely custom list editing. Since version 4.0, CKEditor has its custom “insert HTML into selection” mechanism and a<span> </span><a class="at cg fs ft fu fv" href="http://sdk.ckeditor.com/samples/magicline.html" rel="noopener nofollow" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(0, 0, 0, 0.84)\" /></svg>"); background-size: 1px 1px; background-position: 0px calc(1em + 1px);" target="_blank">feature allowing reaching non-editable places</a>. CKEditor 4.1 introduced highly customisable<span> </span><a class="at cg fs ft fu fv" href="http://docs.ckeditor.com/#!/guide/dev_acf" rel="noopener nofollow" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(0, 0, 0, 0.84)\" /></svg>"); background-size: 1px 1px; background-position: 0px calc(1em + 1px);" target="_blank">content filtering</a><span> </span>(no more mess on paste). CKEditor 4.3 brought support for<span> </span><a class="at cg fs ft fu fv" href="http://sdk.ckeditor.com/samples/simplebox.html" rel="noopener nofollow" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(0, 0, 0, 0.84)\" /></svg>"); background-size: 1px 1px; background-position: 0px calc(1em + 1px);" target="_blank">non-editable islands with editable islands inside</a><span> </span>which required overriding many native systems (selection, keyboard, focus, clipboard). Somewhere in the meantime we implemented custom<span> </span><em class="rm" style="box-sizing: inherit; font-style: italic;">Backspace</em><span> </span>and<span> </span><em class="rm" style="box-sizing: inherit; font-style: italic;">Delete</em><span> </span>support to workaround<span> </span><a class="at cg fs ft fu fv" href="http://code.google.com/p/chromium/issues/detail?id=226941" rel="noopener nofollow" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(0, 0, 0, 0.84)\" /></svg>"); background-size: 1px 1px; background-position: 0px calc(1em + 1px);" target="_blank">Blink’s</a><span> </span>and<span> </span><a class="at cg fs ft fu fv" href="https://bugs.webkit.org/show_bug.cgi?id=114791" rel="noopener nofollow" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(0, 0, 0, 0.84)\" /></svg>"); background-size: 1px 1px; background-position: 0px calc(1em + 1px);" target="_blank">WebKit’s</a><span> </span>broken implementations. Finally, just a few weeks ago we made a final takeover of the clipboard, which means that in some browsers copy, cut and paste operations are fully handled by CKEditor.</p> <p class="fe ff de bk fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="f149" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px;"> It means that today CKEditor does not let the browser do anything to the content except handling typing, some deleting and that’s basically it. At the same time, it still uses the native selection system, keyboard navigation and other APIs such as those related to clipboard or focus management.</p> <p class="fe ff de bk fg b fh fi fj fk fl fm fn fo fp fq fr ez" data-selectable-paragraph="" id="16e6" style="box-sizing: inherit; margin: 2em 0px -0.46em; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px;"> With<span> </span><a class="at cg fs ft fu fv" href="https://ckeditor.com/ckeditor-5/" rel="noopener nofollow" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(0, 0, 0, 0.84)\" /></svg>"); background-size: 1px 1px; background-position: 0px calc(1em + 1px);" target="_blank">CKEditor 5</a><span> </span>we are planning to conclude this process by letting the browser insert text only, but with CKEditor’s control (edit: read more in<span> </span><a class="at cg fs ft fu fv" href="https://foobar.test/example/ckeditor-5-the-future-of-rich-text-editing-2b9300f9df2c" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(0, 0, 0, 0.84)\" /></svg>"); background-size: 1px 1px; background-position: 0px calc(1em + 1px);" target="_blank">“CKEditor 5: The Future of Rich Text Editing”</a>). Ironically, we plan to base all the editing algorithms on a custom data model as we agree that DOM is not the perfect tool for this job. Of course, we are reaching the moment where we may face internationalisation issues (like the support for<span> </span><em class="rm" style="box-sizing: inherit; font-style: italic;">Alt+Backspace</em>) but we are aware of this. What’s more, this is the piece of functionality which may be opened by the browsers as one of the first ones, thanks to the work done by the Editing Task Force. I hope to write more about this in the near future (edit: read more in<span> </span><a class="at cg fs ft fu fv" href="https://foobar.test/example/fixing-contenteditable-1a9a5073c35d" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(0, 0, 0, 0.84)\" /></svg>"); background-size: 1px 1px; background-position: 0px calc(1em + 1px);" target="_blank">”Fixing ContentEditable”</a>).</p> </div> </div> </section> <hr class="re dz ip rf rg jc rh ri rj rk rl" style="box-sizing: inherit; font-weight: 300; font-size: 28px; text-align: center; font-family: Georgia, Cambria, "Times New Roman", Times, serif; border: none; margin-top: 30px;" /> <section class="ez fa fb fc fd" style="box-sizing: inherit; word-break: break-word; overflow-wrap: break-word;"> <div class="n p" style="box-sizing: inherit; display: flex; justify-content: center;"> <div class="ac ae af ag ah dn aj ak" style="box-sizing: inherit; min-width: 0px; width: 680px; max-width: 680px; margin: 0px 64px;"> <h1 class="sb sc de bk bj io qo sd qq se sf sg sh si sj sk sl" data-selectable-paragraph="" id="b6c8" style="box-sizing: inherit; margin: 1.25em 0px -0.28em; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-style: normal; color: rgba(0, 0, 0, 0.84); font-weight: 600; line-height: 1.12; letter-spacing: -0.022em; font-size: 34px;"> <strong class="az" style="box-sizing: inherit; font-weight: inherit;">Editing Framework</strong> </h1> <p class="fe ff de bk fg b fh sm fj sn fl so fn sp fp sq fr ez" data-selectable-paragraph="" id="403c" style="box-sizing: inherit; margin: 0.86em 0px -0.46em; font-weight: 400; font-style: normal; color: rgba(0, 0, 0, 0.84); word-break: break-word; line-height: 1.58; letter-spacing: -0.004em; font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px;"> All this sounds nice, but the amount of work needed to reach such state is still huge. Even with the know-how it does not seem to be a project which can be approached by a single developer or even a medium-sized company. Therefore, we believe that an editing framework, which will allow other developers to build their customised solutions on top of it, needs to be implemented. This is one of the goals that we defined for CKEditor 5, however projects like<span> </span><a class="at cg fs ft fu fv" href="http://alloyeditor.com/" rel="noopener nofollow" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(0, 0, 0, 0.84)\" /></svg>"); background-size: 1px 1px; background-position: 0px calc(1em + 1px);" target="_blank">Alloy Editor</a><span> </span>prove that this is doable even with CKEditor 4. Only if it wasn’t for developers starting with a clean contentEditable as soon as they find one of the existing editors slightly disappointing, we could have been in a different place today ;).</p> </div> </div> </section> </div> </article> <div style="box-sizing: inherit; color: rgba(0, 0, 0, 0.8); font-family: BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> <div class="gy gz n co p" style="box-sizing: inherit; display: flex; justify-content: center; flex-direction: column; margin-top: 40px; clear: both;"> <div class="n p" style="box-sizing: inherit; display: flex; justify-content: center;"> <div class="ac ae af ag ah dn aj ak" style="box-sizing: inherit; min-width: 0px; width: 680px; max-width: 680px; margin: 0px 64px;"> <div class="n ha" style="box-sizing: inherit; display: flex; flex-wrap: wrap;"> </div> <div class="n o ha" style="box-sizing: inherit; display: flex; align-items: center; flex-wrap: wrap;"> </div> <div class="hb r" style="box-sizing: inherit; display: block; margin-top: 25px;"> <ul class="ba bb" style="box-sizing: inherit; margin: 0px; padding: 0px; list-style: none none;"> <li class="cf ps th ti" style="box-sizing: inherit; display: inline-block; list-style-type: none; margin-right: 8px; margin-bottom: 8px;"> <a class="tj tk cg bo r tl tm a b eo" href="https://example.test/tag/web-development" style="box-sizing: inherit; color: rgba(0, 0, 0, 0.54); text-decoration: none; -webkit-tap-highlight-color: transparent; font-family: BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-weight: 400; display: block; font-size: 15px; border-radius: 3px; padding: 5px 10px; background: rgba(0, 0, 0, 0.05); line-height: 22px;">Web Development</a></li> <li class="cf ps th ti" style="box-sizing: inherit; display: inline-block; list-style-type: none; margin-right: 8px; margin-bottom: 8px;"> <a class="tj tk cg bo r tl tm a b eo" href="https://example.test/tag/accessibility" style="box-sizing: inherit; color: rgba(0, 0, 0, 0.54); text-decoration: none; -webkit-tap-highlight-color: transparent; font-family: BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-weight: 400; display: block; font-size: 15px; border-radius: 3px; padding: 5px 10px; background: rgba(0, 0, 0, 0.05); line-height: 22px;">Accessibility</a> </li> <li class="cf ps th ti" style="box-sizing: inherit; display: inline-block; list-style-type: none; margin-right: 8px; margin-bottom: 8px;"> <a class="tj tk cg bo r tl tm a b eo" href="https://example.test/tag/javascript" style="box-sizing: inherit; color: rgba(0, 0, 0, 0.54); text-decoration: none; -webkit-tap-highlight-color: transparent; font-family: BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-weight: 400; display: block; font-size: 15px; border-radius: 3px; padding: 5px 10px; background: rgba(0, 0, 0, 0.05); line-height: 22px;">JavaScript</a> </li> </ul> </div> <div class="hc n dp ab" style="box-sizing: inherit; display: flex; justify-content: space-between; margin-top: 15px;"> <div class="n o" style="box-sizing: inherit; display: flex; align-items: center;"> <div class="hd r gl" style="box-sizing: inherit; display: block; position: relative; margin-right: 16px;"> <div class="c cr dt n o he gl hf hg tn hi hj hk hl hm hn ho hp hq hr pn" style="box-sizing: inherit; background-color: rgb(255, 255, 255); display: flex; align-items: center; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 50%; position: relative; height: 60px; width: 60px; transition: border-color 150ms ease 0s;"> <div class="ba gm gn go gp gq ht kt o hu dt n p hv u hw dh t ak pj tg pl hx" style="box-sizing: inherit; display: flex; align-items: center; justify-content: center; top: 0px; left: 0px; width: 58px; padding: 0px; position: absolute; border-radius: 50%; outline: 0px; border: 0px; user-select: none; cursor: pointer; background: rgb(255, 255, 255); z-index: 2; height: 58px; fill: rgb(2, 184, 117); transition: fill 200ms ease 0s;"> <a class="at au av aw ax ay az ba bb bc bd be bf bg bh bi" href="https://example.test/" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; fill: inherit; font-size: inherit; border: inherit; font-family: inherit; letter-spacing: inherit; font-weight: inherit; padding: 0px; margin: 0px;"><svg height="33" viewbox="0 0 33 33" width="33"> <path d="M28.86 17.34l-3.64-6.4c-.3-.43-.71-.73-1.16-.8a1.12 1.12 0 0 0-.9.21c-.62.5-.73 1.18-.32 2.06l1.22 2.6 1.4 2.45c2.23 4.09 1.51 8-2.15 11.66a9.6 9.6 0 0 1-.8.71 6.53 6.53 0 0 0 4.3-2.1c3.82-3.82 3.57-7.87 2.05-10.39zm-6.25 11.08c3.35-3.35 4-6.78 1.98-10.47L21.2 12c-.3-.43-.71-.72-1.16-.8a1.12 1.12 0 0 0-.9.22c-.62.49-.74 1.18-.32 2.06l1.72 3.63a.5.5 0 0 1-.81.57l-8.91-8.9a1.33 1.33 0 0 0-1.89 1.88l5.3 5.3a.5.5 0 0 1-.71.7l-5.3-5.3-1.49-1.49c-.5-.5-1.38-.5-1.88 0a1.34 1.34 0 0 0 0 1.89l1.49 1.5 5.3 5.28a.5.5 0 0 1-.36.86.5.5 0 0 1-.36-.15l-5.29-5.29a1.34 1.34 0 0 0-1.88 0 1.34 1.34 0 0 0 0 1.89l2.23 2.23L9.3 21.4a.5.5 0 0 1-.36.85.5.5 0 0 1-.35-.14l-3.32-3.33a1.33 1.33 0 0 0-1.89 0 1.32 1.32 0 0 0-.39.95c0 .35.14.69.4.94l6.39 6.4c3.53 3.53 8.86 5.3 12.82 1.35zM12.73 9.26l5.68 5.68-.49-1.04c-.52-1.1-.43-2.13.22-2.89l-3.3-3.3a1.34 1.34 0 0 0-1.88 0 1.33 1.33 0 0 0-.4.94c0 .22.07.42.17.61zm14.79 19.18a7.46 7.46 0 0 1-6.41 2.31 7.92 7.92 0 0 1-3.67.9c-3.05 0-6.12-1.63-8.36-3.88l-6.4-6.4A2.31 2.31 0 0 1 2 19.72a2.33 2.33 0 0 1 1.92-2.3l-.87-.87a2.34 2.34 0 0 1 0-3.3 2.33 2.33 0 0 1 1.24-.64l-.14-.14a2.34 2.34 0 0 1 0-3.3 2.39 2.39 0 0 1 3.3 0l.14.14a2.33 2.33 0 0 1 3.95-1.24l.09.09c.09-.42.29-.83.62-1.16a2.34 2.34 0 0 1 3.3 0l3.38 3.39a2.17 2.17 0 0 1 1.27-.17c.54.08 1.03.35 1.45.76.1-.55.41-1.03.9-1.42a2.12 2.12 0 0 1 1.67-.4 2.8 2.8 0 0 1 1.85 1.25l3.65 6.43c1.7 2.83 2.03 7.37-2.2 11.6zM13.22.48l-1.92.89 2.37 2.83-.45-3.72zm8.48.88L19.78.5l-.44 3.7 2.36-2.84zM16.5 3.3L15.48 0h2.04L16.5 3.3z" fill-rule="evenodd"></path> </svg></a></div> </div> </div> <div class="gw r" style="box-sizing: inherit; display: block; margin-top: 5px;"> <div class="gx" style="box-sizing: inherit;"> <h4 class="bj dz ea bl de" style="box-sizing: inherit; margin: 0px; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; line-height: 20px; color: rgba(0, 0, 0, 0.84); font-weight: 300; font-size: 16px;"> <button class="at au av aw ax ay az ba bb bc bd be bf bg bh bi" style="box-sizing: inherit; -webkit-tap-highlight-color: transparent; background: transparent; overflow: visible; margin: 0px; color: inherit; fill: inherit; font-size: inherit; border: inherit; font-family: inherit; letter-spacing: inherit; font-weight: inherit; padding: 0px; text-align: left;">1.4K claps</button></h4> </div> </div> </div> <div class="n o" style="box-sizing: inherit; display: flex; align-items: center;"> <div class="ex r ar" style="box-sizing: inherit; display: block; flex: 0 0 auto; padding-right: 8px;"><a class="at au av aw ax ay az ba bb bc bd be bf bg bh bi" href="https://example.test/p/12345/share/twitter?source=post_actions_footer---------------------------" rel="noopener nofollow" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; fill: inherit; font-size: inherit; border: inherit; font-family: inherit; letter-spacing: inherit; font-weight: inherit; padding: 0px; margin: 0px;" target="_blank"><svg class="q" height="29" width="29"> <path d="M22.05 7.54a4.47 4.47 0 0 0-3.3-1.46 4.53 4.53 0 0 0-4.53 4.53c0 .35.04.7.08 1.05A12.9 12.9 0 0 1 5 6.89a5.1 5.1 0 0 0-.65 2.26c.03 1.6.83 2.99 2.02 3.79a4.3 4.3 0 0 1-2.02-.57v.08a4.55 4.55 0 0 0 3.63 4.44c-.4.08-.8.13-1.21.16l-.81-.08a4.54 4.54 0 0 0 4.2 3.15 9.56 9.56 0 0 1-5.66 1.94l-1.05-.08c2 1.27 4.38 2.02 6.94 2.02 8.3 0 12.86-6.9 12.84-12.85.02-.24 0-.43 0-.65a8.68 8.68 0 0 0 2.26-2.34c-.82.38-1.7.62-2.6.72a4.37 4.37 0 0 0 1.95-2.51c-.84.53-1.81.9-2.83 1.13z"> </path> </svg></a></div> <div class="ex r ar" style="box-sizing: inherit; display: block; flex: 0 0 auto; padding-right: 8px;"><a class="at au av aw ax ay az ba bb bc bd be bf bg bh bi" href="https://example.test/p/12345/share/facebook?source=post_actions_footer---------------------------" rel="noopener nofollow" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; fill: inherit; font-size: inherit; border: inherit; font-family: inherit; letter-spacing: inherit; font-weight: inherit; padding: 0px; margin: 0px;" target="_blank"><svg class="q" height="29" width="29"> <path d="M23.2 5H5.8a.8.8 0 0 0-.8.8V23.2c0 .44.35.8.8.8h9.3v-7.13h-2.38V13.9h2.38v-2.38c0-2.45 1.55-3.66 3.74-3.66 1.05 0 1.95.08 2.2.11v2.57h-1.5c-1.2 0-1.48.57-1.48 1.4v1.96h2.97l-.6 2.97h-2.37l.05 7.12h5.1a.8.8 0 0 0 .79-.8V5.8a.8.8 0 0 0-.8-.79"> </path> </svg></a></div> <div class="ex r ar" style="box-sizing: inherit; display: block; flex: 0 0 auto; padding-right: 8px;"><a class="at au av aw ax ay az ba bb bc bd be bf bg bh bi" href="https://example.test/foo?x=y&source=post_actions_footer--------------------------bookmark_sidebar-" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; fill: inherit; font-size: inherit; border: inherit; font-family: inherit; letter-spacing: inherit; font-weight: inherit; padding: 0px; margin: 0px;"><svg height="25" viewbox="0 0 25 25" width="25"> <path d="M19 6a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v14.66h.01c.01.1.05.2.12.28a.5.5 0 0 0 .7.03l5.67-4.12 5.66 4.13a.5.5 0 0 0 .71-.03.5.5 0 0 0 .12-.29H19V6zm-6.84 9.97L7 19.64V6a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v13.64l-5.16-3.67a.49.49 0 0 0-.68 0z" fill-rule="evenodd"></path> </svg></a></div> <div aria-hidden="true" class="cf" style="box-sizing: inherit; display: inline-block;"> <div aria-hidden="true" class="cf" style="box-sizing: inherit; display: inline-block;"> <div class="r ar" style="box-sizing: inherit; display: block; flex: 0 0 auto;"><button class="at au av aw ax ay az ba bb bc bd be bf bg bh bi" style="box-sizing: inherit; -webkit-tap-highlight-color: transparent; background: transparent; overflow: visible; margin: 0px; color: inherit; fill: inherit; font-size: inherit; border: inherit; font-family: inherit; letter-spacing: inherit; font-weight: inherit; padding: 0px;"><svg class="q" height="25" viewbox="-480.5 272.5 21 21" width="25"> <path d="M-463 284.6c.9 0 1.6-.7 1.6-1.6s-.7-1.6-1.6-1.6-1.6.7-1.6 1.6.7 1.6 1.6 1.6zm0 .9c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5 2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5zm-7-.9c.9 0 1.6-.7 1.6-1.6s-.7-1.6-1.6-1.6-1.6.7-1.6 1.6.7 1.6 1.6 1.6zm0 .9c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5 2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5zm-7-.9c.9 0 1.6-.7 1.6-1.6s-.7-1.6-1.6-1.6-1.6.7-1.6 1.6.7 1.6 1.6 1.6zm0 .9c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5 2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5z"> </path> </svg></button></div> </div> </div> </div> </div> <div class="hy hz ia hb r ab" style="box-sizing: inherit; display: block; margin-top: 25px; padding-top: 32px; border-top: 1px solid rgba(0, 0, 0, 0.1); margin-bottom: 25px;"> <div class="ib ic r gl" style="box-sizing: inherit; display: block; position: relative; margin-bottom: 32px; min-height: 80px;"> <div class="r dh if ig" style="box-sizing: inherit; display: block; position: absolute;"><span class="r id an ie" style="box-sizing: inherit; display: block;"><a href="https://example.test/@reinmarpl?source=follow_footer--------------------------follow_footer-" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent;"><img alt="Piotrek Koszuliński" class="r dt ih ii" height="80" src="https://example.test/fit/c/160/160/1*eTpp1WMpoogzN8gYIt1XCw.jpeg" style="box-sizing: inherit; vertical-align: middle; display: block; border-radius: 50%; height: 80px; width: 80px;" width="80" /></a> </span></div> <div class="ij r ik" style="box-sizing: inherit; display: block; padding-left: 102px;"> <p class="bj dz eo bl bo il im" style="box-sizing: inherit; margin: 0px; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; line-height: 20px; color: rgba(0, 0, 0, 0.54); font-weight: 300; font-size: 15px; text-transform: uppercase; letter-spacing: 0.05em;"> <span class="r id an ie" style="box-sizing: inherit; display: block;"><span class="r" style="box-sizing: inherit; display: block;">WRITTEN BY</span></span></p> </div> <div class="ij in n ik" style="box-sizing: inherit; display: flex; padding-left: 102px; margin-bottom: 6px;"> <div class="ak n o dp" style="box-sizing: inherit; display: flex; align-items: center; width: 578px; justify-content: space-between;"> <h2 class="bj io ip iq de" style="box-sizing: inherit; margin: 0px; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; color: rgba(0, 0, 0, 0.84); font-weight: 600; font-size: 28px; line-height: 36px;"> <span class="r id an ie" style="box-sizing: inherit; display: block;"><span class="r" style="box-sizing: inherit; display: block;"><a class="at au av aw ax ay az ba bb bc bd be bf bg bh bi" href="https://example.test/@reinmarpl?source=follow_footer--------------------------follow_footer-" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; fill: inherit; font-size: inherit; border: inherit; font-family: inherit; letter-spacing: inherit; font-weight: inherit; padding: 0px; margin: 0px;">Piotrek Koszuliński</a></span></span></h2> <div class="r g" style="box-sizing: inherit; display: block;"><span class="r id an ie" style="box-sizing: inherit; display: block;"><span class="r" style="box-sizing: inherit; display: block;"><button class="ir by pi pj pm pk pl pn bc cb bj b bk bl bm bn cc cd ce cf cg bf" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; background: 0px center; overflow: visible; margin: 0px; font-weight: 400; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-style: normal; line-height: 20px; font-size: 15.8px; letter-spacing: 0px; border-radius: 4px; border-width: 1px; border-style: solid; display: inline-block; text-decoration: none; padding: 4px 12px; color: rgb(28, 153, 99); fill: rgb(2, 184, 117); border-color: rgb(2, 184, 117);">Follow</button> </span></span></div> </div> </div> <div class="ij is r ik aq" style="box-sizing: inherit; display: block; padding-left: 102px; max-width: 555px;"> <div class="it r" style="box-sizing: inherit; display: block; max-width: 450px;"> <h4 class="bj dz iu iv bo" style="box-sizing: inherit; margin: 0px; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; color: rgba(0, 0, 0, 0.54); font-weight: 300; font-size: 18px; line-height: 24px;"> @CKEditor 5 project lead. Software architect. JavaScript developer. Taming contentEditable since 2012.</h4> </div> </div> </div> <div class="hy r" style="box-sizing: inherit; display: block; padding-top: 32px;"> </div> <div class="ib ic r gl" style="box-sizing: inherit; display: block; position: relative; margin-bottom: 32px; min-height: 80px;"> <div class="r dh if ig" style="box-sizing: inherit; display: block; position: absolute;"><span class="r id an ie" style="box-sizing: inherit; display: block;"><a href="https://foobar.test/example?source=follow_footer--------------------------follow_footer-" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent;"><img alt="Content Uneditable" class="cb ii ih" height="80" src="https://example.test/fit/c/160/160/1*A6RgIIA4_CEbA70tXdOs1A.png" style="box-sizing: inherit; vertical-align: middle; border-radius: 4px; height: 80px; width: 80px;" width="80" /></a> </span></div> <div class="ij in n ik" style="box-sizing: inherit; display: flex; padding-left: 102px; margin-bottom: 6px;"> <div class="ak n o dp" style="box-sizing: inherit; display: flex; align-items: center; width: 578px; justify-content: space-between;"> <h2 class="bj io ip iq de" style="box-sizing: inherit; margin: 0px; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; color: rgba(0, 0, 0, 0.84); font-weight: 600; font-size: 28px; line-height: 36px;"> <span class="r id an ie" style="box-sizing: inherit; display: block;"><span class="r" style="box-sizing: inherit; display: block;"><a class="at au av aw ax ay az ba bb bc bd be bf bg bh bi" href="https://foobar.test/example?source=follow_footer--------------------------follow_footer-" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; fill: inherit; font-size: inherit; border: inherit; font-family: inherit; letter-spacing: inherit; font-weight: inherit; padding: 0px; margin: 0px;">Content Uneditable</a></span></span></h2> <div class="r g" style="box-sizing: inherit; display: block;"> <div aria-hidden="true" class="cf" style="box-sizing: inherit; display: inline-block;"><span class="r id an ie" style="box-sizing: inherit; display: block;"><span class="r" style="box-sizing: inherit; display: block;"><button class="ir by pi pj pm pk pl pn bc cb bj b bk bl bm bn cc cd ce cf cg bf" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; background: 0px center; overflow: visible; margin: 0px; font-weight: 400; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-style: normal; line-height: 20px; font-size: 15.8px; letter-spacing: 0px; border-radius: 4px; border-width: 1px; border-style: solid; display: inline-block; text-decoration: none; padding: 4px 12px; color: rgb(28, 153, 99); fill: rgb(2, 184, 117); border-color: rgb(2, 184, 117);">Follow</button> </span></span></div> </div> </div> </div> <div class="ij to r ik aq" style="box-sizing: inherit; display: block; padding-left: 102px; max-width: 550px;"> <div class="it r" style="box-sizing: inherit; display: block; max-width: 450px;"> <h4 class="bj dz iu iv bo" style="box-sizing: inherit; margin: 0px; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; color: rgba(0, 0, 0, 0.54); font-weight: 300; font-size: 18px; line-height: 24px;"> All your content are belong to us. Curated by CKSource.</h4> </div> </div> </div> </div> <div class="ix hz r ab" style="box-sizing: inherit; display: block; border-top: 1px solid rgba(0, 0, 0, 0.1); padding-top: 25px;"> <div class="ja tp cb r jc aq" style="box-sizing: inherit; display: block; border-radius: 4px; padding: 20px; text-align: center; border: 1px solid rgb(2, 184, 117);"> <a class="at au av aw ax ay az ba bb bc bd be bf bg bh bi" href="https://example.test/p/12345/responses/show?source=follow_footer--------------------------follow_footer-" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; fill: inherit; font-size: inherit; border: inherit; font-family: inherit; letter-spacing: inherit; font-weight: inherit; padding: 0px; margin: 0px;"><span class="iy iz gp" style="box-sizing: inherit; cursor: pointer; color: rgba(0, 0, 0, 0.76); opacity: 1;"><span class="pi" style="box-sizing: inherit; color: rgb(28, 153, 99);">See responses (18)</span></span></a></div> </div> </div> </div> <div class="jd r je ab" style="box-sizing: inherit; display: block; margin-top: 64px; background-color: rgba(0, 0, 0, 0.02);"> <div class="n p" style="box-sizing: inherit; display: flex; justify-content: center;"> <div class="ac ae af ag ah ai aj ak" style="box-sizing: inherit; max-width: 1192px; min-width: 0px; width: 935px; margin: 0px 64px;"> <div class="kv r kw" style="box-sizing: inherit; display: block; margin: 32px 0px;"> <div class="kp kx ib r" style="box-sizing: inherit; display: block; margin-bottom: 32px; padding-bottom: 8px; border-bottom: 1px solid rgba(0, 0, 0, 0.1);"> <h2 class="bj io ky kz de" style="box-sizing: inherit; margin: 0px; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; color: rgba(0, 0, 0, 0.84); font-weight: 600; font-size: 22px; line-height: 28px;"> Lorem ipsum</h2> </div> <div class="la n lb ha lc ld le lf lg lh li lj lk ll lm ln lo lp lq" style="box-sizing: inherit; display: flex; flex-flow: row wrap; align-items: flex-start; width: calc(100% + 32px); margin-left: -16px; margin-right: -16px;"> <div class="lr ls lt lu lv lw lx ly lz ma mb mc md me mf mg mh mi mj mk ml" style="box-sizing: inherit; flex-grow: 0; padding-left: 16px; padding-right: 16px; flex-basis: 33.3333%; max-width: 33.3333%;"> <div class="ak hw" style="box-sizing: inherit; width: 290.328px; height: 392.961px;"> <div class="r mm" style="box-sizing: inherit; display: block;"> <div class="mn mo lc ld le mp mq lf lg lh mr ms li lj lk mt mu ll lm ln mv mw lo lp lq n ha" style="box-sizing: inherit; display: flex; flex-flow: row wrap; width: calc(100% + 32px); margin-left: -16px; margin-right: -16px; align-items: flex-start;"> <div class="lr ls lt lu lv lw mx my lz ma mz na md me nb nc mh mi nd ne ml" style="box-sizing: inherit; flex-grow: 0; padding-left: 16px; padding-right: 16px; flex-basis: 100%; max-width: 100%;"> <div class="nf r ng f" style="box-sizing: inherit; display: block; margin-bottom: 12px;"> <h4 class="bj dz ea bl bo" style="box-sizing: inherit; margin: 0px; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; line-height: 20px; color: rgba(0, 0, 0, 0.54); font-weight: 300; font-size: 16px;"> Related reads</h4> </div> <div class="nh r ni kw" style="box-sizing: inherit; display: block; margin-bottom: 16px;"> <div class="nj gl" style="box-sizing: inherit; position: relative; padding-bottom: 192.961px;"> <div class="hw dh ak" style="box-sizing: inherit; width: 290.328px; position: absolute; height: 192.961px;"> <div class="ty r nl nm hw ak nn no" style="box-sizing: inherit; display: block; width: 290.328px; height: 192.961px; background-origin: border-box; background-size: cover; background-position: 50% 50%; max-width: 100%; background-image: url("https://example.test/max/656/1*Nubb8PFT2fttcXpAOm2d7w.png");"> </div> </div> </div> </div> </div> <div class="lr ls lt lu lv lw mx my lz ma mz na md me nb nc mh mi nd ne ml" style="box-sizing: inherit; flex-grow: 0; padding-left: 16px; padding-right: 16px; flex-basis: 100%; max-width: 100%;"> <div class="nh r" style="box-sizing: inherit; display: block; margin-bottom: 16px;"> <h3 class="de q nr ns bk nt nu nv" style="box-sizing: inherit; margin: 0px; fill: rgba(0, 0, 0, 0.84); font-style: normal; color: rgba(0, 0, 0, 0.84); font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-weight: 500; font-size: 24px; line-height: 32px; letter-spacing: 0em;"> <a href="https://example.test/@ibrahimbutt/if-youve-ever-configured-webpack-parcel-will-blow-your-mind-b615468cee78?source=post_recirc---------0------------------" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent;">If you’ve ever configured Webpack, Parcel will blow your mind!</a></h3> </div> <div class="n o dp" style="box-sizing: inherit; display: flex; align-items: center; justify-content: space-between;"> <div class="nw r nx" style="box-sizing: inherit; display: block; margin-right: 10px; flex: 0 1 auto;"> <div class="o n" style="box-sizing: inherit; display: flex; align-items: center;"> <div style="box-sizing: inherit;"><a href="https://example.test/@ibrahimbutt?source=post_recirc---------0------------------" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent;"><img alt="Ibrahim Butt" class="r dt nz ny" height="40" src="https://example.test/fit/c/80/80/1*L_oQhOVpJJ5ciPsqUhjMpQ.jpeg" style="box-sizing: inherit; vertical-align: middle; display: block; border-radius: 50%; width: 40px; height: 40px;" width="40" /></a></div> <div class="dw ak r" style="box-sizing: inherit; display: block; width: 122.945px; margin-left: 12px;"> <div class="n" style="box-sizing: inherit; display: flex;"> <div style="box-sizing: inherit; flex: 1 1 0%;"> <div class="ch n o dy" style="box-sizing: inherit; display: flex; align-items: center; margin-bottom: 0px;"> <span class="bj b bk bl bm bn r de q" style="box-sizing: inherit; font-weight: 400; fill: rgba(0, 0, 0, 0.84); display: block; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-style: normal; line-height: 20px; font-size: 15.8px; letter-spacing: 0px; color: rgba(0, 0, 0, 0.84);"><span class="bj dz ea bl cz da db cy dc dd de" style="box-sizing: inherit; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; line-height: 20px; display: -webkit-box; overflow: hidden; max-height: 20px; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; color: rgba(0, 0, 0, 0.84); font-weight: 300; font-size: 16px;"><a class="at au av aw ax ay az ba bb bc eb bf bg bh bi" href="https://example.test/@ibrahimbutt?source=post_recirc---------0------------------" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; fill: inherit; font-size: inherit; border: inherit; font-family: inherit; letter-spacing: inherit; font-weight: inherit; padding: 0px; margin: 0px;">Ibrahim Butt</a></span></span></div> </div> </div> <div style="box-sizing: inherit;"><span class="bj b bk bl bm bn r bo bp" style="box-sizing: inherit; font-weight: 400; display: block; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-style: normal; line-height: 20px; font-size: 15.8px; letter-spacing: 0px; color: rgba(0, 0, 0, 0.54); fill: rgba(0, 0, 0, 0.54);"><span class="bj dz ea bl cz da db cy dc dd bo" style="box-sizing: inherit; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; line-height: 20px; color: rgba(0, 0, 0, 0.54); display: -webkit-box; overflow: hidden; max-height: 20px; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-weight: 300; font-size: 16px;"><a class="at au av aw ax ay az ba bb bc eb bf bg bh bi" href="https://example.test/@ibrahimbutt/if-youve-ever-configured-webpack-parcel-will-blow-your-mind-b615468cee78?source=post_recirc---------0------------------" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; fill: inherit; font-size: inherit; border: inherit; font-family: inherit; letter-spacing: inherit; font-weight: inherit; padding: 0px; margin: 0px;">Mar 16, 2018</a><span> </span>·<span> </span>5min read<span style="box-sizing: inherit; padding-left: 4px;"><svg class="star-15px_svg__svgIcon-use" height="15" style="margin-top: -2px;" viewbox="0 0 15 15" width="15"> <path d="M7.44 2.32c.03-.1.09-.1.12 0l1.2 3.53a.29.29 0 0 0 .26.2h3.88c.11 0 .13.04.04.1L9.8 8.33a.27.27 0 0 0-.1.29l1.2 3.53c.03.1-.01.13-.1.07l-3.14-2.18a.3.3 0 0 0-.32 0L4.2 12.22c-.1.06-.14.03-.1-.07l1.2-3.53a.27.27 0 0 0-.1-.3L2.06 6.16c-.1-.06-.07-.12.03-.12h3.89a.29.29 0 0 0 .26-.19l1.2-3.52z"> </path> </svg></span></span></span></div> </div> </div> </div> <div class="n o" style="box-sizing: inherit; display: flex; align-items: center;"> <div class="n o" style="box-sizing: inherit; display: flex; align-items: center;"> <div class="gk r gl" style="box-sizing: inherit; display: block; margin-right: 5px; position: relative;"> <div class="ba gm gn go gp gq gr kt gt gu gv" style="box-sizing: inherit; padding: 0px; outline: 0px; border: 0px; user-select: none; cursor: pointer; fill: rgba(0, 0, 0, 0.76);"> <a class="at au av aw ax ay az ba bb bc bd be bf bg bh bi" href="https://example.test/foo?x=y&source=post_recirc-----b615468cee78----0-----------------clap_preview-" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; fill: inherit; font-size: inherit; border: inherit; font-family: inherit; letter-spacing: inherit; font-weight: inherit; padding: 0px; margin: 0px;"><svg height="25" viewbox="0 0 25 25" width="25"> <g fill-rule="evenodd"> <path d="M11.74 0l.76 2.97.76-2.97zM14.81 3.78l1.84-2.56-1.42-.47zM8.38 1.22l1.84 2.56L9.8.75zM20.38 21.62a5.11 5.11 0 0 1-3.16 1.61l.49-.45c2.88-2.89 3.45-5.98 1.69-9.21l-1.1-1.94-.96-2.02c-.31-.67-.23-1.18.25-1.55a.84.84 0 0 1 .66-.16c.34.05.66.28.88.6l2.85 5.02c1.18 1.97 1.38 5.12-1.6 8.1M7.1 21.1l-5.02-5.02a1 1 0 0 1 .7-1.7 1 1 0 0 1 .72.3l2.6 2.6a.44.44 0 0 0 .63-.62L4.1 14.04l-1.75-1.75a1 1 0 1 1 1.41-1.41l4.15 4.15a.44.44 0 0 0 .63 0 .44.44 0 0 0 0-.62L4.4 10.26 3.22 9.08a1 1 0 0 1 0-1.4 1.02 1.02 0 0 1 1.41 0l1.18 1.16L9.96 13a.44.44 0 0 0 .62 0 .44.44 0 0 0 0-.63L6.43 8.22a.99.99 0 0 1-.3-.7.99.99 0 0 1 .3-.7 1 1 0 0 1 1.41 0l7 6.98a.44.44 0 0 0 .7-.5l-1.35-2.85c-.31-.68-.23-1.19.25-1.56a.85.85 0 0 1 .66-.16c.34.06.66.28.88.6L18.63 14c1.57 2.88 1.07 5.54-1.55 8.16a5.62 5.62 0 0 1-5.06 1.65 9.35 9.35 0 0 1-4.93-2.72zM11 5.98l2.56 2.56c-.5.6-.56 1.41-.15 2.28l.26.56-4.25-4.25a.98.98 0 0 1-.12-.45 1 1 0 0 1 .29-.7 1.02 1.02 0 0 1 1.41 0zm8.89 2.06c-.38-.56-.9-.92-1.49-1.01a1.74 1.74 0 0 0-1.34.33c-.38.29-.61.65-.71 1.06a2.1 2.1 0 0 0-1.1-.56 1.78 1.78 0 0 0-.99.13l-2.64-2.64a1.88 1.88 0 0 0-2.65 0 1.86 1.86 0 0 0-.48.85 1.89 1.89 0 0 0-2.67-.01 1.87 1.87 0 0 0-.5.9c-.76-.75-2-.75-2.7-.04a1.88 1.88 0 0 0 0 2.66c-.3.12-.61.29-.87.55a1.88 1.88 0 0 0 0 2.66l.62.62a1.88 1.88 0 0 0-.9 3.16l5.01 5.02c1.6 1.6 3.52 2.64 5.4 2.96a7.16 7.16 0 0 0 1.18.1c1.03 0 2-.25 2.9-.7A5.9 5.9 0 0 0 21 22.24c3.34-3.34 3.08-6.93 1.74-9.17l-2.87-5.04z"> </path> </g> </svg></a></div> </div> <div class="gw r" style="box-sizing: inherit; display: block; margin-top: 5px;"> <div class="gx" style="box-sizing: inherit;"> <h4 class="bj dz ea bl bo" style="box-sizing: inherit; margin: 0px; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; line-height: 20px; color: rgba(0, 0, 0, 0.54); font-weight: 300; font-size: 16px;"> 2.9K</h4> </div> </div> </div> <div class="oe dw nw of og r" style="box-sizing: inherit; display: block; margin-left: 12px; margin-right: 10px; border-right: 1px solid rgba(0, 0, 0, 0.1); height: 20px; width: 1px;"> </div> <div style="box-sizing: inherit;"> <div aria-describedby="22" aria-hidden="true" aria-labelledby="22" class="cf" role="tooltip" style="box-sizing: inherit; display: inline-block;"><a class="at au av aw ax ay az ba bb bc bd be bf bg bh bi" href="https://example.test/foo?x=y&source=post_recirc---------0-----------------bookmark_sidebar-" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; fill: inherit; font-size: inherit; border: inherit; font-family: inherit; letter-spacing: inherit; font-weight: inherit; padding: 0px; margin: 0px;"><svg height="25" viewbox="0 0 25 25" width="25"> <path d="M19 6a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v14.66h.01c.01.1.05.2.12.28a.5.5 0 0 0 .7.03l5.67-4.12 5.66 4.13a.5.5 0 0 0 .71-.03.5.5 0 0 0 .12-.29H19V6zm-6.84 9.97L7 19.64V6a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v13.64l-5.16-3.67a.49.49 0 0 0-.68 0z" fill-rule="evenodd"></path> </svg></a></div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="lr ls lt lu lv lw lx ly lz ma mb mc md me mf mg mh mi mj mk ml" style="box-sizing: inherit; flex-grow: 0; padding-left: 16px; padding-right: 16px; flex-basis: 33.3333%; max-width: 33.3333%;"> <div class="ak hw" style="box-sizing: inherit; width: 290.328px; height: 424.961px;"> <div class="r mm" style="box-sizing: inherit; display: block;"> <div class="mn mo lc ld le mp mq lf lg lh mr ms li lj lk mt mu ll lm ln mv mw lo lp lq n ha" style="box-sizing: inherit; display: flex; flex-flow: row wrap; width: calc(100% + 32px); margin-left: -16px; margin-right: -16px; align-items: flex-start;"> <div class="lr ls lt lu lv lw mx my lz ma mz na md me nb nc mh mi nd ne ml" style="box-sizing: inherit; flex-grow: 0; padding-left: 16px; padding-right: 16px; flex-basis: 100%; max-width: 100%;"> <div class="nf r ng f" style="box-sizing: inherit; display: block; margin-bottom: 12px;"> <h4 class="bj dz ea bl bo" style="box-sizing: inherit; margin: 0px; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; line-height: 20px; color: rgba(0, 0, 0, 0.54); font-weight: 300; font-size: 16px;"> Related reads</h4> </div> <div class="nh r ni kw" style="box-sizing: inherit; display: block; margin-bottom: 16px;"> <div class="nj gl" style="box-sizing: inherit; position: relative; padding-bottom: 192.961px;"> <div class="hw dh ak" style="box-sizing: inherit; width: 290.328px; position: absolute; height: 192.961px;"> <div class="tz r nl nm hw ak nn no" style="box-sizing: inherit; display: block; width: 290.328px; height: 192.961px; background-origin: border-box; background-size: cover; background-position: 50% 50%; max-width: 100%; background-image: url("https://example.test/max/656/1*L0WSeQSNj3Q6kzNv5rN4bg.png");"> </div> </div> </div> </div> </div> <div class="lr ls lt lu lv lw mx my lz ma mz na md me nb nc mh mi nd ne ml" style="box-sizing: inherit; flex-grow: 0; padding-left: 16px; padding-right: 16px; flex-basis: 100%; max-width: 100%;"> <div class="nh r" style="box-sizing: inherit; display: block; margin-bottom: 16px;"> <h3 class="de q nr ns bk nt nu nv" style="box-sizing: inherit; margin: 0px; fill: rgba(0, 0, 0, 0.84); font-style: normal; color: rgba(0, 0, 0, 0.84); font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-weight: 500; font-size: 24px; line-height: 32px; letter-spacing: 0em;"> <a href="https://example.test/@webmaxru/workbox-4-implementing-refresh-to-update-version-flow-using-the-workbox-window-module-41284967e79c?source=post_recirc---------1------------------" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent;">Workbox 4: Implementing refresh-to-update-version flow using the workbox-window module</a></h3> </div> <div class="n o dp" style="box-sizing: inherit; display: flex; align-items: center; justify-content: space-between;"> <div class="nw r nx" style="box-sizing: inherit; display: block; margin-right: 10px; flex: 0 1 auto;"> <div class="o n" style="box-sizing: inherit; display: flex; align-items: center;"> <div style="box-sizing: inherit;"><a href="https://example.test/@webmaxru?source=post_recirc---------1------------------" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent;"><img alt="Maxim Salnikov" class="r dt nz ny" height="40" src="https://example.test/fit/c/80/80/2*KZp0bFcD5m_mc-PIsjcXiA.jpeg" style="box-sizing: inherit; vertical-align: middle; display: block; border-radius: 50%; width: 40px; height: 40px;" width="40" /></a></div> <div class="dw ak r" style="box-sizing: inherit; display: block; width: 129.297px; margin-left: 12px;"> <div class="n" style="box-sizing: inherit; display: flex;"> <div style="box-sizing: inherit; flex: 1 1 0%;"> <div class="ch n o dy" style="box-sizing: inherit; display: flex; align-items: center; margin-bottom: 0px;"> <span class="bj b bk bl bm bn r de q" style="box-sizing: inherit; font-weight: 400; fill: rgba(0, 0, 0, 0.84); display: block; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-style: normal; line-height: 20px; font-size: 15.8px; letter-spacing: 0px; color: rgba(0, 0, 0, 0.84);"><span class="bj dz ea bl cz da db cy dc dd de" style="box-sizing: inherit; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; line-height: 20px; display: -webkit-box; overflow: hidden; max-height: 20px; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; color: rgba(0, 0, 0, 0.84); font-weight: 300; font-size: 16px;"><a class="at au av aw ax ay az ba bb bc eb bf bg bh bi" href="https://example.test/@webmaxru?source=post_recirc---------1------------------" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; fill: inherit; font-size: inherit; border: inherit; font-family: inherit; letter-spacing: inherit; font-weight: inherit; padding: 0px; margin: 0px;">Maxim Salnikov</a></span></span></div> </div> </div> <div style="box-sizing: inherit;"><span class="bj b bk bl bm bn r bo bp" style="box-sizing: inherit; font-weight: 400; display: block; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-style: normal; line-height: 20px; font-size: 15.8px; letter-spacing: 0px; color: rgba(0, 0, 0, 0.54); fill: rgba(0, 0, 0, 0.54);"><span class="bj dz ea bl cz da db cy dc dd bo" style="box-sizing: inherit; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; line-height: 20px; color: rgba(0, 0, 0, 0.54); display: -webkit-box; overflow: hidden; max-height: 20px; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-weight: 300; font-size: 16px;"><a class="at au av aw ax ay az ba bb bc eb bf bg bh bi" href="https://example.test/@webmaxru/workbox-4-implementing-refresh-to-update-version-flow-using-the-workbox-window-module-41284967e79c?source=post_recirc---------1------------------" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; fill: inherit; font-size: inherit; border: inherit; font-family: inherit; letter-spacing: inherit; font-weight: inherit; padding: 0px; margin: 0px;">Feb 28, 2019</a><span> </span>·<span> </span>8<span> </span>min read</span></span></div> </div> </div> </div> <div class="n o" style="box-sizing: inherit; display: flex; align-items: center;"> <div class="n o" style="box-sizing: inherit; display: flex; align-items: center;"> <div class="gk r gl" style="box-sizing: inherit; display: block; margin-right: 5px; position: relative;"> <div class="ba gm gn go gp gq gr kt gt gu gv" style="box-sizing: inherit; padding: 0px; outline: 0px; border: 0px; user-select: none; cursor: pointer; fill: rgba(0, 0, 0, 0.76);"> <a class="at au av aw ax ay az ba bb bc bd be bf bg bh bi" href="https://example.test/foo?x=y&source=post_recirc-----41284967e79c----1-----------------clap_preview-" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; fill: inherit; font-size: inherit; border: inherit; font-family: inherit; letter-spacing: inherit; font-weight: inherit; padding: 0px; margin: 0px;"><svg height="25" viewbox="0 0 25 25" width="25"> <g fill-rule="evenodd"> <path d="M11.74 0l.76 2.97.76-2.97zM14.81 3.78l1.84-2.56-1.42-.47zM8.38 1.22l1.84 2.56L9.8.75zM20.38 21.62a5.11 5.11 0 0 1-3.16 1.61l.49-.45c2.88-2.89 3.45-5.98 1.69-9.21l-1.1-1.94-.96-2.02c-.31-.67-.23-1.18.25-1.55a.84.84 0 0 1 .66-.16c.34.05.66.28.88.6l2.85 5.02c1.18 1.97 1.38 5.12-1.6 8.1M7.1 21.1l-5.02-5.02a1 1 0 0 1 .7-1.7 1 1 0 0 1 .72.3l2.6 2.6a.44.44 0 0 0 .63-.62L4.1 14.04l-1.75-1.75a1 1 0 1 1 1.41-1.41l4.15 4.15a.44.44 0 0 0 .63 0 .44.44 0 0 0 0-.62L4.4 10.26 3.22 9.08a1 1 0 0 1 0-1.4 1.02 1.02 0 0 1 1.41 0l1.18 1.16L9.96 13a.44.44 0 0 0 .62 0 .44.44 0 0 0 0-.63L6.43 8.22a.99.99 0 0 1-.3-.7.99.99 0 0 1 .3-.7 1 1 0 0 1 1.41 0l7 6.98a.44.44 0 0 0 .7-.5l-1.35-2.85c-.31-.68-.23-1.19.25-1.56a.85.85 0 0 1 .66-.16c.34.06.66.28.88.6L18.63 14c1.57 2.88 1.07 5.54-1.55 8.16a5.62 5.62 0 0 1-5.06 1.65 9.35 9.35 0 0 1-4.93-2.72zM11 5.98l2.56 2.56c-.5.6-.56 1.41-.15 2.28l.26.56-4.25-4.25a.98.98 0 0 1-.12-.45 1 1 0 0 1 .29-.7 1.02 1.02 0 0 1 1.41 0zm8.89 2.06c-.38-.56-.9-.92-1.49-1.01a1.74 1.74 0 0 0-1.34.33c-.38.29-.61.65-.71 1.06a2.1 2.1 0 0 0-1.1-.56 1.78 1.78 0 0 0-.99.13l-2.64-2.64a1.88 1.88 0 0 0-2.65 0 1.86 1.86 0 0 0-.48.85 1.89 1.89 0 0 0-2.67-.01 1.87 1.87 0 0 0-.5.9c-.76-.75-2-.75-2.7-.04a1.88 1.88 0 0 0 0 2.66c-.3.12-.61.29-.87.55a1.88 1.88 0 0 0 0 2.66l.62.62a1.88 1.88 0 0 0-.9 3.16l5.01 5.02c1.6 1.6 3.52 2.64 5.4 2.96a7.16 7.16 0 0 0 1.18.1c1.03 0 2-.25 2.9-.7A5.9 5.9 0 0 0 21 22.24c3.34-3.34 3.08-6.93 1.74-9.17l-2.87-5.04z"> </path> </g> </svg></a></div> </div> <div class="gw r" style="box-sizing: inherit; display: block; margin-top: 5px;"> <div class="gx" style="box-sizing: inherit;"> <h4 class="bj dz ea bl bo" style="box-sizing: inherit; margin: 0px; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; line-height: 20px; color: rgba(0, 0, 0, 0.54); font-weight: 300; font-size: 16px;"> 637</h4> </div> </div> </div> <div class="oe dw nw of og r" style="box-sizing: inherit; display: block; margin-left: 12px; margin-right: 10px; border-right: 1px solid rgba(0, 0, 0, 0.1); height: 20px; width: 1px;"> </div> <div style="box-sizing: inherit;"> <div aria-describedby="23" aria-hidden="true" aria-labelledby="23" class="cf" role="tooltip" style="box-sizing: inherit; display: inline-block;"><a class="at au av aw ax ay az ba bb bc bd be bf bg bh bi" href="https://example.test/foo?x=y&source=post_recirc---------1-----------------bookmark_sidebar-" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; fill: inherit; font-size: inherit; border: inherit; font-family: inherit; letter-spacing: inherit; font-weight: inherit; padding: 0px; margin: 0px;"><svg height="25" viewbox="0 0 25 25" width="25"> <path d="M19 6a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v14.66h.01c.01.1.05.2.12.28a.5.5 0 0 0 .7.03l5.67-4.12 5.66 4.13a.5.5 0 0 0 .71-.03.5.5 0 0 0 .12-.29H19V6zm-6.84 9.97L7 19.64V6a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v13.64l-5.16-3.67a.49.49 0 0 0-.68 0z" fill-rule="evenodd"></path> </svg></a></div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="lr ls lt lu lv lw lx ly lz ma mb mc md me mf mg mh mi mj mk ml" style="box-sizing: inherit; flex-grow: 0; padding-left: 16px; padding-right: 16px; flex-basis: 33.3333%; max-width: 33.3333%;"> <div class="ak hw" style="box-sizing: inherit; width: 290.328px; height: 360.961px;"> <div class="r mm" style="box-sizing: inherit; display: block;"> <div class="mn mo lc ld le mp mq lf lg lh mr ms li lj lk mt mu ll lm ln mv mw lo lp lq n ha" style="box-sizing: inherit; display: flex; flex-flow: row wrap; width: calc(100% + 32px); margin-left: -16px; margin-right: -16px; align-items: flex-start;"> <div class="lr ls lt lu lv lw mx my lz ma mz na md me nb nc mh mi nd ne ml" style="box-sizing: inherit; flex-grow: 0; padding-left: 16px; padding-right: 16px; flex-basis: 100%; max-width: 100%;"> <div class="nf r ng f" style="box-sizing: inherit; display: block; margin-bottom: 12px;"> <h4 class="bj dz ea bl bo" style="box-sizing: inherit; margin: 0px; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; line-height: 20px; color: rgba(0, 0, 0, 0.54); font-weight: 300; font-size: 16px;"> Related reads</h4> </div> <div class="nh r ni kw" style="box-sizing: inherit; display: block; margin-bottom: 16px;"> <div class="nj gl" style="box-sizing: inherit; position: relative; padding-bottom: 192.961px;"> <div class="hw dh ak" style="box-sizing: inherit; width: 290.328px; position: absolute; height: 192.961px;"> <div class="ua r nl nm hw ak nn no" style="box-sizing: inherit; display: block; width: 290.328px; height: 192.961px; background-origin: border-box; background-size: cover; background-position: 50% 50%; max-width: 100%; background-image: url("https://example.test/max/656/1*ecznyij282qt1QzClNgaWA.png");"> </div> </div> </div> </div> </div> <div class="lr ls lt lu lv lw mx my lz ma mz na md me nb nc mh mi nd ne ml" style="box-sizing: inherit; flex-grow: 0; padding-left: 16px; padding-right: 16px; flex-basis: 100%; max-width: 100%;"> <div class="nh r" style="box-sizing: inherit; display: block; margin-bottom: 16px;"> <h3 class="de q nr ns bk nt nu nv" style="box-sizing: inherit; margin: 0px; fill: rgba(0, 0, 0, 0.84); font-style: normal; color: rgba(0, 0, 0, 0.84); font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-weight: 500; font-size: 24px; line-height: 32px; letter-spacing: 0em;"> <a href="https://example.test/@ajmeyghani/javascript-bundlers-a-comparison-e63f01f2a364?source=post_recirc---------2------------------" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent;">JavaScript Bundlers, a Comparison</a></h3> </div> <div class="n o dp" style="box-sizing: inherit; display: flex; align-items: center; justify-content: space-between;"> <div class="nw r nx" style="box-sizing: inherit; display: block; margin-right: 10px; flex: 0 1 auto;"> <div class="o n" style="box-sizing: inherit; display: flex; align-items: center;"> <div style="box-sizing: inherit;"> <div class="gl ny nz" style="box-sizing: inherit; position: relative; width: 40px; height: 40px;"> <div class="bs n lb o p dh oa ob oc fz od dl" style="box-sizing: inherit; display: flex; align-items: center; justify-content: center; fill: rgb(3, 168, 124); position: absolute; pointer-events: none; left: 20px; flex-direction: row; width: calc(100% + 25px); height: calc(100% + 25px); top: 20px; transform: translateX(-50%) translateY(-50%);"> <a href="https://example.test/@ajmeyghani?source=post_recirc---------2------------------" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent;"><svg height="49" viewbox="0 0 49 49" width="49"> <path clip-rule="evenodd" d="M24.5 1.1c-9.39 0-17.53 5.55-21.51 13.66L2 14.28C6.15 5.82 14.66 0 24.5 0S42.85 5.82 47 14.28l-.99.48C42.03 6.65 33.9 1.1 24.5 1.1zM2.99 34.24C6.97 42.35 15.1 47.9 24.5 47.9c9.39 0 17.53-5.55 21.51-13.66l.99.48C42.85 43.18 34.34 49 24.5 49S6.15 43.18 2 34.72l.99-.48z" fill-rule="evenodd"> </path> </svg></a></div> <a href="https://example.test/@ajmeyghani?source=post_recirc---------2------------------" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent;"><img alt="AJ Meyghani" class="r dt nz ny" height="40" src="https://example.test/fit/c/80/80/1*Z_ZlnjqI3w89H8AnkchYCA.png" style="box-sizing: inherit; vertical-align: middle; display: block; border-radius: 50%; width: 40px; height: 40px;" width="40" /> </a> </div> </div> <div class="dw ak r" style="box-sizing: inherit; display: block; width: 124.664px; margin-left: 12px;"> <div class="n" style="box-sizing: inherit; display: flex;"> <div style="box-sizing: inherit; flex: 1 1 0%;"> <div class="ch n o dy" style="box-sizing: inherit; display: flex; align-items: center; margin-bottom: 0px;"> <span class="bj b bk bl bm bn r de q" style="box-sizing: inherit; font-weight: 400; fill: rgba(0, 0, 0, 0.84); display: block; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-style: normal; line-height: 20px; font-size: 15.8px; letter-spacing: 0px; color: rgba(0, 0, 0, 0.84);"><span class="bj dz ea bl cz da db cy dc dd de" style="box-sizing: inherit; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; line-height: 20px; display: -webkit-box; overflow: hidden; max-height: 20px; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; color: rgba(0, 0, 0, 0.84); font-weight: 300; font-size: 16px;"><a class="at au av aw ax ay az ba bb bc eb bf bg bh bi" href="https://example.test/@ajmeyghani?source=post_recirc---------2------------------" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; fill: inherit; font-size: inherit; border: inherit; font-family: inherit; letter-spacing: inherit; font-weight: inherit; padding: 0px; margin: 0px;">AJ Meyghani</a></span></span></div> </div> </div> <div style="box-sizing: inherit;"><span class="bj b bk bl bm bn r bo bp" style="box-sizing: inherit; font-weight: 400; display: block; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-style: normal; line-height: 20px; font-size: 15.8px; letter-spacing: 0px; color: rgba(0, 0, 0, 0.54); fill: rgba(0, 0, 0, 0.54);"><span class="bj dz ea bl cz da db cy dc dd bo" style="box-sizing: inherit; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; line-height: 20px; color: rgba(0, 0, 0, 0.54); display: -webkit-box; overflow: hidden; max-height: 20px; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-weight: 300; font-size: 16px;"><a class="at au av aw ax ay az ba bb bc eb bf bg bh bi" href="https://example.test/@ajmeyghani/javascript-bundlers-a-comparison-e63f01f2a364?source=post_recirc---------2------------------" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; fill: inherit; font-size: inherit; border: inherit; font-family: inherit; letter-spacing: inherit; font-weight: inherit; padding: 0px; margin: 0px;">Oct 28, 2018</a><span> </span>·<span> </span>27min read<span style="box-sizing: inherit; padding-left: 4px;"><svg class="star-15px_svg__svgIcon-use" height="15" style="margin-top: -2px;" viewbox="0 0 15 15" width="15"> <path d="M7.44 2.32c.03-.1.09-.1.12 0l1.2 3.53a.29.29 0 0 0 .26.2h3.88c.11 0 .13.04.04.1L9.8 8.33a.27.27 0 0 0-.1.29l1.2 3.53c.03.1-.01.13-.1.07l-3.14-2.18a.3.3 0 0 0-.32 0L4.2 12.22c-.1.06-.14.03-.1-.07l1.2-3.53a.27.27 0 0 0-.1-.3L2.06 6.16c-.1-.06-.07-.12.03-.12h3.89a.29.29 0 0 0 .26-.19l1.2-3.52z"> </path> </svg></span></span></span></div> </div> </div> </div> <div class="n o" style="box-sizing: inherit; display: flex; align-items: center;"> <div class="n o" style="box-sizing: inherit; display: flex; align-items: center;"> <div class="gk r gl" style="box-sizing: inherit; display: block; margin-right: 5px; position: relative;"> <div class="ba gm gn go gp gq gr kt gt gu gv" style="box-sizing: inherit; padding: 0px; outline: 0px; border: 0px; user-select: none; cursor: pointer; fill: rgba(0, 0, 0, 0.76);"> <a class="at au av aw ax ay az ba bb bc bd be bf bg bh bi" href="https://example.test/foo?x=y&source=post_recirc-----e63f01f2a364----2-----------------clap_preview-" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; fill: inherit; font-size: inherit; border: inherit; font-family: inherit; letter-spacing: inherit; font-weight: inherit; padding: 0px; margin: 0px;"><svg height="25" viewbox="0 0 25 25" width="25"> <g fill-rule="evenodd"> <path d="M11.74 0l.76 2.97.76-2.97zM14.81 3.78l1.84-2.56-1.42-.47zM8.38 1.22l1.84 2.56L9.8.75zM20.38 21.62a5.11 5.11 0 0 1-3.16 1.61l.49-.45c2.88-2.89 3.45-5.98 1.69-9.21l-1.1-1.94-.96-2.02c-.31-.67-.23-1.18.25-1.55a.84.84 0 0 1 .66-.16c.34.05.66.28.88.6l2.85 5.02c1.18 1.97 1.38 5.12-1.6 8.1M7.1 21.1l-5.02-5.02a1 1 0 0 1 .7-1.7 1 1 0 0 1 .72.3l2.6 2.6a.44.44 0 0 0 .63-.62L4.1 14.04l-1.75-1.75a1 1 0 1 1 1.41-1.41l4.15 4.15a.44.44 0 0 0 .63 0 .44.44 0 0 0 0-.62L4.4 10.26 3.22 9.08a1 1 0 0 1 0-1.4 1.02 1.02 0 0 1 1.41 0l1.18 1.16L9.96 13a.44.44 0 0 0 .62 0 .44.44 0 0 0 0-.63L6.43 8.22a.99.99 0 0 1-.3-.7.99.99 0 0 1 .3-.7 1 1 0 0 1 1.41 0l7 6.98a.44.44 0 0 0 .7-.5l-1.35-2.85c-.31-.68-.23-1.19.25-1.56a.85.85 0 0 1 .66-.16c.34.06.66.28.88.6L18.63 14c1.57 2.88 1.07 5.54-1.55 8.16a5.62 5.62 0 0 1-5.06 1.65 9.35 9.35 0 0 1-4.93-2.72zM11 5.98l2.56 2.56c-.5.6-.56 1.41-.15 2.28l.26.56-4.25-4.25a.98.98 0 0 1-.12-.45 1 1 0 0 1 .29-.7 1.02 1.02 0 0 1 1.41 0zm8.89 2.06c-.38-.56-.9-.92-1.49-1.01a1.74 1.74 0 0 0-1.34.33c-.38.29-.61.65-.71 1.06a2.1 2.1 0 0 0-1.1-.56 1.78 1.78 0 0 0-.99.13l-2.64-2.64a1.88 1.88 0 0 0-2.65 0 1.86 1.86 0 0 0-.48.85 1.89 1.89 0 0 0-2.67-.01 1.87 1.87 0 0 0-.5.9c-.76-.75-2-.75-2.7-.04a1.88 1.88 0 0 0 0 2.66c-.3.12-.61.29-.87.55a1.88 1.88 0 0 0 0 2.66l.62.62a1.88 1.88 0 0 0-.9 3.16l5.01 5.02c1.6 1.6 3.52 2.64 5.4 2.96a7.16 7.16 0 0 0 1.18.1c1.03 0 2-.25 2.9-.7A5.9 5.9 0 0 0 21 22.24c3.34-3.34 3.08-6.93 1.74-9.17l-2.87-5.04z"> </path> </g> </svg></a></div> </div> <div class="gw r" style="box-sizing: inherit; display: block; margin-top: 5px;"> <div class="gx" style="box-sizing: inherit;"> <h4 class="bj dz ea bl bo" style="box-sizing: inherit; margin: 0px; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; line-height: 20px; color: rgba(0, 0, 0, 0.54); font-weight: 300; font-size: 16px;"> 1.5K</h4> </div> </div> </div> <div class="oe dw nw of og r" style="box-sizing: inherit; display: block; margin-left: 12px; margin-right: 10px; border-right: 1px solid rgba(0, 0, 0, 0.1); height: 20px; width: 1px;"> </div> <div style="box-sizing: inherit;"> <div aria-describedby="24" aria-hidden="true" aria-labelledby="24" class="cf" role="tooltip" style="box-sizing: inherit; display: inline-block;"><a class="at au av aw ax ay az ba bb bc bd be bf bg bh bi" href="https://example.test/foo?x=y&source=post_recirc---------2-----------------bookmark_sidebar-" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; fill: inherit; font-size: inherit; border: inherit; font-family: inherit; letter-spacing: inherit; font-weight: inherit; padding: 0px; margin: 0px;"><svg height="25" viewbox="0 0 25 25" width="25"> <path d="M19 6a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v14.66h.01c.01.1.05.2.12.28a.5.5 0 0 0 .7.03l5.67-4.12 5.66 4.13a.5.5 0 0 0 .71-.03.5.5 0 0 0 .12-.29H19V6zm-6.84 9.97L7 19.64V6a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v13.64l-5.16-3.67a.49.49 0 0 0-.68 0z" fill-rule="evenodd"></path> </svg></a></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="jf r jg jh" style="box-sizing: inherit; display: block; padding: 60px 0px; background-color: rgba(0, 0, 0, 0.9); color: rgba(0, 0, 0, 0.8); font-family: BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> <section class="cl cm ak ce r ji jj jk jl jm jn jo jp jq jr js jt ju jv jw" style="box-sizing: border-box; display: block; width: 1063px; margin-left: auto; margin-right: auto; padding-left: 64px; padding-right: 64px; max-width: 1320px;"> <div class="jx jy ib n dp g" style="box-sizing: inherit; display: flex; justify-content: space-between; margin-bottom: 32px; padding-bottom: 48px; border-bottom: 1px solid rgba(255, 255, 255, 0.54);"> <div class="jz n dp" style="box-sizing: inherit; display: flex; justify-content: space-between; margin: 0px -12px;"> <div class="ka r kb" style="box-sizing: inherit; display: block; margin: 0px 12px; flex: 1 1 0px;"> <div class="kc r" style="box-sizing: inherit; display: block; padding-bottom: 12px;"> <h4 class="kh ki kj bj io bk iv kk kl r" style="box-sizing: inherit; margin: 0px; display: block; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-style: normal; font-weight: 600; line-height: 24px; color: rgba(255, 255, 255, 0.98); fill: rgba(255, 255, 255, 0.98); text-align: inherit; font-size: 21.6px; letter-spacing: -0.32px;"> <a class="at au av aw ax ay az ba bb bc kd ke bf bg kf kg" href="https://example.test/about?autoplay=1&source=post_page-----12345----------------------" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; fill: inherit; font-size: inherit; border: inherit; font-family: inherit; letter-spacing: inherit; font-weight: inherit; padding: 0px; margin: 0px;">Discover<span> </span></a> </h4> </div> <span class="bj b bk bl bm bn r km kn" style="box-sizing: inherit; font-weight: 400; display: block; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-style: normal; line-height: 20px; font-size: 15.8px; letter-spacing: 0px; color: rgba(255, 255, 255, 0.7); fill: rgba(255, 255, 255, 0.7);">Welcome lorem ipsum. Lorem ipsum - with no ads in sight.<span> </span><a class="at au av aw ax ay az ba bb bc bf bg kf kg ko" href="https://example.test/about?autoplay=1&source=post_page-----12345----------------------" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: underline; -webkit-tap-highlight-color: transparent; fill: inherit; font-size: inherit; border: inherit; font-family: inherit; letter-spacing: inherit; font-weight: inherit; padding: 0px; margin: 0px;">Watch</a></span> </div> <div class="ka r kb" style="box-sizing: inherit; display: block; margin: 0px 12px; flex: 1 1 0px;"> <div class="kp r" style="box-sizing: inherit; display: block; padding-bottom: 8px;"> <h4 class="kh ki kj bj io bk iv kk kl r" style="box-sizing: inherit; margin: 0px; display: block; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-style: normal; font-weight: 600; line-height: 24px; color: rgba(255, 255, 255, 0.98); fill: rgba(255, 255, 255, 0.98); text-align: inherit; font-size: 21.6px; letter-spacing: -0.32px;"> </h4> </div> <span class="bj b bk bl bm bn r km kn" style="box-sizing: inherit; font-weight: 400; display: block; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-style: normal; line-height: 20px; font-size: 15.8px; letter-spacing: 0px; color: rgba(255, 255, 255, 0.7); fill: rgba(255, 255, 255, 0.7);">Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox.<span> </span><a class="at au av aw ax ay az ba bb bc bf bg kf kg ko" href="https://example.test/topics?source=post_page-----12345----------------------" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: underline; -webkit-tap-highlight-color: transparent; fill: inherit; font-size: inherit; border: inherit; font-family: inherit; letter-spacing: inherit; font-weight: inherit; padding: 0px; margin: 0px;">Explore</a></span> </div> <div class="ka r kb" style="box-sizing: inherit; display: block; margin: 0px 12px; flex: 1 1 0px;"> <div class="kc r" style="box-sizing: inherit; display: block; padding-bottom: 12px;"> <h4 class="kh ki kj bj io bk iv kk kl r" style="box-sizing: inherit; margin: 0px; display: block; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-style: normal; font-weight: 600; line-height: 24px; color: rgba(255, 255, 255, 0.98); fill: rgba(255, 255, 255, 0.98); text-align: inherit; font-size: 21.6px; letter-spacing: -0.32px;"> <a class="at au av aw ax ay az ba bb bc kd ke bf bg kf kg" href="https://example.test/membership?source=post_page-----12345----------------------" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; fill: inherit; font-size: inherit; border: inherit; font-family: inherit; letter-spacing: inherit; font-weight: inherit; padding: 0px; margin: 0px;">Become a member</a></h4> </div> </div> </div> </div> <div class="n o dp" style="box-sizing: inherit; display: flex; align-items: center; justify-content: space-between;"><a class="at au av aw ax ay az ba bb bc kd ke bf bg kf kg" href="https://example.test/?source=post_page-----12345----------------------" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; fill: inherit; font-size: inherit; border: inherit; font-family: inherit; letter-spacing: inherit; font-weight: inherit; padding: 0px; margin: 0px;"><svg class="ki" height="22" viewbox="0 0 111.5 22" width="112"> <path d="M56.3 19.5c0 .4 0 .5.3.7l1.5 1.4v.1h-6.5V19c-.7 1.8-2.4 3-4.3 3-3.3 0-5.8-2.6-5.8-7.5 0-4.5 2.6-7.6 6.3-7.6 1.6-.1 3.1.8 3.8 2.4V3.2c0-.3-.1-.6-.3-.7l-1.4-1.4V1l6.5-.8v19.3zm-4.8-.8V9.5c-.5-.6-1.2-.9-1.9-.9-1.6 0-3.1 1.4-3.1 5.7 0 4 1.3 5.4 3 5.4.8.1 1.6-.3 2-1zm9.1 3.1V9.4c0-.3-.1-.6-.3-.7l-1.4-1.5v-.1h6.5v12.5c0 .4 0 .5.3.7l1.4 1.4v.1h-6.5zm-.2-19.2C60.4 1.2 61.5 0 63 0c1.4 0 2.6 1.2 2.6 2.6S64.4 5.3 63 5.3a2.6 2.6 0 0 1-2.6-2.7zm22.5 16.9c0 .4 0 .5.3.7l1.5 1.4v.1h-6.5v-3.2c-.6 2-2.4 3.4-4.5 3.4-2.9 0-4.4-2.1-4.4-6.2 0-1.9 0-4.1.1-6.5 0-.3-.1-.5-.3-.7L67.7 7v.1H74v8c0 2.6.4 4.4 2 4.4.9-.1 1.7-.6 2.1-1.3V9.5c0-.3-.1-.6-.3-.7l-1.4-1.5v-.2h6.5v12.4zm22 2.3c0-.5.1-6.5.1-7.9 0-2.6-.4-4.5-2.2-4.5-.9 0-1.8.5-2.3 1.3.2.8.3 1.7.3 2.5 0 1.8-.1 4.2-.1 6.5 0 .3.1.5.3.7l1.5 1.4v.1H96c0-.4.1-6.5.1-7.9 0-2.7-.4-4.5-2.2-4.5-.9 0-1.7.5-2.2 1.3v9c0 .4 0 .5.3.7l1.4 1.4v.1h-6.5V9.5c0-.3-.1-.6-.3-.7l-1.4-1.5v-.2h6.5v3.1a4.6 4.6 0 0 1 4.6-3.4c2.2 0 3.6 1.2 4.2 3.5.7-2.1 2.7-3.6 4.9-3.5 2.9 0 4.5 2.2 4.5 6.2 0 1.9-.1 4.2-.1 6.5-.1.3.1.6.3.7l1.4 1.4v.1h-6.6zm-81.4-2l1.9 1.9v.1h-9.8v-.1l2-1.9c.2-.2.3-.4.3-.7V7.3c0-.5 0-1.2.1-1.8L11.4 22h-.1L4.5 6.8c-.1-.4-.2-.4-.3-.6v10c-.1.7 0 1.3.3 1.9l2.7 3.6v.1H0v-.1L2.7 18c.3-.6.4-1.3.3-1.9v-11c0-.5-.1-1.1-.5-1.5L.7 1.1V1h7l5.8 12.9L18.6 1h6.8v.1l-1.9 2.2c-.2.2-.3.5-.3.7v15.2c0 .2.1.5.3.6zm7.6-5.9c0 3.8 1.9 5.3 4.2 5.3 1.9.1 3.6-1 4.4-2.7h.1c-.8 3.7-3.1 5.5-6.5 5.5-3.7 0-7.2-2.2-7.2-7.4 0-5.5 3.5-7.6 7.3-7.6 3.1 0 6.4 1.5 6.4 6.2v.8h-8.7zm0-.8h4.3v-.8c0-3.9-.8-4.9-2-4.9-1.4.1-2.3 1.6-2.3 5.7z"> </path> </svg></a><span class="bj b bk bl bm bn r km kn" style="box-sizing: inherit; font-weight: 400; display: block; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-style: normal; line-height: 20px; font-size: 15.8px; letter-spacing: 0px; color: rgba(255, 255, 255, 0.7); fill: rgba(255, 255, 255, 0.7);"> </span> <div class="kq kr n dp ks an" style="box-sizing: inherit; display: flex; justify-content: space-between; padding-top: 8px; width: 200px;"> <span class="bj b bk bl bm bn r km kn" style="box-sizing: inherit; font-weight: 400; display: block; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-style: normal; line-height: 20px; font-size: 15.8px; letter-spacing: 0px; color: rgba(255, 255, 255, 0.7); fill: rgba(255, 255, 255, 0.7);"><a class="at au av aw ax ay az ba bb bc eb bf bg kf kg" href="https://example.test/about?autoplay=1&source=post_page-----12345----------------------" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; fill: inherit; font-size: inherit; border: inherit; font-family: inherit; letter-spacing: inherit; font-weight: inherit; padding: 0px; margin: 0px;">About</a><a class="at au av aw ax ay az ba bb bc eb bf bg kf kg" href="https://example.test/?source=post_page-----12345----------------------" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; fill: inherit; font-size: inherit; border: inherit; font-family: inherit; letter-spacing: inherit; font-weight: inherit; padding: 0px; margin: 0px;">Help</a><a class="at au av aw ax ay az ba bb bc eb bf bg kf kg" href="https://example.test/policy/9db0094a1e0f?source=post_page-----12345----------------------" rel="noopener" style="box-sizing: inherit; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; fill: inherit; font-size: inherit; border: inherit; font-family: inherit; letter-spacing: inherit; font-weight: inherit; padding: 0px; margin: 0px;">Legal</a> </span></div> <span class="bj b bk bl bm bn r km kn" style="box-sizing: inherit; font-weight: 400; display: block; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-style: normal; line-height: 20px; font-size: 15.8px; letter-spacing: 0px; color: rgba(255, 255, 255, 0.7); fill: rgba(255, 255, 255, 0.7);"> </span> </div> </section> </div> <p> </p> <div class="noprint" id="mw-head-base" style="margin-top: -5em; margin-left: 11em; height: 5em; color: rgb(0, 0, 0); font-family: sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> </div> <p> </p> <div class="mw-body" id="content" role="main" style="background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); padding: 1.25em 1.5em 1.5em; direction: ltr; margin-left: 11em; border-width: 1px 0px 1px 1px; border-style: solid; border-color: rgb(167, 215, 249); border-image: initial; margin-top: -1px; font-family: sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> <a id="top" style="text-decoration: none; color: rgb(6, 69, 173); background: none; cursor: pointer;"></a> <div class="mw-body-content" id="siteNotice" style="position: relative; font-size: 0.8em; line-height: 1.6; z-index: 0; text-align: center; margin: 0px;"> <div id="centralNotice"> </div> </div> <div class="mw-indicators mw-body-content" style="position: relative; font-size: 0.875em; line-height: 1.6; z-index: 1; float: right; padding-top: 0.4em;"> </div> <h1 class="firstHeading" id="firstHeading" lang="en" style="color: rgb(0, 0, 0); background: none; font-weight: normal; margin: 0px 0px 0.25em; overflow: visible; padding: 0px; border-bottom: 1px solid rgb(162, 169, 177); font-size: 1.8em; font-family: "Linux Libertine", Georgia, Times, serif; line-height: 1.3;"> CKEditor</h1> <div class="mw-body-content" id="bodyContent" style="position: relative; font-size: 0.875em; line-height: 1.6; z-index: 0;"> <div class="noprint" id="siteSub" style="display: block; font-size: 12.88px;">From Wikipedia, the free encyclopedia</div> <div id="contentSub" style="font-size: 11.76px; line-height: 1.2em; margin: 0px 0px 1.4em 1em; color: rgb(84, 89, 93); width: auto;"> </div> <div id="jump-to-nav"> </div> <a class="mw-jump-link" href="https://en.wikipedia.org/wiki/CKEditor#mw-head" style="text-decoration: none; color: rgb(11, 0, 128); background: none; display: block; clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; position: absolute !important;">Jump to navigation</a><a class="mw-jump-link" href="https://en.wikipedia.org/wiki/CKEditor#p-search" style="text-decoration: none; color: rgb(11, 0, 128); background: none; display: block; clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; position: absolute !important;">Jump to search</a> <div class="mw-content-ltr" dir="ltr" id="mw-content-text" lang="en" style="direction: ltr;"> <div class="mw-parser-output"> <table class="box-More_citations_needed plainlinks metadata ambox ambox-content ambox-Refimprove" role="presentation" style="font-size: 14px; margin: 0px 83.7969px; border-width: 1px 1px 1px 10px; border-style: solid; border-color: rgb(162, 169, 177) rgb(162, 169, 177) rgb(162, 169, 177) rgb(242, 133, 0); border-image: initial; background-color: rgb(251, 251, 251); box-sizing: border-box;"> <tbody> <tr> <td class="mbox-image" style="border: none; padding: 2px 0px 2px 0.5em; text-align: center;"> <div style="width: 52px;"><a class="image" href="https://en.wikipedia.org/wiki/File:Question_book-new.svg" style="text-decoration: none; color: rgb(11, 0, 128); background: none;"><img alt="" data-file-height="399" data-file-width="512" decoding="async" height="39" src="https://upload.wikimedia.org/wikipedia/en/thumb/9/99/Question_book-new.svg/50px-Question_book-new.svg.png" srcset="//upload.wikimedia.org/wikipedia/en/thumb/9/99/Question_book-new.svg/75px-Question_book-new.svg.png 1.5x, //upload.wikimedia.org/wikipedia/en/thumb/9/99/Question_book-new.svg/100px-Question_book-new.svg.png 2x" style="border: 0px; vertical-align: middle;" width="50" /></a></div> </td> <td class="mbox-text" style="border: none; padding: 0.25em 0.5em; width: 580px;"> <div class="mbox-text-span">This article<span> </span><b>needs additional citations for<span> </span><a href="https://en.wikipedia.org/wiki/Wikipedia:Verifiability" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="Wikipedia:Verifiability">verification</a></b>.<span class="hide-when-compact"><span> </span>Please help<span> </span><a class="external text" href="https://en.wikipedia.org/w/index.php?title=CKEditor&action=edit" style="text-decoration: none; color: rgb(102, 51, 102); background: none !important; padding: 0px !important;">improve this article</a><span> </span>by<span> </span><a href="https://en.wikipedia.org/wiki/Help:Introduction_to_referencing_with_Wiki_Markup/1" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="Help:Introduction to referencing with Wiki Markup/1">adding citations to reliable sources</a>. Unsourced material may be challenged and removed.<br /> <small style="font-size: 11.9px;"><span class="plainlinks"><i>Find sources:</i> <a class="external text" href="https://www.google.com/search?as_eq=wikipedia&q=%22CKEditor%22" rel="nofollow" style="text-decoration: none; color: rgb(102, 51, 102); background: none !important; padding: 0px !important;">"CKEditor"</a> – <a class="external text" href="https://www.google.com/search?tbm=nws&q=%22CKEditor%22+-wikipedia" rel="nofollow" style="text-decoration: none; color: rgb(102, 51, 102); background: none !important; padding: 0px !important;">news</a> <b>·</b><span> </span><a class="external text" href="https://www.google.com/search?&q=%22CKEditor%22+site:news.google.com/newspapers&source=newspapers" rel="nofollow" style="text-decoration: none; color: rgb(102, 51, 102); background: none !important; padding: 0px !important;">newspapers</a> <b>·</b><span> </span><a class="external text" href="https://www.google.com/search?tbs=bks:1&q=%22CKEditor%22+-wikipedia" rel="nofollow" style="text-decoration: none; color: rgb(102, 51, 102); background: none !important; padding: 0px !important;">books</a> <b>·</b><span> </span><a class="external text" href="https://scholar.google.com/scholar?q=%22CKEditor%22" rel="nofollow" style="text-decoration: none; color: rgb(102, 51, 102); background: none !important; padding: 0px !important;">scholar</a> <b>·</b><span> </span><a class="external text" href="https://www.jstor.org/action/doBasicSearch?Query=%22CKEditor%22&acc=on&wc=on" rel="nofollow" style="text-decoration: none; color: rgb(102, 51, 102); background: none !important; padding: 0px !important;">JSTOR</a></span></small></span><span> </span><small class="date-container" style="font-size: 11.9px;"><i>(<span class="date">March 2018</span>)</i></small><small class="hide-when-compact" style="font-size: 11.9px;"><i><span> </span>(<a href="https://en.wikipedia.org/wiki/Help:Maintenance_template_removal" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="Help:Maintenance template removal">Learn how and when to remove this template message</a>)</i></small></div> </td> </tr> </tbody> </table> <table class="infobox vevent" style="font-size: 12.32px; border: 1px solid rgb(162, 169, 177); border-spacing: 3px; background-color: rgb(248, 249, 250); color: black; margin: 0.5em 0px 0.5em 1em; padding: 0.2em; float: right; clear: right; line-height: 1.5em; width: 22em;"> <caption class="summary" style="font-size: 15.4px; font-weight: bold; padding: 0.2em; text-align: center;">CKEditor </caption> <tbody> <tr> <td colspan="2" style="vertical-align: top; text-align: center;"><a class="image" href="https://en.wikipedia.org/wiki/File:CKEditor_4_and_CKEditor_5_logos.png" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="CKEditor 4 & CKEditor 5 logos"><img alt="CKEditor 4 & CKEditor 5 logos" data-file-height="190" data-file-width="526" decoding="async" height="64" src="https://upload.wikimedia.org/wikipedia/en/thumb/a/ab/CKEditor_4_and_CKEditor_5_logos.png/178px-CKEditor_4_and_CKEditor_5_logos.png" srcset="//upload.wikimedia.org/wikipedia/en/thumb/a/ab/CKEditor_4_and_CKEditor_5_logos.png/266px-CKEditor_4_and_CKEditor_5_logos.png 1.5x, //upload.wikimedia.org/wikipedia/en/thumb/a/ab/CKEditor_4_and_CKEditor_5_logos.png/355px-CKEditor_4_and_CKEditor_5_logos.png 2x" style="border: 0px; vertical-align: middle;" width="178" /></a> <div>CKEditor 4 & CKEditor 5 logos</div> </td> </tr> <tr> <td colspan="2" style="vertical-align: top; text-align: center;"><a class="image" href="https://en.wikipedia.org/wiki/File:CKEditor_4_Article_Editor_screenshot.png" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="CKEditor 4 article editor screenshot"><img alt="CKEditor 4 article editor screenshot" data-file-height="604" data-file-width="1017" decoding="async" height="178" src="https://upload.wikimedia.org/wikipedia/en/thumb/6/66/CKEditor_4_Article_Editor_screenshot.png/300px-CKEditor_4_Article_Editor_screenshot.png" srcset="//upload.wikimedia.org/wikipedia/en/thumb/6/66/CKEditor_4_Article_Editor_screenshot.png/450px-CKEditor_4_Article_Editor_screenshot.png 1.5x, //upload.wikimedia.org/wikipedia/en/thumb/6/66/CKEditor_4_Article_Editor_screenshot.png/600px-CKEditor_4_Article_Editor_screenshot.png 2x" style="border: 0px; vertical-align: middle;" width="300" /></a> <div>CKEditor 4 article editor screenshot</div> </td> </tr> <tr> <th scope="row" style="vertical-align: top; text-align: left; white-space: nowrap;"><a class="mw-redirect" href="https://en.wikipedia.org/wiki/Software_developer" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="Software developer">Original author(s)</a></th> <td style="vertical-align: top; text-align: left;">Frederico Caldeira Knabben</td> </tr> <tr> <th scope="row" style="vertical-align: top; text-align: left; white-space: nowrap;"><a class="mw-redirect" href="https://en.wikipedia.org/wiki/Software_developer" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="Software developer">Developer(s)</a></th> <td style="vertical-align: top; text-align: left;">CKSource</td> </tr> <tr> <th colspan="2" style="vertical-align: top; text-align: center;"><a href="https://en.wikipedia.org/wiki/Software_release_life_cycle" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="Software release life cycle">Stable release(s)</a></th> </tr> <tr> <td colspan="2" style="vertical-align: top; text-align: center;"> <div style="margin: 0px;"> <table style="font-size: 12.32px; padding: 0px; border: none; margin: -3px; width: auto; min-width: 100%; clear: none; float: none; background-color: transparent;"> <tbody> <tr> <th scope="row" style="vertical-align: top; text-align: left;">CKEditor 4</th> <td style="vertical-align: top; text-align: left;">4.13.0 / September 26, 2019<span class="noprint">; 3 months ago</span> </td> </tr> <tr> <th scope="row" style="vertical-align: top; text-align: left;">CKEditor 5</th> <td style="vertical-align: top; text-align: left;">15.0.0 / October 23, 2019<span class="noprint">; 2 months ago</span> </td> </tr> </tbody> </table> </div> </td> </tr> <tr> <th scope="row" style="vertical-align: top; text-align: left; white-space: nowrap;"><a href="https://en.wikipedia.org/wiki/Repository_(version_control)" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="Repository (version control)">Repository</a></th> <td style="vertical-align: top; text-align: left;"><a class="external text" href="https://github.com/ckeditor/ckeditor4" rel="nofollow" style="text-decoration: none; color: rgb(102, 51, 102); background: linear-gradient(transparent, transparent) right center no-repeat, url("/w/skins/Vector/images/external-link-ltr-icon.svg?b4b84"); padding-right: 13px;">CKEditor 4 GitHub repo<span> </span></a><a class="external text" href="https://github.com/ckeditor/ckeditor5" rel="nofollow" style="text-decoration: none; color: rgb(102, 51, 102); background: linear-gradient(transparent, transparent) right center no-repeat, url("/w/skins/Vector/images/external-link-ltr-icon.svg?b4b84"); padding-right: 13px;">CKEditor 5 GitHub repo</a></td> </tr> <tr> <th scope="row" style="vertical-align: top; text-align: left; white-space: nowrap;">Written in</th> <td style="vertical-align: top; text-align: left;"><a href="https://en.wikipedia.org/wiki/JavaScript" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="JavaScript">JavaScript</a></td> </tr> <tr> <th scope="row" style="vertical-align: top; text-align: left; white-space: nowrap;"><a href="https://en.wikipedia.org/wiki/Software_categories#Categorization_approaches" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="Software categories">Type</a></th> <td style="vertical-align: top; text-align: left;"><a href="https://en.wikipedia.org/wiki/HTML_editor" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="HTML editor">HTML editor</a>,<span> </span><a href="https://en.wikipedia.org/wiki/Online_rich-text_editor" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="Online rich-text editor">online rich-text editor</a></td> </tr> <tr> <th scope="row" style="vertical-align: top; text-align: left; white-space: nowrap;"><a href="https://en.wikipedia.org/wiki/Software_license" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="Software license">License</a></th> <td style="vertical-align: top; text-align: left;"><a href="https://en.wikipedia.org/wiki/GNU_General_Public_License" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="GNU General Public License">GPL</a>,<span> </span><a href="https://en.wikipedia.org/wiki/GNU_Lesser_General_Public_License" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="GNU Lesser General Public License">LGPL</a>,<span> </span><a href="https://en.wikipedia.org/wiki/Mozilla_Public_License" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="Mozilla Public License">MPL</a><span> </span>and<span> </span><a href="https://en.wikipedia.org/wiki/Commercial_software" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="Commercial software">commercial</a><sup class="reference" id="cite_ref-1" style="line-height: 1; unicode-bidi: isolate; white-space: nowrap; font-weight: normal; font-style: normal; font-size: 9.856px;"><a href="https://en.wikipedia.org/wiki/CKEditor#cite_note-1" style="text-decoration: none; color: rgb(11, 0, 128); background: none;">[1]</a></sup> </td> </tr> <tr> <th scope="row" style="vertical-align: top; text-align: left; white-space: nowrap;">Website </th> <td style="vertical-align: top; text-align: left;"><span class="url"><a class="external text" href="http://ckeditor.com/" rel="nofollow" style="text-decoration: none; color: rgb(102, 51, 102); background: linear-gradient(transparent, transparent) right center no-repeat, url("/w/skins/Vector/images/external-link-ltr-icon.svg?b4b84"); padding-right: 13px;">ckeditor<wbr style="display: inline-block;" />.com</a></span></td> </tr> </tbody> </table> <p style="margin: 0.5em 0px;"><b>CKEditor</b><span> </span>(<span style="font-family:Trebuchet MS,Helvetica,sans-serif;"><span style="font-size:22px; color:#27ae60; background-color:#dddddd;">formerly known as <b><span style="background-color:#dddddd;">FCKeditor</span></b><></span>) is a<span> </span><a href="https://en.wikipedia.org/wiki/WYSIWYG" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="WYSIWYG">WYSIWYG</a><span> </span><a href="https://en.wikipedia.org/wiki/Online_rich-text_editor" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="Online rich-text editor">rich text editor</a><span> </span>which enables writing content directly inside of web pages or online <em><span style="font-size:8px; color:#8e44ad;">applications.<sup class="reference" id="cite_ref-2" style="line-height: 1; unicode-bidi: isolate; white-space: nowrap; font-weight: normal; font-style: normal; font-size: 11.2px;"><a href="https://en.wikipedia.org/wiki/CKEditor#cite_note-2" style="text-decoration: none; color: rgb(11, 0, 128); background: none;"><span style="color:#8e44ad;">[2]</span></a></sup><sup class="reference" id="cite_ref-3" style="line-height: 1; unicode-bidi: isolate; white-space: nowrap; font-weight: normal; font-style: normal; font-size: 11.2px;"><a href="https://en.wikipedia.org/wiki/CKEditor#cite_note-3" style="text-decoration: none; color: rgb(11, 0, 128); background: none;"><span style="color:#8e44ad;">[3]</span></a></sup><sup class="reference" id="cite_ref-4" style="line-height: 1; unicode-bidi: isolate; white-space: nowrap; font-weight: normal; font-style: normal; font-size: 11.2px;"><a href="https://en.wikipedia.org/wiki/CKEditor#cite_note-4" style="text-decoration: none; color: rgb(11, 0, 128); background: none;"><span style="color:#8e44ad;">[4]</span></a></sup><sup class="reference" id="cite_ref-5" style="line-height: 1; unicode-bidi: isolate; white-space: nowrap; font-weight: normal; font-style: normal; font-size: 11.2px;"><a href="https://en.wikipedia.org/wiki/CKEditor#cite_note-5" style="text-decoration: none; color: rgb(11, 0, 128); background: none;"><span style="color:#8e44ad;">[5]</span></a></sup><span style="color:#8e44ad;"> Its core code is written in </span><a href="https://en.wikipedia.org/wiki/JavaScript" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="JavaScript"><span style="color:#8e44ad;">JavaScript</span></a><span style="color:#8e44ad;"> and it</span></span></em> is developed by CKSource. CKEditor is available under open source and commercial licenses.</p> <div class="toc" id="toc" style="border: 1px solid rgb(162, 169, 177); background-color: rgb(248, 249, 250); padding: 7px; font-size: 13.3px; display: table;"> <input class="toctogglecheckbox" id="toctogglecheckbox" role="button" style="direction: ltr; position: absolute; opacity: 0; z-index: -1; display: none;" type="checkbox" /> <div class="toctitle" dir="ltr" lang="en" style="direction: ltr; text-align: center;"> <h2 style="color: rgb(0, 0, 0); background: none; font-weight: bold; margin: 1em 0px 0.25em; overflow: hidden; padding: 0px; border: 0px; font-size: 13.3px; display: inline; font-family: sans-serif; line-height: 1.3;"> Contents</h2> </div> <ul style="margin: 0.3em 0px; padding: 0px; list-style-image: none; list-style-type: none; text-align: left;"> <li class="toclevel-1 tocsection-1" style="margin-bottom: 0.1em;"><a href="https://en.wikipedia.org/wiki/CKEditor#History" style="text-decoration: none; color: rgb(11, 0, 128); background: none;"><span class="tocnumber" style="display: table-cell; text-decoration: inherit; padding-left: 0px; padding-right: 0.5em; color: rgb(34, 34, 34);">1</span><span class="toctext" style="display: table-cell; text-decoration: inherit;">History</span></a> <ul style="margin: 0px 0px 0px 2em; padding: 0px; list-style-image: none; list-style-type: none; text-align: left;"> <li class="toclevel-2 tocsection-2" style="margin-bottom: 0.1em;"><a href="https://en.wikipedia.org/wiki/CKEditor#FCKeditor_and_CKEditor_3" style="text-decoration: none; color: rgb(11, 0, 128); background: none;"><span class="tocnumber" style="display: table-cell; text-decoration: inherit; padding-left: 0px; padding-right: 0.5em;"><span style="color:#27ae60;">1.1</span></span><span style="color:#27ae60;"><span class="toctext" style="display: table-cell; text-decoration: inherit;">FCKeditor and CKEditor 3</span></span></a></li> <li class="toclevel-2 tocsection-3" style="margin-bottom: 0.1em;"><a href="https://en.wikipedia.org/wiki/CKEditor#CKEditor_4" style="text-decoration: none; color: rgb(11, 0, 128); background: none;"><span style="color:#27ae60;"><span class="tocnumber" style="display: table-cell; text-decoration: inherit; padding-left: 0px; padding-right: 0.5em;">1.2</span><span class="toctext" style="display: table-cell; text-decoration: inherit;">CKEditor 4</span></span></a></li> <li class="toclevel-2 tocsection-4" style="margin-bottom: 0.1em;"><a href="https://en.wikipedia.org/wiki/CKEditor#CKEditor_5" style="text-decoration: none; color: rgb(11, 0, 128); background: none;"><span style="color:#27ae60;"><span class="tocnumber" style="display: table-cell; text-decoration: inherit; padding-left: 0px; padding-right: 0.5em;">1.3</span><span class="toctext" style="display: table-cell; text-decoration: inherit;">CKEditor 5</span></span></a></li> <li class="toclevel-2 tocsection-5" style="margin-bottom: 0.1em;"><a href="https://en.wikipedia.org/wiki/CKEditor#CKEditor_Ecosystem" style="text-decoration: none; color: rgb(11, 0, 128); background: none;"><span style="color:#27ae60;"><span class="tocnumber" style="display: table-cell; text-decoration: inherit; padding-left: 0px; padding-right: 0.5em;">1.4</span><span class="toctext" style="display: table-cell; text-decoration: inherit;">CKEditor Ecosystem</span></span></a></li> </ul> </li> <li class="toclevel-1 tocsection-6" style="margin-bottom: 0.1em;"><a href="https://en.wikipedia.org/wiki/CKEditor#Features" style="text-decoration: none; color: rgb(11, 0, 128); background: none;"><span class="tocnumber" style="display: table-cell; text-decoration: inherit; padding-left: 0px; padding-right: 0.5em; color: rgb(34, 34, 34);">2</span><span class="toctext" style="display: table-cell; text-decoration: inherit;">Features</span></a> <ul style="margin: 0px 0px 0px 2em; padding: 0px; list-style-image: none; list-style-type: none; text-align: left;"> <li class="toclevel-2 tocsection-7" style="margin-bottom: 0.1em;"><a href="https://en.wikipedia.org/wiki/CKEditor#Real-time_collaborative_editing" style="text-decoration: none; color: rgb(11, 0, 128); background: none;"><span class="tocnumber" style="display: table-cell; text-decoration: inherit; padding-left: 0px; padding-right: 0.5em; color: rgb(34, 34, 34);">2.1</span><span class="toctext" style="display: table-cell; text-decoration: inherit;">Real-time collaborative editing</span></a></li> </ul> </li> <li class="toclevel-1 tocsection-8" style="margin-bottom: 0.1em;"><a href="https://en.wikipedia.org/wiki/CKEditor#Browser_compatibility" style="text-decoration: none; color: rgb(11, 0, 128); background: none;"><span class="tocnumber" style="display: table-cell; text-decoration: inherit; padding-left: 0px; padding-right: 0.5em; color: rgb(34, 34, 34);">3</span><span class="toctext" style="display: table-cell; text-decoration: inherit;">Browser compatibility</span></a></li> <li class="toclevel-1 tocsection-9" style="margin-bottom: 0.1em;"><a href="https://en.wikipedia.org/wiki/CKEditor#References" style="text-decoration: none; color: rgb(11, 0, 128); background: none;"><span class="tocnumber" style="display: table-cell; text-decoration: inherit; padding-left: 0px; padding-right: 0.5em; color: rgb(34, 34, 34);">4</span><span class="toctext" style="display: table-cell; text-decoration: inherit;">References</span></a></li> <li class="toclevel-1 tocsection-10" style="margin-bottom: 0.1em;"><a href="https://en.wikipedia.org/wiki/CKEditor#External_links" style="text-decoration: none; color: rgb(11, 0, 128); background: none;"><span class="tocnumber" style="display: table-cell; text-decoration: inherit; padding-left: 0px; padding-right: 0.5em; color: rgb(34, 34, 34);">5</span><span class="toctext" style="display: table-cell; text-decoration: inherit;">External links</span></a></li> </ul> </div> <h2 style="color: rgb(0, 0, 0); background: none; font-weight: normal; margin: 1em 0px 0.25em; overflow: hidden; padding: 0px; border-bottom: 1px solid rgb(162, 169, 177); font-size: 1.5em; font-family: "Linux Libertine", Georgia, Times, serif; line-height: 1.3;"> <span class="mw-headline" id="History">History</span><span class="mw-editsection" style="user-select: none; font-size: small; font-weight: normal; margin-left: 1em; vertical-align: baseline; line-height: 1em; font-family: sans-serif; white-space: nowrap; unicode-bidi: isolate;"><span class="mw-editsection-bracket" style="margin-right: 0.25em; color: rgb(84, 89, 93);">[</span><a href="https://en.wikipedia.org/w/index.php?title=CKEditor&action=edit&section=1" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="Edit section: History">edit</a><span class="mw-editsection-bracket" style="margin-left: 0.25em; color: rgb(84, 89, 93);">]</span></span></h2> <h3 style="color: rgb(0, 0, 0); background: none; font-weight: bold; margin: 0.3em 0px 0px; overflow: hidden; padding-top: 0.5em; padding-bottom: 0px; border-bottom: 0px; font-size: 1.2em; line-height: 1.6;"> <span class="mw-headline" id="FCKeditor_and_CKEditor_3">FCKeditor and CKEditor 3</span><span class="mw-editsection" style="user-select: none; font-size: small; font-weight: normal; margin-left: 1em; vertical-align: baseline; line-height: 1em; font-family: sans-serif; white-space: nowrap; unicode-bidi: isolate;"><span class="mw-editsection-bracket" style="margin-right: 0.25em; color: rgb(84, 89, 93);">[</span><a href="https://en.wikipedia.org/w/index.php?title=CKEditor&action=edit&section=2" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="Edit section: FCKeditor and CKEditor 3">edit</a><span class="mw-editsection-bracket" style="margin-left: 0.25em; color: rgb(84, 89, 93);">]</span></span></h3> <p style="margin: 0.5em 0px;">The first version of CKEditor, under the name FCKeditor, was released in March 2003 by Frederico Caldeira Knabben, the creator of the editor and the project's<span> </span><a class="mw-redirect" href="https://en.wikipedia.org/wiki/Benevolent_Dictator_for_Life" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="Benevolent Dictator for Life">Benevolent Dictator for Life</a>. After reaching more than 3 million downloads, FCKeditor was completely reviewed and redesigned into CKEditor 3, with special attention given to performance, accessibility and a new UI.<sup class="noprint Inline-Template Template-Fact" style="line-height: 1; font-size: 11.2px; white-space: nowrap;">[<i><a href="https://en.wikipedia.org/wiki/Wikipedia:Citation_needed" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="Wikipedia:Citation needed"><span title="This claim needs references to reliable sources. (July 2018)">citation needed</span></a></i>]</sup></p> <h3 style="color: rgb(0, 0, 0); background: none; font-weight: bold; margin: 0.3em 0px 0px; overflow: hidden; padding-top: 0.5em; padding-bottom: 0px; border-bottom: 0px; font-size: 1.2em; line-height: 1.6;"> <span class="mw-headline" id="CKEditor_4">CKEditor 4</span><span class="mw-editsection" style="user-select: none; font-size: small; font-weight: normal; margin-left: 1em; vertical-align: baseline; line-height: 1em; font-family: sans-serif; white-space: nowrap; unicode-bidi: isolate;"><span class="mw-editsection-bracket" style="margin-right: 0.25em; color: rgb(84, 89, 93);">[</span><a href="https://en.wikipedia.org/w/index.php?title=CKEditor&action=edit&section=3" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="Edit section: CKEditor 4">edit</a><span class="mw-editsection-bracket" style="margin-left: 0.25em; color: rgb(84, 89, 93);">]</span></span></h3> <p style="margin: 0.5em 0px;">In December 2<span style="font-family:Courier New,Courier,monospace;"><span style="background-color:#2ecc71;">012, CKEditor 4 was released with an Inline Editing solution, reformatted source code, enhanced DOM and </span><a href="https://en.wikipedia.org/wiki/Cascading_Style_Sheets" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="Cascading Style Sheets"><span style="background-color:#2ecc71;">CSS</span></a><span style="background-color:#2ecc71;"> performance. The server-side implementations</span></span> were removed.</p> <h3 style="color: rgb(0, 0, 0); background: none; font-weight: bold; margin: 0.3em 0px 0px; overflow: hidden; padding-top: 0.5em; padding-bottom: 0px; border-bottom: 0px; font-size: 1.2em; line-height: 1.6;"> <span class="mw-headline" id="CKEditor_5">CKEditor 5</span><span class="mw-editsection" style="user-select: none; font-size: small; font-weight: normal; margin-left: 1em; vertical-align: baseline; line-height: 1em; font-family: sans-serif; white-space: nowrap; unicode-bidi: isolate;"><span class="mw-editsection-bracket" style="margin-right: 0.25em; color: rgb(84, 89, 93);">[</span><a href="https://en.wikipedia.org/w/index.php?title=CKEditor&action=edit&section=4" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="Edit section: CKEditor 5">edit</a><span class="mw-editsection-bracket" style="margin-left: 0.25em; color: rgb(84, 89, 93);">]</span></span></h3> <p style="margin: 0.5em 0px;">After five years, in 2018, CKEditor 5 first stable version was introduced. With its code rewritten from scratch, CKEditor 5 has a custo<em><u><s>m data model and architecture. The editor implements<span> </span><a href="https://en.wikipedia.org/wiki/Operational_transformation" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="Operational transformation">Operational Transformation</a><span> </span>for the tree-structured model as </s></u></em>well as many other mechanisms which were required to create a real-time collaborative UX.<sup class="reference" id="cite_ref-6" style="line-height: 1; unicode-bidi: isolate; white-space: nowrap; font-weight: normal; font-style: normal; font-size: 11.2px;"><a href="https://en.wikipedia.org/wiki/CKEditor#cite_note-6" style="text-decoration: none; color: rgb(11, 0, 128); background: none;">[6]</a></sup></p> <p style="margin: 0.5em 0px;">CKEditor 5 is a JavaScript framework offering a rich API<sup class="noprint Inline-Template" style="line-height: 1; font-size: 11.2px; margin-left: 0.1em; white-space: nowrap;">[<i><a href="https://en.wikipedia.org/wiki/Wikipedia:Please_clarify" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="Wikipedia:Please clarify"><span title="The text near this tag may need clarification or removal of jargon. (July 2018)">clarification needed</span></a></i>]</sup><span> </span>to develop any editing<span> </span><a href="https://en.wikipedia.org/wiki/Solution" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="Solution">solution</a>. CKEditor 5 also offers builds, which are ready-to-use editors; there are currently 5 builds available to download: Classic, Inline, Balloon, Balloon block and Document<sup class="reference" id="cite_ref-7" style="line-height: 1; unicode-bidi: isolate; white-space: nowrap; font-weight: normal; font-style: normal; font-size: 11.2px;"><a href="https://en.wikipedia.org/wiki/CKEditor#cite_note-7" style="text-decoration: none; color: rgb(11, 0, 128); background: none;">[7]</a></sup>.</p> <h3 style="color: rgb(0, 0, 0); background: none; font-weight: bold; margin: 0.3em 0px 0px; overflow: hidden; padding-top: 0.5em; padding-bottom: 0px; border-bottom: 0px; font-size: 1.2em; line-height: 1.6;"> <span class="mw-headline" id="CKEditor_Ecosystem">CKEditor Ecosystem</span><span class="mw-editsection" style="user-select: none; font-size: small; font-weight: normal; margin-left: 1em; vertical-align: baseline; line-height: 1em; font-family: sans-serif; white-space: nowrap; unicode-bidi: isolate;"><span class="mw-editsection-bracket" style="margin-right: 0.25em; color: rgb(84, 89, 93);">[</span><a href="https://en.wikipedia.org/w/index.php?title=CKEditor&action=edit&section=5" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="Edit section: CKEditor Ecosystem">edit</a><span class="mw-editsection-bracket" style="margin-left: 0.25em; color: rgb(84, 89, 93);">]</span></span></h3> <p style="margin: 0.5em 0px;">In October 2017, CKSource launched the CKEditor Ecosystem, which consists of different products, these include:</p> <ul style="margin: 0.3em 0px 0px 1.6em; padding: 0px; list-style-image: url("/w/skins/Vector/images/bullet-icon.svg?872f1");"> <li style="margin-bottom: 0.1em;"><b>CKEditor 5 Builds</b><span> </span>and<span> </span><b>CKEditor 5 Framework</b>.</li> <li style="margin-bottom: 0.1em;"><b>CKEditor Cloud Services</b>, which support collaboration and uploading images.</li> <li style="margin-bottom: 0.1em;"><b>Letters</b>, a software component which makes real-time collaborative editing possible inside any application.<sup class="noprint Inline-Template Template-Fact" style="line-height: 1; font-size: 11.2px; white-space: nowrap;">[<i><a href="https://en.wikipedia.org/wiki/Wikipedia:Citation_needed" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="Wikipedia:Citation needed"><span title="This claim needs references to reliable sources. (July 2018)">citation needed</span></a></i>]</sup></li> </ul> <h2 style="color: rgb(0, 0, 0); background: none; font-weight: normal; margin: 1em 0px 0.25em; overflow: hidden; padding: 0px; border-bottom: 1px solid rgb(162, 169, 177); font-size: 1.5em; font-family: "Linux Libertine", Georgia, Times, serif; line-height: 1.3;"> <span class="mw-headline" id="Features">Features</span><span class="mw-editsection" style="user-select: none; font-size: small; font-weight: normal; margin-left: 1em; vertical-align: baseline; line-height: 1em; font-family: sans-serif; white-space: nowrap; unicode-bidi: isolate;"><span class="mw-editsection-bracket" style="margin-right: 0.25em; color: rgb(84, 89, 93);">[</span><a href="https://en.wikipedia.org/w/index.php?title=CKEditor&action=edit&section=6" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="Edit section: Features">edit</a><span class="mw-editsection-bracket" style="margin-left: 0.25em; color: rgb(84, 89, 93);">]</span></span></h2> <p style="margin: 0.5em 0px;">CKEditor 4 has features found in<span> </span><a href="https://en.wikipedia.org/wiki/Desktop_computer" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="Desktop computer">desktop</a><span> </span>word processors such as styles formatting (bold, italic, underline, bulleted and numbered lists), tables, block quoting, web resource linking, safe undo function, image inserting, paste from<span> </span><a class="mw-redirect" href="https://en.wikipedia.org/wiki/MS_Word" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="MS Word">Word</a><span> </span>and other common HTML formatting tools. Also CKEditor 4 has built-in<span> </span><a href="https://en.wikipedia.org/wiki/Spell_checker" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="Spell checker">spell checker</a><span> </span>functionality provided as<span> </span><a href="https://en.wikipedia.org/wiki/Plug-in_(computing)" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="Plug-in (computing)">plug-ins</a><span> </span>by<span> </span><a href="https://en.wikipedia.org/wiki/WebSpellChecker_Software" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="WebSpellChecker Software">WebSpellChecker LLC</a>. By default, it is available for free with a banner ad.<a href="https://en.wikipedia.org/wiki/CKEditor#cite_note-6" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="CKEditor">[6]</a><span> </span>It checks the spelling of the text and marks all errors with a red wavy line and allows the user to choose one of the correct suggestions.</p> <p style="margin: 0.5em 0px;">There are currently many plugins available with CKEditor 4 to serve different needs, e.g.<span> </span><b>CKFinder</b><span> </span>and<span> </span><b>Accessibility Checker</b><span> </span>(the CKSource's plugins). CKFinder is a file manager for including files and images within content created with the editors. It is compatible with both CKEditor 4 and 5 and is available under commercial license.</p> <p style="margin: 0.5em 0px;">Accessibility Checker is available under both Open Source and commercial licenses.</p> <h3 style="color: rgb(0, 0, 0); background: none; font-weight: bold; margin: 0.3em 0px 0px; overflow: hidden; padding-top: 0.5em; padding-bottom: 0px; border-bottom: 0px; font-size: 1.2em; line-height: 1.6;"> <span class="mw-headline" id="Real-time_collaborative_editing">Real-time collaborative editing</span><span class="mw-editsection" style="user-select: none; font-size: small; font-weight: normal; margin-left: 1em; vertical-align: baseline; line-height: 1em; font-family: sans-serif; white-space: nowrap; unicode-bidi: isolate;"><span class="mw-editsection-bracket" style="margin-right: 0.25em; color: rgb(84, 89, 93);">[</span><a href="https://en.wikipedia.org/w/index.php?title=CKEditor&action=edit&section=7" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="Edit section: Real-time collaborative editing">edit</a><span class="mw-editsection-bracket" style="margin-left: 0.25em; color: rgb(84, 89, 93);">]</span></span></h3> <p style="margin: 0.5em 0px;">CKEditor 5's architecture and custom data model makes it possible to enable<span> </span><a class="mw-redirect" href="https://en.wikipedia.org/wiki/Real-time_collaborative_editing" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="Real-time collaborative editing">real-time collaborative editing</a>.</p> <p style="margin: 0.5em 0px;">A custom collaborative<span> </span><a href="https://en.wikipedia.org/wiki/Solution" style="text-decoration: none; color: rgb(11, 0, 128); background: none;" title="Solution">solution</a><span> </span>can be built by using the CKEditor 5 Framework components and real-time collaborative editing can be enabled by connecting to the CKEditor Cloud Services.</p> <p style="margin: 0.5em 0px;">A ready to use, drop-in component based on CKEditor 5 (Letters) offers a complete solution for real-time collaborative writing.<sup class="reference" id="cite_ref-8" style="line-height: 1; unicode-bidi: isolate; white-space: nowrap; font-weight: normal; font-style: normal; font-size: 11.2px;"><a href="https://en.wikipedia.org/wiki/CKEditor#cite_note-8" style="text-decoration: none; color: rgb(11, 0, 128); background: none;">[8]</a></sup></p> </div> </div> </div> </div>