@rulab/adminjs-components 0.0.1 → 0.0.3

package/dist/index.cjs

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   CustomSlug: () => CustomSlug_default,
+  Editor: () => Editor_default,
   StringList: () => StringList_default
 });
 module.exports = __toCommonJS(src_exports);
@@ -326,8 +327,126 @@ var StringList = ({ record, onChange, property }) => {
   }
 };
 var StringList_default = StringList;
+
+// src/components/Editor/Editor.jsx
+var import_react6 = __toESM(require("react"), 1);
+var import_styled_components8 = require("styled-components");
+var import_editorjs = __toESM(require("@editorjs/editorjs"), 1);
+var import_design_system7 = require("@adminjs/design-system");
+
+// src/components/Editor/styles.ts
+var import_design_system6 = require("@adminjs/design-system");
+var import_styled_components7 = require("@adminjs/design-system/styled-components");
+var Label3 = import_styled_components7.styled.div`
+  font-size: 12px;
+  margin-bottom: 8px;
+`;
+var EditorWrapper = (0, import_styled_components7.styled)(import_design_system6.Box)`
+  padding: 12px;
+  border: 1px solid rgb(187, 195, 203);
+`;
+var StyledEditor = import_styled_components7.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;
+  }
+`;
+
+// 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 EDITOR_TOOLS = {
+  paragraph: {
+    class: import_paragraph.default,
+    inlineToolbar: true
+  },
+  list: import_list.default,
+  header: import_header.default
+};
+
+// 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 ref = (0, import_react6.useRef)();
+  (0, import_react6.useEffect)(() => {
+    onChangeAdmin(property.path, jsonData);
+  }, [jsonData]);
+  (0, import_react6.useEffect)(() => {
+    if (!ref.current) {
+      const editor = new import_editorjs.default({
+        holder: editorId,
+        tools: EDITOR_TOOLS,
+        data: JSON.parse(record.params[property.path]),
+        async onChange(api, event) {
+          const data = await api.saver.save();
+          setJsonData(JSON.stringify(data));
+        }
+      });
+      ref.current = editor;
+    }
+    return () => {
+      ref?.current?.destroy?.();
+    };
+  }, []);
+  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;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CustomSlug,
+  Editor,
   StringList
 });

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 import { EditPropertyProps } from 'adminjs';
 
 type CustomSlugTypes = Omit<EditPropertyProps, "where" | "resource">;
@@ -7,4 +7,11 @@ declare const CustomSlug: FC<CustomSlugTypes>;
 type StringListTypes = Omit<EditPropertyProps, "where" | "resource">;
 declare const StringList: FC<StringListTypes>;
 
-export { CustomSlug, StringList };
+declare function Editor({ property, record, onChangeAdmin, editorId }: {
+    property: any;
+    record: any;
+    onChangeAdmin: any;
+    editorId: any;
+}): React.JSX.Element;
+
+export { CustomSlug, Editor, StringList };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 import { EditPropertyProps } from 'adminjs';
 
 type CustomSlugTypes = Omit<EditPropertyProps, "where" | "resource">;
@@ -7,4 +7,11 @@ declare const CustomSlug: FC<CustomSlugTypes>;
 type StringListTypes = Omit<EditPropertyProps, "where" | "resource">;
 declare const StringList: FC<StringListTypes>;
 
-export { CustomSlug, StringList };
+declare function Editor({ property, record, onChangeAdmin, editorId }: {
+    property: any;
+    record: any;
+    onChangeAdmin: any;
+    editorId: any;
+}): React.JSX.Element;
+
+export { CustomSlug, Editor, StringList };

package/dist/index.js

@@ -308,7 +308,125 @@ var StringList = ({ record, onChange, property }) => {
   }
 };
 var StringList_default = StringList;
+
+// src/components/Editor/Editor.jsx
+import React6, { memo, useState as useState4, useEffect as useEffect3, useRef } from "react";
+import { ThemeProvider as ThemeProvider3 } from "styled-components";
+import EditorJS from "@editorjs/editorjs";
+import { theme as theme3 } from "@adminjs/design-system";
+
+// src/components/Editor/styles.ts
+import { Box as Box3 } from "@adminjs/design-system";
+import { styled as styled5 } from "@adminjs/design-system/styled-components";
+var Label3 = styled5.div`
+  font-size: 12px;
+  margin-bottom: 8px;
+`;
+var EditorWrapper = styled5(Box3)`
+  padding: 12px;
+  border: 1px solid rgb(187, 195, 203);
+`;
+var StyledEditor = styled5.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;
+  }
+`;
+
+// src/components/Editor/config.ts
+import Header from "@editorjs/header";
+import Paragraph from "@editorjs/paragraph";
+import List from "@editorjs/list";
+var EDITOR_TOOLS = {
+  paragraph: {
+    class: Paragraph,
+    inlineToolbar: true
+  },
+  list: List,
+  header: Header
+};
+
+// 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 ref = useRef();
+  useEffect3(() => {
+    onChangeAdmin(property.path, jsonData);
+  }, [jsonData]);
+  useEffect3(() => {
+    if (!ref.current) {
+      const editor = new EditorJS({
+        holder: editorId,
+        tools: EDITOR_TOOLS,
+        data: JSON.parse(record.params[property.path]),
+        async onChange(api, event) {
+          const data = await api.saver.save();
+          setJsonData(JSON.stringify(data));
+        }
+      });
+      ref.current = editor;
+    }
+    return () => {
+      ref?.current?.destroy?.();
+    };
+  }, []);
+  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;
 export {
   CustomSlug_default as CustomSlug,
+  Editor_default as Editor,
   StringList_default as StringList
 };

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@rulab/adminjs-components",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "private": false,
   "type": "module",
