@unifiedsoftware/react-editor 2.0.0-alpha.14 → 2.0.0-alpha.15

package/dist/index.d.ts

@@ -16,24 +16,34 @@ type EditorToolbarButtonLabelIcon = {
     onAction: () => void;
 };
 type EditorToolbarButton = EditorToolbarButtonCommand | EditorToolbarButtonLabel | EditorToolbarButtonIcon | EditorToolbarButtonLabelIcon;
-type EditorChangeCallback = (value: string) => void;
-type EditorBlurCallback = (value: string) => void;
-type EditorPasteCallback = (text: {
+type OnChange = (value: string) => void;
+type OnBlur = (value: string) => void;
+type OnPaste = (text: {
     html: string;
     plain: string;
 }) => string;
 interface EditorToolbarOptions {
     buttons?: EditorToolbarButton[][];
 }
+type OnMentionSearch = (search: string) => void;
+type EditorMention = {
+    data: any;
+    renderItem: (options: {
+        data: any;
+        props: any;
+    }) => HTMLElement | string;
+    onSearch?: OnMentionSearch;
+};
 
 interface EditorProps {
     value?: string;
     height?: number;
     readOnly?: boolean;
     toolbar?: EditorToolbarOptions;
-    onChange?: EditorChangeCallback;
-    onBlur?: EditorBlurCallback;
-    onPaste?: EditorPasteCallback;
+    mention?: EditorMention;
+    onChange?: OnChange;
+    onBlur?: OnBlur;
+    onPaste?: OnPaste;
 }
 declare const Editor: React.FC<EditorProps>;
 

package/dist/index.js

@@ -1,2 +1,2 @@
-"use strict";var S=Object.create;var h=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var H=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var F=(o,r)=>{for(var n in r)h(o,n,{get:r[n],enumerable:!0})},y=(o,r,n,d)=>{if(r&&typeof r=="object"||typeof r=="function")for(let i of A(r))!O.call(o,i)&&i!==n&&h(o,i,{get:()=>r[i],enumerable:!(d=z(r,i))||d.enumerable});return o};var N=(o,r,n)=>(n=o!=null?S(H(o)):{},y(r||!o||!o.__esModule?h(n,"default",{value:o,enumerable:!0}):n,o)),X=o=>y(h({},"__esModule",{value:!0}),o);var G={};F(G,{Editor:()=>w,isToolbarButtonIcon:()=>$,isToolbarButtonLabel:()=>C,isToolbarButtonLabelIcon:()=>B});module.exports=X(G);var R=require("@unifiedsoftware/react-ui"),k=N(require("dompurify"));var x=[["undo","redo"],["font","fontSize"],["bold","italic","underline","strikethrough"],["ol","ul"],["outdent","indent"],["left","center","right","justify"],["link","unlink","image","source"]];var V=require("jodit/es5/jodit.min.css"),W=require("jodit/esm/plugins/source/source"),Y=require("jodit/esm/plugins/indent/indent"),Z=require("jodit/esm/plugins/justify/justify"),_=require("jodit/esm/plugins/select/select"),oo=require("jodit/esm/plugins/select-cells/select-cells"),to=require("jodit/esm/plugins/placeholder/placeholder"),D=require("jodit"),a=require("react"),J=require("react-dom/server");function C(o){return o.label!==void 0&&o.icon===void 0}function $(o){return o.label===void 0&&o.icon!==void 0}function B(o){return o.label!==void 0&&o.icon!==void 0}var L=require("react/jsx-runtime");function P(o){return typeof o=="string"?o:(0,J.renderToString)(o)}var q={undo:"undo",redo:"redo",font:"font",fontSize:"fontsize",bold:"bold",italic:"italic",underline:"underline",strikethrough:"strikethrough",ol:"ol",ul:"ul",outdent:"outdent",indent:"indent",left:"left",center:"center",right:"right",justify:"justify",link:"link",unlink:"unlink",image:"image",source:"source",brush:"brush"},v=({value:o,height:r,readOnly:n,toolbar:d,onChange:i,onBlur:p,onPaste:m})=>{let b=(0,a.useRef)(null),c=(0,a.useRef)(null),l=(0,a.useMemo)(()=>d?.buttons?.map(e=>({buttons:e.map(t=>typeof t=="string"?q[t]:B(t)?{name:t.label,tooltip:t.tooltip,icon:P(t.icon),exec:()=>{t.onAction()}}:C(t)?{name:t.label,tooltip:t.tooltip,exec:()=>{t.onAction()}}:{name:"",icon:P(t.icon),tooltip:t.tooltip,exec:()=>{t.onAction()}})})),[d?.buttons]);return(0,a.useEffect)(()=>{let e=b.current;if(!e)return;let t={iframe:!0,height:r??"480px",readonly:n,statusbar:!1,toolbarAdaptive:!0,...n?{toolbar:!1}:{buttons:l,buttonsXS:l,buttonsSM:l,buttonsMD:l}},s=D.Jodit.make(e,{...t,events:{paste:f=>{if(m){f.preventDefault();let E=f.clipboardData,M=E.getData("text/html"),T=E.getData("text/plain");T=T.split(`
-`).map(j=>`<p>${j.trim()}</p>`).join("");let I=m({html:M,plain:T});s.selection.insertHTML(I)}return f}}});s.container.style.cssText="border: 0; border-radius: 0; background-color: #fff;",c.current=s;let g=s.iframe?.contentDocument;if(g){let f=g.head.getElementsByTagName("style")??[];Array.from(f).forEach(E=>E.remove())}return()=>{s?.destruct()}},[]),(0,a.useEffect)(()=>{let e=c.current;if(!e)return;let t=g=>{i?.(g)},s=()=>{p?.(e.value)};return e.events.on("change",t),e.events.on("blur",s),()=>{e?.events?.off("change",t),e?.events?.off("blur",s)}},[i,p]),(0,a.useEffect)(()=>{let e=c.current;e&&e.value!==o&&(e.value=o??"")},[o]),(0,L.jsx)("div",{ref:b})};var u=require("react/jsx-runtime"),w=({value:o,readOnly:r,toolbar:n,onChange:d,onBlur:i,onPaste:p,...m})=>{let b=l=>{d?.(k.default.sanitize(l))},c=l=>{i?.(k.default.sanitize(l))};return(0,u.jsx)(u.Fragment,{children:r?(0,u.jsx)(R.Html,{src:o}):(0,u.jsx)(v,{...m,value:o,toolbar:{buttons:n?.buttons??x},onChange:b,onBlur:c,onPaste:p})})};0&&(module.exports={Editor,isToolbarButtonIcon,isToolbarButtonLabel,isToolbarButtonLabelIcon});
+"use strict";var j=Object.create;var T=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var H=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var N=(o,e)=>{for(var n in e)T(o,n,{get:e[n],enumerable:!0})},D=(o,e,n,d)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of A(e))!F.call(o,i)&&i!==n&&T(o,i,{get:()=>e[i],enumerable:!(d=z(e,i))||d.enumerable});return o};var X=(o,e,n)=>(n=o!=null?j(H(o)):{},D(e||!o||!o.__esModule?T(n,"default",{value:o,enumerable:!0}):n,o)),Z=o=>D(T({},"__esModule",{value:!0}),o);var w={};N(w,{Editor:()=>q,isToolbarButtonIcon:()=>_,isToolbarButtonLabel:()=>y,isToolbarButtonLabelIcon:()=>C});module.exports=Z(w);var R=require("@unifiedsoftware/react-ui"),P=X(require("dompurify"));var J=[["undo","redo"],["font","fontSize"],["bold","italic","underline","strikethrough"],["ol","ul"],["outdent","indent"],["left","center","right","justify"],["link","unlink","image","source"]];var U=require("jodit/es5/jodit.min.css");var v=require("jodit"),s=require("react"),M=require("react-dom/server");function y(o){return o.label!==void 0&&o.icon===void 0}function _(o){return o.label===void 0&&o.icon!==void 0}function C(o){return o.label!==void 0&&o.icon!==void 0}var O=require("react/jsx-runtime");function k(o){return typeof o=="string"?o:(0,M.renderToString)(o)}var $={undo:"undo",redo:"redo",font:"font",fontSize:"fontsize",bold:"bold",italic:"italic",underline:"underline",strikethrough:"strikethrough",ol:"ol",ul:"ul",outdent:"outdent",indent:"indent",left:"left",center:"center",right:"right",justify:"justify",link:"link",unlink:"unlink",image:"image",source:"source",brush:"brush"},x=({value:o,height:e,readOnly:n,toolbar:d,mention:i,onChange:p,onBlur:m,onPaste:b})=>{let g=(0,s.useRef)(null),c=(0,s.useRef)(null),h=(0,s.useMemo)(()=>d?.buttons?.map(r=>({buttons:r.map(t=>typeof t=="string"?$[t]:C(t)?{name:t.label,tooltip:t.tooltip,icon:k(t.icon),exec:()=>{t.onAction()}}:y(t)?{name:t.label,tooltip:t.tooltip,exec:()=>{t.onAction()}}:{name:"",icon:k(t.icon),tooltip:t.tooltip,exec:()=>{t.onAction()}})})),[d?.buttons]);return(0,s.useEffect)(()=>{let r=g.current;if(!r)return;let t={iframe:!0,height:e??"480px",readonly:n,statusbar:!1,toolbarAdaptive:!0,...n?{toolbar:!1}:{buttons:h,buttonsXS:h,buttonsSM:h,buttonsMD:h}};console.log(i);let u=v.Jodit.make(r,{...t,...i?{highlightSignature:{schema:{"@[a-zA-Z0-9._-]+":a=>{let l=a.createInside.element("strong",{style:{color:"blue"}});return console.log(l),l}}},autocomplete:{itemRenderer:a=>{try{return i.renderItem?.({data:a,props:{}})}catch{return a.value}},sources:[i.data]}}:{},events:{paste:a=>{if(b){a.preventDefault();let l=a.clipboardData,I=l.getData("text/html"),B=l.getData("text/plain");B=B.split(`
+`).map(S=>`<p>${S.trim()}</p>`).join("");let L=b({html:I,plain:B});u.selection.insertHTML(L)}return a}}});u.container.style.cssText="border: 0; border-radius: 0; background-color: #fff;",c.current=u;let E=u.iframe?.contentDocument;if(E){let a=E.head.getElementsByTagName("style")??[];Array.from(a).forEach(l=>l.remove())}return()=>{u?.destruct()}},[]),(0,s.useEffect)(()=>{let r=c.current;if(!r)return;let t=E=>{p?.(E)},u=()=>{m?.(r.value)};return r.events.on("change",t),r.events.on("blur",u),()=>{r?.events?.off("change",t),r?.events?.off("blur",u)}},[p,m]),(0,s.useEffect)(()=>{let r=c.current;r&&r.value!==o&&(r.value=o??"")},[o]),(0,O.jsx)("div",{ref:g})};var f=require("react/jsx-runtime"),q=({value:o,readOnly:e,toolbar:n,onChange:d,onBlur:i,onPaste:p,...m})=>{let b=c=>{d?.(P.default.sanitize(c))},g=c=>{i?.(P.default.sanitize(c))};return(0,f.jsx)(f.Fragment,{children:e?(0,f.jsx)(R.Html,{src:o}):(0,f.jsx)(x,{...m,value:o,toolbar:{buttons:n?.buttons??J},onChange:b,onBlur:g,onPaste:p})})};0&&(module.exports={Editor,isToolbarButtonIcon,isToolbarButtonLabel,isToolbarButtonLabelIcon});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unifiedsoftware/react-editor",
-  "version": "2.0.0-alpha.14",
+  "version": "2.0.0-alpha.15",
   "license": "MIT",
   "main": "dist/index.js",
   "files": [
@@ -21,7 +21,7 @@
     "react-dom": ">=18"
   },
   "dependencies": {
-    "@unifiedsoftware/react-ui": "2.0.0-alpha.11",
+    "@unifiedsoftware/react-ui": "2.0.0-alpha.15",
     "dompurify": "^3.1.6",
     "jodit": "4.2.24"
   },