diff --git a/package.json b/package.json index f7a41e134..d436421fe 100644 --- a/package.json +++ b/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", diff --git a/src/components/containers/AnnotationAccordion.js b/src/components/containers/AnnotationAccordion.js index 0db622967..18dd9692e 100644 --- a/src/components/containers/AnnotationAccordion.js +++ b/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) => ( - - {children} - - )); + annotations.map((ann, i) => { + const textPostTemplate = templateString(ann.text, {meta}); + return ( + + {children} + + ); + }); const addAction = { label: _('Annotation'), diff --git a/src/components/fields/TextEditor.js b/src/components/fields/TextEditor.js index 9d48d1a6d..cd8b6689b 100644 --- a/src/components/fields/TextEditor.js +++ b/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,10 +119,12 @@ 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, { @@ -129,5 +132,14 @@ export default connectToContainer(UnconnectedTextEditor, { 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 = ''; + } }, }); diff --git a/src/default_panels/StyleLayoutPanel.js b/src/default_panels/StyleLayoutPanel.js index 3fbec265e..288c936fc 100644 --- a/src/default_panels/StyleLayoutPanel.js +++ b/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: ' )} -

- {_("Ex: 'My custom title %{meta[1]}.' ")} +

+ {_('Ex: ')} + + {_('My custom title %{meta[1]}')} +