Issue #2332💬 AnsweredOpened October 16, 2019by kondziu950 reactions

Can not edit label in Firefox browser

快速解答by artf

https://bugzilla.mozilla.org/show_bug.cgi?id=853519 Probably the easiest solution would be to force the View to use span tag instead of label

Read full answer below ↓

Question

Hi,

I can not edit label in Firefox browser (v. 69.0.3). The issue occurs when I double click the component to edit it. RTE shows toolbar but changing text or attributes is unable. The web console does not show any errors. When the text is selected and I am trying to for example bold the text then in web console there is an error:

NS_ERROR_FAILURE: 4 grapes.min.js:12
    value https://grapesjs.com/js/grapes.min.js?v0.15.8:12
    result https://grapesjs.com/js/grapes.min.js?v0.15.8:12
    <anonimowa> https://grapesjs.com/js/grapes.min.js?v0.15.8:12

After triple click text can be edited but only whole text. Can not select only part of the text or move cursor left or right to change only part of the text.

Double click issue Steps to reproduce (actual behavior):

  1. Put label block to the canvas,
  2. Double click the label to edit it,
  3. Cannot edit text or text attributes (bold, etc.)

Expected behavior:

  1. Put label block to the canvas,
  2. Double click the label to edit it,
  3. Can edit text and text attributes (bold, etc.)

issue - dbl

Triple click issue Steps to reproduce (actual behavior):

  1. Put label block to the canvas,
  2. Triple click the label to edit it,
  3. Can edit text but can not edit text attributes (bold, etc.) and move cursor left or right using arrows keys

Expected behavior:

  1. Put label block to the canvas,
  2. Triple click the label to edit it,
  3. Can edit text, text attributes (bold, etc.) and move cursor left or right using arrows keys

issue - triple

Answers (2)

schmelikFebruary 4, 2023

This was an interesting fix but it comes with issues...

spans != labels

when applying padding to the labels such as bootstrap labels the padding will not be applied to a span not unless display: inline-block; is also applied to the span

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...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.