feat: show/hide citations

Author: aydin-utting

frontend/app/transcriptions/[transcriptionId]/MinuteTab/components/editor/tiptap-editor.tsx

@@ -33,11 +33,13 @@ function SimpleEditor({
   onContentChange,
   isEditing,
   currentTranscription,
+  hideCitations,
 }: {
   initialContent: string
   onContentChange: (newContent: string) => void
   isEditing: boolean
   currentTranscription: Transcription
+  hideCitations: boolean
 }) {
   const {
     citationPopover,
@@ -56,7 +58,7 @@ function SimpleEditor({
           props: {
             decorations(state) {
               const decorations: Decoration[] = []
-              const citationRegex = /\[(\d+)\]/g
+              const citationRegex = /(\s?)\[(\d+)\]/g
 
               state.doc.descendants((node, pos) => {
                 if (node.isText) {
@@ -67,6 +69,11 @@ function SimpleEditor({
                     const to = from + match[0].length
                     decorations.push(
                       Decoration.inline(from, to, {
+                        style: 'display: var(--citation-display);',
+                      })
+                    )
+                    decorations.push(
+                      Decoration.inline(from + match[1].length, to, {
                         class: 'citation-link',
                         style:
                           'color: blue; cursor: pointer; text-decoration: underline;',
@@ -266,7 +273,15 @@ function SimpleEditor({
         </div>
       )}
 
-      <EditorContent editor={editorObject} className={cn('editor-content')} />
+      <EditorContent
+        editor={editorObject}
+        className={cn('editor-content')}
+        style={
+          {
+            '--citation-display': hideCitations ? 'none' : 'unset',
+          } as React.CSSProperties
+        }
+      />
 
       {citationPopover && (
         <CitationPopoverWrapper

frontend/app/transcriptions/[transcriptionId]/MinuteTab/minute-editor/minute-editor.tsx

@@ -23,6 +23,8 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import {
   Download,
   Edit,
+  Eye,
+  EyeOff,
   FilePenLine,
   FileQuestion,
   FileX2,
@@ -46,6 +48,7 @@ export function MinuteEditor({
   minute: MinuteListItem
 }) {
   const [version, setVersion] = useState(0)
+  const [hideCitations, setHideCitations] = useState(false)
   const { data: minuteVersions = [], isLoading } = useQuery({
     ...listMinuteVersionsMinutesMinuteIdVersionsGetOptions({
       path: { minute_id: minute.id! },
@@ -82,6 +85,12 @@ export function MinuteEditor({
     }
   }, [form, minuteVersion])
   const htmlContent = form.watch('html')
+  const contentToCopy = useMemo(() => {
+    return htmlContent?.replaceAll(/\s?\[(\d+)\]/g, '') || ''
+  }, [htmlContent])
+  const hasCitations = useMemo(() => {
+    return !!htmlContent?.match(/\[(\d+)\]/)
+  }, [htmlContent])
   useEffect(() => {}, [htmlContent])
   const { mutate: saveEdit } = useMutation({
     ...createMinuteVersionMinutesMinuteIdVersionsPostMutation(),
@@ -250,9 +259,29 @@ export function MinuteEditor({
             Download
           </Button>
           <CopyButton
-            textToCopy={htmlContent}
+            textToCopy={contentToCopy}
             posthogEvent="editor_content_copied"
           />
+          {hasCitations && (
+            <Button
+              variant="outline"
+              onClick={() => setHideCitations((h) => !h)}
+              disabled={isEditable}
+            >
+              {isEditable ? (
+                'Citations shown when editing'
+              ) : hideCitations ? (
+                <>
+                  <Eye /> Show Citations
+                </>
+              ) : (
+                <>
+                  <EyeOff />
+                  Hide Citations
+                </>
+              )}
+            </Button>
+          )}
         </div>
         <div className="flex gap-2">
           <RatingButton
@@ -272,6 +301,7 @@ export function MinuteEditor({
               initialContent={minuteVersion.html_content || ''}
               isEditing={isEditable}
               onContentChange={onChange}
+              hideCitations={hideCitations && !isEditable}
             />
           )}
         />