v4.9.4 (#420)

## Fixes - [BUG] Depth issues with md serialize/deserialize #345 - onDestroy Event Not Firing on Delete in Image Extension #427 - [FEATURE] Update UI in TodoList #425 - [FEATURE] Add onPathChange prop to <YooptaEditor /> #422 - [FEATURE] Change text/bg colors with react-colorful picker for highlight mark #419 ## Contribution Co-authored-by: Guillermo Loaysa <[email protected]> Co-authored-by: Alexandru Golovatenco <[email protected]> Co-authored-by: 5andu <[email protected]> Co-authored-by: Vaishnav Deore <[email protected]>
yoopta-editor · Jan 1, 2025 · f577dcc · f577dcc
1 parent 96fc42e
commit f577dcc
Show file tree

Hide file tree

Showing 43 changed files with 638 additions and 433 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,19 @@
 # Changelog
 
+## [4.9.4] - 2025-01-01
+
+### Added
+
+- `Added color picker to highlight color`
+- `Update UI for TodoList`
+- `Added _onPathChange_ prop to <YooptaEditor />`
+
+### Fixed
+
+- `Fixed depth issues for Todo/Bulleted/Numbered lists`
+- `Fixed indent for lists while serializing in markdown string`
+- `Fixed firing _onDestroy_ event after delete block`
+
 ## [4.9.3] - 2024-12-27
 
 ### Added

diff --git a/README.md b/README.md
@@ -134,6 +134,8 @@ type YooptaEditor = {
   value?: YooptaContentValue;
   /* Change handler  */
   onChange?: (value: YooptaContentValue, options: YooptaOnChangeOptions) => void;
+  /* Path change handler */
+  onPathChange?: (path: YooptaPath) => void;
   /* autoFocus. [Default] - true */
   autoFocus?: boolean;
   /* className - class name */

diff --git a/packages/core/editor/README.md b/packages/core/editor/README.md
@@ -73,6 +73,10 @@ type Props = {
   /* Style CSS Object. [Default] - { width: 400, paddingBottom: 100 }
    */
   style?: number | string;
+  /* Change handler  */
+  onChange?: (value: YooptaContentValue, options: YooptaOnChangeOptions) => void;
+  /* Path change handler */
+  onPathChange?: (path: YooptaPath) => void;
 };
 ```
 

diff --git a/packages/core/editor/package.json b/packages/core/editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/editor",
-  "version": "4.9.3",
+  "version": "4.9.4",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

diff --git a/packages/core/editor/src/YooptaEditor.tsx b/packages/core/editor/src/YooptaEditor.tsx
@@ -30,6 +30,7 @@ export type YooptaEditorProps = {
   marks?: YooptaMark<any>[];
   value?: YooptaContentValue;
   onChange?: (value: YooptaContentValue, options: YooptaOnChangeOptions) => void;
+  onPathChange?: (path: YooptaPath) => void;
   autoFocus?: boolean;
   className?: string;
   selectionBoxRoot?: HTMLElement | React.MutableRefObject<HTMLElement | null> | false;
@@ -62,6 +63,7 @@ const YooptaEditor = ({
   width,
   style,
   onChange,
+  onPathChange,
 }: YooptaEditorProps) => {
   const marks = useMemo(() => {
     if (marksProps) return [FakeSelectionMark, ...marksProps];
@@ -99,6 +101,7 @@ const YooptaEditor = ({
 
   const onEditorPathChange = useCallback((path: YooptaPath) => {
     setStatePath(path);
+    onPathChange?.(path);
   }, []);
 
   const onValueChange = useCallback((value, options: YooptaOnChangeOptions) => {

diff --git a/packages/core/editor/src/editor/blocks/deleteBlock.ts b/packages/core/editor/src/editor/blocks/deleteBlock.ts
@@ -40,6 +40,10 @@ export function deleteBlock(editor: YooEditor, options: DeleteBlockOptions) {
   const blockToDelete = editor.children[block.id];
   const operations: YooptaOperation[] = [];
 
+  const plugin = editor.plugins[blockToDelete.type];
+  const { onDestroy } = plugin.events || {};
+  onDestroy?.(editor, blockToDelete.id);
+
   operations.push({
     type: 'delete_block',
     block: blockToDelete,

diff --git a/packages/core/editor/src/parsers/getMarkdown.ts b/packages/core/editor/src/parsers/getMarkdown.ts
@@ -14,6 +14,7 @@ export function serialize(editor: YooEditor, blocksData: YooptaBlockData[]) {
           element,
           // @ts-ignore - fixme
           element.children.map((child) => child.text).join(''),
+          blockData.meta as YooptaBlockBaseMeta,
         );
         if (serialized) return serialized;
       }

diff --git a/packages/core/exports/package.json b/packages/core/exports/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/exports",
-  "version": "4.9.3",
+  "version": "4.9.4",
   "description": "Serialize/deserialize exports in different formats for Yoopta-Editor",
   "author": "Darginec05 <[email protected]>",
   "homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",

diff --git a/packages/development/src/components/Exports/markdown/MarkdownPreview/MarkdownPreview.tsx b/packages/development/src/components/Exports/markdown/MarkdownPreview/MarkdownPreview.tsx
@@ -15,7 +15,6 @@ import { MARKDOWN_EDITOR_DEFAULT_VALUE } from './defaultEditorValue';
 import CodeMirror, { BasicSetupOptions } from '@uiw/react-codemirror';
 import { markdown as codemirrorMarkdown } from '@codemirror/lang-markdown';
 import { vscodeDark } from '@uiw/codemirror-theme-vscode';
-import jsBeatify from 'js-beautify';
 
 const LANGUAGES_MAP = {
   markdown: {
@@ -41,20 +40,15 @@ type ResultHTMLProps = {
 
 const ResultMD = ({ editor, value }: ResultHTMLProps) => {
   const [debounceValue] = useDebounce(value, 1000);
-  const [markdown, setHTML] = useState<string>('');
+  const [markdown, setMarkdown] = useState<string>('');
 
   useEffect(() => {
-    const htmlString = editor.getMarkdown(debounceValue);
-    const beautifiedMD = jsBeatify.html_beautify(htmlString, {
-      indent_with_tabs: false,
-      indent_size: 2,
-    });
-
-    setHTML(beautifiedMD);
+    const mdString = editor.getMarkdown(debounceValue);
+    setMarkdown(mdString);
   }, [debounceValue]);
 
   const onChange = (value: string) => {
-    setHTML(value);
+    setMarkdown(value);
   };
 
   return (
@@ -116,14 +110,9 @@ const MarkdownPreview = () => {
   };
 
   const onCopy = () => {
-    const htmlString = editor.getMarkdown(value);
-    const beautifiedMD = jsBeatify.html_beautify(htmlString, {
-      indent_with_tabs: false,
-      indent_size: 2,
-    });
-
-    copy(beautifiedMD);
-    console.log(beautifiedMD);
+    const mdString = editor.getMarkdown(value);
+    copy(mdString);
+    console.log(mdString);
     window.alert('Markdown content copied to clipboard or logged to console');
   };
 
@@ -148,7 +137,9 @@ const MarkdownPreview = () => {
                         <Editor editor={editor} value={value} onChange={onChange} />
 
                         <div className="flex items-center space-x-2">
-                          <Button onClick={onCopy}>Get markdown content</Button>
+                          <Button type="button" onClick={onCopy}>
+                            Get markdown content
+                          </Button>
                         </div>
                       </div>
                     </TabsContent>
@@ -161,7 +152,9 @@ const MarkdownPreview = () => {
                           </div>
                         </div>
                         <div className="flex items-center space-x-2">
-                          <Button onClick={onCopy}>Get markdown content</Button>
+                          <Button type="button" onClick={onCopy}>
+                            Get markdown content
+                          </Button>
                         </div>
                       </div>
                     </TabsContent>
@@ -177,8 +170,10 @@ const MarkdownPreview = () => {
                           <div className="mt-[21px] min-h-[400px] rounded-md border bg-muted lg:min-h-[700px]" />
                         </div>
                         <div className="flex items-center space-x-2">
-                          <Button onClick={onCopy}>Get markdown</Button>
-                          <Button variant="secondary">
+                          <Button type="button" onClick={onCopy}>
+                            Get markdown
+                          </Button>
+                          <Button type="button" variant="secondary">
                             {/* @ts-ignore */}
                             <CounterClockwiseClockIcon className="h-4 w-4" />
                           </Button>

diff --git a/packages/development/src/pages/dev/index.tsx b/packages/development/src/pages/dev/index.tsx
@@ -6,6 +6,7 @@ import YooptaEditor, {
   YooEditor,
   YooptaBlockData,
   YooptaContentValue,
+  YooptaPath,
 } from '@yoopta/editor';
 import { useEffect, useMemo, useRef, useState } from 'react';
 
@@ -794,6 +795,8 @@ const BasicExample = () => {
     setValue(value);
   };
 
+  const onPathChange = (path: YooptaPath) => {};
+
   // useEffect(() => {
   //   editor.withoutSavingHistory(() => {
   //     const id = generateId();
@@ -819,6 +822,7 @@ const BasicExample = () => {
           style={EDITOR_STYLE}
           value={value}
           onChange={onChange}
+          onPathChange={onPathChange}
         />
       </div>
     </>

diff --git a/packages/development/src/utils/yoopta/plugins.tsx b/packages/development/src/utils/yoopta/plugins.tsx
@@ -162,12 +162,17 @@ export const YOOPTA_PLUGINS = [
   }),
   Lists.NumberedList,
   Lists.TodoList.extend({
-    elementProps: {
-      'todo-list': (props: TodoListElement['props']) => ({
-        ...props,
-        checked: true,
-      }),
+    options: {
+      HTMLAttributes: {
+        spellCheck: false,
+      },
     },
+    // elementProps: {
+    //   'todo-list': (props: TodoListElement['props']) => ({
+    //     ...props,
+    //     checked: true,
+    //   }),
+    // },
   }),
   Embed,
   Video.extend({

diff --git a/packages/marks/package.json b/packages/marks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/marks",
-  "version": "4.9.3",
+  "version": "4.9.4",
   "description": "Marks for Yoopta Editor",
   "author": "Darginec05 <[email protected]>",
   "homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",

diff --git a/packages/plugins/accordion/package.json b/packages/plugins/accordion/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/accordion",
-  "version": "4.9.3",
+  "version": "4.9.4",
   "description": "Accordion plugin for Yoopta Editor",
   "author": "Darginec05 <[email protected]>",
   "homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",

diff --git a/packages/plugins/blockquote/package.json b/packages/plugins/blockquote/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/blockquote",
-  "version": "4.9.3",
+  "version": "4.9.4",
   "description": "Blockquote plugin for Yoopta Editor",
   "author": "Darginec05 <[email protected]>",
   "homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",

diff --git a/packages/plugins/callout/package.json b/packages/plugins/callout/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/callout",
-  "version": "4.9.3",
+  "version": "4.9.4",
   "description": "Callout plugin for Yoopta Editor",
   "author": "Darginec05 <[email protected]>",
   "homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",

diff --git a/packages/plugins/code/package.json b/packages/plugins/code/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/code",
-  "version": "4.9.3",
+  "version": "4.9.4",
   "description": "Code plugin with syntax highlighting for Yoopta Editor",
   "author": "Darginec05 <[email protected]>",
   "homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",

diff --git a/packages/plugins/divider/package.json b/packages/plugins/divider/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/divider",
-  "version": "4.9.3",
+  "version": "4.9.4",
   "description": "Divider plugin for Yoopta Editor",
   "author": "Darginec05 <[email protected]>",
   "homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",

diff --git a/packages/plugins/embed/package.json b/packages/plugins/embed/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/embed",
-  "version": "4.9.3",
+  "version": "4.9.4",
   "description": "Embed plugin for Yoopta Editor",
   "author": "Darginec05 <[email protected]>",
   "homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",

diff --git a/packages/plugins/file/package.json b/packages/plugins/file/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/file",
-  "version": "4.9.3",
+  "version": "4.9.4",
   "description": "File plugin for Yoopta Editor",
   "author": "Darginec05 <[email protected]>",
   "homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",

diff --git a/packages/plugins/headings/package.json b/packages/plugins/headings/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/headings",
-  "version": "4.9.3",
+  "version": "4.9.4",
   "description": "Headings plugin for Yoopta Editor",
   "author": "Darginec05 <[email protected]>",
   "homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",

diff --git a/packages/plugins/image/package.json b/packages/plugins/image/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/image",
-  "version": "4.9.3",
+  "version": "4.9.4",
   "description": "Image plugin for Yoopta Editor",
   "author": "Darginec05 <[email protected]>",
   "homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",

diff --git a/packages/plugins/link/package.json b/packages/plugins/link/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/link",
-  "version": "4.9.3",
+  "version": "4.9.4",
   "description": "Link plugin for Yoopta Editor",
   "author": "Darginec05 <[email protected]>",
   "homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",

diff --git a/packages/plugins/lists/package.json b/packages/plugins/lists/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/lists",
-  "version": "4.9.3",
+  "version": "4.9.4",
   "description": "Lists plugin for Yoopta Editor",
   "author": "Darginec05 <[email protected]>",
   "homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",