@atlaskit/editor-common/dist/es2019/lazy-node-view/node-view.js

A package that contains common classes and components for editor and renderer

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import memoize from 'lodash/memoize';
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
const getEditorLineWidth = memoize(view => {
  var _view$dom;
  return (_view$dom = view.dom) === null || _view$dom === void 0 ? void 0 : _view$dom.clientWidth;
});

// Copied from ProseMirror NodeView
// https://github.com/ProseMirror/prosemirror-view/blob/cfa73eb969777f63bcb39972594fd4a9110f5a93/src/viewdesc.ts#L1095-L1099
function sameOuterDeco(a, b) {
  if (a.length !== b.length) {
    return false;
  }
  for (let i = 0; i < a.length; i++) {
    // @ts-expect-error type actually exist on decoration at runtime
    if (!a[i].type) {
      return false;
    }

    // @ts-expect-error type actually exist on decoration at runtime
    if (!a[i].type.eq(b[i].type)) {
      return false;
    }
  }
  return true;
}
export function makeNodePlaceholderId(nodeType, pos) {
  return `${nodeType}:${pos}`;
}

/**
 * 🧱 Internal: Editor FE Platform
 *
 * A NodeView that serves as a placeholder until the actual NodeView is loaded.
 */
export class LazyNodeView {
  constructor(_node, view, _getPos, _outerDeco) {
    var _node$type, _node$type$spec;
    _defineProperty(this, "update", (node, outerDeco) => {
      const prevNode = this.node;
      this.node = node;
      if (!sameOuterDeco(outerDeco, this.outerDeco)) {
        return false;
      }

      // Copying some of the default NodeView update behaviour
      // https://github.com/ProseMirror/prosemirror-view/blob/cfa73eb969777f63bcb39972594fd4a9110f5a93/src/viewdesc.ts#L803
      return !this.node.sameMarkup(prevNode);
    });
    this.node = _node;
    this.outerDeco = _outerDeco;
    if (typeof ((_node$type = _node.type) === null || _node$type === void 0 ? void 0 : (_node$type$spec = _node$type.spec) === null || _node$type$spec === void 0 ? void 0 : _node$type$spec.toDOM) !== 'function') {
      this.dom = document.createElement('div');
      return;
    }
    const toDOMConfiguration = {
      editorLineWidth: getEditorLineWidth(view)
    };
    const fallback = DOMSerializer.renderSpec(document, _node.type.spec.toDOM(_node,
    // We are injecting a second parameter to be used by the toDOM lazy node view implementations
    // @ts-expect-error
    toDOMConfiguration));
    this.dom = fallback.dom;
    this.contentDOM = fallback.contentDOM;
    if (this.dom instanceof HTMLElement) {
      // This attribute is mostly used for debugging purposed
      // It will help us to found out when the node was replaced
      this.dom.setAttribute('data-lazy-node-view', _node.type.name);
      // This is used on Libra tests
      // We are using this to make sure all lazy noded were replaced
      // before the test started
      this.dom.setAttribute('data-lazy-node-view-fallback', 'true');

      // This is used by the UFO to identify the node
      this.dom.setAttribute('data-vc', `editor-lnv-fallback--${_node.type.name}`);
      const pos = _getPos();
      if (pos !== undefined) {
        // Used for UFO to identify this as a placeholder
        this.dom.setAttribute('data-editor-lnv-placeholder', makeNodePlaceholderId(_node.type.name, pos));
      }
    }
  }
  ignoreMutation() {
    if (this.node.type.isTextblock) {
      return false;
    }
    return true;
  }
}