tiptap-extension-izzy-resizable-image 0.1.13 → 0.1.14
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/README.md +2 -0
- package/npm/index.js +20 -7
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -83,6 +83,7 @@ const editor = new Editor({
|
|
|
83
83
|
clear: 'x',
|
|
84
84
|
preview: '🔍',
|
|
85
85
|
},
|
|
86
|
+
alignMenuOrder: ['left', 'center', 'right', 'clear', 'preview', 'size50', 'size100'],
|
|
86
87
|
alignMenuButtonsHide: {
|
|
87
88
|
// hide specific buttons if true
|
|
88
89
|
// left: true,
|
|
@@ -112,6 +113,7 @@ editor.commands.insertResizableImage({ src: 'https://picsum.photos/300/200', wid
|
|
|
112
113
|
- `showAlignMenu: boolean` — whether the inline alignment menu is shown by default.
|
|
113
114
|
- `alignMenuPosition: 'above' | 'below'` — where the menu appears relative to the image.
|
|
114
115
|
- `alignMenuIcons: { left: string, center: string, right: string, clear: string, preview: string }` — HTML strings for menu buttons.
|
|
116
|
+
- `alignMenuOrder: string[]` — order of buttons in the alignment menu (default: `['left', 'center', 'right', 'clear', 'preview', 'size50', 'size100']`). Buttons are displayed in the order specified.
|
|
115
117
|
- `alignMenuButtonsHide: Record<string, boolean>` — hide specific buttons when `true` (supports `left`, `center`, `right`, `clear`, `preview`, `size50`, `size100`).
|
|
116
118
|
- `fitToContainerSelector: string` — CSS selector used as width reference for the initial image fit (default: `.tiptap`).
|
|
117
119
|
- `autoFitWhenOversized: boolean` — when `true`, oversized images inserted without explicit width are automatically set to `width: 100%` and `height: auto` (default: `true`).
|
package/npm/index.js
CHANGED
|
@@ -149,14 +149,26 @@ class ResizableImageView {
|
|
|
149
149
|
this.btnSize50.addEventListener('click', () => this.applyResizePercent(0.5))
|
|
150
150
|
this.btnSize100.addEventListener('click', () => this.applyResizePercent(1))
|
|
151
151
|
|
|
152
|
+
// Button map for ordering
|
|
153
|
+
const buttonMap = {
|
|
154
|
+
'left': this.btnLeft,
|
|
155
|
+
'center': this.btnCenter,
|
|
156
|
+
'right': this.btnRight,
|
|
157
|
+
'clear': this.btnClear,
|
|
158
|
+
'preview': this.btnView,
|
|
159
|
+
'size50': this.btnSize50,
|
|
160
|
+
'size100': this.btnSize100,
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
// Append buttons in the order specified by alignMenuOrder
|
|
152
164
|
const hidden = this.options.alignMenuButtonsHide || {}
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
165
|
+
const order = this.options?.alignMenuOrder || ['left', 'center', 'right', 'clear', 'preview', 'size50', 'size100']
|
|
166
|
+
order.forEach(btnName => {
|
|
167
|
+
const btn = buttonMap[btnName]
|
|
168
|
+
if (btn && !hidden[btnName]) {
|
|
169
|
+
this.menu.appendChild(btn)
|
|
170
|
+
}
|
|
171
|
+
})
|
|
160
172
|
|
|
161
173
|
const menuVerticalPos = node.attrs.alignMenuPosition != null ? node.attrs.alignMenuPosition : (this.options && this.options.alignMenuPosition != null ? this.options.alignMenuPosition : 'below')
|
|
162
174
|
this.updateMenuPosition(menuVerticalPos, node.attrs.align)
|
|
@@ -526,6 +538,7 @@ export const TiptapIzzyExtensionResizableImage = Node.create({
|
|
|
526
538
|
showAlignMenu: true,
|
|
527
539
|
alignMenuPosition: 'below',
|
|
528
540
|
alignMenuIcons: { left: '⟸', center: '⇔', right: '⟹', clear: 'x', preview: '🔍' },
|
|
541
|
+
alignMenuOrder: ['left', 'center', 'right', 'clear', 'preview', 'size50', 'size100'],
|
|
529
542
|
alignMenuButtonsHide: {},
|
|
530
543
|
fitToContainerSelector: '.tiptap',
|
|
531
544
|
autoFitWhenOversized: true,
|