### Setup iOS Example for New Architecture

Source: https://github.com/10play/10tap-editor/blob/main/CONTRIBUTING.md

Prepares the iOS example app for the new architecture by installing pods with the new architecture enabled. This is a prerequisite before running the app.

```sh
RCT_NEW_ARCH_ENABLED=1 yarn pod-install examplelatest/ios
```

--------------------------------

### Start Example App Packager

Source: https://github.com/10play/10tap-editor/blob/main/CONTRIBUTING.md

Starts the Metro bundler for the example application. This is required to run the example app on a device or simulator.

```sh
yarn examplelatest start
```

--------------------------------

### Install Vite and Plugins (Bash)

Source: https://github.com/10play/10tap-editor/blob/main/website/versioned_docs/version-1.0/setup/advancedSetup.md

Installs Vite, the React plugin for Vite, and the single-file plugin for Vite. These are development dependencies required for bundling the editor.

```bash
yarn add -D vite @vitejs/plugin-react vite-plugin-singlefile
```

--------------------------------

### Start Metro Bundler (npm/Yarn)

Source: https://github.com/10play/10tap-editor/blob/main/examplelatest/README.md

Starts the Metro JavaScript bundler, which is essential for developing React Native applications. This command is run from the root of the project directory.

```shell
# Using npm
npm start

# OR using Yarn
yarn start
```

--------------------------------

### Run Example App on iOS

Source: https://github.com/10play/10tap-editor/blob/main/CONTRIBUTING.md

Builds and runs the example application on an iOS simulator or device. Assumes the packager is already running.

```sh
yarn examplelatest ios
```

--------------------------------

### Initialize EditorBridge with TenTapStarterKit

Source: https://github.com/10play/10tap-editor/blob/main/website/versioned_docs/version-1.0/examples/basic.md

Initializes the EditorBridge using the `useEditorBridge` hook. By default, it includes the `TenTapStartKit`, which provides all pre-built bridge extensions for comprehensive editor features. This is the recommended way to start.

```tsx
const editor = useEditorBridge();
```

```tsx
const editor = useEditorBridge({
  bridgeExtensions: TenTapStarterKit,
});
```

--------------------------------

### Full Basic Editor Example

Source: https://github.com/10play/10tap-editor/blob/main/website/versioned_docs/version-1.0/examples/basic.md

A complete example demonstrating the integration of `useEditorBridge`, `RichText`, and `Toolbar` components within a `SafeAreaView` and `KeyboardAvoidingView`. This setup provides a fully functional basic rich text editor with keyboard awareness.

```tsx
import React from 'react';
import {
  KeyboardAvoidingView,
  StyleSheet,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { RichText, Toolbar, useEditorBridge } from '@10play/tentap-editor';

export const Basic = () => {
  const editor = useEditorBridge({
    autofocus: true,
    avoidIosKeyboard: true,
    initialContent,
  });

  return (
    <SafeAreaView style={exampleStyles.fullScreen}>
      <RichText editor={editor} />
      <KeyboardAvoidingView
        behavior={'padding'}
        style={exampleStyles.keyboardAvoidingView}
      >
        <Toolbar editor={editor} />
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
};

const exampleStyles = StyleSheet.create({
  fullScreen: {
    flex: 1,
  },
  keyboardAvoidingView: {
    position: 'absolute',
    width: '100%',
    bottom: 0,
  },
});

const initialContent = `<p>This is a basic example!</p>`;
```

--------------------------------

### Run Example App on Android

Source: https://github.com/10play/10tap-editor/blob/main/CONTRIBUTING.md

Builds and runs the example application on an Android device or emulator. Assumes the packager is already running.

```sh
yarn examplelatest android
```

--------------------------------

### Install React DOM (Bash)

Source: https://github.com/10play/10tap-editor/blob/main/website/versioned_docs/version-1.0/setup/advancedSetup.md

Installs the `react-dom` package and its corresponding development types. This is a necessary dependency for React applications that render to the DOM.

```bash
yarn add react-dom

yarn add -D @types/react-dom
```

--------------------------------

### Install Dependencies with Yarn

Source: https://github.com/10play/10tap-editor/blob/main/website/README.md

Installs project dependencies using Yarn. This is typically the first step before running any other commands.

```shell
$ yarn
```

--------------------------------

### Build and Run iOS App (npm/Yarn)

Source: https://github.com/10play/10tap-editor/blob/main/examplelatest/README.md

Builds and runs the React Native application on an iOS simulator or connected device. This command should be executed after ensuring all CocoaPods dependencies are installed.

```shell
# Using npm
npm run ios

# OR using Yarn
yarn ios
```

--------------------------------

### Start Local Development Server with Yarn

Source: https://github.com/10play/10tap-editor/blob/main/website/README.md

Starts a local development server for live previewing changes. Changes are reflected in the browser without requiring a server restart.

```shell
$ yarn start
```

--------------------------------

### Install CocoaPods Dependencies (Ruby)

Source: https://github.com/10play/10tap-editor/blob/main/examplelatest/README.md

Installs the necessary dependencies for the iOS version of the React Native app using CocoaPods. This is typically run once after cloning the project or after updating native dependencies.

```shell
# Install CocoaPods itself if not already installed
bundle install

# Install project-specific dependencies
bundle exec pod install
```

--------------------------------

