Implementing package @yoopta/renderer

package.json

@@ -5,7 +5,7 @@
   ],
   "private": true,
   "scripts": {
-    "start": "yarn lerna run start --scope @yoopta/editor --scope @yoopta/embed --scope @yoopta/action-menu-list --scope @yoopta/toolbar --scope @yoopta/paragraph --scope @yoopta/blockquote --scope @yoopta/headings --parallel --ignore development",
+    "start": "yarn lerna run start --scope @yoopta/editor --scope @yoopta/renderer --scope @yoopta/image --scope @yoopta/video --scope @yoopta/link --scope @yoopta/file --scope @yoopta/lists --scope @yoopta/paragraph --scope @yoopta/callout --scope @yoopta/blockquote --scope @yoopta/marks --scope @yoopta/headings --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": "cd ./packages/development && yarn dev",

packages/action-menu/package.json

@@ -14,7 +14,7 @@
     "dist/"
   ],
   "peerDependencies": {
-    "@yoopta/editor": ">=4.0.0-rc.0",
+    "@yoopta/editor": ">=4.0.0",
     "react": ">=17.0.2",
     "react-dom": ">=17.0.2"
   },

packages/blockquote/package.json

@@ -14,7 +14,7 @@
     "dist/"
   ],
   "peerDependencies": {
-    "@yoopta/editor": ">=4.0.0-rc.0",
+    "@yoopta/editor": ">=4.0.0",
     "react": ">=17.0.2",
     "react-dom": ">=17.0.2"
   },

packages/blockquote/src/index.ts

@@ -1,4 +1,5 @@
 import { Blockquote } from './plugin';
+import { BlockquoteRenderer } from './render/BlockquoteRenderer';
 import { BlockquoteElement } from './types';
 import './styles.css';
 
@@ -9,4 +10,4 @@ declare module 'slate' {
 }
 
 export default Blockquote;
-export { BlockquoteElement };
+export { BlockquoteElement, Blockquote, BlockquoteRenderer };

packages/blockquote/src/plugin/index.tsx

@@ -1,11 +1,15 @@
 import { YooptaPlugin } from '@yoopta/editor';
