V0.35.5

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-chart-editor",
   "description": "plotly.js chart editor react component UI",
-  "version": "0.35.4",
+  "version": "0.35.5",
   "author": "Plotly, Inc.",
   "bugs": {
     "url": "https://github.com/plotly/react-chart-editor/issues"
@@ -15,7 +15,7 @@
     "fast-isnumeric": "^1.1.1",
     "immutability-helper": "^2.7.1",
     "plotly-icons": "1.2.3",
-    "plotly.js": "1.44.3",
+    "plotly.js": "1.44.4",
     "prop-types": "^15.5.10",
     "raf": "^3.4.0",
     "react-color": "^2.13.8",

src/components/containers/AnnotationAccordion.js

@@ -4,24 +4,33 @@ import {PanelMessage} from './PanelEmpty';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {connectAnnotationToLayout} from 'lib';
+import {templateString} from 'plotly.js/src/lib';
 
 const AnnotationFold = connectAnnotationToLayout(PlotlyFold);
 
 class AnnotationAccordion extends Component {
   render() {
     const {
-      layout: {annotations = []},
+      layout: {annotations = [], meta = []},
       localize: _,
     } = this.context;
     const {canAdd, children} = this.props;
 
     const content =
       annotations.length &&
-      annotations.map((ann, i) => (
-        <AnnotationFold key={i} annotationIndex={i} name={ann.text} canDelete={canAdd}>
-          {children}
-        </AnnotationFold>
-      ));
+      annotations.map((ann, i) => {
+        const textPostTemplate = templateString(ann.text, {meta});
+        return (
+          <AnnotationFold
+            key={i}
+            annotationIndex={i}
+            name={textPostTemplate === '' ? ann.text : textPostTemplate}
+            canDelete={canAdd}
+          >
+            {children}
+          </AnnotationFold>
+        );
+      });
 
     const addAction = {
       label: _('Annotation'),

src/components/fields/TextEditor.js

@@ -67,7 +67,8 @@ export class UnconnectedTextEditor extends Component {
 
     let fullValue = this.getAdjustedFullValue(this.props.fullValue);
 
-    let placeholder;
+    let placeholder = this.props.placeholder;
+
     if (multiValued || (fullValue && (!container || !nestedProperty(container, attr)))) {
       placeholder = fullValue;
       fullValue = '';
@@ -118,16 +119,27 @@ UnconnectedTextEditor.propTypes = {
   latexOnly: PropTypes.bool,
   richTextOnly: PropTypes.bool,
   updatePlot: PropTypes.func,
+  placeholder: PropTypes.string,
 };
 
 UnconnectedTextEditor.contextTypes = {
   localize: PropTypes.func,
+  fullLayout: PropTypes.object,
 };
 
 export default connectToContainer(UnconnectedTextEditor, {
   modifyPlotProps: (props, context, plotProps) => {
     if (plotProps.isVisible && plotProps.multiValued) {
       plotProps.isVisible = false;
     }
+
+    if (
+      context.fullLayout &&
+      context.fullLayout._dfltTitle &&
+      Object.values(context.fullLayout._dfltTitle).includes(plotProps.fullValue)
+    ) {
+      plotProps.placeholder = plotProps.fullValue;
+      plotProps.fullValue = '';
+    }
   },
 });

src/default_panels/StyleLayoutPanel.js

@@ -174,8 +174,11 @@ const StyleLayoutPanel = (props, {localize: _}) => (
           {_(
             'You can refer to the items in this column in any text fields of the editor like so: '
           )}
-          <p style={{letterSpacing: '1px', fontStyle: 'italic'}}>
-            {_("Ex: 'My custom title %{meta[1]}.' ")}
+          <p>
+            {_('Ex: ')}
+            <span style={{letterSpacing: '1px', fontStyle: 'italic', userSelect: 'text'}}>
+              {_('My custom title %{meta[1]}')}
+            </span>
           </p>
         </p>
       </Info>