Are you reporting a feature or a bug?

Bug

Check if the issue is already reported

Put all reference links here…

Provide detailed reproduction steps (if any)

1. Copy plain text to clipboard
2. Using CKEditor, try to paste using "Paste" option after mouse right click or using editor's "Paste" options

Expected result

Text is pasted normally.

Actual result

Message "Your browser doesn't allow you to paste this way. Press Ctrl+V to paste." is showed.

Other details

• Browser: Google Chrome 58, Mozilla Firefox 51, Microsoft Edge 38
• OS: MS Windows 10 64 bits
• CKEditor version: 4.7.0 (this issue was not showed in 4.6.2 version)
• Installed CKEditor plugins: Copy Formatting, Paste from Word, Paste from Excel

CKEditor's 4.7 plain text paste is broken in Android Firefox and Chrome. It is used not often, but sometimes it is very handy to paste & edit texts from tablet. But in 4.7 paste from clipboard doesn't work at all.

When trying to paste via toolbar icon or editor menu I get "Your browser doesn't allow you to paste this way. Press CTRL+V/CTRL+SHIFT+V to paste" message.

Maybe it is possible to leave old paste dialog as optional plugin? Cause in CKEditor 4.6.3 all types of paste worked fine in mobile and desktop browsers. Seems you fixed a thing that was not broken :)

• Browser: Chrome, Firefox
• OS: Android 7.1.2
• CKEditor version: 4.7

What is the purpose of this pull request?

New feature

Does your PR contain necessary tests?

All patches that change the editor code must include tests. You can always read more on PR testing, how to set the testing environment and how to create tests in the official CKEditor documentation.

This PR contains

• [X] Unit tests
• [X] Manual tests

Did you follow the CKEditor 4 code style guide?

Your code should follow the guidelines from the CKEditor 4 code style guide which helps keep the entire codebase consistent.

• [X] PR is consistent with the code style guide

What is the proposed changelog entry for this pull request?

