Feat/paste code (#88)

* feat: paste code

* feat: paste bold and italic

* fix: escape error

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

@@ -0,0 +1,99 @@
+import { describe, expect, it } from "vitest";
+import { TextBlock } from "./textBlock";
+import { HTMLConverter } from "@pkg/helper/htmlConverter";
+import { makeDefaultIdGenerator } from "@pkg/helper/idHelper";
+import { type BlockDataElement, EditorController } from "..";
+
+function parseHTML(content: string): BlockDataElement {
+  const idGenerator = makeDefaultIdGenerator();
+  const htmlConverter = new HTMLConverter({
+    idGenerator,
+  });
+  const editorController = new EditorController("user");
+
+  const container = document.createElement("div");
+  container.innerHTML = content;
+
+  const data = TextBlock.getTextElementFromDOM(
+    editorController,
+    container.firstChild as HTMLElement,
+    htmlConverter
+  );
+  return data;
+}
+
+describe("TextBlock", () => {
+  it("define", () => {
+    expect(TextBlock.Name).toBe("Text");
+  });
+
+  it("paste", () => {
+    const data = parseHTML("<p>hello</p>");
+
+    expect(data.t).equals("Text");
+
+    const textContent = data.getTextModel("textContent");
+    expect(textContent?.delta.ops).deep.equals([
+      {
+        insert: "hello",
+      },
+    ]);
+  });
+
+  it("paste code", () => {
+    const data = parseHTML("<p>hello <code>world</code></p>");
+
+    expect(data.t).equals("Text");
+
+    const textContent = data.getTextModel("textContent");
+    expect(textContent?.delta.ops).deep.equals([
+      {
+        insert: "hello ",
+      },
+      {
+        insert: "world",
+        attributes: {
+          code: true,
+        },
+      },
+    ]);
+  });
+
+  it("paste bold", () => {
+    const data = parseHTML("<p>hello <b>world</b></p>");
+
+    expect(data.t).equals("Text");
+
+    const textContent = data.getTextModel("textContent");
+    expect(textContent?.delta.ops).deep.equals([
+      {
+        insert: "hello ",
+      },
+      {
+        insert: "world",
+        attributes: {
+          bold: true,
+        },
+      },
+    ]);
+  });
+
+  it("paste italic", () => {
+    const data = parseHTML("<p>hello <i>world</i></p>");
+
+    expect(data.t).equals("Text");
+
+    const textContent = data.getTextModel("textContent");
+    expect(textContent?.delta.ops).deep.equals([
+      {
+        insert: "hello ",
+      },
+      {
+        insert: "world",
+        attributes: {
+          italic: true,
+        },
+      },
+    ]);
+  });
+});

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

@@ -117,7 +117,7 @@ export class TextBlock extends ContentBlock {
     node: container,
     converter,
   }: BlockPasteEvent): BlockDataElement | undefined {
-    return TextBlock.#getTextElementFromDOM(
+    return TextBlock.getTextElementFromDOM(
       editorController,
       container,
       converter
@@ -127,7 +127,7 @@ export class TextBlock extends ContentBlock {
   /**
    * Rebuild the data structure from the pasted html.
    */
-  static #getTextElementFromDOM(
+  static getTextElementFromDOM(
     editorController: EditorController,
     node: HTMLElement,
     converter: HTMLConverter
@@ -158,7 +158,20 @@ export class TextBlock extends ContentBlock {
         if (childPtr instanceof Text) {
           delta.insert(removeLineBreaks(childPtr.textContent));
         } else if (childPtr instanceof HTMLElement) {
-          if (converter.isContainerElement(childPtr)) {
+          const tagName = childPtr.tagName;
+          if (tagName === "CODE") {
+            delta.insert(removeLineBreaks(childPtr.textContent), {
+              code: true,
+            });
+          } else if (["B", "STRONG"].includes(tagName)) {
+            delta.insert(removeLineBreaks(childPtr.textContent), {
+              bold: true,
+            });
+          } else if (tagName === "I") {
+            delta.insert(removeLineBreaks(childPtr.textContent), {
+              italic: true,
+            });
+          } else if (converter.isContainerElement(childPtr)) {
             const childElements = converter.parseContainerElement(childPtr);
             childrenContainer.push(...childElements);
           } else {

packages/blocky-example/app/readme.ts

@@ -3,7 +3,7 @@ export const ReadMeContent = `
 <h2>Usage</h2>
 <ul>
   <li>Click on the text to input content</li>
-  <li>Type <code>\/</code> to trigger command panel</li>
+  <li>Type <code>/</code> to trigger command panel</li>
   <li>Type <code>@</code> to trigger mention panel</li>
   <li>Drag the handle to re-order the blocks</li>
 </ul>