Cannot edit/add content to table cells

[franciscastro]

Describe the bug Clicking the cells to add content does not let me add content. This consistently happens on an empty table. In cases where the table is not empty (say, importing a table from a file to edit — see sample JSON and LaTeX code below), some non-empty cells can be edited upon clicking, but other non-empty cells still won't let me add or edit content.

Answer the following questions

1. Which browser are you using: Firefox 119.0.1 (64-bit)

JSON code

Add the JSON code generated by the editor. To do so, click on "File > Generate JSON" at the top left corner of the editor. It will allow anyone to reproduce the table and any options you selected. Beware of any sensitive or confidential information in your table, as it will be part of the JSON code:

{
    "options": {
        "imp-unknown": false,
        "gen-comma": false,
        "gen-surround": false,
        "latex-whitespace": true,
        "latex-border": true,
        "latex-command": false,
        "latex-split": false,
        "latex-landscape": false,
        "latex-float": true,
        "fit-table": "none",
        "latex-hhline": true,
        "latex-hhline-hash": false,
        "latex-tabu": false,
        "latex-color": false,
        "latex-microfix-alignment": false,
        "tex-escape": true,
        "tex-macro": true,
        "html-indent": "tab",
        "html-tbody": false,
        "html-remove-tag": false,
        "csv-separator": ",",
        "bbcode-header": "1",
        "pretext-indent": "two",
        "context-split": false,
        "context-landscape": false,
        "context-float": true,
        "context-indent": "two",
        "wml-indent": "four",
        "latexEnv": "Auto"
    },
    "autoBooktabs": true,
    "caption": {
        "caption": "Summary of activities for the codesign workshops, including the artifacts collected from the workshop activities",
        "numbered": false,
        "label": "tab:workshop-activities"
    },
    "cells": [
        [
            {
                "dataset": {
                    "borderBottom": "normal",
                    "verticalAlign": "t"
                },
                "html": "<b>Workshop</b>",
                "css": "border-bottom: 1px solid rgb(0, 0, 0);"
            },
            {
                "dataset": {
                    "borderBottom": "normal",
                    "verticalAlign": "t"
                },
                "html": "<b>Workshop Activities</b>",
                "css": "border-bottom: 1px solid rgb(0, 0, 0);"
            },
            {
                "dataset": {
                    "borderBottom": "normal",
                    "verticalAlign": "t"
                },
                "html": "<b>Data/Artifacts Collected<br></b>",
                "css": "border-bottom: 1px solid rgb(0, 0, 0);"
            }
        ],
        [
            {
                "dataset": {
                    "align": "c"
                },
                "html": "1",
                "rowSpan": 2
            },
            {
                "dataset": {
                    "borderTop": "normal"
                },
                "html": "Designing movements in tandem with remixing <br><br>code to draw shapes with danceon",
                "css": "border-top: 1px solid rgb(0, 0, 0);"
            },
            {
                "dataset": {
                    "borderTop": "normal",
                    "borderBottom": "normal",
                    "verticalAlign": "t"
                },
                "html": "<ul><li>Video and audio recording</li><li>danceon code: drawing shapes</li></ul> ",
                "css": "border-top: 1px solid rgb(0, 0, 0); border-bottom: 1px solid rgb(0, 0, 0);",
                "rowSpan": 2
            }
        ],
        [
            {
                "dataset": {
                    "borderBottom": "normal"
                },
                "html": "Focus group discussion on working with danceon<br>and using it to teach dance and computing<br>",
                "css": "border-bottom: 1px solid rgb(0, 0, 0);"
            }
        ],
        [
            {
                "dataset": {
                    "borderTop": "normal",
                    "align": "c"
                },
                "html": "2",
                "css": "border-top: 1px solid rgb(0, 0, 0);",
                "rowSpan": 4
            },
            {
                "dataset": {
                    "verticalAlign": "t",
                    "borderTop": "normal"
                },
                "html": "Brainstorming dance and computing concepts to <br><br>teach students",
                "css": "border-top: 1px solid rgb(0, 0, 0);"
            },
            {
                "dataset": {
                    "borderBottom": "normal",
                    "borderTop": "normal",
                    "verticalAlign": "t"
                },
                "html": "<ul><li>Video and audio recording</li><li>danceon code: using conditionals</li><li>Learning activity writeup</li></ul>   ",
                "css": "border-bottom: 1px solid rgb(0, 0, 0); border-top: 1px solid rgb(0, 0, 0);",
                "rowSpan": 4
            }
        ],
        [
            {
                "dataset": {
                    "verticalAlign": "t"
                },
                "html": "Embodiment exercise on \"painting pictures with<br>your body\" <br>"
            }
        ],
        [
            {
                "dataset": {
                    "verticalAlign": "t"
                },
                "html": "Remixing code and using conditionals in danceon&nbsp;<br>to trigger when to draw animations<br>"
            }
        ],
        [
            {
                "dataset": {
                    "verticalAlign": "t",
                    "borderBottom": "normal"
                },
                "html": "Designing a learning activity to teach students<br>about conditionals with danceon<br>",
                "css": "border-bottom: 1px solid rgb(0, 0, 0);"
            }
        ],
        [
            {
                "dataset": {
                    "borderTop": "normal",
                    "align": "c"
                },
                "html": "3",
                "css": "border-top: 1px solid rgb(0, 0, 0);",
                "rowSpan": 5
            },
            {
                "dataset": {
                    "verticalAlign": "t",
                    "borderTop": "normal"
                },
                "html": "Embodiment exercise on body, location, and <br><br>spatial orientation",
                "css": "border-top: 1px solid rgb(0, 0, 0);"
            },
            {
                "dataset": {
                    "borderBottom": "normal",
                    "borderTop": "normal",
                    "verticalAlign": "t"
                },
                "html": "<ul><li>Video and audio recording</li><li>danceon code: working with distance<br></li><li>Dance and code concept groupings</li></ul>    ",
                "css": "border-bottom: 1px solid rgb(0, 0, 0); border-top: 1px solid rgb(0, 0, 0);",
                "rowSpan": 5
            }
        ],
        [
            {
                "dataset": {
                    "verticalAlign": "t"
                },
                "html": "Remixing code to explore ways to work with <br><br>distance in danceon"
            }
        ],
        [
            {
                "dataset": {
                    "verticalAlign": "t"
                },
                "html": "Using visual analysis on a sample image to think&nbsp;<br>about distances and spatial orientation in danceon<br>"
            }
        ],
        [
            {
                "dataset": {
                    "verticalAlign": "t"
                },
                "html": "Focus group discussion on using visual analysis<br>to draw animations in danceon<br>"
            }
        ],
        [
            {
                "dataset": {
                    "borderBottom": "normal",
                    "verticalAlign": "t"
                },
                "html": "Focus group discussion on connections across<br>dance and computing concepts<br>",
                "css": "border-bottom: 1px solid rgb(0, 0, 0);"
            }
        ],
        [
            {
                "dataset": {
                    "borderTop": "normal",
                    "align": "c"
                },
                "html": "4",
                "css": "border-top: 1px solid rgb(0, 0, 0);",
                "rowSpan": 3
            },
            {
                "dataset": {
                    "borderTop": "normal",
                    "verticalAlign": "t"
                },
                "html": "Exploring machine learning models in danceon<br>with a pre-trained model using Teachable Machine<br>",
                "css": "border-top: 1px solid rgb(0, 0, 0);"
            },
            {
                "dataset": {
                    "borderBottom": "normal",
                    "borderTop": "normal",
                    "verticalAlign": "t"
                },
                "html": "<ul><li>Video and audio recording</li><li>danceon code: using ML models<br></li></ul>  ",
                "css": "border-bottom: 1px solid rgb(0, 0, 0); border-top: 1px solid rgb(0, 0, 0);",
                "rowSpan": 3
            }
        ],
        [
            {
                "dataset": {
                    "verticalAlign": "t"
                },
                "html": "Focus group discussions on observations of&nbsp;<br>machine learning model behavior<br>"
            }
        ],
        [
            {
                "dataset": {
                    "borderBottom": "normal",
                    "verticalAlign": "t"
                },
                "html": "Train your own machine learning model with <br><br>Teachable Machine and test it out in danceon",
                "css": "border-bottom: 1px solid rgb(0, 0, 0);"
            }
        ],
        [
            {
                "dataset": {
                    "borderTop": "normal",
                    "align": "c"
                },
                "html": "5",
                "css": "border-top: 1px solid rgb(0, 0, 0);",
                "rowSpan": 3
            },
            {
                "dataset": {
                    "verticalAlign": "t",
                    "borderTop": "normal"
                },
                "html": "Unplugged neural network algorithm simulation",
                "css": "border-top: 1px solid rgb(0, 0, 0);"
            },
            {
                "dataset": {
                    "borderTop": "normal",
                    "verticalAlign": "t"
                },
                "html": "<ul><li>Video and audio recording</li><li>Learning activity writeup<br></li></ul>  ",
                "css": "border-top: 1px solid rgb(0, 0, 0);",
                "rowSpan": 3
            }
        ],
        [
            {
                "dataset": {
                    "verticalAlign": "t"
                },
                "html": "Focus group discussion on machine learning<br>algorithms, data, biases, impact on tech design<br>"
            }
        ],
        [
            {
                "dataset": {
                    "verticalAlign": "t"
                },
                "html": "Brainstorming and designing a learning activity&nbsp;<br>to teach dance and AI with danceon<br>"
            }
        ]
    ],
    "version": "3.1"
}