### Run Android Example with New Architecture

Source: https://github.com/10play/10tap-editor/blob/main/CONTRIBUTING.md

Runs the example app on Android with the new architecture enabled. This requires setting an environment variable before executing the yarn command.

```sh
ORG_GRADLE_PROJECT_newArchEnabled=true yarn examplelatest android
```

--------------------------------

### Install Expo Web Dependencies for 10tap Editor

Source: https://github.com/10play/10tap-editor/blob/main/website/versioned_docs/version-1.0/setup/expoWeb.md

Installs the required dependencies for Expo Web support with the 10tap editor. This includes the web-compatible webview and crypto modules.

```bash
npx expo install @10play/react-native-web-webview expo-crypto
```

--------------------------------

### Build and Run Android App (npm/Yarn)

Source: https://github.com/10play/10tap-editor/blob/main/examplelatest/README.md

Builds and runs the React Native application on an Android device or emulator. This command should be executed in a separate terminal window while Metro is running.

```shell
# Using npm
npm run android

# OR using Yarn
yarn android
```

--------------------------------

### Install Dependencies with Yarn

Source: https://github.com/10play/10tap-editor/blob/main/CONTRIBUTING.md

Installs all project dependencies for each package within the monorepo using Yarn workspaces. This is the initial step to set up the development environment.

```sh
yarn
```

--------------------------------

### Add Build Scripts to package.json (JSON)

Source: https://github.com/10play/10tap-editor/blob/main/website/versioned_docs/version-1.0/setup/advancedSetup.md

Adds essential scripts to the package.json file for managing the development and building of the editor-web. Includes scripts for development, building, post-build processing, and Android port forwarding.

```json
"scripts": {
    ...
    "editor:dev": "vite --config ./editor-web/vite.config.ts",
    "editor:build": "vite --config ./editor-web/vite.config.ts build && yarn editor:post-build",
    "editor:post-build":"node ./node_modules/@10play/tentap-editor/scripts/buildEditor.js ./editor-web/build/index.html",
    "reverse-android": "adb reverse tcp:3000 tcp:3000",
}
```

--------------------------------

### React Entrypoint for Web Editor

Source: https://github.com/10play/10tap-editor/blob/main/website/versioned_docs/version-1.0/setup/advancedSetup.md

This TypeScript/React file serves as the entry point for the web part of the editor, built with Vite. It includes a mechanism to handle potential content injection delays from react-native-webview by polling for a `contentInjected` flag before rendering the `AdvancedEditor` component.

```tsx
import React from 'react';
import { createRoot } from 'react-dom/client';
import { AdvancedEditor } from './AdvancedEditor';

/**
 * This is the entrypoint for the "web" part of our editor that will be built with vite
 */

declare global {
  interface Window {
    contentInjected: boolean | undefined;
  }
}

/**
 * On android - react-native-webview there is a bug where sometimes the content
 * is injected after the window is loaded https://github.com/react-native-webview/react-native-webview/pull/2960
 * To overcome this we will check if the content is injected before rendering the editor
 */
const contentInjected = () => window.contentInjected;
let interval: NodeJS.Timeout;
interval = setInterval(() => {
  if (!contentInjected()) return;
  // Once content is injected into the webview, we can render the editor
  const container = document.getElementById('root');
  const root = createRoot(container!);
  root.render(<AdvancedEditor />);
  clearInterval(interval);
  return;
}, 1);

```

--------------------------------

### Run the Editor Development Server

Source: https://github.com/10play/10tap-editor/blob/main/CONTRIBUTING.md

This script starts the development server for the editor. This is typically used during development to enable features like hot-reloading.

```shell
yarn editor:dev
```

--------------------------------

### Install TenTap Editor for React Native

Source: https://github.com/10play/10tap-editor/blob/main/README.md

Installs the TenTap editor and its necessary dependency, react-native-webview, for React Native projects. After installation, navigate to the 'ios' directory and run 'pod install' to link native dependencies.

```bash
yarn add @10play/tentap-editor react-native-webview
cd ios && pod install
```

--------------------------------

### Build the Editor

Source: https://github.com/10play/10tap-editor/blob/main/CONTRIBUTING.md

Builds the 10tap editor. This command is necessary before running the example application or making changes to the editor's core functionality.

```sh
yarn editor:build
```

--------------------------------

### Install 10tap-editor and Dependencies

Source: https://context7.com/10play/10tap-editor/llms.txt

Installs the 10tap-editor package and its required dependency, react-native-webview, using either yarn or npm. For iOS projects, it also includes the command to install native dependencies via CocoaPods.

```bash
# React Native
yarn add @10play/tentap-editor react-native-webview
cd ios && pod install

# Expo
npx expo install @10play/tentap-editor react-native-webview
```

--------------------------------

### Integrate RichText Component

Source: https://github.com/10play/10tap-editor/blob/main/website/versioned_docs/version-1.0/examples/basic.md

Adds the `RichText` component to render the editor content. This component is a WebView that runs a pre-built tiptap bundle and communicates with the editor via bridge extensions. It requires the initialized `EditorBridge` instance as a prop.

```tsx
import { SafeAreaView } from 'react-native-safe-area-context';

<SafeAreaView style={exampleStyles.fullScreen}>
  <RichText editor={editor} />
</SafeAreaView>
```

--------------------------------

