dragresize: use lit-html to render the template

src/plugins/dragresize/templates/dragresize.html

@@ -1,3 +0,0 @@
-<div class="dragresize dragresize-top"></div>
-<div class="dragresize dragresize-topleft"></div>
-<div class="dragresize dragresize-left"></div>

src/plugins/dragresize/templates/dragresize.js

@@ -0,0 +1,7 @@
+import { html } from "lit-html";
+
+export default  () => html`
+    <div class="dragresize dragresize-top"></div>
+    <div class="dragresize dragresize-topleft"></div>
+    <div class="dragresize dragresize-left"></div>
+`;

src/plugins/dragresize/utils.js

@@ -1,5 +1,6 @@
-import tpl_dragresize from './templates/dragresize.html';
+import tpl_dragresize from './templates/dragresize.js';
 import { _converse, api } from '@converse/headless/core';
+import { render } from 'lit-html';
 
 /**
  * Applies some resistance to `value` around the `default_value`.
@@ -25,7 +26,7 @@ export function applyDragResistance (value, default_value) {
 export function renderDragResizeHandles (_converse, view) {
     const flyout = view.el.querySelector('.box-flyout');
     const div = document.createElement('div');
-    div.innerHTML = tpl_dragresize();
+    render(tpl_dragresize(), div);
     flyout.insertBefore(div, flyout.firstChild);
 }