@progress/kendo-react-editor 15.2.0-develop.5 → 15.2.0-develop.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Editor.d.ts +15 -95
- package/Editor.js +1 -1
- package/Editor.mjs +299 -306
- package/EditorProps.d.ts +2 -2
- package/dist/cdn/js/kendo-react-editor.js +1 -1
- package/index.d.mts +3 -4
- package/index.d.ts +3 -4
- package/index.js +1 -1
- package/index.mjs +136 -138
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +12 -12
- package/EditorMcpWrapper.d.ts +0 -17
- package/EditorMcpWrapper.js +0 -8
- package/EditorMcpWrapper.mjs +0 -18
package/Editor.d.ts
CHANGED
|
@@ -5,16 +5,25 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import { default as PropTypes } from 'prop-types';
|
|
9
8
|
import { EditorView, Node } from '@progress/kendo-editor-common';
|
|
10
9
|
import { EditorProps } from './EditorProps';
|
|
11
10
|
import * as React from 'react';
|
|
12
11
|
/**
|
|
13
|
-
*
|
|
12
|
+
* Represent the `ref` of the Editor component.
|
|
14
13
|
*/
|
|
15
|
-
interface
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
export interface EditorHandle {
|
|
15
|
+
/** The current root DOM element or `null`. */
|
|
16
|
+
element: HTMLElement | null;
|
|
17
|
+
/** The content-editable DOM element of the Editor. */
|
|
18
|
+
contentElement: HTMLDivElement | null;
|
|
19
|
+
/** The `view` object of the Editor. */
|
|
20
|
+
view: EditorView | undefined;
|
|
21
|
+
/** The value of the Editor. */
|
|
22
|
+
value: Node | string;
|
|
23
|
+
/** The props of the Editor component. */
|
|
24
|
+
readonly props: Readonly<EditorProps>;
|
|
25
|
+
/** Focuses the Editor. */
|
|
26
|
+
focus: () => void;
|
|
18
27
|
}
|
|
19
28
|
/**
|
|
20
29
|
* Represents the [KendoReact Editor component](https://www.telerik.com/kendo-react-ui/components/editor).
|
|
@@ -33,93 +42,4 @@ interface EditorStateInterface {
|
|
|
33
42
|
* }
|
|
34
43
|
* ```
|
|
35
44
|
*/
|
|
36
|
-
export declare
|
|
37
|
-
/**
|
|
38
|
-
* @hidden
|
|
39
|
-
*/
|
|
40
|
-
static propTypes: {
|
|
41
|
-
defaultContent: PropTypes.Requireable<string>;
|
|
42
|
-
value: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
|
|
43
|
-
defaultEditMode: PropTypes.Requireable<string>;
|
|
44
|
-
contentStyle: PropTypes.Requireable<object>;
|
|
45
|
-
dir: PropTypes.Requireable<string>;
|
|
46
|
-
className: PropTypes.Requireable<string>;
|
|
47
|
-
ariaDescribedBy: PropTypes.Requireable<string>;
|
|
48
|
-
ariaLabelledBy: PropTypes.Requireable<string>;
|
|
49
|
-
ariaLabel: PropTypes.Requireable<string>;
|
|
50
|
-
style: PropTypes.Requireable<object>;
|
|
51
|
-
tools: PropTypes.Requireable<any[]>;
|
|
52
|
-
keyboardNavigation: PropTypes.Requireable<boolean>;
|
|
53
|
-
resizable: PropTypes.Requireable<boolean>;
|
|
54
|
-
preserveWhitespace: PropTypes.Requireable<string | boolean>;
|
|
55
|
-
onMount: PropTypes.Requireable<(...args: any[]) => any>;
|
|
56
|
-
onFocus: PropTypes.Requireable<(...args: any[]) => any>;
|
|
57
|
-
onBlur: PropTypes.Requireable<(...args: any[]) => any>;
|
|
58
|
-
onChange: PropTypes.Requireable<(...args: any[]) => any>;
|
|
59
|
-
onPasteHtml: PropTypes.Requireable<(...args: any[]) => any>;
|
|
60
|
-
onExecute: PropTypes.Requireable<(...args: any[]) => any>;
|
|
61
|
-
onIFrameInit: PropTypes.Requireable<(...args: any[]) => any>;
|
|
62
|
-
};
|
|
63
|
-
/**
|
|
64
|
-
* @hidden
|
|
65
|
-
*/
|
|
66
|
-
readonly state: EditorStateInterface;
|
|
67
|
-
/**
|
|
68
|
-
* The value of the Editor.
|
|
69
|
-
*/
|
|
70
|
-
get value(): Node | string;
|
|
71
|
-
/**
|
|
72
|
-
* Returns the DOM element of the Editor.
|
|
73
|
-
*/
|
|
74
|
-
get element(): HTMLElement | null;
|
|
75
|
-
/**
|
|
76
|
-
* Returns the content-editable DOM element of the Editor.
|
|
77
|
-
*/
|
|
78
|
-
get contentElement(): HTMLDivElement | null;
|
|
79
|
-
/**
|
|
80
|
-
* Returns the `view` object of the Editor.
|
|
81
|
-
*/
|
|
82
|
-
get view(): EditorView | undefined;
|
|
83
|
-
private _element;
|
|
84
|
-
private _view?;
|
|
85
|
-
private _contentElement;
|
|
86
|
-
private iframe;
|
|
87
|
-
private trOnChange;
|
|
88
|
-
private htmlOnChange;
|
|
89
|
-
private pasteEvent?;
|
|
90
|
-
private readonly showLicenseWatermark;
|
|
91
|
-
private readonly licenseMessage?;
|
|
92
|
-
constructor(props: EditorProps);
|
|
93
|
-
/**
|
|
94
|
-
* @hidden
|
|
95
|
-
*/
|
|
96
|
-
componentDidMount(): void;
|
|
97
|
-
/**
|
|
98
|
-
* @hidden
|
|
99
|
-
*/
|
|
100
|
-
componentDidUpdate(prevProps: EditorProps): void;
|
|
101
|
-
/**
|
|
102
|
-
* @hidden
|
|
103
|
-
*/
|
|
104
|
-
componentWillUnmount(): void;
|
|
105
|
-
/**
|
|
106
|
-
* @hidden
|
|
107
|
-
*/
|
|
108
|
-
focus: () => void;
|
|
109
|
-
/**
|
|
110
|
-
* @hidden
|
|
111
|
-
*/
|
|
112
|
-
render(): React.JSX.Element;
|
|
113
|
-
private renderDialog;
|
|
114
|
-
private renderTool;
|
|
115
|
-
private updateTools;
|
|
116
|
-
private initialize;
|
|
117
|
-
private filterTransaction;
|
|
118
|
-
private onPasteHtml;
|
|
119
|
-
private dispatchTransaction;
|
|
120
|
-
private onFocus;
|
|
121
|
-
private onBlur;
|
|
122
|
-
private onPaste;
|
|
123
|
-
private onIFrameInit;
|
|
124
|
-
}
|
|
125
|
-
export {};
|
|
45
|
+
export declare const Editor: React.ForwardRefExoticComponent<EditorProps & React.RefAttributes<EditorHandle>>;
|
package/Editor.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const he=require("react"),s=require("prop-types"),T=require("@progress/kendo-react-buttons"),S=require("@progress/kendo-react-common"),c=require("@progress/kendo-editor-common"),W=require("./config/defaultStyles.js"),Ee=require("./config/toolsSettings.js"),Re=require("./dialogs/index.js"),H=require("./utils/index.js"),G=require("./utils/props-key.js"),Se=require("./utils/controlled-value.js"),J=require("./package-metadata.js"),m=require("./messages/index.js"),we=require("@progress/kendo-react-intl");function Ce(u){const k=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const v in u)if(v!=="default"){const w=Object.getOwnPropertyDescriptor(u,v);Object.defineProperty(k,v,w.get?w:{enumerable:!0,get:()=>u[v]})}}return k.default=u,Object.freeze(k)}const t=Ce(he),{link:Q,bold:Le,italic:Pe,underline:qe}=Ee.EditorToolsSettings,j=t.forwardRef((u,k)=>{const{tools:v=[],defaultEditMode:w="iframe",preserveWhitespace:X="full",style:C,className:Y}=u,[Z,L]=t.useState({view:void 0,linkDialog:!1}),I=t.useRef(null),g=t.useRef(null),F=t.useRef(null),l=t.useRef(void 0),h=t.useRef(null),P=t.useRef(null),q=t.useRef(void 0),a=t.useRef(u);a.current=u;const ee=t.useCallback(e=>{I.current=e},[]),te=t.useCallback(e=>{F.current=e},[]),re=t.useCallback(e=>{g.current=e},[]),[ne]=t.useState(()=>!S.validatePackage(J.packageMetadata,{component:"Editor"})),[ae]=t.useState(()=>S.getLicenseMessage(J.packageMetadata)),B=we.useLocalization(),N=t.useRef(null);t.useImperativeHandle(N,()=>({get element(){return I.current},get contentElement(){return g.current},get view(){return l.current},get value(){return h.current!==null?h.current.doc:a.current.value!==void 0?a.current.value:l.current?l.current.state.doc:a.current.defaultContent||""},get props(){return a.current},focus:()=>{l.current&&l.current.focus()}})),t.useImperativeHandle(k,()=>N.current),S.useWebMcpRegister("editor",N,u,u.webMcp);const p=()=>N.current,oe=t.useRef((e,r)=>{var i,y;const n={target:p(),transaction:e,state:r};return((y=(i=a.current).onExecute)==null?void 0:y.call(i,n))!==!1}).current,se=t.useRef(e=>{if(a.current.onPasteHtml&&q.current){const r={target:p(),pastedHtml:e,nativeEvent:q.current},n=a.current.onPasteHtml(r);if(q.current=void 0,typeof n=="string")return n}return e}).current,ce=t.useRef(e=>{const r=e.docChanged;if(a.current.onChange&&r){h.current=e;const i=e.doc,y=e.doc.type.schema,E={target:p(),value:i,html:"",transaction:e,schema:y};Object.defineProperty(E,"html",{get:()=>(P.current=H.EditorUtils.getHtml({doc:i,schema:y}),P.current)}),a.current.onChange(E)}const n=l.current;n&&(a.current.value===void 0||!r)&&n.updateState(n.state.apply(e))}).current,ue=t.useRef((e,r)=>{if(a.current.onFocus){const n={target:p(),nativeEvent:r};a.current.onFocus(n)}return!1}).current,ie=t.useRef((e,r)=>{if(a.current.onBlur){const n={target:p(),nativeEvent:r};a.current.onBlur(n)}return!1}).current,le=t.useRef((e,r)=>(a.current.onPasteHtml&&(q.current=r),!1)).current,de=t.useRef(e=>{if(a.current.onIFrameInit){const r={target:p(),iframe:e};a.current.onIFrameInit(r)}return!1}).current,fe=t.useRef((e,r)=>{L(n=>({...n,view:e}))}).current;t.useEffect(()=>{var U;const e=F.current,r=e==null?void 0:e.contentWindow;if(r){const o=r.document;if(!o.head.querySelector("meta[charset]")){const f=o.createElement("meta");f.setAttribute("charset","utf-8"),o.head.appendChild(f)}const d=o.body.querySelector(".k-content");d?(d.textContent="",g.current=d):(g.current=o.createElement("div"),o.body.appendChild(g.current),g.current.classList.add("k-content")),g.current.setAttribute("role","textbox"),g.current.setAttribute("aria-label",a.current.ariaLabel||B.toLanguageString(m.keys.contentAreaLabel,m.messages[m.keys.contentAreaLabel])),a.current.ariaLabelledBy&&g.current.setAttribute("aria-labelledby",a.current.ariaLabelledBy),a.current.ariaDescribedBy&&g.current.setAttribute("aria-describedby",a.current.ariaDescribedBy),e&&a.current.onIFrameInit?de(e):o.head.querySelector("style")||[W.defaultStyle,W.tablesStyles,a.current.dir==="rtl"?W.rtlStyles:void 0].forEach(f=>{if(f){const b=o.createElement("style");b.appendChild(o.createTextNode(f)),o.head.appendChild(b)}})}const n=g.current;if(!n)return;const i=(U=a.current.preserveWhitespace)!=null?U:"full",y=[new c.Plugin({view:(()=>({update:fe})),key:new c.PluginKey("toolbar-tools-update-plugin")}),new c.Plugin({filterTransaction:oe,key:new c.PluginKey("onExecute-event-plugin")}),new c.Plugin({key:G.editorPropsKey,state:{init:()=>({preserveWhitespace:i}),apply:(o,d)=>d}}),c.spacesFix(),c.caretColor(),c.history(),c.dropCursor(),c.gapCursor(),c.tableEditing(),c.cspFix()],E={...H.EditorUtils.getShortcuts({types:{listItem:"list_item",hardBreak:"hard_break"},toolsSettings:{bold:Le,italic:Pe,underline:qe}}),"Mod-k":()=>{const o=l.current;if(o){const d=o.state,f=d.selection.empty,b=c.getMark(d,d.schema.marks[Q.mark]);f&&!b||L(R=>R.linkDialog?R:{...R,linkDialog:!0})}return!0},"Alt-F10":()=>{var d;const o=(d=I.current)==null?void 0:d.querySelector(".k-toolbar");if(o){const f=o.querySelector(T.toolbarButtons.join(","));if(f)return f.focus(),!0}return!1}},{defaultContent:pe="",value:D,onMount:x}=a.current,ve=D&&typeof D!="string"?D:H.EditorUtils.createDocument(new c.Schema({nodes:c.nodes,marks:c.marks}),D||pe,{preserveWhitespace:i}),z={state:c.EditorState.create({plugins:[...y,c.keymap(E),c.keymap(c.baseKeymap)],doc:ve}),transformPastedHTML:se,dispatchTransaction:ce,handleDOMEvents:{focus:ue,blur:ie,paste:le},handleDrop:(o,d,f,b)=>{let M=!1;return f.content.nodesBetween(0,f.content.size,R=>{M=M||R.type.name==="table_caption_external"}),M}},ke={plugins:y,shortcuts:E,target:p(),viewProps:z,dom:n},$=(x==null?void 0:x(ke))||new c.EditorView({mount:n},z);return l.current=$,L(o=>({...o,view:$})),()=>{var d,f;l.current&&l.current.destroy(),l.current=void 0;const o=e==null?void 0:e.contentWindow;if(o!=null&&o.document){(f=(d=g.current)==null?void 0:d.parentNode)==null||f.removeChild(g.current);const b=o.document.head;for(;b!=null&&b.firstChild;)b.removeChild(b.firstChild)}}},[]);const O=t.useRef(u.value);if(t.useEffect(()=>{const{value:e}=a.current,r=l.current;if(e===void 0||!r){O.current=e;return}Se.updateEditorValue(r,e,O.current,h.current,P.current),h.current=null,P.current=null,O.current=e}),l.current){const e=G.editorPropsKey.getState(l.current.state);e.preserveWhitespace=X}let A=u.contentStyle;A===void 0&&(C==null?void 0:C.height)===void 0&&(A={height:"300px"});const _=(e,r,n)=>e.displayName||e.name||`tool-${r}-${n}`,ge=(e,r)=>e.map((n,i)=>_(n,r,i)).join("-")||`group-${r}`,K=(e,r,n=!1)=>{const i=t.createElement(e,{view:l.current,dir:u.dir,key:r,className:n?"k-toolbar-button":void 0});return i.type===T.ToolbarSeparator?t.createElement(e,{key:r}):i},me=(e,r,n)=>Z[n]&&t.createElement(e,{view:l.current,settings:r,dir:u.dir,onClose:()=>L(i=>({...i,[n]:!1}))}),V=v.map((e,r)=>Array.isArray(e)?t.createElement(T.ButtonGroup,{key:ge(e,r),className:"k-toolbar-button-group"},e.map((n,i)=>K(n,_(n,r,i)))):K(e,_(e,r,0),!0)),be=B.toLanguageString(m.keys.toolbarAriaLabel,m.messages[m.keys.toolbarAriaLabel]),ye=B.toLanguageString(m.keys.contentAreaLabel,m.messages[m.keys.contentAreaLabel]);return t.createElement("div",{ref:ee,className:S.classNames("k-editor",Y,{"k-editor-resizable":u.resizable}),dir:u.dir,style:C},V.length>0&&t.createElement(T.Toolbar,{className:"k-editor-toolbar",keyboardNavigation:u.keyboardNavigation,ariaLabel:be},V),w==="iframe"?t.createElement("div",{className:"k-editor-content"},t.createElement("iframe",{ref:te,frameBorder:"0",title:B.toLanguageString(m.keys.iframeTitle,m.messages[m.keys.iframeTitle]),style:A,className:"k-iframe"})):t.createElement("div",{ref:re,style:A,className:"k-editor-content",role:"textbox","aria-label":ye,"aria-labelledby":u.ariaLabelledBy,"aria-describedby":u.ariaDescribedBy,suppressContentEditableWarning:!0}),me(Re.EditorDialogs.InsertLinkDialog,Q,"linkDialog"),ne&&t.createElement(S.WatermarkOverlay,{message:ae}))});j.propTypes={defaultContent:s.string,value:s.oneOfType([s.object,s.string]),defaultEditMode:s.oneOf(["iframe","div"]),contentStyle:s.object,dir:s.string,className:s.string,ariaDescribedBy:s.string,ariaLabelledBy:s.string,ariaLabel:s.string,style:s.object,tools:s.arrayOf(s.any),keyboardNavigation:s.bool,resizable:s.bool,preserveWhitespace:s.oneOf([!0,!1,"full"]),onMount:s.func,onFocus:s.func,onBlur:s.func,onChange:s.func,onPasteHtml:s.func,onExecute:s.func,onIFrameInit:s.func};j.displayName="KendoReactEditor";exports.Editor=j;
|