### Alternative Vite Build Configuration (TypeScript)

Source: https://github.com/10play/10tap-editor/blob/main/website/versioned_docs/version-1.0/setup/advancedSetup.md

Modifies the Vite build configuration to disable clearing the output directory. This is part of the alternative setup for Expo, ensuring that the build output is not emptied before the build process.

```typescript
build: {
  outDir: 'build',
  emptyOutDir: false,
}
```

--------------------------------

### Install TenTap Editor for Expo

Source: https://github.com/10play/10tap-editor/blob/main/README.md

Installs the TenTap editor and react-native-webview for Expo projects. Note that Expo Go only supports basic usage; for full functionality, an Expo Dev Client is required.

```bash
npx expo install @10play/tentap-editor react-native-webview
```

--------------------------------

### HTML Structure for Rich Text Editor

Source: https://github.com/10play/10tap-editor/blob/main/website/versioned_docs/version-1.0/setup/advancedSetup.md

This HTML file sets up the basic structure for the rich text editor. It includes essential meta tags, a title, and inline styles to ensure the editor fills the available space within the webview. The script tag points to the entry point for the React application.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>RichTextEditor</title>
  </head>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    #root > div:nth-of-type(1) {
      position: absolute;
      height: 100%;
      overflow: auto;
      width: 100%;
      top: 0;
      bottom: 0;
    }
    #root > div.dynamic-height {
      height: unset;
    }

    #root div .ProseMirror {
      min-height: 100%;
      overflow: visible;
    }
    #root div.dynamic-height .ProseMirror {
      height: unset;
    }
    .ProseMirror:focus {
      outline: none;
    }
    .highlight-background {
      background-color: #e6e6ff;
    }
  </style>
  <body>
    <div id="root"></div>
    <script type="module" src="/index.tsx"></script>
  </body>
</html>
```

--------------------------------

### Alternative Vite Configuration for Expo (TypeScript)

Source: https://github.com/10play/10tap-editor/blob/main/website/versioned_docs/version-1.0/setup/advancedSetup.md

Provides an alternative Vite configuration for use with Expo, which avoids running a Vite dev server. It replaces the default plugins with a custom `postbuild-commands` plugin that executes a build script after the bundle is closed. It also sets `emptyOutDir` to `false` in the build options.

```typescript
const exec =  require('child_process').exec;

...
plugins: [
   react(),
   viteSingleFile(),
   {
     name: 'postbuild-commands',
     closeBundle: async () => {
       exec('yarn editor:post-build', (error, stdout, stderr) => {
         if (error) {
           console.error(`exec error: ${error}`);
           return;
         }
       });
     },
   },
 ]
```

--------------------------------

### Use Custom Editor HTML (TypeScript/React)

Source: https://github.com/10play/10tap-editor/blob/main/website/versioned_docs/version-1.0/setup/advancedSetup.md

Demonstrates how to integrate the built editor HTML into your application. It imports the `editorHtml` from the build output and passes it as `customSource` to the `useEditorBridge` hook.

```tsx
import { editorHtml } from './editor-web/build/editorHtml';
const editor = useEditorBridge({
  customSource: editorHtml,
  ...
});
```

--------------------------------

### Add Keyboard Aware Toolbar

Source: https://github.com/10play/10tap-editor/blob/main/website/versioned_docs/version-1.0/examples/basic.md

Implements a toolbar that stays above the keyboard using `KeyboardAvoidingView`. The toolbar is wrapped to ensure it's positioned correctly relative to the keyboard's appearance. The `Toolbar` component also requires the `EditorBridge` instance.

```tsx
const exampleStyles = StyleSheet.create({
  keyboardAvoidingView: {
    position: 'absolute',
    width: '100%',
    bottom: 0,
  },
});

...

<KeyboardAvoidingView
  behavior={'padding'}
  style={exampleStyles.keyboardAvoidingView}
>
  <Toolbar editor={editor} />
</KeyboardAvoidingView>
```

--------------------------------

### Minimal Tiptap Editor Configuration (React/TSX)

Source: https://context7.com/10play/10tap-editor/llms.txt

Shows how to create a minimal Tiptap editor using specific bridge extensions from TenTapStartKit. This example includes core functionality, bold, italic, heading, and history, demonstrating a reduced set of features.

```tsx
import {
  // Starter Kit - includes all extensions below
  TenTapStartKit,

  // Individual Bridge Extensions
  BoldBridge,
  ItalicBridge,
  UnderlineBridge,
  StrikeBridge,
  CodeBridge,
  HeadingBridge,
  BlockquoteBridge,
  BulletListBridge,
  OrderedListBridge,
  TaskListBridge,
  ListItemBridge,
  LinkBridge,
  ImageBridge,
  ColorBridge,
  HighlightBridge,
  HistoryBridge,
  PlaceholderBridge,
  CoreBridge,
  DropCursorBridge,
  HardBreakBridge,
} from '@10play/tentap-editor';

// Example: Create a minimal editor with only specific extensions
import React from 'react';
import { SafeAreaView } from 'react-native';
import { RichText, Toolbar, useEditorBridge } from '@10play/tentap-editor';