Related LaTeX code

Insert any related LaTeX code here:

\begin{table}
\centering
\caption{Summary of activities for the codesign workshops, including the artifacts collected from the workshop activities}
\label{tab:workshop-activities}
\begin{tabular}{cll} 
\toprule
\multicolumn{1}{l}{\vcell{\textbf{Workshop}}} & \vcell{\textbf{Workshop Activities}} & \vcell{\textbf{Data/Artifacts Collected}} \\[-\rowheight]
\multicolumn{1}{l}{\printcelltop} & \printcelltop & \printcelltop \\ 
\hline
\multirow{2}{*}{1} & \vcell{\begin{tabular}[b]{@{}l@{}}Designing movements in tandem with remixing \\\\code to draw shapes with danceon\end{tabular}} & \multirow{2}{*}{\begin{tabular}{@{\labelitemi\hspace{\dimexpr\labelsep+0.5\tabcolsep}}l@{}}Video and audio recording\\danceon code: drawing shapes\end{tabular}} \\[-\rowheight]
 & \printcellmiddle &  \\
 & \begin{tabular}[c]{@{}l@{}}Focus group discussion on working with danceon\\and using it to teach dance and computing\end{tabular} &  \\ 
\hline
\multirow{4}{*}{2} & \vcell{\begin{tabular}[b]{@{}l@{}}Brainstorming dance and computing concepts to \\\\teach students\end{tabular}} & \multirow{4}{*}{\begin{tabular}{@{\labelitemi\hspace{\dimexpr\labelsep+0.5\tabcolsep}}l@{}}Video and audio recording\\danceon code: using conditionals\\Learning activity writeup\end{tabular}} \\[-\rowheight]
 & \printcelltop &  \\
 & \vcell{\begin{tabular}[b]{@{}l@{}}Embodiment exercise on "painting pictures with\\your body" \end{tabular}} &  \\[-\rowheight]
 & \printcelltop &  \\
 & \vcell{\begin{tabular}[b]{@{}l@{}}Remixing code and using conditionals in danceon~\\to trigger when to draw animations\end{tabular}} &  \\[-\rowheight]
 & \printcelltop &  \\
 & \vcell{\begin{tabular}[b]{@{}l@{}}Designing a learning activity to teach students\\about conditionals with danceon\end{tabular}} &  \\[-\rowheight]
 & \printcelltop &  \\ 
