@textbus/collaborate 2.0.0-alpha.38 → 2.0.0-alpha.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textbus/collaborate",
-  "version": "2.0.0-alpha.38",
+  "version": "2.0.0-alpha.39",
   "description": "TextBus is a rich text editor and framework that is highly customizable and extensible to achieve rich wysiwyg effects.",
   "main": "./bundles/public-api.js",
   "module": "./bundles/public-api.js",
@@ -27,8 +27,8 @@
   "dependencies": {
     "@tanbo/di": "^1.0.5",
     "@tanbo/stream": "^0.0.12",
-    "@textbus/browser": "^2.0.0-alpha.38",
-    "@textbus/core": "^2.0.0-alpha.38",
+    "@textbus/browser": "^2.0.0-alpha.39",
+    "@textbus/core": "^2.0.0-alpha.39",
     "reflect-metadata": "^0.1.13",
     "y-protocols": "^1.0.5",
     "yjs": "^13.5.27"
@@ -44,5 +44,5 @@
   "bugs": {
     "url": "https://github.com/textbus/textbus.git/issues"
   },
-  "gitHead": "ee9175a3ad0ecf1e3470bd36faa5a2b336df2cea"
+  "gitHead": "a3de1ffbf0b8527eff875cd415b5d8d16df91ecb"
 }

package/src/collab/_api.ts

@@ -1,4 +1,3 @@
 export * from './collaborate-cursor'
-export * from './collaborate-history'
 export * from './local-to-remote'
 export * from './remote-to-local'

package/src/collab/local-to-remote.ts

@@ -1,184 +1,158 @@
-import { Action, Operation, SlotLiteral, ComponentLiteral, Format, FormatRange, FormatValue } from '@textbus/core'
-import { Array as YArray, Map as YMap } from 'yjs'
+import { Action, Operation, SlotLiteral, ComponentLiteral } from '@textbus/core'
+import { Array as YArray, Map as YMap, Text as YText } from 'yjs'
 
