@rulab/adminjs-components 0.0.10 → 0.0.12

package/dist/index.cjs

@@ -38,7 +38,8 @@ __export(src_exports, {
   EditorList: () => EditorList_default,
   EditorShow: () => EditorShow_default,
   StringList: () => StringList_default,
-  StringListShow: () => StringListShow_default
+  StringListShow: () => StringListShow_default,
+  parseHtml: () => parseHtml
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -150,8 +151,6 @@ var ColorStatusList = ({ property, record }) => {
   const currentOption = property.availableValues?.find(
     (item) => item.value === record.params[property.path]
   );
-  console.log(record, "record");
-  console.log(record.params[property.path], "record.params[property.path]");
   return /* @__PURE__ */ import_react3.default.createElement(ColorStatusBadge, { color: currentOption.color }, record.params[property.path]);
 };
 var ColorStatusList_default = ColorStatusList;
@@ -176,6 +175,42 @@ var slugifyTitle = (title) => {
   });
 };
 
+// src/utils/parseHtml.ts
+var import_editorjs_html = __toESM(require("editorjs-html"), 1);
+var parseHtml = (jsonData) => {
+  function tableParser(block) {
+    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];
+      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) => {
+    return `<audio controls src={${block.data.src}} />`;
+  };
+  const edjsParser = (0, import_editorjs_html.default)({
+    table: tableParser,
+    audioPlayer: audioPlayerParser
+  });
+  try {
+    const data = edjsParser.parse(JSON.parse(jsonData));
+    return String(data).replace(/>,</g, "><");
+  } catch (e) {
+    console.log("error", e);
+  }
+};
+
 // src/components/CustomSlug/styles.ts
 var import_styled_components2 = require("@adminjs/design-system/styled-components");
 var import_design_system = require("@adminjs/design-system");
@@ -284,16 +319,50 @@ var StyledEditorViewWrapper = (0, import_styled_components4.styled)(import_desig
   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: 10px;
+    background-color: #e6e6e6;
+  }
 `;
 var StyledEditorShowWrapper = (0, import_styled_components4.styled)(StyledEditorViewWrapper)`
   margin-bottom: 24px;
 `;
 var StyledEditor = import_styled_components4.styled.div`
+  audio,
   .cdx-block,
   .ce-header {
     padding-left: 58px;
   }
 
+  input {
+    margin-left: 58px;
+    width: auto;
+  }
+
   .cdx-list {
     padding-left: 85px;
   }
