@soul-refiner/design-system 1.3.3 → 1.4.1

package/dist/components/editor/constants.d.ts

@@ -13,12 +13,12 @@ export declare const DEFAULT_CONTENT: ({
     }[];
     questionAnswerId: string;
     type: string;
-    thumbnail?: undefined;
+    id?: undefined;
 } | {
     children: {
         text: string;
     }[];
-    thumbnail: string;
+    id: number;
     type: string;
     questionAnswerId?: undefined;
 } | {
@@ -27,5 +27,5 @@ export declare const DEFAULT_CONTENT: ({
     }[];
     type: string;
     questionAnswerId?: undefined;
-    thumbnail?: undefined;
+    id?: undefined;
 })[];

package/dist/components/editor/constants.js

@@ -28,10 +28,10 @@ export const DEFAULT_CONTENT = [
     {
         children: [
             {
-                text: 'Episode 2: A Warrior’s Roadmap',
+                text: '',
             },
         ],
-        thumbnail: 'https://f005.backblazeb2.com/file/sr-platform/f7a84d1f4e70a940b63d7d6d96beab68.jpg',
+        id: 1,
         type: ELEMENT_VIDEO,
     },
     {

package/dist/components/editor/context.d.ts

@@ -7,4 +7,7 @@ export declare const EditorContext: React.Context<{
         questionAnswerId: string;
     }) => React.ReactElement;
     handleVideoClick?: ((id: number) => void) | undefined;
+    videoTitleLoader: (props: {
+        courseMediaId: number;
+    }) => React.ReactElement;
 }>;

package/dist/components/editor/context.js

@@ -3,4 +3,5 @@ export const EditorContext = React.createContext({
     commentInputLoader: () => React.createElement(React.Fragment, null),
     commentLoader: () => React.createElement(React.Fragment, null),
     handleVideoClick: () => undefined,
+    videoTitleLoader: () => React.createElement(React.Fragment, null),
 });

package/dist/components/editor/editor.d.ts

@@ -13,6 +13,9 @@ export interface EditorProps {
     handleVideoClick?: (id: number) => void;
     onChange: (newNodes: TElement[]) => void;
     previousContent?: TElement[];
+    videoTitleLoader: (props: {
+        courseMediaId: number;
+    }) => React.ReactElement;
 }
 export type EditorContent = TElement;
-export declare const Editor: ({ commentInputLoader, commentLoader, editable, handleUploadImage, handleVideoClick, onChange, previousContent, }: EditorProps) => React.JSX.Element;
+export declare const Editor: ({ commentInputLoader, commentLoader, editable, handleUploadImage, handleVideoClick, onChange, previousContent, videoTitleLoader, }: EditorProps) => React.JSX.Element;

package/dist/components/editor/editor.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { createPlugins, Plate, PlateContent } from '@udecode/plate';
-import { DEFAULT_CONTENT, PLACEHOLDER } from './constants';
+import { PLACEHOLDER } from './constants';
 import { EditorContext } from './context';
 import { EditorBar } from './navbar';
 import { plateUI } from './plate';
@@ -10,11 +10,12 @@ import { blocks, inline, marks, utils } from './plugins';
 const plugins = createPlugins([...blocks, ...inline, ...marks, ...utils], {
     components: plateUI,
 });
-export const Editor = ({ commentInputLoader, commentLoader, editable, handleUploadImage, handleVideoClick, onChange, previousContent = DEFAULT_CONTENT, }) => {
+export const Editor = ({ commentInputLoader, commentLoader, editable, handleUploadImage, handleVideoClick, onChange, previousContent, videoTitleLoader, }) => {
     return (React.createElement(EditorContext.Provider, { value: {
             commentInputLoader,
             commentLoader,
             handleVideoClick,
+            videoTitleLoader,
         } },
         React.createElement(Plate, { id: "main", initialValue: previousContent, onChange: onChange, plugins: plugins },
             React.createElement(Wrapper, null,

package/dist/components/editor/plugins/video.js

@@ -1,33 +1,25 @@
 import React from 'react';
 import { createPluginFactory, isEditorReadOnly, PlateElement, } from '@udecode/plate';
-import Image from 'next/image';
 import { ELEMENT_H2, ELEMENT_VIDEO } from '../constants';
 import { EditorContext } from '../context';
-import { Box } from '../../atoms/box';
-import { H } from '../../atoms/typography';
-import { PlaySolid } from '../../../icons/audio_video/play_solid';
-export const VideoTitleElement = React.forwardRef(function VideoTitle({ children, editor, element, ...props }, ref) {
+export const VideoTitleElement = React.forwardRef(function VideoTitle({ editor, element, ...props }, ref) {
     const editable = !isEditorReadOnly(editor);
-    const { thumbnail, id } = element;
-    const { handleVideoClick } = React.useContext(EditorContext);
+    const { id } = element;
+    const { handleVideoClick, videoTitleLoader: VideoTitle } = React.useContext(EditorContext);
     const handleClick = () => {
         if (handleVideoClick && !editable) {
             handleVideoClick(id);
         }
     };
     return (React.createElement(PlateElement, { asChild: true, editor: editor, element: element, ref: ref, ...props },
-        React.createElement(Box, { "$align": "center", "$gap": 24, onClick: handleClick, sx: editable ? '' : 'cursor: pointer;', ...{ contentEditable: false } },
-            React.createElement(Box, { "$align": "center", "$justify": "center", sx: "position: relative;" },
-                React.createElement(Image, { alt: "thumbnail", height: 96, src: thumbnail, style: {
-                        borderRadius: '8px',
-                    }, width: 171 }),
-                React.createElement(PlaySolid, { color: "white", size: 32, sx: "position: absolute;" })),
-            React.createElement(H, { as: "h2", "$bold": true, "$color": "grey-2", "$fontSize": 24, "$lineHeight": 36, "$textClampLines": 3 }, children))));
+        React.createElement("div", { contentEditable: false, onClick: handleClick, style: { cursor: editable ? 'initial' : 'pointer' } },
+            React.createElement(VideoTitle, { courseMediaId: id }))));
 });
 export const createVideoTitlePlugin = createPluginFactory({
     key: ELEMENT_VIDEO,
     type: ELEMENT_VIDEO,
     isElement: true,
+    isVoid: true,
     component: VideoTitleElement,
     then: () => ({
         inject: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "1.3.3",
+  "version": "1.4.1",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {