jodit - npm Package Versions

4.3.1

:boom: Breaking Change

• Added the popupRoot option for all IViewBased classes (Dialog, Jodit, FileBrowser). Allows you to specify the parental element of dialogs and popup windows.
• If the option is not specified, then when creating a dialogue, there is a bypass of a tree, starting with the editor. If an element is found dialog or eny element with position: fixed or position: absolute, then it is used as a parent.
• Also, shadowRoot can be used as a popupRoot

Those. Parent search priorities:

1. popupRoot option
2. shadowRoot option
3. The closest element dialog or with style position: fixed or position: absolute
4. document.body

This is necessary in cases where Jodit is displayed inside the dialog windows with a focus interception. For example, when inserting in [mui dialog] (https://mui.com/material-ui/react-dialog/)

If this is your situation, then in most cases you won't need to do anything, as Jodit will find the correct parent element on its own. But if your code logic was configured specifically to insert into document.body, then you will need to explicitly specify popupRoot: document.body

const editor = Jodit.make('#editor', {
	popupRoot: document.body
});

4.2.45

• Fixed bug with RTL mode when all dialogs were opened without RTL mode

4.2.41

:rocket: New Feature

• Related issue: The video plugin only support content from youtube and vimeo #1170 Added options video.defaultWidth, video.defaultHeight, and video.parseUrlToVideoEmbed to the video plugin. The parseUrlToVideoEmbed option allows you to add your own video parser.

  Jodit.make('#editor', {
  	buttons: 'video',
  	video: {
  		defaultWidth: 560, // Default: 400
  		defaultHeight: 315, // Default: 345
  		parseUrlToVideoEmbed: (url, size) => {
  			// Add your own video provider
  			if (/https:\/\/sitename\.com/.test(url)) {
  				return `<iframe width="${size.width}" height="${size.height}" src="${url}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`;
  			}
  
  			return Jodit.modules.Helpers.convertMediaUrlToVideoEmbed(
  				url,
  				size
  			);
  		}
  	},
  	controls: {
  		video: {
  			tooltip: 'Insert video'
  		}
  	}
  });