@rulab/adminjs-components 0.0.12 → 0.0.13

package/dist/index.cjs

@@ -160,45 +160,30 @@ var import_react4 = __toESM(require("react"), 1);
 var import_styled_components3 = require("styled-components");
 var import_design_system2 = require("@adminjs/design-system");
 
-// src/utils/slugifyImport.ts
-var import_slugify = __toESM(require("slugify"), 1);
-var slugifyImport_default = import_slugify.default;
-
-// src/utils/slugifyTitle.ts
-var slugifyTitle = (title) => {
-  return slugifyImport_default(title, {
-    replacement: "-",
-    remove: /[*+~.()'"!:@]/g,
-    lower: true,
-    locale: "vi",
-    trim: true
-  });
-};
-
 // 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>`;
+var 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 {
-      return `<table><tbody>${rows.join("")}</tbody></table>`;
+      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}} />`;
-  };
+};
+var audioPlayerParser = (block) => {
+  return `<audio controls src={${block.data.src}} />`;
+};
+var parseHtml = (jsonData) => {
   const edjsParser = (0, import_editorjs_html.default)({
     table: tableParser,
     audioPlayer: audioPlayerParser
@@ -211,6 +196,21 @@ var parseHtml = (jsonData) => {
   }
 };
 
+// src/utils/slugifyImport.ts
+var import_slugify = __toESM(require("slugify"), 1);
+var slugifyImport_default = import_slugify.default;
+
+// src/utils/slugifyTitle.ts
+var slugifyTitle = (title) => {
+  return slugifyImport_default(title, {
+    replacement: "-",
+    remove: /[*+~.()'"!:@]/g,
+    lower: true,
+    locale: "vi",
+    trim: true
+  });
+};
+
 // src/components/CustomSlug/styles.ts
 var import_styled_components2 = require("@adminjs/design-system/styled-components");
 var import_design_system = require("@adminjs/design-system");
@@ -232,7 +232,12 @@ var StyledLabel = import_styled_components2.styled.div`
 `;
 
 // src/components/CustomSlug/CustomSlug.tsx
-var CustomSlug = ({ property, record, onChange }) => {
+var CustomSlug = ({
+  property,
+  record,
+  resource,
+  onChange
+}) => {
   const [inputValue, setInputValue] = (0, import_react4.useState)(record.params.slug);
   (0, import_react4.useEffect)(() => {
     onChange(property.path, inputValue);
@@ -251,9 +256,9 @@ var CustomSlug = ({ property, record, onChange }) => {
   }
   function generateSlug(e) {
     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));
     }
   }
 };
@@ -344,7 +349,7 @@ var StyledEditorViewWrapper = (0, import_styled_components4.styled)(import_desig
     display: block;
     padding: 5px 8px;
     width: fit-content;
-    border-radius: 10px;
+    border-radius: 4px;
     background-color: #e6e6e6;
   }
 `;
@@ -414,17 +419,20 @@ var StyledEditor = import_styled_components4.styled.div`
 
 // src/components/Editor/config.ts
 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_paragraph = __toESM(require("@editorjs/paragraph"), 1);
 var import_quote = __toESM(require("@editorjs/quote"), 1);
+var import_table = __toESM(require("@editorjs/table"), 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,
+  list: {
+    class: import_list.default,
+    inlineToolbar: true
+  },
   header: {
     class: import_header.default,
     config: {
@@ -433,8 +441,14 @@ var EDITOR_TOOLS = {
       defaultLevel: 2
     }
   },
-  table: import_table.default,
-  quote: import_quote.default,
+  table: {
+    class: import_table.default,
+    inlineToolbar: true
+  },
+  quote: {
+    class: import_quote.default,
+    inlineToolbar: true
+  },
   audioPlayer: import_editorjs_audio_player.default
 };
 
@@ -468,8 +482,8 @@ 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_design_system5 = require("@adminjs/design-system");
 var import_styled_components6 = require("styled-components");
 var EditorList = ({ property, record }) => {
   const htmlContent = parseHtml(record.params[property.path]);

package/dist/index.d.cts

@@ -8,7 +8,7 @@ declare const ColorStatusShow: FC<ShowPropertyProps>;
 
 declare const ColorStatusList: FC<ShowPropertyProps>;
 
-type CustomSlugTypes = Omit<EditPropertyProps, "where" | "resource">;
+type CustomSlugTypes = Omit<EditPropertyProps, "where">;
 declare const CustomSlug: FC<CustomSlugTypes>;
 
 declare function Editor({ property, record, onChangeAdmin, editorId }: {

package/dist/index.d.ts

@@ -8,7 +8,7 @@ declare const ColorStatusShow: FC<ShowPropertyProps>;
 
 declare const ColorStatusList: FC<ShowPropertyProps>;
 
-type CustomSlugTypes = Omit<EditPropertyProps, "where" | "resource">;
+type CustomSlugTypes = Omit<EditPropertyProps, "where">;
 declare const CustomSlug: FC<CustomSlugTypes>;
 
 declare function Editor({ property, record, onChangeAdmin, editorId }: {

package/dist/index.js

@@ -118,45 +118,30 @@ import React4, {
 import { ThemeProvider } from "styled-components";
 import { theme } from "@adminjs/design-system";
 
-// src/utils/slugifyImport.ts
-import slugify from "slugify";
-var slugifyImport_default = slugify;
-
-// src/utils/slugifyTitle.ts
-var slugifyTitle = (title) => {
-  return slugifyImport_default(title, {
-    replacement: "-",
-    remove: /[*+~.()'"!:@]/g,
-    lower: true,
-    locale: "vi",
-    trim: true
-  });
-};
-
 // 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>`;
