126 bug dont use id=yoopta editor and make it possible to have multiple independend editors on the page

README.md

@@ -129,6 +129,8 @@ type YooptaEditor = {
   readOnly?: boolean;
   /* Width. [Default] - 450px  */
   width?: number | string;
+  /* Id for your editor instance. Can be useful for multiple editors */
+  id?: number | string;
 };
 ```
 
@@ -315,7 +317,9 @@ If you have any questions or need assistance raise an issue in the GitHub reposi
 Let's create powerful and engaging editing experiences together with Yoopta-Editor!
 
 ## Contributing
-If you're ready to support Yoopta-Editor, here's how you can do it: 
+
+If you're ready to support Yoopta-Editor, here's how you can do it:
+
 - If you've spotted a bug or thinking of a feature [raise an issue](https://github.com/Darginec05/Yoopta-Editor/issues/new/choose)
 - If you want to collaborate on the project, find an issue you like to work on and suggest your changes.
 - If you want to discuss your idea feel free to create a [discussion](https://github.com/Darginec05/Yoopta-Editor/discussions/new/choose)

config/rollup.js

@@ -39,7 +39,6 @@ function getPlugins({ tailwindConfig }) {
       use: ['sass'],
       plugins: [
         postcssNesting(),
-        postcssScope({ scope: '#yoopta-editor' }),
         tailwindcss({
           theme: {
             extend: {},

package.json

@@ -5,7 +5,7 @@
   ],
   "private": true,
   "scripts": {
-    "start": "yarn lerna run start --scope @yoopta/editor --scope @yoopta/image --scope @yoopta/action-menu-list --scope @yoopta/video --scope @yoopta/paragraph --scope @yoopta/blockquote --scope @yoopta/headings --parallel --ignore development",
+    "start": "yarn lerna run start --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

@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/action-menu-list",
-  "version": "4.2.0",
+  "version": "4.3.0-alpha.0",
   "description": "ActionMenuList tool for Yoopta Editor",
   "author": "Darginec05 <[email protected]>",
   "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme",

packages/action-menu/src/components/ActionMenuList.tsx

@@ -1,15 +1,6 @@
-import { useEffect, useLayoutEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { DefaultActionMenuRender } from './DefaultActionMenuRender';
-import {
-  useFloating,
-  offset,
-  flip,
-  shift,
-  inline,
-  autoUpdate,
-  FloatingPortal,
-  useTransitionStyles,
-} from '@floating-ui/react';
+import { useFloating, offset, flip, shift, inline, autoUpdate, useTransitionStyles } from '@floating-ui/react';
 import { Editor, Path } from 'slate';
 import {
   YooptaBlockData,
@@ -18,11 +9,13 @@ import {
   findSlateBySelectionPath,
   HOTKEYS,
   findPluginBlockBySelectionPath,
-  YooEditor,
+  UI,
 } from '@yoopta/editor';
 import { ActionMenuRenderProps, ActionMenuToolItem, ActionMenuToolProps } from '../types';
 import { buildActionMenuRenderProps, mapActionMenuItems } from './utils';
 
+const { Portal } = UI;
+
 const filterBy = (item: YooptaBlockData | YooptaBlock['options'], text: string, field: string) => {
   if (!item || !item?.[field]) return false;
   const itemField = Array.isArray(item[field]) ? item[field].join(' ') : item[field];
@@ -82,7 +75,7 @@ const ActionMenuList = ({ items, render }: ActionMenuToolProps) => {
   };
 
   useEffect(() => {
-    const yooptaEditorRef = document.getElementById('yoopta-editor');
+    const yooptaEditorRef = document.querySelector(`[data-yoopta-editor-id="${editor.id}"]`);
     updateActionMenuPosition();
 
     const handleActionMenuKeyUp = (event: KeyboardEvent) => {
@@ -103,6 +96,7 @@ const ActionMenuList = ({ items, render }: ActionMenuToolProps) => {
       const slateEditorRef = event.currentTarget as HTMLElement;
 
       const isInsideEditor = slateEditorRef?.contains(event.target as Node);
+
       const pluginWithCustomEditor = document.querySelector('[data-custom-editor]');
       const isInsideCustomEditor = pluginWithCustomEditor?.contains(event.target as Node);
 
@@ -281,37 +275,31 @@ const ActionMenuList = ({ items, render }: ActionMenuToolProps) => {
     return () => clearTimeout(timeout);
   }, [actions.length, isMenuOpen]);
 
-  if (!isMounted) return null;
-
   const style = { ...floatingStyles, ...transitionStyles };
 
   if (render) {
     return (
       // [TODO] - take care about SSR
-      <FloatingPortal id="yoo-action-menu-list-portal" root={document.getElementById('yoopta-editor')}>
-        <div
-          className="yoo-action-menu-absolute yoo-action-menu-z-[9999] yoo-action-menu-m-0 yoo-action-menu-left-0 yoo-action-menu-top-0 yoo-action-menu-right-auto yoo-action-menu-bottom-auto"
-          style={style}
-          ref={refs.setFloating}
-        >
-          {/* [TODO] - pass key down handler */}
-          {render({ ...renderProps, actions })}
-        </div>
-      </FloatingPortal>
+      <Portal id="yoo-action-menu-list-portal">
+        {isMounted && (
+          <div className="yoopta-action-menu-list" style={style} ref={refs.setFloating}>
+            {/* [TODO] - pass key down handler */}
+            {render({ ...renderProps, actions })}
+          </div>
+        )}
+      </Portal>
     );
   }
 
   return (
     // [TODO] - take care about SSR
-    <FloatingPortal id="yoo-action-menu-list-portal" root={document.getElementById('yoopta-editor')}>
-      <div
-        className="yoo-action-menu-absolute yoo-action-menu-z-[9999] yoo-action-menu-m-0 yoo-action-menu-left-0 yoo-action-menu-top-0 yoo-action-menu-right-auto yoo-action-menu-bottom-auto"
-        style={style}
-        ref={refs.setFloating}
-      >
-        <DefaultActionMenuRender {...renderProps} actions={actions} />
-      </div>
-    </FloatingPortal>
+    <Portal id="yoo-action-menu-list-portal">
+      {isMounted && (
+        <div className="yoopta-action-menu-list" style={style} ref={refs.setFloating}>
+          <DefaultActionMenuRender {...renderProps} actions={actions} />
+        </div>
+      )}
+    </Portal>
   );
 };
 

packages/action-menu/src/components/DefaultActionMenuRender.tsx

@@ -34,10 +34,7 @@ const DefaultActionMenuRender = ({
   };
 
   return (
-    <div
-      style={wrapStyles}
-      className="yoo-action-menu-bg-[#FFFFFF] yoo-action-menu-z-50 yoo-action-menu-h-auto yoo-action-menu-max-h-[330px] yoo-action-menu-w-72 yoo-action-menu-overflow-y-auto yoo-action-menu-rounded-md yoo-action-menu-border yoo-action-menu-border-solid yoo-action-menu-border-[#e5e7eb] yoo-action-menu-border-muted yoo-action-menu-bg-background yoo-action-menu-px-1 yoo-action-menu-py-2 yoo-action-menu-transition-all yoo-action-menu-shadow-md"
-    >
+    <div style={wrapStyles} className="yoopta-action-menu-list-content">
       <div className="yoo-action-menu-max-h-[300px] yoo-action-menu-overflow-y-auto yoo-action-menu-overflow-x-hidden">
         <div
           {...getRootProps()}
@@ -61,7 +58,7 @@ const DefaultActionMenuRender = ({
               <button
                 key={action.type}
                 {...getItemProps(action.type)}
-                className="yoo-action-menu-flex yoo-action-menu-w-full yoo-action-menu-cursor-pointer yoo-action-menu-items-center yoo-action-menu-space-x-2 yoo-action-menu-rounded-md yoo-action-menu-px-1 yoo-action-menu-py-1 yoo-action-menu-mb-0.5 last:yoo-action-menu-mb-0 yoo-action-menu-text-left yoo-action-menu-text-sm hover:yoo-action-menu-bg-[#f4f4f5] aria-selected:yoo-action-menu-bg-[#f0f0f0]"
+                className="yoopta-button yoo-action-menu-flex yoo-action-menu-w-full yoo-action-menu-cursor-pointer yoo-action-menu-items-center yoo-action-menu-space-x-2 yoo-action-menu-rounded-md yoo-action-menu-px-1 yoo-action-menu-py-1 yoo-action-menu-mb-0.5 last:yoo-action-menu-mb-0 yoo-action-menu-text-left yoo-action-menu-text-sm hover:yoo-action-menu-bg-[#f4f4f5] aria-selected:yoo-action-menu-bg-[#f0f0f0]"
               >
                 <div
                   style={iconWrapStyles}

packages/action-menu/src/styles.css

@@ -1 +1,9 @@
-@tailwind utilities;
+@tailwind utilities;
+
+.yoopta-action-menu-list {
+  @apply yoo-action-menu-absolute yoo-action-menu-z-[9999] yoo-action-menu-m-0 yoo-action-menu-left-0 yoo-action-menu-top-0 yoo-action-menu-right-auto yoo-action-menu-bottom-auto
+}
+
+.yoopta-action-menu-list-content {
+  @apply yoo-action-menu-bg-[#FFFFFF] yoo-action-menu-z-50 yoo-action-menu-h-auto yoo-action-menu-max-h-[330px] yoo-action-menu-w-72 yoo-action-menu-overflow-y-auto yoo-action-menu-rounded-md yoo-action-menu-border yoo-action-menu-border-solid yoo-action-menu-border-[#e5e7eb] yoo-action-menu-px-1 yoo-action-menu-py-2 yoo-action-menu-transition-all yoo-action-menu-shadow-md
+}

packages/blockquote/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/blockquote",
-  "version": "4.2.0",
+  "version": "4.3.0-alpha.0",
   "description": "Blockquote plugin for Yoopta Editor",
   "author": "Darginec05 <[email protected]>",
   "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme",

packages/blockquote/src/styles.css

@@ -1 +1,5 @@
-@tailwind utilities;
+@tailwind utilities;
+
+.yoopta-blockquote {
+  @apply yoo-b-pl-6 yoo-b-leading-7 yoo-b-m-0 yoo-b-mt-[8px] yoo-b-border-l-2 yoo-b-border-l-[#e5e7eb]
+}

packages/blockquote/src/ui/Blockquote.tsx

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

packages/callout/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/callout",
-  "version": "4.2.0",
+  "version": "4.3.0-alpha.0",
   "description": "Callout plugin for Yoopta Editor",
   "author": "Darginec05 <[email protected]>",
   "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme",

packages/callout/src/styles.css

@@ -7,4 +7,28 @@
 
 .yoopta-callout:hover .yoopta-callout-options {
   opacity: 1;
+}
+
+.yoopta-callout {
+  @apply yoo-callout-rounded-md yoo-callout-mt-2 yoo-callout-p-2 yoo-callout-pl-4 yoo-callout-leading-7 yoo-callout-text-[16px]
+}
+
+.yoopta-callout-theme-default {
+  @apply yoo-callout-text-[#000] yoo-callout-bg-[#f5f7f9]
+}
+
+.yoopta-callout-theme-info {
+  @apply yoo-callout-text-[#08a2e7] yoo-callout-bg-[#e1f3fe] yoo-callout-border-l-4 yoo-callout-border-l-[#08a2e7]
+}
+
+.yoopta-callout-theme-success {
+  @apply yoo-callout-text-[#12b77f] yoo-callout-bg-[#d1fae5] yoo-callout-border-l-4 yoo-callout-border-l-[#12b77f]
+}
+
+.yoopta-callout-theme-warning {
+  @apply yoo-callout-text-[#f97415] yoo-callout-bg-[#fef3c9] yoo-callout-border-l-4 yoo-callout-border-l-[#f97415]
+}
+
+.yoopta-callout-theme-error {
+  @apply yoo-callout-text-[#ee4443] yoo-callout-bg-[#fee1e2] yoo-callout-border-l-4 yoo-callout-border-l-[#ee4443]
 }

packages/callout/src/ui/Callout.tsx

@@ -1,5 +1,4 @@
 import { PluginElementRenderProps, useBlockData, useYooptaEditor, useYooptaReadOnly } from '@yoopta/editor';
-import { CALLOUT_THEME_STYLES } from '../utils';
 import { CalloutBlockOptions } from './CalloutBlockOptions';
 
 const CalloutRender = ({ element, attributes, children, blockId, HTMLAttributes = {} }: PluginElementRenderProps) => {
@@ -9,13 +8,11 @@ const CalloutRender = ({ element, attributes, children, blockId, HTMLAttributes
   const editor = useYooptaEditor();
   const isReadOnly = useYooptaReadOnly();
   const { theme = 'default' } = element.props || {};
-  const styles = CALLOUT_THEME_STYLES[theme];
 
   return (
     <div
       data-element-type={element.type}
-      style={styles}
-      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} ${className}`}
+      className={`yoopta-callout yoopta-callout-theme-${theme} ${className}`}
       {...htmlAttrs}
       {...attributes}
     >

