Add extending for plugins with custom rendering

package.json

@@ -9,7 +9,7 @@
   ],
   "private": true,
   "scripts": {
-    "start": "yarn lerna run start --scope @yoopta/editor --parallel --ignore development",
+    "start": "yarn lerna run start --scope @yoopta/editor --scope @yoopta/paragraph --scope @yoopta/lists --scope @yoopta/video --scope @yoopta/accordion --scope @yoopta/embed --scope @yoopta/image --scope @yoopta/link --scope @yoopta/video --scope @yoopta/file --parallel --ignore development",
     "build": "yarn clean && yarn lerna run build --parallel --ignore development",
     "clean": "find ./packages -type d -name dist ! -path './packages/development/*' -exec rm -rf {} +",
     "serve": "yarn lerna run dev --scope=development",

packages/core/editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/editor",
-  "version": "4.6.2",
+  "version": "4.6.3-rc.0",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

packages/core/editor/src/plugins/createYooptaPlugin.tsx

@@ -6,7 +6,7 @@ export type ExtendPluginRender<TKeys extends string> = {
 };
 
 export type ExtendPlugin<TKeys extends string, TOptions> = {
-  renders?: ExtendPluginRender<TKeys>;
+  renders?: Partial<ExtendPluginRender<TKeys>>;
   options?: Partial<PluginOptions<TOptions>>;
 };
 
@@ -30,8 +30,15 @@ export class YooptaPlugin<TKeys extends string = string, TProps = Descendant, TO
     if (renders) {
       Object.keys(renders).forEach((elementType) => {
         const element = elements[elementType];
+
         if (element && element.render) {
-          elements[elementType].render = (props) => renders[elementType](props);
+          const customRenderFn = renders[elementType];
+
+          let elementRender = element.render;
+
+          element.render = (props) => {
+            return elementRender({ ...props, extendRender: customRenderFn });
+          };
         }
       });
     }

packages/core/editor/src/plugins/types.ts

@@ -26,11 +26,15 @@ export type PluginElementOptions = {
   draggable?: boolean;
 };
 
-export type PluginElementRenderProps = RenderSlateElementProps & {
+export type PluginElementExtendRenderProps = RenderSlateElementProps & {
   blockId: string;
   HTMLAttributes?: HTMLAttributes<HTMLElement>;
 };
 
+export type PluginElementRenderProps = PluginElementExtendRenderProps & {
+  extendRender?: (props: PluginElementExtendRenderProps) => JSX.Element;
+};
+
 export type PluginCustomEditorRenderProps = {
   blockId: string;
 };

packages/core/exports/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/exports",
-  "version": "4.6.2",
+  "version": "4.6.3-rc.0",
   "description": "Serialize/deserialize exports in different formats for Yoopta-Editor",
   "author": "Darginec05 <[email protected]>",
   "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme",

packages/development/next.config.mjs

@@ -4,6 +4,9 @@ const nextConfig = {
   typescript: {
     ignoreBuildErrors: true,
   },
+  images: {
+    domains: ['res.cloudinary.com'],
+  },
 };
 
 export default nextConfig;

packages/development/package.json

@@ -9,12 +9,15 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.11",
+    "@radix-ui/react-checkbox": "^1.1.1",
+    "@yoopta/accordion": "*",
     "@yoopta/action-menu-list": "*",
     "@yoopta/blockquote": "*",
     "@yoopta/callout": "*",
     "@yoopta/code": "*",
     "@yoopta/editor": "*",
     "@yoopta/embed": "*",
+    "@yoopta/exports": "*",
     "@yoopta/file": "*",
     "@yoopta/headings": "*",
     "@yoopta/image": "*",
@@ -27,8 +30,6 @@
     "@yoopta/table": "*",
     "@yoopta/toolbar": "*",
     "@yoopta/video": "*",
-    "@yoopta/exports": "*",
-    "@yoopta/accordion": "*",
     "classnames": "^2.5.1",
     "katex": "^0.16.10",
     "lucide-react": "^0.378.0",

packages/development/src/components/Extends/Checkbox/Checkbox.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import cn from 'classnames';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { CheckIcon } from '@radix-ui/react-icons';
+
+type CheckboxPrimitiveProps = React.ComponentProps<typeof CheckboxPrimitive.Root>;
+
+const CheckboxShadcn = ({ className, ...props }: CheckboxPrimitiveProps) => (
+  <CheckboxPrimitive.Root
+    autoFocus={false}
+    className={cn(
+      'peer h-4 w-4 shrink-0 rounded-sm border border-[#18181b] shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-[#18181b] data-[state=checked]:text-[#fafafa]',
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
+      <CheckIcon className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+);
+
+CheckboxShadcn.displayName = CheckboxPrimitive.Root.displayName;
+
+type Props = React.ComponentProps<typeof CheckboxShadcn>;
+
+export function Checkbox({ name, checked, onCheckedChange: onChange, value, children, attributes, ...props }: Props) {
+  return (
+    <div className="flex flex-row items-start space-x-3 mt-4" {...attributes}>
+      <CheckboxShadcn id={name} checked={checked} value={value} onCheckedChange={onChange} {...props} />
+      <div className="grid gap-1.5 leading-none">
+        <span
+          // htmlFor={name}
+          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+        >
+          {children}
+        </span>
+      </div>
+    </div>
+  );
+}

packages/development/src/components/Extends/Image/Image.tsx

@@ -0,0 +1,36 @@
+import { PluginElementRenderProps, useBlockData } from '@yoopta/editor';
+import NextImage, { ImageProps } from 'next/image';
+
+export const YooptaWithNextImage = (props: PluginElementRenderProps) => {
+  const { children, element, blockId, attributes } = props;
+  const block = useBlockData(blockId);
+  const isFill = element.props.fit === 'fill';
+
+  const imageProps: Pick<ImageProps, 'fill' | 'style' | 'width' | 'height'> = {
+    fill: isFill,
+    style: {
+      objectFit: isFill ? 'cover' : 'contain',
+    },
+  };
+
+  if (!imageProps.fill) {
+    imageProps.width = element.props.sizes.width;
+    imageProps.height = element.props.sizes.height;
+    imageProps.style!.width = element.props.sizes.width;
+    imageProps.style!.height = element.props.sizes.height;
+  }
+
+  return (
+    <div contentEditable={false} {...attributes}>
+      <NextImage
+        draggable={false}
+        src={element.props.src}
+        alt={element.props.alt}
+        priority={block.meta.order === 0}
+        objectFit={element.props.fit}
+        {...imageProps}
+      />
+      {children}
+    </div>
+  );
+};