+var 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 {
-      return `<table><tbody>${rows.join("")}</tbody></table>`;
+      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}} />`;
-  };
+};
+var audioPlayerParser = (block) => {
+  return `<audio controls src={${block.data.src}} />`;
+};
+var parseHtml = (jsonData) => {
   const edjsParser = edjsHTML({
     table: tableParser,
     audioPlayer: audioPlayerParser
@@ -169,6 +154,21 @@ var parseHtml = (jsonData) => {
   }
 };
 
+// src/utils/slugifyImport.ts
+import slugify from "slugify";
+var slugifyImport_default = slugify;
+
+// src/utils/slugifyTitle.ts
+var slugifyTitle = (title) => {
+  return slugifyImport_default(title, {
+    replacement: "-",
+    remove: /[*+~.()'"!:@]/g,
+    lower: true,
+    locale: "vi",
+    trim: true
+  });
+};
+
 // src/components/CustomSlug/styles.ts
 import { styled as styled2 } from "@adminjs/design-system/styled-components";
 import { Box, Button, Input } from "@adminjs/design-system";
@@ -190,7 +190,12 @@ var StyledLabel = styled2.div`
 `;
 
 // src/components/CustomSlug/CustomSlug.tsx
-var CustomSlug = ({ property, record, onChange }) => {
+var CustomSlug = ({
+  property,
+  record,
+  resource,
+  onChange
+}) => {
   const [inputValue, setInputValue] = useState2(record.params.slug);
   useEffect2(() => {
     onChange(property.path, inputValue);
@@ -209,9 +214,9 @@ var CustomSlug = ({ property, record, onChange }) => {
   }
   function generateSlug(e) {
     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));
     }
   }
 };
@@ -302,7 +307,7 @@ var StyledEditorViewWrapper = styled3(Box2)`
     display: block;
     padding: 5px 8px;
     width: fit-content;
-    border-radius: 10px;
+    border-radius: 4px;
     background-color: #e6e6e6;
   }
 `;
@@ -372,17 +377,20 @@ var StyledEditor = styled3.div`
 
 // src/components/Editor/config.ts
 import Header from "@editorjs/header";
-import Paragraph from "@editorjs/paragraph";
 import List from "@editorjs/list";
-import Table from "@editorjs/table";
+import Paragraph from "@editorjs/paragraph";
 import Quote from "@editorjs/quote";
+import Table from "@editorjs/table";
 import AudioPlayer from "editorjs-audio-player";
 var EDITOR_TOOLS = {
   paragraph: {
     class: Paragraph,
     inlineToolbar: true
   },
-  list: List,
+  list: {
+    class: List,
+    inlineToolbar: true
+  },
   header: {
     class: Header,
     config: {
@@ -391,8 +399,14 @@ var EDITOR_TOOLS = {
       defaultLevel: 2
     }
   },
-  table: Table,
-  quote: Quote,
+  table: {
+    class: Table,
+    inlineToolbar: true
+  },
+  quote: {
+    class: Quote,
+    inlineToolbar: true
+  },
   audioPlayer: AudioPlayer
 };
 
@@ -426,8 +440,8 @@ 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 { theme as theme3 } from "@adminjs/design-system";
 import { ThemeProvider as ThemeProvider3 } from "styled-components";
 var EditorList = ({ property, record }) => {
   const htmlContent = parseHtml(record.params[property.path]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rulab/adminjs-components",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/src/components/Editor/config.ts

@@ -11,7 +11,10 @@ export const EDITOR_TOOLS = {
     class: Paragraph,
     inlineToolbar: true,
   },
-  list: List,
+  list: {
+    class: List,
+    inlineToolbar: true,
+  },
   header: {
     class: Header,
     config: {
@@ -20,7 +23,13 @@ export const EDITOR_TOOLS = {
       defaultLevel: 2,
     },
   },
-  table: Table,
-  quote: Quote,
+  table: {
+    class: Table,
+    inlineToolbar: true,
+  },
+  quote: {
+    class: Quote,
+    inlineToolbar: true,
+  },
   audioPlayer: AudioPlayer,
 };