diff --git a/docs/.vuepress/public/default-link-comp.jpg b/docs/.vuepress/public/default-link-comp.jpg new file mode 100644 index 000000000..9ee2391ba Binary files /dev/null and b/docs/.vuepress/public/default-link-comp.jpg differ diff --git a/docs/modules/Traits.md b/docs/modules/Traits.md index 9eec35942..3b4dc69fe 100644 --- a/docs/modules/Traits.md +++ b/docs/modules/Traits.md @@ -264,6 +264,30 @@ component.removeTrait('type'); ## Define new Trait type +Generally, for most of the cases default types are enough, but sometimes you might need something more. +In that case you can define a totally new type of trait and bind any kind of element to it. + +Let's update the default `link` Component with a new kind of trat. This is the default situation of traits for a simple link. + + + +Let's just replace all of its traits with a new one, `href-next`, which will allow the user to select the type of href (eg. 'url', 'email', etc.) + +```js +editor.DomComponents.addType('link', { + model: { + defaults: { + traits: [ + { + type: 'href-next', + label: 'New href', + }, + ] + } + } +}); +``` + If built-in types are not enough (eg. something with more complex UI) you can define a new one. Let's see this simple `textarea` element which updates contents of the component. diff --git a/src/domain_abstract/view/DomainViews.js b/src/domain_abstract/view/DomainViews.js index ffcd14087..2db8142bd 100644 --- a/src/domain_abstract/view/DomainViews.js +++ b/src/domain_abstract/view/DomainViews.js @@ -22,6 +22,13 @@ export default Backbone.View.extend({ this.add(model); }, + itemViewNotFound(type) { + const { config, ns } = this; + const { em } = config; + const warn = `${ns ? `[${ns}]: ` : ''}'${type}' type not found`; + em && em.logWarning(warn); + }, + /** * Render new model inside the view * @param {Model} model @@ -29,14 +36,16 @@ export default Backbone.View.extend({ * @private * */ add(model, fragment) { - const { config, reuseView } = this; + const { config, reuseView, itemsView = {} } = this; var frag = fragment || null; var itemView = this.itemView; var typeField = model.get(this.itemType); let view; - if (this.itemsView && this.itemsView[typeField]) { - itemView = this.itemsView[typeField]; + if (itemsView[typeField]) { + itemView = itemsView[typeField]; + } else if (typeField && !itemsView[typeField]) { + this.itemViewNotFound(typeField); } if (model.view && reuseView) { diff --git a/src/trait_manager/view/TraitsView.js b/src/trait_manager/view/TraitsView.js index 238708556..001e22437 100644 --- a/src/trait_manager/view/TraitsView.js +++ b/src/trait_manager/view/TraitsView.js @@ -7,6 +7,7 @@ import TraitColorView from './TraitColorView'; import TraitButtonView from './TraitButtonView'; export default DomainViews.extend({ + ns: 'Traits', itemView: TraitView, reuseView: 1,