How to use the @ember/string.htmlSafe function in @ember/string

if(display) {
      var valueParts = [];
      var parts = display.split(' ');
      var endIndex = 0;
      var startIndex = 0;
      for(var i=0;i

return !emojiDefs[`${id}_tone${anotherTone}`];
        });

    return A(emoji);
  });
}

export default Service.extend({
  emojiDefs,

  categories: A([
    O({id: "people",   name: "Smileys & People", icon: htmlSafe(":grinning:")}),
    O({id: "nature",   name: "Animals & Nature", icon: htmlSafe(":deciduous_tree:")}),
    O({id: "food",     name: "Food & Drink",     icon: htmlSafe(":pizza:")}),
    O({id: "activity", name: "Activity",         icon: htmlSafe(":cartwheel:")}),
    O({id: "travel",   name: "Travel & Places",  icon: htmlSafe(":ship:")}),
    O({id: "objects",  name: "Objects",          icon: htmlSafe(":hammer:")}),
    O({id: "symbols",  name: "Symbols",          icon: htmlSafe(":heart:")}),
    O({id: "flags",    name: "Flags",            icon: htmlSafe(":flag_aq:")}),
    // "regional",
    // "modifier",
  ]),

  emojiCategoryIds: EMOJI_CATEGORIES_ARRAY,
  emojiToneIds: EMOJI_TONES_ARRAY,

  _currentSkinTone: 'default',

  currentSkinTone: computed('_currentSkinTone', {
    get() {
      return this.get('_currentSkinTone');
    },

export function colorBlock(color) {
  return htmlSafe(`background-color: ${color}; width: 600px; height: 70px`);
}

htmlBody: computed('body', function() {
    return htmlSafe(compileMarkdown(this.body));
  })

compute([vcsType, slug, commitSha]) {
    if (!commitSha) {
      return '';
    }

    const commit = escape(formatCommit(commitSha));

    if (!slug) {
      return commit;
    }

    const [owner, repo] = slug.split('/');
    const commitUrl = this.externalLinks.commitUrl(vcsType, { owner, repo, commit });
    const url = escape(commitUrl);
    const string = `<a href="${url}" class="github-link only-on-hover">${commit}</a>`;
    return new htmlSafe(string);
  }
});

if (typeof style[property] === 'boolean') {
        style[property] = style[property] ? property : null;
      }

      let value = style[property];
      let stylingProperty = STYLING_PROPERTIES[property];

      if (value && stylingProperty) {
        let key    = stylingProperty.key || dasherize(property);
        let suffix = stylingProperty.suffix || '';

        styles.push(`${key}: ${value}${suffix};`);
      }
    }

    return htmlSafe(styles.join(' '));
  }),

async getTooltipData(obj) {
    const isIcon = this.isIcon;
    if (isIcon || isEmpty(obj) || obj.empty) {
      return '';
    }
    const { meta } = obj;

    const vocabularyTitle = meta.vocabulary.get('title');
    const title = htmlSafe(vocabularyTitle);

    return {
      title,
      content: title
    };
  },

return objectiveObjects.reduce((set, obj) => {
      let existing = set.findBy('id', obj.courseId);
      if (!existing) {
        let title = obj.courseTitle;
        if (obj.courseExternalId) {
          title += ` (${obj.courseExternalId})`;
        }
        existing = {
          id: obj.courseId,
          title,
          objectives: []
        };
        set.pushObject(existing);
      }
      existing.objectives.pushObject({
        title: htmlSafe(obj.title)
      });
      return set;
    }, []);
  }),

verbStyles: computed('model._targetType', function() {
    const targetType = get(this, 'model._targetType');
    const arr = ['pod', 'workload', 'workloadSelector', 'node', 'nodeSelector']

    let out = '';

    if (arr.includes(targetType)) {
      out = `padding-top: 6px;`;
    }

    return htmlSafe(out);
  }),

contentsForMinimumLines: computed('minimumLines', function() {
      let minimumLines = this.get('minimumLines');
      let content = '';

      for (let line = 0; line < minimumLines; line++) {
        content = `${content}<br>`;
      }

      return htmlSafe(content);
    }).readOnly(),