improve node text content

src/component/alert/index.js

@@ -3,7 +3,6 @@ import { icon } from '../icon';
 import * as form from '../form';
 
 import { node } from '../../utility/node';
-import { complexNode } from '../../utility/complexNode';
 
 import './index.css';
 

src/component/bookmarkForm/index.js

@@ -801,7 +801,7 @@ export const BookmarkForm = function({
         form.wrap({
           children: [
             node('h2:Address|class:mb-2'),
-            complexNode({ tag: 'p', text: 'Be sure to use the full URL and include <strong>"https://..."</strong>', attr: [{ key: 'class', value: 'mb-5' }] })
+            complexNode({ tag: 'p', text: 'Be sure to use the full URL and include <strong>"https://..."</strong>', complexText: true, attr: [{ key: 'class', value: 'mb-5' }] })
           ]
         }),
         form.wrap({

src/component/control/helperText/index.js

@@ -14,7 +14,8 @@ import { convertColor } from '../../../utility/convertColor';
 import { isValidString } from '../../../utility/isValidString';
 
 export const Control_helperText = function({
-  text = []
+  text = [],
+  complexText= false
 } = {}) {
 
   this.para = [];
@@ -22,7 +23,8 @@ export const Control_helperText = function({
   text.forEach((item, i) => {
     this.para.push(form.helper({
       tag: 'p',
-      text: item
+      text: item,
+      complexText: complexText
     }));
   });
 

src/component/form/helper/index.js

@@ -5,17 +5,27 @@ import './index.css';
 
 export const helper = function({
   text = 'text',
+  complexText = false,
   classList = []
 } = {}) {
 
-  const helper = complexNode({
-    tag: 'p',
-    text: text,
-    attr: [{
-      key: 'class',
-      value: 'form-helper-item'
-    }]
-  });
+  const helper = node('p|class:form-helper-item');
+
+  if (text) {
+
+    if (complexText) {
+
+      helper.innerHTML = text;
+
+    } else {
+
+      let textNode = document.createTextNode(text);
+
+      helper.appendChild(textNode);
+
+    };
+
+  };
 
   if (classList.length > 0) {
 

src/component/menuContent/appSetting/index.js

@@ -50,6 +50,18 @@ appSetting[appName.toLowerCase()] = (parent) => {
 
   const licenseLink = new Link({ text: 'GNU General Public License v3.0', href: 'https://github.com/zombieFox/' + appName + '/blob/master/license', openNew: true });
 
+  const para1 = node('p');
+
+  para1.innerHTML = `This project can be found on ${githubLink.link().outerHTML}`;
+
+  const para2 = node('p');
+
+  para2.innerHTML = `Share your setup with the ${redditLink.link().outerHTML}`;
+
+  const para3 = node('p');
+
+  para3.innerHTML = `${appName} uses the ${licenseLink.link().outerHTML}`;
+
   parent.appendChild(
     node('div', [
       node('div|class:version', [
@@ -61,9 +73,9 @@ appSetting[appName.toLowerCase()] = (parent) => {
         ])
       ]),
       node('hr'),
-      complexNode({ tag: 'p', text: `This project can be found on ${githubLink.link().outerHTML}` }),
-      complexNode({ tag: 'p', text: `Share your setup with the ${redditLink.link().outerHTML}` }),
-      complexNode({ tag: 'p', text: `${appName} uses the ${licenseLink.link().outerHTML}` }),
+      para1,
+      para2,
+      para3
     ])
   );
 

src/component/menuContent/headerSetting/index.js

@@ -434,6 +434,7 @@ headerSetting.area = (parent) => {
   });
 
   headerSetting.area.alignmentHelper = new Control_helperText({
+    complexText: true,
     text: [`Effects may not be visible if the ${(new Link({ text:'Search box size', href: '#menu-content-item-search'})).link().outerHTML} size is set to Auto and grows to fill available space.`]
   });
 

src/component/menuContent/layoutSetting/index.js

@@ -218,6 +218,7 @@ layoutSetting.area = (parent) => {
       text: ['Effects may not be visible if the Header Area is full width.']
     }),
     justifyHelper2: new Control_helperText({
+      complexText: true,
       text: [`Only available when ${(new Link({ text:'Layout Direction', href: '#menu-content-item-alignment'})).link().outerHTML} is Vertical and Header items are shown.`]
     })
   };
@@ -264,6 +265,7 @@ layoutSetting.area = (parent) => {
       text: ['Effects may not be visible if the Bookmark Area is full width.']
     }),
     justifyHelper2: new Control_helperText({
+      complexText: true,
       text: [`Only available when ${(new Link({ text:'Layout Direction', href: '#menu-content-item-alignment'})).link().outerHTML} is Vertical and Header items are shown.`]
     })
   };

src/component/menuContent/supportSetting/index.js

@@ -85,14 +85,15 @@ supportSetting.support = (parent) => {
 
   };
 
+  const para = node('p');
+
+  para.innerHTML = `For more support or feedback, submit an ${(new Link({ text:'Issue', href: `https://github.com/zombieFox/${appName}/issues`, openNew: true })).link().outerHTML} or check the ${(new Link({ text:'Wiki', href: `https://github.com/zombieFox/${appName}/wiki`, openNew: true })).link().outerHTML}.`;
+
   parent.appendChild(
     node('div', [
       makeLinks(),
       node('hr'),
-      complexNode({
-        tag: 'p',
-        text: `For more support or feedback, submit an ${(new Link({ text:'Issue', href: `https://github.com/zombieFox/${appName}/issues`, openNew: true })).link().outerHTML} or check the ${(new Link({ text:'Wiki', href: `https://github.com/zombieFox/${appName}/wiki`, openNew: true })).link().outerHTML}.`
-      })
+      para
     ])
   );
 

src/component/menuContent/themeSetting/index.js

@@ -790,6 +790,7 @@ themeSetting.font = (parent) => {
       }
     }),
     nameHelper: new Control_helperText({
+      complexText: true,
       text: [
         `Use a ${(new Link({ text:'Google Font', href: `https://fonts.google.com/`, openNew: true })).link().outerHTML} to customise the Clock, Date, Group names and Bookmark Letters.`,
         'Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Fredoka One" or "Kanit"',
@@ -877,6 +878,7 @@ themeSetting.font = (parent) => {
       }
     }),
     nameHelper: new Control_helperText({
+      complexText: true,
       text: [
         `Use a ${(new Link({ text:'Google Font', href: `https://fonts.google.com/`, openNew: true })).link().outerHTML} to customise the Bookmark name, URL and form elements.`,
         'Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Roboto", "Source Sans Pro" or "Noto Sans"',

src/utility/complexNode.js

@@ -1,6 +1,7 @@
 export const complexNode = ({
   tag = 'div',
   text = false,
+  complexText = false,
   attr = [],
   node = []
 } = {}) => {
@@ -8,7 +9,19 @@ export const complexNode = ({
   const element = document.createElement(tag);
 
   if (text) {
+
+    if (complexText) {
+
       element.innerHTML = text;
+
+    } else {
+
+      let textNode = document.createTextNode(text);
+
+      element.appendChild(textNode);
+
+    };
+
   };
 
   if (attr.length > 0) {