1

packages/@typex-core/model/content.js

@@ -439,14 +439,14 @@ export default class Content extends Component {
 
   /**
    * @description 格式设置
-   * @param {*} range
+   * @param {Range} range
    * @param {function} callback 格式处理回调
    * @memberof Content
    * @instance
    */
   setFormat (range, callback) {
     const commonPath = range.startContainer.queryCommonPath(range.endContainer)
-    const selectedPath = this.$editor.selection.getSeletedPath()
+    const selectedPath = this.$editor.selection.getLeafPaths()
     for (const path of selectedPath) {
       callback(path)
     }
@@ -455,4 +455,23 @@ export default class Content extends Component {
       this.$editor.selection.drawRangeBg()
     })
   }
+
+  /**
+   * @description 组件设置
+   *  @param {Range} range
+   * @param {function} callback 格式处理回调
+   * @memberof Content
+   * @instance
+   */
+  setComponent (range, callback) {
+    const commonPath = range.startContainer.queryCommonPath(range.endContainer)
+    const selectedPath = this.$editor.selection.getPeerPaths()
+    for (const path of selectedPath) {
+      callback(path)
+    }
+    commonPath.currentComponent.$path.parent.currentComponent.update().then(() => {
+      range.updateCaret()
+      this.$editor.selection.drawRangeBg()
+    })
+  }
 }

packages/@typex-core/selection/index.js

@@ -378,7 +378,7 @@ export default class Selection {
    * @memberof Selection
    * @instance
    */
-  getSeletedPath () {
+  getLeafPaths () {
     if (this.collapsed) return []
     const range = this.ranges[0]
     let start,
@@ -433,6 +433,17 @@ 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) =>

packages/@typex-platform/web/dom.js

@@ -26,7 +26,6 @@ export function appendChild (parentNode, newNode) {
 }
 export function removeChild (parentNode, referenceNode) {
   execDestory(referenceNode)
-  console.log(1);
   return parentNode.removeChild(referenceNode)
 }
 

packages/editor/data.js

@@ -21,7 +21,6 @@ export const mockData = {
       data: [
         {
           data: '这是1121一个基于Typex编写的简单富文本编辑器demo',
-          formats: { color: '#666', bold: true, fontSize: '20px' },
         },
       ],
       formats: { paragraph: true },

packages/editor/formats/components/Header.js

@@ -8,11 +8,6 @@
 import Block from './block'
 export default class Header extends Block {
   render (h) {
-    // return h(`h${this.props.level}`, null, this.$path.render())
-    return (
-      <p>
-        {this.$path.render()}
-      </p>
-    )
+    return h(`h${this.props.level}`, null, this.$path.render())
   }
 }

packages/editor/toolBar/compinents/Dialog.js

@@ -9,7 +9,7 @@ export class Dialog extends Component {
     return (
       <div ref={this.dialogRef}>
         {this.state.visiable ? (
-          <div style='background:#ddd;position:absolute;top:35px;z-index:1'>
+          <div style='background:#efefef;position:absolute;top:35px;z-index:1'>
             {this.props.children.length ? this.props.children : 'dialog'}
           </div>
         ) : (

packages/editor/toolBar/compinents/DialogContent.js

@@ -23,7 +23,8 @@ const comMap = {
   header: (h, self) => {
     return <div onClick={(e) => headerClickHandle(e, self)} style="color:#666">
       {
-        headerOps.map(ele => <div data-headervalue={ele[0]}>{ele[1]}</div>)
+        // headerOps.map(ele => <div data-headervalue={ele[0]}>{ele[1]}</div>)
+        headerOps.map(ele => h(ele[1], { "data-headervalue": ele[0], style: { margin: '2px 0' }, class: 'header-selector-item' }, [ele[1]]))
       }
     </div>
   }

packages/editor/toolBar/compinents/toolBar.styl

@@ -3,7 +3,11 @@
     border solid 1px #eee
     background rgb(40 40 40)
     padding 6px
-
+
+    .header-selector-item:hover{
+        background: #ddd;
+        color: #2ac9f9
+    }
     .icon
         width 1.2em
         height 1.2em

packages/editor/toolBar/toolBarOptions.js

@@ -21,11 +21,10 @@ const toolBarOptions = [
         name: 'header',
         icon: '#icon-header',
         showDialog: true,
-        commandHandle: editor => {
-            editor.$path.children[1].node.formats.header = 1
-            editor.$path.currentComponent.update().then(() => {
-            })
-        }
+        commandHandle: (editor, level) => setComponent(editor, path => {
+            console.log(path);
+            path.node.formats = { header: level }
+        })
     },
     {
         tooltip: '字体大小',
@@ -117,4 +116,9 @@ function setFormat (editor, callback) {
     editor.selection.ranges.forEach((range) => {
         editor.$path.currentComponent.setFormat(range, callback)
     })
+}
+function setComponent (editor, callback) {
+    editor.selection.ranges.forEach((range) => {
+        editor.$path.currentComponent.setComponent(range, callback)
+    })
 }