* [#4461](https://github.com/ckeditor/ckeditor4/issues/4461): Delay editor creation if target element is detached.

What changes did you make?

Give an overview…

• If config.delayDetached is true and target element isDetached: immediately return null and start checking in 1000ms periods.
• If target element is attached -> create an editor instance and stop checking.
• Editor will be available e.g. inside onInstanceReady via this

CKEDITOR.replace( textArea, {
	delayDetached: true,
	on: {
		instanceReady: function(evt) {
			this.setData("Editor created");
		}
	}
} )

Which issues does your PR resolve?

Closes #4461 .

Type of report

Feature request

Preview:

Users interested in seeing how the feature looks today can preview it on our Emoji feature branch preview.

Provide description of the new feature

There should be an option to insert emoji from a button. Clicking the button would show full list of available emojis.

Because of the default emoji count, this feature requires some performance to make sure that the feature is responsive.

This feature could be implemented as a drop-down with some UI aiding usability.

Browser Support

Same as Emoji plugin itself.

Features

Here are some words on the initial design:

Must Have

Search

Search box should search based on the emoji ID or keyword (#2181).

If the search box is empty it just displays the initial view.

It is to be determined how the search results should be displayed - whether results should be grouped in categories or should it put it into one bunch.

Grouping

Emojis should be categorized. Categories should be shown as tabs, e.g. on the top of a dropdown.

The industry generally threads these tabs purely as navigation, meaning that clicking a given category does scroll to a given section, rather than filter the results.

Accessibility

There needs to be basic accessibility. We need to make sure that dropdown elements has correct labels and that the dropdown is operable using the keyboard alone.

Nice To Have

The following features are optional, and may be skipped.

Initial Render

All the emojis should be displayed during the first render.

It is important to provide a very good performance here.

Skin Tone

Possibility to set the skin tone of an emoji.

Improved Configuration

It would be nice to allow for groups customization. At the minimum being able to hide groups.

Would be better if there's an option for adding custom categories to the mix - however this one would affect the design, as it would be very easy to break the tabs layout.

Turning Popular Matches into Emoji

Feature would turn some old-school style emotion expressions into an emoji, for instance :), <3 or :D. From the technical side of things I believe we could use text watcher/match combo for that.

The solutions that other popular libraries and frameworks are adopting to comply with CSP are:

1. provide a hook consumers to bypass the indirect evaluation routine (doesn't apply to this case)

2. provide a less performant solution that can be used under certain conditions.

I have implemented the corresponding forking logic on CKEDITOR.template to detect whether or not indirect eval is available, and use an alternative output function that is less performant but works well with CSP.

It is very similar to what Angular does for their expression language, and it is a solution that can be ported back to any previous version of CKEditor that relies on the same CKEDITOR.template mechanism. This solution can be backported to 4.x (I wasn't sure about the branching strategy on this repo)

By forcing to use the new less-performant solution (setting the isIndirectEvalSupported flag manually) we have validated that all tests are passing, but someone will have to do a little bit of work here to make sure that every template test runs with and without the flag.

Backpointer: https://dev.ckeditor.com/ticket/8584 SF Backpointer: @W-2958085

What is the purpose of this pull request?

fix issue #1572

Does your PR contain necessary tests?

yes

This PR contains

• [x] Unit tests
• [x] Manual tests

Did you follow the CKEditor 4 code style guide?

• [x] PR is consistent with the code style guide

What is the proposed changelog entry for this pull request?

* [#1572 ](https://github.com/ckeditor/ckeditor4/issues/1572): Pressing backspace and delete in an empty paragraph between two widgets now deletes the paragraph instead of selecting the next (or previous) widget 

What changes did you make?

Give an overview…

Which issues does your PR resolve?

Closes #1572 .

What is the purpose of this pull request?

New feature

Does your PR contain necessary tests?

All patches which change the editor code must include tests. You can always read more on PR testing, how to set the testing environment and how to create tests in the official CKEditor documentation.

This PR contains

• [x] Unit tests
• [x] Manual tests

What is the proposed changelog entry for this pull request?

* [#1795](https://github.com/ckeditor/ckeditor4/issues/1795): Colors picked from [Color Dialog](https://ckeditor.com/cke4/addon/colordialog) are now stored in [Color Button](https://ckeditor.com/cke4/addon/colorbutton) palette and can be easily reused.
* [#3783](https://github.com/ckeditor/ckeditor4/issues/3783): Colors used in the document are now displayed as a part of the [Color Button](https://ckeditor.com/cke4/addon/colorbutton) palette.

What changes did you make?

• Features

Implementation is mainly based on conclusions listed here, but during development I made one significant change - in palette there are two separate sections for Content Colors (colors found in the editor content - checked on every colorbutton panel open) and Custom Colors (colors picked from color dialog). Without this division the palette was changing unintuitive when e.g. some parts of coloured text were deleted. Thanks to that it was also possible to implement both features independently, so theoretically this PR could be divided into two if it's easier to work with for reviewer.

• Unit tests

1. As we are in the middle of discussion about place of issue references in unit tests (using bender-tags or not), for now I just added references for the whole files as it was quicker way. If we determine that adding tags for each test is better, of course I'll change it.
2. Features are implemented for both Text Color and Background Color buttons and the only difference between them is that they should track colors independently, so only tests checking setup are doubled - the core features are tested only for Text Color. If this is insufficient, of course I'll change it.
3. Code for preserving color style is entirely in colorbutton plugin so I also put tests there, but in fact without colordialog it doesn't do a thing, so I wonder if it would be better to place them in the colordialog folder.

• Manual tests

1. I'm guess despite manual tests are split into 2 files they may still be to complex, if reviewer will share this point of view then of course I'll change it.
2. The same as point 3. for unit tests - maybe tests for custom colors should be in colordialog folder?

• PS

1. There will be probably two new phrases to translate - right now they are "Content Colors" and "Custom Color". Yet I didn't update lang files, as they can still change - let's create new entries just before merge.
2. In our test base I saw e.g. such code snippet:

<h2 style="color:FF0000">Hello</h2>

and in this format the color will not be displayed in palette (which makes sense with because default ACF settings don't allow this construction). As for now this feature only finds colors expressed in hex code attached to spans through style attribute, like here:

<p><span style="color:334455">Hello</span></p>

But I just realised that the below snippet is also fine for ACF:

<p><span style="color:red">instance</span></p>

so probably it should work too, and now it doesn't... So I'll fix that after the first review :)

Which issues your PR resolves?

Closes #1795. Closes #3783.

What is the purpose of this pull request?

Bug fix

Does your PR contain necessary tests?

All patches which change the editor code must include tests. You can always read more on PR testing, how to set the testing environment and how to create tests in the official CKEditor documentation.

This PR contains

• [X] Unit tests
• [X] Manual tests

What changes did you make?

This is early PR with proposal of solution.

Current solution

When soft keyboard appears on touch devices it causes 'resize' event on which we were recalculating center position of fixed dialog. After that browser tried to scroll into view of input but it took wrong position, probably before moving it. Such complex way of centering dialog is unnecessary, as dialog can't be dragged without mouse.

I have reworked how a dialog is styled:

• Dialogs wrapper now has position: fixed with width and height set to 100%.
• When the dialog is shown document.body gets a class with 'overflow:hidden', and style padding-right calculated from width of scrollbar.
• In IE the dialog is centered via absolute position calculated by script.
• In any other browser the dialog is centered by only CSS.
• When the dialog is is dragged it becomes absolute positioned.

After changes we won't adjust dialogs position once opened on the mobile devices, it will be positioned only by CSS and the way it's scrolled into view of focused inputs is only relying on browser implementation.

Unfortunately browsers implementation isn't perfect and sometimes it still scrolls it in wrong way, but that's rare. And it should be mentioned that this can happen even with fully static pages, with no js, and everything relative positioned.

Other solution

Adding once( 'scroll' ... inside focus listener and calling scrollIntoView on currently focused input. This is much simpler, but creates visible flickering, so I dropped this idea for now.

Todo

• Adding styles to other skins, and testing them.
• Improving way how missing scrollbars are covered with padding, or dropping idea to let page expand.
• Unit tests.
• Cleaning code.

Closes #2395. Closes #3359. Closes #453.

What is the purpose of this pull request?

New feature

Does your PR contain necessary tests?

All patches that change the editor code must include tests. You can always read more on PR testing, how to set the testing environment and how to create tests in the official CKEditor documentation.

This PR contains

• [x] Unit tests
• [X] Manual tests

Did you follow the CKEditor 4 code style guide?

Your code should follow the guidelines from the CKEditor 4 code style guide which helps keep the entire codebase consistent.

• [X] PR is consistent with the code style guide

What is the proposed changelog entry for this pull request?

* [#4462](https://github.com/ckeditor/ckeditor4/issues/4462): Support editor functions after reattaching to DOM.

What changes did you make?

Give an overview…

Which issues does your PR resolve?

Closes #4462 .

Type of report

Bug/Task/Feature?

Provide detailed reproduction steps (if any)

Demo was provided by one of users in Angular: https://github.com/ckeditor/ckeditor4-angular/issues/114#issuecomment-665137826.

Expected result

Errors are not thrown.

Actual result

TypeError: Cannot read property 'unselectable' of null error is thrown and CKEditor crashes.

Other details

There is an error that occurs in various frameworks where you try to integrate CKEditor. It was reported in Drupal, Laravel and Angular and now I encountered it while testing https://github.com/ckeditor/ckeditor4-angular/issues/143.

The issue is most probably caused by this line:

topHtml && editor.ui.space( 'top' ).unselectable();
bottomHtml && editor.ui.space( 'bottom' ).unselectable();

Although the issue wasn't reproduced in the CKEditor itself so far, I think it could be worth to at least take a look at it as it makes integrating it a bit more difficult than it should be. It's hard to classify the character of this issue, so it may need to be relabeled.

Are you reporting a feature request or a bug?

New feature

Check if the issue is already reported

https://dev.ckeditor.com/ticket/13877

Provide detailed reproduction steps (if any)

1. Open this Google doc
2. Highlight all content
3. Paste into a CKEditor instance

Expected result

The content is pasted with formatting resembling the original

Actual result

The content is entirely bold

Other details

• Browser: Safari 10.1.2 (12603.3.8)
• OS: macOS 10.12.6 (16G29)
• CKEditor version: 4.7.2
• Installed CKEditor plugins: Basic preset

An event listener for popstate or hashchange is added to window by maximize plugin for each instance. It is not removed from window when calling editor.destroy()

Hi, I'm having problems with the media embed plugin. The link to the instagram post on mobile phones does not work. Presumably the problem is in the id of the Instagram post, there is a dash (-) sign, which breaks the link for me. Tell me what should I do? (Good on desktop)

Post - https://www.instagram.com/p/Cjo2-DOIkAG/ Id with dash - Cjo2-DOIkAG

Type of report

Docs

Provide a description of requested docs changes

The method signatures of the htmlDataProcesser were updated in 4.3.0, but the documentation still shows the older "backwards compatible" method signatures

See: https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_htmlDataProcessor.html#method-toHtml

which has the now "options" field instead populated by an array.

Type of report

Failing tests

Provide detailed reproduction steps (if any)

1. Run all tests.

Expected result

Tests are passed.

Actual result

Tests are failing but when we run every single failing test in a separate browser tab, the tests will pass.

Other details

• Browser: Chrome
• OS: …
• CKEditor version: 4.20.1
• Installed CKEditor plugins:

Type of report

Bug

Provide detailed reproduction steps (if any)

1. Copy the image from the website and try to paste it on Safari@iOS

Expected result

Image pasted.

Actual result

Nothing happens.

Other details

• Browser: Safari@iOS
• OS: Mac OS
• CKEditor version: Tested on 4.20.1 and 4.18.0

Type of report

Bug

Provide detailed reproduction steps (if any)

1. Open this: http://localhost:1030/tests/plugins/table/manual/changescopeattribute manual test and follow instructions on Safari@iOS (for me mouse connected to the iOS device was needed to enter table properties)

Expected result

Everything was as test expected.

Actual result

The table structure is changed after setting the Headers option to First column:

https://user-images.githubusercontent.com/32898551/203548749-51927a29-16a3-48df-971a-b3d415ea2b7e.MP4

Other details

• Browser: Safari@iOS
• OS: iOS
• CKEditor version: 4.20.1