darginec05 / yoopta-editor Goto Github PK

Is your feature request related to a problem? Please describe.
I'm interested in using a Notion-like editor in my website. So far, Yopage looks really awesome. However, in my requirements, I need to be able to upload multiple images at the same time when I click the image option. Is there a plan to support such a feature in the future?

Describe the solution you'd like
To be able to select multiple images in the system browser, and that each one of them is added one after the other in the editor

Describe alternatives you've considered
So far I've tried other editors like Editor.js but they also don't provide this feature

Is your feature request related to a problem? Please describe.
Need ref support for the editor, So we can access editor functionalities.

Describe the solution you'd like
Right now, our use case needs ref support for manually focusing the editor .

For example:
For manual focusing:

editorRef.current.focus()

in some cases manually generating new line:

editorRef.current.newLine()

const editorRef= useRef(null);

<YooptaEditor
ref={editorRef}
onChange={handleOnChange}
...
}}
/>

Can also provide access to other functionalities not just limited to above two.

Describe alternatives you've considered
Nothing.

Additional context
Add any other context or screenshots about the feature request here.

Is your feature request related to a problem? Please describe.
I upload huge videos and it's kind of frustrating to not understand how many percentage left
Is there some way to pass function on "changing" / uploading video to update current state of uploading?

Describe the solution you'd like

<YoptaEditor
  value={value}
  onChange={onChange}
  media={
    videoProps: {
      onChange: (file: File, onUploadProgress: () => void) => onChangeMedia(file, 'video', onUploadProgress),
    },
  }
/>

Describe the bug
When I copy paste data from the Editor to Gmail it results into poor formatting.

I do want to often paste items from editor from one client (particularly email clients) to another but I notice it is consistently poorly formatted.

Is there any way you can help?

To Reproduce
Steps to reproduce the behavior:

1. Copy a few blocks from the editor
2. Paste into gmail new email
3. You should see weird blocks inside the email client

Expected behavior
There should ideally be no blocks inside the email

Screenshots
Attached above

Desktop (please complete the following information):

• OS: Mac
• Browser Brave (chrome browser)

Is your feature request related to a problem? Please describe.
Need Hyperlink optior in the Toolbar

Describe the solution you'd like
Can able to select text and add hyperlink from Toolbar

Describe alternatives you've considered
Right now selecting the text and pasting (ctrl + v) the url does the trick. It would be easy for user to select if we have the option in the Toolbar itself

Describe the bug
When I want to divide text in a Node into several parts, on enter click an empty node appears and the rest of the text is situated under it. Also, the rest of the text remains of the Node's type (e.g. heading).

To Reproduce
Steps to reproduce the behavior:

Expected behavior
When I click enter in the Node's text, the rest of the text appears directly under the Node. The text is of paragraph type despite the type of the Node above.

Desktop (please complete the following information):

• MacOS
• Chrome

Hi, I want to turn off spell check in paragraphs, but I don't see any apis to set these parameters. Please let me know the way to do that, thank you

It would be nice if clicking the plus would open a menu to choose which type of block to add instead of always adding a paragraph.

Describe the bug
I used to be able to find the yopta-editor package in npm, but for some reason its not being found. So when I try to npm install it doesn't work

To Reproduce
Steps to reproduce the behavior:

1. Go to 'npm.com', search for yopta-editor
2. And you will see no results are found.

Is your feature request related to a problem? Please describe.
I'm always frustrated when I write content on backend, I'm scared that JSON has unpredictable structure.

Describe the solution you'd like
If you will implement it in package, it always be matched to its version.

Thanks!

Describe the bug

1. Copy and pasting from external source to Yopta Editor adds unwanted new lines in Firefox browser
2. Pasing paragraphs that contains hyperlinks to Yopta Editor turns into single hyperlink text

To Reproduce
Steps to reproduce the behavior:

1. Copy from any article, for example link
2. Paste it in the Yopta Editor

Expected behavior

1. The unwanted newlines should not be added after pasting.
2. Enitre copied paragraphs should be added properly with hyperlinks.

Screenshots

Desktop (please complete the following information):

OS: Windows 11 22621.1702
Browsers: Chrome 113.0.5672.93
Firefox 118.0.1 (64-bit)

Version :
"@stripe/stripe-js": "^1.52.1",
"@yoopta/action-menu-list": "^1.9.5-rc",
"@yoopta/blockquote": "^1.9.6-rc",
"@yoopta/callout": "^1.9.5-rc",
"@yoopta/code": "^1.9.5-rc",
"@yoopta/editor": "1.9.9-rc",
"@yoopta/embed": "^1.9.5-rc",
"@yoopta/headings": "^1.9.5-rc",
"@yoopta/image": "^1.9.5-rc",
"@yoopta/link": "^1.9.5-rc",
"@yoopta/lists": "^1.9.5-rc",
"@yoopta/marks": "^1.9.5-rc",
"@yoopta/paragraph": "^1.9.7-rc",
"@yoopta/renderer": "^1.9.5-rc",
"@yoopta/toolbar": "^1.9.5-rc",
"@yoopta/video": "^1.9.5-rc",

