Resize images on editor

[MatheusRich]

Is your feature request related to a problem? Please describe.
I would like to be able to resize images inside the editor. That way, content would be more flexible. I didn't find a way to do this through tiptap.

Describe the solution you'd like
Adding a resize option like this (gif bellow) would help so much!

Describe alternatives you've considered
I really don't know how to implement this. Should this be on the Image plugin or a totally separated plugin? If you guys give some ideas I could make a PR.

[dev7ch]

you could do this currently by manipulating the size manually via an input e.g. in a modal where detached from the editor but your feature request would be a great improvement for image handling 👍

Ì think you can achieve that by creating a custom plugin, you could use the image component as starting point and just adding a custom, separated vue view (getView()), where you could handle your custom dragging/resizing event (or implement a custom lib)

[korkies22]

I'm also interested in this feature

[nijat13]

Hi guys,
Any updates?

[owen-gxz]

@scrumpy In the plan?I'm also interested in this feature

[philippkuehn]

for now I don't have plans to implement this in the core package

[littlecxm]

any updates?

[iamdhrooov]

:( need this

[mikelwellsmore]

Definitely need this :O

[RyonMB]

I really need this too

[theodorenguyen45]

My workaround for this at the moment:

I created CustomResizableImage component:

<template>

  <node-view-wrapper as="span" class="image-container">

    <img

      v-bind="node.attrs"

      ref="resizableImg"

      :draggable="isDraggable"

      :data-drag-handle="isDraggable"

    />

    <v-icon

      class="ml-n3 resize-icon hidden"

      ref="icon"

      @mousedown="onMouseDown"

    >

      mdi-arrow-top-left-bottom-right-bold

    </v-icon>

  </node-view-wrapper>

</template>

<script>

import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-2';

export default {

  components: {

    NodeViewWrapper,

  },

  props: nodeViewProps,

  data: () => ({

    isResizing: false,

    lastMovement: {},

    count: 0,

  }),

  computed: {

    isDraggable() {

      return this.node?.attrs?.isDraggable;

    },

  },

  watch: {},

  mounted() {},

  methods: {

    onMouseDown(e) {

      e.preventDefault();

      this.isResizing = true;

      window.addEventListener('mousemove', this.throttle(this.onMouseMove));

      window.addEventListener('mouseup', this.onMouseUp);

    },

    onMouseUp(e) {

      // e.preventDefault();

      this.isResizing = false;

      this.lastMovement = {};

      window.removeEventListener('mousemove', this.throttle(this.onMouseMove));

      window.removeEventListener('mouseup', this.onMouseUp);

    },

    throttle(fn, wait = 60, leading = true) {

      let prev, timeout, lastargs;

      return (...args) => {

        lastargs = args;

        if (timeout) return;

        timeout = setTimeout(

          () => {

            timeout = null;

            prev = [Date.now](http://date.now/)();

            // let's do this ... we'll release the stored args as we pass them through

            fn.apply(this, lastargs.splice(0, lastargs.length));

            // some fancy timing logic to allow leading / sub-offset waiting periods

          },

          leading ? (prev && Math.max(0, wait - [Date.now](http://date.now/)() + prev)) || 0 : wait

        );

      };

    },

    onMouseMove(e) {

      e.preventDefault();

      if (!this.isResizing) {

        return;

      }

      if (!Object.keys(this.lastMovement).length) {

        this.lastMovement = { x: e.x, y: e.y };

        return;

      }

      if (e.x === this.lastMovement.x && e.y === this.lastMovement.y) {

        return;

      }

      let nextX = e.x - this.lastMovement.x;

      let nextY = e.y - this.lastMovement.y;

      const width = this.$refs.resizableImg.width + nextX;

      const height = this.$refs.resizableImg.height + nextY;

      this.lastMovement = { x: e.x, y: e.y };

      this.updateAttributes({ width, height });

    },

  },

};

</script>

<style lang="scss" scoped>

.image-container:hover {

  .hidden {

    visibility: visible !important;

  }

}

.image-container {

  overflow: hidden;

  position: relative;

}

.resize-icon {

  position: absolute;

  bottom: 0;

}

::v-deep.resize-icon {

  cursor: se-resize !important;

}

</style>

and rendered it in my CustomImage Extension

import Image from '@tiptap/extension-image';

import { VueNodeViewRenderer } from '@tiptap/vue-2';

import ResizableImageTemplate from './ResizableImageTemplate.vue';

const CustomImage = Image.extend({

	name: 'CustomImage',

	addAttributes() {

		// Return an object with attribute configuration

		return {

			...this.parent?.(),

			src: {

				default: '',

				renderHTML: attributes => {

					// … and return an object with HTML attributes.

					return {

						src: attributes.src,

					};

				},

			},

			width: {

				default: 750,

				renderHTML: ({ width }) => ({ width }),

			},

			height: {

				default: 500,

				renderHTML: ({ height }) => ({ height }),

			},

			isDraggable: {

				default: true,

				// We don't want it to render on the img tag

				renderHTML: attributes => {

					return {};

				},

			},

		};

	},

	addNodeView() {

		return VueNodeViewRenderer(ResizableImageTemplate);

	},

});

export { CustomImage };

export default CustomImage;

After that, just use this CustomImage instead of the original Image.

EDITED: Return src attribute instead of style

[naffarn]

My workaround for this at the moment:

I created CustomResizableImage component

@theodorenguyen45 You're a life saver, I've been having real issues trying to write an extension for this and yours is great, thanks so much!

[theodorenguyen45]

@naffarn Glad it helps, I just updated the CustomImage component code a little bit. For src attribute, it should render src instead of style.