chore(react/ribbon): add blur & keydown events

This commit is contained in:
Elian Doran 2025-08-23 19:54:02 +03:00
parent 3f3c7cfe88
commit efd713dc61
No known key found for this signature in database
3 changed files with 6 additions and 41 deletions

View File

@ -1,42 +1,4 @@
import { t } from "../../services/i18n.js";
import NoteContextAwareWidget from "../note_context_aware_widget.js";
import contextMenuService from "../../menus/context_menu.js";
import { AttributeEditor, type EditorConfig, type ModelElement, type MentionFeed, type ModelNode, type ModelPosition } from "@triliumnext/ckeditor5";
import noteCreateService from "../../services/note_create.js";
import attributeService from "../../services/attributes.js";
import type AttributeDetailWidget from "./attribute_detail.js";
import type { CommandData, EventData, EventListener, FilteredCommandNames } from "../../components/app_context.js";
import type { default as FAttribute, AttributeType } from "../../entities/fattribute.js";
export default class AttributeEditorWidget extends NoteContextAwareWidget implements EventListener<"entitiesReloaded">, EventListener<"addNewLabel">, EventListener<"addNewRelation"> {
private attributeDetailWidget: AttributeDetailWidget;
private $editor!: JQuery<HTMLElement>;
private $addNewAttributeButton!: JQuery<HTMLElement>;
private $saveAttributesButton!: JQuery<HTMLElement>;
private textEditor!: AttributeEditor;
private lastUpdatedNoteId!: string | undefined;
constructor(attributeDetailWidget: AttributeDetailWidget) {
super();
this.attributeDetailWidget = attributeDetailWidget;
}
doRender() {
this.$widget = $(TPL);
this.$editor = this.$widget.find(".attribute-list-editor");
this.initialized = this.initEditor();
this.$editor.on("keydown", async (e) => {
this.attributeDetailWidget.hide();
});
this.$editor.on("blur", () => setTimeout(() => this.save(), 100)); // Timeout to fix https://github.com/zadam/trilium/issues/4160
this.$saveAttributesButton.on("click", () => this.save());
}
// triggered from keyboard shortcut
async addNewLabelEvent({ ntxId }: EventData<"addNewLabel">) {

View File

@ -11,9 +11,11 @@ interface CKEditorOpts {
disableSpellcheck?: boolean;
onChange?: (newValue?: string) => void;
onClick?: (e: MouseEvent, pos?: ModelPosition | null) => void;
onKeyDown?: (e: KeyboardEvent) => void;
onBlur?: () => void;
}
export default function CKEditor({ currentValue, className, tabIndex, editor, config, disableNewlines, disableSpellcheck, onChange, onClick }: CKEditorOpts) {
export default function CKEditor({ currentValue, editor, config, disableNewlines, disableSpellcheck, onChange, onClick, ...restProps }: CKEditorOpts) {
const editorContainerRef = useRef<HTMLDivElement>(null);
const textEditorRef = useRef<CKTextEditor>(null);
@ -62,14 +64,13 @@ export default function CKEditor({ currentValue, className, tabIndex, editor, co
return (
<div
ref={editorContainerRef}
className={className}
tabIndex={tabIndex}
onClick={(e) => {
if (onClick) {
const pos = textEditorRef.current?.model.document.selection.getFirstPosition();
onClick(e, pos);
}
}}
{...restProps}
/>
)
}

View File

@ -282,6 +282,8 @@ export default function AttributeEditor({ note, componentId }: { note: FNote, co
setState("showHelpTooltip");
}
}}
onKeyDown={() => attributeDetailWidget.hide()}
onBlur={() => save()}
disableNewlines disableSpellcheck
/>