export const MinimalEditorExample = () => {
  const editor = useEditorBridge({
    initialContent: '<p>Minimal editor</p>',
    bridgeExtensions: [
      CoreBridge,      // Required - provides core functionality
      BoldBridge,
      ItalicBridge,
      HeadingBridge,
      HistoryBridge,
    ],
  });

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <RichText editor={editor} />
      <Toolbar editor={editor} />
    </SafeAreaView>
  );
};

```

--------------------------------

### Configure tsconfig.json for Editor Web

Source: https://github.com/10play/10tap-editor/blob/main/website/versioned_docs/version-1.0/setup/advancedSetup.md

This tsconfig.json file is specifically for the 'editor-web' directory. It configures module resolution, JSX, and paths to ensure correct type resolution for the web environment, particularly for the '@10play/tentap-editor' package.

```typescript
{
  "$schema": "https://json.schemastore.org/tsconfig",
  "_version": "2.0.0",
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "paths": {
      "@10play/tentap-editor": [
        "../node_modules/@10play/tentap-editor/lib-web/typescript/webEditorUtils/index.d.ts"
      ]
    },
    "moduleResolution": "bundler",
    "target": "es2015",
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true
  }
}
```

--------------------------------

### Update Development Script for Watching (JSON)

Source: https://github.com/10play/10tap-editor/blob/main/website/versioned_docs/version-1.0/setup/advancedSetup.md

Updates the `editor:dev` script in `package.json` to use Vite in watch mode (`-w`) targeting the `build` directory. This allows Metro to handle hot reloading in Expo, rather than relying on Vite's dev server.

```json
"editor:dev": "vite --config ./editor-web/vite.config.ts -w build"
```

--------------------------------

### Configure Metro Bundler for Expo Web 10tap Editor

Source: https://github.com/10play/10tap-editor/blob/main/website/versioned_docs/version-1.0/setup/expoWeb.md

Configures the Metro bundler by adding aliases for `react-native`, `react-native-webview`, and `crypto` to ensure compatibility with Expo Web. This modification is applied to the `metro.config.js` file.

```javascript
const {
  getDefaultConfig
} = require('expo/metro-config');

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);

const webAliases = {
  'react-native': 'react-native-web',
  'react-native-webview': '@10play/react-native-web-webview',
  'react-native/Libraries/Utilities/codegenNativeComponent':
    '@10play/react-native-web-webview/shim',
  'crypto': 'expo-crypto',
};

config.resolver.resolveRequest = (
  context,
  realModuleName,
  platform,
  moduleName
) => {
  if (platform === 'web') {
    const alias = webAliases[realModuleName];
    if (alias) {
      return {
        filePath: require.resolve(alias),
        type: 'sourceFile',
      };
    }
  }
  return context.resolveRequest(context, realModuleName, platform, moduleName);
};

module.exports = config;
```

--------------------------------

### Configure Vite for Single-File Build (TypeScript)

Source: https://github.com/10play/10tap-editor/blob/main/website/versioned_docs/version-1.0/setup/advancedSetup.md

Configures Vite to build the web editor into a single HTML file. It sets the root directory, build output directory, and uses aliases to ensure only web-related code is included, preventing React Native code from being bundled. This configuration is crucial for creating a self-contained editor bundle.

```typescript
import {
  defineConfig
} from 'vite';
import react from '@vitejs/plugin-react';
import { viteSingleFile } from 'vite-plugin-singlefile';

// This config is used to build the web editor into a single file

export default defineConfig({
  root: 'src/editor-web', // This should be the directory of your index.html
  build: {
    outDir: 'build',
  },
  resolve: {
    alias: [
      {
        find: '@10play/tentap-editor', // On our web bundle we only want to include web related code
        replacement: '@10play/tentap-editor/web',
      },
      // We alias tiptap view and state to use the internal version of tiptap to avoid this error https://github.com/ueberdostiptap/issues/3869#issuecomment-2167931620
      {
        find: '@tiptap/pm/view',
        replacement: '@10play/tentap-editor/web',
      },
      {
        find: '@tiptap/pm/state',
        replacement: '@10play/tentap-editor/web',
      },
    ],
  },
  plugins: [react(), viteSingleFile()],
  server: {
    port: 3000,
  },
});
```

--------------------------------

### Configure Webpack Bundler for Expo Web 10tap Editor

Source: https://github.com/10play/10tap-editor/blob/main/website/versioned_docs/version-1.0/setup/expoWeb.md

Configures the Webpack bundler by adding aliases for `react-native`, `react-native-webview`, and `crypto` to ensure compatibility with Expo Web. This modification is applied to the `webpack.config.js` file.

```javascript
const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);

  // Alias react-native-webview and crypto
  config.resolve.alias = {
    ...config.resolve.alias,
    'react-native': 'react-native-web',
    'react-native-webview': '@10play/react-native-web-webview',
    'crypto': 'expo-crypto',
  };

  // Shim codegenNativeComponent
  config.resolve.fallback = {
    ...config.resolve.fallback,
    'react-native/Libraries/Utilities/codegenNativeComponent':
      '@10play/react-native-web-webview/shim',
  };

  return config;
};
```

--------------------------------

### Configure Bridge Extensions for 10tap Editor

Source: https://context7.com/10play/10tap-editor/llms.txt

Demonstrates how to configure built-in bridge extensions to customize Tiptap editor behavior. It shows configuration for placeholder text, link behavior, image options, custom CSS for code blocks, and extending the document schema. This example uses React Native and the '@10play/tentap-editor' library.

```tsx
import React from 'react';
import { SafeAreaView, KeyboardAvoidingView, Platform } from 'react-native';
import {
  RichText,
  Toolbar,
  useEditorBridge,
  TenTapStartKit,
  CoreBridge,
  PlaceholderBridge,
  LinkBridge,
  ImageBridge,
  CodeBridge,
  HeadingBridge,
} from '@10play/tentap-editor';