@@ -347,13 +416,26 @@ var StyledEditor = import_styled_components4.styled.div`
 var import_header = __toESM(require("@editorjs/header"), 1);
 var import_paragraph = __toESM(require("@editorjs/paragraph"), 1);
 var import_list = __toESM(require("@editorjs/list"), 1);
+var import_table = __toESM(require("@editorjs/table"), 1);
+var import_quote = __toESM(require("@editorjs/quote"), 1);
+var import_editorjs_audio_player = __toESM(require("editorjs-audio-player"), 1);
 var EDITOR_TOOLS = {
   paragraph: {
     class: import_paragraph.default,
     inlineToolbar: true
   },
   list: import_list.default,
-  header: import_header.default
+  header: {
+    class: import_header.default,
+    config: {
+      placeholder: "Enter a header",
+      levels: [2, 3, 4],
+      defaultLevel: 2
+    }
+  },
+  table: import_table.default,
+  quote: import_quote.default,
+  audioPlayer: import_editorjs_audio_player.default
 };
 
 // src/components/Editor/Editor.jsx
@@ -386,23 +468,9 @@ var Editor = ({ property, record, onChangeAdmin, editorId }) => {
 var Editor_default = Editor;
 
 // src/components/Editor/EditorList.jsx
+var import_design_system5 = require("@adminjs/design-system");
 var import_react6 = __toESM(require("react"), 1);
 var import_styled_components6 = require("styled-components");
-var import_design_system5 = require("@adminjs/design-system");
-
-// src/utils/parseHtml.ts
-var import_editorjs_html = __toESM(require("editorjs-html"), 1);
-var parseHtml = (jsonData) => {
-  const edjsParser = (0, import_editorjs_html.default)();
-  try {
-    const data = edjsParser.parse(JSON.parse(String(jsonData)));
-    return String(data).replace(/>,</g, "><");
-  } catch (e) {
-    return;
-  }
-};
-
-// src/components/Editor/EditorList.jsx
 var EditorList = ({ property, record }) => {
   const htmlContent = parseHtml(record.params[property.path]);
   return /* @__PURE__ */ import_react6.default.createElement(import_styled_components6.ThemeProvider, { theme: import_design_system5.theme }, /* @__PURE__ */ import_react6.default.createElement(StyledEditorViewWrapper, null, htmlContent && /* @__PURE__ */ import_react6.default.createElement("div", { dangerouslySetInnerHTML: { __html: htmlContent } })));
@@ -697,5 +765,6 @@ var StringListShow_default = StringListShow;
   EditorList,
   EditorShow,
   StringList,
-  StringListShow
+  StringListShow,
+  parseHtml
 });

package/dist/index.d.cts

@@ -39,4 +39,6 @@ interface StringListShowPropsType extends ShowPropertyProps {
 }
 declare const StringListShow: FC<StringListShowPropsType>;
 
-export { ColorStatus as ColorStatusEdit, ColorStatusList, ColorStatusShow, CustomSlug, Editor, EditorList, EditorShow, StringList, StringListShow };
+declare const parseHtml: (jsonData: string) => string | undefined;
+
+export { ColorStatus as ColorStatusEdit, ColorStatusList, ColorStatusShow, CustomSlug, Editor, EditorList, EditorShow, StringList, StringListShow, parseHtml };

package/dist/index.d.ts

@@ -39,4 +39,6 @@ interface StringListShowPropsType extends ShowPropertyProps {
 }
 declare const StringListShow: FC<StringListShowPropsType>;
 
-export { ColorStatus as ColorStatusEdit, ColorStatusList, ColorStatusShow, CustomSlug, Editor, EditorList, EditorShow, StringList, StringListShow };
+declare const parseHtml: (jsonData: string) => string | undefined;
+
+export { ColorStatus as ColorStatusEdit, ColorStatusList, ColorStatusShow, CustomSlug, Editor, EditorList, EditorShow, StringList, StringListShow, parseHtml };

package/dist/index.js

@@ -106,8 +106,6 @@ var ColorStatusList = ({ property, record }) => {
   const currentOption = property.availableValues?.find(
     (item) => item.value === record.params[property.path]
   );
-  console.log(record, "record");
-  console.log(record.params[property.path], "record.params[property.path]");
   return /* @__PURE__ */ React3.createElement(ColorStatusBadge, { color: currentOption.color }, record.params[property.path]);
 };
 var ColorStatusList_default = ColorStatusList;
@@ -135,6 +133,42 @@ var slugifyTitle = (title) => {
   });
 };
 
+// src/utils/parseHtml.ts
+import edjsHTML from "editorjs-html";
+var parseHtml = (jsonData) => {
+  function tableParser(block) {
+    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];
+      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) => {
+    return `<audio controls src={${block.data.src}} />`;
+  };
+  const edjsParser = edjsHTML({
+    table: tableParser,
+    audioPlayer: audioPlayerParser
+  });
+  try {
+    const data = edjsParser.parse(JSON.parse(jsonData));
+    return String(data).replace(/>,</g, "><");
+  } catch (e) {
+    console.log("error", e);
+  }
+};
+
 // src/components/CustomSlug/styles.ts
 import { styled as styled2 } from "@adminjs/design-system/styled-components";
 import { Box, Button, Input } from "@adminjs/design-system";
@@ -243,16 +277,50 @@ var StyledEditorViewWrapper = styled3(Box2)`
   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: 10px;
