antoniolucasnobar / ckeditor5-find-replace

Plugin that finds and replace text in ckeditor5

CKEditor 5 Find and Replace feature

When I started this project, there was no such plugin for search and replace items. Now, I recommend you to use the official plugin: https://ckeditor.com/docs/ckeditor5/latest/features/find-and-replace.html

I would like to thank everyone that helped me in this project!

Documentation

This plugin implements Find and Replace Text in CKEditor 5.

Features:

• forward and backwards search (with visual and text indications of progress)
• replace one (also forward and backwards) or all occurrences
• accessible (keyboard operation)
• use out of the editor (by execute findReplace command)
• Match case: you decide if upper or lower case matters
• selected text gets copied over to the find field

We need translators! If you want to translate to your language, open a PR! Supported so far:

• pt-BR
• en-US
• zh-CN (Thanks @YueHui)

Installation

$ npm install ckeditor5-find-replace

To use it, configure your build like this

import FindReplace from 'ckeditor5-find-replace/src/findReplace';

// it can be any CKEditor editor. Decoupled is just an example
DecoupledEditor.builtinPlugins = [
//...
	FindReplace,
]
//...
	toolbar: {
		items: [
			'FindReplace'
        ]
    }

// you can use this feature programatically also:
editor.execute('findReplace', {
    // text to find
    findText: '',
    // find prev or next , -1:prev,0:stay,1:next
    increment: 1 ,
    // text to replace
    replaceText: '',
    // is replaceAll
    replaceAll: false,
    // lower or upper case letters matters? 
    matchCase: false
})

Images of plugin:

License

MIT

ckeditor5-find-replace's Issues

Eslint support

Also add support for pull requests to check configs

Create Unit Tests

It is necessary to build unit tests to ensure stability in the following versions.

Maybe we need to split the plugin in UI, Editing and Command (last one done in #1) as recomended in CKEditor docs

We also need to configure Karma to run tests

Possible test cases:

• Replace should work even when no find was done previously (there was an error that only fired the search first time we try to replace);
• ReplaceAll should clean findField.infoText and update replaceField.infoText (what about there is no occurrences found to replace. Maybe this case should update findField and not update replaceField
• Everytime we perform an operation other than ReplaceAll, we should clean replaceField.infoText
• ReplaceAll should clear the searchMarkers (as it replaces the text of all occurrences)

If you are reading and have new test cases, please add as comments below.

en.......

😂
https://ckeditor.com/docs/ckeditor5/latest/features/find-and-replace.html

Support Case Sensitive search

This plugin currently does not care about case sensitivity. We should provide a way to the users specify if they want a case sensitive search/replace

the function getIndicesOf already supports this. We should add a field (a checkbox maybe) and pass this option to this method;

we should add this parameter to the execute options (see DEFAULT_OPTIONS) and as a parameter to _find and isSameSearch to work correctly

Structure the plugin as CKEditor5 docs recommends

CKEditor docs structure their plugins with following structure:

• master plugin (glues all parts)
• UI part of plugin
• Editing part of plugin
• Command (if needed)

This plugin should follow this to be consistent with their architecture and maybe help to create tests easily.

Use selected text as input to find-replace plugin

It is a common behavior the user selects some text and then CTRL+F to search for that term.
Most of search plugins detect and use the current selected text as the word the user wants to search.

One caveat. CKEditor allows to select different portions of text using CTRL. The plugin should only use the input if there is only one continuous selection.