I'm using the following versions:
"gatsby": "^4.21.1",
"gatsby-plugin-mdx": "^4.0.0",
"gatsby-remark-images": "^6.21.0",
"remark-unwrap-images": "^3.0.1",
And I have the following in place as part of my gatsby-config.js:
{
resolve: "gatsby-plugin-mdx",
options: {
gatsbyRemarkPlugins: [
{
resolve: "gatsby-remark-images",
options: {
linkImagesToOriginal: false,
backgroundColor: "transparent",
},
},
],
mdxOptions: {
remarkPlugins: [wrapESMPlugin("remark-unwrap-images")]
}
},
},
Then in my code I make use of the MDXProvider to override the rendering of some components like so:
<MDXProvider components={{ img: SomeComponent }}>
{children}
</MDXProvider>
Before upgrading to use the latest versions of gatsby-plugin-mdx and gatsby-remark-images this used to work nicely and I'd end up with my custom component being rendered correctly.
Since the update I'm finding that an extra div is wrapping the image which appears to be coming from gatsby-remark-images (although looking at the source code I can't see how or where).
As a result, this changes the behaviour of MDXProvider since it now thinks it's a div instead of an img which is a problem.
Has anyone encountered this or have a suggestion on how to resolve it?
Note: This is not the same as the issue with images getting wrapped in p Which can be resolved by using remark-unwrap-images per my gatsby-config.js as shown above. Also, further to this gatsby-remark-figure-caption does not appear to work in gatsby 4+.
I want to remove media and typography section in the "grapesjs-blocks-bootstrap4" plugin. How can I do that?
plugins: ["gjs-blocks-basic","grapesjs-blocks-bootstrap4"], pluginsOpts: {"gjs-blocks-basic": {},"grapesjs-blocks-bootstrap4":{} },
I'm trying to directly load SVG elements into a React component, and it's been a massive headache. I'm a bit new to really digging in with understanding. To be fair, I'm really enjoying Next, it reminds me a lot of Ruby or Laravel.
So, perhaps someone can help guide me on the path of enlightenment here... I'm using a Next plugin, withReactSvg
next.config.js
module.exports = withPlugins(
[
[
withReactSvg, {
include: path.resolve(__dirname, 'lib/svg/'),
webpack(config, options) {
return config
}
}
],
//[/*plug name*/, { /* plugin config here ... */ }],
],
{
/* global config here ... */
future: {
webpack5: true,
},
distDir: '.build',
},
);
This plugin extends Next to import SVGs more directly and be able to control internal SVG css more directly, and it's pretty elegant compared with other solutions...
In any component, I can now do the following:
ExampleComponent.tsx
import Icon from '../lib/svg/icon_4.svg';
export default function ExampleComponent() {
return ( <Icon fill="red" stroke="white" /> );
}
This code compiles and works, but trying to use Typescript I receive this error:
(JSX attribute) fill: string
Type '{ fill: string; stroke: string; }' is not assignable to type 'IntrinsicAttributes'.
Property 'fill' does not exist on type 'IntrinsicAttributes'.ts(2322)
The closest I think I've gotten to solving this puzzle is a really good article React Higher Order Component Patterns In Typescript, but it comes just shy of working because I'm sort of implicitly creating a react component with the import.
A lot of other articles seem to assume I'm trying to do something I shouldn't be doing... And maybe I am?
I have installed three packages:
#ckeditor/ckeditor5-react
#ckeditor/ckeditor5-build-classic
#wiris/mathtype-ckeditor5/src/plugin
I'm able to setup simple ckeditor5 but don't know how to use MathType plugin in this editor.
Here is my sample code:
<CKEditor
data={input.value}
editor={ClassicEditor}
onChange={(event, editor) => {
return input.onChange(editor.getData());
}}
/>;
Can anyone explain how i can use this?
Thanks.
Here's a link you should see to understand how to add a plugin to ckeditor.
TL;DR: You should create a new build containing your plugin (in your case MathType plugin), the easiest way to do it is using their online builder, then you can use that build that you generated instead of #ckeditor/ckeditor5-build-classic for example.
I have already done this work and published it to npm, you can install it with:
npm install ckeditor5-classic-with-mathtype
Here's an example of using it with react:
import CKEditor from '#ckeditor/ckeditor5-react';
import ClassicEditor from 'ckeditor5-classic-with-mathtype';
...
render() {
return (
<CKEditor
editor={ClassicEditor}
config={{
toolbar: {
items: [
'heading', 'MathType', 'ChemType',
'|',
'bold',
'italic',
'link',
'bulletedList',
'numberedList',
'imageUpload',
'mediaEmbed',
'insertTable',
'blockQuote',
'undo',
'redo'
]
},
}}
data="<p>Hello from CKEditor 5 with MathType!</p>"
onInit={editor => {
// You can store the "editor" and use when it is needed.
// console.log( 'Editor is ready to use!', editor );
}}
/>
);
}
https://www.npmjs.com/package/ckeditor5-build-classic-mathtype, a package which customizes classic editor build, which adds mathtype plugin.
import CKEditor from '#ckeditor/ckeditor5-react'
import ClassicEditor from 'ckeditor5-build-classic-mathtype'
...
render() {
return (
<CKEditor
editor={ClassicEditor}
data="<p>Hello from CKEditor 5 with MathType!</p>"
onInit={editor => {
// You can store the "editor" and use when it is needed.
// console.log( 'Editor is ready to use!', editor );
}}
/>
)
}
I have used MathType Editor in ReactJs using Javascript.
Here is the steps:
Include in index.html
render normal text area in the component
<textarea name="question" id="question" cols="100" rows="6"></textarea>
use below code in componentDidMount function :
let ED = window.CKEDITOR;
let mathElements = [
'math',
'maction',
'maligngroup',
'malignmark',
'menclose',
'merror',
'mfenced',
'mfrac',
'mglyph',
'mi',
'mlabeledtr',
'mlongdiv',
'mmultiscripts',
'mn',
'mo',
'mover',
'mpadded',
'mphantom',
'mroot',
'mrow',
'ms',
'mscarries',
'mscarry',
'msgroup',
'msline',
'mspace',
'msqrt',
'msrow',
'mstack',
'mstyle',
'msub',
'msup',
'msubsup',
'mtable',
'mtd',
'mtext',
'mtr',
'munder',
'munderover',
'semantics',
'annotation',
'annotation-xml'
];
ED.plugins.addExternal( 'ckeditor_wiris', 'https://www.wiris.net/demo/plugins/ckeditor/', 'plugin.js' );
ED.replace( 'question', {
extraPlugins: 'ckeditor_wiris',
// For now, MathType is incompatible with CKEditor file upload plugins.
removePlugins: 'filetools,uploadimage,uploadwidget,uploadfile,filebrowser,easyimage',
height: 320,
// Update the ACF configuration with MathML syntax.
extraAllowedContent: mathElements.join( ' ' ) + '(*)[*]{*};img[data-mathml,data-custom-editor,role](Wirisformula)'
} );
If you want to check Ml tags in the react component. Need to load a script in the component:
const script = document.createElement("script");
script.src ='https://www.wiris.net/demo/plugins/app/WIRISplugins.js?viewer=image;
script.async = true;
document.body.appendChild(script);
Our users are copy pasting images into the editor (CKEditor 5), which is something we don't want to support.
The suggested fix for CKEditor 4 does not seem to work in 5.
How can I change the editor to disable this feature?
This is my config:
const editorConfig = {
toolbar: ['heading', 'bold', 'italic', 'bulletedList', 'numberedList'],
removePlugins: ['Image', 'ImageToolbar', 'ImageStyle', 'ImageUpload', 'ImageCaption'],
heading: {
options: [
{
model: 'paragraph',
title: 'Paragraph',
class: 'ck-heading_paragraph',
},
{
model: 'heading2',
view: 'h2',
title: 'Heading',
class: 'ck-heading_heading2',
},
],
},
};
If you want to completely disable the image feature, this is – make it impossible for images to be inserted/loaded in any way to the editor, then you should remove the Image, ImageToolbar, ImageStyle, 'ImageUpload, and ImageCaption plugins from your editor. The easiest way to achieve that is to use config.removePlugins. You can also check how to install plugins cause uninstalling is just the opposite process.
If you want to disallow inserting images, but still keep support for those images which are already present in the content, you need to handle it a bit differently. You'd have to block pasting/dropping them which can be done with the features exposed by the clipboard integration. You may also want to remove the ImageUpload plugin in thi case too. Finally, you probably won't need the imageUpload button in the toolbar, so you have to reconfigure it.