Is your feature request related to a problem? Please describe.
I upload videos to bunny.net hosting with API and videos must be rendered with bunny.net iframe due its security reasons (videos are private).
Can you give me interface to pass my own custom node element please?
How can I override render function of "video" node element?

Describe the bug:

Code block not formatted with respect to prgramming language when pasting the code, it just shows in white text.

To Reproduce
Steps to reproduce the behavior:

Add code from slash command, copy paste some programming code.
Strangely, it 'partially' works when we do "Paste as plain text", but color goes white when rendered with

You can see the issue with the below video:

Expected behavior
Whether pasted with "Paste" or "Paste with plain text", it should be color formatted and with a right syntax.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

OS: Windows 11 22621.1702
Browser: Chrome 113.0.5672.93
Version :
"@yoopta/action-menu-list": "^1.9.10-rc",
"@yoopta/callout": "^1.9.10-rc",
"@yoopta/code": "^1.9.10-rc",
"@yoopta/editor": "1.9.14-rc",
"@yoopta/embed": "^1.9.10-rc",
"@yoopta/headings": "^1.9.10-rc",
"@yoopta/image": "^1.9.10-rc",
"@yoopta/link": "^1.9.10-rc",
"@yoopta/link-tool": "^1.9.3-rc",
"@yoopta/lists": "^1.9.10-rc",
"@yoopta/marks": "^1.9.10-rc",
"@yoopta/paragraph": "^1.9.12-rc",
"@yoopta/renderer": "^1.9.10-rc",
"@yoopta/toolbar": "^1.9.10-rc",
"@yoopta/video": "^1.9.10-rc",

Describe the bug
I tried to add custom styles to Numbered list, but its not been added.

To Reproduce
Steps to reproduce the behavior:

NumberedList.extend({ options: { HTMLAttributes: { spellCheck: false, className: 'numberedStyle', }, }, }),

and style
.numberedStyle { color: slateblue; }

Expected behavior
Should apple the styles

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows 11 22621.1702
• Browser: Chrome 113.0.5672.93
• Version : "@stripe/react-stripe-js": "^2.1.0",
  "@stripe/stripe-js": "^1.52.1",
  "@yoopta/action-menu-list": "^1.9.3-rc",
  "@yoopta/blockquote": "^1.9.4-rc",
  "@yoopta/callout": "^1.9.3-rc",
  "@yoopta/code": "^1.9.3-rc",
  "@yoopta/editor": "1.9.5-rc",
  "@yoopta/embed": "^1.9.3-rc",
  "@yoopta/headings": "^1.9.3-rc",
  "@yoopta/image": "^1.9.3-rc",
  "@yoopta/link": "^1.9.3-rc",
  "@yoopta/lists": "^1.9.3-rc",
  "@yoopta/marks": "^1.9.3-rc",
  "@yoopta/paragraph": "^1.9.5-rc",
  "@yoopta/renderer": "^1.9.3-rc",
  "@yoopta/toolbar": "^1.9.3-rc",
  "@yoopta/video": "^1.9.3-rc",

Describe the bug
Copy and pasting from external source to Yopta Editor adds unwanted new lines

To Reproduce
Steps to reproduce the behavior:

1. Copy from any article, for example wikipedia
2. Paste it in the Yopta Editor

Expected behavior
The unwanted newlines should not be added when pasting.

Screenshots

Desktop (please complete the following information):

OS: Windows 11 22621.1702
Browser: Chrome 113.0.5672.93
Version :
"@stripe/stripe-js": "^1.52.1",
"@yoopta/action-menu-list": "^1.9.5-rc",
"@yoopta/blockquote": "^1.9.6-rc",
"@yoopta/callout": "^1.9.5-rc",
"@yoopta/code": "^1.9.5-rc",
"@yoopta/editor": "1.9.9-rc",
"@yoopta/embed": "^1.9.5-rc",
"@yoopta/headings": "^1.9.5-rc",
"@yoopta/image": "^1.9.5-rc",
"@yoopta/link": "^1.9.5-rc",
"@yoopta/lists": "^1.9.5-rc",
"@yoopta/marks": "^1.9.5-rc",
"@yoopta/paragraph": "^1.9.7-rc",
"@yoopta/renderer": "^1.9.5-rc",
"@yoopta/toolbar": "^1.9.5-rc",
"@yoopta/video": "^1.9.5-rc",

Is your feature request related to a problem? Please describe.
always frustrated when trying to get the editor or Editable instance used by YooptaEditor Component so I can perform operation such as get cursor position, insert or remove block of text.

