ketekny-ui-kit 1.0.43 → 1.0.44

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ketekny-ui-kit",
   "type": "module",
-  "version": "1.0.43",
+  "version": "1.0.44",
   "description": "A Vue 3 UI component library with Tailwind CSS styling",
   "main": "index.js",
   "files": [

package/src/ui/kEditor.vue

@@ -21,10 +21,11 @@
     <div
       class="editor-content"
       :class="[defaultStyle, hasError ? errorStyle : '', disabled ? disabledStyle : '']"
-      contenteditable
+      :contenteditable="!disabled"
       ref="editor"
-      @input="updateValue"
-      @blur="updateValue"
+      @focus="handleFocus"
+      @input="handleInput"
+      @blur="handleBlur"
       :placeholder="placeholder"
     ></div>
     <div class="text-sm text-red-500 dark:text-rose-400" v-if="hasError && error !== true && error !== ''">
@@ -61,13 +62,15 @@ export default {
       default: "Πληκτρολογήστε κείμενο...",
     },
   },
-  emits: ["update:modelValue"],
+  emits: ["update:modelValue", "input", "focus", "blur", "change"],
   data() {
     return {
       defaultStyle:
         "w-full px-3 py-2 border rounded-b-lg transition shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/20 min-h-[150px] focus:border-primary bg-white placeholder-gray-400 !list-disc !list-inside prose dark:bg-slate-800 dark:text-slate-100 dark:border-slate-600 dark:placeholder-slate-500",
       errorStyle: "border-red-500 focus:ring focus:ring-red-300 dark:border-rose-500 dark:focus:ring-rose-500/20",
       disabledStyle: "!bg-gray-100 !text-gray-400 !cursor-not-allowed editor pointer-events-none select-none dark:!bg-slate-900 dark:!text-slate-500",
+      isFocused: false,
+      pendingModelValue: null,
       toolbar: [
         { command: "bold", icon: Bold, title: "Bold" },
         { command: "italic", icon: Italic, title: "Italic" },
@@ -77,34 +80,80 @@ export default {
     };
   },
   mounted() {
-    this.$refs.editor.innerHTML = this.modelValue || "";
+    this.setEditorHtml(this.modelValue || "");
   },
   methods: {
-    exec(command, value = null) {
-      document.execCommand(command, false, value);
-      this.updateValue();
+    getEditorHtml() {
+      return this.$refs.editor?.innerHTML || "";
+    },
+    setEditorHtml(value) {
+      if (!this.$refs.editor) return;
+      this.$refs.editor.innerHTML = value || "";
     },
-    updateValue() {
+    normalizeEditorDom() {
       const el = this.$refs.editor;
+      if (!el) return "";
 
-      // Optional cleanup for <div> -> <p> if outside of lists
-      el.querySelectorAll("div").forEach((div) => {
-        if (!div.closest("ul") && div.innerText.trim().length && div.tagName.toLowerCase() !== "li") {
-          const p = document.createElement("p");
-          p.innerHTML = div.innerHTML;
-          div.replaceWith(p);
-        }
+      Array.from(el.children).forEach((child) => {
+        if (child.tagName !== "DIV" || !child.innerText.trim().length) return;
+
+        const p = document.createElement("p");
+        p.innerHTML = child.innerHTML;
+        child.replaceWith(p);
       });
 
-      const html = el.innerHTML;
+      return this.getEditorHtml();
+    },
+    exec(command, value = null) {
+      this.$refs.editor?.focus();
+      document.execCommand(command, false, value);
+      this.handleInput();
+    },
+    handleFocus(event) {
+      this.isFocused = true;
+      this.$emit("focus", event);
+    },
+    handleInput() {
+      const html = this.getEditorHtml();
+      this.pendingModelValue = null;
+      this.$emit("input", html);
       this.$emit("update:modelValue", html);
     },
+    handleBlur(event) {
+      this.isFocused = false;
+      this.$emit("blur", event);
+
+      if (this.pendingModelValue != null) {
+        const nextValue = this.pendingModelValue;
+        this.pendingModelValue = null;
+        this.setEditorHtml(nextValue);
+        this.$emit("update:modelValue", nextValue);
+        this.$emit("change", nextValue);
+        return;
+      }
+
+      const normalized = this.normalizeEditorDom();
+      this.$emit("change", normalized);
+      this.$emit("update:modelValue", normalized);
+    },
   },
   watch: {
     modelValue(newVal) {
-      if (this.$refs.editor && this.$refs.editor.innerHTML !== newVal) {
-        this.$refs.editor.innerHTML = newVal || "";
+      if (!this.$refs.editor) return;
+
+      const nextValue = newVal || "";
+      if (this.getEditorHtml() === nextValue) {
+        this.pendingModelValue = null;
+        return;
+      }
+
+      if (this.isFocused) {
+        this.pendingModelValue = nextValue;
+        return;
       }
+
+      this.pendingModelValue = null;
+      this.setEditorHtml(nextValue);
     },
   },
 };