-import { BlockquoteRender } from '../ui/Blockquote';
+import { BlockquoteRenderer } from '../render/BlockquoteRenderer';
 
 const Blockquote = new YooptaPlugin({
   type: 'Blockquote',
   elements: {
     blockquote: {
-      render: BlockquoteRender,
+      render: (props) => (
+        <BlockquoteRenderer element={props.element} attributes={props.attributes} block={props.block}>
+          {props.children}
+        </BlockquoteRenderer>
+      ),
     },
   },
   options: {

packages/blockquote/src/ui/Blockquote.tsx → packages/blockquote/src/render/BlockquoteRenderer.tsx

@@ -1,25 +1,24 @@
-import { PluginElementRenderProps } from '@yoopta/editor';
+import type { ElementRendererProps } from '@yoopta/editor';
 
 const blockquoteStyles = {
   margin: '8px 0 0 0',
   border: 'none',
   borderLeft: '2px solid #e5e7eb',
 };
 
-const BlockquoteRender = (props: PluginElementRenderProps) => {
-  const { className = '', style, ...htmlAttrs } = props.HTMLAttributes || {};
+const BlockquoteRenderer = (props: ElementRendererProps) => {
+  const { className = '', style, ...attrs } = props.attributes || {};
 
   return (
     <blockquote
       data-element-type={props.element.type}
       className={`yoo-b-pl-6 yoo-b-leading-7 ${className}`}
-      {...htmlAttrs}
-      {...props.attributes}
       style={{ ...style, ...blockquoteStyles }}
+      {...attrs}
     >
       {props.children}
     </blockquote>
   );
 };
 
-export { BlockquoteRender };
+export { BlockquoteRenderer };

packages/callout/package.json

@@ -14,7 +14,7 @@
     "dist/"
   ],
   "peerDependencies": {
-    "@yoopta/editor": ">=4.0.0-rc.0",
+    "@yoopta/editor": ">=4.0.0",
     "react": ">=17.0.2",
     "react-dom": ">=17.0.2"
   },

packages/callout/src/editor/CalloutEditor.tsx

@@ -0,0 +1,20 @@
+import { PluginElementRenderProps, useYooptaEditor, useYooptaReadOnly } from '@yoopta/editor';
+import { CalloutBlockOptions } from '../components/CalloutBlockOptions';
+import { CalloutRenderer } from '../render/CalloutRenderer';
+
+const CalloutEditor = ({ element, attributes, children, blockId, block }: PluginElementRenderProps) => {
+  const editor = useYooptaEditor();
+  const isReadOnly = useYooptaReadOnly();
+  const { theme = 'default' } = element.props || {};
+
+  return (
+    <CalloutRenderer element={element} attributes={attributes} block={block}>
+      {!isReadOnly && <CalloutBlockOptions block={block} editor={editor} props={element.props} />}
+      {children}
+    </CalloutRenderer>
+  );
+};
+
+CalloutEditor.displayName = 'Callout';
+
+export { CalloutEditor };

packages/callout/src/index.ts

@@ -1,4 +1,5 @@
 import { Callout } from './plugin';
+import { CalloutRenderer } from './render/CalloutRenderer';
 import { CalloutElement } from './types';
 import './styles.css';
 
@@ -9,4 +10,4 @@ declare module 'slate' {
 }
 
 export default Callout;
-export { CalloutElement };
+export { CalloutElement, CalloutRenderer };

packages/callout/src/plugin/index.tsx

@@ -1,12 +1,16 @@
 import { YooptaPlugin } from '@yoopta/editor';
 import { CalloutElementProps, CalloutPluginElementKeys } from '../types';
-import { CalloutRender } from '../ui/Callout';
+import { CalloutEditor } from '../editor/CalloutEditor';
+import { CalloutRenderer } from '../render/CalloutRenderer';
 
 const Callout = new YooptaPlugin<CalloutPluginElementKeys, CalloutElementProps>({
   type: 'Callout',
   elements: {
     callout: {
-      render: CalloutRender,
+      render: {
+        editor: CalloutEditor,
+        renderer: CalloutRenderer,
+      },
       props: {
         theme: 'default',
       },

packages/callout/src/render/CalloutRenderer.tsx

@@ -0,0 +1,18 @@
+import { ElementRendererProps } from '@yoopta/editor';
+import { CALLOUT_THEME_STYLES } from '../utils';
+
+export const CalloutRenderer = ({ element, attributes, children }: ElementRendererProps) => {
+  const { theme = 'default' } = element.props || {};
+  const style = CALLOUT_THEME_STYLES[theme];
+
+  return (
+    <div
+      data-element-type={element.type}
+      {...attributes}
+      className={`yoo-callout-rounded-md yoo-callout-mt-2 yoo-callout-p-2 yoo-callout-pl-4 yoo-callout-leading-7 yoo-callout-bg-info yoo-callout-text-info-foreground yoo-callout-text-[16px] yoopta-callout-theme-${theme} ${attributes?.className}`}
+      style={{ ...attributes.style, ...style }}
+    >
+      {children}
+    </div>
+  );
+};

packages/code/package.json

@@ -14,7 +14,7 @@
     "dist/"
   ],
   "peerDependencies": {
-    "@yoopta/editor": ">=4.0.0-rc.0",
+    "@yoopta/editor": ">=4.0.0",
     "react": ">=17.0.2",
     "react-dom": ">=17.0.2"
   },

packages/core/src/components/Editor/dnd.ts

@@ -7,7 +7,7 @@ export const useYooptaDragDrop = ({ editor }: { editor: YooEditor }) => {
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: {
-        delay: 100,
+        delay: 10,
         tolerance: 0,
       },
     }),

packages/core/src/index.ts

@@ -30,6 +30,7 @@ export {
   PluginElementRenderProps,
   PluginEventHandlerOptions,
   PluginCustomEditorRenderProps,
+  ElementRendererProps,
   YooptaMarkProps,
 } from './plugins/types';
 

packages/core/src/plugins/SlateEditorComponent.tsx

@@ -1,10 +1,16 @@
-import React, { memo, useCallback, useMemo, useRef } from 'react';
+import React, { memo, ReactComponentElement, ReactElement, ReactNode, useCallback, useMemo, useRef } from 'react';
 import { DefaultElement, Editable, RenderElementProps, Slate } from 'slate-react';
 import { useYooptaEditor, useBlockData } from '../contexts/YooptaContext/YooptaContext';
 import { EVENT_HANDLERS } from '../handlers';
 import { YooptaMark } from '../marks';
 
-import { ExtendedLeafProps, PluginCustomEditorRenderProps, PluginEventHandlerOptions, Plugin } from './types';
+import {
+  ExtendedLeafProps,
+  PluginCustomEditorRenderProps,
+  PluginEventHandlerOptions,
+  Plugin,
+  PluginElementsMap,
+} from './types';
 import { EditorEventHandlers } from '../types/eventHandlers';
 import { HOTKEYS } from '../utils/hotkeys';
 import { Editor, NodeEntry, Range } from 'slate';
@@ -24,9 +30,13 @@ type Props<TKeys extends string, TProps, TOptions> = Plugin<TKeys, TProps, TOpti
   placeholder?: string;
 };
 
-const getMappedElements = (elements) => {
+const getMappedElements = (elements: PluginElementsMap) => {
   const mappedElements = {};
-  Object.keys(elements).forEach((type) => (mappedElements[type] = elements[type].render));
+  Object.keys(elements).forEach((type) => {
+    const render = elements[type].render?.editor ? elements[type].render?.editor : elements[type].render;
+    mappedElements[type] = render;
+  });
+
   return mappedElements;
 };
 
@@ -50,7 +60,6 @@ const SlateEditorComponent = <TKeys extends string, TProps, TOptions>({
   const editor = useYooptaEditor();
   const block = useBlockData(id);
   const initialValue = useRef(block.value).current;
-  const type = block.type;
 
   const ELEMENTS_MAP = useMemo(() => getMappedElements(elements), [elements]);
   const MARKS_MAP = useMemo(() => getMappedMarks(marks), [marks]);
@@ -113,9 +122,12 @@ const SlateEditorComponent = <TKeys extends string, TProps, TOptions>({
   const renderElement = useCallback(
     (props: RenderElementProps) => {
       const ElementComponent = ELEMENTS_MAP[props.element.type];
+      const { attributes: slateElementAttributes, ...elementProps } = props;
+
+      const attributes = { ...options?.HTMLAttributes, ...slateElementAttributes };
 
       if (!ElementComponent) return <DefaultElement {...props} />;
-      return <ElementComponent {...props} blockId={id} HTMLAttributes={options?.HTMLAttributes} />;
+      return <ElementComponent {...elementProps} attributes={attributes} block={block} blockId={id} />;
     },
     [elements],
   );
@@ -247,7 +259,7 @@ const SlateEditorComponent = <TKeys extends string, TProps, TOptions>({
   );
 
   return (
-    <div data-plugin-id={id} data-plugin-type={type}>
+    <div>
       <SlateEditorInstance
         id={id}
         slate={slate}

packages/core/src/plugins/types.ts

@@ -27,20 +27,29 @@ export type PluginElementOptions = {
   draggable?: boolean;
 };
 
-export type PluginElementRenderProps = RenderSlateElementProps & {
+export type PluginElementRenderProps = Omit<RenderSlateElementProps, 'attributes'> & {
   blockId: string;
-  HTMLAttributes?: HTMLAttributes<HTMLElement>;
+  block: YooptaBlockData;
+  attributes: RenderSlateElementProps['attributes'] & HTMLAttributes<HTMLElement>;
 };
 
+export type ElementRendererProps = Omit<PluginElementRenderProps, 'blockId'>;
+
 export type PluginCustomEditorRenderProps = {
   blockId: string;
 };
 
 export type PluginDefaultProps = { nodeType?: 'block' | 'inline' | 'void' | 'inlineVoid' };
 export type PluginElementProps<T> = PluginDefaultProps & T;
 
+type PluginElementRenderJustFn = (props: PluginElementRenderProps) => JSX.Element;
+type PluginElementRenderWithEditor = {
+  editor: (props: PluginElementRenderProps) => JSX.Element;
+  renderer: (props: ElementRendererProps) => JSX.Element;
+};
+
 export type PluginElement<T> = {
-  render: (props: PluginElementRenderProps) => JSX.Element;
+  render: PluginElementRenderWithEditor | PluginElementRenderJustFn;
   props?: PluginElementProps<T>;
   options?: PluginElementOptions;
   asRoot?: boolean;

packages/development/package.json

@@ -27,6 +27,7 @@
     "@yoopta/table": "*",
     "@yoopta/toolbar": "*",
     "@yoopta/video": "*",
+    "@yoopta/renderer": "*",
     "classnames": "^2.5.1",
     "katex": "^0.16.10",
     "lucide-react": "^0.365.0",