Describe the solution you'd like
A clear and concise description of what you want to happen.
Ideally if I can get the Editable instance used in the YooptaEditor component so I can do something like:
const isAstChange = editor.operations.some((op) => 'set_selection' !== op.type);
or Using a ref as it is commonly done with slate editor. Please suggest if theres a better way to achieve this.

Describe alternatives you've considered
I have tried using js DOM to select the div element by id but it does not seem to select it.

Code plugin is buggy now.
It should be rewritten with new architectural approach, without decorations and with code-mirror library.

Describe the bug
When copy pasting content with File it will add as link node

Expected behavior
A clear and concise description of what you expected to happen.

Describe the bug
Hi Darcine, I know you mentioned that we could install the NPM package locally using the local scope name of @yoopta, but I wasn't able to do it.

Is there a way/documented process for us to be able to install locally? And do you know what it will take to get it live on the NPM package library again?

Describe the bug
I want to access isActive state from elements hooks, like we access from marks hooks

To Reproduce
Steps to reproduce the behavior:

const elements = useElements();
elements['heading-one'].isActive

Expected behavior
Can able to access the isActive states of all the elements.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

OS: Windows 11 22621.1702
Browser: Chrome 113.0.5672.93
Version :
"@stripe/stripe-js": "^1.52.1",
"@yoopta/action-menu-list": "^1.9.5-rc",
"@yoopta/blockquote": "^1.9.6-rc",
"@yoopta/callout": "^1.9.5-rc",
"@yoopta/code": "^1.9.5-rc",
"@yoopta/editor": "1.9.9-rc",
"@yoopta/embed": "^1.9.5-rc",
"@yoopta/headings": "^1.9.5-rc",
"@yoopta/image": "^1.9.5-rc",
"@yoopta/link": "^1.9.5-rc",
"@yoopta/lists": "^1.9.5-rc",
"@yoopta/marks": "^1.9.5-rc",
"@yoopta/paragraph": "^1.9.7-rc",
"@yoopta/renderer": "^1.9.5-rc",
"@yoopta/toolbar": "^1.9.5-rc",
"@yoopta/video": "^1.9.5-rc",

Link shows as an option in the action menu, but nothing happens when selecting it. Seems that it shouldn't be in this menu, since it's not a block-level element.

Describe the bug

For file attachment we are letting only .zip and .rar file fomats to be choosen. If user chose other than these, we are showing the alert. But the "file" entry should not be added to the editor state.

To Reproduce
Steps to reproduce the behavior:

File.extend({
    options: {
      accept: '.zip,.rar',
      onUpload: async (file: File) => {
        if (file.size / 1048576 > 100) {
					alert('file should be less than 100MB');
					return;
				}
				const fileName = file.name.toLowerCase();
				if (!(fileName.endsWith('.zip') || fileName.endsWith('.rar'))) {
					alert('Unsupported file type');
					return;
				}
        const response = await uploadToCloudinary(file, 'auto');
        return { url: response.url };
      },
    },
  }),

Expected behavior

The "file" entry should not be added in the editor state unless the chosen file format is supported.

Screenshots

Desktop (please complete the following information):

OS: Windows 11 22621.1702
Browsers: Chrome 113.0.5672.93
Firefox 118.0.1 (64-bit)

Version :
"@yoopta/action-menu-list": "^1.9.16-rc",
"@yoopta/blockquote": "^1.9.18-rc",
"@yoopta/callout": "^1.9.15-rc",
"@yoopta/chat-gpt-assistant": "^1.9.16-rc",
"@yoopta/code": "^1.9.15-rc",
"@yoopta/editor": "^1.9.26-rc",
"@yoopta/embed": "^1.9.18-rc",
"@yoopta/exports": "^1.9.17-rc",
"@yoopta/file": "^1.0.3-rc",
"@yoopta/headings": "^1.9.15-rc",
"@yoopta/image": "^1.9.15-rc",
"@yoopta/link": "^1.9.15-rc",
"@yoopta/link-tool": "^1.9.9-rc",
"@yoopta/lists": "^1.9.15-rc",
"@yoopta/marks": "^1.9.15-rc",
"@yoopta/paragraph": "^1.9.17-rc",
"@yoopta/renderer": "^1.9.17-rc",
"@yoopta/toolbar": "^1.9.15-rc",
"@yoopta/video": "^1.9.17-rc",

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
<EditorYoopta editor={editor} readOnly={readOnly} placeholder={placeholder} plugins={yooptaPlugins} marks={marks} PLUGINS_MAP={PLUGINS_MAP} className={className} /

When creating a bulleted list and then selecting the text for a list item, the item is shown as list-item.

This does not happen when doing the same with a numbered list. Selecting an item within a numbered list shows "NumberedList".

