anyone in production using Tiptap for react Native (mobile and Web)

[jk-baseer]

We are doing R&D with slate and tiptap for a editor to write rich content. But we have cross channel apps. It would be cool if we invest time which can be used across both react native and reactjs.

[dohomi]

I'd love support for react-native as well 👍 There isn't any lib out there at the moment.

[TsotosA]

Yeah, react native support would be great!
Have been trying to hack something with webview but no success 🙁

[amkayondo]

I am currently working on a text editor app using tiptap on the web, so because there is no support for react native, I am using react-native-pell-rich-editor to get user input but the issue is that html is returned as the result. So i reverse engineered the convert to JSON of tiptap and was successful but doing the reverse to Html is still a problem. Here is the repo to the solution i made to convert the HTML to tiptap like JSON format for uniformity between the web and mobile https://github.com/amkayondo/tiptap-react-native-helpers
contributions are welcome :)

[zenyui]

@jk-baseer @dohomi @TsotosA yes! my team uses the TipTap editor in our CMS. We render the JSON payload (read only) in the web and react native clients. We wrote a small library to do this, and we just open sourced it :)

https://github.com/troop-dev/tiptap-react-render

[prathameshkurunkar7]

@davidtjones02 Can you provide an example for an inline code or a code block, how can these be shown using tiptap-react-renderer?

[davidtjones02]

Hey @prathameshkurunkar7 here's how I'd approach it.

Packages like "react-syntax-highlighter" support highlighting syntax so we can use the power of that plus it's custom renderer function to bridge it with react native.

Then using the "tiptap-react-render" we can create a new node handler for "codeBlock"

Here's a very basic example.

// App.tsx
const custom_content = {
  type: "doc",
  content: [
    {
      type: "codeBlock",
      attrs: {
        language: "javascript",
      },
      content: [
        {
          type: "text",
          text: 'for (var i=1; i <= 20; i++)\n{\n  if (i % 15 == 0)\n    console.log("FizzBuzz");\n  else if (i % 3 == 0)\n    console.log("Fizz");\n  else if (i % 5 == 0)\n    console.log("Buzz");\n  else\n    console.log(i);\n}',
        },
      ],
    },
  ],
};

const App = () => {
 return (
    <View
      style={{
        padding: 5,
        paddingTop: 50,
      }}
    >
      <TipTapView node={test_content} />
    </View>
  );
}

// TipTapView.tsx
import {
  TipTapRender,
  NodeHandlers,
  NodeHandler,
} from "@troop.com/tiptap-react-render";
import SyntaxHighlighter from "./SyntaxHighligher";

const Doc: NodeHandler = ({ children }) => <>{children}</>;

const CodeblockNode: NodeHandler = ({ node }) => {
  if (!node.content) return <></>;

  const [{ text }] = node.content;

  return (
    <SyntaxHighlighter
      language={(node?.attrs?.language as string) ?? undefined}
      highlighter={"prism" || "hljs"}
    >
      {text}
    </SyntaxHighlighter>
  );
};

const TipTapView = ({
  node = {
    type: "doc",
  },
}) => {
  const handlers: NodeHandlers = {
    doc: Doc,
    codeBlock: CodeblockNode,
  };

  return <TipTapRender handlers={handlers} node={node} />;
};

export default TipTapView

Syntax Highlighter (Click to expand)

// SyntaxHighlighter.tsx (curtsey of https://github.com/conorhastings/react-native-syntax-highlighter/issues/26#issuecomment-780905175 slightly modified)

import * as React from "react";
import { Text, TextStyle, View } from "react-native";
import Highlighter, { SyntaxHighlighterProps } from "react-syntax-highlighter";
import { tomorrowNight as darkStyle } from "react-syntax-highlighter/dist/esm/styles/hljs";

type Node = {
  children?: Node[];
  properties?: {
    className: string[];
  };
  tagName?: string;
  type: string;
  value?: string;
};

type StyleSheet = { [key: string]: TextStyle };

type RendererParams = {
  rows: Node[];
  stylesheet: StyleSheet;
};

export const SyntaxHighlighter: React.FunctionComponent<
  SyntaxHighlighterProps
