Title Attribute is not working as expected with the last update

Describe the bug
The Title Attribute isn't functioning in the Content Script option. Even after adding the title, it doesn't show up in the menu. This issue started after modifying the BTT design, whereas it was working previously.

Additional information (e.g. crash logs, related issues, etc.):

async function retrieveJSON() {
  let items = [
    {
        "title": "hello world",
        "icon": "sfsymbol::globe"
    },
    {
      title: "some title",
      subtitle: "some subtitle",
      subitems: [
        {
          title: "some sub-item",
          action: "named::NameOfNamedTriggerInBTT",
          icon: "sfsymbol::house::weight@@light::size@@30"
        },
        {
          title: "some sub-item2",
          icon: "base64::iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFUlEQVR42mNkYPhfz0AEYBxVSF+FAP5FDvcfRYWgAAAAAElFTkSuQmCC",
          action: "shortcut::NameOfShortcutInShortcutsApp@@OptionalInput"
        },
      ],
      icon: "sfsymbol::star::color@@B53E93",
      // this shows various forms of actions. In case you are just triggering
      // a single action, it does not need to be an array.
      action: [
        `btt::paste_text@@{"text": "hello world"}`,
        "keyboard::0", //type a
        "keyboard::11", //type b
        "keyboard::8", //type c
        "js::runShellScript({script: `say hello`})",
        {
          btt: "paste_text",
          args: {
            text: "hello world 2",
            insert_by_pasting: true,
          },
        },

        {
          shortcut: "theNameOfTheShortcut",
          input: "some optional input",
        },
      ],
    },
  ];

  return JSON.stringify(items);
}

Your example seems t work fine here:

However you don't seem to reference any specific menu item layout, which means it will fall back to the default. Maybe your default is configured to only show the icon?

I'd try to configure a floating menu item with the exact look you need, then reference it via e.g.

templateItemUUID: "1D974882-9376-4B09-81FC-E427F79CBD25",

How to check the default?

Currently the defaults can not be viewed directly, but it is used when you create a new item. You can override it here:

Here is my Menu Item Configuration.

{"BTTMenuItemBackgroundColorDark":"108.442, 96.000, 190.435, 166.991","BTTMenuItemCornerRadius":10,"BTTMenuAppearanceStyle":1,"BTTMenuItemAnimateHover":1,"BTTMenuItemBorderColorDark":"255.000, 255.000, 255.000, 255.000","BTTMenuItemShowIdentifierAsTooltip":1,"BTTMenuItemDisplayOrder":0,"BTTMenuItemBorderColorHoverDark":"255.000, 255.000, 255.000, 255.000","BTTMenuAlwaysUseLightMode":1,"BTTMenuItemResizeImage":3,"BTTMenuScriptAlwaysRunOnAppear":1,"BTTMenuItemMinHeight":50,"BTTMenuHoverStartAnimationDuration":0.15,"BTTMenuItemMaxHeight":50,"BTTMenuSizingBehavior":0,"BTTMenuTextMinimumScaleFactor":0.30000001192092896,"BTTMenuElementTooltip":"MyToolTip","BTTMenuItemVisibleWhileActive":1,"BTTMenuItemMarginLeft":15,"BTTMenuAttributedText":"{\\rtf1\\ansi\\ansicpg1252\\cocoartf2868\n\\cocoatextscaling0\\cocoaplatform0{\\fonttbl\\f0\\fnil\\fcharset0 HelveticaNeue-Bold;}\n{\\colortbl;\\red255\\green255\\blue255;\\red255\\green255\\blue255;}\n{\\*\\expandedcolortbl;;\\csgray\\c100000;}\n\\deftab720\n\\pard\\pardeftab720\\partightenfactor0\n\n\\f0\\b\\fs56 \\cf2 \\expnd0\\expndtw0\\kerning0\nNew Item}","BTTMenuUseStyleForSubmenu":0,"BTTMenuItemMinWidth":200,"BTTMenuItemBorderColorHover":"0.000, 0.000, 0.000, 255.000","BTTMenuItemBackgroundColorHoverDark":"90.000, 90.000, 180.000, 166.991","BTTMenuScriptAlwaysRunOnFirstLoad":1,"BTTMenuItemBorderColor":"0.000, 0.000, 0.000, 255.000","BTTMenuItemIconColor1":"255.000, 255.000, 255.000, 255.000","BTTMenuHoverEndAnimationDuration":0.15,"BTTMenuItemPositioningMode":0,"BTTMenuItemShadowEnabled":1,"BTTMenuItemScriptActive":0,"BTTMenuItemBackgroundType":0,"BTTMenuItemBlurredBackground":1,"BTTMenuItemMaxWidth":200,"BTTMenuItemBorderWidth":2,"BTTMenuItemVisibleWhileInactive":1,"BTTMenuItemBackgroundColor3":"191.250, 191.250, 191.250, 255.000","BTTMenuItemGlassEffect":1,"BTTMenuItemBorderDashed":0,"BTTMenuItemBackgroundColor":"4.285, 50.579, 255.000, 255.000","BTTMenuItemBackgroundTypeDark":4}

