From 22d6ed9d5a07b6c6acb668ee6c0db9bd3e6e4ecd Mon Sep 17 00:00:00 2001
From: Dennis Collaris <d.collaris@me.com>
Date: Thu, 24 Oct 2024 21:05:57 +0200
Subject: [PATCH] feat: hide edit buttons and insert variable controls on
report preview
---
libs/shared/lib/components/textEditor/TextEditor.tsx | 2 +-
.../components/textEditor/plugins/InsertVariablesPlugin.tsx | 2 ++
.../lib/components/textEditor/plugins/PreviewPlugin.tsx | 5 +++++
3 files changed, 8 insertions(+), 1 deletion(-)
diff --git a/libs/shared/lib/components/textEditor/TextEditor.tsx b/libs/shared/lib/components/textEditor/TextEditor.tsx
index f3ba1ce03..2b931b872 100644
--- a/libs/shared/lib/components/textEditor/TextEditor.tsx
+++ b/libs/shared/lib/components/textEditor/TextEditor.tsx
@@ -40,7 +40,7 @@ export function TextEditor({ editorState, setEditorState, showToolbar, placehold
return (
<LexicalComposer initialConfig={initialConfig}>
- <div className="flex items-center bg-secondary-50 rounded mt-4 space-x-2">
+ <div className="editor-toolbar flex items-center bg-secondary-50 rounded mt-4 space-x-2">
<PreviewPlugin contentEditable={contentEditableRef} />
{showToolbar && <ToolbarPlugin />}
</div>
diff --git a/libs/shared/lib/components/textEditor/plugins/InsertVariablesPlugin.tsx b/libs/shared/lib/components/textEditor/plugins/InsertVariablesPlugin.tsx
index ba2fdcfab..c6932a3b6 100644
--- a/libs/shared/lib/components/textEditor/plugins/InsertVariablesPlugin.tsx
+++ b/libs/shared/lib/components/textEditor/plugins/InsertVariablesPlugin.tsx
@@ -44,6 +44,7 @@ export const InsertVariablesPlugin = () => {
type="dropdown"
label={`${nodeType} variable`}
value=""
+ className="insert-variable"
options={optionsForType(nodeType)}
onChange={(v) => onChange(`${nodeType} ${v}`, VariableType.statistic)}
/>
@@ -53,6 +54,7 @@ export const InsertVariablesPlugin = () => {
type="dropdown"
label={`Visualization`}
value=""
+ className="insert-variable"
options={visualizationOptions}
onChange={(v) => onChange(v, VariableType.visualization)}
/>
diff --git a/libs/shared/lib/components/textEditor/plugins/PreviewPlugin.tsx b/libs/shared/lib/components/textEditor/plugins/PreviewPlugin.tsx
index 4f9c450d2..d6a2bd2f9 100644
--- a/libs/shared/lib/components/textEditor/plugins/PreviewPlugin.tsx
+++ b/libs/shared/lib/components/textEditor/plugins/PreviewPlugin.tsx
@@ -109,6 +109,8 @@ export function PreviewPlugin({ contentEditable }: { contentEditable: RefObject<
if (editor == null) return;
editor.classList.add('hidden');
+ document.querySelectorAll('.editor-toolbar > div:not(.toolbar-preview)').forEach((el) => el.classList.add('hidden'));
+ document.querySelectorAll('.insert-variable').forEach((el) => el.classList.add('hidden'));
let preview = editor.parentElement?.querySelector('.editor + .preview');
preview?.classList.remove('hidden');
@@ -125,6 +127,9 @@ export function PreviewPlugin({ contentEditable }: { contentEditable: RefObject<
if (editor == null) return;
editor.classList.remove('hidden');
+ document.querySelectorAll('.editor-toolbar > div:not(.toolbar-preview)').forEach((el) => el.classList.remove('hidden'));
+ document.querySelectorAll('.insert-variable').forEach((el) => el.classList.remove('hidden'));
+
editor?.querySelector('div')?.focus();
let preview = editor.parentElement?.querySelector('.editor + .preview');
--
GitLab