From a35ddc072defc30a346248f2dcae921d5779e3e0 Mon Sep 17 00:00:00 2001
From: Philipp Mandler <info@philipp-mandler.com>
Date: Thu, 17 Aug 2023 21:02:07 +0200
Subject: [PATCH] =?UTF-8?q?Fix=20speaker=20color=20div=20=F0=9F=90=9Ding?=
 =?UTF-8?q?=20content=20editable?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fixes #314
---
 frontend/src/editor/transcription_editor.tsx | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/frontend/src/editor/transcription_editor.tsx b/frontend/src/editor/transcription_editor.tsx
index 72bcb72f..31f914b1 100644
--- a/frontend/src/editor/transcription_editor.tsx
+++ b/frontend/src/editor/transcription_editor.tsx
@@ -59,10 +59,12 @@ function Paragraph({ element, children, attributes }: RenderElementProps): JSX.E
   const speakerName = useSpeakerName(element.speaker);
 
   const metaInformation = (
-    <div className="md:w-[200px] lg:w-[280px] grid shrink-0 grid-cols-[auto_1fr_auto] select-none">
+    <div
+      className="md:w-[200px] lg:w-[280px] grid shrink-0 grid-cols-[auto_1fr_auto] select-none"
+      contentEditable={false}
+    >
       {/* start time */}
       <div
-        contentEditable={false}
         className={clsx(`text-slate-500 dark:text-neutral-400 tabular-nums`, 'md:mr-4')}
         onClick={() => window.dispatchEvent(new SeekToEvent(startAtom.start))}
       >
@@ -71,10 +73,7 @@ function Paragraph({ element, children, attributes }: RenderElementProps): JSX.E
 
       {/* speaker names */}
       {speakerChanged && (
-        <div
-          contentEditable={false}
-          className="hidden md:block overflow-clip row-start-1 col-start-2"
-        >
+        <div className="hidden md:block overflow-clip row-start-1 col-start-2">
           <div
             className={clsx(
               '-mt-[0.1rem] py-1',
@@ -99,7 +98,6 @@ function Paragraph({ element, children, attributes }: RenderElementProps): JSX.E
       >
         {!readOnly && (
           <SpeakerDropdown
-            contentEditable={false}
             paragraph={element}
             buttonClassName={clsx(
               'text-neutral-500 md:text-neutral-600 md:dark:text-neutral-200',
@@ -115,7 +113,6 @@ function Paragraph({ element, children, attributes }: RenderElementProps): JSX.E
       {/* speaker color indicator */}
       <div className={clsx('relative w-2 h-full', 'mr-2 md:mr-4', 'hidden md:block')}>
         <div
-          contentEditable={false}
           style={{
             ...(element.speaker ? { backgroundColor: speakerColors[element.speaker] } : {}),
           }}