Describe the bug
Hi, First thanks for your amazing work! I've been searching through the editor library exactly like this.

I'm setting up a project using Next.JS v13 with App Directory feature enabled. However, when I try to use Yopta, it works at the first time but when I try to add a block or change order it crashes with the below error:

The stacktrace is:

Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'type')

Call Stack
e.isVoid
../node_modules/.pnpm/[email protected]_yaswuzgb2kjpyjjioxtoccuwlu/node_modules/yopta-editor/dist/index.js (21:20240)
Object.isVoid
../node_modules/.pnpm/[email protected]/node_modules/slate/dist/index.es.js (1246:0)
Jo
../node_modules/.pnpm/[email protected]_yaswuzgb2kjpyjjioxtoccuwlu/node_modules/yopta-editor/dist/index.js (13:68781)

It seems like on withVoidNodes function on Editor, a null is being injected on element: Element argument to Editor.isVoid handler.

https://github.com/Darginec05/Yopta-Editor/blob/8bc4f3c5a76a0e7a19223fb987e4f6a63c82f855/src/components/Editor/plugins.ts#L9-L17

I cannot give the full code, but it's currently in a vanilla setup like:

'use client';

import * as React from 'react';
import { Descendant } from 'slate';
import { YoptaEditor } from 'yopta-editor';
import 'yopta-editor/dist/index.css';

export default function NewGravityPage() {
  const [value, setValue] = useState<Descendant[]>([]);
  return (
    <div ...>
      ...
      <YoptaEditor value={value} onChange={(data) => setValue(data)} />
    </div>
  );
}

One suspect is Next.JS v13 App Directory— it changed the default rendering method from client-side to SSR.
I've noticed that after adding yopta-editor, I get multiple "Hydration failed" warnings— which can indicate that it's related to
problem between yopta-editor and Next.JS, but I'm not sure of that since I'm a newbie to Next.JS.

Any ideas on how can it be fixed? or can it be solved on v2 you're currently working on?

Environment Information

Desktop:

• OS: macOS Ventura 13.0.1
• Browser: Chrome
• Version: 110.0.5481.177 (arm64)

Dependency Versions

• "slate": "^0.91.4"
• "slate-react": "^0.91.10"
• "yopta-editor": "^1.1.4"
• "next": "13.2.3"
• "react": "18.2.0"
• "react-dom": "18.2.0"

Describe the bug
Pressing enter/return two times while using Code block should go to new line

To Reproduce
Steps to reproduce the behavior:

1. Choose Code and start typing once finished
2. Press enter two times and its just expands

Expected behavior
It should go to a new line

Screenshots

Desktop (please complete the following information):

OS: Windows 11 22621.1702
Browser: Chrome 113.0.5672.93
Version : "@stripe/react-stripe-js": "^2.1.0",
"@stripe/stripe-js": "^1.52.1",
"@yoopta/action-menu-list": "^1.9.3-rc",
"@yoopta/blockquote": "^1.9.4-rc",
"@yoopta/callout": "^1.9.3-rc",
"@yoopta/code": "^1.9.3-rc",
"@yoopta/editor": "1.9.5-rc",
"@yoopta/embed": "^1.9.3-rc",
"@yoopta/headings": "^1.9.3-rc",
"@yoopta/image": "^1.9.3-rc",
"@yoopta/link": "^1.9.3-rc",
"@yoopta/lists": "^1.9.3-rc",
"@yoopta/marks": "^1.9.3-rc",
"@yoopta/paragraph": "^1.9.5-rc",
"@yoopta/renderer": "^1.9.3-rc",
"@yoopta/toolbar": "^1.9.3-rc",
"@yoopta/video": "^1.9.3-rc",

Thanks for the wondeful library.
It would be great if we have a file attachement plugin support in the editor for example attaching .pdf, .doc, .zip, etc...

Describe the bug
Links in this file are broken and lead to 404 pages.

😢

Description
The syntax highlighting are working properly when it's rendered using the @yoopta/editor, but it lost the syntax highlighting when rendered on @yoopta/renderer

I'm saving the data into the database by stringify the JSON, then I parse the JSON back to be used on the renderer

Version Info
OS: Windows 11
Browser: Ms Edge
"@yoopta/editor": "^1.9.26-rc",
"@yoopta/code": "^1.9.15-rc",
"@yoopta/renderer": "^1.9.17-rc",

Screenshots
When using editor

When using renderer

