@lyra/form-builder/lib/inputs/BlockEditor/Input.js

Lyra form builder

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _uniqueId2 = require('lodash/uniqueId');

var _uniqueId3 = _interopRequireDefault(_uniqueId2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _blockTools = require('@lyra/block-tools');

var _blockTools2 = _interopRequireDefault(_blockTools);

var _default = require('part:@lyra/components/formfields/default');

var _default2 = _interopRequireDefault(_default);

var _PatchEvent = require('../../PatchEvent');

var _BlockEditor = require('./BlockEditor');

var _BlockEditor2 = _interopRequireDefault(_BlockEditor);

var _Editor = require('./Editor');

var _Editor2 = _interopRequireDefault(_Editor);

var _Input = require('./styles/Input.css');

var _Input2 = _interopRequireDefault(_Input);

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

/*:: import type {Element as ReactElement} from 'react'*/
/*:: import type {
  Block,
  BlockArrayType,
  SlateChange,
  SlateValue,
  Marker
} from './typeDefs'*/
/*:: type Props = {
  editorValue: SlateValue,
  focusPath: [],
  level: number,
  markers: Marker[],
  onBlur: (nextPath: []) => void,
  onChange: (change: SlateChange) => void,
  onFocus: (nextPath: []) => void,
  onPatch: (event: PatchEvent) => void,
  onPaste?: (
    event: SyntheticEvent,
    path: [],
    type: Type,
    value: ?Value
  ) => {insert?: Value, path?: []},
  readOnly?: boolean,
  renderBlockActions?: (block: Block) => React.Node,
  renderCustomMarkers?: (Marker[]) => React.Node,
  type: BlockArrayType,
  undoRedoStack: {undo: [], redo: []},
  value: Block[]
}*/
/*:: type State = {
  fullscreen: boolean
}*/
class BlockEditorInput extends _react2.default.Component /*:: <Props, State>*/ {

  constructor(props /*: Props*/) {
    super(props);
    this._inputId = (0, _uniqueId3.default)('BlockEditor');
    this._editor = null;
    this.state = {
      fullscreen: false
    };
    this.blockContentFeatures = {
      decorators: [],
      styles: [],
      annotations: [],
      blockObjectTypes: []
    };

    this.handleToggleFullScreen = () => {
      this.setState((prevState /*: State*/) => ({ fullscreen: !prevState.fullscreen }));
      this.focus();
    };

    this.refEditor = (editor /*: ?Editor*/) => {
      this._editor = editor;
    };

    this.focus = () => {
      var _props = this.props;
      const onFocus = _props.onFocus,
            onChange = _props.onChange,
            editorValue = _props.editorValue,
            value = _props.value;

      const change = editorValue.change().focus();
      const focusBlock = change.value.focusBlock;

      if (focusBlock) {
        return onChange(change, () => onFocus([{ _key: focusBlock.key }]));
      } else if (Array.isArray(value)) {
        return onChange(change, () => onFocus([{ _key: value[0]._key }]));
      }
      return change;
    };

    this.handleFocusSkipper = () => {
      this.focus();
    };

    this.blockContentFeatures = _blockTools2.default.getBlockContentFeatures(props.type);
  }

  renderEditor() /*: ReactElement<typeof Editor>*/ {
    const fullscreen = this.state.fullscreen;
    var _props2 = this.props;
    const editorValue = _props2.editorValue,
          focusPath = _props2.focusPath,
          markers = _props2.markers,
          onBlur = _props2.onBlur,
          onFocus = _props2.onFocus,
          onChange = _props2.onChange,
          onPatch = _props2.onPatch,
          onPaste = _props2.onPaste,
          readOnly = _props2.readOnly,
          renderBlockActions = _props2.renderBlockActions,
          renderCustomMarkers = _props2.renderCustomMarkers,
          type = _props2.type,
          undoRedoStack = _props2.undoRedoStack,
          value = _props2.value;

    return _react2.default.createElement(_Editor2.default, {
      blockContentFeatures: this.blockContentFeatures,
      editorValue: editorValue,
      fullscreen: fullscreen,
      focusPath: focusPath,
      markers: markers,
      onFocus: onFocus,
      setFocus: this.focus,
      onBlur: onBlur,
      onChange: onChange,
      onPatch: onPatch,
      onPaste: onPaste,
      onToggleFullScreen: this.handleToggleFullScreen,
      readOnly: readOnly,
      renderBlockActions: renderBlockActions,
      renderCustomMarkers: renderCustomMarkers,
      ref: this.refEditor,
      value: value,
      undoRedoStack: undoRedoStack,
      type: type
    });
  }

  render() {
    var _props3 = this.props;
    const editorValue = _props3.editorValue,
          focusPath = _props3.focusPath,
          level = _props3.level,
          markers = _props3.markers,
          onChange = _props3.onChange,
          onBlur = _props3.onBlur,
          onFocus = _props3.onFocus,
          onPatch = _props3.onPatch,
          readOnly = _props3.readOnly,
          type = _props3.type,
          value = _props3.value;
    const fullscreen = this.state.fullscreen;


    const editor = this.renderEditor();

    const isActive = readOnly || Array.isArray(focusPath) && focusPath.length >= 1;

    return _react2.default.createElement(
      _default2.default,
      {
        label: type.title,
        labelFor: this._inputId,
        markers: markers,
        description: type.description,
        level: level
      },
      _react2.default.createElement(
        'button',
        {
          type: 'button',
          tabIndex: 0,
          className: _Input2.default.focusSkipper,
          onClick: this.handleFocusSkipper
        },
        'Jump to editor'
      ),
      _react2.default.createElement(_BlockEditor2.default, {
        blockContentFeatures: this.blockContentFeatures,
        editor: editor,
        editorValue: editorValue,
        focusPath: focusPath,
        fullscreen: fullscreen,
        isActive: isActive,
        markers: markers,
        onBlur: onBlur,
        onChange: onChange,
        onFocus: onFocus,
        onPatch: onPatch,
        onToggleFullScreen: this.handleToggleFullScreen,
        readOnly: readOnly,
        setFocus: this.focus,
        type: type,
        value: value
      })
    );
  }
}
exports.default = BlockEditorInput;