How to add text before and after Mark?

Hi. I’m new to ProseMirror and I trying to make an editor to inline markdown highlighting.

I’m currently implementing the following actions, but I have a problem.

  1. I want to apply the style of markdown without hiding the mark. like CodeMirror 5 markdown mode. For example, in the text below, the entire ‘This text should be bold’ should be bold style. but I don’t know what to do about this. Can you give me some advice?
**This text should be bold** and *This should be italic*
  1. I’m thinking of a different approach. If there is text <Mark Start>Some Text<Mark End> and when a caret enters the text wrap text with **, and if caret is outside the text, I want to hide wrapper **. I implemented the part to check if there is a carat between Marks with the decorator, but I don’t know how to wrap it in text. This is my plugin code
      new Plugin({
        state: {
          init() {
            return DecorationSet.empty;
          },
          apply(tr, _, prevState, newState) {
            const decorations: Decoration[] = [];
            for (const mark of Object.values(newState.schema.marks)) {
              const isActive = isMarkActive(mark)(prevState);
              if (isActive) {
                tr.doc.nodesBetween(0, tr.doc.nodeSize - 2, (node, pos) => {
                  if (mark.isInSet(node.marks)) {
                    const start = pos + 1;
                    const end = start + node.nodeSize - 2;
                    decorations.push(Decoration.inline(start, end, {}, mark));
                  }
                });
              }
            }
            return DecorationSet.create(tr.doc, decorations);
          }
        },
        props: {
          decorations(editorState) {
            return this.getState(editorState);
          }
        },
      }),

Thanks,

Kuzan