Issue #2422Opened November 23, 2019by MartinPutz2 reactions

[BUG] Unable to add 'space' character if zoom is applied on canvas

Question

Cannot edit text components properly if a zoom value is applied on the canvas.

GrapesJS version:0.15.8

The issue can be reproduced in the demo as well: https://jsfiddle.net/1n9ruwa4/

Expected behavior: Zoom is applied on canvas using:editor.Canvas.setZoom() The text components can be still edited and 'space'(Keycode:32) characters added

Current behavior: Zoom is applied on canvas using:editor.Canvas.setZoom() Even though other characters can be added/edited, you are not able to add new 'space' characters since the space character is also used for 'repositioning' canvas if zoom is applied. The grab cursor style is shown and you could drag the canvas by 'space + drag'

Steps to reproduce: Open jsfiddle demo above(with editor.Canvas.setZoom(90)) Try to edit the hello world text Try to add a 'space' character

The size of the zoom level does not matter, the issue happens with any value.

Answers (3)

mattdeighMay 7, 20201 reactions

Ahhh, I see it now. Wasn't tracking with the code completely. I'll play around with that and let you know what I come up with.

SphenoxJuly 16, 20211 reactions

I'm writing on this issue, since you can't add a 'space', if you are focused on an <a> or a <button>. It is reproducable in the demo, if you add a Link: https://jsfiddle.net/1n9ruwa4/ Reason is because of the notTextable config from the canvas.

  notTextable: ['button', 'a', 'input[type=checkbox]', 'input[type=radio]']

I don't see the point, why "button" and "a" are in this array, since the RTE also works on these elements. But you probably know more than me... Does it make sense to just remove them from the array, or do you see another solution?

Btw, thanks a lot for the work you do, I'm having a blast working with GrapesJS :D

artfNovember 27, 20190 reactions

Thanks @MartinPutz good catch

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.