@progress/kendo-react-editor/dialogs/insertImage.js

React Editor enables users to create rich text content through a WYSIWYG interface. KendoReact Editor package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const L=require("react"),F=require("@progress/kendo-react-dialogs"),N=require("@progress/kendo-react-buttons"),C=require("@progress/kendo-editor-common"),S=require("@progress/kendo-react-intl"),s=require("../messages/index.js"),f=require("@progress/kendo-react-inputs"),c=require("@progress/kendo-react-form");function T(d){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const l in d)if(l!=="default"){const r=Object.getOwnPropertyDescriptor(d,l);Object.defineProperty(a,l,r.get?r:{enumerable:!0,get:()=>d[l]})}}return a.default=d,Object.freeze(a)}const e=T(L);let x=class extends e.Component{constructor(){super(...arguments),this.src=null,this.altText=null,this.title=null,this.width=null,this.height=null,this.onClose=()=>{this.props.view.focus(),this.props.onClose()},this.onInsert=()=>{const{view:a,settings:l}=this.props,k=a.state.schema.nodes[l.node],o={src:this.src?this.src.value:null,title:this.title?this.title.value:null,alt:this.altText?this.altText.value:null,width:this.width?this.width.value:null,height:this.height?this.height.value:null},u=Object.keys(o).filter(n=>o[n]!==null&&o[n]!=="").reduce((n,m)=>Object.assign(n,{[m]:o[m]}),{}),h=k.createAndFill(u);h&&C.insertNode(h,!0)(a.state,m=>a.dispatch(m.setMeta("commandName",l.commandName).setMeta("args",u))),this.onClose()}}render(){const{view:a,settings:l,dir:r,render:k}=this.props,{insertImageDialogTitle:o,insertImageAddress:u,insertImageTitle:h,insertImageAltText:n,insertImageWidth:m,insertImageHeight:E,insertImageCancel:I,insertImageInsert:w}=l.messages,i=S.provideLocalizationService(this),p=a&&a.state;let g={};p&&p.selection instanceof C.NodeSelection&&p.selection.node.type===p.schema.nodes[l.node]&&(g=p.selection.node.attrs);const b=e.createElement(c.Form,{render:()=>e.createElement(c.FormElement,{horizontal:!0},e.createElement(c.FieldWrapper,null,e.createElement("label",{htmlFor:"k-editor-image-url",className:"k-form-label"},i.toLanguageString(u,s.messages[u])),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(f.Input,{type:"text",id:"k-editor-image-url",defaultValue:g.src,ref:t=>{this.src=t&&t.element},autoFocus:!0}))),e.createElement(c.FieldWrapper,null,e.createElement("label",{htmlFor:"k-editor-image-url",className:"k-form-label"},i.toLanguageString(n,s.messages[n])),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(f.Input,{type:"text",id:"k-editor-image-alt",defaultValue:g.alt,ref:t=>{this.altText=t&&t.element}}))),e.createElement(c.FieldWrapper,null,e.createElement("label",{htmlFor:"k-editor-image-title",className:"k-form-label"},i.toLanguageString(h,s.messages[h])),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(f.Input,{type:"text",id:"k-editor-image-title",defaultValue:g.title,ref:t=>{this.title=t&&t.element}}))),e.createElement(c.FieldWrapper,null,e.createElement("label",{htmlFor:"k-editor-image-width",className:"k-form-label"},i.toLanguageString(m,s.messages[m])),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(f.Input,{type:"text",id:"k-editor-image-width",defaultValue:g.width,ref:t=>{this.width=t&&t.element}}))),e.createElement(c.FieldWrapper,null,e.createElement("label",{htmlFor:"k-editor-image-height",className:"k-form-label"},i.toLanguageString(E,s.messages[E])),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(f.Input,{id:"k-editor-image-height",defaultValue:g.height,ref:t=>{this.height=t&&t.element}}))))}),v=[e.createElement(N.Button,{onClick:this.onClose,dir:r,key:"cancel"},i.toLanguageString(I,s.messages[I])),e.createElement(N.Button,{onClick:this.onInsert,themeColor:"primary",dir:r,key:"insert"},i.toLanguageString(w,s.messages[w]))],y=e.createElement(F.Window,{initialWidth:500,initialHeight:350,className:"k-editor-window",title:i.toLanguageString(o,s.messages[o]),onClose:this.onClose,key:"dialog",style:r==="rtl"?{textAlign:"right"}:void 0,modal:!0,minimizeButton:()=>null,maximizeButton:()=>null,resizable:!1},b,e.createElement(F.WindowActionsBar,null,...v));return k?k(y,{content:b,actionButtons:v}):y}};S.registerForLocalization(x);exports.InsertImageDialog=x;