> = (props) => {
  const cleanStyle = (style: TextStyle) => {
    const clean: TextStyle = {
      ...style,
      display: undefined,
    };
    return clean;
  };

  const stylesheet: StyleSheet = Object.fromEntries(
    Object.entries(darkStyle as StyleSheet).map(([className, style]) => [
      className,
      cleanStyle(style),
    ])
  );

  const renderNode = (nodes: Node[], key = "0") =>
    nodes.reduce<React.ReactNode[]>((acc, node, index) => {
      if (node.children) {
        acc.push(
          <Text
            key={`${key}.${index}`}
            style={[
              {
                color: stylesheet.hljs.color,
              },
              ...(node.properties?.className || []).map((c) => stylesheet[c]),
              {
                fontSize: 14,
                fontFamily: "monospace",
              },
            ]}
          >
            {renderNode(node.children, `${key}.${index}`)}
          </Text>
        );
      }

      if (node.value) {
        acc.push(node.value);
      }

      return acc;
    }, []);

  const nativeRenderer = ({ rows }: RendererParams): React.ReactNode => {
    return (
      <View
        style={[
          stylesheet.hljs,
          { backgroundColor: "#000", padding: 16, borderRadius: 5 },
        ]}
      >
        {renderNode(rows)}
      </View>
    );
  };

  return (
    <Highlighter
      {...props}
      CodeTag={View}
      customStyle={{
        padding: 0,
      }}
      PreTag={View}
      // Quick and dirty hack. You would want to add proper types here most likely via a d.ts file
      renderer={nativeRenderer as unknown as SyntaxHighlighterProps["renderer"]}
      style={stylesheet as unknown as SyntaxHighlighterProps["style"]}
    />
  );
};

export default SyntaxHighlighter;

And voila! ✨ You'll most likely need to adjust various things to your need but the TLDR of it is to take the codeblock and render it with a syntax highlight.

[prathameshkurunkar7]

@davidtjones02 That's super insightful, thanks a lot! Great Help!!🤩

[EricZeiberg]

How would you implement a handler for Heading? Having trouble passing the styles to the children

[davidtjones02]

Hey @EricZeiberg,

You might've figured it out by now. But happy to help if I can, what are you trying to achieve? What styles are you looking to pass to the children? Text components should already inherit most of their parents styles. Basic example:

Code (Click to expand)

import React from "react";
import {
  TipTapRender,
  NodeHandlers,
  NodeHandler,
  TipTapNode,
} from "@troop.com/tiptap-react-render";
import { Text, TextStyle, ScrollView } from "react-native";

const Doc: NodeHandler = ({ children }) => <>{children}</>;
const Paragraph: NodeHandler = ({ children }) => {
  const content = React.Children.toArray(children);
  return <Text selectable>{content.length ? children : "\n"}</Text>;
};
const TextNode: NodeHandler = ({ node }) => {
  const { marks, text } = node;

  const style: TextStyle = marks?.reduce(
    (acc, mark) => {
      switch (mark.type) {
        case "bold":
          return { ...acc, fontWeight: "bold" };
        case "italic":
          return { ...acc, fontStyle: "italic" };
        case "underline":
          return { ...acc, textDecorationLine: "underline" };
        case "textStyle":
          return mark.attrs?.color ? { ...acc, color: mark.attrs.color } : acc;
        default:
          return acc;
      }
    },
    {
      fontWeight: "normal",
      fontStyle: "normal",
      textDecorationLine: "none",
      color: "black",
    }
  );

  return <Text style={style}>{text}</Text>;
};

interface NodeHeaderAttributes extends Required<Pick<TipTapNode, "attrs">> {
  level: number;
}

const Heading: NodeHandler = ({ node, children }) => {
  const { level } = node.attrs as NodeHeaderAttributes;

  let fontSize;

  switch (level) {
    case 1:
      fontSize = 32;
      break;
    case 2:
      fontSize = 28;
      break;
    case 3:
      fontSize = 24;
      break;
    default:
      fontSize = 20;
      break;
  }

  return <Text style={{ fontSize, fontWeight: "bold" }}>{children}</Text>;
};

const handlers: NodeHandlers = {
  doc: Doc,
  text: TextNode,
  paragraph: Paragraph,
  heading: Heading,
};

const nodeData = {
  type: "doc",
  from: 0,
  to: 48,
  content: [
    {
      type: "heading",
      from: 0,
      to: 11,
      attrs: {
        level: 1,
      },
      content: [
        {
          type: "text",
          from: 1,
          to: 10,
          text: "Heading 1",
          marks: [
            {
              type: "textStyle",
              attrs: {
                color: "blue",
              },
            },
          ],
        },
        {
          type: "text",
          from: 1,
          to: 10,
          text: " Heading 1 color 2",
          marks: [
            {
              type: "bold",
            },
          ],
        },
      ],
    },
    {
      type: "heading",
      from: 11,
      to: 22,
      attrs: {
        level: 2,
      },
      content: [
        {
          type: "text",
          from: 12,
          to: 21,
          text: "Heading 2",
          marks: [
            {
              type: "textStyle",
              attrs: {
                color: "red",
              },
            },
          ],
        },
      ],
    },
    {
      type: "heading",
      from: 22,
      to: 33,
      attrs: {
        level: 3,
      },
      content: [
        {
          type: "text",
          from: 23,
          to: 32,
          text: "Heading 3",
          marks: [
            {
              type: "textStyle",
              attrs: {
                color: "green",
              },
            },
            {
              type: "textStyle",
              attrs: {
                color: "green",
              },
            },
          ],
        },
      ],
    },
    {
      type: "heading",
      from: 22,
      to: 33,
      attrs: {
        level: 3,
      },
      content: [
        {
          type: "text",
          from: 23,
          to: 32,
          text: "Heading 3",
          marks: [
            {
              type: "textStyle",
              attrs: {
                color: "green",
              },
            },
          ],
        },
        {
          type: "heading",
          from: 22,
          to: 33,
          attrs: {
            level: 2,
          },
          content: [
            {
              type: "text",
              from: 23,
              to: 32,
              text: " Heading 2",
              marks: [
                {
                  type: "textStyle",
                  attrs: {
                    color: "indigo",
                  },
                },
                {
                  type: "underline",
                },
              ],
            },
          ],
        },
      ],
    },
    {
      type: "paragraph",
      from: 33,
      to: 46,
      content: [
        {
          type: "text",
          from: 34,
          to: 45,
          text: "Normal text",
        },
      ],
    },
  ],
};

