chore(react/type_widget): add preview buttons

apps/client/src/widgets/react/ActionButton.tsx

@@ -5,7 +5,7 @@ import keyboard_actions from "../../services/keyboard_actions";
 
 export interface ActionButtonProps {
     text: string;
-    titlePosition?: "bottom" | "left";
+    titlePosition?: "top" | "right" | "bottom" | "left";
     icon: string;
     className?: string;
     onClick?: (e: MouseEvent) => void;

apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx

@@ -6,11 +6,14 @@ import { TypeWidgetProps } from "../type_widget";
 import "./SplitEditor.css";
 import Split from "split.js";
 import { DEFAULT_GUTTER_SIZE } from "../../../services/resizer";
-import { CodeEditor, EditableCode } from "../code/Code";
+import { EditableCode } from "../code/Code";
+import { ComponentChildren } from "preact";
+import ActionButton, { ActionButtonProps } from "../../react/ActionButton";
 
-interface SplitEditorProps extends TypeWidgetProps {
+export interface SplitEditorProps extends TypeWidgetProps {
     error?: string | null;
     splitOptions?: Split.Options;
+    previewButtons?: ComponentChildren;
 }
 
 /**
@@ -22,7 +25,7 @@ interface SplitEditorProps extends TypeWidgetProps {
  * - Can display errors to the user via {@link setError}.
  * - Horizontal or vertical orientation for the editor/preview split, adjustable via the switch split orientation button floating button.
  */
-export default function SplitEditor({ note, error, splitOptions, ...editorProps }: SplitEditorProps) {
+export default function SplitEditor({ note, error, splitOptions, previewButtons, ...editorProps }: SplitEditorProps) {
     const splitEditorOrientation = useSplitOrientation();
     const [ readOnly ] = useNoteLabelBoolean(note, "readOnly");
     const containerRef = useRef<HTMLDivElement>(null);
@@ -46,7 +49,9 @@ export default function SplitEditor({ note, error, splitOptions, ...editorProps
     const preview = (
         <div className={`note-detail-split-preview-col ${error ? "on-error" : ""}`}>
             <div className="note-detail-split-preview">Preview goes here</div>
-            <div className="btn-group btn-group-sm map-type-switcher content-floating-buttons preview-buttons bottom-right" role="group">Buttons go here</div>
+            <div className="btn-group btn-group-sm map-type-switcher content-floating-buttons preview-buttons bottom-right" role="group">
+                {previewButtons}
+            </div>
         </div>
     );
 
@@ -72,6 +77,15 @@ export default function SplitEditor({ note, error, splitOptions, ...editorProps
     )
 }
 
+export function PreviewButton(props: Omit<ActionButtonProps, "titlePosition">) {
+    return <ActionButton
+        {...props}
+        className="tn-tool-button"
+        noIconActionClass
+        titlePosition="top"
+    />
+}
+
 function useSplitOrientation() {
     const [ splitEditorOrientation ] = useTriliumOption("splitEditorOrientation");
     if (isMobile()) return "vertical";

apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx

@@ -1,10 +1,27 @@
-import { TypeWidgetProps } from "../type_widget";
+import { t } from "../../../services/i18n";
-import SplitEditor from "./SplitEditor";
+import SplitEditor, { PreviewButton, SplitEditorProps } from "./SplitEditor";
 
-export default function SvgSplitEditor(props: TypeWidgetProps) {
+export default function SvgSplitEditor(props: SplitEditorProps) {
     return (
         <SplitEditor
             error="Hi there"
+            previewButtons={
+                <>
+                    <PreviewButton
+                        icon="bx bx-zoom-in"
+                        text={t("relation_map_buttons.zoom_in_title")}
+                        onClick={() => {}}
+                    />
+                    <PreviewButton
+                        icon="bx bx-zoom-out"
+                        text={t("relation_map_buttons.zoom_out_title")}
+                    />
+                    <PreviewButton
+                        icon="bx bx-crop"
+                        text={t("relation_map_buttons.reset_pan_zoom_title")}
+                    />
+                </>
+            }
             {...props}
         />
     )

apps/client/src/widgets/type_widgets_old/abstract_svg_split_type_widget.ts

@@ -186,19 +186,11 @@ export default abstract class AbstractSvgSplitTypeWidget extends AbstractSplitTy
     buildPreviewButtons(): OnClickButtonWidget[] {
         return [
             new OnClickButtonWidget()
-                .icon("bx-zoom-in")
-                .title(t("relation_map_buttons.zoom_in_title"))
-                .titlePlacement("top")
                 .onClick(() => this.zoomInstance?.zoomIn())
             , new OnClickButtonWidget()
-                .icon("bx-zoom-out")
-                .title(t("relation_map_buttons.zoom_out_title"))
                 .titlePlacement("top")
                 .onClick(() => this.zoomInstance?.zoomOut())
             , new OnClickButtonWidget()
-                .icon("bx-crop")
-                .title(t("relation_map_buttons.reset_pan_zoom_title"))
-                .titlePlacement("top")
                 .onClick(() => this.zoomHandler())
         ];
     }