Selecting text and then attempting to change its element to a numbered list or bulleted list causes the editor to crash (and disappear) with the following errors:

	(anonymous function) (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:58615)
	callCallback (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:39945)
	dispatchEvent
	invokeGuardedCallbackDev (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:39994)
	invokeGuardedCallback (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:40058)
	reportUncaughtErrorInDEV (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:58614)
	captureCommitPhaseError (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:62902)
	commitPassiveMountEffects_complete (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:60669)
	commitPassiveMountEffects_begin (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:60654)
	commitPassiveMountEffects (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:60642)
	flushPassiveEffectsImpl (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:62815)
	flushPassiveEffects (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:62760)
	commitRootImpl (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:62711)
	commitRoot (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:62458)
	performSyncWorkOnRoot (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:61893)
	performSyncWorkOnRoot
	flushSyncCallbacks (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:47823)
	(anonymous function) (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:61427)

G@http://domain.test/packs/js/vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:88998:11678
@http://domain.test/packs/js/vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:88789:12509
div
Bn@http://domain.test/packs/js/vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:88789:27890
It@http://domain.test/packs/js/vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:88789:9543
at@http://domain.test/packs/js/vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:88783:23081
Slate@http://domain.test/packs/js/vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:79720:11
ir@http://domain.test/packs/js/vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:88789:41428
P@http://domain.test/packs/js/vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:88777:90
ar@http://domain.test/packs/js/vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:88789:48112
Editor@http://domain.test/packs/js/application.js:173:61
Consider adding an error boundary to your tree to customize error handling behavior.

Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

logCapturedError (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:54468)

(anonymous function) (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:54496)

callCallback (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:49704)

commitUpdateQueue (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:49725)

commitLayoutEffectOnFiber (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:59167)

commitLayoutMountEffects_complete (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:60464)

commitLayoutEffects_begin (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:60450)

commitLayoutEffects (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:60388)

commitRootImpl (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:62599)

commitRoot (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:62458)

performSyncWorkOnRoot (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:61893)

performSyncWorkOnRoot

flushSyncCallbacks (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:47823)

(anonymous function) (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:61427)

	flushSyncCallbacks (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:47837)
	(anonymous function) (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-2874a7.js:61427)

Hi Guys,

can any one tell me how can we make custom block

Thanks in advance!

Describe the bug
Essentially the yopta editor copies and pastes everything inside the editor instead of what is selected.

To Reproduce
Steps to reproduce the behavior:

1. Write anything in the editor.
2. Select a portion of it
3. Try to press ctrl+c
4. Now paste it, and you will notice it just copies the whole blurb

Should just copy the selected items

Describe the bug:

I'm trying to toggle link with custom toolbar after selecting the text. The url input box doesn't open.

CustomToolBar.js

...
<ToolbarButton isActive={elements['link']?.isActive} type="button" onClick={() => elements['link'].toggle()}>
           <Link isActive={elements['link']?.isActive} />
</ToolbarButton>
...

TextEditor.js

<YooptaEditor
plugins={plugins}
value={value}
marks={marks}
onChange={handleOnChange}
placeholder="Type / for commands or just type your content."
tools={{
Toolbar: <Toolbar type="bubble" render={CustomToolBar} />,
ActionMenu: <ActionMenu render={CustomActionMenu} items={actionItems} />,
LinkTool: <LinkTool asChildren={false} />,
}}
/>

To Reproduce
Steps to reproduce the behavior:

Try to toggle link with onClick={() => elements['link'].toggle()}> in the custom toolbar.

Expected behavior
On toggle, the link input box should open so I can paste my url.

Additional log:
const elements = useElements();
console.log(elements) outputs below:

If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

OS: Windows 11 22621.1702
Browser: Chrome 113.0.5672.93
Version :
"@yoopta/action-menu-list": "^1.9.10-rc",
"@yoopta/callout": "^1.9.10-rc",
"@yoopta/code": "^1.9.10-rc",
"@yoopta/editor": "1.9.14-rc",
"@yoopta/embed": "^1.9.10-rc",
"@yoopta/headings": "^1.9.10-rc",
"@yoopta/image": "^1.9.10-rc",
"@yoopta/link": "^1.9.10-rc",
"@yoopta/link-tool": "^1.9.3-rc",
"@yoopta/lists": "^1.9.10-rc",
"@yoopta/marks": "^1.9.10-rc",
"@yoopta/paragraph": "^1.9.12-rc",
"@yoopta/renderer": "^1.9.10-rc",
"@yoopta/toolbar": "^1.9.10-rc",
"@yoopta/video": "^1.9.10-rc",

Sometimes the action menu extends beyond the page bounds, but when the action menu is open, the page cannot be scrolled.

The page should still be scrollable when the action menu is open.

Is your feature request related to a problem? Please describe.
Add embed support for LinkedIn and Reddit

Describe alternatives you've considered
using src link from Linkedin is working for now but direct url link support needed

<iframe src="https://www.linkedin.com/embed/feed/update/urn:li:share:7079089495559589888" height="575" width="504" frameborder="0" allowfullscreen="" title="Embedded post"></iframe>

Reddit using blockquote so its not working too.

Additional context
when trying to add direct reddit or linkedin link

