@rulab/adminjs-components 0.0.3 → 0.0.4

package/dist/bundle.js

@@ -0,0 +1,8 @@
+import path from "path";
+import * as url from "url";
+const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
+const bundleComponent = (loader, componentName) => {
+    const componentPath = path.join(__dirname, `./components/${componentName}`);
+    return loader.add(componentName, componentPath);
+};
+export default bundleComponent;

package/dist/components/CustomSlug/CustomSlug.jsx

@@ -0,0 +1,29 @@
+import React, { useEffect, useState, } from "react";
+import { ThemeProvider } from "styled-components";
+import { theme, Label } from "@adminjs/design-system";
+import { slugifyTitle } from "../../utils/index.js";
+import { StyledInputWrapper, StyledCustomInput, StyledGenerateButton, } from "./styles.js";
+const CustomSlug = ({ property, record, onChange }) => {
+    const [inputValue, setInputValue] = useState(record.params.slug);
+    useEffect(() => {
+        onChange(property.path, inputValue);
+    }, [inputValue]);
+    return (<ThemeProvider theme={theme}>
+      <Label htmlFor="customSlug">Slug</Label>
+      <StyledInputWrapper>
+        <StyledCustomInput id={property.path} name={property.path} value={inputValue} onChange={handleInput}/>
+        <StyledGenerateButton variant="outlined" onClick={generateSlug}>
+          Generate Slug
+        </StyledGenerateButton>
+      </StyledInputWrapper>
+    </ThemeProvider>);
+    function handleInput(e) {
+        setInputValue(e.target.value);
+    }
+    function generateSlug(e) {
+        e.preventDefault();
+        const title = record.title;
+        setInputValue(slugifyTitle(title));
+    }
+};
+export default CustomSlug;

package/dist/components/CustomSlug/index.js

@@ -0,0 +1 @@
+export { default } from "./CustomSlug.js";

package/dist/components/CustomSlug/styles.js

@@ -0,0 +1,15 @@
+// @ts-ignore
+import { styled } from "@adminjs/design-system/styled-components";
+// @ts-ignore
+import { Button, Box, Input } from "@adminjs/design-system";
+export const StyledInputWrapper = styled(Box) `
+  display: flex;
+  margin-bottom: 40px;
+`;
+export const StyledCustomInput = styled(Input) `
+  width: 100%;
+  margin-right: 10px;
+`;
+export const StyledGenerateButton = styled(Button) `
+  white-space: nowrap;
+`;

package/dist/components/Editor/config.js

@@ -0,0 +1,11 @@
+import Header from "@editorjs/header";
+import Paragraph from "@editorjs/paragraph";
+import List from "@editorjs/list";
+export const EDITOR_TOOLS = {
+    paragraph: {
+        class: Paragraph,
+        inlineToolbar: true,
+    },
+    list: List,
+    header: Header,
+};

package/dist/components/Editor/index.js

@@ -0,0 +1 @@
+export { default } from "./Editor.jsx";

package/dist/components/Editor/styles.js

@@ -0,0 +1,64 @@
+import { Box } from "@adminjs/design-system";
+import { styled } from "@adminjs/design-system/styled-components";
+export const Label = styled.div `
+  font-size: 12px;
+  margin-bottom: 8px;
+`;
+export const EditorWrapper = styled(Box) `
+  padding: 12px;
+  border: 1px solid rgb(187, 195, 203);
+`;
+export const StyledEditor = styled.div `
+  .cdx-block,
+  .ce-header {
+    padding-left: 58px;
+  }
+
+  .cdx-list {
+    padding-left: 85px;
+  }
+
+  .ce-block__content {
+    width: 100%;
+    max-width: none;
+  }
+
+  .ce-toolbar__content {
+    max-width: none;
+    left: 0;
+  }
+
+  .ce-toolbar__actions {
+    left: 0;
+  }
+
+  h1.ce-header {
+    font-size: 22px;
+    font-weight: bold;
+  }
+
+  h2.ce-header {
+    font-size: 20px;
+    font-weight: bold;
+  }
+
+  h3.ce-header {
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  h4.ce-header {
+    font-size: 16px;
+    font-weight: bold;
+  }
+
+  h5.ce-header {
+    font-size: 15px;
+    font-weight: bold;
+  }
+
+  h6.ce-header {
+    font-size: 14px;
+    font-weight: bold;
+  }
+`;

package/dist/components/StringList/SortableList/SortableList.jsx

