From 4569278a9aee2920b0027f8517c92506d5268109 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=94=A1=E6=AD=A6?= <2252711582@qq.com> Date: Mon, 8 Jul 2024 23:35:10 +0800 Subject: [PATCH] 1 --- packages/@typex-core/selection/index.js | 10 ----- packages/editor/toolBar/compinents/Dialog.js | 32 -------------- .../toolBar/compinents/DialogContent.js | 3 +- packages/editor/toolBar/compinents/index.js | 1 - .../editor/toolBar/compinents/toolBar.styl | 7 ++- packages/editor/toolBar/iconfont.js | 2 +- packages/editor/toolBar/index.js | 44 +++++++++++++------ packages/editor/toolBar/toolBarOptions.js | 2 +- src/index.js | 2 +- 9 files changed, 40 insertions(+), 63 deletions(-) delete mode 100644 packages/editor/toolBar/compinents/Dialog.js diff --git a/packages/@typex-core/selection/index.js b/packages/@typex-core/selection/index.js index 5b2edbe..b3fde1a 100644 --- a/packages/@typex-core/selection/index.js +++ b/packages/@typex-core/selection/index.js @@ -438,16 +438,6 @@ export default class Selection { } } - /** - * @description 获取同级path - * @memberof Selection - */ - getPeerPaths () { - if (this.collapse) { - return [this.ranges[0].container.currentComponent.$path] - } - } - recoverRangesFromSnapshot (rangesSnapshot) { this.removeAllRanges() this.ranges = rangesSnapshot.map((jsonRange) => diff --git a/packages/editor/toolBar/compinents/Dialog.js b/packages/editor/toolBar/compinents/Dialog.js deleted file mode 100644 index 97beffd..0000000 --- a/packages/editor/toolBar/compinents/Dialog.js +++ /dev/null @@ -1,32 +0,0 @@ -import { Component, createRef } from '@typex/core' -export class Dialog extends Component { - constructor(props) { - super(props) - this.state = { visiable: false } - this.dialogRef = createRef() - } - render () { - return ( -
- {this.state.visiable ? ( -
- {this.props.children.length ? this.props.children : 'dialog'} -
- ) : ( - '' - )} -
- ) - } - outClickHandle = (e) => { - if (this.props.barItemRef.current.contains(e.target)) return - this.setState({ visiable: false }) - document.removeEventListener('click', this.outClickHandle) - } - toggle () { - if (!this.state.visiable) { - document.addEventListener('click', this.outClickHandle) - } - this.setState({ visiable: !this.state.visiable }) - } -} \ No newline at end of file diff --git a/packages/editor/toolBar/compinents/DialogContent.js b/packages/editor/toolBar/compinents/DialogContent.js index 739fe45..bc0b51d 100644 --- a/packages/editor/toolBar/compinents/DialogContent.js +++ b/packages/editor/toolBar/compinents/DialogContent.js @@ -15,7 +15,7 @@ function headerClickHandle (e, vm) { } } const comMap = { - fontColor: (h, self) => ( + color: (h, self) => (
@@ -23,7 +23,6 @@ const comMap = { header: (h, self) => { return
headerClickHandle(e, self)} style="color:#666"> { - // headerOps.map(ele =>
{ele[1]}
) headerOps.map(ele => h(ele[1], { "data-headervalue": ele[0], style: { margin: '2px 0' }, class: 'header-selector-item' }, [ele[1]])) }
diff --git a/packages/editor/toolBar/compinents/index.js b/packages/editor/toolBar/compinents/index.js index 4619d94..1ad08ee 100644 --- a/packages/editor/toolBar/compinents/index.js +++ b/packages/editor/toolBar/compinents/index.js @@ -1,5 +1,4 @@ import './toolBar.styl' -export { Dialog } from "./Dialog"; export { Tooltip } from "./Tooltip"; export { DialogContent } from './DialogContent' export { default as ColorPicker } from './colorPicker' \ No newline at end of file diff --git a/packages/editor/toolBar/compinents/toolBar.styl b/packages/editor/toolBar/compinents/toolBar.styl index bea1a01..c21288c 100644 --- a/packages/editor/toolBar/compinents/toolBar.styl +++ b/packages/editor/toolBar/compinents/toolBar.styl @@ -16,10 +16,15 @@ overflow hidden .editor-tool-bar-item padding 4px 10px - display inline-block + display flex + flex-direction column border-radius 4px cursor pointer user-select none + .color-line + width 70% + height 3px + margin -3px auto 0 auto .editor-tooltip position relative diff --git a/packages/editor/toolBar/iconfont.js b/packages/editor/toolBar/iconfont.js index c8a692d..e418ea8 100644 --- a/packages/editor/toolBar/iconfont.js +++ b/packages/editor/toolBar/iconfont.js @@ -1 +1 @@ -window._iconfont_svg_string_3243125='',function(e){var t=(t=document.getElementsByTagName("script"))[t.length-1],o=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var l,a,c,i,n,h=function(t,o){o.parentNode.insertBefore(t,o)};if(o&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(t){console&&console.log(t)}}l=function(){var t,o=document.createElement("div");o.innerHTML=e._iconfont_svg_string_3243125,(o=o.getElementsByTagName("svg")[0])&&(o.setAttribute("aria-hidden","true"),o.style.position="absolute",o.style.width=0,o.style.height=0,o.style.overflow="hidden",o=o,(t=document.body).firstChild?h(o,t.firstChild):t.appendChild(o))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(l,0):(a=function(){document.removeEventListener("DOMContentLoaded",a,!1),l()},document.addEventListener("DOMContentLoaded",a,!1)):document.attachEvent&&(c=l,i=e.document,n=!1,s(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,d())})}function d(){n||(n=!0,c())}function s(){try{i.documentElement.doScroll("left")}catch(t){return void setTimeout(s,50)}d()}}(window); \ No newline at end of file +window._iconfont_svg_string_3243125='',function(e){var t=(t=document.getElementsByTagName("script"))[t.length-1],o=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var l,c,i,a,n,h=function(t,o){o.parentNode.insertBefore(t,o)};if(o&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(t){console&&console.log(t)}}l=function(){var t,o=document.createElement("div");o.innerHTML=e._iconfont_svg_string_3243125,(o=o.getElementsByTagName("svg")[0])&&(o.setAttribute("aria-hidden","true"),o.style.position="absolute",o.style.width=0,o.style.height=0,o.style.overflow="hidden",o=o,(t=document.body).firstChild?h(o,t.firstChild):t.appendChild(o))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(l,0):(c=function(){document.removeEventListener("DOMContentLoaded",c,!1),l()},document.addEventListener("DOMContentLoaded",c,!1)):document.attachEvent&&(i=l,a=e.document,n=!1,s(),a.onreadystatechange=function(){"complete"==a.readyState&&(a.onreadystatechange=null,d())})}function d(){n||(n=!0,i())}function s(){try{a.documentElement.doScroll("left")}catch(t){return void setTimeout(s,50)}d()}}(window); \ No newline at end of file diff --git a/packages/editor/toolBar/index.js b/packages/editor/toolBar/index.js index 4abfe37..d77b1cd 100644 --- a/packages/editor/toolBar/index.js +++ b/packages/editor/toolBar/index.js @@ -1,6 +1,6 @@ import { Component, createRef } from '@typex/core' import './iconfont' -import { Dialog, Tooltip, DialogContent } from './compinents' +import { Tooltip, DialogContent } from './compinents' // 工具栏 export default class ToolBar extends Component { @@ -25,7 +25,6 @@ export default class ToolBar extends Component { } notice (commonKeyValue) { - console.log(commonKeyValue); this.toolBarItemInses.forEach((item) => item.onNotice(commonKeyValue)) } @@ -52,7 +51,7 @@ export default class ToolBar extends Component { class ToolBarItem extends Component { constructor(props) { super(props) - this.state = { active: false } + this.state = { active: false, dialogVisiable: false } this.props.toolBarItemInses.push(this) this.dialogRef = createRef() this.barItemRef = createRef() @@ -65,41 +64,58 @@ class ToolBarItem extends Component { }) } } - + getStyleColor () { + if (!this.state.active) return 'rgb(227 227 227);' + if (this.props.name === 'color') return 'rgb(227 227 227);' + return 'rgb(42 201 249)' + } render () { return ( - { - this.props.showDialog + this.props.name === 'color' ? : '' + } + { + this.props.showDialog && this.state.dialogVisiable ? - +
-
+ : '' } - + ) } onOk = (val) => { - this.dialogRef.current.toggle() + this.toggle() this.emitComand(val) } - + outClickHandle = (e) => { + if (this.barItemRef.current.contains(e.target)) return + this.setState({ dialogVisiable: false }) + document.removeEventListener('click', this.outClickHandle) + } + toggle () { + if (!this.state.dialogVisiable) { + document.addEventListener('click', this.outClickHandle) + } + this.setState({ dialogVisiable: !this.state.dialogVisiable }) + } emitComand = (val) => { this.props.editor.command(this.props.name, val) } clickHandle = () => { - if (this.dialogRef.current) { - this.dialogRef.current.toggle() + if (this.props.showDialog) { + this.toggle() } else { this.emitComand() } diff --git a/packages/editor/toolBar/toolBarOptions.js b/packages/editor/toolBar/toolBarOptions.js index 6aaf90b..2352dc5 100644 --- a/packages/editor/toolBar/toolBarOptions.js +++ b/packages/editor/toolBar/toolBarOptions.js @@ -33,7 +33,7 @@ const toolBarOptions = [ }, { tooltip: '字体颜色', - name: 'fontColor', + name: 'color', icon: '#icon-color', showDialog: true, commandHandle: (editor, { R, G, B, A }) => setFormat(editor, path => (path.node.formats.color = `rgba(${R},${G},${B},${A})`)), diff --git a/src/index.js b/src/index.js index bbfa808..bc3e54b 100644 --- a/src/index.js +++ b/src/index.js @@ -13,7 +13,7 @@ const toolBar = [ 'redo', 'header', 'fontSize', - 'fontColor', + 'color', 'bold', 'underline', 'deleteline',