Comments (10)
from strapi-plugin-react-editorjs.
In any case, we will need to fix this soon.
from strapi-plugin-react-editorjs.
Thanks @melishev it'd be great!
from strapi-plugin-react-editorjs.
Hey i managed to fix it by running locally like mentioned in the docs then i wrote bit of code to detect the mode. Feel free to use in a later update. @melishev
import styled from 'styled-components';
import {Box} from "@strapi/design-system/Box";
const computeInterfaceModeStyle = () => {
const strapiTheme = window.localStorage.getItem('STRAPI_THEME');
let interfaceModeColor = 'black';
let toolbarButtonHoverColor = 'white';
let selectionColor = '#e1f2ff';
if (strapiTheme) {
if (strapiTheme === 'dark') {
interfaceModeColor = 'white';
toolbarButtonHoverColor = '#181826';
selectionColor = "#181826"
}
if(strapiTheme === 'light') {
interfaceModeColor = 'black'
}
} else {
// Check what the browser settings are, strapi falls back onto this when there is no local storage
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
interfaceModeColor = 'white';
}
}
return `
.ce-block__content {
color: ${interfaceModeColor};
}
.ce-toolbar__actions-buttons svg {
fill: ${interfaceModeColor}
}
.ce-toolbar__settings-btn--active, .ce-toolbar__settings-btn:hover {
background-color: ${toolbarButtonHoverColor};
}
.ce-block--selected .ce-block__content {
background: ${selectionColor};
}
.cdx-block::selection {
background-color: ${selectionColor};
}
`;
}
const Wrapper = styled(Box)`
${computeInterfaceModeStyle};
from strapi-plugin-react-editorjs.
@kgrosvenor Oh that's amazing, could you send a PR with your changes so we can include them in the package?
from strapi-plugin-react-editorjs.
Will do!
from strapi-plugin-react-editorjs.
Hey i managed to fix it by running locally like mentioned in the docs then i wrote bit of code to detect the mode. Feel free to use in a later update. @melishev
import styled from 'styled-components'; import {Box} from "@strapi/design-system/Box"; const computeInterfaceModeStyle = () => { const strapiTheme = window.localStorage.getItem('STRAPI_THEME'); let interfaceModeColor = 'black'; let toolbarButtonHoverColor = 'white'; let selectionColor = '#e1f2ff'; if (strapiTheme) { if (strapiTheme === 'dark') { interfaceModeColor = 'white'; toolbarButtonHoverColor = '#181826'; selectionColor = "#181826" } if(strapiTheme === 'light') { interfaceModeColor = 'black' } } else { // Check what the browser settings are, strapi falls back onto this when there is no local storage if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { interfaceModeColor = 'white'; } } return ` .ce-block__content { color: ${interfaceModeColor}; } .ce-toolbar__actions-buttons svg { fill: ${interfaceModeColor} } .ce-toolbar__settings-btn--active, .ce-toolbar__settings-btn:hover { background-color: ${toolbarButtonHoverColor}; } .ce-block--selected .ce-block__content { background: ${selectionColor}; } .cdx-block::selection { background-color: ${selectionColor}; } `; } const Wrapper = styled(Box)` ${computeInterfaceModeStyle};
Hey I was using this plugin. Could you tell me where can I paste this code to make this work?
from strapi-plugin-react-editorjs.
Hey you will need to follow the steps in the README to include the project in your project.
This is the best way to include in package.json so it installs nicely in one npm install
command.
"workspaces": [
"src/plugins/strapi-plugin-react-editorjs"
],
Clone my forked repo into plugins
in your project, remove the git association.
So it should be like
src/plugins/strapi-plugin-react-editorjs
Update your plugins config file to use the following
module.exports = ({ env }) => ({
// ...
'editorjs': {
enabled: true,
resolve: './src/plugins/strapi-plugin-react-editorjs'
},
// ...
})
npm run build and then restart the server
from strapi-plugin-react-editorjs.
Hey you will need to follow the steps in the README to include the project in your project. This is the best way to include in package.json so it installs nicely in one
npm install
command."workspaces": [ "src/plugins/strapi-plugin-react-editorjs" ],
Clone my forked repo into
plugins
in your project, remove the git association.So it should be like
src/plugins/strapi-plugin-react-editorjs
Update your plugins config file to use the following
module.exports = ({ env }) => ({ // ... 'editorjs': { enabled: true, resolve: './src/plugins/strapi-plugin-react-editorjs' }, // ... })
npm run build and then restart the server
Hey yes I managed to get the plugin on. I meant how do I go about changing the editor font colors according to the mode. How can I use the snippet of logic you built to get the same results?
Thank you so much in advance!
from strapi-plugin-react-editorjs.
Hey you will need to follow the steps in the README to include the project in your project. This is the best way to include in package.json so it installs nicely in one
npm install
command."workspaces": [ "src/plugins/strapi-plugin-react-editorjs" ],
Clone my forked repo into
plugins
in your project, remove the git association.So it should be like
src/plugins/strapi-plugin-react-editorjs
Update your plugins config file to use the following
module.exports = ({ env }) => ({ // ... 'editorjs': { enabled: true, resolve: './src/plugins/strapi-plugin-react-editorjs' }, // ... })
npm run build and then restart the server
Did you try to make a pull request?
I found this bug too.
from strapi-plugin-react-editorjs.
Related Issues (20)
- Emptying editor does not allow "Save" and leaves artifacts. HOT 8
- deploying submodule HOT 5
- Why main image block without hash & ext? HOT 3
- Feature/Improvement: copy rich text content to new locale HOT 2
- [FEATURE] Plugin configuration. HOT 5
- embed external images in editorjs instead of uploading them HOT 1
- Do you have any plans to support video upload? HOT 8
- [FEATURE] i18n support HOT 1
- Conflicting UX/UI name for Image(MediaLibrary) and Image plugin.
- Consider adding Axios as dependency
- Add support for node 18 HOT 6
- Disabling built-in inline tools (link) HOT 3
- Issue with the plugin not showing up HOT 2
- When copy / paste content and immediatly save, nothing in saved HOT 1
- API public permissions always reachable
- Strapi 4.9 breaks image upload
- Editor doesn't work on dark theme HOT 1
- Inline Code is a 'paragraph' type instead of 'code'
- Still maintained?
- strapi editor not compatible with strapi v14.4.0 HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from strapi-plugin-react-editorjs.