@chief-editor/brick-control
Version:
Control Brick for chief editor
1 lines • 4.29 kB
JavaScript
import React,{useCallback}from"react";import{ButtonTool,ColorTool,InputTool,SelectTool,ToolBar,fontFamilyOptions,fontSizeOptions,headerOptions,useQuillEditor,useRegisterExtFonts}from"@chief-editor/quill";import{AlignText,AlignTextCenter,AlignTextLeft,AlignTextOrder,AlignTextRight,AlignTextUnorder,BackgroundColor,ClearFormat,FontColor,LetterSpacing,LineHeight,TextBold,TextItalic,TextUnderline}from"@chief-editor/icons";export function Toolbar(e){var t=e.showQuickToolbar,a=void 0!==t&&t,l=useCallback((function(e,t){return!(!t||!e)&&e.type===t.type}),[]);useRegisterExtFonts();var o=useCallback((function(e){var t=parseInt(e,10);return isNaN(t)?"auto":t+""}),[]),r=useCallback((function(e){var t=parseInt(e,10);return!isNaN(t)&&t+"px"}),[]),n=useCallback((function(e){var t=parseFloat(e);return isNaN(t)||0===t?"0":(100*t).toFixed()+"%"}),[]),i=useCallback((function(e){var t=parseInt(e,10);return!isNaN(t)&&t/100+"rem"}),[]),c={width:"24px",fontSize:"14px",padding:0},m=useQuillEditor().getFormats();return React.createElement("div",{className:"quill-editor"},React.createElement(ToolBar,null,React.createElement("div",{className:"quill-editor-toolbar__group"},React.createElement(SelectTool,{width:"100px",defaultFormat:m.header||!1,formatName:"header",options:headerOptions}),React.createElement(SelectTool,{width:"100px",defaultFormat:m.fontSize||"14px",formatName:"fontSize",formatPath:"formats/fontSize",options:fontSizeOptions,placeholder:"字号"})),React.createElement("div",{className:"quill-editor-toolbar__group"},React.createElement(SelectTool,{width:"208px",defaultFormat:m.fontFamily||!1,formatName:"fontFamily",formatPath:"formats/fontFamily",options:fontFamilyOptions,placeholder:"字体"})),React.createElement("div",{className:"quill-editor-toolbar__group"},React.createElement(InputTool,{style:{width:100},placeholder:"",formatName:"lineHeight",defaultFormat:!1,parseValue:o,formatValue:r,prefix:React.createElement(LineHeight,{style:{marginLeft:"-3px",color:"rgba(255, 255, 255, 0.8)"},size:14})}),React.createElement(InputTool,{style:{width:100},formatName:"letterSpace",defaultFormat:"0",parseValue:n,formatValue:i,prefix:React.createElement(LetterSpacing,{style:{marginLeft:"-3px",color:"rgba(255, 255, 255, 0.8)"},size:14})})),React.createElement("div",{className:"quill-editor-toolbar__group"},React.createElement("div",{className:"quill-editor-toolbar__group-left"},React.createElement(ButtonTool,{style:c,type:"text",formatName:"bold"},React.createElement(TextBold,null)),React.createElement(ButtonTool,{style:c,type:"text",formatName:"underline"},React.createElement(TextUnderline,null)),React.createElement(ButtonTool,{style:c,type:"text",formatName:"italic"},React.createElement(TextItalic,null)),React.createElement(ButtonTool,{style:c,type:"text",formatName:"strike"},React.createElement(ClearFormat,null))),React.createElement("div",{className:"quill-editor-toolbar__group-right"},React.createElement(ColorTool,{formatName:"color"},React.createElement(FontColor,null)),React.createElement(ColorTool,{formatName:"background",hasAlpha:!0,defaultFormat:"rgba(0,0,0,0)"},React.createElement(BackgroundColor,null)))),React.createElement("div",{className:"quill-editor-toolbar__group"},React.createElement("div",{className:"quill-editor-toolbar__group-left"},React.createElement(ButtonTool,{style:c,type:"text",formatName:"align",value:!1,reversible:!1},React.createElement(AlignTextLeft,null)),React.createElement(ButtonTool,{style:c,type:"text",formatName:"align",value:"center",reversible:!1},React.createElement(AlignTextCenter,null)),React.createElement(ButtonTool,{style:c,type:"text",formatName:"align",value:"right",reversible:!1},React.createElement(AlignTextRight,null)),React.createElement(ButtonTool,{style:c,type:"text",formatName:"align",value:"justify",reversible:!1},React.createElement(AlignText,null))),React.createElement("div",{className:"quill-editor-toolbar__group-right"},React.createElement(ButtonTool,{style:c,formatName:"list",value:{name:"bullet",type:"bullet"},formatEqual:l},React.createElement(AlignTextUnorder,null)),React.createElement(ButtonTool,{style:c,formatName:"list",formatEqual:l,value:{name:"ordered",type:"ordered"}},React.createElement(AlignTextOrder,null))))),!a&&React.createElement("div",{id:"quill-control-editor"}))}