@@ -0,0 +1,43 @@
+import React, { Fragment, useMemo, useState } from 'react';
+import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors, DragOverlay, defaultDropAnimationSideEffects, } from '@dnd-kit/core';
+import { SortableContext, arrayMove, sortableKeyboardCoordinates, verticalListSortingStrategy, } from '@dnd-kit/sortable';
+import { SortableItem } from './components/index.js';
+import { StyledListWrapper } from './styles.js';
+const dropAnimationConfig = {
+    sideEffects: defaultDropAnimationSideEffects({
+        styles: {
+            active: {
+                opacity: '0.4',
+            },
+        },
+    }),
+};
+export function SortableList({ items, onChange, renderItem, }) {
+    const [active, setActive] = useState(null);
+    const activeItem = useMemo(() => items.find((item) => item.id === active?.id), [active, items]);
+    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+    }));
+    return (<DndContext sensors={sensors} onDragStart={({ active }) => {
+            setActive(active);
+        }} onDragEnd={({ active, over }) => {
+            if (over && active.id !== over?.id) {
+                const activeIndex = items.findIndex(({ id }) => id === active.id);
+                const overIndex = items.findIndex(({ id }) => id === over.id);
+                onChange(arrayMove(items, activeIndex, overIndex));
+            }
+            setActive(null);
+        }} onDragCancel={() => {
+            setActive(null);
+        }}>
+      <SortableContext items={items} strategy={verticalListSortingStrategy}>
+        <StyledListWrapper role="application">
+          {items.map((item, index) => (<Fragment key={index}>{renderItem(item)}</Fragment>))}
+        </StyledListWrapper>
+      </SortableContext>
+      <DragOverlay dropAnimation={dropAnimationConfig}>
+        {activeItem ? renderItem(activeItem) : null}
+      </DragOverlay>
+    </DndContext>);
+}
+SortableList.Item = SortableItem;

package/dist/components/StringList/SortableList/components/SortableItem/DragHandle.jsx

@@ -0,0 +1,10 @@
+import React, { useContext } from 'react';
+import { DragButton } from './styles.js';
+export const DragHandle = ({ context }) => {
+    const { attributes, listeners, ref } = useContext(context);
+    return (<DragButton {...attributes} {...listeners} ref={ref}>
+      <svg viewBox="0 0 20 20" width="13">
+        <path d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"></path>
+      </svg>
+    </DragButton>);
+};

package/dist/components/StringList/SortableList/components/SortableItem/SortableItem.jsx

@@ -0,0 +1,32 @@
+import React, { createContext, useMemo } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { Button, Icon } from '@adminjs/design-system';
+import { DragHandle } from './DragHandle.js';
+import { StyledListItem } from './styles.js';
+const SortableItemContext = createContext({
+    attributes: {},
+    listeners: undefined,
+    ref() { },
+});
+export function SortableItem({ children, id, onDelete, }) {
+    const { attributes, isDragging, listeners, setNodeRef, setActivatorNodeRef } = useSortable({ id });
+    const context = useMemo(() => ({
+        attributes,
+        listeners,
+        ref: setActivatorNodeRef,
+    }), [attributes, listeners, setActivatorNodeRef]);
+    const style = {
+        opacity: isDragging ? 0.4 : undefined,
+    };
+    return (<SortableItemContext.Provider value={context}>
+      <StyledListItem ref={setNodeRef} style={style}>
+        <div>
+          <DragHandle context={SortableItemContext}/>
+          {children}
+        </div>
+        <Button variant="outlined" color="danger" size="icon" onClick={(e) => onDelete(e, id)}>
+          <Icon icon="X" color="red"/>
+        </Button>
+      </StyledListItem>
+    </SortableItemContext.Provider>);
+}

package/dist/components/StringList/SortableList/components/SortableItem/styles.js

@@ -0,0 +1,20 @@
+import { styled } from '@adminjs/design-system/styled-components';
+export const StyledListItem = styled.li `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #fff;
+  padding: 10px 20px 10px 15px;
+  box-shadow:
+    0 0 0 calc(1px / var(--scale-x, 1)) rgba(63, 63, 68, 0.05),
+    0 1px calc(3px / var(--scale-x, 1)) 0 rgba(34, 33, 81, 0.15);
+  border-radius: 5px;
+  list-style: none;
+`;
+export const DragButton = styled.button `
+  padding: 3px;
+  margin-right: 15px;
+  cursor: move;
+  background: none;
+  border: none;
+`;