At present, my react version is 16, but there seems to be an error. Is there any way to use it?

Maybe I lost something, but I can't get it.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Add a hyperlink to a text that takes a full line

2. Create a new line at the end of the line by pressing enter

3. ^ see the error with the "link" represented vertically in accurately

Expected behavior
There should be no link represented vertically.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser: Brave

Describe the bug
I had a page with following content:
embed
embed
h1

I could move embed down, but not the header up.

To Reproduce
Steps to reproduce the behavior:

1. Add embed
2. Add header 1
3. Try to move header in the beginning of the page

• MacOS 12.6.1 (21G217) Monterey
• Browser Chrome Version 108.0.5359.124 (Official Build) (x86_64)
• Version 1.0.23

Is your feature request related to a problem? Please describe.
Having all of the features in the insert block menu can be kind of overwhelming for certain users, and adding support for those kinds of blocks is hard for my backend

Describe the solution you'd like
To be able to pass a prop like an array of strings to select or exclude certain blocks from being present in the insert block menu

Describe alternatives you've considered
I guess I could try to hide the things I don't want with CSS selectors, but that feels like a hack

Describe the bug

• There seems to be an issue with installing plugins. I get error like this.
  

But it will work if I do --force install

To Reproduce
Steps to reproduce the behavior:

1. Setup nextjs project
2. After that follow instruction provided in installation guide(here).
3. Then try to install other yoopta plugins.
4. See error

package version

    "next": "13.4.12",
    "react": "18.2.0",

Describe the bug

1. When editor is rendered with read only , there's an unwanted padding under the embedded link and doesn't respect the custom/resized dimension set.
2. And the embed editor/resizer container should automatically resized to the embedded content while creating. For example if iframe content is small, there's space under it, if the content is big, it's overlapping the below block which should not happen.

  Embed.extend({
    options: {
      maxWidth: 650,
      maxHeight: 500,
    },
  }),

To Reproduce
Steps to reproduce the behavior:

Add an embed link like Twitter, then render with and with out Yopta-renderer.

When i tried to add this link to the editor: link1 link2

You can see both the issues with the below video:

Expected behavior
There should not be extra padding and respect the resized dimension.
The editor/resizer should be responsive to embedded link's dimension.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

OS: Windows 11 22621.1702
Browser: Chrome 113.0.5672.93
Version :
"@yoopta/action-menu-list": "^1.9.10-rc",
"@yoopta/callout": "^1.9.10-rc",
"@yoopta/code": "^1.9.10-rc",
"@yoopta/editor": "1.9.14-rc",
"@yoopta/embed": "^1.9.10-rc",
"@yoopta/headings": "^1.9.10-rc",
"@yoopta/image": "^1.9.10-rc",
"@yoopta/link": "^1.9.10-rc",
"@yoopta/link-tool": "^1.9.3-rc",
"@yoopta/lists": "^1.9.10-rc",
"@yoopta/marks": "^1.9.10-rc",
"@yoopta/paragraph": "^1.9.12-rc",
"@yoopta/renderer": "^1.9.10-rc",
"@yoopta/toolbar": "^1.9.10-rc",
"@yoopta/video": "^1.9.10-rc",

Hi everyone 👋

I am working on the release of the second version.
The v2 version contains a lot of cool features and solutions with requests from developers 💙

Features in v2:

• Package renamed and moved to scoped package name @yoopta. Example: @yoopta/editor, @yoopta/callout and other..
• Multipackages to reduce bundlesize and just import exactly what you need.
• You will be able create your custom plugin using function createYoptaPlugin
• You can easily modify or extend existing plugins. Paragraph.extend({ renderer: MyCustomParagraph, shortcut: 'text' })
• Available packages:
  • Image
  • Video
  • Paragraph
  • Embed
  • Lists (Ordered, Bulleted and Todo) with nested behaviour
  • Headings
  • Callout
  • Code Syntax Highlight
  • Blockquote
  • Link
• I always care about page performance. Thus, each plugin includes two types of rendering editor and render. So, this means that when you create any blogging platform, you can only use @yopta/renderer for quests, and it will remove all the editor tools for fast rendering and page perfomance
• Nested drag and drop feature
• Image, Embed and Video are now plugins on steroid. They include cool edit features like resizing, lazy loading and parsers.
• Code Syntax Highlight include 10+ languages
• Good copy/paste functionality and @yopta/exports package for deserailize and serialize html or markdown data.
• Easy peasy configured marks for text transform
• <ActionMenu /> which triggered by "/" include custom rendering and list of plugins what you need
• <Toolbar /> also include custom rendering and list of makrs what you need.
• Custom ElementOptions for every node (work in progress)
• Tests configuration (work in progress)
• And ChatGPT plugin 😍 It will include two packages: for frontend side and backend! (Work in progress).

And many other features... ✨

