@edtr-io/plugin-text/dist/plugins/link.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.createLinkPlugin = exports.wrapLink = exports.unwrapLink = exports.isLink = exports.linkNode = void 0;

var _editorUi = require("@edtr-io/editor-ui");

var _slate = require("slate");

var React = _interopRequireWildcard(require("react"));

var _ = require("..");

var _isHotkey = _interopRequireDefault(require("is-hotkey"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

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, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } 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 _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : 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 } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var linkNode = '@splish-me/a';
exports.linkNode = linkNode;

var isLink = function isLink(editor) {
  return editor.value.inlines.some(function (inline) {
    return inline ? inline.type === linkNode : false;
  });
};

exports.isLink = isLink;

var unwrapLink = function unwrapLink(editor) {
  return editor.unwrapInline(linkNode);
};

exports.unwrapLink = unwrapLink;

var wrapLink = function wrapLink() {
  var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
    href: ''
  };
  return function (editor) {
    if (editor.value.selection.isExpanded) {
      (0, _.trimSelection)(editor);
      return editor.wrapInline({
        type: linkNode,
        data: data
      }).moveToEnd().focus().moveBackward(1);
    }

    return editor.insertText(' ').focus().moveFocusBackward(1).wrapInline({
      type: linkNode,
      data: data
    }).moveToStart();
  };
};

exports.wrapLink = wrapLink;

var DefaultEditorComponent = function DefaultEditorComponent(props) {
  var attributes = props.attributes,
      children = props.children,
      node = props.node,
      isSelected = props.isSelected;
  var inline = node;
  var href = inline.data.get('href');
  return React.createElement("a", _extends({}, attributes, {
    href: href,
    style: isSelected ? {
      textDecoration: 'underline'
    } : undefined
  }), children);
};

var DefaultControlsComponent = function DefaultControlsComponent(props) {
  var editor = props.editor;
  var inline = editor.value.inlines.find(nodeIsLink);
  var lastInline = React.useRef(inline);

  var _React$useState = React.useState(inline ? inline.data.get('href') : undefined),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      value = _React$useState2[0],
      setValue = _React$useState2[1];

  var edit = !props.readOnly && isLink(editor) && editor.value.selection.isCollapsed;
  var lastEdit = React.useRef(edit);
  React.useEffect(function () {
    if (lastEdit.current !== edit) {
      if (inline && value !== inline.data.get('href')) {
        handleHrefChange(value, inline, editor);
      }

      lastEdit.current = edit;
    }
  }, [edit, inline, value, editor]);
  if (!inline) return React.createElement(React.Fragment, null, props.children);

  if (value === undefined || lastInline.current.key !== inline.key) {
    var href = inline.data.get('href');
    setValue(href);
    lastInline.current = inline;
  }

  function handleHrefChange(href, inline, editor) {
    editor.setNodeByKey(inline.key, {
      type: inline.type,
      data: {
        href: href
      }
    });
  }

  function nodeIsLink(inline) {
    return inline ? inline.type === linkNode : false;
  }

  return React.createElement(React.Fragment, null, props.children, !props.readOnly && isLink(editor) && editor.value.selection.isCollapsed ? React.createElement(_editorUi.InlineSettings, {
    key: "inlineoverlay".concat(inline.key),
    onDelete: function onDelete() {
      return unwrapLink(editor).focus();
    },
    position: 'below'
  }, React.createElement(_editorUi.InlineInput, {
    value: value,
    onChange: function onChange(e) {
      var newValue = e.target.value;
      setValue(newValue);
      handleHrefChange(newValue, inline, editor);
    },
    onKeyDown: function onKeyDown(event) {
      if (event.key === 'Enter') {
        event.preventDefault();
        handleHrefChange(value, inline, editor);
        editor.focus();
      }
    } //@ts-ignore FIXME
    ,
    ref: function ref(_ref) {
      if (!_ref) return;

      if (!lastEdit.current && !value) {
        setTimeout(function () {
          editor.blur();
          setTimeout(function () {
            _ref.focus();
          });
        });
      }
    }
  })) : null);
};

var DefaultRendererComponent =
/*#__PURE__*/
function (_React$Component) {
  _inherits(DefaultRendererComponent, _React$Component);

  function DefaultRendererComponent() {
    _classCallCheck(this, DefaultRendererComponent);

    return _possibleConstructorReturn(this, _getPrototypeOf(DefaultRendererComponent).apply(this, arguments));
  }

  _createClass(DefaultRendererComponent, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          children = _this$props.children,
          node = _this$props.node;
      var _ref2 = node,
          data = _ref2.data;

      if (!data) {
        return null;
      }

      return React.createElement("a", {
        href: data.href
      }, children);
    }
  }]);

  return DefaultRendererComponent;
}(React.Component);

var createLinkPlugin = function createLinkPlugin() {
  var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
      _ref3$EditorComponent = _ref3.EditorComponent,
      EditorComponent = _ref3$EditorComponent === void 0 ? DefaultEditorComponent : _ref3$EditorComponent,
      _ref3$RenderComponent = _ref3.RenderComponent,
      RenderComponent = _ref3$RenderComponent === void 0 ? DefaultRendererComponent : _ref3$RenderComponent,
      _ref3$ControlsCompone = _ref3.ControlsComponent,
      ControlsComponent = _ref3$ControlsCompone === void 0 ? DefaultControlsComponent : _ref3$ControlsCompone;

  return function () {
    return {
      onKeyDown: function onKeyDown(event, editor, next) {
        var e = event;

        if ((0, _isHotkey.default)('mod+k', e)) {
          e.preventDefault();
          return isLink(editor) ? unwrapLink(editor) : wrapLink()(editor);
        }

        return next();
      },
      deserialize: function deserialize(el, next) {
        if (el.tagName.toLowerCase() === 'a') {
          // @ts-ignore FIXME
          var attr = el.attrs.find(function (_ref4) {
            var name = _ref4.name;
            return name === 'href';
          });
          return {
            object: 'inline',
            type: linkNode,
            nodes: next(el.childNodes),
            data: _slate.Data.create({
              href: attr ? attr.value : ''
            })
          };
        }
      },
      serialize: function serialize(obj, children) {
        var block = obj;

        if (block.object === 'inline' && block.type === linkNode) {
          return React.createElement(RenderComponent, {
            node: obj
          }, children);
        }
      },
      renderNode: function renderNode(props, _editor, next) {
        var block = props.node;

        if (block.object === 'inline' && block.type === linkNode) {
          return React.createElement(EditorComponent, props);
        }

        return next();
      },
      renderEditor: function renderEditor(props, editor, next) {
        var children = next();
        return React.createElement(ControlsComponent, _extends({}, props, {
          editor: editor
        }), children);
      }
    };
  };
};

exports.createLinkPlugin = createLinkPlugin;
//# sourceMappingURL=link.js.map