Read only mode

[mandrade2]

Hey! I'd like to implement a bridge (or add options to an existing one) to be able to turn on/off the readonly mode of the editor. Is this something you have a preference on how to implement?

Right now I am currently rendering the html on a webview with all my css manually copied in it. So it'd be cool to hand a prop on the react native side to the editor to enable/disable it.

[17Amir17]

Hey @mandrade2 ! This is 100% needed, I think in simpleWebEditor we can pass options to tenTenTap which gets used in TipTaps useEditor which has an editable prop https://tiptap.dev/docs/editor/api/editor#editable.

We would need it to be reactive and have a state in simpleWebEditor and pass it forward. Also as this is a core feature should be in the core bridge

[prathameshkurunkar7]

Is this implemented so far? If I am assuming correctly, will this help in rendering rich text on a screen in react native?

[17Amir17]

@mandrade2 are you planing on implementing? If not I can do this this week. @prathameshkurunkar7 yup that would work assuming we support the html you are pasting

[mandrade2]

@17Amir17 I have an implementation that I just need to test. I've been trying to test this night but now I am getting this error.

error: SyntaxError in ../src/simpleWebEditor/build/editorHtml.ts: /Users/matias/Projects/10tap-fork/src/simpleWebEditor/build/editorHtml.ts: Expecting Unicode escape sequence \uXXXX. (36:31)

  34 | \`+xe[ot].replace(" at new "," at ");return C.displayName&&pt.includes("<anonymous>")&&(pt=pt.replace("<anonymous>",C.displayName)),typeof C=="function"&&ks.set(C,pt).....
  35 |
> 36 | Check the render method of \\`\`+C+"\`."}return""}function we(C){if(C!==void 0){var M=C.fileName.replace(/^.*[\\\/]/,""),B=C.lineNumber;return\`
     |                                ^
  37 |
  38 | Check your code at \`+M+":"+B+"."}return""}function cf(C){return C!=null?we(C.__source):""}var wn={};function No(C){var M=ru();if(!M){var B=typeof C=="string"?C:C.displayName||C.name;B&&(M=\`
  39 |

I installed the pods and followed the directions on the contributing doc. Running yarn editor:build works well and outputs no warning. It is when running the app that metro seems to pick this up. I'm on a Mac m1. I remember seeing this kinds of issues when setting up the advanced editor for my app but don't remember how I fixed it. Will give it another go when I'm fresh in the morning

[17Amir17]

Not sure about this error, but since this has been requested for a while I think I'll give it a quick shot

[17Amir17]

Released in v0.5.0 🥳

You can do this with the editable param https://10play.github.io/10tap-editor/docs/api/useEditorBridge#editable Or with editor.setEditable https://10play.github.io/10tap-editor/docs/api/EditorBridge#seteditable

[mandrade2]

@17Amir17 I have an implementation that I just need to test. I've been trying to test this night but now I am getting this error.

error: SyntaxError in ../src/simpleWebEditor/build/editorHtml.ts: /Users/matias/Projects/10tap-fork/src/simpleWebEditor/build/editorHtml.ts: Expecting Unicode escape sequence \uXXXX. (36:31)

  34 | \`+xe[ot].replace(" at new "," at ");return C.displayName&&pt.includes("<anonymous>")&&(pt=pt.replace("<anonymous>",C.displayName)),typeof C=="function"&&ks.set(C,pt).....
  35 |
> 36 | Check the render method of \\`\`+C+"\`."}return""}function we(C){if(C!==void 0){var M=C.fileName.replace(/^.*[\\\/]/,""),B=C.lineNumber;return\`
     |                                ^
  37 |
  38 | Check your code at \`+M+":"+B+"."}return""}function cf(C){return C!=null?we(C.__source):""}var wn={};function No(C){var M=ru();if(!M){var B=typeof C=="string"?C:C.displayName||C.name;B&&(M=\`
  39 |

I installed the pods and followed the directions on the contributing doc. Running yarn editor:build works well and outputs no warning. It is when running the app that metro seems to pick this up. I'm on a Mac m1. I remember seeing this kinds of issues when setting up the advanced editor for my app but don't remember how I fixed it. Will give it another go when I'm fresh in the morning

If anyone is seeing this error while using the advanced setup, it is because i was running the vite build for development. When i run it for production with NODE_ENV=production yarn editor:build then everything works as expected. Spent quite some time on vite, esbuild and rollup to find this.