So, the main challenge for me is to make life easier for developers so that you can create any rich editor without tears and with full UI customization.

So, don't forget ask for any feature or reporting issues ✌️

😇 Before publishing the v2 version, I want to create a release candidate to test it in production and understand what else developers need, what functionality they still need for comfortable work.

❗ If you already use Yopta-Editor@v1 don't afraid because I'll prepare migration guide from v1 to v2

💻 Current available demo's

Describe the bug

Seeing the error TypeError: undefined is not an object (evaluating 'e.map') when loading the editor. The editor isn't loading or showing anything.

To Reproduce

Here's the editor component:

import YooptaEditor from '@yoopta/editor'

function Editor() {
  const [editorValue, setEditorValue] = useState([])

  const onChange = (data) => setEditorValue(data)

  return (
    <YooptaEditor value={editorValue} onChange={onChange} />
  )
}

Seeing the error:

[Error] TypeError: undefined is not an object (evaluating 'e.map')
	be (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-674b15.js:87586:5894)
	(anonymous function) (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-674b15.js:87598:25798)
	mountMemo (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-674b15.js:52111)
	useMemo (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-674b15.js:52556)
	ir (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-674b15.js:87598:25781)
	renderWithHooks (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-674b15.js:51191)
	mountIndeterminateComponent (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-674b15.js:54955)
	callCallback (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-674b15.js:39050)
	dispatchEvent
	invokeGuardedCallbackDev (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-674b15.js:39099)
	invokeGuardedCallback (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-674b15.js:39163)
	beginWork$1 (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-674b15.js:62332)
	performUnitOfWork (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-674b15.js:61441)
	workLoopSync (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-674b15.js:61347)
	renderRootSync (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-674b15.js:61315)
	recoverFromConcurrentError (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-674b15.js:60731)
	performConcurrentWorkOnRoot (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-674b15.js:60631)
	performConcurrentWorkOnRoot
	workLoop (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-674b15.js:72513)
	flushWork (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-674b15.js:72486)
	performWorkUntilDeadline (vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-674b15.js:72780)

[Error] The above error occurred in the <ir> component:

ir@http://editor.test/packs/js/vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-674b15.js:87598:25039
$t@http://editor.test/packs/js/vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-674b15.js:87592:40072
ar@http://editor.test/packs/js/vendors-node_modules_hotwired_stimulus-webpack-helpers_dist_stimulus-webpack-helpers_js-node_-674b15.js:87598:31538
ErrorBoundary@http://editor.test/packs/js/application.js:90:10
Editor@http://editor.test/packs/js/application.js:126:88

Expected behavior

Expected the editor to load.

Desktop (please complete the following information):

• OS: macOS
• Browser: Safari
• Version: 16.6
• @yoopta/editor: 1.9.19-rc

Describe the bug

The embedded Youtube Thumbnail is in some other language, it needs to be in English

To Reproduce
Steps to reproduce the behavior:

Add a Youtube link

Expected behavior
It should be in english.
I've checked the code at "packages\yoopta-embed\src\providers\YoutubePlayer.tsx"

            <iframe
              title="Youtube Player"
              // https://developers.google.com/youtube/player_parameters?hl=en
              src={`https://www.youtube.com/embed/${providerId}?hl=no&rel=0`}
              frameBorder={0}
              onLoad={() => setFrameLoaded(true)}
              allowFullScreen
              className={s.iframe}
              {...other}
            />

changing hl=no to hl=en might solve the issue like below

`https://www.youtube.com/embed/${providerId}?hl=en&rel=0`

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

OS: Windows 11 22621.1702
Browser: Chrome 113.0.5672.93
Version :
"@yoopta/action-menu-list": "^1.9.10-rc",
"@yoopta/callout": "^1.9.10-rc",
"@yoopta/code": "^1.9.10-rc",
"@yoopta/editor": "1.9.14-rc",
"@yoopta/embed": "^1.9.10-rc",
"@yoopta/headings": "^1.9.10-rc",
"@yoopta/image": "^1.9.10-rc",
"@yoopta/link": "^1.9.10-rc",
"@yoopta/link-tool": "^1.9.3-rc",
"@yoopta/lists": "^1.9.10-rc",
"@yoopta/marks": "^1.9.10-rc",
"@yoopta/paragraph": "^1.9.12-rc",
"@yoopta/renderer": "^1.9.10-rc",
"@yoopta/toolbar": "^1.9.10-rc",
"@yoopta/video": "^1.9.10-rc",

Describe the bug

Code block not formatted properly when pasting the code from vscode (or anywhere), it just shows in white text when paste and formatted partially when paste as plain text

To Reproduce
Steps to reproduce the behavior:

1. Copy code from vscode
2. Paste it in the Yopta Editor

Screenshots

Desktop (please complete the following information):

