chore(react/ribbon): display attribute errors

This commit is contained in:
Elian Doran 2025-08-23 18:28:42 +03:00
parent f049b8b915
commit e8ae5486c8
No known key found for this signature in database
2 changed files with 8 additions and 14 deletions

View File

@ -11,14 +11,11 @@ import linkService from "../../services/link.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";
import type FNote from "../../entities/fnote.js";
import { escapeQuotes } from "../../services/utils.js";
const TPL = /*html*/`
<div class="bx bx-plus add-new-attribute-button tn-tool-button" title="${escapeQuotes(t("attribute_editor.add_a_new_attribute"))}"></div>
<div class="attribute-errors" style="display: none;"></div>
</div>
`;
@ -29,11 +26,9 @@ export default class AttributeEditorWidget extends NoteContextAwareWidget implem
private $editor!: JQuery<HTMLElement>;
private $addNewAttributeButton!: JQuery<HTMLElement>;
private $saveAttributesButton!: JQuery<HTMLElement>;
private $errors!: JQuery<HTMLElement>;
private textEditor!: AttributeEditor;
private lastUpdatedNoteId!: string | undefined;
private lastSavedContent!: string;
constructor(attributeDetailWidget: AttributeDetailWidget) {
super();
@ -57,8 +52,6 @@ export default class AttributeEditorWidget extends NoteContextAwareWidget implem
this.$addNewAttributeButton.on("click", (e) => this.addNewAttribute(e));
this.$saveAttributesButton.on("click", () => this.save());
this.$errors = this.$widget.find(".attribute-errors");
}
addNewAttribute(e: JQuery.ClickEvent) {
@ -167,12 +160,6 @@ export default class AttributeEditorWidget extends NoteContextAwareWidget implem
dataChanged() {
this.lastUpdatedNoteId = this.noteId;
if (this.$errors.is(":visible")) {
// using .hide() instead of .slideUp() since this will also hide the error after confirming
// mention for relation name which suits up. When using.slideUp() error will appear and the slideUp which is weird
this.$errors.hide();
}
}
async loadReferenceLinkTitle($el: JQuery<HTMLElement>, href: string) {

View File

@ -165,12 +165,13 @@ export default function AttributeEditor({ note, componentId }: { note: FNote, co
onChange={(currentValue) => {
currentValueRef.current = currentValue ?? "";
setNeedsSaving(lastSavedContent.current !== currentValue);
setError(undefined);
}}
onClick={(e, pos) => {
if (pos && pos.textNode && pos.textNode.data) {
const clickIndex = getClickIndex(pos);
let parsedAttrs;
let parsedAttrs: Attribute[];
try {
parsedAttrs = attribute_parser.lexAndParse(getPreprocessedData(currentValueRef.current), true);
@ -215,6 +216,12 @@ export default function AttributeEditor({ note, componentId }: { note: FNote, co
text={escapeQuotes(t("attribute_editor.save_attributes"))}
onClick={save}
/> }
{ error && (
<div className="attribute-errors">
{typeof error === "object" && "message" in error && typeof error.message === "string" && error.message}
</div>
)}
</div>
{attributeDetailWidgetEl}