react-native-rich-editor icon indicating copy to clipboard operation
react-native-rich-editor copied to clipboard

Why isn't "sendAction" available in public interface of RichEditor TS?

Open johnmoon311 opened this issue 4 years ago • 3 comments
trafficstars

Hello I'm attempting to use this library to add a rich text editor to a React Native application using Typescript. We are trying to use the "renderAction" prop to render a custom toolbar. Currently, we cannot find a way to trigger the default actions in our custom UI without calling the "sendAction". Is there a reason this method is not available in the TS file?

Am I missing something in the documentation to trigger the default actions with a custom toolbar?

johnmoon311 avatar Jan 08 '21 00:01 johnmoon311

sendAction is a recently opened external method, which was previously private

stulip avatar Jan 08 '21 01:01 stulip

Thank you for the quick response! Do you have an ETA of the next release?

I also had another unrelated question about the custom toolbar. Currently, we cannot access the selected text's format tag in the editor (h1, h2, h3, h4, p tag...). I took a look at the editor.js and found the state for those Actions were not mapped. Is there a reason you did not enable this state? I've provided a sample code below of the updated state that should return this info back to the component to render in the toolbar

var Actions = { bold: { state: function() { return queryCommandState('bold'); }, result: function() { return exec('bold'); }}, italic: { state: function() { return queryCommandState('italic'); }, result: function() { return exec('italic'); }}, underline: { state: function() { return queryCommandState('underline'); }, result: function() { return exec('underline'); }}, strikeThrough: { state: function() { return queryCommandState('strikeThrough'); }, result: function() { return exec('strikeThrough'); }}, heading1: { state: function() { return queryCommandValue(formatBlock) === 'h1'; }, result: function() { return exec(formatBlock, '<h1>'); }}, heading2: { state: function() { return queryCommandValue(formatBlock) === 'h2'; }, result: function() { return exec(formatBlock, '<h2>'); }}, heading3: { state: function() { return queryCommandValue(formatBlock) === 'h3'; }, result: function() { return exec(formatBlock, '<h3>'); }}, heading4: { state: function() { return queryCommandValue(formatBlock) === 'h4'; }, result: function() { return exec(formatBlock, '<h4>'); }}, heading5: { state: function() { return queryCommandValue(formatBlock) === 'h5'; }, result: function() { return exec(formatBlock, '<h5>'); }}, heading6: { state: function() { return queryCommandValue(formatBlock) === 'h6'; }, result: function() { return exec(formatBlock, '<h6>'); }}, paragraph: { state: function() { return queryCommandValue(formatBlock) === 'p'; }, result: function() { return exec(formatBlock, '<p>'); }}, quote: { result: function() { return exec(formatBlock, '<blockquote>'); }},

(mainly) heading1: { state: function() { return queryCommandValue(formatBlock) === 'h1'; }, result: function() { return exec(formatBlock, '<h1>'); }}

h1 h3 p

johnmoon311 avatar Jan 08 '21 23:01 johnmoon311

Thanks for the relevant information, 1.7.0 has been added

stulip avatar Feb 04 '21 03:02 stulip