@rulab/adminjs-components 0.2.1 → 0.2.2

package/README.md

@@ -1,5 +1,7 @@
 # adminjs-components
 
+<a id="top"></a>
+
 Prebuilt AdminJS components and features for common UI needs: colored status
 badges, slug and UUID generation, Editor.js content, sortable string lists, tabs
 layout, and record preview.
@@ -46,6 +48,14 @@ You can also pass `componentLoader` into every feature instead of calling
 
 ## Components and features
 
+- [ColorStatus](#colorstatus)
+- [Slug](#slug)
+- [UUID](#uuid)
+- [Editor](#editor)
+- [StringList](#stringlist)
+- [Tabs](#tabs)
+- [Preview](#preview)
+
 ### ColorStatus
 
 Renders a colored badge in edit/list/show based on a list of available values.
@@ -68,6 +78,8 @@ features: [
 ]
 ```
 
+[Back to top](#top)
+
 ### Slug
 
 Generates a slug from another field and stores it in the target property.
@@ -85,6 +97,8 @@ features: [
 ]
 ```
 
+[Back to top](#top)
+
 ### UUID
 
 Adds a UUID field with a "Generate UUID" button in edit view.
@@ -101,10 +115,12 @@ features: [
 ]
 ```
 
+[Back to top](#top)
+
 ### Editor
 
 Editor.js field for rich content. Supports optional image upload via
-`@adminjs/upload` provider.
+`@adminjs/upload` provider, plus built-in audio and video blocks.
 
 ```ts
 import { EditorFeature } from "@rulab/adminjs-components";
@@ -123,6 +139,8 @@ features: [
 ]
 ```
 
+[Back to top](#top)
+
 ### StringList
 
 Sortable list stored as a single string (comma-separated by default).
@@ -139,6 +157,8 @@ features: [
 ]
 ```
 
+[Back to top](#top)
+
 ### Tabs
 
 Groups edit/show fields into tabs based on property `props.tab` or
@@ -163,6 +183,8 @@ properties: {
 },
 ```
 
+[Back to top](#top)
+
 ### Preview
 
 Adds a record action that renders an iframe preview. The `url` can include
@@ -179,6 +201,8 @@ features: [
 ]
 ```
 
+[Back to top](#top)
+
 ## Utilities
 
 - `setComponentLoader(loader)` and `getComponentLoader()` to reuse a single

package/dist/components/Editor/config.d.ts

@@ -26,4 +26,5 @@ export declare const EDITOR_TOOLS: {
         inlineToolbar: boolean;
     };
     audioPlayer: any;
+    video: any;
 };

package/dist/components/Editor/config.js

@@ -5,6 +5,8 @@ import Quote from "@editorjs/quote";
 import Table from "@editorjs/table";
 // @ts-ignore
 import AudioPlayer from "editorjs-audio-player";
+// @ts-ignore
+import SimpleVideo from "simple-video-editorjs";
 export const EDITOR_TOOLS = {
     paragraph: {
         class: Paragraph,
@@ -31,4 +33,5 @@ export const EDITOR_TOOLS = {
         inlineToolbar: true,
     },
     audioPlayer: AudioPlayer,
+    video: SimpleVideo,
 };

package/dist/utils/parseHtml.js

@@ -20,12 +20,20 @@ const tableParser = (block) => {
     }
 };
 const audioPlayerParser = (block) => {
-    return `<audio controls src={${block.data.src}} />`;
+    return `<audio controls src="${block.data.src}"></audio>`;
+};
+const videoParser = (block) => {
+    const controls = block.data.controls === false ? "" : " controls";
+    const autoplay = block.data.autoplay ? " autoplay" : "";
+    const muted = block.data.muted ? " muted" : "";
+    const caption = block.data.caption ? `<figcaption>${block.data.caption}</figcaption>` : "";
+    return `<figure><video src="${block.data.url}"${controls}${autoplay}${muted}></video>${caption}</figure>`;
 };
 export const parseHtml = (jsonData) => {
     const edjsParser = edjsHTML({
         table: tableParser,
         audioPlayer: audioPlayerParser,
+        video: videoParser,
     });
     try {
         const data = edjsParser.parse(JSON.parse(jsonData));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rulab/adminjs-components",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Prebuilt AdminJS features for common UI needs.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -51,6 +51,7 @@
     "editorjs-audio-player": "~0.0.3",
     "editorjs-html": "~3.4.3",
     "react-select": "^5.8.0",
+    "simple-video-editorjs": "~1.4.9",
     "slugify": "^1.6.6"
   },
   "peerDependencies": {