v0.0.10 fix bubbling of clear event

README.md

@@ -6,7 +6,7 @@ tags:
 - textbox
 - editing
 - color
-title: gradio_highlightedtextbox v0.0.9
+title: gradio_highlightedtextbox
 colorFrom: indigo
 colorTo: green
 sdk: docker

src/README.md

@@ -144,6 +144,11 @@ Highlights will disappear if the highlighted text is edited. Modals will appear
         inputs=[high, tag_id, tag_open, tag_close, gr.State("Remove tags")],
         outputs=None,
     )
+    high.change(
+        fn=show_info,
+        inputs=[high, tag_id, tag_open, tag_close, gr.State("Change")],
+        outputs=None,
+    )
 
 if __name__ == "__main__":
     demo.launch()

src/backend/gradio_highlightedtextbox/templates/component/index.js

@@ -6,9 +6,9 @@ const {
   destroy_each: ql,
   detach: fe,
   element: de,
-  empty: Tl,
+  empty: Sl,
   ensure_array_like: tt,
-  get_all_dirty_from_scope: Sl,
+  get_all_dirty_from_scope: Tl,
   get_slot_changes: Ll,
   init: jl,
   insert: _e,
@@ -190,7 +190,7 @@ function Vl(l) {
   );
   return {
     c() {
-      e = de("div"), t = de("span"), _ && _.c(), n = Me(), r && r.c(), o = Me(), u && u.c(), s = Tl(), U(t, "data-testid", "block-info"), U(t, "class", "svelte-vm3q5z"), V(t, "sr-only", !/*show_label*/
+      e = de("div"), t = de("span"), _ && _.c(), n = Me(), r && r.c(), o = Me(), u && u.c(), s = Sl(), U(t, "data-testid", "block-info"), U(t, "class", "svelte-vm3q5z"), V(t, "sr-only", !/*show_label*/
       l[0]), V(t, "hide", !/*show_label*/
       l[0]), V(
         t,
@@ -216,7 +216,7 @@ function Vl(l) {
           c[6],
           m,
           null
-        ) : Sl(
+        ) : Tl(
           /*$$scope*/
           c[6]
         ),
@@ -361,10 +361,10 @@ function Ye(l, e, t, n) {
 function at(l, e = {}) {
   const t = Pl(l), { stiffness: n = 0.15, damping: i = 0.8, precision: o = 0.01 } = e;
   let s, f, a, _ = l, r = l, u = 1, c = 0, m = !1;
-  function k(S, T = {}) {
-    r = S;
+  function k(T, S = {}) {
+    r = T;
     const y = a = {};
-    return l == null || T.hard || L.stiffness >= 1 && L.damping >= 1 ? (m = !0, s = st(), _ = S, t.set(l = r), Promise.resolve()) : (T.soft && (c = 1 / ((T.soft === !0 ? 0.5 : +T.soft) * 60), u = 0), f || (s = st(), m = !1, f = Bl((d) => {
+    return l == null || S.hard || L.stiffness >= 1 && L.damping >= 1 ? (m = !0, s = st(), _ = T, t.set(l = r), Promise.resolve()) : (S.soft && (c = 1 / ((S.soft === !0 ? 0.5 : +S.soft) * 60), u = 0), f || (s = st(), m = !1, f = Bl((d) => {
       if (m)
         return m = !1, f = null, !1;
       u = Math.min(u + c, 1);
@@ -383,7 +383,7 @@ function at(l, e = {}) {
   }
   const L = {
     set: k,
-    update: (S, T) => k(S(r, l), T),
+    update: (T, S) => k(T(r, l), S),
     subscribe: t.subscribe,
     stiffness: n,
     damping: i,
@@ -586,8 +586,8 @@ const {
   mount_component: yn,
   noop: Cn,
   safe_not_equal: qn,
-  transition_in: Tn,
-  transition_out: Sn
+  transition_in: Sn,
+  transition_out: Tn
 } = window.__gradio__svelte__internal, { createEventDispatcher: Ln } = window.__gradio__svelte__internal;
 function jn(l) {
   let e, t, n, i, o;
@@ -605,10 +605,10 @@ function jn(l) {
     },
     p: Cn,
     i(s) {
-      n || (Tn(t.$$.fragment, s), n = !0);
+      n || (Sn(t.$$.fragment, s), n = !0);
     },
     o(s) {
-      Sn(t.$$.fragment, s), n = !1;
+      Tn(t.$$.fragment, s), n = !1;
     },
     d(s) {
       s && bn(e), hn(t), i = !1, o();
@@ -617,7 +617,7 @@ function jn(l) {
 }
 function Fn(l) {
   const e = Ln();
-  return [e, () => e("click")];
+  return [e, () => e("clear")];
 }
 class Hn extends mn {
   constructor(e) {
@@ -646,9 +646,9 @@ const {
 function bt(l) {
   let e, t;
   return e = new Hn({}), e.$on(
-    "click",
-    /*removeTags*/
-    l[3]
+    "clear",
+    /*clear_handler*/
+    l[4]
   ), {
     c() {
       ul(e.$$.fragment);
@@ -736,13 +736,10 @@ function An(l) {
 }
 function Wn(l, e, t) {
   let { value: n } = e, { show_copy_button: i = !1 } = e, { show_remove_tags_button: o = !1 } = e;
-  const s = On();
-  function f() {
-    s("removeTags");
-  }
+  const s = On(), f = () => s("clear");
   return l.$$set = (a) => {
     "value" in a && t(0, n = a.value), "show_copy_button" in a && t(1, i = a.show_copy_button), "show_remove_tags_button" in a && t(2, o = a.show_remove_tags_button);
-  }, [n, i, o, f];
+  }, [n, i, o, s, f];
 }
 class In extends Mn {
   constructor(e) {
@@ -1130,8 +1127,8 @@ const {
   attr: X,
   binding_callbacks: qt,
   bubble: je,
-  create_component: Tt,
-  destroy_component: St,
+  create_component: St,
+  destroy_component: Tt,
   detach: Pe,
   element: Qe,
   init: xn,
@@ -1338,7 +1335,7 @@ function ai(l) {
       )
     }
   }), i.$on(
-    "removeTags",
+    "clear",
     /*handle_remove_tags*/
     l[17]
   );
@@ -1351,7 +1348,7 @@ function ai(l) {
   let a = f(l), _ = a(l);
   return {
     c() {
-      e = Qe("label"), Tt(t.$$.fragment), n = jt(), Tt(i.$$.fragment), o = jt(), _.c(), X(e, "for", "highlighted-textbox"), X(e, "class", "svelte-1atky07"), Ft(
+      e = Qe("label"), St(t.$$.fragment), n = jt(), St(i.$$.fragment), o = jt(), _.c(), X(e, "for", "highlighted-textbox"), X(e, "class", "svelte-1atky07"), Ft(
         e,
         "container",
         /*container*/
@@ -1401,13 +1398,13 @@ function ai(l) {
       Mt(t.$$.fragment, r), Mt(i.$$.fragment, r), s = !1;
     },
     d(r) {
-      r && Pe(e), St(t), St(i), _.d();
+      r && Pe(e), Tt(t), Tt(i), _.d();
     }
   };
 }
 function ri(l, e, t) {
   const n = typeof document < "u";
-  let { value: i = [] } = e, { value_is_output: o = !1 } = e, { label: s } = e, { legend_label: f } = e, { info: a = void 0 } = e, { show_label: _ = !0 } = e, { show_legend: r = !1 } = e, { show_legend_label: u = !1 } = e, { container: c = !0 } = e, { color_map: m = {} } = e, { show_copy_button: k = !1 } = e, { show_remove_tags_button: L = !1 } = e, { disabled: S } = e, T, y = "", d = "", C, j = !m || Object.keys(m).length === 0 ? {} : m, h = {}, Z = !1, J = "";
+  let { value: i = [] } = e, { value_is_output: o = !1 } = e, { label: s } = e, { legend_label: f } = e, { info: a = void 0 } = e, { show_label: _ = !0 } = e, { show_legend: r = !1 } = e, { show_legend_label: u = !1 } = e, { container: c = !0 } = e, { color_map: m = {} } = e, { show_copy_button: k = !1 } = e, { show_remove_tags_button: L = !1 } = e, { disabled: T } = e, S, y = "", d = "", C, j = !m || Object.keys(m).length === 0 ? {} : m, h = {}, Z = !1, J = "";
   function E() {
     for (let g in j)
       i.map(([M, F]) => F).includes(g) || delete j[g];
@@ -1425,7 +1422,7 @@ function ri(l, e, t) {
   }
   const R = oi();
   ni(() => {
-    T && T.offsetHeight + T.scrollTop > T.scrollHeight - 100;
+    S && S.offsetHeight + S.scrollTop > S.scrollHeight - 100;
   });
   function ae() {
     D(), A(), R("change", i), o || R("input", i);
@@ -1492,7 +1489,7 @@ function ri(l, e, t) {
   }
   function Oe(g) {
     qt[g ? "unshift" : "push"](() => {
-      T = g, t(10, T);
+      S = g, t(10, S);
     });
   }
   function Ae() {
@@ -1500,14 +1497,14 @@ function ri(l, e, t) {
   }
   function w(g) {
     qt[g ? "unshift" : "push"](() => {
-      T = g, t(10, T);
+      S = g, t(10, S);
     });
   }
   function pl() {
     y = this.textContent, d = this.innerHTML, t(11, y), t(12, d);
   }
   return l.$$set = (g) => {
-    "value" in g && t(18, i = g.value), "value_is_output" in g && t(19, o = g.value_is_output), "label" in g && t(0, s = g.label), "legend_label" in g && t(1, f = g.legend_label), "info" in g && t(2, a = g.info), "show_label" in g && t(3, _ = g.show_label), "show_legend" in g && t(4, r = g.show_legend), "show_legend_label" in g && t(5, u = g.show_legend_label), "container" in g && t(6, c = g.container), "color_map" in g && t(20, m = g.color_map), "show_copy_button" in g && t(7, k = g.show_copy_button), "show_remove_tags_button" in g && t(8, L = g.show_remove_tags_button), "disabled" in g && t(9, S = g.disabled);
+    "value" in g && t(18, i = g.value), "value_is_output" in g && t(19, o = g.value_is_output), "label" in g && t(0, s = g.label), "legend_label" in g && t(1, f = g.legend_label), "info" in g && t(2, a = g.info), "show_label" in g && t(3, _ = g.show_label), "show_legend" in g && t(4, r = g.show_legend), "show_legend_label" in g && t(5, u = g.show_legend_label), "container" in g && t(6, c = g.container), "color_map" in g && t(20, m = g.color_map), "show_copy_button" in g && t(7, k = g.show_copy_button), "show_remove_tags_button" in g && t(8, L = g.show_remove_tags_button), "disabled" in g && t(9, T = g.disabled);
   }, E(), O(!0), [
     s,
     f,
@@ -1518,8 +1515,8 @@ function ri(l, e, t) {
     c,
     k,
     L,
-    S,
     T,
+    S,
     y,
     d,
     h,
@@ -1782,7 +1779,7 @@ function qi(l) {
     }
   };
 }
-function Ti(l) {
+function Si(l) {
   let e, t = (
     /*tag*/
     l[14] && qi(l)
@@ -1809,8 +1806,8 @@ function Ti(l) {
     }
   };
 }
-function Si(l, e, t) {
-  let { $$slots: n = {}, $$scope: i } = e, { height: o = void 0 } = e, { width: s = void 0 } = e, { elem_id: f = "" } = e, { elem_classes: a = [] } = e, { variant: _ = "solid" } = e, { border_mode: r = "base" } = e, { padding: u = !0 } = e, { type: c = "normal" } = e, { test_id: m = void 0 } = e, { explicit_call: k = !1 } = e, { container: L = !0 } = e, { visible: S = !0 } = e, { allow_overflow: T = !0 } = e, { scale: y = null } = e, { min_width: d = 0 } = e, C = c === "fieldset" ? "fieldset" : "div";
+function Ti(l, e, t) {
+  let { $$slots: n = {}, $$scope: i } = e, { height: o = void 0 } = e, { width: s = void 0 } = e, { elem_id: f = "" } = e, { elem_classes: a = [] } = e, { variant: _ = "solid" } = e, { border_mode: r = "base" } = e, { padding: u = !0 } = e, { type: c = "normal" } = e, { test_id: m = void 0 } = e, { explicit_call: k = !1 } = e, { container: L = !0 } = e, { visible: T = !0 } = e, { allow_overflow: S = !0 } = e, { scale: y = null } = e, { min_width: d = 0 } = e, C = c === "fieldset" ? "fieldset" : "div";
   const j = (h) => {
     if (h !== void 0) {
       if (typeof h == "number")
@@ -1820,7 +1817,7 @@ function Si(l, e, t) {
     }
   };
   return l.$$set = (h) => {
-    "height" in h && t(0, o = h.height), "width" in h && t(1, s = h.width), "elem_id" in h && t(2, f = h.elem_id), "elem_classes" in h && t(3, a = h.elem_classes), "variant" in h && t(4, _ = h.variant), "border_mode" in h && t(5, r = h.border_mode), "padding" in h && t(6, u = h.padding), "type" in h && t(16, c = h.type), "test_id" in h && t(7, m = h.test_id), "explicit_call" in h && t(8, k = h.explicit_call), "container" in h && t(9, L = h.container), "visible" in h && t(10, S = h.visible), "allow_overflow" in h && t(11, T = h.allow_overflow), "scale" in h && t(12, y = h.scale), "min_width" in h && t(13, d = h.min_width), "$$scope" in h && t(17, i = h.$$scope);
+    "height" in h && t(0, o = h.height), "width" in h && t(1, s = h.width), "elem_id" in h && t(2, f = h.elem_id), "elem_classes" in h && t(3, a = h.elem_classes), "variant" in h && t(4, _ = h.variant), "border_mode" in h && t(5, r = h.border_mode), "padding" in h && t(6, u = h.padding), "type" in h && t(16, c = h.type), "test_id" in h && t(7, m = h.test_id), "explicit_call" in h && t(8, k = h.explicit_call), "container" in h && t(9, L = h.container), "visible" in h && t(10, T = h.visible), "allow_overflow" in h && t(11, S = h.allow_overflow), "scale" in h && t(12, y = h.scale), "min_width" in h && t(13, d = h.min_width), "$$scope" in h && t(17, i = h.$$scope);
   }, [
     o,
     s,
@@ -1832,8 +1829,8 @@ function Si(l, e, t) {
     m,
     k,
     L,
-    S,
     T,
+    S,
     y,
     d,
     C,
@@ -1845,7 +1842,7 @@ function Si(l, e, t) {
 }
 class Li extends ci {
   constructor(e) {
-    super(), pi(this, e, Si, Ti, yi, {
+    super(), pi(this, e, Ti, Si, yi, {
       height: 0,
       width: 1,
       elem_id: 2,
@@ -1963,7 +1960,7 @@ const {
   destroy_each: wl,
   detach: v,
   element: $,
-  empty: Se,
+  empty: Te,
   ensure_array_like: Be,
   get_all_dirty_from_scope: Ai,
   get_slot_changes: Wi,
@@ -1979,7 +1976,7 @@ const {
   text: H,
   toggle_class: B,
   transition_in: qe,
-  transition_out: Te,
+  transition_out: Se,
   update_slot_base: Yi
 } = window.__gradio__svelte__internal, { tick: Gi } = window.__gradio__svelte__internal, { onDestroy: Ji } = window.__gradio__svelte__internal, Ki = (l) => ({}), Dt = (l) => ({});
 function Bt(l, e, t) {
@@ -2039,7 +2036,7 @@ function Qi(l) {
       o || (qe(f, a), o = !0);
     },
     o(a) {
-      Te(f, a), o = !1;
+      Se(f, a), o = !1;
     },
     d(a) {
       a && (v(e), v(i)), f && f.d(a);
@@ -2076,8 +2073,8 @@ function xi(l) {
     /*timer*/
     l[5] && Wt(l)
   );
-  const L = [oo, io], S = [];
-  function T(d, C) {
+  const L = [oo, io], T = [];
+  function S(d, C) {
     return (
       /*last_progress_level*/
       d[15] != null ? 0 : (
@@ -2086,12 +2083,12 @@ function xi(l) {
       )
     );
   }
-  ~(o = T(l)) && (s = S[o] = L[o](l));
+  ~(o = S(l)) && (s = T[o] = L[o](l));
   let y = !/*timer*/
   l[5] && Kt(l);
   return {
     c() {
-      r && r.c(), e = G(), t = $("div"), m && m.c(), n = G(), k && k.c(), i = G(), s && s.c(), f = G(), y && y.c(), a = Se(), Y(t, "class", "progress-text svelte-1txqlrd"), B(
+      r && r.c(), e = G(), t = $("div"), m && m.c(), n = G(), k && k.c(), i = G(), s && s.c(), f = G(), y && y.c(), a = Te(), Y(t, "class", "progress-text svelte-1txqlrd"), B(
         t,
         "meta-text-center",
         /*variant*/
@@ -2104,7 +2101,7 @@ function xi(l) {
       );
     },
     m(d, C) {
-      r && r.m(d, C), p(d, e, C), p(d, t, C), m && m.m(t, null), ce(t, n), k && k.m(t, null), p(d, i, C), ~o && S[o].m(d, C), p(d, f, C), y && y.m(d, C), p(d, a, C), _ = !0;
+      r && r.m(d, C), p(d, e, C), p(d, t, C), m && m.m(t, null), ce(t, n), k && k.m(t, null), p(d, i, C), ~o && T[o].m(d, C), p(d, f, C), y && y.m(d, C), p(d, a, C), _ = !0;
     },
     p(d, C) {
       /*variant*/
@@ -2125,19 +2122,19 @@ function xi(l) {
         d[8] === "default"
       );
       let j = o;
-      o = T(d), o === j ? ~o && S[o].p(d, C) : (s && (vl(), Te(S[j], 1, 1, () => {
-        S[j] = null;
-      }), bl()), ~o ? (s = S[o], s ? s.p(d, C) : (s = S[o] = L[o](d), s.c()), qe(s, 1), s.m(f.parentNode, f)) : s = null), /*timer*/
+      o = S(d), o === j ? ~o && T[o].p(d, C) : (s && (vl(), Se(T[j], 1, 1, () => {
+        T[j] = null;
+      }), bl()), ~o ? (s = T[o], s ? s.p(d, C) : (s = T[o] = L[o](d), s.c()), qe(s, 1), s.m(f.parentNode, f)) : s = null), /*timer*/
       d[5] ? y && (y.d(1), y = null) : y ? y.p(d, C) : (y = Kt(d), y.c(), y.m(a.parentNode, a));
     },
     i(d) {
       _ || (qe(s), _ = !0);
     },
     o(d) {
-      Te(s), _ = !1;
+      Se(s), _ = !1;
     },
     d(d) {
-      d && (v(e), v(t), v(i), v(f), v(a)), r && r.d(d), m && m.d(), k && k.d(), ~o && S[o].d(d), y && y.d(d);
+      d && (v(e), v(t), v(i), v(f), v(a)), r && r.d(d), m && m.d(), k && k.d(), ~o && T[o].d(d), y && y.d(d);
     }
   };
 }
@@ -2217,7 +2214,7 @@ function to(l) {
     c() {
       for (let i = 0; i < n.length; i += 1)
         n[i].c();
-      e = Se();
+      e = Te();
     },
     m(i, o) {
       for (let s = 0; s < n.length; s += 1)
@@ -2337,7 +2334,7 @@ function At(l) {
   );
   return {
     c() {
-      t && t.c(), e = Se();
+      t && t.c(), e = Te();
     },
     m(n, i) {
       t && t.m(n, i), p(n, e, i);
@@ -2407,7 +2404,7 @@ function io(l) {
       t || (qe(e.$$.fragment, n), t = !0);
     },
     o(n) {
-      Te(e.$$.fragment, n), t = !1;
+      Se(e.$$.fragment, n), t = !1;
     },
     d(n) {
       Oi(e, n);
@@ -2451,7 +2448,7 @@ function It(l) {
     c() {
       for (let i = 0; i < n.length; i += 1)
         n[i].c();
-      e = Se();
+      e = Te();
     },
     m(i, o) {
       for (let s = 0; s < n.length; s += 1)
@@ -2501,7 +2498,7 @@ function Ut(l) {
   );
   return {
     c() {
-      o && o.c(), e = G(), s && s.c(), t = G(), f && f.c(), n = G(), a && a.c(), i = Se();
+      o && o.c(), e = G(), s && s.c(), t = G(), f && f.c(), n = G(), a && a.c(), i = Te();
     },
     m(_, r) {
       o && o.m(_, r), p(_, e, r), s && s.m(_, r), p(_, t, r), f && f.m(_, r), p(_, n, r), a && a.m(_, r), p(_, i, r);
@@ -2610,7 +2607,7 @@ function Jt(l) {
   );
   return {
     c() {
-      t && t.c(), e = Se();
+      t && t.c(), e = Te();
     },
     m(n, i) {
       t && t.m(n, i), p(n, e, i);
@@ -2709,7 +2706,7 @@ function fo(l) {
     },
     p(_, r) {
       let u = t;
-      t = a(_), t === u ? ~t && f[t].p(_, r) : (n && (vl(), Te(f[u], 1, 1, () => {
+      t = a(_), t === u ? ~t && f[t].p(_, r) : (n && (vl(), Se(f[u], 1, 1, () => {
         f[u] = null;
       }), bl()), ~t ? (n = f[t], n ? n.p(_, r) : (n = f[t] = s[t](_), n.c()), qe(n, 1), n.m(e, null)) : n = null), (!o || r[0] & /*variant, show_progress*/
       320 && i !== (i = "wrap " + /*variant*/
@@ -2758,7 +2755,7 @@ function fo(l) {
       o || (qe(n), o = !0);
     },
     o(_) {
-      Te(n), o = !1;
+      Se(n), o = !1;
     },
     d(_) {
       _ && v(e), ~t && f[t].d(), l[31](null);
@@ -2783,7 +2780,7 @@ async function _o(l, e = !0) {
   }
 }
 function ao(l, e, t) {
-  let n, { $$slots: i = {}, $$scope: o } = e, { i18n: s } = e, { eta: f = null } = e, { queue_position: a } = e, { queue_size: _ } = e, { status: r } = e, { scroll_to_output: u = !1 } = e, { timer: c = !0 } = e, { show_progress: m = "full" } = e, { message: k = null } = e, { progress: L = null } = e, { variant: S = "default" } = e, { loading_text: T = "Loading..." } = e, { absolute: y = !0 } = e, { translucent: d = !1 } = e, { border: C = !1 } = e, { autoscroll: j } = e, h, Z = !1, J = 0, E = 0, O = null, R = null, ae = 0, A = null, K, D = null, me = !0;
+  let n, { $$slots: i = {}, $$scope: o } = e, { i18n: s } = e, { eta: f = null } = e, { queue_position: a } = e, { queue_size: _ } = e, { status: r } = e, { scroll_to_output: u = !1 } = e, { timer: c = !0 } = e, { show_progress: m = "full" } = e, { message: k = null } = e, { progress: L = null } = e, { variant: T = "default" } = e, { loading_text: S = "Loading..." } = e, { absolute: y = !0 } = e, { translucent: d = !1 } = e, { border: C = !1 } = e, { autoscroll: j } = e, h, Z = !1, J = 0, E = 0, O = null, R = null, ae = 0, A = null, K, D = null, me = !0;
   const Le = () => {
     t(0, f = t(26, O = t(19, he = null))), t(24, J = performance.now()), t(25, E = 0), Z = !0, ge();
   };
@@ -2810,7 +2807,7 @@ function ao(l, e, t) {
     });
   }
   return l.$$set = (w) => {
-    "i18n" in w && t(1, s = w.i18n), "eta" in w && t(0, f = w.eta), "queue_position" in w && t(2, a = w.queue_position), "queue_size" in w && t(3, _ = w.queue_size), "status" in w && t(4, r = w.status), "scroll_to_output" in w && t(21, u = w.scroll_to_output), "timer" in w && t(5, c = w.timer), "show_progress" in w && t(6, m = w.show_progress), "message" in w && t(22, k = w.message), "progress" in w && t(7, L = w.progress), "variant" in w && t(8, S = w.variant), "loading_text" in w && t(9, T = w.loading_text), "absolute" in w && t(10, y = w.absolute), "translucent" in w && t(11, d = w.translucent), "border" in w && t(12, C = w.border), "autoscroll" in w && t(23, j = w.autoscroll), "$$scope" in w && t(28, o = w.$$scope);
+    "i18n" in w && t(1, s = w.i18n), "eta" in w && t(0, f = w.eta), "queue_position" in w && t(2, a = w.queue_position), "queue_size" in w && t(3, _ = w.queue_size), "status" in w && t(4, r = w.status), "scroll_to_output" in w && t(21, u = w.scroll_to_output), "timer" in w && t(5, c = w.timer), "show_progress" in w && t(6, m = w.show_progress), "message" in w && t(22, k = w.message), "progress" in w && t(7, L = w.progress), "variant" in w && t(8, T = w.variant), "loading_text" in w && t(9, S = w.loading_text), "absolute" in w && t(10, y = w.absolute), "translucent" in w && t(11, d = w.translucent), "border" in w && t(12, C = w.border), "autoscroll" in w && t(23, j = w.autoscroll), "$$scope" in w && t(28, o = w.$$scope);
   }, l.$$.update = () => {
     l.$$.dirty[0] & /*eta, old_eta, timer_start, eta_from_start*/
     218103809 && (f === null && t(0, f = O), f != null && O !== f && (t(27, R = (performance.now() - J) / 1e3 + f), t(19, he = R.toFixed(1)), t(26, O = f))), l.$$.dirty[0] & /*eta_from_start, timer_diff*/
@@ -2835,8 +2832,8 @@ function ao(l, e, t) {
     c,
     m,
     L,
-    S,
     T,
+    S,
     y,
     d,
     C,
@@ -3180,8 +3177,8 @@ function qo(l) {
     }
   };
 }
-function To(l, e, t) {
-  let { gradio: n } = e, { label: i = "Highlighted Textbox" } = e, { legend_label: o = "Highlights:" } = e, { info: s = void 0 } = e, { elem_id: f = "" } = e, { elem_classes: a = [] } = e, { visible: _ = !0 } = e, { value: r } = e, { show_label: u } = e, { show_legend: c } = e, { show_legend_label: m } = e, { color_map: k = {} } = e, { container: L = !0 } = e, { scale: S = null } = e, { min_width: T = void 0 } = e, { show_copy_button: y = !1 } = e, { show_remove_tags_button: d = !1 } = e, { loading_status: C = void 0 } = e, { value_is_output: j = !1 } = e, { combine_adjacent: h = !1 } = e, { interactive: Z = !0 } = e;
+function So(l, e, t) {
+  let { gradio: n } = e, { label: i = "Highlighted Textbox" } = e, { legend_label: o = "Highlights:" } = e, { info: s = void 0 } = e, { elem_id: f = "" } = e, { elem_classes: a = [] } = e, { visible: _ = !0 } = e, { value: r } = e, { show_label: u } = e, { show_legend: c } = e, { show_legend_label: m } = e, { color_map: k = {} } = e, { container: L = !0 } = e, { scale: T = null } = e, { min_width: S = void 0 } = e, { show_copy_button: y = !1 } = e, { show_remove_tags_button: d = !1 } = e, { loading_status: C = void 0 } = e, { value_is_output: j = !1 } = e, { combine_adjacent: h = !1 } = e, { interactive: Z = !0 } = e;
   const J = !1, E = !0;
   function O(b) {
     r = b, t(0, r), t(20, h);
@@ -3193,7 +3190,7 @@ function To(l, e, t) {
     console.log("test"), n.dispatch("clear");
   };
   return l.$$set = (b) => {
-    "gradio" in b && t(3, n = b.gradio), "label" in b && t(4, i = b.label), "legend_label" in b && t(5, o = b.legend_label), "info" in b && t(6, s = b.info), "elem_id" in b && t(7, f = b.elem_id), "elem_classes" in b && t(8, a = b.elem_classes), "visible" in b && t(9, _ = b.visible), "value" in b && t(0, r = b.value), "show_label" in b && t(10, u = b.show_label), "show_legend" in b && t(11, c = b.show_legend), "show_legend_label" in b && t(12, m = b.show_legend_label), "color_map" in b && t(1, k = b.color_map), "container" in b && t(13, L = b.container), "scale" in b && t(14, S = b.scale), "min_width" in b && t(15, T = b.min_width), "show_copy_button" in b && t(16, y = b.show_copy_button), "show_remove_tags_button" in b && t(17, d = b.show_remove_tags_button), "loading_status" in b && t(18, C = b.loading_status), "value_is_output" in b && t(2, j = b.value_is_output), "combine_adjacent" in b && t(20, h = b.combine_adjacent), "interactive" in b && t(19, Z = b.interactive);
+    "gradio" in b && t(3, n = b.gradio), "label" in b && t(4, i = b.label), "legend_label" in b && t(5, o = b.legend_label), "info" in b && t(6, s = b.info), "elem_id" in b && t(7, f = b.elem_id), "elem_classes" in b && t(8, a = b.elem_classes), "visible" in b && t(9, _ = b.visible), "value" in b && t(0, r = b.value), "show_label" in b && t(10, u = b.show_label), "show_legend" in b && t(11, c = b.show_legend), "show_legend_label" in b && t(12, m = b.show_legend_label), "color_map" in b && t(1, k = b.color_map), "container" in b && t(13, L = b.container), "scale" in b && t(14, T = b.scale), "min_width" in b && t(15, S = b.min_width), "show_copy_button" in b && t(16, y = b.show_copy_button), "show_remove_tags_button" in b && t(17, d = b.show_remove_tags_button), "loading_status" in b && t(18, C = b.loading_status), "value_is_output" in b && t(2, j = b.value_is_output), "combine_adjacent" in b && t(20, h = b.combine_adjacent), "interactive" in b && t(19, Z = b.interactive);
   }, l.$$.update = () => {
     l.$$.dirty[0] & /*color_map*/
     2 && !k && Object.keys(k).length && t(1, k), l.$$.dirty[0] & /*value, combine_adjacent*/
@@ -3213,8 +3210,8 @@ function To(l, e, t) {
     c,
     m,
     L,
-    S,
     T,
+    S,
     y,
     d,
     C,
@@ -3233,12 +3230,12 @@ function To(l, e, t) {
     ge
   ];
 }
-class So extends uo {
+class To extends uo {
   constructor(e) {
     super(), vo(
       this,
       e,
-      To,
+      So,
       qo,
       ko,
       {
@@ -3404,5 +3401,5 @@ class So extends uo {
   }
 }
 export {
-  So as default
+  To as default
 };

src/demo/space.py

@@ -169,6 +169,11 @@ Highlights will disappear if the highlighted text is edited. Modals will appear
         inputs=[high, tag_id, tag_open, tag_close, gr.State("Remove tags")],
         outputs=None,
     )
+    high.change(
+        fn=show_info,
+        inputs=[high, tag_id, tag_open, tag_close, gr.State("Change")],
+        outputs=None,
+    )
 
 if __name__ == "__main__":
     demo.launch()

src/frontend/HighlightedTextbox.svelte

@@ -184,7 +184,7 @@
 		{show_copy_button}
 		show_remove_tags_button={show_remove_tags_button && !tags_removed}
 		value={tagged_text}
-		on:removeTags={handle_remove_tags}
+		on:clear={handle_remove_tags}
 	/>
     {#if disabled}
         <div 

src/frontend/RemoveTags.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { fade } from "svelte/transition";
 	import { Check } from "@gradio/icons";
     import { createEventDispatcher } from 'svelte';
 
@@ -7,7 +6,7 @@
 </script>
  
 <button
-    on:click={() => dispatch('click')}
+    on:click={() => dispatch('clear')}
     title="Remove highlights"
     aria-roledescription="Remove highlights"
     aria-label="Remove highlights"

src/frontend/Widgets.svelte

@@ -6,17 +6,13 @@
 	export let value: string;
 	export let show_copy_button: boolean = false;
     export let show_remove_tags_button: boolean = false;
-
     const dispatch = createEventDispatcher()
 
-    function removeTags() {
-        dispatch('removeTags');
-    }
 </script>
 
 <div>
     {#if show_remove_tags_button}
-        <RemoveTags on:click={removeTags} />
+        <RemoveTags on:clear={() => dispatch("clear")}/>
     {/if}
     {#if show_copy_button}
         <Copy {value} />

src/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "gradio_highlightedtextbox"
-version = "0.0.9"
+version = "0.0.10"
 description = "Editable Gradio textarea supporting highlighting"
 readme = "README.md"
 license = "MIT"
@@ -39,7 +39,7 @@ dev = ["build", "twine"]
 space = "https://huggingface.co/spaces/gsarti/gradio_highlightedtextbox"
 
 [tool.hatch.build]
-artifacts = ["/backend/gradio_highlightedtextbox/templates", "*.pyi", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "Users/gsarti/Documents/projects/highlightedtextbox/backend/gradio_highlightedtextbox/templates", "Users/gsarti/Documents/projects/highlightedtextbox/backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates"]
+artifacts = ["/backend/gradio_highlightedtextbox/templates", "*.pyi", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "Users/gsarti/Documents/projects/highlightedtextbox/backend/gradio_highlightedtextbox/templates", "Users/gsarti/Documents/projects/highlightedtextbox/backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates"]
 
 [tool.hatch.build.targets.wheel]
 packages = ["/backend/gradio_highlightedtextbox"]