I can see that there is an defaultRefinement option on the react widget hierarchicalMenu, but I can't find it in the .js docs. Is there an equivalent in .js?
If not, is there a workaround?
instantsearch.widgets.hierarchicalMenu({
container: '#ais-filterCatMenu',
defaultRefinement: 'Sofa > Sovesofa',
attributes: [
'categories.lvl0',
'categories.lvl1',
],
...
}),
With Instantsearch.js you can define an initialUiState when initializing the search client.
https://www.algolia.com/doc/api-reference/widgets/instantsearch/js/#widget-param-initialuistate
const search = instantsearch({
// ...
initialUiState: {
indexName: {
query: 'phone',
page: 5,
},
},
});
I found the source of https://instantsearchjs.netlify.app/stories/?path=/story/refinements-hierarchicalmenu--with-default-selected-item on their github repo here
For example you can do something like this
const search = instantsearch({
indexName: 'instant_search',
searchClient,
initialUiState: {
instant_search: { //instant_search is index name
hierarchicalMenu: {
'hierarchicalCategories.lvl0': [
'Cell Phones > Cell Phone Accessories > Car Chargers',
],
},
},
},
});
search.addWidgets([
instantsearch.widgets.hierarchicalMenu({
container: '#hierarchical-menu',
attributes: [
'hierarchicalCategories.lvl0',
'hierarchicalCategories.lvl1',
'hierarchicalCategories.lvl2',
'hierarchicalCategories.lvl3',
],
}),
]);
which will end up looking like this. codesandbox demo
Related
I am trying to disable the advanced options of the table, cells and rows and I am applying the code according to the documentation but I am not getting results.
my code is as follows:
tinymce.init({
selector: '#mensaje',
height: 520,
language: 'es_MX',
menubar: false,
plugins: ['table', 'lists'],
toolbar: [
{ name: 'history', items: [ 'undo', 'redo' ] },
{ name: 'formatting', items: [ 'bold', 'italic', 'underline' ] },
{ name: 'alignment', items: [ 'alignleft', 'aligncenter', 'alignright', 'alignjustify' ] },
{ name: 'listas', items: [ 'bullist', 'numlist'] },
{ name: 'tablas', items: [ 'table' ] }
],
table_advtab: false,
table_cell_advtab: false,
table_row_advtab: false
});
Those options seem to work when I load your configuration into a TinyMCE Fiddle:
https://fiddle.tiny.cloud/htiaab
What is different in your environment?
I am trying to configure .babelrc for my react project but, cant make it work in IE11.
Can someone take a look at my configuration and see if there are things that I am missing, please?
[.babelrc]
{
"presets": [
"#babel/preset-env",
[
"#babel/preset-react",
{
"useBuiltIns": "usage",
"corejs": 3.26
}
]
],
"plugins": ["#babel/plugin-transform-runtime"]
}
[webpack.common.config.js]
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
module.exports = {
// Default. Can be erased for code simplification
entry: "./src/index.js",
output: {
filename: "[name].[contenthash].js",
path: path.resolve(__dirname, "dist"),
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /[\\/]node_modules[\\/]/,
use: {
loader: "babel-loader",
},
},
{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "src", "index.html"),
}),
new MiniCssExtractPlugin({
filename: "[name].[contenthash].css",
}),
],
};
I have tried a lot of things(workarounds), but nothing seems to work.
The order of presets, importing core-js at the top of index.js file...
I'm using Mui and Lodash in my CRA project with Storybook 5.
I successfully tree-shake both Mui and Lodash imports using babel-plugin-import in CRA, using the following .bablerc.js
module.exports = {
presets: ["react-app", "#babel/preset-typescript"],
plugins: [
[
"babel-plugin-import",
{
libraryName: "#material-ui/core",
libraryDirectory: "esm",
camel2DashComponentName: false,
},
"core",
],
[
"babel-plugin-import",
{
libraryName: "#material-ui/icons",
libraryDirectory: "esm",
camel2DashComponentName: false,
},
"icons",
],
["lodash"],
],
};
However I am unable to do the same in Storybook 5. When I try using the same config in Storybook (copying over to .storybook/.babelrc.js), the babel config gets loaded, but results in no improvement in Storybook load times (Mui icons still seem to be loading for about a minute). Removing the presets
from babel config doesn't help either.
Storybook is hosted in the same root directory as my CRA, sharing node_modules.
How can I get the import tree-shaking to work in Storybook 5?
Here are my configs:
// .storybook/presets.js
module.exports = ['#storybook/preset-create-react-app'];
// .storybook/webpack.config.js
module.exports = function({ config }) {
// https://github.com/storybookjs/storybook/issues/6974#issuecomment-499903328
config.module.rules.unshift({
test: /\.stories.js$|\.stories.jsx$|\.stories.tsx$|\.stories.ts$/,
loaders: [require.resolve('#storybook/source-loader')],
enforce: 'pre',
});
return config;
};
// .storybook/.babelrc.js
module.exports = {
presets: ["react-app", "#babel/preset-typescript"],
plugins: [
[
"babel-plugin-import",
{
libraryName: "#material-ui/core",
libraryDirectory: "esm",
camel2DashComponentName: false,
},
"core",
],
[
"babel-plugin-import",
{
libraryName: "#material-ui/icons",
libraryDirectory: "esm",
camel2DashComponentName: false,
},
"icons",
],
["lodash"],
],
};
// .storybook/config.js
iimport { addDecorator, addParameters, configure } from "#storybook/react";
import { withKnobs } from "#storybook/addon-knobs";
import { withConsole } from "#storybook/addon-console";
import { INITIAL_VIEWPORTS } from "#storybook/addon-viewport";
import "../src/config";
import withIntl from "./decorators/intl";
import withReduxStoreAndConnectedRouter from "./decorators/reduxStoreWithDependentProviders";
import stylesProvider from "./decorators/stylesProvider";
import setup from "./decorators/setup";
const req = require.context("../src", true, /stories.tsx$|stories.ts$/);
const loadStories = () => req.keys().forEach((filename) => req(filename));
addDecorator(setup);
addDecorator(stylesProvider);
addDecorator(withKnobs);
addDecorator(withIntl);
addDecorator(withReduxStoreAndConnectedRouter);
addDecorator((storyFn, context) =>
withConsole(consoleConfig)(storyFn)(context)
);
addParameters({
viewport: {
viewports: INITIAL_VIEWPORTS,
},
});
addParameters({
backgrounds: [
{ name: "darkGray", value: "#34373c" },
{ name: "gray", value: "#A0A0A0" },
{ name: "lightGray", value: "#F0F0F0" },
],
});
configure(loadStories, module);
I am using the ckeditor plugin and i need to replace the content with dynamic loaded options using placeholder, i have config.extraPlugins = 'placeholder'; in config.js and ckeditor/plugins/placeholder/plugin.js as follows:
'use strict';
CKEDITOR.dialog.add( 'placeholder', function( editor ) {
var lang = editor.lang.placeholder,
generalLabel = editor.lang.common.generalTab,
validNameRegex = /^[^\[\]<>]+$/;
return {
title: lang.title,
minWidth: 300,
minHeight: 80,
contents: [
{
id: 'info',
label: generalLabel,
title: generalLabel,
elements: [
// Dialog window UI elements.
{
id: 'name',
type: 'text',
style: 'width: 100%;',
label: lang.name,
'default': '',
required: true,
validate: CKEDITOR.dialog.validate.regex( validNameRegex, lang.invalidName ),
setup: function( widget ) {
this.setValue( widget.data.name );
},
commit: function( widget ) {
widget.setData( 'name', this.getValue() );
}
}
]
}
]
};
} );
I found this post that helped me atleast add static elements to a placeholder of type "Dropdown", Not sure if [enter link description here][1]
https://zolson.wordpress.com/2011/04/19/ckeditor-placeholder-select/
Can anybody tell me how can I use embedMedia plugin in ckeditor? I am using drupal 6 and WYSIWYG editor. I have added the folder into plugin folder. And added a line on config.js,
config.extraPlugins += (config.extraPlugins? ',MediaEmbed':
'MediaEmbed');
But I have not seen the option on my configuration. Am I doing anything wrong?
Thanks in advance
You need to add it to your config.toolbar_XXX setting in order to have it appear.
Look in your config.js file for something like:
config.toolbar_XXX
CKEDITOR.config.toolbar_XXX
The standard full toolbar config looks like this:
config.toolbar_Full =
[
{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',
'HiddenField' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-
','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];
You would need to add an entry for your plugin in the spot you want the button to appear. Check the plugin readme to see what the button should be called.
If you don't see this in your config.js file, you can add it there and insert the name of the button for the embedmedia plugin. It looks like the name of the button is "MediaEmbed", try adding it next to one of the current buttons (add 'MediaEmbed') and it should be visible in the toobar.
It might be helpful to take a look at the CKEditor docs to gain a better understanding of how the toolbar is customized:
CKEditor Toolbar