@figlinq/react-chart-editor
Version:
plotly.js chart editor react component UI
2 lines • 5.74 kB
JavaScript
import HTMLEditor from"./HTML";import LaTeXEditor from"./LaTeX";import{Component}from"react";import PropTypes from"prop-types";import RichTextEditor from"./RichText";import{isLaTeXExpr,htmlToLaTeX,laTeXToHTML,hasTextExpression}from"./convertFormats";import classnames from"classnames";import Button from"../Button";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";class MultiFormatTextEditor extends Component{constructor(props,context){super(props,context);const _=context.localize;const editors=[{key:"RICH_TEXT",label:_("Rich Text"),component:RichTextEditor},{key:"LATEX",label:_("LaTeX"),component:LaTeXEditor},{key:"HTML",label:_("Edit in HTML"),component:HTMLEditor}];const startTab=isLaTeXExpr(props.value)?"LATEX":"RICH_TEXT";this.state={nextTab:null,currentTab:startTab,messages:[]};this.onModeChange=this.onModeChange.bind(this);this.editors=editors}convertValue(value,editor){const{currentTab}=this.state;if(currentTab==="RICH_TEXT"&&editor==="LATEX"){return htmlToLaTeX(value)}if(currentTab==="LATEX"&&editor==="RICH_TEXT"){return laTeXToHTML(value)}if(currentTab==="HTML"&&editor==="LATEX"){return htmlToLaTeX(value)}return value}onModeChange(nextTab){const{localize:_}=this.context;const{defaultValuePattern,value,onChange}=this.props;const{currentTab}=this.state;const trimmedValue=value.trim();const trimmedValueLength=trimmedValue.length;const convertedValue=this.convertValue(trimmedValue,nextTab);const isDefaultValue=isLaTeXExpr(trimmedValue)?defaultValuePattern.test(convertedValue):defaultValuePattern.test(trimmedValue);const switchingBetweenRichAndHtml=currentTab==="RICH_TEXT"&&nextTab==="HTML"||currentTab==="HTML"&&nextTab==="RICH_TEXT";if(!isDefaultValue&&trimmedValueLength>0&&!switchingBetweenRichAndHtml){let messages;if(!isLaTeXExpr(value)){messages=[_("LaTeX is a math typesetting language that doesn't work with rich text."),_("Continuing will convert your note to LaTeX-style text.")]}else if(hasTextExpression(value)){messages=[_("Rich text is incompatible with LaTeX."),_("Continuing will convert your LaTeX expression into raw text.")]}else{messages=[_("Rich text is incompatible with LaTeX."),_("Continuing will remove your expression.")]}this.setState({nextTab,messages});return}this.setState({currentTab:nextTab});onChange(convertedValue)}renderConfirmationPanel(render){if(!render){return null}const{localize:_}=this.context;const{messages}=this.state;const onCancel=()=>{this.setState({nextTab:null})};const onContinue=()=>{const{nextTab}=this.state;const{onChange,value}=this.props;this.setState({currentTab:nextTab,nextTab:null});const convertedValue=this.convertValue(value,nextTab);onChange(convertedValue)};return _jsxs("div",{className:"multi-format-editor__confirmation-panel",children:[_jsxs("div",{className:"multi-format-editor__confirmation-panel__content",children:[_jsx("h3",{className:"multi-format-editor__confirmation-panel__header",children:_("Heads up!")}),_jsxs("div",{className:"multi-format-editor__confirmation-panel__message",children:[_jsx("p",{className:"multi-format-editor__confirmation-panel__message-primary",children:messages[0]}),_jsx("p",{className:"multi-format-editor__confirmation-panel__message-secondary",children:messages[1]})]})]}),_jsxs("div",{className:"multi-format-editor__confirmation-panel__actions",children:[_jsx(Button,{variant:"default",className:"multi-format-editor__confirmation-panel__cancel-button",onClick:onCancel,children:_("Go back")}),_jsx(Button,{variant:"primary",className:"multi-format-editor__confirmation-panel__continue-button",onClick:onContinue,children:_("Continue")})]})]})}renderEditor(render){if(!render){return null}const{localize:_}=this.context;const{onChange,placeholder,value}=this.props;const{currentTab}=this.state;const richTextClassNames=classnames("multi-format-editor__tab","top-tab","left",{selected:currentTab==="RICH_TEXT"});const latexClassNames=classnames("multi-format-editor__tab","top-tab","right",{selected:currentTab==="LATEX"});const bottomTabClassNames=classnames("multi-format-editor__tab","bottom-tab");const Editor=this.editors.filter(editor=>editor.key===currentTab)[0].component;const ModeTabsText=this.editors.map(editor=>editor.label);const showBottomTab=currentTab==="HTML"||currentTab==="RICH_TEXT";const BottomTab=currentTab==="HTML"?_jsx("div",{className:bottomTabClassNames,onClick:()=>this.onModeChange("RICH_TEXT"),children:_("Edit in Rich Text")}):_jsx("div",{className:bottomTabClassNames,onClick:()=>this.onModeChange("HTML"),children:_("Edit in HTML")});return _jsxs("div",{className:"multi-format-editor__root__wrapper",children:[_jsxs("div",{className:"multi-format-editor__tabs",children:[_jsx("div",{className:richTextClassNames,onClick:()=>this.onModeChange("RICH_TEXT"),children:ModeTabsText[0]}),_jsx("div",{className:latexClassNames,onClick:()=>this.onModeChange("LATEX"),children:ModeTabsText[1]})]}),_jsx("div",{className:`multi-format-editor__content__wrapper__${currentTab.toLowerCase()}`,children:_jsx(Editor,{className:`multi-format-editor__${currentTab.toLowerCase()}`,onChange:onChange,placeholder:placeholder,value:value})}),showBottomTab?BottomTab:null]})}render(){const{nextTab}=this.state;const content=this.renderConfirmationPanel(nextTab!==null)||this.renderEditor(nextTab===null);return _jsx("div",{className:"multi-format-editor__root",children:content})}}MultiFormatTextEditor.propTypes={defaultValuePattern:PropTypes.instanceOf(RegExp),onChange:PropTypes.func.isRequired,placeholder:PropTypes.string,value:PropTypes.string};MultiFormatTextEditor.defaultProps={defaultValuePattern:/^$/,placeholder:"",value:""};MultiFormatTextEditor.contextTypes={localize:PropTypes.func};export default MultiFormatTextEditor;
//# sourceMappingURL=MultiFormat.js.map