OS: Windows 11 22621.1702
Browser: Chrome 113.0.5672.93
Version :
"@stripe/stripe-js": "^1.52.1",
"@yoopta/action-menu-list": "^1.9.5-rc",
"@yoopta/blockquote": "^1.9.6-rc",
"@yoopta/callout": "^1.9.5-rc",
"@yoopta/code": "^1.9.5-rc",
"@yoopta/editor": "1.9.9-rc",
"@yoopta/embed": "^1.9.5-rc",
"@yoopta/headings": "^1.9.5-rc",
"@yoopta/image": "^1.9.5-rc",
"@yoopta/link": "^1.9.5-rc",
"@yoopta/lists": "^1.9.5-rc",
"@yoopta/marks": "^1.9.5-rc",
"@yoopta/paragraph": "^1.9.7-rc",
"@yoopta/renderer": "^1.9.5-rc",
"@yoopta/toolbar": "^1.9.5-rc",
"@yoopta/video": "^1.9.5-rc",

Describe the bug
Image editor container should have proper scaling support for both landscape and portrait images, Portrait images and some times landscape images looks like scaled in a square layout.
Editor should adapt to the dimension with respect to the image's dimenstion.

To Reproduce
Steps to reproduce the behavior:

add a portrait image to the editor, it will be scaled to a squared image

When i tried to add this image to the editor: Image

Expected behavior
The resizer should be responsive to all image dimensions.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

OS: Windows 11 22621.1702
Browser: Chrome 113.0.5672.93
Version :
"@stripe/stripe-js": "^1.52.1",
"@yoopta/action-menu-list": "^1.9.5-rc",
"@yoopta/blockquote": "^1.9.6-rc",
"@yoopta/callout": "^1.9.5-rc",
"@yoopta/code": "^1.9.5-rc",
"@yoopta/editor": "1.9.9-rc",
"@yoopta/embed": "^1.9.5-rc",
"@yoopta/headings": "^1.9.5-rc",
"@yoopta/image": "^1.9.5-rc",
"@yoopta/link": "^1.9.5-rc",
"@yoopta/lists": "^1.9.5-rc",
"@yoopta/marks": "^1.9.5-rc",
"@yoopta/paragraph": "^1.9.7-rc",
"@yoopta/renderer": "^1.9.5-rc",
"@yoopta/toolbar": "^1.9.5-rc",
"@yoopta/video": "^1.9.5-rc",

Is your feature request related to a problem? Please describe.
Currently we have a need to save results of the editor into markdown. So, later this markdown could be easily shown on the website or be restored back to the editor as its state.
I believe current json format is the most efficient way for saving, however it could be useful to have format for saving something more common in use - markdown / html.

Describe the solution you'd like
Implement markdown support in v1 of the library 🙏

Other solutions
DraftJS has a util helpers allowing to do export of state to/from HTML/Markdown

Describe the bug
vite react error

code example

• like this: https://codesandbox.io/p/sandbox/new-fog-977c2y?file=%2Fsrc%2Feditor.tsx%3A17%2C22

import YooptaEditor, { YooptaBaseElement } from "@yoopta/editor";
import Paragraph from "@yoopta/paragraph";
import React, { useState } from "react";
import { YooptaEditorValue } from "@yoopta/editor/dist/types";
import { Bold, Italic, CodeMark, Underline, Strike } from "@yoopta/marks";

const Editor: React.FC<{
  ref?: React.RefObject<HTMLDivElement>;
  value?: string;
  defaultValue?: string;
  onChange?: (val: string) => void;
  onBlur?: () => void;
  placeholder?: string;
  readOnly?: boolean;
  style?: React.CSSProperties;
}> = ({
  ref,
  value: initialValue = "",
  defaultValue,
  onChange,
  placeholder,
  readOnly,
  style,
  onBlur,
}) => {
  const [value, setValue] = useState(
    JSON.parse(initialValue || defaultValue || "[]"),
  );
  const MARKS = [Bold, Italic, CodeMark, Underline, Strike];
  // List of plugins should be defined outside component
  const plugins = [Paragraph];
  const handleChange = (val: YooptaEditorValue<YooptaBaseElement<string>>) => {
    setValue(val);
    onChange?.(JSON.stringify(val));
  };
  return (
    <div style={style} onBlur={onBlur} ref={ref}>
      <YooptaEditor
        value={value}
        onChange={(val) => handleChange(val)}
        plugins={plugins}
        placeholder={placeholder}
        readOnly={readOnly}
        marks={MARKS}
      />
    </div>
  );
};

export default Editor;

Additional context

• react
• vite

{
    "@yoopta/editor": "1.9.26-rc",
    "@yoopta/marks": "1.9.15-rc",
    "@yoopta/paragraph": "1.9.17-rc",
    "slate": "^0.94.1",
    "slate-react": "^0.99.0",
}