feat:完善工具栏

src/core/selection/range/index.js

@@ -17,7 +17,11 @@ export default class Range {
     value: '',
     isComposing: false,
   }
-
+
+  /**
+   * @description 标识range方向
+   * @memberof Range
+   */
   d = 0
   constructor(PathizationRange, editor) {
     const { startContainer, endContainer, startOffset, endOffset, d } = PathizationRange
@@ -66,7 +70,6 @@ export default class Range {
    * @type {number}
    * @instance
    */
-
   set offset(offset) {
     if (this.d === 1) {
       this.endOffset = offset
@@ -88,6 +91,12 @@ export default class Range {
       this.startContainer = container
     }
   }
+
+  /**
+   * @description range快照
+   * @readonly
+   * @memberof Range
+   */
   get snapshot() {
     return {
       endContainer: this.endContainer.position,

src/editor/index.js

@@ -30,20 +30,15 @@ class Editor extends Typex {
     this.toolBarOption = toolBarOption
     toolBarOption.forEach((toolItem) => {
       toolItem.editor = this
-      this.conamndHandles[toolItem.command] = toolItem.commandHandle
+      this.conamndHandles[toolItem.commandName] = toolItem.commandHandle
     })
     return this
   }
-  command(name) {
+  command(name,val) {
     const commandHandle = this.conamndHandles[name]
+    console.log(commandHandle);
     if (typeof commandHandle !== 'function') return
-    this.selection.ranges.forEach((range) => {
-      const path = range.container
-      path.component.setFormat(range, commandHandle)
-    })
-    Promise.resolve().then(() => {
-      this.selection.updateCaret()
-    })
+    commandHandle(this,val)
   }
 }
 export default function createEditor(options = {}) {

src/editor/toolBar/compinents/Dialog.js

@@ -0,0 +1,32 @@
+import { Component, createRef } from '@/core'
+export class Dialog extends Component {
+    constructor(props) {
+      super(props)
+      this.state = { visiable: false }
+      this.dialogRef = createRef()
+    }
+    render() {
+      return (
+        <div ref={this.dialogRef} onClick={(e) => e.stopPropagation()}>
+          {this.state.visiable ? (
+            <div style='background:#ddd;height:200px;position:absolute;top:35px;width:300px;z-index:1'>
+              {this.props.children.length ? this.props.children : 'dialog'}
+            </div>
+          ) : (
+            ''
+          )}
+        </div>
+      )
+    }
+    outClickHandle = (e) => {
+      this.setState({ visiable: false })
+      document.removeEventListener('click', this.outClickHandle)
+    }
+    toggle() {
+      if (!this.state.visiable) {
+        console.log('==toggle===')
+        document.addEventListener('click', this.outClickHandle)
+      }
+      this.setState({ visiable: !this.state.visiable })
+    }
+  }

src/editor/toolBar/compinents/DialogContent.js

@@ -0,0 +1,22 @@
+import { Component, createRef } from '@/core'
+
+const comMap = {
+    fontColor:(h,self)=>(
+        <div id="colorPicker">
+            <div id="colorDisplay"></div>
+            <input type="color" id="colorInput"/>
+            <label for="alphaInput">Alpha:</label>
+            <input type="range" id="alphaInput" min="0" max="1" step="0.01" value="1"/>
+      </div>
+    )
+}
+export class DialogContent extends Component {
+    constructor(props) {
+      super(props)
+    }
+    render(h) {
+      return comMap[this.props.name]?.(h,this)
+    }
+  }
+
+

src/editor/toolBar/compinents/Tooltip.js

@@ -0,0 +1,16 @@
+import { Component } from '@/core'
+export class Tooltip extends Component {
+    render() {
+      return (
+        <div class='editor-tooltip'>
+          {this.props.children.length ? this.props.children : ''}
+          <span
+            class='tooltiptext top'
+            style={`width:${this.props.width}px;margin-left:-${this.props.width / 2}px;`}
+          >
+            {this.props.content || 'content'}
+          </span>
+        </div>
+      )
+    }
+  }

src/editor/toolBar/compinents/index.js

@@ -0,0 +1,3 @@
+export {Dialog} from "./Dialog";
+export {Tooltip} from "./Tooltip";
+export {DialogContent} from './DialogContent'

src/editor/toolBar/index.js

@@ -1,6 +1,7 @@
 import { Component, createRef } from '@/core'
 import './iconfont'
 import './toolBar.styl'
+import { Dialog,Tooltip,DialogContent } from './compinents'
 // 工具栏
 export default class ToolBar extends Component {
   toolBarItems = []
@@ -36,102 +37,66 @@ export default class ToolBar extends Component {
       </div>
     )
   }
-  onCommand = (command, ...args) => {
-    this.props.onCommand(command, ...args)
+  onCommand = (commandName, ...args) => {
+    this.props.onCommand(commandName, ...args)
   }
 }
 // // 工具栏-元素
 class ToolBarItem extends Component {
   constructor(props) {
     super(props)
-    this.state = { value: false }
+    this.state = { active: false }
     this.props.toolBarItems.push(this)
     this.dialogRef = createRef()
   }
   onNotice(commonKeyValue) {
-    if (commonKeyValue[this.props.command] !== this.state.value) {
+    if (commonKeyValue[this.props.commandName] !== this.state.active) {
       this.setState({
-        value: commonKeyValue[this.props.command],
+        active: commonKeyValue[this.props.commandName],
       })
     }
   }
   render() {
     return (
       <span
-        onClick={this.click}
+        onClick={this.clickHandle}
         class='editor-tool-bar-item'
-        style={`color: ${!this.state.value ? 'rgb(227 227 227);' : 'rgb(42 201 249)'};`}
+        style={`color: ${!this.state.active ? 'rgb(227 227 227);' : 'rgb(42 201 249)'};`}
       >
         <svg class='icon' aria-hidden ns='http://www.w3.org/2000/svg'>
           <use xlink:href={this.props.icon}></use>
         </svg>
-        <Dialog ref={this.dialogRef}>
-          <span style='color:red'>dialog</span>
-        </Dialog>
+        {
+          this.props.options
+          ?
+            <Dialog ref={this.dialogRef}>
+              <DialogContent name={this.props.commandName} options={this.props.options}></DialogContent>
+            </Dialog>
+          :''
+        }
       </span>
     )
   }
-  click = (e) => {
+  emitComand = ()=>{
+    this.props.editor.command(this.props.commandName)
+  }
+  clickHandle = (e) => {
     e.stopPropagation()
-    this.dialogRef.current.toggle()
     this.setState({
-      value: !this.state.value,
+      active: !this.state.active,
     })
-    this.props.editor.command(this.props.command)
-  }
-}
-
-export class Tooltip extends Component {
-  render() {
-    return (
-      <div class='editor-tooltip'>
-        {this.props.children.length ? this.props.children : ''}
-        <span
-          class='tooltiptext top'
-          style={`width:${this.props.width}px;margin-left:-${this.props.width / 2}px;`}
-        >
-          {this.props.content || 'content'}
-        </span>
-      </div>
-    )
-  }
-}
-export class Dialog extends Component {
-  constructor(props) {
-    super(props)
-    this.state = { visiable: false }
-    this.dialogRef = createRef()
-  }
-  render() {
-    return (
-      <div ref={this.dialogRef} onClick={(e) => e.stopPropagation()}>
-        {this.state.visiable ? (
-          <div style='background:#ddd;height:200px;position:absolute;top:35px;width:300px;z-index:1'>
-            {this.props.children.length ? this.props.children : 'dialog'}
-          </div>
-        ) : (
-          ''
-        )}
-      </div>
-    )
-  }
-  outClickHandle = (e) => {
-    this.setState({ visiable: false })
-    document.removeEventListener('click', this.outClickHandle)
-  }
-  toggle() {
-    if (!this.state.visiable) {
-      console.log('==toggle===')
-      document.addEventListener('click', this.outClickHandle)
+    if(this.dialogRef.current){
+      this.dialogRef.current.toggle()
+    }else{
+      this.emitComand()
     }
-    this.setState({ visiable: !this.state.visiable })
   }
 }
+
+
 function findCommonKeyValuePairs(lists) {
   if (lists.length === 0) return {}
-
   const commonPairs = {}
-
   for (const key in lists[0]) {
     const value = lists[0][key]
 

src/editor/toolBar/toolBar.styl

@@ -56,3 +56,35 @@
     .editor-tooltip .tooltiptext.top::after
         top 100%
         border-color black transparent transparent transparent
+
+
+    #colorPicker {
+      width: 200px;
+      padding: 10px;
+      background-color: #fff;
+      border: 1px solid #ccc;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+      border-radius: 5px;
+      text-align: center;
+    }
+
+    #colorDisplay {
+      width: 100%;
+      height: 50px;
+      margin-bottom: 10px;
+    }
+
+    #colorInput {
+      width: 100%;
+      padding: 5px;
+      border: 1px solid #ccc;
+      border-radius: 3px;
+    }
+
+    #alphaInput {
+      width: 100%;
+      padding: 5px;
+      border: 1px solid #ccc;
+      border-radius: 3px;
+      margin-top: 5px;
+    }