react-hook-quill/dist/index.js

React Hook Quill is a lightweight wrapper for Quill, the rich text editor that does not interfere with the design of either React or Quill.

import h, { Delta as m } from "quill";
import { useRef as C, useEffect as w, useCallback as s, useState as S } from "react";
const v = ({ setting: r }) => {
  const l = C(null), c = C(null);
  return w(() => {
    var p;
    if (r.containerRef.current && l.current === null)
      try {
        const o = r.containerRef.current, t = o.appendChild(
          o.ownerDocument.createElement("div")
        );
        c.current = { parent: o };
        const f = new h(t, r.options);
        l.current = f, (p = r.setup) == null || p.call(r, l.current);
      } catch (o) {
        if (console.error("Failed to initialize Quill:", o), c.current) {
          for (; c.current.parent.lastChild; )
            c.current.parent.removeChild(c.current.parent.lastChild);
          c.current = null;
        }
      }
    return () => {
      var o;
      if (l.current && ((o = r.cleanup) == null || o.call(r, l.current)), l.current = null, c.current) {
        for (; c.current.parent.lastChild; )
          c.current.parent.removeChild(c.current.parent.lastChild);
        c.current = null;
      }
    };
  }, [r]), l;
}, Q = (r, l = new m()) => {
  const c = C(null), p = C(l), o = s((n) => {
    c.current ? n.setContents(c.current) : n.setContents(p.current);
  }, []), t = s((n) => {
    c.current = n.editor.delta;
  }, []), [f, D] = S(() => ({
    containerRef: r.containerRef,
    options: r.options,
    setup: (n) => {
      var a;
      o(n), (a = r.setup) == null || a.call(r, n);
    },
    cleanup: (n) => {
      var a;
      t(n), (a = r.cleanup) == null || a.call(r, n);
    }
  })), R = s((n) => {
    D({
      containerRef: n.containerRef,
      options: n.options,
      setup: (a) => {
        var e;
        o(a), (e = n.setup) == null || e.call(n, a);
      },
      cleanup: (a) => {
        var e;
        t(a), (e = n.cleanup) == null || e.call(n, a);
      }
    });
  }, [o, t]);
  return {
    persistentDeltaSetting: f,
    updateSetting: R
  };
}, T = (r, l = new m()) => {
  const [c, p] = S(l), o = C(null), t = s((e) => {
    e.setContents(c), o.current || (o.current = () => {
      p(e.editor.delta);
    }, e.on(h.events.TEXT_CHANGE, o.current));
  }, [c]), f = s((e) => {
    o.current && (e.off(h.events.TEXT_CHANGE, o.current), o.current = null);
  }, []), [D, R] = S(() => ({
    containerRef: r.containerRef,
    options: r.options,
    setup: (e) => {
      var u;
      t(e), (u = r.setup) == null || u.call(r, e);
    },
    cleanup: (e) => {
      var u;
      f(e), (u = r.cleanup) == null || u.call(r, e);
    }
  })), n = s((e, u) => {
    if (e === null) {
      console.warn("syncDelta called with null Quill instance");
      return;
    }
    p(u), e.setContents(u);
  }, []), a = s((e) => {
    R({
      containerRef: e.containerRef,
      options: e.options,
      setup: (u) => {
        var d;
        t(u), (d = e.setup) == null || d.call(e, u);
      },
      cleanup: (u) => {
        var d;
        f(u), (d = e.cleanup) == null || d.call(e, u);
      }
    });
  }, [t, f]);
  return {
    delta: c,
    setDelta: p,
    syncDelta: n,
    syncDeltaSetting: D,
    updateSetting: a
  };
};
export {
  Q as usePersistentDelta,
  v as useQuill,
  T as useSyncDelta
};