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