@lyra/form-builder/lib/inputs/BlockEditor/nodes/ContentBlock.js

Lyra form builder

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _blockExtras = require('part:@lyra/form-builder/input/block-editor/block-extras');

var _blockExtras2 = _interopRequireDefault(_blockExtras);

var _ListItem = require('./ListItem');

var _ListItem2 = _interopRequireDefault(_ListItem);

var _Text = require('./Text');

var _Text2 = _interopRequireDefault(_Text);

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

/*:: import type {
  Block,
  SlateComponentProps,
  SlateChange,
  SlateValue
} from '../typeDefs'*/


// eslint-disable-next-line complexity
/*:: type ExtraProps = {
  blockContentFeatures: BlockContentFeatures,
  editorValue: SlateValue,
  hasFormBuilderFocus: boolean,
  markers: Marker[],
  onFocus: void => void,
  onChange: (change: SlateChange) => void,
  block: Block,
  readOnly: ?boolean,
  blockActions?: React.Node,
  renderCustomMarkers?: (Marker[]) => React.Node
}*/
function ContentBlock(props /*: SlateComponentProps & ExtraProps*/) {
  const attributes = props.attributes,
        block = props.block,
        blockContentFeatures = props.blockContentFeatures,
        children = props.children,
        editorValue = props.editorValue,
        markers = props.markers,
        node = props.node,
        onChange = props.onChange,
        onFocus = props.onFocus,
        blockActions = props.blockActions,
        renderCustomMarkers = props.renderCustomMarkers;

  const data = node.data;
  const listItem = data ? data.get('listItem') : null;
  const level = data ? data.get('level') : 1;
  const style = data ? data.get('style') : 'normal';

  // Should we render a custom style?
  let styleComponent;
  const customStyle = blockContentFeatures && style ? blockContentFeatures.styles.find(item => item.value === style) : null;
  if (customStyle) {
    styleComponent = customStyle.blockEditor && customStyle.blockEditor.render;
  }

  const highlightedMarker = (markers || []).find(mrk => mrk.highlighted);
  const highlightedId = highlightedMarker ? highlightedMarker.highlighted : null;

  if (listItem) {
    return _react2.default.createElement(
      _ListItem2.default,
      { listStyle: listItem, level: level },
      _react2.default.createElement(
        _Text2.default,
        {
          style: style,
          attributes: attributes,
          styleComponent: styleComponent
        },
        children
      ),
      (markers && markers.length > 0 || blockActions) && _react2.default.createElement(_blockExtras2.default, {
        highlightedMarkerId: highlightedId,
        markers: markers,
        onFocus: onFocus,
        onChange: onChange,
        block: block,
        editorValue: editorValue,
        blockActions: blockActions,
        renderCustomMarkers: renderCustomMarkers
      })
    );
  }

  return _react2.default.createElement(
    _Text2.default,
    { style: style, styleComponent: styleComponent, attributes: attributes },
    children,
    (markers && markers.length > 0 || blockActions) && _react2.default.createElement(_blockExtras2.default, {
      highlightedMarkerId: highlightedId,
      markers: markers,
      onFocus: onFocus,
      onChange: onChange,
      block: block,
      editorValue: editorValue,
      blockActions: blockActions,
      renderCustomMarkers: renderCustomMarkers
    })
  );
}