\hline
\multirow{5}{*}{3} & \vcell{\begin{tabular}[b]{@{}l@{}}Embodiment exercise on body, location, and \\\\spatial orientation\end{tabular}} & \multirow{5}{*}{\begin{tabular}{@{\labelitemi\hspace{\dimexpr\labelsep+0.5\tabcolsep}}l@{}}Video and audio recording\\danceon code: working with distance\\Dance and code concept groupings\end{tabular}} \\[-\rowheight]
 & \printcelltop &  \\
 & \vcell{\begin{tabular}[b]{@{}l@{}}Remixing code to explore ways to work with \\\\distance in danceon\end{tabular}} &  \\[-\rowheight]
 & \printcelltop &  \\
 & \vcell{\begin{tabular}[b]{@{}l@{}}Using visual analysis on a sample image to think~\\about distances and spatial orientation in danceon\end{tabular}} &  \\[-\rowheight]
 & \printcelltop &  \\
 & \vcell{\begin{tabular}[b]{@{}l@{}}Focus group discussion on using visual analysis\\to draw animations in danceon\end{tabular}} &  \\[-\rowheight]
 & \printcelltop &  \\
 & \vcell{\begin{tabular}[b]{@{}l@{}}Focus group discussion on connections across\\dance and computing concepts\end{tabular}} &  \\[-\rowheight]
 & \printcelltop &  \\ 
