I'm using codemirror latest (v5.49.0). for my electron text editor app, sometimes line numbers are rendered overlapped with the text. cannot reproduce the bug because it doesn't happen always. easily it can reproduce by refreshing the app several times. Anyone have an idea? or may be this is a known issue for you?
I was having this issue as well but what worked for me was this answer from Github.
const Editor = CodeMirror.fromTextArea(element, { lineNumbers: true });
Editor.refresh();
This answer worked for me.
import CodeMirror from 'codemirror';
import htmlembedded from 'codemirror/mode/htmlembedded/htmlembedded';
import js from 'codemirror/mode/javascript/javascript';
import 'codemirror/lib/codemirror.css';
import 'codemirror/addon/display/autorefresh';
// ...
const codeEditor = CodeMirror.fromTextArea(this.$('#isCalculatedValueTextField')[0], {
lineNumbers: true,
autoRefresh:true,
// ...
});
Related
I am building a web app on React Js and trying too build a custom map of floors of building. I followed the article on https://www.highcharts.com/docs/maps/create-custom-maps and created an application using HTML CSS and JavaScript,https://jsfiddle.net/hop9cqxj/92/ however I want it inside of ReactJS. Whenever I paste the map options into the React JS variable. I get the error below:
Error
Highcharts error #17: www.highcharts.com/errors/17/?missingModuleFor=map
The demo work's link is here: https://codesandbox.io/s/inspiring-sunset-o3pf92
missingModuleFor: map
You need to use Highmaps source code and mapChart chart constructor type.
import Highcharts from "highcharts/highmaps";
import HighchartsReact from "highcharts-react-official";
import React from "react";
const option2 = {...};
export default function DeltaSecond() {
return (
<>
<HighchartsReact
highcharts={Highcharts}
options={option2}
constructorType="mapChart"
></HighchartsReact>
</>
);
}
Also, I have noticed that Highcharts doesn't work in StrictMode from the newest React, so you can report a potential bug on highcharts-react github: https://github.com/highcharts/highcharts-react
Live demo: https://codesandbox.io/s/nifty-satoshi-xxt-xxtkp9?file=/src/components/buildings/Delta/delta2nd.js
Docs: https://www.npmjs.com/package/highcharts-react-official#options-details
I'm using Konva in a Vue application, and I can't suppress Konva's warnings in browser console.
According to Konva docs, there is an option for this, Konva.showWarnings = false. (I understood the warning itself and am aware of its possible implications).
I've checked this: Turn off Konvajs warnings, but to no avail, the answer here just explains that such a setting exists.
What I'm doing in my main.js file:
import VueKonva from 'vue-konva'
Vue.use(VueKonva)
and then I'm trying to apply the setting:
VueKonva.showWarnings = false
I've also tried adding it inside Vue.use as option:
Vue.use(VueKonva, {showWarnings: false})
...but to no avail.
What am I missing here?
You should do the same:
import Konva from 'konva';
Konva.showWarnings = false;
Are you sure you want to disable them?
edited: as the final solution to the problem, I'm adding #lavrton's comment from below:
For the showWarnings property to work in vue-konva, you need to import both the original konva library, and the vue one for vue-bindings.
The working code now looks like this:
import VueKonva from "vue-konva";
import Konva from "konva";
Konva.showWarnings = false;
Vue.use(VueKonva);
Vue.use(Konva);
I am trying to use rollup to build a mini react component library of sorts, as soon as I add a react-konva component the errors appears, when I add the konva to the example I using to test the library it works fine leading me to assume its something with the way rollup handles konva. The only thing that I have seen on the github for react-konva that may link to this is: https://github.com/konvajs/react-konva/issues/504
My Rollup Config
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import resolve from "#rollup/plugin-node-resolve";
import commonjs from "#rollup/plugin-commonjs";
import typescript from "rollup-plugin-typescript2";
import postcss from "rollup-plugin-postcss";
import image from "#rollup/plugin-image";
const packageJson = require("./package.json");
export default {
input: "src/BuildScreen.tsx",
output: [
{
file: packageJson.main,
format: "cjs",
sourcemap: true
},
{
file: packageJson.module,
format: "esm",
sourcemap: true
}
],
plugins: [
peerDepsExternal(),
resolve(),
commonjs(),
typescript({ useTsconfigDeclarationDir: true }),
postcss(),
image()
]
}
The Error
If anything else is needed lmk, thanks in advance to anyone that helps
Well I look stupid, I randomly decided to change from duckduckgo to google to look up the issue and got a few github links for it one being https://github.com/konvajs/react-konva/issues/189 which made me think to remove my react konva and konva and reinstall it to the latest version and it worked my react-konva was on 16.13 or something and when I upgraded ended up on 17.0.0 which worked
I am putting an angular portion into my MVC app. As such, I have added a tag to my layout view to find the Angular source code, and this is working great.
My issue arises in trying to add a 3rd party module to my project. I added it through the package.json with no problem, and added the module to my app.module.ts as follows:
import { FileUploadModule } from 'primeng/fileupload';
The reference is found, Visual Studio is happy, everything is fine. However, when I run the project locally, I get the following 404 error:
GET http://localhost:59911/src/primeng/fileupload 404 (Not Found)
It seems to me likely that the tag is causing the issue, but I can't remove it without killing the rest of the Angular functionality. Any hints? Can I add an override to the imports call?
Thanks, Mike
On PrimeNG's official website they suggested using import { FileUploadModule } from 'primeng/fileupload'; but it doesn't work any more. I guess they didn't update the docs.
You need { FileUploadModule } from 'primeng/primeng';
The structure is
In the primeng.d.ts file PrimeNG re-exported all modules.
export * from './components/fileupload/fileupload';
For now, no matter which PrimeNG module is used, it is all from primeng/primeng. Here's the imported modules in my project:
import {
ButtonModule,
CodeHighlighterModule,
ConfirmDialogModule,
FieldsetModule,
FileUploadModule,
GrowlModule,
MessagesModule
} from 'primeng/primeng';
The version I use is "primeng": "^4.2.1"
The issue was that primeng was not in the mapping, so it was looking for it in src.
I added the following to systemjs.config.js:
in maps:
'primeng': 'npm:primeng',
in packages:
primeng: {
defaultExtension: 'js'
}
Thanks for the help everyone!
Dart filter blur doesn't work with Safari, Chrome... Why ?
<h1>This text will blur in Firefox, not in Webkit</h1>
import 'dart:html';
import 'dart:core';
main() {
document.querySelector('h1').style.filter = 'blur(5px)';
}
Looks like Dart doesn't replace filter with -webkit-filter in Chrome but it should. There are plans to support unprefixed filter in Chrome (https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/R2gCfHjNgKs) but it's not clear when this will ship. It might be worth creating a bug report in http://github.com/dart-lang/sdk/issues/new so the prefix gets added automatically for Chrome.