Hi everyone,
I have built small and simple custom plugin following this documentation guide in order to replace the existing richText editor for two main reasons:
-
In full-screen mode, the editor’s header isn’t sticky when the content is long:
-
The
richTexteditor doesn’t allow me to access the name or alt attribute of images added via the asset library.
Here’s the issue I’m facing now:
I’ve implemented the plugin, but when clicking the image button, the browser’s default upload modal opens instead of the Builder asset library. This behavior is shown below:
The goal is to preserve the existing functionality while fixing the issues mentioned above.
Here’s the source code for my plugin implementation:
/** @jsx jsx */
import { jsx } from '@emotion/core';
import { Builder, builder } from '@builder.io/react';
import ReactQuill from 'react-quill';
const modules = {
toolbar: {
container: [
[{ header: [1, 2, 3, 4, 5, 6, false] }],
['bold', 'italic', 'underline', 'strike', 'blockquote'],
[
{ list: 'ordered' },
{ list: 'bullet' },
{ indent: '-1' },
{ indent: '+1' },
],
['link', 'image'],
['clean'],
],
handlers: {
image: () => {
/**
* @description
* This should behave like the default rich text editor's image
* button. It should:
* 1 .Open Media Library (modal)
* 2. Insert Image to Editor when selected
*/
console.log('image clicked');
},
},
},
};
const formats = [
'header',
'bold',
'italic',
'underline',
'strike',
'blockquote',
'list',
'bullet',
'indent',
'link',
'image',
];
function RichTextEditor(props) {
return (
<ReactQuill
theme="snow"
value={props.value}
onChange={props.onChange}
modules={modules}
formats={formats}
/>
);
}
Builder.registerEditor({
name: 'richText',
component: RichTextEditor,
});
export default RichTextEditor;
Here’s how it looks within Builder.io:
Any suggestions on how to make the image button open the media library and preserve the default behavior ?
P.S.
And one other thing, i would want to know if it is possible to extend or override the editor directly from the next.js app and add the plugin in the editor without needing to created separate app for that as is shown in the doc guide ?
Thanks in advance !