packages/callout/src/ui/CalloutBlockOptions.tsx

@@ -32,7 +32,7 @@ const CalloutBlockOptions = ({ editor, block, props: calloutProps }: Props) => {
         <BlockOptionsMenuItem>
           <button
             type="button"
-            className="yoo-callout-rounded-sm yoo-callout-justify-between hover:yoo-callout-bg-[#37352f14] yoo-callout-leading-[120%] yoo-callout-px-2 yoo-callout-py-1.5 yoo-callout-mx-[4px] yoo-callout-cursor-pointer yoo-callout-w-full yoo-callout-flex yoo-callout-justify-start"
+            className="yoopta-block-options-button yoo-callout-justify-between"
             onClick={() => onChangeTheme('default')}
             style={{
               backgroundColor: isActiveTheme('default') ? CALLOUT_THEME_STYLES.default.backgroundColor : undefined,
@@ -55,7 +55,7 @@ const CalloutBlockOptions = ({ editor, block, props: calloutProps }: Props) => {
         <BlockOptionsMenuItem>
           <button
             type="button"
-            className="yoo-callout-rounded-sm yoo-callout-justify-between hover:yoo-callout-bg-[#37352f14] yoo-callout-leading-[120%] yoo-callout-px-2 yoo-callout-py-1.5 yoo-callout-mx-[4px] yoo-callout-cursor-pointer yoo-callout-w-full yoo-callout-flex yoo-callout-justify-start"
+            className="yoopta-block-options-button yoo-callout-justify-between"
             onClick={() => onChangeTheme('info')}
             style={{ backgroundColor: isActiveTheme('info') ? CALLOUT_THEME_STYLES.info.backgroundColor : undefined }}
           >
@@ -76,7 +76,7 @@ const CalloutBlockOptions = ({ editor, block, props: calloutProps }: Props) => {
         <BlockOptionsMenuItem>
           <button
             type="button"
-            className="yoo-callout-rounded-sm yoo-callout-justify-between hover:yoo-callout-bg-[#37352f14] yoo-callout-leading-[120%] yoo-callout-px-2 yoo-callout-py-1.5 yoo-callout-mx-[4px] yoo-callout-cursor-pointer yoo-callout-w-full yoo-callout-flex yoo-callout-justify-start"
+            className="yoopta-block-options-button yoo-callout-justify-between"
             onClick={() => onChangeTheme('success')}
             style={{
               backgroundColor: isActiveTheme('success') ? CALLOUT_THEME_STYLES.success.backgroundColor : undefined,
@@ -99,7 +99,7 @@ const CalloutBlockOptions = ({ editor, block, props: calloutProps }: Props) => {
         <BlockOptionsMenuItem>
           <button
             type="button"
-            className="yoo-callout-rounded-sm yoo-callout-justify-between hover:yoo-callout-bg-[#37352f14] yoo-callout-leading-[120%] yoo-callout-px-2 yoo-callout-py-1.5 yoo-callout-mx-[4px] yoo-callout-cursor-pointer yoo-callout-w-full yoo-callout-flex yoo-callout-justify-start"
+            className="yoopta-block-options-button yoo-callout-justify-between"
             onClick={() => onChangeTheme('warning')}
             style={{
               backgroundColor: isActiveTheme('warning') ? CALLOUT_THEME_STYLES.warning.backgroundColor : undefined,
@@ -122,7 +122,7 @@ const CalloutBlockOptions = ({ editor, block, props: calloutProps }: Props) => {
         <BlockOptionsMenuItem>
           <button
             type="button"
-            className="yoo-callout-rounded-sm yoo-callout-justify-between hover:yoo-callout-bg-[#37352f14] yoo-callout-leading-[120%] yoo-callout-px-2 yoo-callout-py-1.5 yoo-callout-mx-[4px] yoo-callout-cursor-pointer yoo-callout-w-full yoo-callout-flex yoo-callout-justify-start"
+            className="yoopta-block-options-button yoo-callout-justify-between"
             onClick={() => onChangeTheme('error')}
             style={{ backgroundColor: isActiveTheme('error') ? CALLOUT_THEME_STYLES.error.backgroundColor : undefined }}
           >

packages/code/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/code",
-  "version": "4.2.0",
+  "version": "4.3.0-alpha.0",
   "description": "Code plugin with syntax highlighting for Yoopta Editor",
   "author": "Darginec05 <[email protected]>",
   "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme",

packages/code/src/ui/CodeBlockOptions.tsx

@@ -44,11 +44,7 @@ export const CodeBlockOptions = ({ block, editor, element }: Props) => {
       <BlockOptionsSeparator />
       <BlockOptionsMenuGroup>
         <BlockOptionsMenuItem>
-          <button
-            type="button"
-            className="yoo-code-rounded-sm hover:yoo-code-bg-[#37352f14] yoo-code-leading-[120%] yoo-code-px-2 yoo-code-py-1.5 yoo-code-mx-[4px] yoo-code-cursor-pointer yoo-code-w-full yoo-code-flex yoo-code-justify-start"
-            onClick={onCopy}
-          >
+          <button type="button" className="yoopta-block-options-button" onClick={onCopy}>
             <CopyIcon className="yoo-code-w-4 yoo-code-h-4 yoo-code-mr-2" />
             {isCopied ? 'Copied' : 'Copy'}
           </button>
@@ -61,7 +57,7 @@ export const CodeBlockOptions = ({ block, editor, element }: Props) => {
             onChange={onChangeTheme}
             value={element.props?.theme || 'VSCode'}
           >
-            <Trigger className="yoo-code-rounded-sm hover:yoo-code-bg-[#37352f14] yoo-code-leading-[120%] yoo-code-px-2 yoo-code-py-1.5 yoo-code-mx-[4px] yoo-code-cursor-pointer yoo-code-w-full yoo-code-flex yoo-code-justify-start">
+            <Trigger className="yoopta-block-options-button">
               <ThemeIcon className="yoo-code-w-4 yoo-code-h-4 yoo-code-mr-2" />
               Theme
             </Trigger>
@@ -78,7 +74,7 @@ export const CodeBlockOptions = ({ block, editor, element }: Props) => {
             onChange={onChangeLanguage}
             value={element.props?.language || 'JavaScript'}
           >
-            <Trigger className="yoo-code-rounded-sm hover:yoo-code-bg-[#37352f14] yoo-code-leading-[120%] yoo-code-px-2 yoo-code-py-1.5 yoo-code-mx-[4px] yoo-code-cursor-pointer yoo-code-w-full yoo-code-flex yoo-code-justify-start">
+            <Trigger className="yoopta-block-options-button">
               <CodeIcon className="yoo-code-w-4 yoo-code-h-4 yoo-code-mr-2" />
               Language
             </Trigger>

packages/code/src/ui/Select.tsx

@@ -1,6 +1,7 @@
 import * as SelectPrimitive from '@radix-ui/react-select';
 import DownIcon from '../icons/down.svg';
 import CheckmarkIcon from '../icons/checkmark.svg';
+import { useYooptaEditor } from '@yoopta/editor';
 
 const SelectRoot = SelectPrimitive.Root;
 const SelectValue = SelectPrimitive.Value;
@@ -19,8 +20,10 @@ const SelectTrigger = ({ children, className }) => {
 };
 
 const SelectContent = ({ children }) => {
+  const editor = useYooptaEditor();
+
   return (
-    <SelectPrimitive.Portal container={document.getElementById('yoopta-editor')}>
+    <SelectPrimitive.Portal container={document.querySelector(`[data-yoopta-editor-id="${editor.id}"]`) as HTMLElement}>
       <SelectPrimitive.Content
         className="yoo-code-relative yoo-code-z-[120] yoo-code-max-h-96 yoo-code-min-w-[8rem] yoo-code-overflow-hidden yoo-code-rounded-md yoo-code-border-solid yoo-code-border-[#e3e3e3] yoo-code-bg-[#ffffff] yoo-code-text-popover-foreground yoo-code-shadow-md data-[state=open]:yoo-code-animate-in data-[state=closed]:yoo-code-animate-out data-[state=closed]:yoo-code-fade-out-0 data-[state=open]:yoo-code-fade-in-0 data-[state=closed]:yoo-code-zoom-out-95 data-[state=open]:yoo-code-zoom-in-95 data-[side=bottom]:yoo-code-slide-in-from-top-2 data-[side=left]:yoo-code-slide-in-from-right-2 data-[side=right]:yoo-code-slide-in-from-left-2 data-[side=top]:yoo-code-slide-in-from-bottom-2 data-[side=bottom]:yoo-code-translate-y-1 data-[side=left]:-yoo-code-translate-x-1 data-[side=right]:yoo-code-translate-x-1 data-[side=top]:-yoo-code-translate-y-1"
         position="popper"

packages/core/package.json

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