reactjs-tiptap-editor/lib/index.cjs

A modern WYSIWYG rich text editor based on tiptap and shadcn ui for React

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),l=require("react"),C=require("./clsx-CXbNJWDD.cjs"),d=require("./index-BnVcq33n.cjs"),f=require("./theme.cjs"),M=`
.reactjs-tiptap-editor {
  button,
  input:where([type=button]),
  input:where([type=reset]),
  input:where([type=submit]) {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
  }

  input,
  optgroup,
  select {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
  }

  button {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
  }

  *,
  ::before,
  ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
  }


  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  a {
    color: inherit;
    text-decoration: inherit;
  }

  b,
  strong {
    font-weight: bolder;
  }

  code,
  kbd,
  samp,
  pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-size: 1em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  input {
    border-width: 1px;
  }

  input::placeholder {
    opacity: 1;
  }

  button, input {
    cursor: pointer;
    color: inherit;
  }

  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    display: block;
    vertical-align: middle;
  }

  img,
  video {
    max-width: 100%;
    height: auto;
  }
}
`;function N({editor:e}){const n=d.useStoreEditableEditor();l.useEffect(()=>{n(e==null?void 0:e.isEditable)},[e==null?void 0:e.isEditable]);const t=()=>{n(e==null?void 0:e.isEditable)};return l.useEffect(()=>(e&&e.on("update",t),()=>{e&&e.off("update",t)}),[e]),o.jsx(o.Fragment,{})}const m="data-rc-order",x="data-rc-priority",P="rc-util-key",h=new Map;function A(e,n){if(!e)return!1;if(e.contains)return e.contains(n);let t=n;for(;t;){if(t===e)return!0;t=t.parentNode}return!1}function E({mark:e}={}){return e?e.startsWith("data-")?e:`data-${e}`:P}function p(e){return e.attachTo?e.attachTo:document.querySelector("head")||document.body}function $(e){return e==="queue"?"prependQueue":e?"prepend":"append"}function v(e){return[...(h.get(e)||e).children].filter(n=>n.tagName==="STYLE")}function j(e,n={}){const{csp:t,prepend:a,priority:r=0}=n,c=$(a),s=c==="prependQueue",i=document.createElement("style");i.setAttribute(m,c),s&&r&&i.setAttribute(x,`${r}`),t!=null&&t.nonce&&(i.nonce=t==null?void 0:t.nonce),i.innerHTML=e;const u=p(n),{firstChild:T}=u;if(a){if(s){const b=v(u).filter(g=>{if(!["prepend","prependQueue"].includes(g.getAttribute(m)))return!1;const w=Number(g.getAttribute(x)||0);return r>=w});if(b.length>0)return u.insertBefore(i,b.at(-1).nextSibling),i}T.before(i)}else u.append(i);return i}function y(e,n={}){const t=p(n);return v(t).find(a=>a.getAttribute(E(n))===e)}function S(e,n={}){const t=y(e,n);t&&t.remove()}function q(e,n){const t=h.get(e);if(!t||!A(document,t)){const a=j("",n),{parentNode:r}=a;h.set(e,r),a.remove()}}function R(e,n,t={}){var s,i,u;const a=p(t);q(a,t);const r=y(n,t);if(r)return(s=t.csp)!=null&&s.nonce&&r.nonce!==((i=t.csp)==null?void 0:i.nonce)&&(r.nonce=(u=t.csp)==null?void 0:u.nonce),r.innerHTML!==e&&(r.innerHTML=e),r;const c=j(e,t);return c.setAttribute(E(t),n),c}function O(){const{theme:e,color:n,borderRadius:t}=f.useTheme();return l.useEffect(()=>{const a=e||"light",r=n||"default";let c=f.THEME[a][r];if(!c){c=f.THEME.light.default;return}return R(`
      .reactjs-tiptap-editor, .reactjs-tiptap-editor *,
      .reactjs-tiptap-editor-theme, .reactjs-tiptap-editor-theme *,
      div[data-richtext-portal], div[data-richtext-portal] * {
        ${Object.entries(c).map(([s,i])=>typeof t=="string"&&s==="radius"?`--${s}: ${t};`:`--${s}: ${i};`).join(`
`)}
      }
      `,"richtext-theme",{priority:50}),()=>{S("richtext-theme")}},[e,n,t]),o.jsx(o.Fragment,{})}function H({editor:e,children:n}){const t=l.useId();return l.useEffect(()=>(R(M,"react-tiptap-reset"),()=>{S("react-tiptap-reset")}),[]),l.useEffect(()=>{e&&(e.id=t)},[t,e]),e?o.jsx("div",{className:"reactjs-tiptap-editor",children:o.jsx(d.ReactBusProvider,{children:o.jsxs(C.EditorContext.Provider,{value:{editor:e},children:[o.jsx(d.TooltipProvider,{delayDuration:0,disableHoverableContent:!0,children:n}),o.jsx(N,{editor:e}),o.jsx(d.SlashDialogTrigger,{}),o.jsx(O,{})]})})}):o.jsx(o.Fragment,{})}exports.RichTextProvider=H;