In an effort to reduce dependency on vue-i18n formatting, I decided to create a simple Markdown formatter directive that only implements bold, emphasize, and strike-through styles. The current implementation of the directive is as follows:
import _Vue from 'vue';
const emphasize = (str: string) => {
const matched = /(\*|_)(.*?)(\*|_)/gm;
return str.replace(matched, '<em>$2</em>');
};
const strong = (str: string) => {
const matched = /(\*\*|__)(.*?)(\*\*|__)/gm;
return str.replace(matched, '<strong>$2</strong>');
};
const strikeThrough = (str: string) => {
const matched = /~~(.*?)~~/gm;
return str.replace(matched, '<s>$2</s>');
};
const fromMd = (str: string) => strikeThrough(emphasize(strong(str)));
export default {
install: (Vue: typeof _Vue): void => {
/* eslint-disable no-param-reassign */
Vue.directive('tmd', {
bind(el: HTMLElement) {
el.innerHTML = fromMd(el.innerHTML);
},
inserted(el: HTMLElement) {
el.innerHTML = fromMd(el.innerHTML);
},
update(el: HTMLElement) {
el.innerHTML = fromMd(el.innerHTML);
},
});
},
};
I have been using it like this:
<p v-tmd >{{ $t('path-to-translation', ) }}</p>
While it has been working well so far, I encountered an issue where the directive does not update when changing the language. It listens for the updated event, but the el.innerHTML does not get updated, causing it to render the old content. What is the recommended approach to address this problem?