\hline
\multirow{3}{*}{4} & \vcell{\begin{tabular}[b]{@{}l@{}}Exploring machine learning models in danceon\\with a pre-trained model using Teachable Machine\end{tabular}} & \multirow{3}{*}{\begin{tabular}{@{\labelitemi\hspace{\dimexpr\labelsep+0.5\tabcolsep}}l@{}}Video and audio recording\\danceon code: using ML models\end{tabular}} \\[-\rowheight]
 & \printcelltop &  \\
 & \vcell{\begin{tabular}[b]{@{}l@{}}Focus group discussions on observations of~\\machine learning model behavior\end{tabular}} &  \\[-\rowheight]
 & \printcelltop &  \\
 & \vcell{\begin{tabular}[b]{@{}l@{}}Train your own machine learning model with \\\\Teachable Machine and test it out in danceon\end{tabular}} &  \\[-\rowheight]
 & \printcelltop &  \\ 
\hline
\multirow{3}{*}{5} & \vcell{Unplugged neural network algorithm simulation} & \multirow{3}{*}{\begin{tabular}{@{\labelitemi\hspace{\dimexpr\labelsep+0.5\tabcolsep}}l@{}}Video and audio recording\\Learning activity writeup\end{tabular}} \\[-\rowheight]
 & \printcelltop &  \\
 & \vcell{\begin{tabular}[b]{@{}l@{}}Focus group discussion on machine learning\\algorithms, data, biases, impact on tech design\end{tabular}} &  \\[-\rowheight]
 & \printcelltop &  \\
 & \vcell{\begin{tabular}[b]{@{}l@{}}Brainstorming and designing a learning activity~\\to teach dance and AI with danceon\end{tabular}} &  \\[-\rowheight]
 & \printcelltop &  \\
\bottomrule
\end{tabular}
\end{table}

[zcorn2017]

I encountered the same issue here. Runs well with chromium-based browsers.

[dbitouze]

Worse experience for me: with Firefox 122.0 (64 bits) on GNU/Linux Mageia 9:

• many crucial links on the main page cannot be clicked: "File", "Table", all the those in the "New" set of links, the table grid, "Copy to Clipboard",
• while some other can be clicked: "Output", all those in the "$ Math", "Insert over", "Merge cells", "Draw borders" sets of links, "Generate", "LaTeX", all the boxes and drop down list in "Options", almost all in "Cell properties", "Convert to Minimal Working Example (MWE)", etc.

[JDMCreator]

I'm trying to figure out these issue, but can't reproduce it on my side. Are you using some browser extensions?

[dbitouze]

I'm trying to figure out these issue, but can't reproduce it on my side. Are you using some browser extensions?

Thanks for your investigation and, indeed, it does work when all the browser extensions are deactivated. I'll check which is (are) the culprit(s).

[JDMCreator]

I'm trying to figure out these issue, but can't reproduce it on my side. Are you using some browser extensions?

Thanks for your investigation and, indeed, it does work when all the browser extensions are deactivated. I'll check which is (are) the culprit(s).

Were you able to find which browser extensions are involved with this bug?