support for tags.

[Bowen-0x00]

Add a subheading "## Tags" under "# Excalidraw Data" to store tags for elements (element.customData.tags).

Make it compatible with Obsidian's tag system, so that elements can be searched based on the tags added to them.

Additionally, when a tag is clicked, the focus should be directed to the corresponding elements with that tag.

[zsviczian]

This is nice, but we also need a script or rather, a built-in dialog (like the LaTeX editor) to set, change tag values. Custom data should be set using addAppendUpdateCustom data. Also the issue is there is no visual feedback to know if a tag has been set.

my workaround until now has been to add an invisible text element grouped with the object, the text element has the tag value. That works.

Also, maybe a better solution is to include the tags under Element Links and implement support for saving tags from element links. That would also give you a visual indication on the element as well as an editor.

[Bowen-0x00]

I will reconsider the implementation method again.

Currently, I am using a script that utilizes input prompts to display, add, modify, and delete tags. However, using a script is not a built-in feature (this can be addressed by registering it as a command). As for visual feedback, there can be visual cues when running the script. The advantage is that it doesn't add extra visual information to the canvas to distract attention (a switch setting maybe). The drawback is that there is no persistent visual feedback to indicate that the element has tags.

const api = ea.getExcalidrawAPI();
const selectedEls = ea.getViewSelectedElements();
if (!selectedEls.length) {
  new Notice("Please select elements first.");
  return;
}
tagsString = ``;
if (selectedEls[0]?.customData?.tags) {
  tagsString = selectedEls[0].customData.tags.join("\n");
}
const input = await utils.inputPrompt("tags", tagsString, tagsString, null, 2);
// if (!input) return
const tags = input.split("\n").map(el => el.trim()).filter(el => el);

selectedEls.forEach((el) => {
  if (tags?.length > 0) {
    el.customData = {
    ...el.customData,
      tags: tags
    }
  } else if(el?.customData?.tags){
    delete el.customData.tags
  }
});

ea.copyViewElementsToEAforEditing(selectedEls);
ea.addElementsToView();
new Notice("set tags success!");