chore(react/type_widget): integrate touch bar for editable code

This commit is contained in:
Elian Doran 2025-09-20 10:03:00 +03:00
parent 9480227b69
commit c86123e3a9
No known key found for this signature in database
5 changed files with 10 additions and 44 deletions

View File

@ -3,7 +3,7 @@ import { ViewModeProps } from "../interface";
import Calendar from "./calendar";
import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
import "./index.css";
import { useNoteLabel, useNoteLabelBoolean, useResizeObserver, useSpacedUpdate, useTouchBar, useTriliumEvent, useTriliumOption, useTriliumOptionInt } from "../../react/hooks";
import { useNoteLabel, useNoteLabelBoolean, useResizeObserver, useSpacedUpdate, useTriliumEvent, useTriliumOption, useTriliumOptionInt } from "../../react/hooks";
import { LOCALE_IDS } from "@triliumnext/commons";
import { Calendar as FullCalendar } from "@fullcalendar/core";
import { parseStartEndDateFromEvent, parseStartEndTimeFromEvent } from "./utils";

View File

@ -1,7 +1,7 @@
import Map from "./map";
import "./index.css";
import { ViewModeProps } from "../interface";
import { useNoteBlob, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useNoteTreeDrag, useSpacedUpdate, useTouchBar, useTriliumEvent } from "../../react/hooks";
import { useNoteBlob, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useNoteTreeDrag, useSpacedUpdate, useTriliumEvent } from "../../react/hooks";
import { DEFAULT_MAP_LAYER_NAME } from "./map_layer";
import { divIcon, GPXOptions, LatLng, LeafletMouseEvent } from "leaflet";
import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "preact/hooks";

View File

@ -700,26 +700,6 @@ export function useNoteTreeDrag(containerRef: MutableRef<HTMLElement | null | un
}, [ containerRef, callback ]);
}
export function useTouchBar(
factory: (context: CommandListenerData<"buildTouchBar"> & { parentComponent: Component | null }) => void,
inputs: Inputs
) {
const parentComponent = useContext(ParentComponent);
useLegacyImperativeHandlers({
buildTouchBarCommand(context: CommandListenerData<"buildTouchBar">) {
return factory({
...context,
parentComponent
});
}
});
useEffect(() => {
parentComponent?.triggerCommand("refreshTouchBar");
}, inputs);
}
export function useResizeObserver(ref: RefObject<HTMLElement>, callback: () => void) {
const resizeObserver = useRef<ResizeObserver>(null);
useEffect(() => {

View File

@ -6,6 +6,8 @@ import CodeMirror from "./CodeMirror";
import utils from "../../../services/utils";
import { useEditorSpacedUpdate, useNoteBlob, useTriliumOptionBool } from "../../react/hooks";
import { t } from "../../../services/i18n";
import appContext from "../../../components/app_context";
import TouchBar, { TouchBarButton } from "../../react/TouchBar";
export function ReadOnlyCode({ note, viewScope, ntxId }: TypeWidgetProps) {
const [ content, setContent ] = useState("");
@ -64,6 +66,12 @@ export function EditableCode({ note, ntxId, debounceUpdate }: TypeWidgetProps &
spacedUpdate.scheduleUpdate();
}}
/>
<TouchBar>
{(note?.mime.startsWith("application/javascript") || note?.mime === "text/x-sqlite;schema=trilium") && (
<TouchBarButton icon="NSImageNameTouchBarPlayTemplate" click={() => appContext.triggerCommand("runActiveNote")} />
)}
</TouchBar>
</div>
)
}

View File

@ -29,26 +29,4 @@ export default class EditableCodeTypeWidget extends AbstractCodeTypeWidget {
super.doRender();
}
async doRefresh(note: FNote) {
const blob = await this.note?.getBlob();
if (this.parent && hasTouchBar) {
this.triggerCommand("refreshTouchBar");
}
}
buildTouchBarCommand({ TouchBar, buildIcon }: CommandListenerData<"buildTouchBar">) {
const items: TouchBarItem[] = [];
const note = this.note;
if (note?.mime.startsWith("application/javascript") || note?.mime === "text/x-sqlite;schema=trilium") {
items.push(new TouchBar.TouchBarButton({
icon: buildIcon("NSImageNameTouchBarPlayTemplate"),
click: () => appContext.triggerCommand("runActiveNote")
}));
}
return items;
}
}