how can I make a richtext editor to preserve attributes and tags of my choice in react-native, 10play/tentap(tiptap))

a lot of commenting because I was trying out other methods but that is the current code. it does not preserve the tags or attributes but if I use HighlightBridge, the mark tag would be preserved, been on this issue for some days now

    const editor = useEditorBridge({        autofocus: true,        avoidIosKeyboard: true,        initialContent,        // customSource: editorHtml,        bridgeExtensions: [            BoldBridge,            HeadingBridge,            ItalicBridge,            UnderlineBridge,            BulletListBridge,            HistoryBridge,            HighlightBridge,            CoreBridge.configureCSS(NoteEditorCSS),            ScriptureBridge,        ],

 export const Scripture = Mark.create<ScriptureOptions>({//  name: "scripture",//  addOptions() {//      return {//          HTMLAttributes: {},//      };//  },//  addAttributes() {//      return {//          "data-id": {//              default: null,//              parseHTML: element => element.getAttribute("data-id"),//              renderHTML: attributes => {//                  if (!attributes["data-id"]) {//                      return {};//                  }//                  return {//                      "data-id": attributes["data-id"],//                  };//              },//          },//          "data-type": {//              default: null,//              parseHTML: element => element.getAttribute("data-type"),//              renderHTML: attributes => {//                  if (!attributes["data-type"]) {//                      return {};//                  }//                  return {//                      "data-type": attributes["data-type"],//                  };//              },//          },//          style: {//              default: null,//              // parseHTML: element => element.getAttribute("style"),//              renderHTML: attributes => {//                  if (attributes.style) {//                      return {//                          "data-style": attributes.style,//                          style: attributes.style,//                      };//                  }//                  return {//                      "data-style"://                          "color: #AF9DF1; background-color: #1C1C1C; border-width: 1px; border-radius: 4px; border-color: #FFFFFF; padding: 1px 4px 1px 4px;",//                      style://                          "color: #AF9DF1; background-color: #1C1C1C; border-width: 1px; border-radius: 4px; border-color: #FFFFFF; padding: 1px 4px 1px 4px;",//                  };//              },//          },//      };//  },//  parseHTML() {//      return [//          {//              tag: `span[data-type="${this.name}"]`,//          },//      ];//  },//  renderHTML({ HTMLAttributes }) {//      return [//          "span",//          mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),//          0,//      ];//  },// });

export const ScriptureBridge = new BridgeExtension<//  ScriptureEditorState,//  ScriptureEditorInstance,//  ScriptureMessage// >({//  tiptapExtension: Scripture,//  tiptapExtensionDeps: [TextStyle],//  onBridgeMessage: (editor, { type, payload }) => {//      console.log(//          "ScriptureBridge.onBridgeMessage " + type +" " + payload +" " + editor//      );//      return false;//  },//  extendEditorInstance: sendBridgeMessage => {//      return {//          viewScripture(id) {//              sendBridgeMessage({//                  type: ScriptureEditorActionType.ViewScripture,//                  payload: id,//              });//          },//      };//  },//  extendEditorState(editor) {//      return {};//  },// });

I tried to write my own scripture bridge to preserve span tag and data-id, data-type attribute and add a style of my choice.