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 AttributeDetailWidget from "./attribute_detail.js";
import type { CommandData, EventData, EventListener, FilteredCommandNames } from "../../components/app_context.js"; import type { CommandData, EventData, EventListener, FilteredCommandNames } from "../../components/app_context.js";
import type { default as FAttribute, AttributeType } from "../../entities/fattribute.js"; import type { default as FAttribute, AttributeType } from "../../entities/fattribute.js";
import type FNote from "../../entities/fnote.js";
import { escapeQuotes } from "../../services/utils.js"; import { escapeQuotes } from "../../services/utils.js";
const TPL = /*html*/` 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="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> </div>
`; `;
@ -29,11 +26,9 @@ export default class AttributeEditorWidget extends NoteContextAwareWidget implem
private $editor!: JQuery<HTMLElement>; private $editor!: JQuery<HTMLElement>;
private $addNewAttributeButton!: JQuery<HTMLElement>; private $addNewAttributeButton!: JQuery<HTMLElement>;
private $saveAttributesButton!: JQuery<HTMLElement>; private $saveAttributesButton!: JQuery<HTMLElement>;
private $errors!: JQuery<HTMLElement>;
private textEditor!: AttributeEditor; private textEditor!: AttributeEditor;
private lastUpdatedNoteId!: string | undefined; private lastUpdatedNoteId!: string | undefined;
private lastSavedContent!: string;
constructor(attributeDetailWidget: AttributeDetailWidget) { constructor(attributeDetailWidget: AttributeDetailWidget) {
super(); super();
@ -57,8 +52,6 @@ export default class AttributeEditorWidget extends NoteContextAwareWidget implem
this.$addNewAttributeButton.on("click", (e) => this.addNewAttribute(e)); this.$addNewAttributeButton.on("click", (e) => this.addNewAttribute(e));
this.$saveAttributesButton.on("click", () => this.save()); this.$saveAttributesButton.on("click", () => this.save());
this.$errors = this.$widget.find(".attribute-errors");
} }
addNewAttribute(e: JQuery.ClickEvent) { addNewAttribute(e: JQuery.ClickEvent) {
@ -167,12 +160,6 @@ export default class AttributeEditorWidget extends NoteContextAwareWidget implem
dataChanged() { dataChanged() {
this.lastUpdatedNoteId = this.noteId; 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) { async loadReferenceLinkTitle($el: JQuery<HTMLElement>, href: string) {

View File

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