@textbus/collaborate 2.0.0-alpha.36

package/src/local-to-remote.ts

@@ -0,0 +1,180 @@
+import { Action, Operation, SlotLiteral, ComponentLiteral, Format, FormatRange, FormatValue } from '@textbus/core'
+import { Array as YArray, Map as YMap } 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
+  }
+  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
+  }
+  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
+    }
+  })
+}
+
+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
+  }
+  const content = slotYMap.get('content') as YArray<any>
+
+  let index: number
+  let len: number
+  actions.forEach(action => {
+    switch (action.type) {
+      case 'retain':
+        if (action.formats) {
+          mergeSharedFormats(index, action.index, action.formats, slotYMap)
+        }
+        index = action.index
+        break
+      case 'insert':
+        if (typeof action.content === 'string') {
+          len = action.content.length
+          content.insert(index, action.content.split(''))
+        } else {
+          len = 1
+          content.insert(index, [makeSharedComponentByComponentLiteral(action.content)])
+        }
+        if (action.formats) {
+          insertSharedFormats(index, len, action.formats, slotYMap)
+        }
+        break
+      case 'delete':
+        if (content.length === 0) {
+          // 当内容为空时，slot 实例内容为 ['\n']，触发删除会导致长度溢出
+          return
+        }
+        content.delete(index, action.count)
+        break
+      case 'apply':
+        slotYMap.set('state', action.value)
+        break
+    }
+  })
+}
+
+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)
+}
+
+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 oldFormatRanges = sharedFormats.get(key)!
+    const formatRanges = Format.normalizeFormatRange(oldFormatRanges, {
+      startIndex,
+      endIndex,
+      value: formats[key]
+    })
+    sharedFormats.set(key, formatRanges)
+  })
+}
+
+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 根节点样式
+        }
+        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)])
+    }
+    index += size
+  })
+  const formats = new YMap()
+  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
+}

package/src/public-api.ts

@@ -0,0 +1 @@
+export * from './collaborate'

package/src/remote-to-local.ts

@@ -0,0 +1,140 @@
+import { Map as YMap, YArrayEvent, YEvent, YMapEvent } from 'yjs'
+import { ComponentInstance, FormatterList, FormatType, Slot, Translator } from '@textbus/core'
+
+type YPath = [number, string][]
+
+export function remoteToLocal(events: YEvent[], slot: Slot, translator: Translator, formatterList: FormatterList) {
+  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, formatterList)
+      return
+    }
+
+    apply(ev, slot, translator)
+  })
+}
+
+function applySharedComponentToComponent(ev: YEvent, path: YPath, component: ComponentInstance, translator: Translator, formatterList: FormatterList,) {
+  if (path.length) {
+    const childPath = path.shift()!
+    const slot = component.slots.get(childPath[0])!
+    applySharedSlotToSlot(ev, path, slot, translator, formatterList, 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)
+        })
+      }
+    })
+  } 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)
+      }
+    })
+  }
+}
+
+function applySharedSlotToSlot(ev: YEvent, path: YPath, slot: Slot, translator: Translator, formatterList: FormatterList, isUpdateFormats: boolean) {
+  if (path.length) {
+    const componentIndex = path.shift()![0]
+    const component = slot.getContentAtIndex(componentIndex) as ComponentInstance
+    applySharedComponentToComponent(ev, path, component, translator, formatterList)
+    return
+  }
+
+  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 = formatterList.get(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 {
+      ev.keysChanged.forEach(key => {
+        if (key === 'state') {
+          const state = (ev.target as YMap<any>).get('state')
+          slot.updateState(draft => {
+            Object.assign(draft, state)
+          })
+        }
+      })
+    }
+  }
+}
+
+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)
+          } else {
+            const json = item.toJSON()
+            const component = translator.createComponent(json)!
+            slot.insert(component)
+          }
+        })
+      } else if (action.retain) {
+        slot.retain(action.retain)
+      } else if (action.delete) {
+        slot.retain(slot.index)
+        slot.delete(action.delete)
+      }
+    })
+  }
+}

package/tsconfig-build.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
+    "lib": ["esnext", "dom"],
+    "target": "es6",
+    "strict": true,
+    "module": "es2020",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "noImplicitAny": false,
+    "suppressImplicitAnyIndexErrors": true,
+    "outDir": "bundles/",
+    "downlevelIteration": true,
+    "jsx": "react",
+    "jsxFactory": "VElement.createElement",
+    "paths": {
+      "@textbus/collaborate": ["./src/public-api.ts"],
+    }
+  },
+  "include": [
+    "src/"
+  ]
+}