// Custom CSS for code blocks
const customCodeCSS = `
  code {
    background-color: #ffdede;
    border-radius: 0.25em;
    border: 1px solid #e45d5d;
    color: #cd4242;
    font-size: 0.9rem;
    padding: 0.25em;
  }
`;

export const ConfiguredExtensionsExample = () => {
  const editor = useEditorBridge({
    initialContent: '<p>Configured editor</p>',
    autofocus: true,
    avoidIosKeyboard: true,
    bridgeExtensions: [
      // Spread the starter kit first (duplicates are ignored)
      ...TenTapStartKit,

      // Configure placeholder text
      PlaceholderBridge.configureExtension({
        placeholder: 'Write something amazing...', 
      }),

      // Configure link behavior
      LinkBridge.configureExtension({
        openOnClick: false,
        autolink: true,
      }),

      // Configure image options
      ImageBridge.configureExtension({
        allowBase64: true,
        inline: false,
      }),

      // Configure custom CSS for code blocks
      CodeBridge.configureCSS(customCodeCSS),

      // Extend the document schema to require heading first
      CoreBridge.extendExtension({
        content: 'heading block+',
      }),
    ],
  });

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <RichText editor={editor} />
      <KeyboardAvoidingView
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        style={{ position: 'absolute', width: '100%', bottom: 0 }}
      >
        <Toolbar editor={editor} />
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
};

```

--------------------------------

### Extend Document Extension Schema

Source: https://github.com/10play/10tap-editor/blob/main/website/versioned_docs/version-1.0/examples/configureExtensions.md

Extends the main `tiptapExtension` of the CoreBridge to modify the Document extension's schema. This example enforces that the first node in the document must be a 'heading', followed by one or more 'block' nodes. This is achieved using the `extendExtension` method.

```javascript
CoreBridge.extendExtension({ content: 'heading block+' });
```

--------------------------------

### React Component for Advanced Tiptap Editor

Source: https://github.com/10play/10tap-editor/blob/main/website/versioned_docs/version-1.0/setup/advancedSetup.md

The AdvancedEditor React component manages the web-side of the custom editor. It utilizes the `useTenTap` hook with custom bridges and Tiptap extensions to render the editor content. It dynamically applies a 'dynamic-height' class based on a window property.

```tsx
import React from 'react';
import { EditorContent } from '@tiptap/react';
import { useTenTap, TenTapStartKit } from '@10play/tentap-editor';
import { CounterBridge } from '../CounterBridge';
import Document from '@tiptap/extension-document';
import Paragraph from '@tiptap/extension-paragraph';
import Text from '@tiptap/extension-text';

/**
 * Here we control the web side of our custom editor
 */
export const AdvancedEditor = () => {
  const editor = useTenTap({
    bridges: [...TenTapStartKit, CounterBridge],
    tiptapOptions: {
      extensions: [Document, Paragraph, Text],
    },
  });
  return (
    <EditorContent
      editor={editor}
      className={window.dynamicHeight ? 'dynamic-height' : undefined}
    />
  );
};

```

--------------------------------

### Control Editor Content and Formatting with EditorBridge (React Native)

Source: https://context7.com/10play/10tap-editor/llms.txt

Demonstrates how to use the `useEditorBridge` hook and its associated methods to programmatically control the 10tap-editor. This includes getting content in various formats (HTML, text, JSON), setting new content, applying text formatting like bold, headings, lists, links, images, colors, and managing editor state like selection, focus, and history. It also shows how to inject custom CSS and toggle the editable state.

```tsx
import React from 'react';
import { SafeAreaView, View, Button, Alert } from 'react-native';
import { RichText, Toolbar, useEditorBridge } from '@10play/tentap-editor';