package/dist/components/StringList/SortableList/components/SortableItem/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/StringList/SortableList/components/index.js

@@ -0,0 +1,2 @@
+export { SortableItem } from './SortableItem/SortableItem.js';
+export { DragHandle } from './SortableItem/DragHandle.js';

package/dist/components/StringList/SortableList/index.js

@@ -0,0 +1 @@
+export { SortableList } from './SortableList.js';

package/dist/components/StringList/SortableList/styles.js

@@ -0,0 +1,8 @@
+import { styled } from '@adminjs/design-system/styled-components';
+export const StyledListWrapper = styled.ul `
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 0;
+  list-style: none;
+`;

package/dist/components/StringList/StringList.jsx

@@ -0,0 +1,67 @@
+import React, { useState, useEffect, } from "react";
+import { ThemeProvider } from "styled-components";
+import { theme, Button, Input, Label } from "@adminjs/design-system";
+import { StyledWrapper, StyledCustomInput, StyledListWrapper, StyledInputWrapper, } from "./styles.js";
+import { SortableList } from "./SortableList/SortableList.js";
+const StringList = ({ record, onChange, property }) => {
+    const stringListValue = record.params?.[property.path] ?? property.props.value ?? "";
+    const initialList = stringListValue
+        ? prepareDataForList(stringListValue)
+        : [];
+    const [inputValue, setInputValue] = useState("");
+    const [list, setList] = useState(initialList);
+    const serializedData = prepareDataForDatabase(list);
+    useEffect(() => {
+        onChange(property.path, serializedData);
+    }, [serializedData]);
+    return (<ThemeProvider theme={theme}>
+      <Label htmlFor="custom">String List</Label>
+      <StyledWrapper>
+        <StyledListWrapper>
+          <SortableList items={list} onChange={setList} renderItem={(item) => (<SortableList.Item id={item.id} onDelete={handleDeleteButton}>
+                {item.value}
+              </SortableList.Item>)}/>
+        </StyledListWrapper>
+        <StyledInputWrapper>
+          <Input id="stringList" name={property.path} value={serializedData} hidden/>
+          <StyledCustomInput id="custom" name="customInput" value={inputValue} onChange={handleInput} onKeyPress={handleEnterPress}/>
+          <Button variant="outlined" onClick={handleAddButton}>
+            Add
+          </Button>
+        </StyledInputWrapper>
+      </StyledWrapper>
+    </ThemeProvider>);
+    function handleInput(e) {
+        setInputValue(e.target.value);
+    }
+    function handleEnterPress(e) {
+        if (e.key === "Enter") {
+            handleAddButton(e);
+        }
+    }
+    function handleAddButton(e) {
+        e.preventDefault();
+        if (Boolean(inputValue)) {
+            setList([...list, createListObject(inputValue)]);
+            setInputValue("");
+        }
+    }
+    function handleDeleteButton(e, id) {
+        e.preventDefault();
+        const newData = list.filter((item) => item.id !== id);
+        setList(newData);
+    }
+    function prepareDataForDatabase(list) {
+        return list.map(({ value }) => value).join("|");
+    }
+    function prepareDataForList(str) {
+        return str.split("|").map((item) => createListObject(item));
+    }
+    function createListObject(value) {
+        return {
+            id: `${Date.now()}-${Math.floor(Math.random() * 1000)}`,
+            value: value,
+        };
+    }
+};
+export default StringList;

package/dist/components/StringList/index.js

@@ -0,0 +1 @@
+export { default } from "./StringList.js";

package/dist/components/StringList/styles.js

@@ -0,0 +1,16 @@
+import { styled } from "@adminjs/design-system/styled-components";
+import { Box, Input } from "@adminjs/design-system";
+export const StyledWrapper = styled(Box) `
+  display: flex;
+  flex-direction: column;
+`;
+export const StyledCustomInput = styled(Input) `
+  width: 100%;
+  margin-right: 10px;
+`;
+export const StyledInputWrapper = styled(Box) `
+  display: flex;
+`;
+export const StyledListWrapper = styled(Box) `
+  margin-bottom: 15px;
+`;

package/dist/components/index.js

@@ -0,0 +1,3 @@
+export { default as CustomSlug } from "./CustomSlug/CustomSlug.js";
+export { default as StringList } from "./StringList/StringList.js";
+export { default as Editor } from "./Editor";

package/dist/editorFeature.js

