We Keep Coding

Prettier - Config for HTML and JS

I want to specify string lengths for HTML and JS in one config file .prettierrc.
module.exports = {
singleQuote: true,
printWidth: 80,
[HTML]: {
printWidth: 150,
},
};
But in log i got:
ReferenceError: HTML is not defined

You should be using the .prettierrc format instead, visual studio code will also provide intellisense when you use this format.
You are getting the error because:
The file needs to be in the JSON format,
Any overrides need to be specified under the overrides JSON key
In your case the file should look like this:
.prettierrc
{
"singleQuote": true,
"printWidth": 80,
"overrides": [
{
"files": ["**/*.html"],
"options": {
"printWidth": 150
}
}
]
}

Plugins in IBM/HCL Connections 5 CR6 with TinyMCE editor

I installed the TinyMCE editor on a vanilla Connections 5 CR6 installation and now want to add plugins. HCL told us that we have the pro version of TinyMCE licenced together with Connections. One example of the pro-plugins is the checklist, which I want to install.
So I add the plugin-files of the checklist as well as the lists (required as dependency) in the externalPlugins array of the config.js file:
externalPlugins: [
{
name: "checklist",
url: pluginBaseDir + "checklist/plugin.min.js",
off: []
},{
name: "lists",
url: pluginBaseDir + "lists/plugin.min.js",
off: []
}
]
and added checklist to the toolbar:
toolbar: [
"undo",
{
label: "group.insert",
items: [
{
id: "insert",
label: "menu.insert",
items: [
[
"checklist",
"link",
"conn-insert",
"bookmark",
"media",
"pageembed",
"table",
"codesample"
],
[
"specialchar",
"hr"
]
]
}
]
},
"style",
"emphasis",
"align",
"listindent",
"format",
[
"conn-other",
"conn-emoticons",
"conn-macros"
],
"language",
"tools"
]
Where pluginBaseDir is set to /connections/resources/web/tiny.editors.connections/tinymce/plugins/. The requested JS files are accessable, I verified this using curl.
But the button isn't shown. I tried
Adding the checklist in the first level
toolbar: [
"checklist",
"undo"
// ...
Adding tmce prefix
Read about this in the example config.js file:
toolbar: [
"tmce-checklist",
"undo"
// ...
Testing procedure
After each change on config.js, I restart the Common application by stopping and starting them using jython wsadmin script. This works, which could be easily verified using the postCreateTextboxio method, which can be included in the config object:
postCreateTextboxio: function(editor) {
console.log("custom.js revision #2");
}
So I got the console output after re-starting the Common application.

The plugin was loaded, with could be verified in the browser console:
> tinyMCE.editors[0].settings.plugins.indexOf('toc')
319
Ephox caused the problem: While adding the plugin directly works with the original TinyMCE, we have Ephox in HCL Connections. It acts as a middleware to have a shared configuration file between multiple editors supported by Connections (TinyMCE, Textbox.io and CKEditor).
With Ephox, we need to prefix plugin names with tmce- when referencing in the toolbar:
{
label: "Test",
items: ["table", "tmce-toc"]
}

The checklist plugin is already included with the Tiny Editors for Connections integration so you can leave off the externalPlugins entry but it is not included in the default toolbar because it requires additional CSS.
Currently the checklist plugin does not register a menu item so it can not be added to the insert menu, however you can add it to the toolbar with the following config:
toolbar: [
"undo",
{
label: "group.insert",
items: [
{
id: "insert",
label: "menu.insert",
items: [
[
"link",
"conn-insert",
"bookmark",
"media",
"pageembed",
"table",
"codesample"
],
[
"specialchar",
"hr"
]
]
}
]
},
"style",
"emphasis",
"align",
[
"checklist"
],
"listindent",
"format",
[
"conn-other",
"conn-emoticons",
"conn-macros"
],
"language",
"tools"
]
The reason why you could not add checklist at the first level is that all first level items are groups of toolbar items. You can create an anonymous group with the square brackets. Note that this syntax was chosen because it was backwards compatible with Textbox.io and changing it to be TinyMCE specific would break the configuration for our pre-existing customers.
Once you have the checklist plugin button showing you need to add the CSS it uses to connections so that it will render.
.tox-checklist > li:not(.tox-checklist--hidden) {
list-style: none;
margin: .25em 0;
position: relative;
}
.tox-checklist > li:not(.tox-checklist--hidden)::before {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
background-size: 100%;
content: '';
cursor: pointer;
height: 1em;
left: -1.5em;
position: absolute;
top: .125em;
width: 1em;
}
.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
}
CSS required for checklist plugin
How to add CSS to Connections
We are currently working on a shim for the checklist plugin to allow it to work in Connections without requiring the global CSS change and to work better in the activity stream where styles and classes are stripped. I expect this will be in the 4.2.0 release.

Save spreadsheet to folder with sheets api v4

Here's the link to the api: https://developers.google.com/sheets/api/reference/rest/
I'm trying to figure out how to save this spreadsheet to a folder in google drive. The only thing I've found is this: (https://developers.google.com/sheets/api/reference/rest/v4/spreadsheets.sheets/copyTo)
The problem is, I get errors when I do "destinationSpreadsheetId": folder id inside the properties. So I'm not sure if that is the right way to do it or if there even is a way to create a new spreadsheet into a folder using sheets api v4.
Sheets.Spreadsheets.create({
"sheets": [
{
"properties": {
"gridProperties": {
"rowCount": 1,
"columnCount": 3
}
},
"data": [
{
"rowData": [
{
"values": [
{
"userEnteredValue": {"stringValue": "one"}
},
{
"userEnteredValue": {"stringValue": "two"}
},
{
"userEnteredValue": {"stringValue": "three"}
}
]
}
]
}
]
}
],
"properties": {
"title": name
}
});
Also, how would I get a spreadsheets id by a name being passed into a function?
function getSpreadsheetId(name)
{
//get file 'name' id from folder
}

Use ESLint with Airbnb style and tab (React.js)

I'm working on a React.js application and I'm trying to lint my code. I use ESLint with the Airbnb style, but I have these errors:
../src/Test.jsx
4:2 error Unexpected tab character no-tabs
5:2 error Unexpected tab character no-tabs
5:3 error Expected indentation of 2 space characters but found 0 react/jsx-indent
6:2 error Unexpected tab character no-tabs
Here my code:
Test.jsx:
import React from 'react';
function Test() {
return (
<h1>Test</h1>
);
}
export default Test;
.eslintrc:
{
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": "airbnb",
"parser": "babel-eslint",
"rules": {
"indent": [2, "tab", { "SwitchCase": 1, "VariableDeclarator": 1 }],
"react/prop-types": 0,
"react/jsx-indent-props": [2, "tab"],
}
}
As you can see above, I would like to indent with tab.
webpack.config.js:
loaders: [{
test: /\.jsx$|\.js$/,
loaders: ["babel-loader", "eslint-loader"],
exclude: /node_modules/
},
...
]
I also tried to indent why 2 spaces, without success. I really don't understand why I have theses errors. Do you have an idea?
Thanks!

As #mark-willian told me, I added some lines in my .eslintrc and it works:
{
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": "airbnb",
"parser": "babel-eslint",
"rules": {
"indent": [2, "tab", { "SwitchCase": 1, "VariableDeclarator": 1 }],
"no-tabs": 0,
"react/prop-types": 0,
"react/jsx-indent": [2, "tab"],
"react/jsx-indent-props": [2, "tab"],
}
}
Thank you for all of your answers.

The airbnb rules want you to use spaces instead of tabs for formatting your code. Good editors (sublime is one!) will let you use tabs but translate them to spaces when saving your code.
You need to change the config of your sublime; go to Preferences-Settings and customize the following settings:
"tab_size": 2,
"translate_tabs_to_spaces": true
Sublime will convert your existing code - click on the text in the status bar at the bottom right that says tabs or spaces.
You can selectively turn off eslint rules if (for example) one of airbnb's rules doesn't match your coding style guide.

Try replace every tab to spaces.
It is also a good idea to enable the ESLint autofix feature with this eslint-loader option in your webpack configuration.

You can add this comment on page which you get no-tabs error.
/* eslint-disable */

How to exclude files from Dojo's Build System?

I'm following the official documentation page about the topic but I cannot configure it to ignore .txt files.
I have a all.profile.js on the root of my project:
var profile = (function(){
return {
basePath: "./",
releaseDir: "../web",
action: "release",
layerOptimize: "closure",
optimize: "closure",
cssOptimize: "comments",
mini: true,
stripConsole: "all",
packages: [
{ name: "myapp", location: "myapp" }
]
};
})();
And this is the package.json inside the folder myapp:
{
"dojoBuild": "myapp.profile.js",
"name": "my-app",
"description": "This is My App",
"version": "1.0",
"main": "src"
}
And this is the myapp.profile.js also inside the folder myapp:
var profile = (function(){
return {
// don't need to do anything on the 'test' folder so don't define it on the trees.
trees: [
["libs","libs",/txt$/], // ignore .txt files -> DOESN'T WORK!
["src","src",/txt$/] // ignore .txt files -> DOESN'T WORK!
],
resourceTags: {
test: function(filename, mid){
console.log("[test] filename: ",filename);
return filename.indexOf("test/") !== -1;
},
copyOnly: function(filename, mid){
//console.log("[copyOnly] mid: ",mid);
return false;
},
miniExclude: function (filename, mid) {
console.log("[miniExclude] filename: ",filename);
return mid in {
'myapp/myapp.profile': 1,
'myapp/package.json': 2
} || mid.indexOf(".txt") !== -1; // .txt are not ignored so exclude them...
},
amd: function(filename, mid) {
//console.log("[amd] mid: ",mid);
// myapp is not AMD but this will 'convert' it
return false;
}
}
};
})();
Finally, this is the folder structure:
web_dev/
-- myapp/
---- libs/
---- src/
---- test/
---- myapp.profile.js
---- package.json
-- all.profile.js
The build tool runs fine, it reads and process all files but the .txt files are still on the release dir.
Please let me know if you spot any mistakes on my logic or how I'm configuring the build system. I'm using Dojo 1.9.1.
Thanks in advance.

I'm not sure what is wrong with my initial scenario but here are the changes that I made to have the desired result:
Move the trees declaration from the myapp.profile.js to
all.profile.js inside the 'myapp' package definition.
Instead of specifying the root of the trees, check
everything and exclude accordingly: [".", ".",
/(\/\.)|(~$)|(test|txt)/]
The final all.profile.js:
var profile = {
basePath: "./",
releaseDir: "../web",
releaseName: "built",
action: "release",
layerOptimize: "closure",
optimize: "closure",
cssOptimize: "comments",
mini: true,
stripConsole: "all",
packages: [
{
name: "myapp",
location: "myapp",
trees: [
// don't bother with .hidden, tests and txt.
[".", ".", /(\/\.)|(~$)|(test|txt)/]
]
}
]
};
If anyone can pin point exactly what I was doing wrong, please share.