Merge pull request #9 from 10play/guy353/rnr-21-placeholder-bridge

feat: add placeholder
10play · Feb 6, 2024 · d771669 · d771669
2 parents e9d8fb8 + 582977d
commit d771669
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 3 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -135,9 +135,9 @@ jobs:
         with:
           path: |
             **/ios/Pods
-          key: ${{ runner.os }}-cocoapods-${{ hashFiles('example/ios/Podfile.lock') }}
+          key: ${{ runner.os }}-cocoapods-v2-${{ hashFiles('example/ios/Podfile.lock') }}
           restore-keys: |
-            ${{ runner.os }}-cocoapods-
+            ${{ runner.os }}-cocoapods-v2-
 
       - name: Install cocoapods
         if: env.turbo_cache_hit != 1 && steps.cocoapods-cache.outputs.cache-hit != 'true'

diff --git a/example/src/Examples/Basic.tsx b/example/src/Examples/Basic.tsx
@@ -13,6 +13,7 @@ import {
   HighlightBridge,
   ImageBridge,
   LinkBridge,
+  PlaceholderBridge,
   RichText,
   TaskListBridge,
   TenTapStartKit,
@@ -44,6 +45,7 @@ export const Basic = ({}: NativeStackScreenProps<any, any, any>) => {
       UnderlineBridge,
       ImageBridge,
       TaskListBridge,
+      PlaceholderBridge.configure({ placeholder: 'Type something...' }),
       LinkBridge.configure({ openOnClick: false }),
       ColorBridge,
       HighlightBridge,
@@ -55,7 +57,7 @@ export const Basic = ({}: NativeStackScreenProps<any, any, any>) => {
   return (
     <SafeAreaView style={exampleStyles.fullScreen} ref={TapRef}>
       <View style={exampleStyles.fullScreen}>
-        <RichText avoidIosKeyboard editor={editor} autofocus />
+        <RichText avoidIosKeyboard editor={editor} DEV autofocus />
       </View>
       <KeyboardAvoidingView
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}

diff --git a/package.json b/package.json
@@ -181,6 +181,7 @@
     "@tiptap/extension-highlight": "^2.1.16",
     "@tiptap/extension-image": "^2.2.1",
     "@tiptap/extension-link": "^2.1.16",
+    "@tiptap/extension-placeholder": "^2.2.1",
     "@tiptap/extension-task-item": "^2.1.16",
     "@tiptap/extension-task-list": "^2.1.16",
     "@tiptap/extension-text-style": "^2.1.16",

diff --git a/src/bridges/placeholder.ts b/src/bridges/placeholder.ts
@@ -0,0 +1,27 @@
+import Placeholder from '@tiptap/extension-placeholder';
+import TenTapBridge from './base';
+
+type PlaceholderEditorState = {};
+
+type PlaceholderEditorInstance = {};
+
+declare module '../types/EditorNativeState' {
+  interface EditorNativeState extends PlaceholderEditorState {}
+  interface EditorInstance extends PlaceholderEditorInstance {}
+}
+
+export const PlaceholderBridge = new TenTapBridge<
+  PlaceholderEditorState,
+  PlaceholderEditorInstance
+>({
+  tiptapExtension: Placeholder,
+  extendCSS: `
+    .is-editor-empty:first-child::before {
+        color: #adb5bd;
+        content: attr(data-placeholder);
+        float: left;
+        height: 0;
+        pointer-events: none;
+    }
+  `,
+});
diff --git a/src/index.tsx b/src/index.tsx
@@ -8,6 +8,7 @@ export * from './bridges/tasklist';
 export * from './bridges/link';
 export * from './bridges/color';
 export * from './bridges/highlight';
+export * from './bridges/placeholder';
 export * from './bridges/core';
 export * from './bridges/image';
 export * from './types';

diff --git a/src/simpleWebEditor/Tiptap.tsx b/src/simpleWebEditor/Tiptap.tsx
@@ -9,6 +9,7 @@ import { ColorBridge } from '../bridges/color';
 import { HighlightBridge } from '../bridges/highlight';
 import { CoreBridge } from '../bridges/core';
 import { ImageBridge } from '../bridges/image';
+import { PlaceholderBridge } from '../bridges/placeholder';
 
 let tenTapExtensions = [
   TenTapStartKit,
@@ -19,6 +20,7 @@ let tenTapExtensions = [
   ColorBridge,
   HighlightBridge,
   CoreBridge,
+  PlaceholderBridge,
 ].filter(
   (e) => !window.whiteListPlugins || window.whiteListPlugins.includes(e.name)
 );

diff --git a/yarn.lock b/yarn.lock
@@ -4813,6 +4813,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tiptap/extension-placeholder@npm:^2.2.1":
+  version: 2.2.1
+  resolution: "@tiptap/extension-placeholder@npm:2.2.1"
+  peerDependencies:
+    "@tiptap/core": ^2.0.0
+    "@tiptap/pm": ^2.0.0
+  checksum: cec29ec2a6d94800ec00e42e89cae8d18facc6fb4a2029c95f3c5bf78cccfca65c6eac7f366bc13c8e52a5192fd8afa412a6db73ca35adf136260870e8d73046
+  languageName: node
+  linkType: hard
+
 "@tiptap/extension-strike@npm:^2.1.16":
   version: 2.1.16
   resolution: "@tiptap/extension-strike@npm:2.1.16"
@@ -19551,6 +19561,7 @@ __metadata:
     "@tiptap/extension-highlight": ^2.1.16
     "@tiptap/extension-image": ^2.2.1
     "@tiptap/extension-link": ^2.1.16
+    "@tiptap/extension-placeholder": ^2.2.1
     "@tiptap/extension-task-item": ^2.1.16
     "@tiptap/extension-task-list": ^2.1.16
     "@tiptap/extension-text-style": ^2.1.16