const TipTapView = () => {
  return (
    <ScrollView style={{ padding: 5 }}>
      <TipTapRender handlers={handlers} node={nodeData} />
    </ScrollView>
  );
};

export default TipTapView;

Result:

[joelrojo]

I took a similar approach to @amkayondo and ended up writing similar helper utils. Seems to be working well so far with my specific schema using TipTap on web (react) and react-native-pell-rich-editor in the react-native app.

Here is the gist with relevant files: https://gist.github.com/joelrojo/ebf8ed6ded0339b780a446f4f1280edf

I also incorporated ideas from the TipTap lib itself from this discussion: https://discuss.prosemirror.net/t/can-i-convert-a-random-html-into-prosemirror-json-doc/3985/4

Would be great to wrap TipTap in a webview and just use TipTap directly instead, if anyone ever figures out a solution. @philippkuehn anyone from the tiptap team have any ideas?

[amkayondo]

Awesome

[amkayondo]

How is it now

[joelrojo]

Works well for our needs for now, but we don't have any custom extensions

[BrianMagus]

So, before I pour hours into it, some of the comments here seem to suggest that one problem is rendering the JSON content in react native, or via WKWebView? My desktop version that I’m trying to start porting to iOS soon, mainly for iPad, is using html content rather than JSON. Should it work better in that case, or is the library just fundamentally incompatible with react native at the moment? Using another editor is probably fine but I’ve got about a dozen custom extensions for TipTap at this point. 😅

[joelrojo]

Not sure if it's a problem with rendering in a WebView, as I haven't tried that solution yet. I'm still fairly new to react native so was just trying to get a quick solution for the time being.

[nstfkc]

For anyone who is trying to find a solution for this, I created a repo showcases an example implementation using react-native-webview. https://github.com/nstfkc/tiptap-react-native-example

And I wrote a blog post explains the implementation. I hope you find it useful.
https://nstfkc-com.vercel.app/blog/how-to-implement-rich-text-editor-with-tiptap-on-react-native

[nstfkc]

Hey sorry mate here is the new link https://nstfkc-com.vercel.app/blog/how-to-implement-rich-text-editor-with-tiptap-on-react-native

[nstfkc]

It is hard to tell. Reach out tome me on X I will help you. My handle is @nstfkc

[CarlMenke]

Hey any idea on how to approach using custom fonts with this set up?

[nstfkc]

Try this vite plugin https://github.com/cssninjaStudio/unplugin-fonts/tree/v1.0.0

The idea is to inline the fonts into the html

[ansh]

Your blog post is down @nstfkc

Can you upload it again?

[GuySerfaty]

Hey we are working on an extendable solution for working with Tiptap on react native, the goal of this OS is to give tools for developers to build rich-text editing exp that is aligned with the standard editors for mobile out there (gdocs, notion, dropbox paper etc)

It's still not production-ready but you can start reading our half-bake doc:
https://10play.github.io/10tap-editor/docs/intro.html

and see a demo here:
https://x.com/10play_software/status/1757397873988162013?s=20

[CarlMenke]

The examples are really great! Sorry for all the questions but one more, how does it handle the keyboard? I'm implementing one currently similar to this one: https://github.com/nstfkc/tiptap-react-native-example and one of the initial struggles was making the keyboard avoid the cursor

[GuySerfaty]

no problem :), by saying

making the keyboard avoid the cursor

you meant that when the keyboard is up it hides the cursor? if so this is one of the things we solve on our lib, so if you will use the lib it will solve it for you

[RayBans2111]

Howdy, cool library! I am playing around with it at the moment in my expo app. Is it possible to attach images yet? Or is that a feature for later?

[GuySerfaty]

Howdy, cool library! I am playing around with it at the moment in my expo app. Is it possible to attach images yet? Or is that a feature for later?

It's possible, the 'ImageBridge' is part of the default bridge extensions, so if you use the simple usage you can setImage from the editorBridge instance.

You can send me an email if you want more details/help: [email protected]

[mandrade2]

This is so cool! Just read most of the docs and it seems to be just what I needed. Going for the advanced setup. Implementing it for my app right now