Can I have multiple editor instances?

[adn0n]

So, right now, I'm trying to have multiple notes. I'm also trying to set the initialContent to the saved content in the database. But the editor only seems to be working in one note. It does work if I pass in a custom DEV_SERVER_URL with that note id, but I'm afraid this is going to cause some memory and scalability issues. Is there a better way of doing this?

[mandrade2]

I do have it working when showing multiple editor instances. I am using the advanced setup so I do have some extra Tiptap plugins installed.

On 12-06-2024, at 14:23, Adnan @.***> wrote:



So, right now, I'm trying to have multiple notes. I'm also trying to set the initialContent to the saved content in the database. But the editor only seems to be working in one note. It does work if I pass in a custom DEV_SERVER_URL with that note id, but I'm afraid this is going to cause some memory and scalability issues. Is there a better way of doing this?

— Reply to this email directly, view it on GitHubhttps://github.com/10play/10tap-editor/issues/133, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AD4CJQRQO2KTXCDTIQNVDTDZHCGYLAVCNFSM6AAAAABJG4J2UCVHI2DSMVQWIX3LMV43ASLTON2WKOZSGM2DSNBTGMZDSOI. You are receiving this because you are subscribed to this thread.Message ID: @.***>

[17Amir17]

Hey, TenTap should work with many editor instances, you do need a new editor instance for each editor (useEditor) DEV_SERVER_URL should only be used when developing with the advanced setup.

If no content is being displayed something must have failed inside the web-view could you send us the error? This is how you can inspect web-view logs: https://github.com/react-native-webview/react-native-webview/blob/master/docs/Debugging.md#debugging-webview-contents

[adn0n]

This is the error I get

[17Amir17]

This is the error I get

This error should be fixed on the latest version. What version are you on, could you try updating?

[17Amir17]

Closing for now, lmk if it persists

[adn0n]

Still the same problem, experiencing it quite frequently. I'm using the latest version. Here's the package.json file

  "name": "editor-test",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@10play/tentap-editor": "^0.5.3",
    "@expo/vector-icons": "^14.0.2",
    "@react-native-async-storage/async-storage": "^1.23.1",
    "@react-native-voice/voice": "^3.2.4",
    "@react-navigation/bottom-tabs": "^6.5.20",
    "@react-navigation/native": "^6.1.17",
    "@react-navigation/stack": "^6.3.29",
    "@types/react-native-vector-icons": "^6.4.18",
    "axios": "^1.7.2",
    "lodash": "^4.17.21",
    "moment": "^2.30.1",
    "react": "^18.2.0",
    "react-native": "0.74.1",
    "react-native-gesture-handler": "^2.16.2",
    "react-native-modal": "^13.0.1",
    "react-native-reanimated": "^3.12.0",
    "react-native-safe-area-context": "^4.10.4",
    "react-native-screens": "^3.31.1",
    "react-native-swipe-list": "^0.0.2",
    "react-native-vector-icons": "^10.1.0",
    "react-native-webview": "^13.10.2"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/babel-preset": "0.74.83",
    "@react-native/eslint-config": "0.74.83",
    "@react-native/metro-config": "0.74.83",
    "@react-native/typescript-config": "0.74.83",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.2.0",
    "tailwindcss": "^3.3.2",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}```

[17Amir17]

Could you provide a minimal reproducible example?

[GuySerfaty]

We can see this on very old android devices @adn0n can you verify iOS is working for you?

I see:

Scheme is missing its top node type ('doc')

Might be related to https://github.com/react-native-webview/react-native-webview/issues/1609

[adn0n]

I'm using Android 14 though, could it be related to my Java and Gradle version? I'll try setting up an iOS emulator. Java version: 17 Gradle: 8.6

Here's the code that I'm using:

HomeScreen (most recent note):

const HomeEditor = useEditorBridge({
        autofocus: false,
        initialContent: lastModifiedNote?.content || '',
        editable: false,
    });
    useEffect(() => {
        if (isMounted.current && HomeEditor) {
            HomeEditor.injectCSS(`
                body {
                    font-size: 12px;
                    color: #000;
                }
            `);
            HomeEditor.setContent(lastModifiedNote?.content || '');
        }
    }, [lastModifiedNote, HomeEditor]);
// the react native bit
                        <View style={styles.card}>
                            {HomeEditor && lastModifiedNote ? (
                                <RichText editor={HomeEditor} />
                            ) : (
                                <Text>No notes found</Text>
                            )}
                        </View>

And I have another component called NoteOpen

  var editor = useEditorBridge({
    autofocus: false,
    initialContent: loadedContent,
    onChange() {
      handleEditorChange();
    },
  });
 <RichText editor={editor} />

If I load my HomeScreen component and then go to notes, it never loads - I get

RangeError: Schema is missing its top node type ('doc')
    at hy.compile (about:blank:49:6162)
    at new Cv (about:blank:49:7312)
    at mw (about:blank:56:12761)
    at new jr (about:blank:57:2320)
    at aC.createExtensionManager (about:blank:133:2780)
    at new tC (about:blank:133:890)
    at new aC (about:blank:135:7208)
    at about:blank:135:8207
    at Jl (about:blank:48:24187)
    at Jr (about:blank:48:42189)

(presumably because the other editorBridge is already running?)

[jbernhardt-x-team]

This is the error I get

I'm getting this exact error. I have a FlatList that renders a component that eventually renders a RichText component. I don't have multiple RichText in a single component but I noticed that only on Android some of the RichText rendered in the list throw this error. I have the very basic implementation of the RichText from here

I'm testing on a Pixel 8 Pro running latest Android version.

[17Amir17]

I've found a way to reproduce this consistently. It happens on some androids - I am using Pixel 5 API 32 Android 12L Emulator, and it only happens when reopening the app, and mounting the editor for the first time, will work on a fix

[jbernhardt-x-team]

I've found a way to reproduce this consistently. It happens on some androids - I am using Pixel 5 API 32 Android 12L Emulator, and it only happens when reopening the app, and mounting the editor for the first time, will work on a fix

In case it can by any helpful, I found this thread where an alternative prop is being exposed, I'm going to patch locally and see if I have better results

[17Amir17]

Should be fixed on 0.5.11 - let us know if this solves the case for you - if you are using the advanced setup you will need to update your index.ts https://10play.github.io/10tap-editor/docs/setup/advancedSetup#step-4---add-indexhtml-advancededitortsx-and-indextsx

[adn0n]

Working fine now, thank you!