+    background-color: #e6e6e6;
+  }
 `;
 var StyledEditorShowWrapper = styled3(StyledEditorViewWrapper)`
   margin-bottom: 24px;
 `;
 var StyledEditor = styled3.div`
+  audio,
   .cdx-block,
   .ce-header {
     padding-left: 58px;
   }
 
+  input {
+    margin-left: 58px;
+    width: auto;
+  }
+
   .cdx-list {
     padding-left: 85px;
   }
@@ -306,13 +374,26 @@ var StyledEditor = styled3.div`
 import Header from "@editorjs/header";
 import Paragraph from "@editorjs/paragraph";
 import List from "@editorjs/list";
+import Table from "@editorjs/table";
+import Quote from "@editorjs/quote";
+import AudioPlayer from "editorjs-audio-player";
 var EDITOR_TOOLS = {
   paragraph: {
     class: Paragraph,
     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
 };
 
 // src/components/Editor/Editor.jsx
@@ -345,23 +426,9 @@ var Editor = ({ property, record, onChangeAdmin, editorId }) => {
 var Editor_default = Editor;
 
 // src/components/Editor/EditorList.jsx
+import { theme as theme3 } from "@adminjs/design-system";
 import React6 from "react";
 import { ThemeProvider as ThemeProvider3 } from "styled-components";
-import { theme as theme3 } from "@adminjs/design-system";
-
-// src/utils/parseHtml.ts
-import edjsHTML from "editorjs-html";
-var parseHtml = (jsonData) => {
-  const edjsParser = edjsHTML();
-  try {
-    const data = edjsParser.parse(JSON.parse(String(jsonData)));
-    return String(data).replace(/>,</g, "><");
-  } catch (e) {
-    return;
-  }
-};
-
-// src/components/Editor/EditorList.jsx
 var EditorList = ({ property, record }) => {
   const htmlContent = parseHtml(record.params[property.path]);
   return /* @__PURE__ */ React6.createElement(ThemeProvider3, { theme: theme3 }, /* @__PURE__ */ React6.createElement(StyledEditorViewWrapper, null, htmlContent && /* @__PURE__ */ React6.createElement("div", { dangerouslySetInnerHTML: { __html: htmlContent } })));
@@ -671,5 +738,6 @@ export {
   EditorList_default as EditorList,
   EditorShow_default as EditorShow,
   StringList_default as StringList,
-  StringListShow_default as StringListShow
+  StringListShow_default as StringListShow,
+  parseHtml
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rulab/adminjs-components",
-  "version": "0.0.10",
+  "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/CustomSlug/CustomSlug.tsx

@@ -19,9 +19,14 @@ import {
   StyledLabel,
 } from "./styles.js";
 
-type CustomSlugTypes = Omit<EditPropertyProps, "where" | "resource">;
+type CustomSlugTypes = Omit<EditPropertyProps, "where">;
 
-const CustomSlug: FC<CustomSlugTypes> = ({ property, record, onChange }) => {
+const CustomSlug: FC<CustomSlugTypes> = ({
+  property,
+  record,
+  resource,
+  onChange,
+}) => {
   const [inputValue, setInputValue] = useState(record.params.slug);
 
   useEffect(() => {
@@ -51,9 +56,11 @@ const CustomSlug: FC<CustomSlugTypes> = ({ property, record, onChange }) => {
 
   function generateSlug(e: SyntheticEvent<HTMLInputElement>) {
     e.preventDefault();
-    const title = record.params.title;
-    if (title) {
-      setInputValue(slugifyTitle(title));
+    const slugSource =
+      record.params[property.props.sourceField ?? resource.titleProperty.name];
+
+    if (slugSource) {
+      setInputValue(slugifyTitle(slugSource));
     }
   }
 };

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);
   }
 };