style(hyper-link): add mark hyper link underline style. (#525)

Author: jaywcjlove

extensions/hyper-link/src/index.ts

@@ -81,6 +81,7 @@ const linkDecorator = (
       const start = to,
         end = to;
       const linkIcon = new HyperLinkIcon({ at: start, url: urlStr, anchor });
+      add(from, to, Decoration.mark({ class: 'cm-hyper-link-underline' }));
       add(start, end, Decoration.widget({ widget: linkIcon, side: 1 }));
     },
   });
@@ -130,6 +131,9 @@ export const hyperLinkStyle = EditorView.baseTheme({
   '.cm-hyper-link-icon svg': {
     display: 'block',
   },
+  '.cm-hyper-link-underline': {
+    textDecoration: 'underline',
+  },
 });
 
 export const hyperLink: Extension = [hyperLinkExtension(), hyperLinkStyle];

www/src/pages/extensions/hyper-link/example.tsx

@@ -11,7 +11,7 @@ import { PageWarpper } from '..';
 //     regexp: /codemirror/gi,
 //     match: { codemirror: 'https://google.com' },
 //     handle: (value, input, from, to) => {
-//       if (value === 'Hyper') return 'https://google.com';
+//       if (value === 'codemirror') return 'https://google.com';
 //       return value;
 //     },
 //   }),
@@ -20,7 +20,6 @@ import { PageWarpper } from '..';
 
 export const HyperLinkExample = () => {
   const { theme } = useTheme();
-
   return (
     <PageWarpper>
       <CodeMirror