feat: add link to loro

packages/blocky-core/src/block/textBlock.ts

@@ -110,6 +110,13 @@ export class TextBlock extends ContentBlock {
             delta.insert(removeLineBreaks(childPtr.textContent), {
               italic: true,
             });
+          } else if (tagName === "A") {
+            const href = childPtr.getAttribute("href");
+            if (isString(href)) {
+              delta.insert(removeLineBreaks(childPtr.textContent), {
+                href,
+              });
+            }
           } else if (converter.isContainerElement(childPtr)) {
             const childElements = converter.parseContainerElement(childPtr);
             childrenContainer.push(...childElements);

packages/blocky-example/app/loro/loroBlock.module.scss

@@ -12,6 +12,7 @@
   width: 64px;
   height: 64px;
   margin-bottom: 16px;
+  cursor: pointer;
 }
 
 .buttons {

packages/blocky-example/app/loro/loroBlock.tsx

@@ -20,9 +20,9 @@ function LoroBlock(props: LoroBlockProps) {
   }, []);
   return (
     <div className={styles.container}>
-      <div className={styles.icon}>
+      <a className={styles.icon} href="https://loro.dev/">
         <img src="/LORO.svg" alt="" />
-      </div>
+      </a>
       <div className={styles.buttons}>
         <Button
           variant="contained"

packages/blocky-example/app/loro/loroExample.tsx

@@ -242,10 +242,11 @@ function LoroExample() {
     if (!initDoc) {
       console.log("init doc");
       controller.pasteHTMLAtCursor(
-        `Loro is a high-performance CRDTs library. It's written in Rust and introduced to the browser via WASM, offering incredible performance.
-Blocky can leverage Loro's data syncing capabilities. By using a simple plugin, you can sync the data of the Blocky editor with Loro.
-You can edit this page, and the data will sync to the browser's storage with Loro’s encoding.
-Once you reload the page, the data from the browser will be rendered again.
+        `<p><a href="https://loro.dev/">Loro</a> is a high-performance CRDTs library. It's written in Rust and introduced to the browser via WASM, offering incredible performance.
+ Blocky can leverage Loro's data syncing capabilities. By using a simple plugin, you can sync the data of the Blocky editor with Loro.</p>
+<p>You can edit this page, and the data will sync to the browser's storage with Loro’s encoding.
+ Once you reload the page, the data from the browser will be rendered again.</p>
+<p>The most exciting thing is that we can leverage the character of CRDT to implement collaborative editing. Click the blue button below to try collaborative editing between tabs!</p>
 <div data-type="Loro">Loro</div>`
       );
     }