Issue #1404Opened September 4, 2018by agoulart720 reactions

addType in domcomponent for html conditionals generates a <div> in visualization

Question

I have followed the instructions from issues #37, #787 , #208 , #1254

The comments are there in the HTML, however an "<div>" element is created on visualization,

how do we change the code so that this "<div>" could be replaced by something else, or add a style ?

Ex: "<div style="display:none"></div> would be ok.

I've tried to change the defaults for the new type but with no effect.

I'm using the latest release (0.14.21) in my local copy (linux, firefox)

Answers (2)

agoulart72September 4, 20180 reactions

Find the answer myself, for anyone that may have the same problem : extend the render part and set a display:none to the object to be rendered, this will not affect the html.

			var textnodeType = domc.getType('textnode');
			domc.addType('comment', {
			      model: textnodeType.model.extend({
			        toHTML() {
			          return `<!--${this.get('content')}-->`;
			        },
			      },{
			        isComponent(el) {
			          if (el.nodeType == 8) {
			            return {
			              tagName: 'NULL', // just need this to avoid some parser rule
			              type: 'comment',
			              content: el.textContent
			            }
			          }
			        },
			      }),
			      view: textnodeType.view.extend({
			    	  render: function () {
			    		  this.el.style.display = "none";
				          return this;
			    	  }
			      }),
			    });
lock[bot]September 17, 20190 reactions

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.