@rulab/adminjs-components 0.0.11 → 0.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rulab/adminjs-components",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -24,8 +24,11 @@
     "@editorjs/header": "^2.8.7",
     "@editorjs/list": "^1.9.0",
     "@editorjs/paragraph": "^2.11.6",
+    "@editorjs/quote": "^2.7.2",
+    "@editorjs/table": "^2.4.1",
     "adminjs": "^7.8.1",
     "chroma-js": "^3.0.0",
+    "editorjs-audio-player": "^0.0.3",
     "editorjs-html": "^3.4.3",
     "react": "^18.2.0",
     "react-select": "^5.8.0",

package/src/components/Editor/EditorList.jsx

@@ -1,9 +1,8 @@
 import React from "react";
-import { ThemeProvider } from "styled-components";
-import { theme } from "@adminjs/design-system";
 
+import { theme } from "@adminjs/design-system";
+import { ThemeProvider } from "styled-components";
 import { parseHtml } from "../../utils/parseHtml";
-
 import { StyledEditorViewWrapper } from "./styles";
 
 const EditorList = ({ property, record }) => {

package/src/components/Editor/config.ts

@@ -1,6 +1,10 @@
 import Header from "@editorjs/header";
-import Paragraph from "@editorjs/paragraph";
 import List from "@editorjs/list";
+import Paragraph from "@editorjs/paragraph";
+import Quote from "@editorjs/quote";
+import Table from "@editorjs/table";
+// @ts-ignore
+import AudioPlayer from "editorjs-audio-player";
 
 export const EDITOR_TOOLS = {
   paragraph: {
@@ -8,5 +12,15 @@ export const EDITOR_TOOLS = {
     inlineToolbar: true,
   },
   list: List,
-  header: Header,
+  header: {
+    class: Header,
+    config: {
+      placeholder: "Enter a header",
+      levels: [2, 3, 4],
+      defaultLevel: 2,
+    },
+  },
+  table: Table,
+  quote: Quote,
+  audioPlayer: AudioPlayer,
 };

package/src/components/Editor/styles.ts

@@ -55,6 +55,34 @@ export const StyledEditorViewWrapper = styled(Box)`
   ul {
     list-style: inherit;
   }
+
+  table,
+  audio {
+    margin: 16px 0;
+  }
+
+  table,
+  th,
+  td {
+    border: 1px solid;
+  }
+
+  th {
+    font-weight: bold;
+  }
+
+  th,
+  td {
+    padding: 4px;
+  }
+
+  blockquote {
+    display: block;
+    padding: 5px 8px;
+    width: fit-content;
+    border-radius: 4px;
+    background-color: #e6e6e6;
+  }
 `;
 
 export const StyledEditorShowWrapper = styled(StyledEditorViewWrapper)`
@@ -62,11 +90,17 @@ export const StyledEditorShowWrapper = styled(StyledEditorViewWrapper)`
 `;
 
 export const StyledEditor = styled.div`
+  audio,
   .cdx-block,
   .ce-header {
     padding-left: 58px;
   }
 
+  input {
+    margin-left: 58px;
+    width: auto;
+  }
+
   .cdx-list {
     padding-left: 85px;
   }

package/src/index.ts

@@ -1 +1,2 @@
 export * from "./components/index.js";
+export { parseHtml } from "./utils/parseHtml.js";

package/src/utils/index.ts

@@ -1 +1,3 @@
+export { parseHtml } from "./parseHtml.js";
 export { slugifyTitle } from "./slugifyTitle.js";
+

package/src/utils/parseHtml.ts

@@ -1,12 +1,56 @@
 import edjsHTML from "editorjs-html";
 
-export const parseHtml = (jsonData?: string) => {
-  const edjsParser = edjsHTML();
+type TableBlockType = {
+  type: "table";
+  data: {
+    content: string[][];
+    withHeadings: boolean;
+  };
+};
+
+type AudioPlayerBlockType = {
+  type: "audioPlayer";
+  data: {
+    src: string;
+  };
+};
+
+const tableParser = (block: TableBlockType) => {
+  const rows = block.data.content.map((row, index) => {
+    const tableHtml = [];
+    if (block.data.withHeadings && index === 0) {
+      tableHtml.push(`<tr>${row.map((cell) => `<th>${cell}</th>`)}</tr>`);
+    } else {
+      tableHtml.push(`<tr>${row.map((cell) => `<td>${cell}</td>`)}</tr>`);
+    }
+
+    return tableHtml;
+  });
+
+  if (block.data.withHeadings) {
+    const heading = rows[0] as string[];
+    const [, ...content] = rows;
+
+    return `<table><thead>${heading.join("")}</thead><tbody>${content.join("")}</tbody></table>`;
+  } else {
+    return `<table><tbody>${rows.join("")}</tbody></table>`;
+  }
+};
+
+const audioPlayerParser = (block: AudioPlayerBlockType) => {
+  return `<audio controls src={${block.data.src}} />`;
+};
+
+export const parseHtml = (jsonData: string) => {
+  const edjsParser = edjsHTML({
+    table: tableParser,
+    audioPlayer: audioPlayerParser,
+  });
 
   try {
-    const data = edjsParser.parse(JSON.parse(String(jsonData)));
+    const data = edjsParser.parse(JSON.parse(jsonData));
     return String(data).replace(/>,</g, "><");
   } catch (e) {
-    return;
+    console.log("error", e);
   }
 };