-export function localToRemote(operation: Operation, root: YArray<any>) {
-  const path = [...operation.path]
-  path.shift()
-  if (path.length) {
-    const componentIndex = path.shift()!
-    applyComponentOperationToSharedComponent(path, operation.apply, root.get(componentIndex))
-    return
+export class LocalToRemote {
+  transform(operation: Operation, root: YText) {
+    const path = [...operation.path]
+    path.shift()
+    if (path.length) {
+      const componentIndex = path.shift()!
+      const sharedComponent = this.getSharedComponentByIndex(root, componentIndex)
+      if (sharedComponent) {
+        this.applyComponentOperationToSharedComponent(path, operation.apply, sharedComponent)
+      }
+      return
+    }
+    this.mergeActionsToSharedSlot(root, operation.apply)
   }
-  insertContent(root, operation.apply)
-}
 
-function applyComponentOperationToSharedComponent(path: number[], actions: Action[], componentYMap: YMap<any>) {
-  const sharedSlots = componentYMap.get('slots') as YArray<any>
-  if (path.length) {
-    const slotIndex = path.shift()!
-    const sharedSlot = sharedSlots.get(slotIndex)
-    applySlotOperationToSharedSlot(path, actions, sharedSlot)
-    return
+  private applyComponentOperationToSharedComponent(path: number[], actions: Action[], componentYMap: YMap<any>) {
+    const sharedSlots = componentYMap.get('slots') as YArray<any>
+    if (path.length) {
+      const slotIndex = path.shift()!
+      const sharedSlot = sharedSlots.get(slotIndex)
+      this.applySlotOperationToSharedSlot(path, actions, sharedSlot)
+      return
+    }
+    let index: number
+    actions.forEach(action => {
+      switch (action.type) {
+        case 'retain':
+          index = action.offset
+          break
+        case 'insertSlot':
+          sharedSlots.insert(index, [this.makeSharedSlotBySlotLiteral(action.slot)])
+          index++
+          break
+        case 'apply':
+          componentYMap.set('state', action.value)
+          break
+        case 'delete':
+          sharedSlots.delete(index, action.count)
+          break
+      }
+    })
   }
-  let index: number
-  actions.forEach(action => {
-    switch (action.type) {
-      case 'retain':
-        index = action.index
-        break
-      case 'insertSlot':
-        sharedSlots.insert(index, [makeSharedSlotBySlotLiteral(action.slot)])
-        break
-      case 'apply':
-        componentYMap.set('state', action.value)
-        break
-      case 'delete':
-        sharedSlots.delete(index, action.count)
-        break
+
+  private applySlotOperationToSharedSlot(path: number[], actions: Action[], slotYMap: YMap<any>) {
+    if (path.length) {
+      const componentIndex = path.shift()!
+      const sharedContent = slotYMap.get('content') as YText
+      const sharedComponent = this.getSharedComponentByIndex(sharedContent, componentIndex)!
+      this.applyComponentOperationToSharedComponent(path, actions, sharedComponent)
+      return
     }
-  })
-}
+    const content = slotYMap.get('content') as YText
 
-function applySlotOperationToSharedSlot(path: number[], actions: Action[], slotYMap: YMap<any>) {
-  if (path.length) {
-    const componentIndex = path.shift()!
-    const sharedContent = slotYMap.get('content') as YArray<any>
-    const sharedComponent = sharedContent.get(componentIndex)
-    applyComponentOperationToSharedComponent(path, actions, sharedComponent)
-    return
+    this.mergeActionsToSharedSlot(content, actions)
   }
-  const content = slotYMap.get('content') as YArray<any>
 
-  let index: number
-  let len: number
-  actions.forEach(action => {
-    switch (action.type) {
-      case 'retain':
+  private mergeActionsToSharedSlot(content: YText, actions: Action[]) {
+    let index: number
+    let length: number
+
+    actions.forEach(action => {
+      if (action.type === 'retain') {
         if (action.formats) {
-          mergeSharedFormats(index, action.index, action.formats, slotYMap)
+          content.format(index, action.offset, action.formats)
+        } else {
+          index = action.offset
         }
-        index = action.index
-        break
-      case 'insert':
+      } else if (action.type === 'insert') {
+        const delta = content.toDelta()
+        const isEmpty = delta.length === 1 && delta[0].insert === '\n'
+
         if (typeof action.content === 'string') {
-          len = action.content.length
-          content.insert(index, action.content.split(''))
+          length = action.content.length
+          content.insert(index, action.content)
         } else {
-          len = 1
-          content.insert(index, [makeSharedComponentByComponentLiteral(action.content)])
+          length = 1
+          content.insertEmbed(index, this.makeSharedComponentByComponentLiteral(action.content))
         }
         if (action.formats) {
-          insertSharedFormats(index, len, action.formats, slotYMap)
+          content.format(index, length, action.formats)
         }
-        break
-      case 'delete':
-        if (content.length === 0) {
-          // 当内容为空时，slot 实例内容为 ['\n']，触发删除会导致长度溢出
-          return
+        if (isEmpty && index === 0) {
+          content.delete(content.length - 1, 1)
         }
+        index += length
+      } else if (action.type === 'delete') {
+        const delta = content.toDelta()
         content.delete(index, action.count)
-        break
-      case 'apply':
-        slotYMap.set('state', action.value)
-        break
-    }
-  })
-}
+        if (content.length === 0) {
+          content.insert(0, '\n', delta[0]?.attributes)
+        }
+      } else if (action.type === 'apply') {
+        content.setAttribute('state', action.value)
+      }
+    })
+  }
 
-function insertSharedFormats(index: number, distance: number, formats: Record<string, FormatValue>, sharedSlots: YMap<any>) {
-  const sharedFormats = sharedSlots.get('formats') as YMap<FormatRange[]>
-  const keys = Array.from(sharedFormats.keys())
-  const expandedValues = Array.from<string>({length: distance})
-  keys.forEach(key => {
-    const formatRanges = sharedFormats.get(key)!
-    const values = Format.tileRanges(formatRanges)
-    values.splice(index, 0, ...expandedValues)
-    const newRanges = Format.toRanges(values)
-    sharedFormats.set(key, newRanges)
-  })
-  mergeSharedFormats(index, index + distance, formats, sharedSlots)
-}
+  private makeSharedSlotBySlotLiteral(slotLiteral: SlotLiteral): YMap<any> {
+    const content = new YText()
+    let index = 0
+    slotLiteral.content.forEach(i => {
+      let size: number
+      if (typeof i === 'string') {
+        size = i.length
+        content.insert(index, i)
+      } else {
+        size = 1
+        content.insertEmbed(index, this.makeSharedComponentByComponentLiteral(i))
+      }
+      index += size
+    })
+    const formats = slotLiteral.formats
+    Object.keys(formats).forEach(key => {
+      const formatRanges = formats[key]
+      formatRanges.forEach(formatRange => {
+        content.format(formatRange.startIndex, formatRange.endIndex - formatRange.startIndex, {
+          [key]: formatRange.value
+        })
+      })
+    })
 
-function mergeSharedFormats(startIndex: number, endIndex: number, formats: Record<string, FormatValue>, sharedSlots: YMap<any>) {
-  const sharedFormats = sharedSlots.get('formats') as YMap<FormatRange[]>
-  Object.keys(formats).forEach(key => {
-    if (!sharedFormats.has(key)) {
-      sharedFormats.set(key, [{
-        startIndex,
-        endIndex,
-        value: formats[key]
-      }])
-    }
+    const sharedSlot = new YMap()
+    sharedSlot.set('content', content)
+    sharedSlot.set('schema', slotLiteral.schema)
+    return sharedSlot
+  }
 
-    const oldFormatRanges = sharedFormats.get(key)!
-    const formatRanges = Format.normalizeFormatRange(oldFormatRanges, {
-      startIndex,
-      endIndex,
-      value: formats[key]
+  private makeSharedComponentByComponentLiteral(componentLiteral: ComponentLiteral): YMap<any> {
+    const slots = new YArray()
+    componentLiteral.slots.forEach(item => {
+      slots.push([this.makeSharedSlotBySlotLiteral(item)])
     })
-    sharedFormats.set(key, formatRanges)
-  })
-}
+    const sharedComponent = new YMap()
+    sharedComponent.set('name', componentLiteral.name)
+    sharedComponent.set('slots', slots)
+    sharedComponent.set('state', componentLiteral.state)
+    return sharedComponent
+  }
 
-function insertContent(content: YArray<any>, actions: Action[]) {
-  let index: number
-  actions.forEach(action => {
-    switch (action.type) {
-      case 'retain':
-        index = action.index
-        break
-      case 'insert':
-        content.insert(index!, [
-          typeof action.content === 'string' ?
-            action.content :
-            makeSharedComponentByComponentLiteral(action.content)
-        ])
-        if (action.formats) {
-          // TODO 根节点样式
+  private getSharedComponentByIndex(host: YText, index: number): YMap<any> | null {
+    const delta = host.toDelta()
+    let i = 0
+    for (const action of delta) {
+      if (action.insert) {
+        if (i === index) {
+          return action.insert instanceof YMap ? action.insert : null
         }
-        break
-      case 'delete':
-        content.delete(index, action.count)
-        break
-    }
-  })
-}
-
-function makeSharedSlotBySlotLiteral(slotLiteral: SlotLiteral): YMap<any> {
-  const content = new YArray()
-  let index = 0
-  slotLiteral.content.forEach(i => {
-    let size: number
-    if (typeof i === 'string') {
-      size = i.length
-      content.insert(index, [i])
-    } else {
-      size = 1
-      content.insert(index, [makeSharedComponentByComponentLiteral(i)])
+        i += action.insert instanceof YMap ? 1 : action.insert.length
+      } else {
+        throw new Error('xxx')
+      }
     }
-    index += size
-  })
-  const formats = new YMap()
-  Object.keys(slotLiteral.formats).forEach(key => {
-    formats.set(key, slotLiteral.formats[key])
-  })
-
-  const sharedSlot = new YMap()
-  sharedSlot.set('state', slotLiteral.state)
-  sharedSlot.set('content', content)
-  sharedSlot.set('schema', slotLiteral.schema)
-  sharedSlot.set('formats', formats)
-  return sharedSlot
-}
-
-function makeSharedComponentByComponentLiteral(componentLiteral: ComponentLiteral): YMap<any> {
-  const slots = new YArray()
-  componentLiteral.slots.forEach(item => {
-    slots.push([makeSharedSlotBySlotLiteral(item)])
-  })
-  const sharedComponent = new YMap()
-  sharedComponent.set('name', componentLiteral.name)
-  sharedComponent.set('slots', slots)
-  sharedComponent.set('state', componentLiteral.state)
-  return sharedComponent
+    return null
+  }
 }

package/src/collab/remote-to-local.ts

@@ -1,140 +1,151 @@
-import { Map as YMap, YArrayEvent, YEvent, YMapEvent } from 'yjs'
-import { ComponentInstance, FormatType, Registry, Slot, Translator } from '@textbus/core'
+import { Map as YMap, YArrayEvent, YEvent, YMapEvent, Text as YText, YTextEvent, Array as YArray } from 'yjs'
+import { ComponentInstance, ComponentLiteral, Registry, Slot, Translator } from '@textbus/core'
 
 type YPath = [number, string][]
 
-export function remoteToLocal(events: YEvent[], slot: Slot, translator: Translator, registry: Registry) {
-  events.forEach(ev => {
-    const path: YPath = []
-
-    for (let i = 0; i < ev.path.length; i += 2) {
-      path.push(ev.path.slice(i, i + 2) as [number, string])
-    }
-
-    if (path.length) {
-      const componentIndex = path.shift()![0] as number
-      const component = slot.getContentAtIndex(componentIndex) as ComponentInstance
-      applySharedComponentToComponent(ev, path, component, translator, registry)
-      return
-    }
+export class RemoteToLocal {
+  constructor(private translator: Translator,
+              private registry: Registry) {
+  }
 
-    apply(ev, slot, translator)
-  })
-}
+  transform(events: YEvent[], slot: Slot) {
+    events.forEach(ev => {
+      const path: YPath = []
 
-function applySharedComponentToComponent(ev: YEvent, path: YPath, component: ComponentInstance, translator: Translator, registry: Registry,) {
-  if (path.length) {
-    const childPath = path.shift()!
-    const slot = component.slots.get(childPath[0])!
-    applySharedSlotToSlot(ev, path, slot, translator, registry, childPath[1] === 'formats')
-    return
-  }
-  if (ev instanceof YMapEvent) {
-    ev.keysChanged.forEach(key => {
-      if (key === 'state') {
-        const state = (ev.target as YMap<any>).get('state')
-        component.updateState(draft => {
-          Object.assign(draft, state)
-        })
+      for (let i = 0; i < ev.path.length; i += 2) {
+        path.push(ev.path.slice(i, i + 2) as [number, string])
       }
-    })
-  } else if (ev instanceof YArrayEvent) {
-    const slots = component.slots
-    ev.delta.forEach(action => {
-      if (Reflect.has(action, 'retain')) {
-        slots.retain(action.retain!)
-      } else if (action.insert) {
-        (action.insert as Array<any>).forEach(item => {
-          slots.insert(translator.createSlot(item.toJSON())!)
-        })
-      } else if (action.delete) {
-        slots.retain(slots.index)
-        slots.delete(action.delete)
+
+      if (path.length) {
+        const componentIndex = path.shift()![0] as number
+        const component = slot.getContentAtIndex(componentIndex) as ComponentInstance
+        this.applySharedComponentToComponent(ev, path, component)
+        return
       }
-    })
-  }
-}
 
-function applySharedSlotToSlot(ev: YEvent, path: YPath, slot: Slot, translator: Translator, registry: Registry, isUpdateFormats: boolean) {
-  if (path.length) {
-    const componentIndex = path.shift()![0]
-    const component = slot.getContentAtIndex(componentIndex) as ComponentInstance
-    applySharedComponentToComponent(ev, path, component, translator, registry)
-    return
+      this.applySharedSlotToSlot(ev, path, slot)
+    })
   }
 
-  if (ev instanceof YArrayEvent) {
-    ev.delta.forEach(action => {
-      if (Reflect.has(action, 'retain')) {
-        slot.retain(action.retain!)
-      } else if (action.insert) {
-        (action.insert as Array<any>).forEach(item => {
-          if (typeof item === 'string') {
-            slot.insert(item)
-          } else {
-            slot.insert(translator.createComponent(item.toJSON())!)
-          }
-        })
-      } else if (action.delete) {
-        slot.retain(slot.index)
-        slot.delete(action.delete)
-      }
-    })
-  } else if (ev instanceof YMapEvent) {
-    if (isUpdateFormats) {
-      const json = ev.target.toJSON()
-      ev.keysChanged.forEach(key => {
-        const formats = json[key]
-        const formatter = registry.getFormatter(key)!
-        if (formatter.type !== FormatType.Block) {
-          slot.applyFormat(formatter, {
-            startIndex: 0,
-            endIndex: slot.length,
-            value: null
-          })
-        }
-        formats.forEach(item => {
-          if (formatter.type === FormatType.Block) {
-            slot.applyFormat(formatter, item.value)
-          } else {
-            slot.applyFormat(formatter, item)
-          }
-        })
-      })
-    } else {
+  private applySharedComponentToComponent(ev: YEvent, path: YPath, component: ComponentInstance) {
+    if (path.length) {
+      const childPath = path.shift()!
+      const slot = component.slots.get(childPath[0])!
+      this.applySharedSlotToSlot(ev, path, slot)
+      return
+    }
+    if (ev instanceof YMapEvent) {
       ev.keysChanged.forEach(key => {
         if (key === 'state') {
           const state = (ev.target as YMap<any>).get('state')
-          slot.updateState(draft => {
+          component.updateState(draft => {
             Object.assign(draft, state)
           })
         }
       })
+    } else if (ev instanceof YArrayEvent) {
+      const slots = component.slots
+      ev.delta.forEach(action => {
+        if (Reflect.has(action, 'retain')) {
+          slots.retain(action.retain!)
+        } else if (action.insert) {
+          (action.insert as Array<any>).forEach(item => {
+            slots.insert(this.translator.createSlot(item.toJSON())!)
+          })
+        } else if (action.delete) {
+          slots.retain(slots.index)
+          slots.delete(action.delete)
+        }
+      })
     }
   }
-}
 
-function apply(ev: YEvent, slot: Slot, translator: Translator) {
-  if (ev instanceof YArrayEvent) {
-    slot.retain(0)
-    const delta = ev.delta
-    delta.forEach(action => {
-      if (action.insert) {
-        (action.insert as Array<string | YMap<any>>).forEach(item => {
-          if (typeof item === 'string') {
-            slot.insert(item)
+  private applySharedSlotToSlot(ev: YEvent, path: YPath, slot: Slot) {
+    if (path.length) {
+      path.shift()
+      const delta = (ev.target.parent as YText).toDelta()
+      let componentIndex = 0
+      for (let i = 0; i < delta.length; i++) {
+        const action = delta[i]
+        if (action.insert === ev.target) {
+          break
+        }
+        componentIndex += typeof action.insert === 'string' ? action.insert.length : 1
+      }
+      const component = slot.getContentAtIndex(componentIndex) as ComponentInstance
+      this.applySharedComponentToComponent(ev, path, component)
+      return
+    }
+
+    if (ev instanceof YTextEvent) {
+      slot.retain(0)
+      ev.delta.forEach(action => {
+        if (Reflect.has(action, 'retain')) {
+          if (action.attributes) {
+            slot.retain(action.retain!, Object.keys(action.attributes).map(key => {
+              return [this.registry.getFormatter(key)!, action.attributes![key]]
+            }))
+          }
+          slot.retain(action.retain!)
+        } else if (action.insert) {
+          if (typeof action.insert === 'string') {
+            slot.insert(action.insert, action.attributes ? Object.keys(action.attributes).map(key => {
+              return [this.registry.getFormatter(key)!, action.attributes![key]]
+            }) : [])
           } else {
-            const json = item.toJSON()
-            const component = translator.createComponent(json)!
+            const component = this.createComponentBySharedComponent(action.insert as YMap<any>)
             slot.insert(component)
           }
-        })
-      } else if (Reflect.has(action, 'retain')) {
-        slot.retain(action.retain!)
-      } else if (action.delete) {
-        slot.retain(slot.index)
-        slot.delete(action.delete)
-      }
+        } else if (action.delete) {
+          slot.retain(slot.index)
+          slot.delete(action.delete)
+        } else if (action.attributes) {
+          slot.updateState(draft => {
+            Object.assign(draft, action.attributes)
+          })
+        }
+      })
+    } else {
+      throw new Error('xxx')
+    }
+  }
+
+  private createComponentBySharedComponent(yMap: YMap<any>): ComponentInstance {
+    const slots = yMap.get('slots') as YArray<YMap<any>>
+    const componentLiteral: ComponentLiteral = {
+      state: yMap.get('state'),
+      name: yMap.get('name'),
+      slots: slots.map(sharedSlot => {
+        return this.createSlotBySharedSlot(sharedSlot).toJSON()
+      })
+    }
+    return this.translator.createComponent(componentLiteral)!
+  }
+
+  private createSlotBySharedSlot(sharedSlot: YMap<any>): Slot {
+    const content = sharedSlot.get('content') as YText
+    const delta = content.toDelta()
+
+    const slot = this.translator.createSlot({
+      schema: sharedSlot.get('schema'),
+      state: sharedSlot.get('state'),
+      formats: {},
+      content: []
     })
+
+    for (const action of delta) {
+      if (action.insert) {
+        if (typeof action.insert === 'string') {
+          slot.insert(action.insert, action.attributes ? Object.keys(action.attributes).map(key => {
+            return [this.registry.getFormatter(key)!, action.attributes![key]]
+          }) : [])
+        } else {
+          slot.insert(this.createComponentBySharedComponent(action.insert))
+        }
+      } else {
+        throw new Error('xxx')
+      }
+    }
+    return slot
   }
 }