Also, the below where I am referencing a templateUUID, is not working too.

async function generateMenuJSON() {
    try {
        const delimiter = "_BTT_SEQ_PASTE_DELIMITER_";
        const stackVariable = "sequentialPasteStack";
        const orderVariable = "pasteOrderMode";
        const enterModeVariable = "pasteAndEnterMode";
        const ignoreModeVariable = "ignoreCopyMode";
        const newLineModeVariable = "newLineDetection";
        const templateItemUUIDString = "62373239-24D8-429D-8292-1EA154CEC86E"; 
        
        const fifoIconSymbol = "sfsymbol::arrow.up.arrow.down"; 
        const lifoIconSymbol = "sfsymbol::square.stack.3d.up.fill"; 
        const enterModeActiveSymbol = "sfsymbol::document.badge.plus.fill"; 
        const enterModeDeactiveSymbol = "sfsymbol::moonphase.new.moon"; 
        const undoLastPasteIcon = "sfsymbol::arrow.uturn.backward.circle.fill";
        const ignoreOnIcon = "sfsymbol::notequal.square.fill";
        const ignoreOffIcon = "sfsymbol::doc.on.doc";
        const pasteAllButtonIcon = "sfsymbol::scissors.badge.ellipsis"; 
        const newLineOnIcon = "sfsymbol::lineweight";
        const newLineOffIcon = "sfsymbol::plus.square";

        // 1. Get the state variables
        const currentOrder = await get_string_variable({ variableName: orderVariable }) || "FIFO";
        const enterMode = await get_string_variable({ variableName: enterModeVariable }) || "off";
        const ignoreMode = await get_string_variable({ variableName: ignoreModeVariable }) || "off";
        const newLineMode = await get_string_variable({ variableName: newLineModeVariable }) || "off";

        // 2. Create the toggle buttons (Using 'text' instead of 'title' where possible for consistency)
        const orderToggleButton = {
            "templateItemUUID": templateItemUUIDString,
            "text": "", // Changed from title object to text
            "backgroundColor": "30,30,30,255",
            "BTTMenuElementTooltip": "MyToolTip",
            "action": { "named": "togglePasteOrder" },
            "icon": currentOrder === "FIFO" ? fifoIconSymbol : lifoIconSymbol
        };
        
        const enterToggleButton = {
            "templateItemUUID": templateItemUUIDString,
            "text": "11", 
            "fontSize": 10, // Moved formatting to top level
            "fontColor": "#A9A9A9",
            "backgroundColor": "30,30,30,255",
            "action": { "named": "toggleEnterPaste" },
            "icon": enterMode === "off" ? enterModeDeactiveSymbol : enterModeActiveSymbol
        };

        const undoPasteButton = {
            "templateItemUUID": templateItemUUIDString,
            "text": "",
            "backgroundColor": "30,30,30,255",
            "action": { "named": "undoLastPaste" },
            "icon": undoLastPasteIcon
        };

        const ignoreCopyButton = {
            "templateItemUUID": templateItemUUIDString,
            "text": "",
            "action": { "named": "toggleIgnoreCopy" },
            "icon": ignoreMode === "on" ? ignoreOnIcon : ignoreOffIcon
        };

        const pasteAllButton = {
            "templateItemUUID": templateItemUUIDString,
            "text": "",
            "action": { "named": "pasteAll" },
            "icon": pasteAllButtonIcon
        };

        const newLineDetection = {
            "templateItemUUID": templateItemUUIDString,
            "text": "",
            "action": { "named": "toggleNewLineDetection" },
            "icon": newLineMode === "on" ? newLineOnIcon : newLineOffIcon
        };
        
        const controlButtons = [orderToggleButton, enterToggleButton, undoPasteButton, ignoreCopyButton, newLineDetection, pasteAllButton];

        // 3. Handle Stack Content
        const stackContent = await get_string_variable({ variableName: stackVariable });

        if (!stackContent || stackContent.trim() === "") {
            await set_persistent_string_variable({ variableName: "pasteQueueStatus", to: "empty" });
            return JSON.stringify(controlButtons);
        }
        
        const itemsArray = stackContent.split(delimiter).filter(line => line.trim() !== '');

        if (itemsArray.length <= 1) {
            await set_persistent_string_variable({ variableName: "pasteQueueStatus", to: "empty" });
        } else {
            await set_persistent_string_variable({ variableName: "pasteQueueStatus", to: "not_empty" });
        }
        
        if (itemsArray.length === 0) {
            return JSON.stringify(controlButtons);
        }
        
        const orderedArray = currentOrder === "FIFO" ? itemsArray.reverse() : itemsArray;
        
		const pasteItems = orderedArray.map((line, index) => {
        const displayLine = line.length > 30 ? line.substring(0, 30) + '...' : line;
            
            // Common properties for both items
            const commonProps = {
                "text": displayLine,                // Standard Property
                "title": displayLine,                // Standard Property
                "backgroundColor": "50,50,50,255"
            };

            if(index === 0){
                return {
                    "templateItemUUID": "FBA5D74D-5C46-453D-BF8B-ED836E659AD9",
                    ...commonProps,
                    "fontSize": 10,
                    "fontColor": "#A9A9A9"
                };
            } else {
                return {
                    "templateItemUUID": "F7582E57-F563-466E-8E3A-60B2D1B9A2FF",
                    ...commonProps
                };
            }
        });
		
		const finalMenu = [...controlButtons, ...pasteItems];
        return JSON.stringify(finalMenu);
		
	} catch (error) {
        console.error("Error generating menu JSON:", error);
        await set_persistent_string_variable({ variableName: "pasteQueueStatus", to: "empty" });
        return JSON.stringify([]);
    }
}

