Web Editor and React Native App

Overview

This repository contains two main projects:

1. Web Editor: A web-based text editor built with Vue.js and Tiptap, a modern and extendable rich-text editor framework.
2. React Native App: A mobile app built with React Native that wraps the web editor using a WebView, making the editor accessible on mobile platforms.

Table of Contents

• Web Editor
  • Features
  • Setup and Installation
  • Usage
• React Native App
  • Features
  • Setup and Installation
  • Usage
• Project Structure
• Scripts
• Contributing
• License

Web Editor

Features

• Rich-text editing: Using Tiptap to provide a highly customizable editing experience.
• Vue.js: The frontend framework for building reactive user interfaces.
• Customization: Easily extendable with additional features and plugins from the Tiptap ecosystem.

Setup and Installation

1. Clone the repository:

   git clone https://github.com/your-username/your-repo-name.git
   cd your-repo-name

2. Navigate to the web editor folder:

   cd pakages/web

3. Install dependencies:

   npm install

4. Run the development server:

   npm run dev

5. Open the editor in your browser at http://localhost:5173/.

Usage

To start using the editor, simply open the URL in your browser, and you will see a full-featured text editor. You can edit, format, and style text as you like. More features can be added through Tiptap extensions.

React Native App

Features

• WebView: Displays the Vue-based web editor inside a WebView component.
• Cross-platform: Available for both iOS and Android through React Native.
• Simple navigation: Load the web editor seamlessly inside the app.

Setup and Installation

1. Navigate to the React Native app folder:

   cd pakages/native

2. Install dependencies:

   npm install

3. Link required packages (for React Native < 0.60):

   react-native link

4. Run the app on iOS or Android:

   For iOS:

   npx react-native run-ios

   For Android:

   npx react-native run-android

Usage

Once the app is running, it will open the web editor inside a WebView, allowing users to edit text from their mobile devices with a responsive interface.

Project Structure

/packages
│
├── /web          # Vue.js project containing the Tiptap editor
│   ├── /src             # Vue components and assets
│   ├── /public          # Static files
│   └── package.json     # Web editor dependencies and scripts
│
├── /native    # React Native project wrapping the web editor
│   ├── ...             [Link text](https://docs.expo.dev/get-started/start-developing/)
│
└── README.md            # This README file

Scripts

The package.json file includes the following script commands under the "scripts" section:

"scripts": {
    "app": "yarn workspace native-app start",
    "web": "yarn workspace web-app dev"
}

Breakdown:

• "app": "yarn workspace native-app start"

  • This command is used to start the React Native app.
  • It specifies that the command should be run within the native-app workspace.
  • native-app refers to the folder that contains the React Native code.
  • When you run yarn app, it triggers the yarn start command in the native-app workspace, which will launch the development environment for the React Native app, allowing you to run it on your mobile devices or emulators.

• "web": "yarn workspace web-app dev"

  • This command is used to start the web editor (Vue.js + Tiptap).
  • Similar to the React Native script, it is scoped to the web-app workspace.
  • web-app refers to the folder containing the Vue.js web editor.
  • When you run yarn web, it triggers the yarn dev command in the web-app workspace, which will start the local development server, allowing you to view and develop the editor in a browser.

How to Use:

1. To run the mobile app (React Native):

   yarn app

2. To run the web editor (Vue.js + Tiptap):

   yarn web

Contributing

Contributions are welcome! Please follow the steps below to contribute:

1. Fork the repository.
2. Create a new feature branch (git checkout -b feature-branch).
3. Commit your changes (git commit -m 'Add some feature').
4. Push to the branch (git push origin feature-branch).
5. Create a new Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.