@wordpress/editor/build/components/provider/index.native.js

Enhanced block editor for WordPress posts.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _element = require("@wordpress/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _reactNativeBridge = _interopRequireWildcard(require("@wordpress/react-native-bridge"));

var _wordcount = require("@wordpress/wordcount");

var _blocks = require("@wordpress/blocks");

var _data = require("@wordpress/data");

var _compose = require("@wordpress/compose");

var _hooks = require("@wordpress/hooks");

var _blockEditor = require("@wordpress/block-editor");

var _index = _interopRequireDefault(require("./index.js"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * WordPress dependencies
 */
const postTypeEntities = [{
  name: 'post',
  baseURL: '/wp/v2/posts'
}, {
  name: 'page',
  baseURL: '/wp/v2/pages'
}, {
  name: 'attachment',
  baseURL: '/wp/v2/media'
}, {
  name: 'wp_block',
  baseURL: '/wp/v2/blocks'
}].map(postTypeEntity => ({
  kind: 'postType',
  ...postTypeEntity,
  transientEdits: {
    blocks: true,
    selection: true
  },
  mergedEdits: {
    meta: true
  }
}));
/**
 * Internal dependencies
 */

class NativeEditorProvider extends _element.Component {
  constructor() {
    super(...arguments); // Keep a local reference to `post` to detect changes

    this.post = this.props.post;
    this.props.addEntities(postTypeEntities);
    this.props.receiveEntityRecords('postType', this.post.type, this.post);
  }

  componentDidMount() {
    const {
      capabilities,
      colors,
      gradients
    } = this.props;
    this.props.updateSettings({ ...capabilities,
      // Set theme colors for the editor
      ...(colors ? {
        colors
      } : {}),
      ...(gradients ? {
        gradients
      } : {})
    });
    this.subscriptionParentGetHtml = (0, _reactNativeBridge.subscribeParentGetHtml)(() => {
      this.serializeToNativeAction();
    });
    this.subscriptionParentToggleHTMLMode = (0, _reactNativeBridge.subscribeParentToggleHTMLMode)(() => {
      this.toggleMode();
    });
    this.subscriptionParentSetTitle = (0, _reactNativeBridge.subscribeSetTitle)(payload => {
      this.props.editTitle(payload.title);
    });
    this.subscriptionParentUpdateHtml = (0, _reactNativeBridge.subscribeUpdateHtml)(payload => {
      this.updateHtmlAction(payload.html);
    });
    this.subscriptionParentReplaceBlock = (0, _reactNativeBridge.subscribeReplaceBlock)(payload => {
      this.replaceBlockAction(payload.html, payload.clientId);
    });
    this.subscriptionParentMediaAppend = (0, _reactNativeBridge.subscribeMediaAppend)(payload => {
      const blockName = 'core/' + payload.mediaType;
      const newBlock = (0, _blocks.createBlock)(blockName, {
        id: payload.mediaId,
        [payload.mediaType === 'image' ? 'url' : 'src']: payload.mediaUrl
      });
      const indexAfterSelected = this.props.selectedBlockIndex + 1;
      const insertionIndex = indexAfterSelected || this.props.blockCount;
      this.props.insertBlock(newBlock, insertionIndex);
    });
    this.subscriptionParentUpdateTheme = (0, _reactNativeBridge.subscribeUpdateTheme)(theme => {
      // Reset the colors and gradients in case one theme was set with custom items and then updated to a theme without custom elements.
      theme.colors = (0, _blockEditor.validateThemeColors)(theme.colors);
      theme.gradients = (0, _blockEditor.validateThemeGradients)(theme.gradients);
      this.props.updateSettings(theme);
    });
    this.subscriptionParentUpdateCapabilities = (0, _reactNativeBridge.subscribeUpdateCapabilities)(payload => {
      this.updateCapabilitiesAction(payload);
    });
    this.subscriptionParentShowNotice = (0, _reactNativeBridge.subscribeShowNotice)(payload => {
      this.props.createSuccessNotice(payload.message);
    });
  }

  componentWillUnmount() {
    if (this.subscriptionParentGetHtml) {
      this.subscriptionParentGetHtml.remove();
    }

    if (this.subscriptionParentToggleHTMLMode) {
      this.subscriptionParentToggleHTMLMode.remove();
    }

    if (this.subscriptionParentSetTitle) {
      this.subscriptionParentSetTitle.remove();
    }

    if (this.subscriptionParentUpdateHtml) {
      this.subscriptionParentUpdateHtml.remove();
    }

    if (this.subscriptionParentReplaceBlock) {
      this.subscriptionParentReplaceBlock.remove();
    }

    if (this.subscriptionParentMediaAppend) {
      this.subscriptionParentMediaAppend.remove();
    }

    if (this.subscriptionParentUpdateTheme) {
      this.subscriptionParentUpdateTheme.remove();
    }

    if (this.subscriptionParentUpdateCapabilities) {
      this.subscriptionParentUpdateCapabilities.remove();
    }

    if (this.subscriptionParentShowNotice) {
      this.subscriptionParentShowNotice.remove();
    }
  }

  componentDidUpdate(prevProps) {
    if (!prevProps.isReady && this.props.isReady) {
      const blocks = this.props.blocks;

      const isUnsupportedBlock = ({
        name
      }) => name === (0, _blocks.getUnregisteredTypeHandlerName)();

      const unsupportedBlockNames = blocks.filter(isUnsupportedBlock).map(block => block.attributes.originalName);

      _reactNativeBridge.default.editorDidMount(unsupportedBlockNames);
    }
  }

  serializeToNativeAction() {
    const title = this.props.title;
    let html;

    if (this.props.mode === 'text') {
      // The HTMLTextInput component does not update the store when user is doing changes
      // Let's request the HTML from the component's state directly
      html = (0, _hooks.applyFilters)('native.persist-html');
    } else {
      html = (0, _blocks.serialize)(this.props.blocks);
    }

    const hasChanges = title !== this.post.title.raw || html !== this.post.content.raw; // Variable to store the content structure metrics.

    const contentInfo = {};
    contentInfo.characterCount = (0, _wordcount.count)(html, 'characters_including_spaces');
    contentInfo.wordCount = (0, _wordcount.count)(html, 'words');
    contentInfo.paragraphCount = this.props.paragraphCount;
    contentInfo.blockCount = this.props.blockCount;

    _reactNativeBridge.default.provideToNative_Html(html, title, hasChanges, contentInfo);

    if (hasChanges) {
      this.post.title.raw = title;
      this.post.content.raw = html;
    }
  }

  updateHtmlAction(html) {
    const parsed = (0, _blocks.parse)(html);
    this.props.resetEditorBlocksWithoutUndoLevel(parsed);
  }

  replaceBlockAction(html, blockClientId) {
    const parsed = (0, _blocks.parse)(html);
    this.props.replaceBlock(blockClientId, parsed);
  }

  toggleMode() {
    const {
      mode,
      switchMode
    } = this.props; // refresh html content first

    this.serializeToNativeAction(); // make sure to blur the selected block and dismiss the keyboard

    this.props.clearSelectedBlock();
    switchMode(mode === 'visual' ? 'text' : 'visual');
  }

  updateCapabilitiesAction(capabilities) {
    this.props.updateSettings(capabilities);
  }

  render() {
    const {
      children,
      post,
      // eslint-disable-line no-unused-vars
      ...props
    } = this.props;
    return (0, _element.createElement)(_index.default, (0, _extends2.default)({
      post: this.post
    }, props), children);
  }

}

var _default = (0, _compose.compose)([(0, _data.withSelect)(select => {
  const {
    __unstableIsEditorReady: isEditorReady,
    getEditorBlocks,
    getEditedPostAttribute,
    getEditedPostContent
  } = select('core/editor');
  const {
    getEditorMode
  } = select('core/edit-post');
  const {
    getBlockIndex,
    getSelectedBlockClientId,
    getGlobalBlockCount
  } = select(_blockEditor.store);
  const selectedBlockClientId = getSelectedBlockClientId();
  return {
    mode: getEditorMode(),
    isReady: isEditorReady(),
    blocks: getEditorBlocks(),
    title: getEditedPostAttribute('title'),
    getEditedPostContent,
    selectedBlockIndex: getBlockIndex(selectedBlockClientId),
    blockCount: getGlobalBlockCount(),
    paragraphCount: getGlobalBlockCount('core/paragraph')
  };
}), (0, _data.withDispatch)(dispatch => {
  const {
    editPost,
    resetEditorBlocks
  } = dispatch('core/editor');
  const {
    updateSettings,
    clearSelectedBlock,
    insertBlock,
    replaceBlock
  } = dispatch(_blockEditor.store);
  const {
    switchEditorMode
  } = dispatch('core/edit-post');
  const {
    addEntities,
    receiveEntityRecords
  } = dispatch('core');
  const {
    createSuccessNotice
  } = dispatch('core/notices');
  return {
    updateSettings,
    addEntities,
    clearSelectedBlock,
    insertBlock,
    createSuccessNotice,

    editTitle(title) {
      editPost({
        title
      });
    },

    receiveEntityRecords,

    resetEditorBlocksWithoutUndoLevel(blocks) {
      resetEditorBlocks(blocks, {
        __unstableShouldCreateUndoLevel: false
      });
    },

    switchMode(mode) {
      switchEditorMode(mode);
    },

    replaceBlock
  };
})])(NativeEditorProvider);

exports.default = _default;
//# sourceMappingURL=index.native.js.map