npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-wordpress-editor

v2.0.1

Published

React Native Wrapper for WordPress Rich Text Editor. The WordPress-Editor is the text editor used in the official WordPress mobile apps to create and edit pages & posts

Downloads

32

Readme

React Native WordPress Rich Text Editor

React Native Wrapper for WordPress Rich Text Editor. The WordPress-Editor is the text editor used in the official WordPress mobile apps to create and edit pages & posts. In short it's a simple, straightforward way to visually edit HTML.

Dependencies

How is integration possible?

It isn't trivial to intergrate the WordPress editor with React Native because it is exposed in native code as a UIViewController and not a UIView. React Native only has internal support for integrating native UIViews by wrapping them as React components.

In order to integrate a UIViewController with RN, we have to turn to the library react-native-navigation which fully supports native app skeletons with View Controllers. If you're interested in how it's achieved, take a look at the following internal dependency of this awesome library.

Installation

  • Make sure your project relies on React Native >= 0.25

  • Make sure your project uses react-native-navigation and that you've followed the Installation instructions there

  • In your RN project root run:npm install react-native-wordpress-editor --save

  • Open your Xcode project and drag the folder node_modules/react-native-wordpress-editor/ios into your project

Usage

For a fully working example look here

First, create a placeholder screen for the editor. The main purpose of this screen is to handle navigation events. See an example here.

Note: Make sure your screen component has been registered with Navigation.registerComponent like all react-native-navigation screens need to be, example.

Now, to display your screen, from within one of your other app screens, push the editor:

this.props.navigator.push({
  screen: 'example.EditorScreen',
  title: 'Preview',
  passProps: {
    externalNativeScreenClass: 'RNWordPressEditorViewController',
    externalNativeScreenProps: {
      // the post to open in the editor, leave empty for no post
      post: {
        // title of the post
        title: 'Hello WorldPress', 
        // html body of the post
        body: 'cool HTML body <br><br> <img src="https://www.wpshrug.com/wp-content/uploads/2016/05/wordpress-winning-meme.jpg" />'
      },
      // if no post shown, these placeholders will appear in the relevant fields
      placeHolders: {
        title: 'title',
        body: 'body'
      }
    }
  }
});

API Reference

Once the editor screen is displayed, you can communicate with it using a JS interface.

import EditorManager from 'react-native-wordpress-editor';
  • EditorManager.setEditingState(editing: boolean) Switch between editing and preview modes (accepts a boolean).

  • EditorManager.resetStateToInitial() Reset to the initial state right after the screen was pushed (with original props).

  • EditorManager.isPostChanged(): Promise<boolean> Returns a promise of a boolean (since it's async) whether the state is still the initial one.

  • EditorManager.getPostData(): Promise<{title: string, body: string}> Returns a promise of a simple object holding the title and HTML body of the post.

  • EditorManager.addImages(images: Array<{url: string}>) Adds images at the current cursor location in the editor, takes an array of simple objects with the url of each image.

Credits and Attributions

This project depends on:

License

See LICENSE