@modusoperandi/licit 0.14.18 → 1.0.1

package/CZIProseMirror.js.flow

@@ -0,0 +1,90 @@
+// @flow
+
+import { EditorView } from 'prosemirror-view';
+
+import convertToJSON from './convertToJSON.js';
+import CustomEditorView from './ui/CustomEditorView.js';
+import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
+
+const commandsRegistery = new Map<any, any>();
+const viewsRegistery = new Map<any, any>();
+
+// This file exports methods to help developer to debug editor from web
+// inspector. To use this, add the following lines to export the utility.
+//
+//   import * as CZIProseMirror from 'czi-prosemirror/dist/CZIProseMirror';
+//   window.CZIProseMirror = CZIProseMirror;
+
+export function registeryKeys(): Array<string> {
+  return Array.from(viewsRegistery.keys());
+}
+
+export function exportJSON(id: ?string): Object {
+  if (!id && viewsRegistery.size) {
+    id = registeryKeys()[0];
+    console.log(`use default editor id "${id}"`);
+  }
+  const view = viewsRegistery.get(String(id));
+  if (!view) {
+    if (!id) {
+      id = '';
+    }
+    throw new Error(`view ${id} does not exist`);
+  }
+  return convertToJSON(view.state);
+}
+
+export function registerEditorView(id: string, view: EditorView): void {
+  if (viewsRegistery.has(id)) {
+    throw new Error(`view ${id} already registered`);
+  }
+  if (!(view instanceof CustomEditorView)) {
+    throw new Error(`invalid view ${id}`);
+  }
+  if (!id) {
+    throw new Error('id is required');
+  }
+  viewsRegistery.set(id, view);
+}
+
+export function releaseEditorView(id: string): void {
+  if (!viewsRegistery.has(id)) {
+    throw new Error(`view ${id} was released`);
+  }
+  viewsRegistery.delete(id);
+}
+
+export function findEditorView(id: string): ?EditorView {
+  return viewsRegistery.get(id) || null;
+}
+
+export function executeCommand(name: string, viewID: ?string): boolean {
+  const command = commandsRegistery.get(name);
+  if (command) {
+    const view = viewID
+      ? viewsRegistery.get(viewID)
+      : Array.from(viewsRegistery.values())[0];
+    if (view) {
+      try {
+        return command.execute(view.state, view.dispatch, view, null);
+      } catch (ex) {
+        console.warn(ex);
+        return false;
+      }
+    }
+  }
+  return false;
+}
+
+export function registerCommand(name: string, command: UICommand): void {
+  if (!(command instanceof UICommand)) {
+    throw new Error(`invalid command ${name}`);
+  }
+  if (!name) {
+    throw new Error('invalid command name');
+  }
+  if (commandsRegistery.has(name)) {
+    throw new Error(`command ${name} already registered`);
+  }
+  commandsRegistery.set(name, command);
+}

package/CodeBlockCommand.js

