With the overlay active, hold the mouse down, or touch, on the overlay to display size. Release to dismiss the display. If using relative sizing, the relative size will be shown with current absolute display size in brackets. If using absolute sizing and the current display size differs from the width attribute value (for example, the width value is wider than the editor width), the dimensions based on the width attribute will be shown first with current display size in brackets.
If no width has been set on the blot, and the blot is an image, the image size will be shown (along with current display size if different). The size information box will be active during resizing for interactive feedback. Styling of the size information box is possible via `options.overlay.sizeInfoStyle`. #### Options There are five settings most likely of interest: ```js resize: { allowResizing: true, allowResizeModeChange: false, useRelativeSize: false, imageOversizeProtection: false, minimumWidthPx: 25, }, ``` - `allowResizing: boolean`: allow blots to be resized. Setting this to false stops the `Resize` action loading when the formatter overlay is activated. This will disable the drag handles in the overlay corners and not load the event listeners that handle resizing. - `allowResizeModeChange: boolean`: shows the `%` button on the toolbar. Clicking this toggles the size mode between absolute and relative. See [Using Relative Sizes](#using-relative-sizes) for more details. If `allowResizing` is `false`, the `Resize` action will not be loaded and the `%` button will not be available. - `useRelativeSize: boolean`: if `true` then use relative sizes by default or use relative sizes for all resize operations depending on value set for `allowResizeModeChange`. See [Using Relative Sizes](#using-relative-sizes) for more details. - `imageOversizeProtection: boolean`:warning:*New in 2.2.2*: when set to true, prevents an image being resized larger than its natural width to prevent degradation of image quality. This is only applicable when the resize mode is absolute (px) and not relative (%). If the image `src` is an `svg` (either embedded or linked), the image is exempt from this limit. - `minimumWidthPx: number`: the minimum width (px) a blot can be shrunk to during a resize operation. Additionally, `handleClassName` and `handleStyle` are availble to control the drag handle styling (see [Options](./src/Options.ts)) #### Using Relative Sizes Version 2.2 introduces relative sizing as an option. If used, the size will be set as a proportion of the Quill editor useable width (`quill.root` width minus horizontal padding). A blot must be resized (i.e. have a width attribute) to use relative sizing. Relative sizing is not enabled by default. > [!IMPORTANT] > ***Regardless of settings, blots will retain their original/current width attribute units until resized.*** A blot sizing will not change from absolute to relative (or vice versa) without first being resized or actively using the mode change `%` button. The only exception is an unsized image being aligned with `allowResizeModeChange = false` and `useRelativeSize = true` - in this case, the image will have a relative size set based on its natural width as a proportion of the editor width (up to 100%). There are two ways to apply the rule to use relative (or absolute) sizing. ##### With `allowResizeModeChange = false`: No toolbar `%` button is present to change size mode (the default setting). `useRelativeSize = false` - any resize action will set the width attribute in pixels. This is the default setting. `useRelativeSize = true` - any resize action will set the width attribute in % as a proportion of the editor width (minus padding). Aligning an unsized image with this setting will set the image width to relative. ##### With `allowResizeModeChange = true`: A toolbar `%` button is present to toggle size mode from absolute to relative. With `allowResizeModeChange = true`, the `useRelativeSize` setting is only applied to blots that do not already have a width attribute. The size mode for existing width attributes is maintained. For example, resizing a blot with a width attribute in px with `useRelativeSize = true` will not change the size mode. You can then change the sizing mode with the `%` button. When changing from absolute to relative size, you may notice a small change in display size on the blot. Relative sizes are rounded to the nearest whole number % which may result in the displayed width adjusting slighlty up or down. #### Resizing on touch screens :warning:*New in version 2.2* Resize blots on a touch screen via the pinch gesture: with the formatter overlay active, touch the overlay with two fingers, control the size by spreading/contracting the fingers The drag handles do not respond well on a touch screen, it is recommended to use the pinch gesture. ### Delete Action When the overlay is active, this action will delete the underlying blot on pressing either delete or backspace. #### Options To disable the Delete action, use the following setting: ```typescript delete: { allowKeyboardDelete: false, }, ``` ### Attribute Action (image blots only) From version 2.1, `alt` and `title` image attributes can be edited from the **`T`** button on the overlay toolbar.  > [!CAUTION] > :exclamation: **IMPORTANT NOTE REGARDING QUILL AND IMAGE TITLES** :exclamation: > > At the time of writing, the current version of Quill (v2.0.3) does not natively support storing the title attribute in the image delta. As such, when you reload the editor, the title attribute will be lost. There is a Quill [pull request](https://github.com/slab/quill/pull/4350) to address this. > > This package includes an updated Image blot that addresses this issue. > > To use that updated blot, simply include the following in your `blotFormatter2` options: > > ```typescript > image: { > registerImageTitleBlot: true > } > ``` > ***This is not enabled by default as this can potentially overwrite any custom Image blot you might have in use.*** > > If you use a custom image blot, leave `registerImageTitleBlot` out of your options and be sure to add `title` to supported attributes. #### Options To disable alt/title editing use the following option (default `true`): ```typescript image: { allowAltTitleEdit: false, }, ``` The alt/title modal is customisable in terms of style, icons and label text (:warning:*New in 2.2.1*): ```typescript image: { altTitleModalOptions: { styles: { modalBackground: { [key: string]: any } | null | undefined; // screen background mask modalContainer: { [key: string]: any } | null | undefined;; // modal dialog label: { [key: string]: any } | null | undefined; // form labels textarea: { [key: string]: any } | null | undefined; // textareas submitButton: { [key: string]: any } | null | undefined; // submit button cancelButton: { [key: string]: any } | null | undefined; // cancel button }; icons: { // inner html for buttons (svg recommended) submitButton: string; cancelButton: string; }; labels: { // text for labels (for multi-lang support) alt: string; title: string; }; } } ``` ##### Styles Any of the styles specified above will be merged with the default styles unless `null` is specified, in which case the style attribute will be absent from the rendered modal. You can also specify `styles: null` to remove all inline styles from the modal. If you prefer to use CSS to style the modal, you can use `div[data-blot-formatter-modal]` in your selector to target the rendered modal elements. ##### Icons Specify a string representation of an svg (without width/height attributes) or other suitable inner HTML for the buttons. ##### Labels For multi-lingual sites, you can change the modal form labels in the options. For example: ```typescript image: { altTitleModalOptions: { labels: { alt: "Alt tekst", title: "Bildetittel", }; } } ``` #### Using the title as caption For aligned images (assuming your image blot is inline), the image title is copied into the `data-title` attribute of the wrapping `` tag. ```html
```
You can make use of the `data-title` attribute to display a caption using the [suggested css](#css) below.
### Compress Action (embedded image blots only)
:warning: *New in version 2.2.2*
The Compress Action will reduce the size of embedded images that meet the criteria for reduction.
> [!IMPORTANT]
> The Compressor Action is not available for linked (external) images, or embedded SVG's & GIF's.
>
>This action is not enabled by default.
To compress an image, activate the formatter for that image and click the 'compress image' button:
The button is only visible for eligible image types.
All compressed images are jpeg format.
Images are considered 'compressible' if
- They are larger than the `maxWidth` value in options (if any - see *Options* below).
- The image has been resized and its `width` attribute is smaller than its natural width. This condition will only be met if it has been resized with absolute units (px, rem or em).
Images resized with relative (%) unit will only be reduced if they are larger than the `maxWidth` value.
A modal is used to confirm the action before compressing. The styles and text content of the modal are fully cusomtisable in the options. The modal has a default prompt and a 'more info' button to expand a more detailed explantaion. These can be configured in options. Set the 'more info' text to `null` to hide the button.
When completed, a feedback box is displayed in the formatter overlay to show the reduced amount in kB, as well as the initial and final dimensions for the image. If the image is not compressible (already optimum size), this is displayed instead of the modal.
#### Options
```typescript
image: {
allowCompressor: Boolean;
compressorOptions: {
jpegQuality: number;
maxWidth?: number | null;
styles? : {
modalBackground?: { [key: string]: any } | null | undefined;
modalContainer?: { [key: string]: any } | null | undefined;
buttonContainer?: { [key: string]: any } | null | undefined;
buttons?: { [key: string]: any } | null | undefined;
} | null | undefined;
text: {
prompt: string;
moreInfo: string | null;
reducedLabel: string;
nothingToDo: string;
};
icons: {
continue: string;
moreInfo: string;
cancel: string;
};
}
}
```
- `allowCompressor`: enable the Compressor Action (`false` by default).
- `jpegQuality`: jpeg quality (compression factor) to apply when reducing the image. Must be 0 - 1 where 0 is absolute compression (lowest quality) and 1 is no compression (highest quality). `0.8` by default. This value will typically reduce the file size to 30% of the original without any noticeable degradation of image quality.
- `maxWidth`: if set, will reduce images to this size if the image has no width attribute, or is resized with relative (%) units, and is larger than the `maxWidth` value. `null` by default.
- `styles`: Any of the styles specified above will be merged with the default styles unless null is specified, in which case the style attribute will be absent from the rendered modal. You can also specify `styles: null` to remove all inline styles from the modal. If you prefer to use CSS to style the modal, you can use `div[data-blot-formatter-compress-modal]` in your selector to target the rendered modal elements.
- `text`: text or rich text HTML for the modal and feedback box
- `prompt` - text for the modal when opened
- `moreInfo` - extra detail for the user when clicking the `?` button. Setting this to `null` hides the `?` button.
- `reducedLabel` - label for the file size reduction feedback ("Reduced" in the screenshot above).
- `nothingToDo` - text shown in the feedback box when there is no compression to do.
- `icons` - Specify a string representation of an svg (without width/height attributes) or other suitable inner HTML for the buttons.
### Link Action
:warning: *New in version 2.4*
This action manages hyperlinks on image blots. It is intended to facilitate placing links directly on images, especially useful for those images that have a floating style applied.
The link button is enabled by default. To hide the link button, set `allowLinkEdit` to `false` (see **Options** below).
- If the image has a link, the button will show active.
- Click the link button to display the form. The current value will be displayed if already set.
- Clear the input or click the bin icon to remove the link.
> [!IMPORTANT]
> If a link spans an image, editing the link in the BlotFormatter may have unintended results including removing the link after the image and leaving the original link in front of the image. Only the image itself will take the new value. For spanning links, close the overlay and use the built-in Quill link editor instead.
#### Options
As with other modals, the styling is fully customisable via the options, either by setting styles or using css classes.
```typescript
image: {
allowLinkEdit: Boolean; // show link button for adding/editing links
modal: {
dialog: {
className: string; // class name applied to the link modal dialog
style?: { [key: string]: any } | null | undefined; // style applied to the modal dialog, or null to prevent styles
};
background: {
className: string; // class name for screen background mask
style?: { [key: string]: any } | null | undefined; // style for screen background mask
};
form: {
className: string; // class name applied to the form element
style?: { [key: string]: any } | null | undefined; // style applied to the form, or null to prevent styles
};
label: {
className: string; // class name applied to the label element
style?: { [key: string]: any } | null | undefined; // style applied to the label, or null to prevent styles
text: string; // text content for the label element
};
input: {
className: string; // class name applied to the input element
style?: { [key: string]: any } | null | undefined; // style applied to the input, or null to prevent styles
placeholder?: string | null | undefined; // placeholder text for the input
};
buttons: {
submit: {
className: string; // class name applied to the submit button
style?: { [key: string]: any } | null | undefined; // style applied to the submit button, or null to prevent styles
icon: string; // inner html for submit button (svg recommended)
tooltip: string; // tooltip text for submit button
},
cancel: {
className: string; // class name applied to the cancel button
style?: { [key: string]: any } | null | undefined; // style applied to the cancel button, or null to prevent styles
icon: string; // inner html for cancel button (svg recommended)
tooltip: string; // tooltip text for cancel button
},
remove: {
className: string; // class name applied to the remove button
style?: { [key: string]: any } | null | undefined; // style applied to the remove button, or null to prevent styles
icon: string; // inner html for remove button (svg recommended)
tooltip: string; // tooltip text for remove button
}
}
}
}
```
### Caret Action
:warning: *New in version 2.4*
This action adds listeners to the left and right arrow keys to deactivate the blot formatter overlay and place the caret before or after the image. The response to the right arrow key relies on the browser API to position the caret correctly as Quill native methods will incorrectly position the caret inside the formatting span wrapper. If any of the blot formatter modals are open, the action is disabled.
There are no options for this action.
## Included Custom Blots
This package includes two custom blots, one each for `Image` and `Video` that override the Quill blot types of the same name.
> :warning: ***Neither blot is registered by default***. To register these blots with Quill, use the following options:
```typescript
blotFormatter2: {
image: {
registerImageTitleBlot: true,
},
video: {
registerCustomVideoBlot: true,
}
}
```
### Image
This is a modified `Image` blot (*[source](/src/blots/Image.ts)*) that adds `title` attribute support to the default Quill `Image` blot. If you use the `Attribute` action for alt/title editing, you must either use this blot or register your own with `title` support.
This blot will not remove an empty `alt` attribute. This for accessibilty compatibility and allows editors to set a blank `alt` to tell screenreaders to ignore the image.
A factory method to create the class object is exported as `createAltTitleImageBlotClass`.
**Usage**
```js
const ImageAltTitleBlot = createAltTitleImageBlotClass(Quill);
Quill.register({ 'formats/image': ImageAltTitleBlot }, true);
```
This is done by `BlotFormatter2` if you use the `registerImageTitleBlot` option.
### Video
This is a modified `Video` blot (*[source](/src/blots/Video.ts)*) that will add the video with aspect ratio of 16:9 (the default for YouTube) and an initial width of 100% instead of the default 350x150px.
If you'd like to use the custom blot with a different aspect ratio, you can set this via the `defaultAspectRatio` setting. For example, to set 2:1:
```typescript
video: {
registerCustomVideoBlot: true,
defaultAspectRatio: '2/1 auto'
}
```
This blot also fixes a [Quill bug](https://github.com/slab/quill/issues/4289) where the video embed is outputted as a hyperlink when using `quill.getSemanticHTML()`. Using this custom blot, the iframe will be replicated exactly as it is in the editor.
A factory method to create the class object is exported as `createResponsiveVideoBlotClass`.
**Usage**
```js
const VideoResponsive = createResponsiveVideoBlotClass(Quill);
Quill.register({ 'formats/video': VideoResponsive }, true);
```
This is done by `BlotFormatter2` if you use the `registerCustomVideoBlot` option.
## Formatting Images
> :warning: **New in 2.2**
>
> Resized images will always have their `height` attribute set to `auto`. The original `blot-formatter` package set a fixed pixel height which caused distortion if the `width` exceeded the `max-width` styling for that image. If upgrading to 2.2 from previous versions, you will need to resize images to get this fix.
### Options
```typescript
image: {
allowAltTitleEdit: true,
registerImageTitleBlot: false,
registerArrowRightFix: true
},
```
- `allowAltTitleEdit: boolean`: show the alt/title `T` button on the overlay (see previous section)
- `registerImageTitleBlot: boolean`: registers the custom Image blot that supports the delta for the title attribute (see previous section)
- `registerArrowRightFix: boolean`: registers a keyboard binding that fixes a Quill bug where the cursor disappears when moved by right arrow into the `span` tag for the image.
## Formatting Videos
> :warning: **New in 2.2**
>
> Custom aspect ratios are now supported for iframes.
>
> Each iframe now gets a unique proxy image for touch screen compatibility. Proxy images now exist in the Quill container rather than the end of the document body for compatibility with scrollable editors.
:warning: If you use a scrollable editor, make sure to set the container overflow to `hidden`. See [Scrollable Editors](#scrollable-editors) below for more information.
When adding a video to the editor content, blot-formatter-2 will assign it a transparent 'proxy-image' mask to prevent interaction with the iframe content. Clicking this proxy image will activate the formatter overlay for that video.
Proxy image positions are maintained whenever one of the following occurs: Quill's `text-change` event fires, either the window or editor is scrolled, the editor is resized (included mobile screen orientation change).
> [!IMPORTANT]
> ***It is recommended that you set an `aspect-ratio` style on your iframes, either via inline style or css. This is imperative for relative sizing of iframes.***
### Options
```typescript
video: {
selector: 'iframe.ql-video',
registerCustomVideoBlot: false,
registerBackspaceFix: true,
defaultAspectRatio: '16/9 auto',
proxyStyle: {}
}
```
- `selector: string`: this is used to determine which elements are iframes to assign proxy images to. If you use a custom video blot without the Quill default `ql-video` class, amend this to suit your needs.
- `defaultAspectRatio: string`: Sets the aspect ratio used by the custom video blot if registered. If no aspect ratio has been defined either via inline style or CSS, and the size mode is relative, this value will be used during resizing. Note, in this case, this is not sticky and will not be saved into the Quill delta.
- `registerCustomVideoBlot: boolean`: Registers a custom video blot with aspect-ratio specified by `defaultAspectRatio` which is `aspect-ratio: 16 / 9 auto;` by default (the Youtube default) and initial width 100% (see below).
- `registerBackspaceFix: boolean`: Registers a backspace keyboard binding that fixes the following [Quill bug](https://github.com/slab/quill/issues/4364): *If there are two adjacent video blots and the first is deleted with backspace, the size attributes of deleted blot are passed into the remaining blot.*
- `proxyStyle: { [key: string]: any } | null | undefined`: an optional mapped type of style settings to add to the proxy image. For troubleshooting any issues to do with proxy positioning, it can be useful to use `{'border': '5px red solid'}` to help visualise the proxy placement.
## CSS
Suggested css can be found in [src/css/quill-blot-formatter2.css](https://github.com/enzedonline/quill-blot-formatter2/blob/master/src/css/quill-blot-formatter2.css) (shown below). This is also exported to the dist folder and published via npm:
```html
```
**These styles are not loaded automatically**, it is up to you to load the styles relevant to your site.
### Suggested CSS
This is available via [CDN](#via-cdn) or via [import](#via-import-react-etc) if your environment supports this.
```css
div.ql-editor {
--blot-align-left-margin: 0.5rem 1rem 0.5rem 0;
--blot-align-center-margin: 1rem auto;
--blot-align-right-margin: 0.5rem 0 0.5rem 1rem;
}
/* image wrapper common */
div.ql-editor [class^="ql-image-align-"] {
display: flex;
flex-wrap: wrap;
width: var(--resize-width);
max-width: 100%;
}
div.ql-editor [class^="ql-image-align-"]>img {
flex: 1 1 auto;
z-index: 1; /* prevents clipping by neighbouring text margin in some cases */
}
/* left */
div.ql-editor .ql-image-align-left,
div.ql-editor .ql-iframe-align-left {
margin: var(--blot-align-left-margin);
float: left;
}
/* centre */
div.ql-editor .ql-image-align-center,
div.ql-editor .ql-iframe-align-center {
margin: var(--blot-align-center-margin);
}
/* right */
div.ql-editor .ql-image-align-right,
div.ql-editor .ql-iframe-align-right {
margin: var(--blot-align-right-margin);
float: right;
}
/* image caption */
/* common */
div.ql-editor [class^="ql-image-align-"][data-title] {
margin-bottom: 0;
}
div.ql-editor [class^="ql-image-align-"][data-title]::after {
content: attr(data-title);
padding: 0.25rem 0.2rem;
font-size: 0.9rem;
line-height: 1.1;
background-color: white;
width: 100%;
}
/* remove text decoration on caption when image linked */
a:has([class^="ql-image-align-"]>img) {
text-decoration: none !important;
}
/* left */
div.ql-editor .ql-image-align-left[data-title]::after {
text-align: left;
}
/* center */
div.ql-editor .ql-image-align-center[data-title]::after {
text-align: center;
}
/* right */
div.ql-editor .ql-image-align-right[data-title]::after {
text-align: right;
}
```
> :warning: **New in 2.2**
>
> The `--resize-width` style property was introduced in version 2.2 and is a copy of the target element `width` attribute. Setting the `width` on the `span` wrapper with this value allows the use of `flex` display and a cleaner style including no longer clipping the image with wrapped image captions. If you're upgrading this package from previous versions, this attribute will not be present until you load the blot in an editor.
>
> If you have content from previous versions and want to take advantage of this styling without needing to update every aligned image in your content, you can use the following to allow the two formats to coexist:
>
> Version 2.2 also introduced the `data-relative` attribute as a css helper for sites using mixed absolute and relative sizes. It is added to every formatted image but not present on blots aligned in previous versions. To apply the previous styling to pre-2.2 content, add `:not[data-relative]` to each of your align selectors on your previous css definitions and add `[data-relative]` to each of the align selectors above.
>
> For example:
>
> ```css
> /* pre-2.2 styling */
> div.ql-editor .ql-image-align-center:not[data-relative],
> div.ql-editor .ql-iframe-align-center:not[data-relative] {
> margin: 0.5rem auto;
> display: block;
> }
> /* post 2.2 styling */
> div.ql-editor .ql-image-align-center[data-relative],
> div.ql-editor .ql-iframe-align-center[data-relative] {
> margin: var(--blot-align-center-margin);
>}
>```
### Modals
If you use Quill in a modal form with elevated `z-index`, you may need to increase the `z-index` for the proxies to correctly cover the iframes. This can be done using the `video.proxyStyle` setting in `Options`. For example:
```typescript
video: {
proxyStyle: {
zIndex: 10
}
}
```
Alternatively, use css to amend the style for `img.blot-formatter__proxy-image`.
```css
img.blot-formatter__proxy-image {
z-index: 10; /* use an appropriate value here */
}
```
Take care that the proxy image doesn't have a higher `z-index` than the Quill toolbar as this could result in the proxy covering toolbar buttons.
> [!IMPORTANT]
> See also the note below regarding [scrollable Quill editors](#scrollable-editors) if your editor is scrollable or has a `max-height` attribute.
### Conditional Styling for Responsive Sites
One conundrum facing responsive designers faced with an element that could be any width is how to deal with this in a sensible manner when considering smaller screen sizes. You can set all images to 100% at screens below 600px for example, but this is treating all images as equal whether they be 20px or 2000px (or 10% or 75%) for example. In this case, if you had an image with width 20% and breakpoint at 600px, your image will abruptly jump from 120px to 600px as the screen resizes below that threshold.
It is possible to use the `--resize-width` style property to incrementally increase the width of aligned images to a maximum of 100%.
Example css below progressively expands relative-sized images by 20% up to a maximum of 100% for each 100px reduction in screen size from 900 to 500px.
```css
div.ql-editor [class^="ql-image-align-"] {
width: var(--resize-width);
max-width: 100%;
}
@media (max-width: 900px) {
div.ql-editor [class^="ql-image-align-"][data-relative="true"] {
width: calc(var(--resize-width) + 20%);
}
}
@media (max-width: 800px) {
div.ql-editor [class^="ql-image-align-"][data-relative="true"] {
width: calc(var(--resize-width) + 40%);
}
}
@media (max-width: 700px) {
div.ql-editor [class^="ql-image-align-"][data-relative="true"] {
width: calc(var(--resize-width) + 60%);
}
}
@media (max-width: 600px) {
div.ql-editor [class^="ql-image-align-"][data-relative="true"] {
width: calc(var(--resize-width) + 80%);
}
}
@media (max-width: 500px) {
div.ql-editor [class^="ql-image-align-"][data-relative="true"] {
width: 100%;
}
}
```
> [!Note]
> This is a bit simplistic and can result in adjacent content being 'pinched out' if this was used on a float image or a table for instance and the `calc` statement resulted in a value of (say) between 80% & 100%. A more robust (but complicated) method uses min/max calculations to mimic a logic gate (i.e mimicking an if/else clause) and set the width steps to a fixed width depending on the range that `--resize-width` falls into. A description of that method can be found in [this article](https://enzedonline.com/en/tech-blog/creating-conditional-logic-in-css/).
> [!IMPORTANT]
> It's recommended to only apply these responsive styles outside of the editor (or when the editor is set to read-only) as otherwise this would interfere with the ability to resize blots at those screen sizes.
## Quill Bug Fixes
There are two Quill bug fixes available through BlotFormatter.
### registerArrowRightFix
- Registers a keyboard binding that fixes a Quill bug where the cursor disappears when moved by right arrow into the `span` tag for the image.
Enabled by default, disable in options with:
```typescript
image: {
registerArrowRightFix: false
},
```
### containTooltipPosition
:warning: *new in version 3.0*
- Prevents Quill rendering the tooltip element outside of the Quill container. This is especially useful for scrollable Quill editors where the `quill.container` methed has `overflow: hidden` or `overflow: clip`. If Quill tries to places the tooltip outside of the container bounds, this fix will place inside with a small margin.
- This fix is intended for use with scrollable Quill containers.
> For default option values, see [`DefaultOptions`](https://github.com/enzedonline/quill-blot-formatter2/blob/master/src/DefaultOptions.ts).
> Object properties are merged, but array properties override the defaults.
> To completely disable styles (`overlay.style`, `resize.handleStyle`, etc) set those to `null`.
## Further Customisations > [!NOTE] > The notes from here on are here only for those who wish to customise the default behaviour and/or work with custom blots. > > `blotFormatter2` is already compatible with Quill `Image` and `Video` blots, no custom blots or actions need be registered to work with this package, though you will need to use the included [custom `Image` blot](#attribute-action-image-blots-only) (or create your own with `title` support) to use the alt/title editing feature. > [!IMPORTANT] > If you create any custom actions that may move or change the content in any way, it is recommended to call `formatter.update()` where `formatter` is the current instance of `BlotFormatter`. This ensures the overlay and proxy positions & sizes are maintained. > > Proxy positions will update on Quill's `text_change` event in any case. For other Quill extensions, they should be raising the `text_change` event when inserting/changing content. If you are forking this project, use `npm run build` to output the UMD & ESM builds, `use npm run dev` to start the Vite server with live changes on the default page and additional pages to test the builds. ### BlotSpec The `BlotSpec` ([/src/specs/BlotSpec.ts](https://github.com/enzedonline/quill-blot-formatter2/blob/master/src/specs/BlotSpec.ts)) classes define how `BlotFormatter` interacts with blots. They take the `BlotFormatter` as a constructor arg and have the following attributes and functions: #### `isUnclickable: boolean` Set to true if this blot type will have a proxy image mask. `false` by default. #### `init(): void` Called after all specs have been constructed. Use this to bind to quill events to determine when to activate a specific spec. #### `getActions(): Array