How to use slate-base64-serializer - 10 common examples

)

  const window = getWindow(event.target)
  const native = window.getSelection()
  const { value } = editor
  const { document, fragment, selection } = value
  const { start, end } = selection
  const startVoid = document.getClosestVoid(start.path, editor)
  const endVoid = document.getClosestVoid(end.path, editor)

  // If the selection is collapsed, and it isn't inside a void node, abort.
  if (native.isCollapsed && !startVoid) return

  // Create a fake selection so that we can add a Base64-encoded copy of the
  // fragment to the HTML, to decode on future pastes.
  const encoded = Base64.serializeNode(fragment)
  const range = native.getRangeAt(0)
  let contents = range.cloneContents()
  let attach = contents.childNodes[0]

  // Make sure attach is a non-empty node, since empty nodes will not get copied
  contents.childNodes.forEach(node => {
    if (node.textContent && node.textContent.trim() !== '') {
      attach = node
    }
  })

  // COMPAT: If the end node is a void node, we need to move the end of the
  // range from the void node's spacer span, to the end of the void node's
  // content, since the spacer is before void's content in the DOM.
  if (endVoid) {
    const r = range.cloneRange()

function onCutOrCopy(event, change, editor) {
    const window = getWindow(event.target)
    const native = window.getSelection()
    const { state } = change
    const { startKey, endKey, startText, endBlock, endInline } = state
    const isVoidBlock = endBlock && endBlock.isVoid
    const isVoidInline = endInline && endInline.isVoid
    const isVoid = isVoidBlock || isVoidInline

    // If the selection is collapsed, and it isn't inside a void node, abort.
    if (native.isCollapsed && !isVoid) return

    // Create a fake selection so that we can add a Base64-encoded copy of the
    // fragment to the HTML, to decode on future pastes.
    const { fragment } = state
    const encoded = Base64.serializeNode(fragment)
    const range = native.getRangeAt(0)
    let contents = range.cloneContents()
    let attach = contents.childNodes[0]

    // If the end node is a void node, we need to move the end of the range from
    // the void node's spacer span, to the end of the void node's content.
    if (isVoid) {
      const r = range.cloneRange()
      const n = isVoidBlock ? endBlock : endInline
      const node = findDOMNode(n)
      r.setEndAfter(node)
      contents = r.cloneContents()
      attach = contents.childNodes[contents.childNodes.length - 1].firstChild
    }

    // COMPAT: in Safari and Chrome when selecting a single marked word,

const { value } = editor
    const { document } = value
    const path = editor.findPath(event.target)
    const node = document.getNode(path)
    const ancestors = document.getAncestors(path)
    const isVoid =
      node && (editor.isVoid(node) || ancestors.some(a => editor.isVoid(a)))
    const selectionIncludesNode = value.blocks.some(block => block === node)

    // If a void block is dragged and is not selected, select it (necessary for local drags).
    if (isVoid && !selectionIncludesNode) {
      editor.moveToRangeOfNode(node)
    }

    const fragment = editor.value.fragment
    const encoded = Base64.serializeNode(fragment)
    setEventTransfer(event, 'fragment', encoded)
    next()
  }

handleDragStart = (event: React.DragEvent) => {
    const {node, readOnly} = this.props
    if (readOnly) {
      event.preventDefault()
      return
    }
    this.setState({isDragging: true})
    this.addDragHandlers()
    const encoded = Base64.serializeNode(node, {
      preserveKeys: true,
      preserveData: true
    })
    setEventTransfer(event, 'node', encoded)
    event.dataTransfer.effectAllowed = 'move'
    // Specify dragImage so that single elements in the preview will not be the drag image,
    // but always the whole block thing itself.
    // Also clone it so that it will not be visually clipped by scroll-containers etc.
    const element: HTMLElement = event.currentTarget
    if (element) {
      this._dragGhost = element.cloneNode(true) as HTMLElement
      this._dragGhost.style.width = `${element.clientWidth}px`
      this._dragGhost.style.height = `${element.clientHeight}px`
      this._dragGhost.style.position = 'absolute'
      this._dragGhost.style.top = '-99999px'
      this._dragGhost.style.left = '-99999px'

handleDragStart = (event: React.DragEvent) => {
    const {node} = this.props
    this.setState({isDragging: true})
    this.addDragHandlers()
    const element = ReactDOM.findDOMNode(this._previewContainer) // eslint-disable-line react/no-find-dom-node
    if (element && element instanceof HTMLElement) {
      const encoded = Base64.serializeNode(node, {preserveKeys: true})
      setEventTransfer(event, 'node', encoded)
      event.dataTransfer.effectAllowed = 'move'
      event.dataTransfer.setDragImage(element, element.clientWidth / 2, -10)
    }
    this.props.editor.moveToEndOfNode(this.props.node).focus()
  }
  // Remove the drop target if we leave the editors nodes

const [full, encoded] = matches // eslint-disable-line no-unused-vars
    if (encoded) fragment = encoded
  }

  // COMPAT: Edge doesn't handle custom data types
  // These will be embedded in text/plain in this case (2017/7/12)
  if (text) {
    const embeddedTypes = getEmbeddedTypes(text)

    if (embeddedTypes[FRAGMENT]) fragment = embeddedTypes[FRAGMENT]
    if (embeddedTypes[NODE]) node = embeddedTypes[NODE]
    if (embeddedTypes[TEXT]) text = embeddedTypes[TEXT]
  }

  // Decode a fragment or node if they exist.
  if (fragment) fragment = Base64.deserializeNode(fragment)
  if (node) node = Base64.deserializeNode(node)

  // COMPAT: Edge sometimes throws 'NotSupportedError'
  // when accessing `transfer.items` (2017/7/12)
  try {
    // Get and normalize files if they exist.
    if (transfer.items && transfer.items.length) {
      files = Array.from(transfer.items)
        .map(item => (item.kind === 'file' ? item.getAsFile() : null))
        .filter(exists => exists)
    } else if (transfer.files && transfer.files.length) {
      files = Array.from(transfer.files)
    }
  } catch (err) {
    if (transfer.files && transfer.files.length) {
      files = Array.from(transfer.files)

if (encoded) fragment = encoded
  }

  // COMPAT: Edge doesn't handle custom data types
  // These will be embedded in text/plain in this case (2017/7/12)
  if (text) {
    const embeddedTypes = getEmbeddedTypes(text)

    if (embeddedTypes[FRAGMENT]) fragment = embeddedTypes[FRAGMENT]
    if (embeddedTypes[NODE]) node = embeddedTypes[NODE]
    if (embeddedTypes[TEXT]) text = embeddedTypes[TEXT]
  }

  // Decode a fragment or node if they exist.
  if (fragment) fragment = Base64.deserializeNode(fragment)
  if (node) node = Base64.deserializeNode(node)

  // COMPAT: Edge sometimes throws 'NotSupportedError'
  // when accessing `transfer.items` (2017/7/12)
  try {
    // Get and normalize files if they exist.
    if (transfer.items && transfer.items.length) {
      files = Array.from(transfer.items)
        .map(item => (item.kind === 'file' ? item.getAsFile() : null))
        .filter(exists => exists)
    } else if (transfer.files && transfer.files.length) {
      files = Array.from(transfer.files)
    }
  } catch (err) {
    if (transfer.files && transfer.files.length) {
      files = Array.from(transfer.files)
    }

handleDragStart = event => {
    const {editor} = this.props
    this._editorNode = ReactDOM.findDOMNode(editor)

    this.setState({isDragging: true})
    this.addDragHandlers()

    const element = ReactDOM.findDOMNode(this.previewContainer)
    const encoded = Base64.serializeNode(this.props.node, {preserveKeys: true})
    setTransferData(event.dataTransfer, TRANSFER_TYPES.NODE, encoded)
    event.dataTransfer.effectAllowed = 'move'
    event.dataTransfer.setDragImage(element, element.clientWidth / 2, -10)
  }

function onDragStart(event, change, editor) {
    debug('onDragStart', { event })

    isDraggingInternally = true

    const { state } = change
    const { document } = state
    const node = findNode(event.target, state)
    const isVoid = node && (node.isVoid || document.hasVoidParent(node.key))

    if (isVoid) {
      const encoded = Base64.serializeNode(node, { preserveKeys: true })
      setEventTransfer(event, 'node', encoded)
    } else {
      const { fragment } = state
      const encoded = Base64.serializeNode(fragment)
      setEventTransfer(event, 'fragment', encoded)
    }
  }

handleDragStart = event => {
    const {editor} = this.props
    this._editorNode = ReactDOM.findDOMNode(editor)

    this.setState({isDragging: true})
    this.addDragHandlers()

    const element = ReactDOM.findDOMNode(this.previewContainer)
    const encoded = Base64.serializeNode(this.props.node, {preserveKeys: true})
    setTransferData(event.dataTransfer, TRANSFER_TYPES.NODE, encoded)
    event.dataTransfer.effectAllowed = 'move'
    event.dataTransfer.setDragImage(element, element.clientWidth / 2, -10)
  }