@@ -0,0 +1,73 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { EditorState } from 'prosemirror-state';
+import { Transform } from 'prosemirror-transform';
+import { findParentNodeOfType } from 'prosemirror-utils';
+import { EditorView } from 'prosemirror-view';
+import * as React from 'react';
+import { CODE_BLOCK } from './NodeNames';
+import { noop } from '@modusoperandi/licit-ui-commands';
+import toggleCodeBlock from './toggleCodeBlock';
+import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
+var CodeBlockCommand = /*#__PURE__*/function (_UICommand) {
+  _inherits(CodeBlockCommand, _UICommand);
+  function CodeBlockCommand() {
+    var _this;
+    _classCallCheck(this, CodeBlockCommand);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, CodeBlockCommand, [].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "isActive", function (state) {
+      var result = _this._findCodeBlock(state);
+      return !!(result && result.node);
+    });
+    _defineProperty(_assertThisInitialized(_this), "execute", function (state, dispatch, view) {
+      var selection = state.selection,
+        schema = state.schema;
+      var tr = state.tr;
+      tr = tr.setSelection(selection);
+      tr = toggleCodeBlock(tr, schema);
+      if (tr.docChanged) {
+        dispatch && dispatch(tr);
+        return true;
+      } else {
+        return false;
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "waitForUserInput", function (_state, _dispatch, _view, _event) {
+      return Promise.resolve(undefined);
+    });
+    _defineProperty(_assertThisInitialized(_this), "executeWithUserInput", function (_state, _dispatch, _view, _inputs) {
+      return false;
+    });
+    return _this;
+  }
+  _createClass(CodeBlockCommand, [{
+    key: "_findCodeBlock",
+    value: function _findCodeBlock(state) {
+      var codeBlock = state.schema.nodes[CODE_BLOCK];
+      var findCodeBlock = codeBlock ? findParentNodeOfType(codeBlock) : noop;
+      return findCodeBlock(state.selection);
+    }
+  }, {
+    key: "cancel",
+    value: function cancel() {
+      return null;
+    }
+  }]);
+  return CodeBlockCommand;
+}(UICommand);
+export default CodeBlockCommand;

package/CodeBlockCommand.js.flow

@@ -0,0 +1,65 @@
+// @flow
+
+import { EditorState } from 'prosemirror-state';
+import { Transform } from 'prosemirror-transform';
+import { findParentNodeOfType } from 'prosemirror-utils';
+import { EditorView } from 'prosemirror-view';
+import * as React from 'react';
+import { CODE_BLOCK } from './NodeNames';
+import { noop } from '@modusoperandi/licit-ui-commands';
+import toggleCodeBlock from './toggleCodeBlock';
+import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
+
+class CodeBlockCommand extends UICommand {
+  isActive = (state: EditorState): boolean => {
+    const result = this._findCodeBlock(state);
+    return !!(result && result.node);
+  };
+
+  execute = (
+    state: EditorState,
+    dispatch: ?(tr: Transform) => void,
+    view: ?EditorView
+  ): boolean => {
+    const { selection, schema } = state;
+    let { tr } = state;
+    tr = tr.setSelection(selection);
+    tr = toggleCodeBlock(tr, schema);
+    if (tr.docChanged) {
+      dispatch && dispatch(tr);
+      return true;
+    } else {
+      return false;
+    }
+  };
+
+  _findCodeBlock(state: EditorState): ?Object {
+    const codeBlock = state.schema.nodes[CODE_BLOCK];
+    const findCodeBlock = codeBlock ? findParentNodeOfType(codeBlock) : noop;
+    return findCodeBlock(state.selection);
+  }
+
+  waitForUserInput = (
+    _state: EditorState,
+    _dispatch: ?(tr: Transform) => void,
+    _view: ?EditorView,
+    _event: ?React.SyntheticEvent
+  ): Promise<undefined> => {
+    return Promise.resolve(undefined);
+  };
+
+  executeWithUserInput = (
+    _state: EditorState,
+    _dispatch: ?(tr: Transform) => void,
+    _view: ?EditorView,
+    _inputs: ?string
+  ): boolean => {
+    return false;
+  };
+
+  cancel(): void {
+    return null;
+  }
+}
+
+export default CodeBlockCommand;

package/CodeBlockNodeSpec.js

@@ -0,0 +1,26 @@
+var PRE_DOM = ['pre', ['code', 0]];
+
+// https://github.com/ProseMirror/prosemirror-schema-basic/blob/master/src/schema-basic.js
+// :: NodeSpec A code listing. Disallows marks or non-text inline
+// nodes by default. Represented as a `<pre>` element with a
+// `<code>` element inside of it.
+var CodeBlockNodeSpec = {
+  attrs: {
+    id: {
+      "default": null
+    }
+  },
+  content: 'inline*',
+  group: 'block',
+  marks: '_',
+  code: true,
+  defining: true,
+  parseDOM: [{
+    tag: 'pre',
+    preserveWhitespace: 'full'
+  }],
+  toDOM: function toDOM() {
+    return PRE_DOM;
+  }
+};
+export default CodeBlockNodeSpec;

package/CodeMarkSpec.js

@@ -0,0 +1,11 @@
+var CODE_DOM = ['code', 0];
+var CodeMarkSpec = {
+  parseDOM: [{
+    tag: 'code'
+  }],
+  toDOM: function toDOM() {
+    return CODE_DOM;
+  }
+};
+export default CodeMarkSpec;
+import { bpfrpt_proptype_MarkSpec } from "./Types.js";

package/CodeMarkSpec.js.flow

@@ -0,0 +1,14 @@
+// @flow
+
+import type { MarkSpec } from './Types.js';
+
+const CODE_DOM = ['code', 0];
+
+const CodeMarkSpec: MarkSpec = {
+  parseDOM: [{ tag: 'code' }],
+  toDOM() {
+    return CODE_DOM;
+  },
+};
+
+export default CodeMarkSpec;

package/ContentPlaceholderPlugin.js

@@ -0,0 +1,186 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import isEditorStateEmpty from './isEditorStateEmpty.js';
+import './ui/czi-editor.css';
+var CLASS_NAME_HAS_PLACEHOLDER = 'czi-has-placeholder';
+var ContentPlaceholderView = /*#__PURE__*/function () {
+  function ContentPlaceholderView(editorView) {
+    var _this = this;
+    _classCallCheck(this, ContentPlaceholderView);
+    _defineProperty(this, "_el", null);
+    _defineProperty(this, "_focused", null);
+    _defineProperty(this, "_view", null);
+    _defineProperty(this, "_visible", null);
+    _defineProperty(this, "_checkFocus", function () {
+      var el = _this._el;
+      var view = _this._view;
+      if (!view || !el) {
+        return;
+      }
+      var doc = document;
+      var activeElement = doc.activeElement;
+      var bodyEl = _this._getBodyElement();
+      if (!activeElement || !bodyEl || doc.hasFocus && !doc.hasFocus()) {
+        _this._onBlur();
+      } else {
+        if (activeElement === bodyEl || bodyEl.contains(activeElement) || activeElement === bodyEl.parentNode) {
+          _this._onFocus();
+        } else {
+          _this._onBlur();
+        }
+      }
+    });
+    var _el = document.createElement('div');
+    this._el = _el;
+    this._view = editorView;
+    _el.className = 'czi-editor-content-placeholder';
+    editorView.dom.parentNode.appendChild(_el);
+    document.addEventListener('focusin', this._checkFocus, true);
+    document.addEventListener('focusout', this._checkFocus, false);
+    this.update(editorView);
+
+    // We don't know whether view is focused at this moment yet. Manually
+    // calls `this._checkFocus` which will set `_focused` accordingly.
+    this._checkFocus();
+  }
+  _createClass(ContentPlaceholderView, [{
+    key: "update",
+    value: function update(view) {
+      this._view = view;
+      var el = this._el;
+      if (!el || !view) {
+        return;
+      }
+      if (this._focused || !isEditorStateEmpty(view.state)) {
+        this._hide();
+        return;
+      }
+      var parentEl = el.parentNode;
+      var bodyEl = this._getBodyElement();
+      var placeholder = view.placeholder;
+      if (!parentEl || !bodyEl || !placeholder) {
+        return;
+      }
+      this._visible = true;
+      view.dom.classList.add(CLASS_NAME_HAS_PLACEHOLDER);
+      var parentElRect = parentEl.getBoundingClientRect();
+      var bodyRect = bodyEl.getBoundingClientRect();
+      var bodyStyle = window.getComputedStyle(bodyEl);
+      var left = bodyRect.left - parentElRect.left;
+      var top = bodyRect.top - parentElRect.top;
+      el.style.left = left + 'px';
+      el.style.top = top + 'px';
+      el.style.padding = bodyStyle.padding;
+      el.style.display = 'block';
+      el.style.width = bodyEl.offsetWidth + 'px';
+      ReactDOM.render( /*#__PURE__*/React.createElement("div", null, placeholder), el);
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this._hide();
+      var el = this._el;
+      if (el) {
+        el.parentNode && el.parentNode.removeChild(el);
+        ReactDOM.unmountComponentAtNode(el);
+      }
+      document.removeEventListener('focusin', this._checkFocus, true);
+      document.removeEventListener('focusout', this._checkFocus, false);
+      this._view = null;
+      this._el = null;
+      this._focused = false;
+      this._visible = false;
+    }
+  }, {
+    key: "_onFocus",
+    value: function _onFocus() {
+      if (this._focused !== true) {
+        this._focused = true;
+        this._hide();
+      }
+    }
+  }, {
+    key: "_onBlur",
+    value: function _onBlur() {
+      var view = this._view;
+      if (this._focused !== false) {
+        this._focused = false;
+        if (view && isEditorStateEmpty(view.state)) {
+          this._show();
+        } else {
+          this._hide();
+        }
+      }
+    }
+  }, {
+    key: "_getBodyElement",
+    value: function _getBodyElement() {
+      var view = this._view;
+      return view && view.docView && view.docView.dom && view.docView.dom.firstChild;
+    }
+  }, {
+    key: "_show",
+    value: function _show() {
+      if (this._visible !== true) {
+        var el = this._el;
+        var view = this._view;
+        this._visible = true;
+        if (el) {
+          el.style.display = 'block';
+        }
+        if (view) {
+          this.update(view);
+          view.dom.classList.add(CLASS_NAME_HAS_PLACEHOLDER);
+        }
+      }
+    }
+  }, {
+    key: "_hide",
+    value: function _hide() {
+      if (this._visible !== false) {
+        var el = this._el;
+        var view = this._view;
+        this._visible = false;
+        if (el) {
+          el.style.display = 'none';
+        }
+        if (view) {
+          view.dom.classList.remove(CLASS_NAME_HAS_PLACEHOLDER);
+        }
+      }
+    }
+  }]);
+  return ContentPlaceholderView;
+}();
+var ContentPlaceholderPlugin = /*#__PURE__*/function (_Plugin) {
+  _inherits(ContentPlaceholderPlugin, _Plugin);
+  function ContentPlaceholderPlugin() {
+    _classCallCheck(this, ContentPlaceholderPlugin);
+    return _callSuper(this, ContentPlaceholderPlugin, [{
+      // [FS] IRAD-1005 2020-07-07
+      // Upgrade outdated packages.
+      key: new PluginKey('ContentPlaceholderPlugin'),
+      view: function view(editorView) {
+        return new ContentPlaceholderView(editorView);
+      }
+    }]);
+  }
+  return _createClass(ContentPlaceholderPlugin);
+}(Plugin);
+export default ContentPlaceholderPlugin;

package/ContentPlaceholderPlugin.js.flow

@@ -0,0 +1,187 @@
+// @flow
+
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+
+import isEditorStateEmpty from './isEditorStateEmpty.js';
+
+import './ui/czi-editor.css';
+
+const CLASS_NAME_HAS_PLACEHOLDER = 'czi-has-placeholder';
+
+class ContentPlaceholderView {
+  _el = null;
+  _focused = null;
+  _view = null;
+  _visible = null;
+
+  constructor(editorView: EditorView) {
+    const el: any = document.createElement('div');
+
+    this._el = el;
+    this._view = editorView;
+
+    el.className = 'czi-editor-content-placeholder';
+    editorView.dom.parentNode.appendChild(el);
+    document.addEventListener('focusin', this._checkFocus, true);
+    document.addEventListener('focusout', this._checkFocus, false);
+
+    this.update(editorView);
+
+    // We don't know whether view is focused at this moment yet. Manually
+    // calls `this._checkFocus` which will set `_focused` accordingly.
+    this._checkFocus();
+  }
+
+  update(view: EditorView): void {
+    this._view = view;
+
+    const el = this._el;
+    if (!el || !view) {
+      return;
+    }
+
+    if (this._focused || !isEditorStateEmpty(view.state)) {
+      this._hide();
+      return;
+    }
+
+    const parentEl = el.parentNode;
+    const bodyEl = this._getBodyElement();
+    const placeholder = view.placeholder;
+    if (!parentEl || !bodyEl || !placeholder) {
+      return;
+    }
+
+    this._visible = true;
+    view.dom.classList.add(CLASS_NAME_HAS_PLACEHOLDER);
+
+    const parentElRect = parentEl.getBoundingClientRect();
+    const bodyRect = bodyEl.getBoundingClientRect();
+    const bodyStyle = window.getComputedStyle(bodyEl);
+
+    const left = bodyRect.left - parentElRect.left;
+    const top = bodyRect.top - parentElRect.top;
+
+    el.style.left = left + 'px';
+    el.style.top = top + 'px';
+    el.style.padding = bodyStyle.padding;
+    el.style.display = 'block';
+    el.style.width = bodyEl.offsetWidth + 'px';
+
+    ReactDOM.render(<div>{placeholder}</div>, el);
+  }
+
+  destroy() {
+    this._hide();
+
+    const el = this._el;
+    if (el) {
+      el.parentNode && el.parentNode.removeChild(el);
+      ReactDOM.unmountComponentAtNode(el);
+    }
+    document.removeEventListener('focusin', this._checkFocus, true);
+    document.removeEventListener('focusout', this._checkFocus, false);
+    this._view = null;
+    this._el = null;
+    this._focused = false;
+    this._visible = false;
+  }
+
+  _checkFocus = (): void => {
+    const el = this._el;
+    const view = this._view;
+    if (!view || !el) {
+      return;
+    }
+    const doc = document;
+    const activeElement = doc.activeElement;
+    const bodyEl = this._getBodyElement();
+
+    if (!activeElement || !bodyEl || (doc.hasFocus && !doc.hasFocus())) {
+      this._onBlur();
+    } else {
+      if (
+        activeElement === bodyEl ||
+        bodyEl.contains(activeElement) ||
+        activeElement === bodyEl.parentNode
+      ) {
+        this._onFocus();
+      } else {
+        this._onBlur();
+      }
+    }
+  };
+
+  _onFocus(): void {
+    if (this._focused !== true) {
+      this._focused = true;
+      this._hide();
+    }
+  }
+
+  _onBlur(): void {
+    const view = this._view;
+    if (this._focused !== false) {
+      this._focused = false;
+      if (view && isEditorStateEmpty(view.state)) {
+        this._show();
+      } else {
+        this._hide();
+      }
+    }
+  }
+
+  _getBodyElement(): ?HTMLElement {
+    const view = this._view;
+    return (
+      view && view.docView && view.docView.dom && view.docView.dom.firstChild
+    );
+  }
+
+  _show(): void {
+    if (this._visible !== true) {
+      const el = this._el;
+      const view = this._view;
+      this._visible = true;
+      if (el) {
+        el.style.display = 'block';
+      }
+      if (view) {
+        this.update(view);
+        view.dom.classList.add(CLASS_NAME_HAS_PLACEHOLDER);
+      }
+    }
+  }
+
+  _hide(): void {
+    if (this._visible !== false) {
+      const el = this._el;
+      const view = this._view;
+      this._visible = false;
+      if (el) {
+        el.style.display = 'none';
+      }
+      if (view) {
+        view.dom.classList.remove(CLASS_NAME_HAS_PLACEHOLDER);
+      }
+    }
+  }
+}
+
+class ContentPlaceholderPlugin extends Plugin {
+  constructor() {
+    super({
+      // [FS] IRAD-1005 2020-07-07
+      // Upgrade outdated packages.
+      key: new PluginKey('ContentPlaceholderPlugin'),
+      view(editorView: EditorView) {
+        return new ContentPlaceholderView(editorView);
+      },
+    });
+  }
+}
+
+export default ContentPlaceholderPlugin;