
Security News
/Research
Wallet-Draining npm Package Impersonates Nodemailer to Hijack Crypto Transactions
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
@classuper/quill-video-resize-module
Advanced tools
A module for Quill rich text editor to allow videos to be resized.
A module for Quill rich text editor to allow videos to be resized. Lazily adaptated from kensnyder/quill-image-resize-module
import Quill from 'quill';
import VideoResize from 'quill-video-resize-module';
Quill.register('modules/videoResize', VideoResize);
const quill = new Quill(editor, {
// ...
modules: {
// ...
videoResize: {
// See optional "config" below
}
}
});
/!\ You also need to add CSS to disable pointer-events in the video iframe while in editor mode to prevent
.quill-editor iframe {
pointer-events: none;
}
Copy video-resize.min.js into your web root or include from node_modules
<script src="/node_modules/quill-video-resize-module/video-resize.min.js"></script>
var quill = new Quill(editor, {
// ...
modules: {
// ...
VideoResize: {
// See optional "config" below
}
}
});
/!\ You also need to add CSS to disable pointer-events in the video iframe while in editor mode to prevent
.quill-editor iframe {
pointer-events: none;
}
For the default experience, pass an empty object, like so:
var quill = new Quill(editor, {
// ...
modules: {
// ...
VideoResize: {}
}
});
Functionality is broken down into modules, which can be mixed and matched as you like. For example,
the default is to include all modules:
```javascript
const quill = new Quill(editor, {
// ...
modules: {
// ...
VideoResize: {
modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
}
}
});
Each module is described below.
Resize
- Resize the videoAdds handles to the video's corners which can be dragged with the mouse to resize the video.
The look and feel can be controlled with options:
var quill = new Quill(editor, {
// ...
modules: {
// ...
VideoResize: {
// ...
handleStyles: {
backgroundColor: 'black',
border: 'none',
color: white
// other camelCase styles for size display
}
}
}
});
DisplaySize
- Display pixel sizeShows the size of the video in pixels near the bottom right of the video.
The look and feel can be controlled with options:
var quill = new Quill(editor, {
// ...
modules: {
// ...
VideoResize: {
// ...
displayStyles: {
backgroundColor: 'black',
border: 'none',
color: white
// other camelCase styles for size display
}
}
}
});
Toolbar
- Video alignment toolsDisplays a toolbar below the video, where the user can select an alignment for the video.
The look and feel can be controlled with options:
var quill = new Quill(editor, {
// ...
modules: {
// ...
VideoResize: {
// ...
toolbarStyles: {
backgroundColor: 'black',
border: 'none',
color: white
// other camelCase styles for size display
},
toolbarButtonStyles: {
// ...
},
toolbarButtonSvgStyles: {
// ...
},
}
}
});
BaseModule
- Include your own custom moduleYou can write your own module by extending the BaseModule
class, and then including it in
the module setup.
For example,
import { Resize, BaseModule } from 'quill-video-resize-module';
class MyModule extends BaseModule {
// See src/modules/BaseModule.js for documentation on the various lifecycle callbacks
}
var quill = new Quill(editor, {
// ...
modules: {
// ...
VideoResize: {
modules: [ MyModule, Resize ],
// ...
}
}
});
v1.1.0 - June 26, 2019
FAQs
A module for Quill rich text editor to allow videos to be resized.
We found that @classuper/quill-video-resize-module demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.
Security News
/Research
Malicious Nx npm versions stole secrets and wallet info using AI CLI tools; Socket’s AI scanner detected the supply chain attack and flagged the malware.