-  "keywords": ["adminjs"],
+  "keywords": [
+    "adminjs"
+  ],
   "repository": {
     "url": "https://github.com/rulab/adminjs-components"
   },
@@ -18,6 +20,10 @@
     "@adminjs/design-system": "^4.1.1",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
+    "@editorjs/editorjs": "^2.30.2",
+    "@editorjs/header": "^2.8.7",
+    "@editorjs/list": "^1.9.0",
+    "@editorjs/paragraph": "^2.11.6",
     "adminjs": "^7.8.1",
     "react": "^18.2.0",
     "slugify": "^1.6.6",

package/src/components/Editor/Editor.jsx

@@ -0,0 +1,48 @@
+import React, { memo, useState, useEffect, useRef } from "react";
+import { ThemeProvider } from "styled-components";
+import EditorJS from "@editorjs/editorjs";
+import { theme } from "@adminjs/design-system";
+
+import { Label, StyledEditor, EditorWrapper } from "./styles";
+
+import { EDITOR_TOOLS } from "./config";
+
+const Editor = ({ property, record, onChangeAdmin, editorId }) => {
+  const [jsonData, setJsonData] = useState();
+
+  const ref = useRef();
+
+  useEffect(() => {
+    onChangeAdmin(property.path, jsonData);
+  }, [jsonData]);
+
+  useEffect(() => {
+    if (!ref.current) {
+      const editor = new EditorJS({
+        holder: editorId,
+        tools: EDITOR_TOOLS,
+        data: JSON.parse(record.params[property.path]),
+        async onChange(api, event) {
+          const data = await api.saver.save();
+          setJsonData(JSON.stringify(data));
+        },
+      });
+      ref.current = editor;
+    }
+
+    return () => {
+      ref?.current?.destroy?.();
+    };
+  }, []);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Label>Text</Label>
+      <EditorWrapper>
+        <StyledEditor id={editorId} />
+      </EditorWrapper>
+    </ThemeProvider>
+  );
+};
+
+export default Editor;

package/src/components/Editor/config.ts

@@ -0,0 +1,12 @@
+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/src/components/Editor/index.ts

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

package/src/components/Editor/styles.ts

@@ -0,0 +1,67 @@
+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/src/components/index.ts

@@ -1,2 +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/src/types.d.ts

@@ -0,0 +1,3 @@
+declare module "@editorjs/header";
+declare module "@editorjs/paragraph";
+declare module "@editorjs/list";