export const EditorCommandsExample = () => {
  const editor = useEditorBridge({
    initialContent: '<p>Control me programmatically!</p>',
    avoidIosKeyboard: true,
  });

  const handleGetContent = async () => {
    // Get content in different formats
    const html = await editor.getHTML();
    const text = await editor.getText();
    const json = await editor.getJSON();

    Alert.alert('Content', `HTML length: ${html.length}\nText: ${text}`);
  };

  const handleSetContent = () => {
    // Set new content (HTML string or JSON object)
    editor.setContent('<h1>New Content</h1><p>This was set programmatically!</p>');
  };

  const handleFormatting = () => {
    // Toggle formatting
    editor.toggleBold();
    // editor.toggleItalic();
    // editor.toggleUnderline();
    // editor.toggleStrike();
    // editor.toggleCode();
    // editor.toggleBlockquote();
  };

  const handleHeadings = () => {
    // Toggle heading levels (1-6)
    editor.toggleHeading(1); // H1
    // editor.toggleHeading(2); // H2
    // editor.toggleHeading(3); // H3
  };

  const handleLists = () => {
    // Toggle list types
    editor.toggleBulletList();
    // editor.toggleOrderedList();
    // editor.toggleTaskList();
  };

  const handleLinks = () => {
    // Set link on selected text
    editor.setLink('https://example.com');
    // Remove link: editor.setLink(null);
  };

  const handleImages = () => {
    // Insert image at cursor
    editor.setImage('https://example.com/image.jpg');
  };

  const handleColors = () => {
    // Set text color
    editor.setColor('#ff0000');
    // Remove color: editor.unsetColor();

    // Set highlight
    editor.setHighlight('#ffff00');
    // Toggle highlight: editor.toggleHighlight('#ffff00');
    // Remove highlight: editor.unsetHighlight();
  };

  const handleSelection = () => {
    // Set selection range
    editor.setSelection(0, 10);
  };

  const handleFocus = () => {
    // Focus with position options
    editor.focus('end'); // 'start', 'end', 'all', or position number
    // Blur: editor.blur();
  };

  const handleHistory = () => {
    // Undo/Redo
    editor.undo();
    // editor.redo();
  };

  const handleInjectCSS = () => {
    // Inject custom CSS dynamically
    editor.injectCSS(`
      p { color: blue; }
      h1 { color: red; }
    `, 'my-custom-styles');
  };

  const handleSetEditable = () => {
    // Toggle read-only mode
    editor.setEditable(false);
    setTimeout(() => editor.setEditable(true), 2000);
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <RichText editor={editor} style={{ flex: 1 }} />
      <View style={{ flexDirection: 'row', flexWrap: 'wrap', padding: 5 }}>
        <Button title="Get Content" onPress={handleGetContent} />
        <Button title="Set Content" onPress={handleSetContent} />
        <Button title="Bold" onPress={handleFormatting} />
        <Button title="Heading" onPress={handleHeadings} />
        <Button title="List" onPress={handleLists} />
        <Button title="Link" onPress={handleLinks} />
        <Button title="Image" onPress={handleImages} />
        <Button title="Color" onPress={handleColors} />
        <Button title="Focus" onPress={handleFocus} />
        <Button title="Undo" onPress={handleHistory} />
      </View>
      <Toolbar editor={editor} />
    </SafeAreaView>
  );
};

```

--------------------------------

### Build Static Website with Yarn

Source: https://github.com/10play/10tap-editor/blob/main/website/README.md

Generates static website content into the 'build' directory. The output can be hosted on any static content hosting service.

```shell
$ yarn build
```

--------------------------------

### Deploy Website with Yarn

Source: https://github.com/10play/10tap-editor/blob/main/website/README.md

Deploys the website, typically to GitHub Pages. Supports deployment with or without SSH, using environment variables to configure the Git user.

```shell
$ USE_SSH=true yarn deploy
```

```shell
$ GIT_USER=<Your GitHub username> yarn deploy
```

--------------------------------

### Redirect to Documentation Intro Page

Source: https://github.com/10play/10tap-editor/blob/main/website/static/index.html

This JavaScript code snippet sets the browser's current location to 'docs/intro.html', effectively redirecting the user to the introduction page of the documentation. It's a common pattern for initiating navigation within a web application.

```javascript
window.location.href = 'docs/intro.html';
```

--------------------------------

### SafeAreaView Import Change in React Native

Source: https://github.com/10play/10tap-editor/blob/main/website/versioned_docs/version-1.0/migrations/v1.0.md

Illustrates the updated import statement for SafeAreaView in v1.0. It now uses 'react-native-safe-area-context' instead of 'react-native'. Ensure the new package is installed.

```tsx
// Before (Pre-1.0):
import { SafeAreaView } from 'react-native';

// After (v1.0):
import { SafeAreaView } from 'react-native-safe-area-context';
```

--------------------------------

### Publish New Version to npm using release-it

Source: https://github.com/10play/10tap-editor/blob/main/CONTRIBUTING.md

This command uses the release-it tool to automate the process of publishing new versions of the package to npm. It handles version bumping, tag creation, and release generation.

```shell
yarn release
```

--------------------------------

### Basic Usage of 10tap-editor in React Native

Source: https://github.com/10play/10tap-editor/blob/main/website/versioned_docs/version-1.0/intro.md

Demonstrates how to integrate the TenTap rich text editor into a React Native application. It includes setting up the editor instance with initial content and displaying the editor along with a keyboard-avoiding toolbar.

```tsx
export const Basic = () => {
  const editor = useEditorBridge({
    autofocus: true,
    avoidIosKeyboard: true,
    initialContent: 'Start editing!',
  });

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <RichText editor={editor} />
      <KeyboardAvoidingView
        behavior={'padding'}
        style={{
          position: 'absolute',
          width: '100%',
          bottom: 0,
        }}
      >
        <Toolbar editor={editor} />
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
};
```

--------------------------------

### Configure Placeholder and Link Extensions

Source: https://github.com/10play/10tap-editor/blob/main/website/versioned_docs/version-1.0/examples/configureExtensions.md

Configures the Placeholder and Link extensions for a Tiptap editor. The placeholder extension is set to display custom text, and the link extension is configured to prevent links from opening when clicked. This utilizes the `configureExtension` method provided by the bridge extensions.

```tsx
const editor = useEditorBridge({
    bridgeExtensions: [
        ...,
        PlaceholderBridge.configureExtension({
          placeholder: 'Type something...', 
        }),
        LinkBridge.configureExtension({ openOnClick: false }),
    ],
  });
