flow-text-editor events tested

packages/flow-text-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ollion/flow-text-editor",
-  "version": "2.1.0",
+  "version": "0.0.1",
   "description": "Code editor component for flow library",
   "module": "dist/flow-text-editor.es.js",
   "main": "dist/flow-text-editor.es.js",

packages/flow-text-editor/src/components/f-text-editor/f-text-editor.ts

@@ -1,11 +1,13 @@
-import { unsafeCSS, html, PropertyValues } from "lit";
+import { unsafeCSS, html, PropertyValues, PropertyValueMap } from "lit";
 import { FRoot, flowElement } from "@ollion/flow-core";
 import globalStyle from "./f-text-editor-global.scss?inline";
 import { FTextArea } from "@ollion/flow-core";
 import { property } from "lit/decorators.js";
 import { injectCss } from "@ollion/flow-core-config";
 import { createRef, ref } from "lit-html/directives/ref.js";
 import Quill from "quill";
+import { keyed } from "lit-html/directives/keyed.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
 injectCss("f-text-editor", globalStyle);
 
@@ -31,6 +33,10 @@ export type FTextEditorToolbarAction =
 	| { align: ("left" | "center" | "right" | "justify")[] };
 @flowElement("f-text-editor")
 export class FTextEditor extends FRoot {
+	/**
+	 * To force re-render
+	 */
+	key = 0;
 	/**
 	 * css loaded from scss file
 	 */
@@ -76,15 +82,23 @@ export class FTextEditor extends FRoot {
 	createRenderRoot() {
 		return this;
 	}
+	protected willUpdate(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
+		super.willUpdate(changedProperties);
+
+		this.key += 1;
+	}
 
 	render() {
-		return html`<div
-			${ref(this.editorRoot)}
-			@input=${(ev: InputEvent) => ev.stopPropagation()}
-			class="f-text-editor-root"
-		>
-			${this.value}
-		</div>`;
+		return keyed(
+			this.key,
+			html`<div
+				${ref(this.editorRoot)}
+				@input=${(ev: InputEvent) => ev.stopPropagation()}
+				class="f-text-editor-root"
+			>
+				${unsafeHTML(this.value)}
+			</div>`
+		);
 	}
 
 	protected updated(changedProperties: PropertyValues): void {

stories/flow-text-editor/f-text-editor.stories.ts

@@ -12,7 +12,7 @@ export default {
 
 export const Playground = {
 	render: (args: Record<string, any>) => {
-		const handleInput = function (ev: Event) {
+		const handleInput = function (ev: CustomEvent) {
 			console.log(ev);
 		};
 
@@ -38,7 +38,7 @@ export const Playground = {
 	},
 
 	args: {
-		value: `Hello World!`,
+		value: `<h1>Hello World!</h1>`,
 		placeholder: `Enter rich text here...`
 	}
 };