Develop Reference

characters wont display correct with Quasar Framework together with i18n

Im using i18n together with Quasar Framework. It works great but I have some problems with some special characters in certain languages when grabbing text from my own definations.
I got this in i18n.js in my boot:
import Vue from "vue";
import VueI18n from "vue-i18n";
import messages from "src/i18n";
Vue.use(VueI18n);
const i18n = new VueI18n({
locale: "en-us",
fallbackLocale: "en-us",
messages,
});
export default ({ app }) => {
// Set i18n instance on app
app.i18n = i18n;
};
// if you need to import it from
// other files, then:
export { i18n };
and use it in template like this:
<template>
...
<div>{{ $t('hello') }}</div>
...
and in my bootfile
boot: ["i18n"],
framework: {
iconSet: "material-icons", // Quasar icon set
lang: "en-us", // Quasar language pack
Here is the setup in my language component:
export default {
data() {
return {
toggleSMenu: false,
myData: ["one", "two"],
lang: this.$i18n.locale,
langOptions: [
{ value: "en-us", label: "EN" },
{ value: "nl", label: "NL" }
]
};
},
When I change to Dutch (NL) some caracters wont display correctly. How can I add support for dutch letters?

Full Calendar Styling not Correct after import

I'm trying to use React Full Calendar inside my project and though the calendar gets rendered in the correct way, the styling is a bit off. Here's how it is looking currently:
As you can see, in the header toolbar, the month word isn't aligned in the middle which is the same for other words and icons. Maybe, the size of the button itself is looking small in height.
The functionality of the button is working correctly but the styling isn't how it is that they are showing in documentation.
Here's the link to how it should actually look: https://fullcalendar.io/docs/toolbar-demo
Here's how I've included the FullCalendar:
import React, { Component } from 'react'
import FullCalendar from '#fullcalendar/react'
import dayGridPlugin from '#fullcalendar/daygrid'
import interactionPlugin from "#fullcalendar/interaction";
import timeGridPlugin from "#fullcalendar/timegrid";
import "#fullcalendar/common/main.css";
import "#fullcalendar/daygrid/main.css";
import "#fullcalendar/timegrid/main.css";
class TimelineScheduler3 extends Component {
handleDateClick = (arg) => { // bind with an arrow function
alert(arg.dateStr)
}
render() {
return (
<FullCalendar
plugins={[dayGridPlugin, interactionPlugin, timeGridPlugin]}
initialView="dayGridMonth"
weekends={true}
dateClick={this.handleDateClick}
headerToolbar={{
left: 'dayGridMonth,timeGridWeek,timeGridDay',
center: 'title',
right: 'prevYear,prev,next,nextYear'
}}
events={
[
{ title: 'event 1', date: '2021-05-05' },
{ title: 'event 2', date: '2021-05-07' }
]}
/>
)
}
}
export default TimelineScheduler3;
Is some import missing from my end or is the styling of my application overriding styling of FullCalendar?

Ckeditor 5 in Reactjs doesn't work correctly

I had been using Ckeditor 4 for a long time in my React project and I didn't have any problem with it.
For adding a plugin that it provides adding video (video Html5 tag), I had to use Ckeditor 5 instead of Ckeditor 4. So I built an editor via CKEditor 5 online builder according according to this document step by step.
This is a directory of Ckeditor in my project:
The ckeditor.js (ckeditor5/src/ckeditor.js) file is:
/**
* #license Copyright (c) 2014-2020, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
import ClassicEditor from '#ckeditor/ckeditor5-editor-classic/src/classiceditor.js';
import Alignment from '#ckeditor/ckeditor5-alignment/src/alignment.js';
import Autoformat from '#ckeditor/ckeditor5-autoformat/src/autoformat.js';
import BlockQuote from '#ckeditor/ckeditor5-block-quote/src/blockquote.js';
import Bold from '#ckeditor/ckeditor5-basic-styles/src/bold.js';
import CKFinder from '#ckeditor/ckeditor5-ckfinder/src/ckfinder.js';
import CKFinderUploadAdapter from '#ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter.js';
import Code from '#ckeditor/ckeditor5-basic-styles/src/code.js';
import Essentials from '#ckeditor/ckeditor5-essentials/src/essentials.js';
import FontBackgroundColor from '#ckeditor/ckeditor5-font/src/fontbackgroundcolor.js';
import FontColor from '#ckeditor/ckeditor5-font/src/fontcolor.js';
import FontFamily from '#ckeditor/ckeditor5-font/src/fontfamily.js';
import FontSize from '#ckeditor/ckeditor5-font/src/fontsize.js';
import Heading from '#ckeditor/ckeditor5-heading/src/heading.js';
import Highlight from '#ckeditor/ckeditor5-highlight/src/highlight.js';
import HtmlEmbed from '#ckeditor/ckeditor5-html-embed/src/htmlembed.js';
import Image from '#ckeditor/ckeditor5-image/src/image.js';
import ImageCaption from '#ckeditor/ckeditor5-image/src/imagecaption.js';
import ImageInsert from '#ckeditor/ckeditor5-image/src/imageinsert.js';
import ImageResize from '#ckeditor/ckeditor5-image/src/imageresize.js';
import ImageStyle from '#ckeditor/ckeditor5-image/src/imagestyle.js';
import ImageToolbar from '#ckeditor/ckeditor5-image/src/imagetoolbar.js';
import ImageUpload from '#ckeditor/ckeditor5-image/src/imageupload.js';
import Indent from '#ckeditor/ckeditor5-indent/src/indent.js';
import Italic from '#ckeditor/ckeditor5-basic-styles/src/italic.js';
import Link from '#ckeditor/ckeditor5-link/src/link.js';
import LinkImage from '#ckeditor/ckeditor5-link/src/linkimage.js';
import List from '#ckeditor/ckeditor5-list/src/list.js';
import MediaEmbed from '#ckeditor/ckeditor5-media-embed/src/mediaembed.js';
import Paragraph from '#ckeditor/ckeditor5-paragraph/src/paragraph.js';
import PasteFromOffice from '#ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
import Table from '#ckeditor/ckeditor5-table/src/table.js';
import TableToolbar from '#ckeditor/ckeditor5-table/src/tabletoolbar.js';
import TextTransformation from '#ckeditor/ckeditor5-typing/src/texttransformation.js';
class Editor extends ClassicEditor {}
// Plugins to include in the build.
Editor.builtinPlugins = [
Alignment,
Autoformat,
BlockQuote,
Bold,
CKFinder,
CKFinderUploadAdapter,
Code,
Essentials,
FontBackgroundColor,
FontColor,
FontFamily,
FontSize,
Heading,
Highlight,
HtmlEmbed,
Image,
ImageCaption,
ImageInsert,
ImageResize,
ImageStyle,
ImageToolbar,
ImageUpload,
Indent,
Italic,
Link,
LinkImage,
List,
MediaEmbed,
Paragraph,
PasteFromOffice,
Table,
TableToolbar,
TextTransformation
];
export default Editor;
And I used the Editor in this way:
import React, { useState, FunctionComponent } from "react";
import Editor from "ckeditor5-custom-build/build/ckeditor";
import CKEditor from "#ckeditor/ckeditor5-react";
export interface CreateNewArticleProps {}
const CreateNewArticle: FunctionComponent<CreateNewArticleProps> = () => {
const [articleFormData, setArticleFormData] = useState({
articleBody: "",
});
const editorConfiguration = { toolbar: ["bold", "italic"] };
const ckeditorDataChangeHandler = (event) => {
setArticleFormData({
...articleFormData,
articleBody: event.editor.getData(),
});
};
return (
<CKEditor
editor={Editor}
config={editorConfiguration}
data={articleFormData.articleBody}
onChange={ckeditorDataChangeHandler}
/>
);
};
export default CreateNewArticle;
The editorConfiguration constant is the simplest configuration for the CKEditor component, but none of the toolbars doesn't work.
I need all toolbar that exists in the ckeditor.js (ckeditor5/src/ckeditor.js) file.
Please consider that my main goal in using Ckeditor5 is to benefit from the ability to add a video in text.

Change handler as following:
const ckeditorDataChangeHandler = (event, editor) => {
setArticleFormData({
...articleFormData,
articleBody: editor.getData(),
});
};

Storybook not showing styles

I have a dialog component which is using the Primereact dialog internally. When I make a storybook for the same, the custom css for button is being imported as it is imported inside dialog.jsx. But the default css of Primereact dialog is not loading and reflecting in the storybook. Although it is being loaded in my React app.
dialogComp.jsx
import { Dialog } from "primereact/dialog";
const DialogComp = (props) => {
return (
<Dialog
className="dialog-modal"
header={props.header}
visible={true}
>
{props.children}
</Dialog>
);
};
export default DialogModal;
dialog.storybook.js
import React from "react";
import DialogModal from "./dialogComp";
import { addDecorator, addParameters } from "#storybook/react";
import { Store, withState } from "#sambego/storybook-state";
import { store } from "./../../utils/storyStore";
const DialogModalComp = (props) => {
return [
<div>
<DialogModal
header="Dialog Modal"
displayModal={true}
>
Modal content
</DialogModal>
</div>,
];
};
addDecorator(withState());
addParameters({
state: {
store,
},
});
export default {
title: "dialog",
};
export const DialogModalComponent = () => DialogModalComp;
storybook---main.js
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.#(js|jsx|ts|tsx)"
],
"addons": [
"#storybook/addon-links",
"#storybook/addon-essentials",
"#storybook/preset-create-react-app"
]
}
Am I missing something in the configuration?

You'll need to import any styles you use in App.js globally in Storybook, by importing them in .storybook/preview.js (create the file if it doesn't already exist).
Every component in React is self contained - your DialogModal component won't get styled because in Storybook it is not being rendered within your App component (where you're importing your styles).
To simulate your app when using Storybook, you import the css in a preview.js file.
Docs:
To control the way stories are rendered and add global decorators and
parameters, create a .storybook/preview.js file. This is loaded in the
Canvas tab, the “preview” iframe that renders your components in
isolation. Use preview.js for global code (such as CSS imports or
JavaScript mocks) that applies to all stories.

TL;DR
import your styles in .storybook/preview.js
import "../src/index.css";
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
};

If you use storybook and emotion, and if you implement Global styles or Theming, you may add a decorator into the .storybook/preview.js like this:
I'm using Create React App, therefore I'm using jsxImportSource
/** #jsxImportSource #emotion/react */
import { Global } from '#emotion/react'
import { GlobalStyles } from '../src/styles'
const withGlobalProvider = (Story) => (
<>
<Global styles={GlobalStyles} />
<Story />
</>
)
export const decorators = [withGlobalProvider]
You may find more information on: https://storybook.js.org/docs/react/essentials/toolbars-and-globals#global-types-and-the-toolbar-annotation

CKEditor5: Cannot read property 'pluginName' of undefined

I am trying to make a custom image plugin for CKEditor which integrates with my custom-made image upload system. Mainly, I run into problems while setting up this plugin. When I load "out-of-the-box" plugins, everything works fine (also, when I remove my own plugin, everything works again as it used to).
I get the following console error:
main.511663b82f6b3e2bb9df.js?2754ab1fde8ef5d8fd3d:1322 TypeError: Cannot read property 'pluginName' of undefined
at new ga (main.511663b82f6b3e2bb9df.js?2754ab1fde8ef5d8fd3d:360)
at new Ul (main.511663b82f6b3e2bb9df.js?2754ab1fde8ef5d8fd3d:521)
at new Lc (main.511663b82f6b3e2bb9df.js?2754ab1fde8ef5d8fd3d:643)
at new pp (main.511663b82f6b3e2bb9df.js?2754ab1fde8ef5d8fd3d:1318)
at n (main.511663b82f6b3e2bb9df.js?2754ab1fde8ef5d8fd3d:643)
at new Promise (<anonymous>)
at Function.create (main.511663b82f6b3e2bb9df.js?2754ab1fde8ef5d8fd3d:643)
at Module.<anonymous> (main.511663b82f6b3e2bb9df.js?2754ab1fde8ef5d8fd3d:1322)
at n (main.511663b82f6b3e2bb9df.js?2754ab1fde8ef5d8fd3d:1)
at main.511663b82f6b3e2bb9df.js?2754ab1fde8ef5d8fd3d:1
I couldn't find anything about the property pluginName, apart from the following excerpt of documentation over at CKEditor:
pluginName : String | undefined
An optional name of the plugin. If set, the plugin will be available
in get by its name and its constructor. If not, then only by its
constructor.
The name should reflect the constructor name.
To keep the plugin class definition tight it is recommended to define
this property as a static getter:
export default class ImageCaption {
static get pluginName() {
return 'ImageCaption';
}
}
Note: The native Function.name property could not be used to keep the plugin name because it will be mangled during code
minification.
Inserting this function into my plugin code did not work, so I am kind of lost here what the problem could be. I've included my code below. I've set it up according to the CKEditor advanced setup, first option, made in Webpack.
Am I missing something, or is there a problem in my code?
index.js
import ClassicEditor from './ckeditor'; // ckeditor.js in the same folder
import ModelElement from '#ckeditor/ckeditor5-engine/src/model/element';
require("./css/index.css");
ClassicEditor
// Note that you do not have to specify the plugin and toolbar configuration — using defaults from the build.
.create( document.querySelector( '#editor' ))
.then( editor => {
editor.commands.get( 'imageStyle' ).on( 'execute', ( evt, args ) => {
// ...
// this snippet of code works; it concerns hooking into the default image plugin
// ...
} );
} )
.catch( error => {
console.error( error.stack );
} );
ckeditor.js
import ClassicEditorBase from '#ckeditor/ckeditor5-editor-classic/src/classiceditor';
import EssentialsPlugin from '#ckeditor/ckeditor5-essentials/src/essentials';
import UploadAdapterPlugin from '#ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import AutoformatPlugin from '#ckeditor/ckeditor5-autoformat/src/autoformat';
import BoldPlugin from '#ckeditor/ckeditor5-basic-styles/src/bold';
import ItalicPlugin from '#ckeditor/ckeditor5-basic-styles/src/italic';
import ImagePlugin from '#ckeditor/ckeditor5-image/src/image';
import ImageCaptionPlugin from '#ckeditor/ckeditor5-image/src/imagecaption';
import ImageStylePlugin from '#ckeditor/ckeditor5-image/src/imagestyle';
import ImageToolbarPlugin from '#ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageUploadPlugin from '#ckeditor/ckeditor5-image/src/imageupload';
import LinkPlugin from '#ckeditor/ckeditor5-link/src/link';
import ListPlugin from '#ckeditor/ckeditor5-list/src/list';
import ParagraphPlugin from '#ckeditor/ckeditor5-paragraph/src/paragraph';
import Highlight from '#ckeditor/ckeditor5-highlight/src/highlight';
import MediaEmbed from '#ckeditor/ckeditor5-media-embed/src/mediaembed';
import Table from '#ckeditor/ckeditor5-table/src/table';
import TableToolbar from '#ckeditor/ckeditor5-table/src/tabletoolbar';
import ImageLibrary from './js/image-library.js'; // file containing the code for my custom plugin
export default class ClassicEditor extends ClassicEditorBase {}
ClassicEditor.builtinPlugins = [
EssentialsPlugin,
UploadAdapterPlugin,
AutoformatPlugin,
BoldPlugin,
ItalicPlugin,
Highlight,
MediaEmbed,
Table,
TableToolbar,
ImagePlugin,
ImageCaptionPlugin,
ImageStylePlugin,
ImageToolbarPlugin,
ImageUploadPlugin,
LinkPlugin,
ListPlugin,
ParagraphPlugin,
ImageLibrary // my custom plugin
];
ClassicEditor.defaultConfig = {
highlight: {
options: [
{
model: 'redPen',
class: 'pen-red',
title: 'Red pen',
color: '#DD3300',
type: 'pen'
},
{
model: 'bluePen',
class: 'pen-blue',
title: 'Blue pen',
color: '#0066EE',
type: 'pen'
},
{
model: 'greenPen',
class: 'pen-green',
title: 'Green pen',
color: '#22AA22',
type: 'pen'
}
]
},
toolbar: {
items: [
//'heading',
//'|',
'bold',
'italic',
'link',
'highlight:redPen', 'highlight:greenPen', 'highlight:bluePen', 'removeHighlight',
'|',
'bulletedList',
'numberedList',
'|',
'mediaembed',
'inserttable',
'|',
'undo',
'redo'
]
},
image: {
toolbar: [
'imageStyle:full',
'imageStyle:alignCenter',
'|',
'imageTextAlternative'
],
styles: [
'full','alignCenter'
]
},
table : {
contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
},
language: 'nl'
};
image-library.js
import Plugin from '#ckeditor/ckeditor5-core/src/plugin';
import ModelElement from '#ckeditor/ckeditor5-engine/src/model/element';
import Command from '#ckeditor/ckeditor5-core/src/command';
class RoodCMSImageCommand extends Command {
static get requires() {
return [ ModelElement ];
}
execute( message ) {
console.log(message);
}
}
class ImageLibrary extends Plugin {
static get requires() {
return [ ModelElement ];
}
static get pluginName() {
return 'ImageLibrary';
}
init() {
// Initialize your plugin here.
const editor = this.editor;
console.log("plugin initialized.",editor);
}
}
Update: solution based on Maciej Bukowski's answer
Maciej pointed out that the class ImageLibrary (which I tried to import) lacked the export. Something that I've easily missed, was that whenever you're importing something, you're going to have to also export it, otherwise it won't be available. The keywords export default did the trick for me.
The culprit was in image-library.js, for which I change the following line:
class ImageLibrary extends Plugin {
// ... this failed, as it missed the `export default` keywords
}
Into the following:
export default class ImageLibrary extends Plugin {
// ... works, as I properly export what I want to import.
}

import ImageLibrary from './js/image-library.js';
You don't export that library from a file, so that's why you have an error Cannot read property 'pluginName' of undefined. The ImageLibrary in the ckeditor.js becomes the undefined as it's can't be found in the image-library file.