```

--------------------------------

### Add Custom Fonts to 10tap-editor (React Native)

Source: https://context7.com/10play/10tap-editor/llms.txt

This example shows how to incorporate custom fonts into the 10tap-editor. It involves converting font files to base64 and embedding them within CSS using the `@font-face` rule. This allows the editor's text to render with a specific font family.

```tsx
import React from 'react';
import { SafeAreaView, KeyboardAvoidingView, Platform } from 'react-native';
import {
  RichText,
  Toolbar,
  useEditorBridge,
  TenTapStartKit,
  CoreBridge,
} from '@10play/tentap-editor';

// Font converted to base64 using https://transfonter.org
// Copy contents from the generated stylesheet.css
const CustomFontBase64 = `
@font-face {
    font-family: 'Custom Font';
    src: url('data:font/woff2;charset=utf-8;base64,YOUR_BASE64_FONT_DATA_HERE') format('woff2');
    font-weight: normal;
    font-style: normal;
}
`;

const customFontCSS = `
${CustomFontBase64}
* {
    font-family: 'Custom Font', -apple-system, BlinkMacSystemFont, sans-serif;
}
`;

export const CustomFontExample = () => {
  const editor = useEditorBridge({
    initialContent: '<p>Custom font editor</p>',
    autofocus: true,
    avoidIosKeyboard: true,
    bridgeExtensions: [
      ...TenTapStartKit,
      CoreBridge.configureCSS(customFontCSS),
    ],
  });

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <RichText editor={editor} />
      <KeyboardAvoidingView
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        style={{ position: 'absolute', width: '100%', bottom: 0 }}
      >
        <Toolbar editor={editor} />
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
};

```

--------------------------------

### Run Unit Tests with Jest

Source: https://github.com/10play/10tap-editor/blob/main/CONTRIBUTING.md

Executes the project's unit tests using Jest. This is crucial for verifying the correctness of individual code components.

```sh
yarn test
```

--------------------------------

### Image and Link API

Source: https://github.com/10play/10tap-editor/blob/main/website/versioned_docs/version-1.0/api/EditorBridge.md

Functions to set an image from a URL and to set or remove a link.

```APIDOC
## setImage

### Description
Gets an image URL string and sets the image in the editor.

### Method
POST

### Endpoint
/10play/10tap-editor/setImage

### Parameters
#### Query Parameters
- **src** (string) - Required - The URL of the image to set.

### Request Example
```json
{
  "src": "https://example.com/image.png"
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates the success of the operation.

#### Response Example
```json
{
  "status": "image set"
}
```

## setLink

### Description
Gets a link URL as a string and sets a link. If null is provided, the link will be removed.

### Method
POST

### Endpoint
/10play/10tap-editor/setLink

### Parameters
#### Query Parameters
- **link** (string | null) - Required - The URL of the link to set, or null to remove the link.

### Request Example
```json
{
  "link": "https://example.com"
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates the success of the operation.

#### Response Example
```json
{
  "status": "link set"
}
```
```

--------------------------------

### Integrate Custom BridgeExtension in React Native Component - 10tap-editor

Source: https://context7.com/10play/10tap-editor/llms.txt

This snippet shows how to use a custom BridgeExtension within a React Native component. It utilizes hooks like `useEditorBridge` and `useBridgeState` to initialize the editor with the custom extension and access its state. The example demonstrates buttons to interact with the custom counter functionality.

```tsx
import React from 'react';
import { SafeAreaView, View, Button, Text } from 'react-native';
import {
  RichText,
  useEditorBridge,
  useBridgeState,
  TenTapStartKit,
} from '@10play/tentap-editor';
import { CounterBridge } from './CounterBridge'; // Assuming CounterBridge is in a separate file

export const CustomBridgeExample = () => {
  const editor = useEditorBridge({
    initialContent: '<p>Custom bridge example</p>',
    bridgeExtensions: [...TenTapStartKit, CounterBridge],
  });

  const state = useBridgeState(editor);

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <RichText editor={editor} style={{ flex: 1 }} />
      <View style={{ padding: 10, flexDirection: 'row', alignItems: 'center' }}>
        <Button title="-" onPress={() => editor.decrementCounter()} />
        <Text style={{ marginHorizontal: 20 }}>Count: {state.count}</Text>
        <Button title="+" onPress={() => editor.incrementCounter()} />
      </View>
    </SafeAreaView>
  );
};

```

--------------------------------

### Custom Advanced Tiptap Editor with Mentions (React/TSX)

Source: https://context7.com/10play/10tap-editor/llms.txt

Demonstrates creating a custom Vite-bundled Tiptap editor in React with additional extensions like Mention. It shows how to configure extensions and use the custom editor source in a React Native environment.

```tsx
// editor-web/AdvancedEditor.tsx
import React from 'react';
import { EditorContent } from '@tiptap/react';
import { useTenTap, TenTapStartKit } from '@10play/tentap-editor';
import Document from '@tiptap/extension-document';
import Paragraph from '@tiptap/extension-paragraph';
import Text from '@tiptap/extension-text';
import Mention from '@tiptap/extension-mention';

