How to install plugins in CKEditor 5? - ckeditor5

I install CKEditor 5 in my project by npm:
npm install --save #ckeditor/ckeditor5-build-classic
Then i follow the Doc to install some plugins eg : alignment
See the Alignment plugins install Doc
npm install --save #ckeditor/ckeditor5-alignment
And i change my code like this:
import Alignment from '#ckeditor/ckeditor5-alignment/src/alignment';
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ Alignment],
toolbar: [ 'alignmentDropdown']
} )
.then( ... )
.catch( ... );
Then something went wrong:
Failed to compile.
./node_modules/#ckeditor/ckeditor5-alignment/src/alignmentui.js
Module not found: Error: Can't resolve '#ckeditor/ckeditor5-ui/src/dropdown/button/createbuttondropdown' in '/Users/wangyao/project/katabat-demo/ckeditor5/node_modules/#ckeditor/ckeditor5-alignment/src'
I think it is because of the version,
On the official website,i saw the ckeditor5-build-classic version info :
And the the plugin Alignment version info :
Am I doing this wrong?
is CKEditor 5 incomplete because of the alpha version ?
It is appropriate to use CKEditor 5 in alpha version ?

EDIT (19.09.2018): The text alignment, table, highlight and font size/family features are all available for installation. The situation about which #KingOfSocket asked was a temporary situation when some of these plugins were under development. Check out those feature guides to learn how to install them.
OUTDATED: You were unfortunate to find the alignment feature before its first official release. It doesn't work because the 0.0.1 version is published only to satisfy our development environment's requirement that a package we work on is on npm (actually, this is Lerna's requirement).
The first working version of the alignment feature will be released together with CKEditor 5's 1.0.0-beta (within a ~month). For now, you can find its demo in the nightly docs (see Text alignment). You can also try to build the editor with it, but you will need to set up the CKEditor 5's development environemnt.

Related

Module not found: Error: Can't resolve '#heroicons/vue/24/outline'

I get the error message as soon as I add this reference in my vue component:
<script setup>
import { ExclamationTriangleIcon, XMarkIcon } from '#heroicons/vue/24/outline'
I am using tailwindcss 3.1.8.
I have executed this:
npm install #headlessui/vue #heroicons/vue
I have version 1.0.6 of heroicons installed. Why is the icon not found?
Looks like heroicons 1.0.6 is outdated. Had to get version 2.0.* by calling
npm install #heroicons/vue#latest
Import of icons had to be changed from '#heroicons/vue/**' to '#heroicons/vue/24/*'
I also had to switch some old icons with new ones, as they may have been renamed or removed. New Icons may be found at https://unpkg.com/browse/#heroicons/vue#2.0.10/24/outline/ (the page https://vue-hero-icons.netlify.app/ does not work as it still contains old ones)

changing vue version inside a project

Hi I would like to change a projects version of Vue using npm.
I tried :
npm install vue#latest --save
But when I tried :
npm v vue
I got the following :
vue#2.6.14 | MIT | deps: none | versions: 362
Reactive, component-oriented view layer for modern web interfaces.
https://github.com/vuejs/vue#readme
keywords: vue
dist
.tarball: https://registry.npmjs.org/vue/-/vue-2.6.14.tgz
.shasum: e51aa5250250d569a3fbad3a8a5a687d6036e235
.integrity: sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==
.unpackedSize: 3.0 MB
maintainers:
- posva <posva13#gmail.com>
- yyx990803 <yyx990803#gmail.com>
dist-tags:
beta: 3.2.0-beta.8
csp: 1.0.28-csp
latest: 2.6.14
next: 3.2.23
published 5 months ago by posva <posva13#gmail.com>
Indicating that I still was on Vue 2.6.14.
Does anyone know how to solve this problem.
Well if you check the #latest tag on the versions tab on npm the latest version is really 2.6.14.
To use a Vue 3, you need to use a #next tag instead. But that version is not 100% compatible with 2.x so please check the migration guide before doing so (also lot of tooling is not compatible as well and because JS projects usually involve "a lot" of tooling, migration might be not that simple)

React native Fabric autolink error with react 60.0 and above

I have upgraded to my app to react-native 60.4 which support Autolinking all packages so that you dont have to manually go about setting things up and thus lowers the chances of error.
The problem is most of the packages have still not gotten compatible with this process and henceforth the app completely breaks.
my error is with https://github.com/corymsmith/react-native-fabric
referring to an issue on the repo for the same -> https://github.com/corymsmith/react-native-fabric/issues/225, which still remains unanswered.
I started giving it a try by forking the repo and understanding the auto link process given by react native.
In the package.json of the node_module package i replaced
"rnpm": {
"android": {
"packageInstance": "new FabricPackage()"
}
},
with file in the package root react-native.config.js
module.exports = {
dependencies: {
'react-native-fabric': {
platforms: {
android: {
"packageImportPath": "import com.smixx.fabric.FabricPackage;",
"packageInstance": "new FabricPackage()"
}
}
}
}
};
I also updated the build gradle to 3.4.1 from 3.1.0
My react native app is able to now find the package.
But when i call the package in my react component i get NoClassDefFoundError, which means that class is not found.
Anybody else gave this a try and have a solution please let me know.
Try to unlink with react-native unlink and then re run your code again.
Putting it here from the above comment to make it more clear:
Ok i got this to work by changing the forked repo -> (adding a react-native.config.js in the root of the package with with auto discovery and link configurations), but i think the only scalable solution i see right now is to degrade to RN ^59.0 as not a lot of packages have auto link config changes. So will wait for RN 60.4 to mature and then upgrade to it in about a month. In addition to this fabric is currently migrating to firebase and plans to complete by year end. This mean that anyways the sdk integration is going to be obsolete and hence this package too.
Also this issue is majorly related to react-native-fabric and not RN itself.

Elm "cannot find module"

I'm fairly new in Elm. It's interesting to see a functional language which allows you to develop front-end stuff. Now even if I am following the steps described here nicely, I still have problems with modules.
The code is
module Main where
import Html exposing ( Html )
import Signal
main : Signal Html.Html
main = Html.text "This should work."
|> Signal.constant
I have used elm-reactor -a='localhost' to be able to view my output. But I am getting an error, that module 'HTML' cannot be found:
I cannot find find module 'Html'.
Module 'Main' is trying to import it.
Potential problems could be:
* Misspelled the module name
* Need to add a source directory or new dependency to elm-package.json
(note the double "find" hehe)
The fix suggestion didn't help me. Or it could be that I'm not understanding the use of the .json file correctly.
elm-package.json:
{
"version": "1.0.0",
"summary": "testing elm",
"license": "BSD3",
"source-directories": [
".",
"./bin/"
],
"exposed-modules": [],
"dependencies": {
"elm-lang/core": "3.0.0 <= v < 4.0.0"
},
"elm-version": "0.16.0 <= v < 0.17.0"
}
Here is a screenshot of my file tree.
Maybe it behaves differently than how Haskell is threatening the modules.
How can I solve this - eh simple? - problem.
Or is my elm-package.json just configured incorrectly?
Update for Elm 0.17
In 0.17, the Html package has been moved to elm-lang/html. Run the following command from the terminal to install it:
elm package install elm-lang/html
You should also remove the evancz/elm-html package from elm-package.json because it no longer exists as of 0.17.
For more information about the upgrading from 0.16 to 0.17, please see the 0.17 announcement.
Original Answer for Elm 0.16
Your elm-package.json configuration is missing the evancz/elm-html package, which exposes Html. You can use elm's package manager to install dependencies rather than editing elm-package.json directly.
From the terminal, type the following:
elm package install evancz/elm-html
You will also be prompted to install a few other missing dependencies required by evancz/elm-html. Running this command will update your elm-package.json file as well as pull down the missing packages from the internet and install them in the standard elm-stuff/packages directory.
More info on the elm-package tool can be found here.
You can browse elm packages online at package.elm-lang.org. The sidebar has a Popular Packages section which contains the evancz/elm-html package mentioned here.

Dotless failing to compile ; in Bootstrap 3 less source

I use dotless 1.3.1.0 compiling less-files. This worked fine with bootstrap 2.x, but after switching to bootstrap 3.0.0 (downloaded the source from here: http://getbootstrap.com/getting-started/), I suddenly get this error:
Expected ')' but found ' ' on line 47 in file 'mixins.less': [46]: //
Sizing shortcuts [47]: .size(#width; #height) {
------------^ [48]: width: #width;
Seems that having a ; as seperator between parameters is not valid less. The original source in the mixins.less looks like this:
...
// Sizing shortcuts
.size(#width; #height) {
width: #width;
height: #height;
}
...
Do I have to use an updated less compiler? Or did bootstrap release buggy less source?
UPDATE 1: I can see, that a pull request for dotless exists, fixing the problem with ;
https://github.com/dotless/dotless/pulls
"Fixes for ; not supported in mixin parameter lists #319 #320"
I will go using the css files until this has been fixed in dotless.
If you check out bootstrap's getting started page, you'll find that they state:
LESS compilation
If you download the original files, you need to compile Bootstrap's
LESS files into usable CSS. To do that, Bootstrap only officially
supports Recess, Twitter's CSS hinter built on top of less.js.
Though not using dotless, I followed a similar path that you did using lessc, and then found that using recess resolved my issue. Perhaps using recess would be an option for you too?
As an example, I have a file called tmpfl.less with the following contents:
#import "mixins.less";
#import "variables.less";
.wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}
If I run lessc on it, I get the following result:
lessc tmpfl.less
NameError: .size is undefined in mixins.less:47:0
46 // Sizing shortcuts
47 .size(#width; #height) {
48 width: #width;
Now, I successfully use recess as follows:
recess --compile tmpfl.less > tmpfl.css
Update:
In order to utilize Recess in a .Net environment, specifically in Visual Studio, one can follow these instructions for details on installing. Those instructions provide an overview, but perhaps leave out some details on getting Node.js installed. Microsoft has some brief words about it and they link to a GitHub project which might be helpful depending on your version of Visual Studio.
If you don't go down the Node.js-in-Visual Studio route, then really the main goal is to have Node.js installed somewhere, and then ultimately npm, the package manager for Node.js so you can install Recess. That can be achieved on Windows by going to the Node.js download, and installing the Windows version. Installing npm is highlighted in this stackoverflow discussion. Once installed, you just need to run npm to install Recess as follows:
npm install recess -g
That is also discussed in the first link of this update.
One of my colleagues that uses dotless has had a few fixes for Bootstrap 3 issues merged. Apparently Bootstrap3 will now compile with the latest code :)
https://github.com/dotless/dotless/commits/master
I expect an updated NuGet package will be available soon (based on this tweet)
After spending hours on getting this to work myself i found that dotless is quite useless at this time.
but here is where you can impliment Less and Bootstrap 3 Less in your mvc ASP.Net Project
http://www.tomdupont.net/2013/10/bootstrap-3-less-bundling-and-aspnet-mvc.html?showComment=1386250367416#c1439130135847828203
This guy just won an internets in my book and if you can track down his stack exchange account for me let me know.
I have put together an httphandler which will compile less using lessjs.
It's more of a proof of concept than production quality code, however it may be useful for some people as a starting point.
You can find the source here:
https://bitbucket.org/martinbooth/clearscriptless
In case anyone is interested in trying to do this using jurassic, you can find my attempt here:
https://bitbucket.org/martinbooth/jurassicless
I don't recommend Jurassic for this because
it required a few bug fixes to the library which are not currently
integrated into the main project My changes are now in the master branch of Jurassic so this is no longer an issue (though the latest release does not currently include them)
it is very slow, hence the
reason I tried clearscript