Adobe XD plugin text style issues on symbol instances

New Here ,
Sep 28, 2021 Sep 28, 2021

Copy link to clipboard

Copied

In a scenario where you have a symbol master and a symbol instance with different text styles, if a plugin updates just the text field of a symbol master text layer, the symbol instance text style changes. It changes strangely such as keeping all properties except bold, etc.

 

If I just type into the symbol master, the symbol instances changes correctly.

 

What is the correct way for a plugin to change a symbol master text layer text and have Adobe XD properly propagate the changes to the symbol instances?

 

This seems to be alluded to in the Adobe XD plugin documentation, but is there a work around or a right way to do this?

Views

483

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 29, 2021 Sep 29, 2021

Copy link to clipboard

Copied

Changes made to the master component should be copied to the component instance except for any properties that the instance has overridden.  The behavior should be the same whether editing the master component with a plugin or the XD user interface.  I tested updating text components with a simple plugin (code is below) and did not see any problems.  If you are still seeing something that looks wrong, can you please provide a small example XD document and/or your plugin code so we can debug?

const { editDocument } = require("application");
const { Color, selection, SymbolInstance, Text } = require("scenegraph");


function updateText() {
    editDocument({ editLabel: "Updating text" }, function () {
        if (selection && selection.items && (selection.items.length > 0)) {
            if (selection.items[0] instanceof Text) {
                let textNode = selection.items[0];

                try {
                    textNode.fontSize = textNode.fontSize + 1;
                    // textNode.fontFamily = "Arial";
                    // textNode.fontStyle = "Bold";
                    // textNode.fill = new Color("Red");
                    // textNode.charSpacing = 30;
                    // textNode.underline = true;
                    // textNode.strikethrough = true;
                    // textNode.textTransform = "uppercase";
                    // textNode.textScript = "superscript";
                    // textNode.flipY = true;
                    // textNode.textAlign = "right";
                    // textNode.lineSpacing = 40;
                    // textNode.paragraphSpacing = 10;
                } catch (err) {
                    throw new Error("Error editing text: " + err);
                }

                console.log("Font size is now " + textNode.fontSize);
            } else if (selection.items[0] instanceof SymbolInstance) {
                console.log("Need to double-click the component to add the text node to the edit context");
            }
        } else {
            console.log("Need to select a text node on the canvas");
        }
    });
}

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 10, 2021 Nov 10, 2021

Copy link to clipboard

Copied

This is not the behavior I see.

 

Here is the setup (example file attached "test.xd"):

1) A symbol master with just a single text layer inside

2) An instance of the symbol

3) Variations on the text layer within the symbol instance (such as font family, weight, etc)

 

Then:

1) I have a plugin that just updates the font size on the master like yours (code below)

2) A plugin that just updates the text on the master

 

In both scenarios, the variations in the text layer on the instance setup in #3 are overwritten.

 

Specifically, if the symbol instance text layer is bold and the master text layer is not bold, when I only update the actual text (layer.text="new") on the symbol master text layer, I would expect the bold to stay on the symbol instance text layer. However, in this simplified example, the bold and the styles disappear, which is not the intended behavior nor what you describe.

 

See attached sample file and code for the plugin. Running the plugin on the symbol master also changes properties on the symbol instance in none desired ways.

 

I believe this is a bug or the right way to do this is unclear.

 

For materials:

Two pictures attached before and after the ".text=" update. Showing how both the styles are changed.

 

This forum wont allow me to attach XD docs for some reason. Here is a link to the test.xd file:

https://drive.google.com/file/d/1Gv1U4ff_AaBWfgzhGXqTi0QotQWWR_ta/view?usp=sharing

 

And here is the code of my plugin with 4 commands exposed:

 

/*
 * Sample plugin scaffolding for Adobe XD.
 *
 * Visit http://adobexdplatform.com/ for API docs and more sample code.
 */


const {Rectangle, Color, SymbolInstance, Text} = require("scenegraph"); 

function withTextSelection(selection, fn) {
    if (selection && selection.items && (selection.items.length > 0)) {
        if (selection.items[0] instanceof Text) {
            let textNode = selection.items[0];
            try {
                fn(textNode)
            } catch(e){
                console.log("Error Editing Text Note: ", e);
            }
        }  else if (selection.items[0] instanceof SymbolInstance) {
            console.log("Need to double-click the component to add the text node to the edit context");
        }
    } else {
        console.log("Need to select a text node on the canvas");
    }
}

function printNodeStyles(textNode, extra = ''){
    console.log(`  ${extra} Current Styles:`)
    console.log("    Text: ", textNode.text)
    console.log("    Font Family: ", textNode.fontFamily)
    console.log("    Font Style: ", textNode.fontStyle)
    console.log("    Font Size: ", textNode.fontSize)
}

function printStyles(selection, root) {
    console.log(root);
    withTextSelection(selection, function(textNode){
        printNodeStyles(textNode);
    });
}

function setTextOnly(selection, root) { 
    withTextSelection(selection, function(textNode){
        console.log("Running setTextOnly")
        printNodeStyles(textNode, "Before");
        textNode.text = "Hello World";
        printNodeStyles(textNode, "After");
    });
}

function setTextAndStyle(selection, root) {
    withTextSelection(selection, function(textNode){
        console.log("Running setTextAndStyle")
        printNodeStyles(textNode, "Before");
        textNode.text = "Hello World";
        textNode.fontStyle = "Bold";
        textNode.fontSize = textNode.fontSize + 10;
        printNodeStyles(textNode, "After");
    });
}

function setStyleOnly(selection, root) {
    withTextSelection(selection, function(textNode){
        console.log("Running setStyleOnly")
        printNodeStyles(textNode, "Before");
        textNode.fontStyle = "Bold";
        textNode.fontSize = textNode.fontSize + 10;
        printNodeStyles(textNode, "After");
    });
}

module.exports = {
    commands: {
        printStyles: printStyles,
        setTextOnly: setTextOnly,
        setTextAndStyle: setTextAndStyle,
        setStyleOnly: setStyleOnly
    }
};

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 15, 2021 Nov 15, 2021

Copy link to clipboard

Copied

I can reproduce the bug now.  When I tested this before I tried to update every text property using the plugin API except the actual text content.  But I see now that updating the text content causes the font family and style overrides in component instances to be discarded.  I logged a bug with the team.  Thanks for letting us know!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 15, 2021 Nov 15, 2021

Copy link to clipboard

Copied

Great. Any chance to you can update this thread once you have an estimated time frame or when the team ackowledges the issue? As you can imaging, this blocks some workflows.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 16, 2021 Nov 16, 2021

Copy link to clipboard

Copied

I will track the issue and let you know when a fix is scheduled.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 16, 2022 Feb 16, 2022

Copy link to clipboard

Copied

LATEST

To address this issue, XD 48 (released today) includes a new plugin API that updates text without changing the text's style ranges:

https://developer.adobe.com/xd/uxp/develop/reference/Text/#updatetext

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines