From 8fa0c84d1175dd7f5d40d22f074590d546e676c3 Mon Sep 17 00:00:00 2001 From: Niels Vandekeybus Date: Mon, 23 Apr 2018 11:20:13 +0200 Subject: [PATCH] initial blueprint for the editor-plugin generator --- .npmrc | 2 +- README.md | 27 ++-- .../editor-plugins/__name__-card.js | 54 ++++++++ .../services/rdfa-editor-__name__-plugin.js | 130 ++++++++++++++++++ .../editor-plugins/__name__-card.hbs | 10 ++ .../editor-plugins/__name__-card.js | 1 + .../services/rdfa-editor-__name__-plugin.js | 1 + .../index.js | 42 ++++++ blueprints/editor-plugin/index.js | 10 ++ index.js | 2 +- package.json | 2 +- 11 files changed, 270 insertions(+), 11 deletions(-) create mode 100644 blueprints/editor-plugin/files/addon/components/editor-plugins/__name__-card.js create mode 100644 blueprints/editor-plugin/files/addon/services/rdfa-editor-__name__-plugin.js create mode 100644 blueprints/editor-plugin/files/addon/templates/components/editor-plugins/__name__-card.hbs create mode 100644 blueprints/editor-plugin/files/app/components/editor-plugins/__name__-card.js create mode 100644 blueprints/editor-plugin/files/app/services/rdfa-editor-__name__-plugin.js create mode 100644 blueprints/editor-plugin/files/blueprints/@lblod/ember-rdfa-editor-__name__-plugin/index.js create mode 100644 blueprints/editor-plugin/index.js diff --git a/.npmrc b/.npmrc index 9cf9495..43c97e7 100644 --- a/.npmrc +++ b/.npmrc @@ -1 +1 @@ -package-lock=false \ No newline at end of file +package-lock=false diff --git a/README.md b/README.md index 7cf36f3..50ac40c 100644 --- a/README.md +++ b/README.md @@ -1,21 +1,32 @@ ember-rdfa-editor-plugin-generator ============================================================================== -[Short description of the addon.] - -Installation +Addon to simplify the creation of a plugin for [https://github.com/lblod/ember-rdfa-editor](ember-rdfa-editor). + +This package assumes you follow these conventions: + - package name: ember-rdfa-editor-*your-name*-plugin + - package scope: @lblod (to be added to your package name in `package.json` and `index.js`) + - no default blueprint has been defined (yet) in your plugin + +Usage: ------------------------------------------------------------------------------ - ``` -ember install ember-rdfa-editor-plugin-generator +#create an addon +ember addon ember-rdfa-editor-your-name-plugin +ember install @lblod/ember-rdfa-editor-plugin-generator +ember g editor-plugin your-name ``` +The following generated files should be modified to your liking: -Usage ------------------------------------------------------------------------------- +`blueprints/@lblod/ember-rdfa-editor-your-name-plugin/index.js` +This is a default blueprint which will add your plugin to the configured profile when it's installed -[Longer description of how to use the addon in apps.] +`addon/services/rdfa-editor-my-test-plugin.js` +The service providing hints to the editor, the execute task will be called when the content of the editor is updated. +`addon/components/editor-plugins/my-test-card.js` and `addon/templates/components/editor-plugins/my-test-card.hbs` +These components handle the display of hints and perform the necessary actions when they are triggered (eg applying the hint in the editor) Contributing ------------------------------------------------------------------------------ diff --git a/blueprints/editor-plugin/files/addon/components/editor-plugins/__name__-card.js b/blueprints/editor-plugin/files/addon/components/editor-plugins/__name__-card.js new file mode 100644 index 0000000..5b3f91c --- /dev/null +++ b/blueprints/editor-plugin/files/addon/components/editor-plugins/__name__-card.js @@ -0,0 +1,54 @@ +import { reads } from '@ember/object/computed'; +import Component from '@ember/component'; +import layout from '../../templates/components/editor-plugins/<%= dasherizedModuleName %>-card'; + +/** +* Card displaying a hint of the Date plugin +* +* @module editor-<%= dasherizedModuleName %>-plugin +* @class <%= classifiedModuleName %>Card +* @extends Ember.Component +*/ +export default Component.extend({ + layout, + + /** + * Region on which the card applies + * @property location + * @type [number,number] + * @private + */ + location: reads('info.location'), + + /** + * Unique identifier of the event in the hints registry + * @property hrId + * @type Object + * @private + */ + hrId: reads('info.hrId'), + + /** + * The RDFa editor instance + * @property editor + * @type RdfaEditor + * @private + */ + editor: reads('info.editor'), + + /** + * Hints registry storing the cards + * @property hintsRegistry + * @type HintsRegistry + * @private + */ + hintsRegistry: reads('info.hintsRegistry'), + + actions: { + insert(){ + let mappedLocation = this.get('hintsRegistry').updateLocationToCurrentIndex(this.get('hrId'), this.get('location')); + this.get('hintsRegistry').removeHintsAtLocation(this.get('location'), this.get('hrId'), 'editor-plugins/date-card'); + this.get('editor').replaceTextWithHTML(...mappedLocation, this.get('info').value); + } + } +}); diff --git a/blueprints/editor-plugin/files/addon/services/rdfa-editor-__name__-plugin.js b/blueprints/editor-plugin/files/addon/services/rdfa-editor-__name__-plugin.js new file mode 100644 index 0000000..3a4cae1 --- /dev/null +++ b/blueprints/editor-plugin/files/addon/services/rdfa-editor-__name__-plugin.js @@ -0,0 +1,130 @@ +import { getOwner } from '@ember/application'; +import Service from '@ember/service'; +import EmberObject, { computed } from '@ember/object'; +import moment from 'moment'; +import { task } from 'ember-concurrency'; + +/** + * Service responsible for correct annotation of dates + * + * @module editor-<%= dasherizedModuleName %>-plugin + * @class RdfaEditor<%= classifiedModuleName %>Plugin + * @constructor + * @extends EmberService + */ +const RdfaEditor<%= classifiedModuleName %>Plugin = Service.extend({ + + init(){ + this._super(...arguments); + const config = getOwner(this).resolveRegistration('config:environment'); + }, + + /** + * Restartable task to handle the incoming events from the editor dispatcher + * + * @method execute + * + * @param {string} hrId Unique identifier of the event in the hintsRegistry + * @param {Array} contexts RDFa contexts of the text snippets the event applies on + * @param {Object} hintsRegistry Registry of hints in the editor + * @param {Object} editor The RDFa editor instance + * + * @public + */ + execute: task(function * (hrId, contexts, hintsRegistry, editor) { + if (contexts.length === 0) return []; + + const hints = contexts.filter((context) => detectRelevantContext).forEach((context) => { + return generateHintsForContext(context); + }); + + + return hints.forEach( (hint) => generateCard(hint)); + }).restartable(), + + /** + * Given context object, tries to detect a context the plugin can work on + * + * @method detectRelevantContext + * + * @param {Object} context Text snippet at a specific location with an RDFa context + * + * @return {String} URI of context if found, else empty string. + * + * @private + */ + detectRelevantContext(context){ + return true; + }, + + + + /** + * Maps location of substring back within reference location + * + * @method normalizeLocation + * + * @param {[int,int]} [start, end] Location withing string + * @param {[int,int]} [start, end] reference location + * + * @return {[int,int]} [start, end] absolute location + * + * @private + */ + normalizeLocation(location, reference){ + return [location[0] + reference[0], location[1] + reference[0]]; + }, + + /** + * Generates a card given a hint + * + * @method generateCard + * + * @param {string} hrId Unique identifier of the event in the hintsRegistry + * @param {Object} rdfaAnnotation object + * @param {Object} hintsRegistry Registry of hints in the editor + * @param {Object} editor The RDFa editor instance + * @param {Object} hint containing the hinted string and the location of this string + * + * @return {Object} The card to hint for a given template + * + * @private + */ + generateCard(hrId, rdfaAnnotation, hintsRegistry, editor, hint){ + return EmberObject.create({ + info: { + label: this.get('who'), + plainValue: hint.text, + location: hint.location, + hrId, hintsRegistry, editor + }, + location: hint.location, + card: this.get('who') + }); + }, + + /** + * Generates a hint, given a context + * + * @method generateHintsForContext + * + * @param {Object} context Text snippet at a specific location with an RDFa context + * + * @return {Object} [{dateString, location}] + * + * @private + */ + generateHintsForContext(context){ + const hints = []; + const text = context.text; + const location = this.normalizeLocation([0, stringToScan.length], context.region); + hints.push({text, location}) + return hints; + } +}); + +RdfaEditor<%= classifiedModuleName %>Plugin.reopen({ + who: 'editor-plugins/<%= dasherizedModuleName %>-card', + +}); +export default RdfaEditor<%= classifiedModuleName %>Plugin; diff --git a/blueprints/editor-plugin/files/addon/templates/components/editor-plugins/__name__-card.hbs b/blueprints/editor-plugin/files/addon/templates/components/editor-plugins/__name__-card.hbs new file mode 100644 index 0000000..87c0100 --- /dev/null +++ b/blueprints/editor-plugin/files/addon/templates/components/editor-plugins/__name__-card.hbs @@ -0,0 +1,10 @@ +

{{info.label}}
+ {{info.plainValue}} +

+ +{{#wu-button-group}} + {{wu-button label="Juist" size="small" isNarrow=true command="ctrl + j" commandLocation="below" onClick=(action "insert")}} + {{wu-button label="Negeer" size="tiny" isLink=true isDark=true isNarrow=true command="esc" commandLocation="below" onClick=null}} +{{/wu-button-group}} + +{{yield}} diff --git a/blueprints/editor-plugin/files/app/components/editor-plugins/__name__-card.js b/blueprints/editor-plugin/files/app/components/editor-plugins/__name__-card.js new file mode 100644 index 0000000..72c6eea --- /dev/null +++ b/blueprints/editor-plugin/files/app/components/editor-plugins/__name__-card.js @@ -0,0 +1 @@ +export { default } from '@lblod/ember-rdfa-editor-<%= dasherizedModuleName %>-plugin/components/editor-plugins/<%= dasherizedModuleName %>-card'; diff --git a/blueprints/editor-plugin/files/app/services/rdfa-editor-__name__-plugin.js b/blueprints/editor-plugin/files/app/services/rdfa-editor-__name__-plugin.js new file mode 100644 index 0000000..d7cde01 --- /dev/null +++ b/blueprints/editor-plugin/files/app/services/rdfa-editor-__name__-plugin.js @@ -0,0 +1 @@ +export { default } from '@lblod/ember-rdfa-editor<%= dasherizedModuleName %>-plugin/services/rdfa-editor-<%= dasherizedModuleName %>-plugin'; diff --git a/blueprints/editor-plugin/files/blueprints/@lblod/ember-rdfa-editor-__name__-plugin/index.js b/blueprints/editor-plugin/files/blueprints/@lblod/ember-rdfa-editor-__name__-plugin/index.js new file mode 100644 index 0000000..56e7228 --- /dev/null +++ b/blueprints/editor-plugin/files/blueprints/@lblod/ember-rdfa-editor-__name__-plugin/index.js @@ -0,0 +1,42 @@ +/* eslint-env node */ +const existsSync = require('exists-sync'); + +const profilesFile = 'app/config/editor-profiles.js'; + +module.exports = { + description: 'Adds the plugin to the default and all editor-profiles', + + normalizeEntityName() { }, + + insertPluginNameAtKey( key, pluginName, afterContents="" ){ + return this.insertIntoFile( + profilesFile, + ` "${pluginName}",${afterContents}`, + { after: ` ${key}: \\[\n` }); + }, + + async afterInstall(options) { + const pluginName = options.originBlueprintName.substr('ember-'.length); + + if( existsSync(profilesFile) ){ + try { + await this.insertPluginNameAtKey("all", pluginName); + await this.insertPluginNameAtKey("default", pluginName, " "); /* the extra space here, + makes the line different + from the inserted line + above. This is makes + insertIntoFile consider + the lines to be different, + and hence insert the + contents. Sorry for the + somewhat uglier generated + files. */ + } catch (err) { + throw 'Failed to insert all contents ' + err; + } + } else { + throw 'Could not insert into "all" profile'; + } + return; + } +}; diff --git a/blueprints/editor-plugin/index.js b/blueprints/editor-plugin/index.js new file mode 100644 index 0000000..40ab9b8 --- /dev/null +++ b/blueprints/editor-plugin/index.js @@ -0,0 +1,10 @@ +/* eslint-env node */ +module.exports = { + description: 'Generates the scaffold for a ember-rdfa-editor plugin', + + afterInstall(options) { + // Perform extra work here. + this.addAddonToProject('ember-cli-release'); + return this.addAddonToProject('ember-concurrency'); + } +}; diff --git a/index.js b/index.js index 4709c37..1283e5d 100644 --- a/index.js +++ b/index.js @@ -1,5 +1,5 @@ 'use strict'; module.exports = { - name: 'ember-rdfa-editor-plugin-generator' + name: '@lblod/ember-rdfa-editor-plugin-generator' }; diff --git a/package.json b/package.json index 53c05a9..7ce4b94 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "ember-rdfa-editor-plugin-generator", + "name": "@lblod/ember-rdfa-editor-plugin-generator", "version": "0.0.0", "description": "The default blueprint for ember-cli addons.", "keywords": [