export const AdvancedEditor = () => {
  const editor = useTenTap({
    bridges: [...TenTapStartKit],
    tiptapOptions: {
      extensions: [
        Document,
        Paragraph,
        Text,
        // Add any additional Tiptap extensions
        Mention.configure({
          HTMLAttributes: { class: 'mention' },
          suggestion: {
            items: ({ query }) => {
              return ['John', 'Jane', 'Bob'].filter(item =>
                item.toLowerCase().startsWith(query.toLowerCase())
              );
            },
          },
        }),
      ],
    },
  });

  return (
    <EditorContent
      editor={editor}
      className={window.dynamicHeight ? 'dynamic-height' : undefined}
    />
  );
};

// React Native side usage
import React from 'react';
import { SafeAreaView } from 'react-native';
import { RichText, Toolbar, useEditorBridge } from '@10play/tentap-editor';
// Import the built editor HTML
import { editorHtml } from './editor-web/build/editorHtml';

export const AdvancedExample = () => {
  const editor = useEditorBridge({
    // Use custom editor source
    customSource: editorHtml,
    initialContent: '<p>Advanced editor with mentions!</p>',
    autofocus: true,
  });

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <RichText editor={editor} />
      <Toolbar editor={editor} />
    </SafeAreaView>
  );
};

```

--------------------------------

### Editor Formatting API

Source: https://github.com/10play/10tap-editor/blob/main/website/versioned_docs/version-1.0/api/EditorBridge.md

Functions to toggle task list and underline formatting on the editor.

```APIDOC
## toggleTaskList

### Description
Toggles the task list on the editor if possible.

### Method
POST

### Endpoint
/10play/10tap-editor/toggleTaskList

### Request Example
```json
{}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates the success of the operation.

#### Response Example
```json
{
  "status": "task list toggled"
}
```

## toggleUnderline

### Description
Toggles underline formatting on the editor if possible.

### Method
POST

### Endpoint
/10play/10tap-editor/toggleUnderline

### Request Example
```json
{}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates the success of the operation.

#### Response Example
```json
{
  "status": "underline toggled"
}
```
```

--------------------------------

### Placeholder API

Source: https://github.com/10play/10tap-editor/blob/main/website/versioned_docs/version-1.0/api/EditorBridge.md

Function to change the placeholder text of the editor at runtime.

```APIDOC
## setPlaceholder

### Description
Changes the placeholder text on the editor at runtime.

### Method
POST

### Endpoint
/10play/10tap-editor/setPlaceholder

### Parameters
#### Query Parameters
- **newPlaceholder** (string) - Required - The new placeholder text.

### Request Example
```json
{
  "newPlaceholder": "Enter text here..."
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates the success of the operation.

#### Response Example
```json
{
  "status": "placeholder set"
}
```
```

--------------------------------

### Clean Build Folders

Source: https://github.com/10play/10tap-editor/blob/main/CONTRIBUTING.md

Removes all build folders for the project. This is useful for ensuring a clean build, especially when switching architectures or encountering build issues.

```sh
yarn clean
```

--------------------------------

### Basic Usage of TenTap Editor in React Native

Source: https://github.com/10play/10tap-editor/blob/main/README.md

Demonstrates the basic integration of the TenTap rich text editor within a React Native application. It utilizes the `useEditorBridge` hook to manage editor state and includes a `Toolbar` component for user interaction. The layout uses `SafeAreaView` and `KeyboardAvoidingView` for optimal display and input handling.

```tsx
import React from 'react';
import {
  SafeAreaView,
  View,
  KeyboardAvoidingView,
  Platform,
  StyleSheet,
} from 'react-native';
import { RichText, Toolbar, useEditorBridge } from '@10play/tentap-editor';

export const Basic = () => {
  const editor = useEditorBridge({
    autofocus: true,
    avoidIosKeyboard: true,
    initialContent: 'Start editing!',
  });

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <RichText editor={editor} />
      <KeyboardAvoidingView
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        style={{
          position: 'absolute',
          width: '100%',
          bottom: 0,
        }}
      >
        <Toolbar editor={editor} />
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
};
```

--------------------------------

### Highlight API

Source: https://github.com/10play/10tap-editor/blob/main/website/versioned_docs/version-1.0/api/EditorBridge.md

Provides functions to toggle and unset text highlights with a specified color.

```APIDOC
## toggleHighlight

### Description
Toggles text highlight with a specified color.

### Method
POST

### Endpoint
/10play/10tap-editor/toggleHighlight

### Parameters
#### Query Parameters
- **color** (string) - Required - The color of the highlight to toggle.

### Request Example
```json
{
  "color": "yellow"
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates the success of the operation.

#### Response Example
```json
{
  "status": "highlight toggled"
}
```

## unsetHighlight

### Description
Un-sets text highlight with a specified color.

### Method
POST

### Endpoint
/10play/10tap-editor/unsetHighlight

### Parameters
#### Query Parameters
- **color** (string) - Required - The color of the highlight to unset.

### Request Example
```json
{
  "color": "yellow"
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates the success of the operation.

#### Response Example
```json
{
  "status": "highlight unset"
}
```
```

--------------------------------

### Update iOS Pods after Dependency Changes

Source: https://github.com/10play/10tap-editor/blob/main/website/versioned_docs/version-1.0/migrations/v1.0.md

Command to update the iOS project's pods after changing dependencies. This ensures that native modules are correctly linked for iOS.

```bash
cd ios && pod install
```