Would you be able to share a full menu that shows the issue? (right-click => export to file). You can either post here or send to andreas@folivora.ai

HYG, thanks for your support.

TitleIssue.bttpreset (19.9 KB)

could you check what the javascript actually produces when you run it?

I get this:

[
   {
      "templateItemUUID":"62373239-24D8-429D-8292-1EA154CEC86E",
      "text":"",
      "backgroundColor":"30,30,30,255",
      "BTTMenuElementTooltip":"MyToolTip",
      "action":{
         "named":"togglePasteOrder"
      },
      "icon":"sfsymbol::arrow.up.arrow.down"
   },
   {
      "templateItemUUID":"62373239-24D8-429D-8292-1EA154CEC86E",
      "text":"11",
      "fontSize":10,
      "fontColor":"#A9A9A9",
      "backgroundColor":"30,30,30,255",
      "action":{
         "named":"toggleEnterPaste"
      },
      "icon":"sfsymbol::moonphase.new.moon"
   },
   {
      "templateItemUUID":"62373239-24D8-429D-8292-1EA154CEC86E",
      "text":"",
      "backgroundColor":"30,30,30,255",
      "action":{
         "named":"undoLastPaste"
      },
      "icon":"sfsymbol::arrow.uturn.backward.circle.fill"
   },
   {
      "templateItemUUID":"62373239-24D8-429D-8292-1EA154CEC86E",
      "text":"",
      "action":{
         "named":"toggleIgnoreCopy"
      },
      "icon":"sfsymbol::doc.on.doc"
   },
   {
      "templateItemUUID":"62373239-24D8-429D-8292-1EA154CEC86E",
      "text":"",
      "action":{
         "named":"toggleNewLineDetection"
      },
      "icon":"sfsymbol::plus.square"
   },
   {
      "templateItemUUID":"62373239-24D8-429D-8292-1EA154CEC86E",
      "text":"",
      "action":{
         "named":"pasteAll"
      },
      "icon":"sfsymbol::scissors.badge.ellipsis"
   }
]