@@ -0,0 +1,16 @@
+import { buildFeature, } from "adminjs";
+import bundleComponent from "./bundle.js";
+const editorFeature = (options) => {
+    const { componentLoader, name } = options;
+    const editComponent = bundleComponent(componentLoader, "Editor");
+    return buildFeature({
+        properties: {
+            [name]: {
+                components: {
+                    edit: editComponent,
+                },
+            },
+        },
+    });
+};
+export default editorFeature;

package/dist/index.cjs

@@ -32,6 +32,7 @@ var src_exports = {};
 __export(src_exports, {
   CustomSlug: () => CustomSlug_default,
   Editor: () => Editor_default,
+  EditorShow: () => EditorShow_default,
   StringList: () => StringList_default
 });
 module.exports = __toCommonJS(src_exports);
@@ -49,7 +50,7 @@ var slugifyImport_default = import_slugify.default;
 var slugifyTitle = (title) => {
   return slugifyImport_default(title, {
     replacement: "-",
-    remove: void 0,
+    remove: /[*+~.()'"!:@]/g,
     lower: true,
     locale: "vi",
     trim: true
@@ -91,8 +92,10 @@ var CustomSlug = ({ property, record, onChange }) => {
   }
   function generateSlug(e) {
     e.preventDefault();
-    const title = record.title;
-    setInputValue(slugifyTitle(title));
+    const title = record.params.title;
+    if (title) {
+      setInputValue(slugifyTitle(title));
+    }
   }
 };
 var CustomSlug_default = CustomSlug;
@@ -416,10 +419,7 @@ var EDITOR_TOOLS = {
 // src/components/Editor/Editor.jsx
 var Editor = ({ property, record, onChangeAdmin, editorId }) => {
   const [jsonData, setJsonData] = (0, import_react6.useState)();
-  console.log(
-    record.params[property.path],
-    "record.params[property.path].path"
-  );
+  const isSavedData = Boolean(record.params[property.path]);
   const ref = (0, import_react6.useRef)();
   (0, import_react6.useEffect)(() => {
     onChangeAdmin(property.path, jsonData);
@@ -429,7 +429,7 @@ var Editor = ({ property, record, onChangeAdmin, editorId }) => {
       const editor = new import_editorjs.default({
         holder: editorId,
         tools: EDITOR_TOOLS,
-        data: JSON.parse(record.params[property.path]),
+        data: isSavedData ? JSON.parse(record.params[property.path]) : "",
         async onChange(api, event) {
           const data = await api.saver.save();
           setJsonData(JSON.stringify(data));
@@ -444,9 +444,34 @@ var Editor = ({ property, record, onChangeAdmin, editorId }) => {
   return /* @__PURE__ */ import_react6.default.createElement(import_styled_components8.ThemeProvider, { theme: import_design_system7.theme }, /* @__PURE__ */ import_react6.default.createElement(Label3, null, "Text"), /* @__PURE__ */ import_react6.default.createElement(EditorWrapper, null, /* @__PURE__ */ import_react6.default.createElement(StyledEditor, { id: editorId })));
 };
 var Editor_default = Editor;
+
+// src/components/Editor/EditorShow.jsx
+var import_react7 = __toESM(require("react"), 1);
+var import_styled_components9 = require("styled-components");
+var import_design_system8 = 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/EditorShow.jsx
+var EditorShow = ({ property, record }) => {
+  const htmlContent = parseHtml(record.params[property.path]);
+  return /* @__PURE__ */ import_react7.default.createElement(import_styled_components9.ThemeProvider, { theme: import_design_system8.theme }, /* @__PURE__ */ import_react7.default.createElement(Label3, null, "Content"), htmlContent && /* @__PURE__ */ import_react7.default.createElement("div", { dangerouslySetInnerHTML: { __html: String(htmlContent) } }));
+};
+var EditorShow_default = EditorShow;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CustomSlug,
   Editor,
+  EditorShow,
   StringList
 });

package/dist/index.d.cts

@@ -14,4 +14,9 @@ declare function Editor({ property, record, onChangeAdmin, editorId }: {
     editorId: any;
 }): React.JSX.Element;
 
-export { CustomSlug, Editor, StringList };
+declare function EditorShow({ property, record }: {
+    property: any;
+    record: any;
+}): React.JSX.Element;
+
+export { CustomSlug, Editor, EditorShow, StringList };

package/dist/index.d.mts

@@ -0,0 +1,8 @@
+import { FeatureType, ComponentLoader } from 'adminjs';
+
+type EditorOptions = {
+    componentLoader: ComponentLoader;
+};
+declare const editorFeature: (options: EditorOptions) => FeatureType;
+
+export { editorFeature as default, editorFeature };

package/dist/index.d.ts

@@ -14,4 +14,9 @@ declare function Editor({ property, record, onChangeAdmin, editorId }: {
     editorId: any;
 }): React.JSX.Element;
 
-export { CustomSlug, Editor, StringList };
+declare function EditorShow({ property, record }: {
+    property: any;
+    record: any;
+}): React.JSX.Element;
+
+export { CustomSlug, Editor, EditorShow, StringList };

package/dist/index.js

@@ -14,7 +14,7 @@ var slugifyImport_default = slugify;
 var slugifyTitle = (title) => {
   return slugifyImport_default(title, {
     replacement: "-",
-    remove: void 0,
+    remove: /[*+~.()'"!:@]/g,
     lower: true,
     locale: "vi",
     trim: true
@@ -56,8 +56,10 @@ var CustomSlug = ({ property, record, onChange }) => {
   }
   function generateSlug(e) {
     e.preventDefault();
-    const title = record.title;
-    setInputValue(slugifyTitle(title));
+    const title = record.params.title;
+    if (title) {
+      setInputValue(slugifyTitle(title));
+    }
   }
 };
 var CustomSlug_default = CustomSlug;
@@ -397,10 +399,7 @@ var EDITOR_TOOLS = {
 // src/components/Editor/Editor.jsx
 var Editor = ({ property, record, onChangeAdmin, editorId }) => {
   const [jsonData, setJsonData] = useState4();
-  console.log(
-    record.params[property.path],
-    "record.params[property.path].path"
-  );
+  const isSavedData = Boolean(record.params[property.path]);
   const ref = useRef();
   useEffect3(() => {
     onChangeAdmin(property.path, jsonData);
@@ -410,7 +409,7 @@ var Editor = ({ property, record, onChangeAdmin, editorId }) => {
       const editor = new EditorJS({
         holder: editorId,
         tools: EDITOR_TOOLS,
-        data: JSON.parse(record.params[property.path]),
+        data: isSavedData ? JSON.parse(record.params[property.path]) : "",
         async onChange(api, event) {
           const data = await api.saver.save();
           setJsonData(JSON.stringify(data));
@@ -425,8 +424,33 @@ var Editor = ({ property, record, onChangeAdmin, editorId }) => {
   return /* @__PURE__ */ React6.createElement(ThemeProvider3, { theme: theme3 }, /* @__PURE__ */ React6.createElement(Label3, null, "Text"), /* @__PURE__ */ React6.createElement(EditorWrapper, null, /* @__PURE__ */ React6.createElement(StyledEditor, { id: editorId })));
 };
 var Editor_default = Editor;
+
+// src/components/Editor/EditorShow.jsx
+import React7, { memo as memo2, useState as useState5, useEffect as useEffect4, useRef as useRef2 } from "react";
+import { ThemeProvider as ThemeProvider4 } from "styled-components";
+import { theme as theme4 } 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/EditorShow.jsx
+var EditorShow = ({ property, record }) => {
+  const htmlContent = parseHtml(record.params[property.path]);
+  return /* @__PURE__ */ React7.createElement(ThemeProvider4, { theme: theme4 }, /* @__PURE__ */ React7.createElement(Label3, null, "Content"), htmlContent && /* @__PURE__ */ React7.createElement("div", { dangerouslySetInnerHTML: { __html: String(htmlContent) } }));
+};
+var EditorShow_default = EditorShow;
 export {
   CustomSlug_default as CustomSlug,
   Editor_default as Editor,
+  EditorShow_default as EditorShow,
   StringList_default as StringList
 };

package/dist/index.mjs

@@ -0,0 +1,37 @@
+// src/features/editorFeature.ts
+import {
+  buildFeature
+} from "adminjs";
+
+// src/bundle.ts
+import path from "path";
+import * as url from "url";
+var __dirname = url.fileURLToPath(new URL(".", import.meta.url));
+var bundle = (loader, componentName) => {
+  const componentPath = path.join(__dirname, `./components/${componentName}`);
+  return loader.add(componentName, componentPath);
+};
+var bundle_default = bundle;
+
+// src/features/editorFeature.ts
+var editorFeature = (options) => {
+  const { componentLoader } = options;
+  const editComponent = bundle_default(componentLoader, "Editor");
+  return buildFeature({
+    properties: {
+      editor: {
+        components: {
+          edit: editComponent
+        }
+      }
+    }
+  });
+};
+var editorFeature_default = editorFeature;
+
+// src/index.ts
+var src_default = editorFeature_default;
+export {
+  src_default as default,
+  editorFeature_default as editorFeature
+};

package/dist/utils/index.js

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

package/dist/utils/slugifyImport.js

@@ -0,0 +1,3 @@
+// This is a fix of typescript module import error
+import * as slugify from "slugify";
+export default slugify;

package/dist/utils/slugifyTitle.js

@@ -0,0 +1,10 @@
+import * as slugify from "slugify";
+export const slugifyTitle = (title) => {
+    return slugify.default(title, {
+        replacement: "-",
+        remove: undefined,
+        lower: true,
+        locale: "vi",
+        trim: true,
+    });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rulab/adminjs-components",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -25,6 +25,7 @@
     "@editorjs/list": "^1.9.0",
     "@editorjs/paragraph": "^2.11.6",
     "adminjs": "^7.8.1",
+    "editorjs-html": "^3.4.3",
     "react": "^18.2.0",
     "slugify": "^1.6.6",
     "styled-components": "^6.1.11"

package/src/components/CustomSlug/CustomSlug.tsx

@@ -50,8 +50,10 @@ const CustomSlug: FC<CustomSlugTypes> = ({ property, record, onChange }) => {
 
   function generateSlug(e: SyntheticEvent<HTMLInputElement>) {
     e.preventDefault();
-    const title = record.title;
-    setInputValue(slugifyTitle(title));
+    const title = record.params.title;
+    if (title) {
+      setInputValue(slugifyTitle(title));
+    }
   }
 };
 

package/src/components/Editor/Editor.jsx

@@ -9,6 +9,7 @@ import { EDITOR_TOOLS } from "./config";
 
 const Editor = ({ property, record, onChangeAdmin, editorId }) => {
   const [jsonData, setJsonData] = useState();
+  const isSavedData = Boolean(record.params[property.path]);
 
   const ref = useRef();
 
@@ -21,7 +22,7 @@ const Editor = ({ property, record, onChangeAdmin, editorId }) => {
       const editor = new EditorJS({
         holder: editorId,
         tools: EDITOR_TOOLS,
-        data: JSON.parse(record.params[property.path]),
+        data: isSavedData ? JSON.parse(record.params[property.path]) : "",
         async onChange(api, event) {
           const data = await api.saver.save();
           setJsonData(JSON.stringify(data));

package/src/components/Editor/EditorShow.jsx

@@ -0,0 +1,22 @@
+import React, { memo, useState, useEffect, useRef } from "react";
+import { ThemeProvider } from "styled-components";
+import { theme } from "@adminjs/design-system";
+
+import { parseHtml } from "../../utils/parseHtml";
+
+import { Label } from "./styles";
+
+const EditorShow = ({ property, record }) => {
+  const htmlContent = parseHtml(record.params[property.path]);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Label>Content</Label>
+      {htmlContent && (
+        <div dangerouslySetInnerHTML={{ __html: String(htmlContent) }} />
+      )}
+    </ThemeProvider>
+  );
+};
+
+export default EditorShow;

package/src/components/Editor/index.ts

@@ -1 +1,2 @@
-export { default } from "./Editor.jsx";
+export * from "./Editor.jsx";
+export * from "./EditorShow.jsx";

package/src/components/index.ts

@@ -1,3 +1,4 @@
 export { default as CustomSlug } from "./CustomSlug/CustomSlug.js";
 export { default as StringList } from "./StringList/StringList.js";
-export { default as Editor } from "./Editor";
+export { default as Editor } from "./Editor/Editor.jsx";
+export { default as EditorShow } from "./Editor/EditorShow.jsx";

package/src/utils/parseHtml.ts

@@ -0,0 +1,12 @@
+import edjsHTML from "editorjs-html";
+
+export const parseHtml = (jsonData?: string) => {
+  const edjsParser = edjsHTML();
+
+  try {
+    const data = edjsParser.parse(JSON.parse(String(jsonData)));
+    return String(data).replace(/>,</g, "><");
+  } catch (e) {
+    return;
+  }
+};

package/src/utils/slugifyTitle.ts

@@ -3,7 +3,7 @@ import slugify from "./slugifyImport.js";
 export const slugifyTitle = (title: string) => {
   return slugify(title, {
     replacement: "-",
-    remove: undefined,
+    remove: /[*+~.()'"!:@]/g,
     lower: true,
     locale: "vi",
     trim: true,