I have made an initial custom plugin for CKEditor, but it's not obvious from the CKEditor documentation what is the best way to structure a custom plugin project or how to add unit tests.
I want to set up the project so that it follows good practices (like Test Driven Development) as I keep developing it, and possibly add it into a CI/CD pipeline.
Current setup
My custom plugin adds subject tags for the topic of a sentence.
I based it on the inline widget tutorial (which creates a Classic Editor v29 application with a local custom plugin added in) - https://ckeditor.com/docs/ckeditor5/latest/framework/guides/tutorials/implementing-an-inline-widget.html
|---app.js
|---index.html
|---node_modules/
|---package.json
|---subject/
|---|---subject.js
|---|---subjectcommand.js
|---|---subjectediting.js
|---|---subjectui.js
|---webpack.config.js
Test suite
The CKEditor Testing Environment documentation says that the #ckeditor/ckeditor5-dev-tests package can be used outside ckeditor5 - https://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/testing-environment.html
So I rearranged the plugin directories to separate out src and tests:
|---app.js
|---index.html
|---node_modules/
|---package.json
|---subject/
|---|---src/
|---|---|---subject.js
|---|---|---subjectcommand.js
|---|---|---subjectediting.js
|---|---|---subjectui.js
|---|---tests/
|---|---|---subject.js
|---webpack.config.js
Then ran the test suite:
node ./node_modules/.bin/ckeditor5-dev-tests --files=*
But it looks like the ckeditor5-dev-tests package might only test plugins that are part of the CKEditor software (e.g. when you are contributing to the CKEditor project itself). All the --files option glob conversions map to node_modules/ckeditor5-* See: https://github.com/ckeditor/ckeditor5-dev/tree/master/packages/ckeditor5-dev-tests#rules-for-converting---files-option-to-glob-pattern
Question
I'm not sure if I'm using the testing suite wrong, or if I am taking the wrong approach in the project structure - maybe the project should just be for the plugin by itself (without app.js, etc.), then add it to the Classic Editor later somehow?
Related
I'm essentially just remixing the code available here for a side project: https://github.com/aws-samples/aws-ai-qna-bot.git
Problem: I'm trying to insert a centered logo in the toolbar between the app drawer and the logout button. Typically I could accomplish this pretty easily with vanilla HTML and CSS, but this project is leveraging Vue.js and Vuetify, which I'm doing my best to get myself up to speed with.
I've referenced the following documents, including the README.md in the git repo:
https://vuetifyjs.com/en/components/images
https://v2.vuejs.org/v2/guide/single-file-components.html
File path: qna-bot-template/website/js/admin.vue
<template lang="pug">
v-app
v-navigation-drawer(temporary v-model="drawer" app)
v-toolbar(flat)
v-list
v-list-tile
v-list-tile-title.title Tools
v-divider
v-list(dense three-line subheader)
v-list-tile(v-for="(page,key) in pages" :key="key"
#click="drawer=false"
:href="page.href"
:id="'page-link-'+page.id"
:target="page.target || '_self'")
v-list-tile-avatar
v-icon(color="primary") {{page.icon}}
v-list-tile-content
v-list-tile-title {{page.title}}
v-list-tile-sub-title {{page.subTitle}}
v-list-group( prepend-icon="info" value="true" color="primary")
v-list-tile(slot="activator")
v-list-tile-title QnABot Help
v-list-tile
v-list-tile-content
v-list-tile-title Version: {{Version}}
v-list-tile-title BuildDate: {{BuildDate}}
v-list-tile
v-list-tile-content
v-list-tile-title
a(href="https://amazon.com/qnabot" target="_blank") General Instructions / QnABot Blog Post
v-list-tile-title
a(href="https://aws.amazon.com/blogs/machine-learning/creating-virtual-guided-navigation-using-a-question-and-answer-bot-with-amazon-lex-and-amazon-alexa/" target="_blank") Guided Navigation using QnABot
v-list-tile-title
a(href="https://aws.amazon.com/blogs/machine-learning/create-a-questionnaire-bot-with-amazon-lex-and-amazon-alexa/" target="_blank") Create a questionnaire using QnABot
v-toolbar(app fixed)
v-toolbar-side-icon.primary--text(
id="nav-open"
#click.stop="drawer = !drawer"
)
v-toolbar-title
v-breadcrumbs
v-breadcrumbs-item(href='#/edit') {{$store.state.info.StackName}}:{{$store.state.user.name}}
v-breadcrumbs-item {{page}}
v-spacer
v-toolbar-items
v-btn.primary--text(flat
id="logout-button"
#click="logout"
v-if="login") LogOut
v-container(fluid id="workspace")
v-layout(column)
v-flex
router-view
v-footer
</template>
So far I've tried following the following syntax, which I added right after the v-spacer toward the bottom of the wrapping template tags.
v-container
v-img(:src="/abc/xyz")
and this doesn't seem to be working.
Lastly I'll add that since this environment is deployed to an EC2 instance (don't think you can deploy it locally to prototype via vue serve or at least I haven't been able to), I'm having to do this very roundabout way of prototyping by deploying this S3 bucket where the webpages are built to, then I make this webpack listener which will see whenever I modify a file. Then I can refresh the index.html that is built in the S3 bucket to see my changes. Extremely clunky workflow, I know, but I've never worked in an environment like this so I'm not sure if there's a better way, plus the readme provided in the github repo is very light on details for how to modify the default layout.
Any help/pointers would be greatly appreciated.
If you are using a relative path to an image use v-img(src="/abc/xyz"). The ':' before src is shorthand for v-bind which you use for data-binding. So if your image path was dynamically generated you'd use :src="dynamicImage"' but if you are hard coding the path use src="/pathto/image.jpg". This might help.
i'm developing my first Angular2 app and i'm using this folders structure:
components
component1
home.component.ts
home.component.html
home.component.scss
I'm using Gulp to run tasks for building the app. The final folders structure will be this one:
scripts
somefile1.js
somefile2.js
...
styles
mine.css
vendor.css
index.html
favicon.ico
Can you tell me what is the best way to incorporate HTML templates within Javascript files?
Besides i would be able to easily debug code, so i would see the original folders structure in browser's inspection tools.
I'm currently using gulp-sourcemaps plugin and sourceMap option set to true for Typescript compiler to do the same for Styles and Scripts.
What node plugins could i use to reach this purpose for HTML templates?
I've used gulp-angular-embed-templates on multiple projects with great success.
Here is an example task:
gulp.task('embed-templates', () => {
gulp.src('app/**/**.js')
.pipe(embedTemplates({sourceType:'js', minimize: {quotes: true, empty: true}}))
.pipe(gulp.dest('app/'));
});
I am trying to write unit test which suppose to access DOM, something simple like check if element exists.
I have created separte Test project, added QUnit for ASP.net MVC from Nuget and Script# Unit testing helpers. Added a reference to my Script# project.
I guess that I should run something like
WebTest web = new WebTest();
web.StartWebServer("/", 10258);
Uri testUri = web.GetTestUri("/Test.html");
WebTestResult ieResult = web.RunTest(testUri, WebBrowser.InternetExplorer);
web.StopWebServer();
But not sure where my Test.html should be and how I can run my [TestMethod] in the Test.html context. How I can dinamicaly create elements in Test.html?
Test.html should be a simple HTML file in your solution. Your test method is simply running IE and going to this page to run all the tests. You dynamically create new elements depending on how you layout the HTML.
See this sample (amongst others) at https://github.com/nikhilk/scriptsharp/tree/cc/samples/Photos/PhotoListTests
See the sample for how it sets up the root path for the server.
One thing to check for is that you've marked the build action for Test.html as Content so it gets copied over as part of building the test project.
Hope that helps.
I'm working on a project consisting of two Eclipse plugin projects. One is an EMF project and contains the metamodel for the application. The other one is the acctual plugin working on that metamodel.
I'm now looking for a way to list all types of models available in the metamodel project. Since I basically need all generated classes I could use reflections to iterate through the metamodel package but I'd prefer an easier way if there is one.
The models are already listed as extensions in the plugin.xml like this:
<plugin>
<extension point="org.eclipse.emf.ecore.generated_package">
<package
uri="MyModel"
class="org.myproject.metamodel.MyModel.MyModelPackage"
genModel="model/MetaModel.genmodel"/>
</extension>
</plugin>
where the class MyModelPackage extends EPackage and org.myproject.metamodel.MyModel also contains all the other generated classes I need to list. I'm guessing that I can use that information but I still don't know how.
Update
The project I'm working on is based on EMFStore. Running it offers the EMFStore perspective. If I have the Navigator view with a project I can right click on that project and select New Model Element. This opens a dialog where all the model elements from my metamodel are listed so it is possible. It must be done somewhere in EMFStore or one of it's dependencies. I looked through the source code but can't seem to find where it's done.
The plugin.xml of the project org.eclipse.emf.emfstore.perspective refers to the class org.eclipse.emf.emfstore.emfperspective.EMFStorePerspective which I can't find in the sources. I imported the project via the Eclipse Import Plug-Ins and Fragments functionality and it has no source folder. In the EMFStore git repositories I can't even find that project.
Update
I now got the registry that contains the generated packages using EPackage.Registry.INSTANCE. Unfortunately it contains more than the EPackages from the one project containing the metadata (org.myproject.metamodel). Now I'm just looking for a proper way to filter it, but still can't get the hang of it.
Update
As the filtering is not part of my original question I accepted the answer by #SpaceTrucker. For those who are curious, this is how I've done it now:
Registry registry = EPackage.Registry.INSTANCE;
for (String key : new HashSet<String>(registry.keySet())) {
EPackage ePackage = registry.getEPackage(key);
if (ePackage.getClass().getName().startsWith("org.myproject.metamodel")) {
//do stuf
}
}
I found no way to filter for the project but luckily all the packages start with the same prefix.
EPackages may be registered via an EPackage.Registry. There seems to be a globally used instance available via ECorePlugin.getDefaultRegistryImplementation(). However I'm not 100% sure on that.
MoDisco comes with a EMF Model Browser, where you are also able to select any registered EMF model. So you also could have a look at those sources.
we are planing to create a CMS with zf2 and doctrine orm .
actually we are concern about our cms templating
we want our system works with several templates and easily change between themes via admin
and creating a new templates should be easy for end-users developers
we want an advice or suggest for how to build templating system that :
there is a core module and there a lot sub modules with their own phtml
so where to store theme1 phtml and where to store theme2 phtmls ...
any suggest or advice please
thanks
I encourage you to take a look at Twig, its the best template engine I have seen so far :) It does take some time to learn Twig syntax, but its well worthy if you look at what you get :)
I cant yet write comments, so I wrote this as an answare.
Hope this helps. Trust me, the Twig is the way to go. Joust look at his documentation for more specific details how to use it!
EDIT:
The problem you are trying to solve has nothing to do with template engine. You can do that with any template engine. You can do it even with plain PHP if you want.
I built web application where users can register, get their own sub domain, and there they can build their webpage. Change theme, edit text, add pages. Simple CMS functionality.
The easiest way to do this is to have themes folder, where you would store themes, like this:
themes/
- themeBlue
- css/
- images/
- js/
- html or views/
- themeRose
...
Now this is where you would place all your themes, every theme has its own folder with images, css, js files...
And then you would have users, and every user would be able to choose and change theme.
That information would be stored in database. You need to store that user Jack is using themeBlue. You can do that as you want. You can event put this in users table like user_theme column.
Now when someone visits site, you first query database to see what theme is that user or creator of web using. And then you load all that files from current theme folder. And populate html files with data stored in database like in any other CMS.
This is the simplest implementation. You could for example, store css and html files in database :)
Hope this answers your question.
Good luck with that, I almost gone mad building my system :) I ended up with writing my own PHP MVC Framework joust to accomplish what I wanted.
if you activate another module in the application.config.php which has the same views and layouts (same folder structure and filenames) it's viewscripts and layouts will automatically be used when it's loaded after your core module.
so you could simply make your application.config.php dynamic to load the active template module which only contains the view folder. this would be a simple and effective solution without any other libraries.
additionally you can use an asset manager like assetic to also provide images, css etc. inside of your (template-)modules. (have a look at zf2-assetic-module, I wrote my own assetize-module based on assetic to fit my needs...)
Sina,
I do this in my Application->Module.php onBootstrap
$ss = $serviceManager->get('application_settings_service');
$settings = $ss->loadSettings();
$serviceManager->get('translator');
$templatePathResolver = $serviceManager->get('Zend\View\Resolver\TemplatePathStack');
$templatePathResolver->setPaths(array(__DIR__ . '/view/'.$settings['theme'])); // here is your skin name
$viewModel = $application->getMvcEvent()->getViewModel();
$viewModel->themeurl = 'theme/'.$settings['theme'].'/';
In this situation I have this structure in my view folder
view/
default/
application/
error/
layout/
zfcuser/
red/
application/
error/
layout/
zfcuser/
The $viewmodel above injects a variable into the layout for the themeurl in the public_html folder /theme/red/ with all assets for red
Access in layout.phtml -> themeurl;?> in a viewscript layout()->themeurl;?>
I am still working out my Dynamic Views. Right now I have a BaseController and all my ActionControllers extend it. It has a render() function that builds the required views but not sure its going to be scalable hoping to try some placeholder ideas.
application_settings_service is a Settings Service that gets settings for whatever domain was used to call the system and builds an array accessible via any service aware part of the site. Thats a whole different post and it may or may not rub MVC peeps the wrong way
I know your question is marked answered just thought I would share
Eric