WHich doesn't contain any "title" property at all (only "text" which BTT doesn't support)

Indeed, these menu items are currently represented by icons alone. However, when introducing new items, they include text—check the code for details. Essentially, this is a sequential paste function that allows copying multiple items and pasting them one after another.

Here is the full output.

[{
	"templateItemUUID": "62373239-24D8-429D-8292-1EA154CEC86E",
	"text": "",
	"backgroundColor": "30,30,30,255",
	"BTTMenuElementTooltip": "MyToolTip",
	"action": {
		"named": "togglePasteOrder"
	},
	"icon": "sfsymbol::arrow.up.arrow.down"
}, {
	"templateItemUUID": "62373239-24D8-429D-8292-1EA154CEC86E",
	"text": "11",
	"fontSize": 10,
	"fontColor": "#A9A9A9",
	"backgroundColor": "30,30,30,255",
	"action": {
		"named": "toggleEnterPaste"
	},
	"icon": "sfsymbol::moonphase.new.moon"
}, {
	"templateItemUUID": "62373239-24D8-429D-8292-1EA154CEC86E",
	"text": "",
	"backgroundColor": "30,30,30,255",
	"action": {
		"named": "undoLastPaste"
	},
	"icon": "sfsymbol::arrow.uturn.backward.circle.fill"
}, {
	"templateItemUUID": "62373239-24D8-429D-8292-1EA154CEC86E",
	"text": "",
	"action": {
		"named": "toggleIgnoreCopy"
	},
	"icon": "sfsymbol::doc.on.doc"
}, {
	"templateItemUUID": "62373239-24D8-429D-8292-1EA154CEC86E",
	"text": "",
	"action": {
		"named": "toggleNewLineDetection"
	},
	"icon": "sfsymbol::lineweight"
}, {
	"templateItemUUID": "62373239-24D8-429D-8292-1EA154CEC86E",
	"text": "",
	"action": {
		"named": "pasteAll"
	},
	"icon": "sfsymbol::scissors.badge.ellipsis"
}, {
	"templateItemUUID": "FBA5D74D-5C46-453D-BF8B-ED836E659AD9",
	"text": "This will cause BTT to wait/fr...",
	"title": "This will cause BTT to wait/fr...",
	"backgroundColor": "50,50,50,255",
	"fontSize": 10,
	"fontColor": "#A9A9A9"
}, {
	"templateItemUUID": "F7582E57-F563-466E-8E3A-60B2D1B9A2FF",
	"text": "There are two versions of this...",
	"title": "There are two versions of this...",
	"backgroundColor": "50,50,50,255"
}, {
	"templateItemUUID": "F7582E57-F563-466E-8E3A-60B2D1B9A2FF",
	"text": "DO NOT use this to trigger act...",
	"title": "DO NOT use this to trigger act...",
	"backgroundColor": "50,50,50,255"
}]

that renders like this here:

Most likely because I don't have a template item with UUID F7582E57-F563-466E-8E3A-60B2D1B9A2FF or 62373239-24D8-429D-8292-1EA154CEC86E

Do you have that in a separate menu?

My mistake; I used the incorrect templateId, so I'll verify it now.