v4.9.3 (#410)

* update email examples (#391) ## Description Added the ability to add Loom & Wistia videos in the Video plugin. Note that I'm not used to Typescrpt at all, so I might need some help with this if you see issues. Fixes # (issue) ## Type of change Please tick the relevant option. - [ ] Bug fix (non-breaking change which fixes an issue) - [x ] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) - [ ] This change requires a documentation update ## Checklist: - [ ] I have performed a self-review of my own code - [ ] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [ ] My changes generate no new warnings - [ ] I have checked my code and corrected any misspellings * Improvements for loom and wistia videos (#402) * update email examples ## Description Added the ability to add Loom & Wistia videos in the Video plugin. Note that I'm not used to Typescrpt at all, so I might need some help with this if you see issues. Fixes # (issue) ## Type of change Please tick the relevant option. - [ ] Bug fix (non-breaking change which fixes an issue) - [x ] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) - [ ] This change requires a documentation update ## Checklist: - [ ] I have performed a self-review of my own code - [ ] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [ ] My changes generate no new warnings - [ ] I have checked my code and corrected any misspellings * fixes for loom and wistia providers --------- Co-authored-by: 5andu <[email protected]> * Update deserialize.ts (#415) * fix types * add smooth selection between block * added icons to callout (#417) * added changes in changelog.md * Publish - @yoopta/[email protected] - @yoopta/[email protected] - @yoopta/[email protected] - @yoopta/[email protected] - @yoopta/[email protected] - @yoopta/[email protected] - @yoopta/[email protected] - @yoopta/[email protected] - @yoopta/[email protected] - @yoopta/[email protected] - @yoopta/[email protected] - @yoopta/[email protected] - @yoopta/[email protected] - @yoopta/[email protected] - @yoopta/[email protected] - @yoopta/[email protected] - @yoopta/[email protected] - @yoopta/[email protected] - @yoopta/[email protected] - @yoopta/[email protected] * update examples * Publish - @yoopta/[email protected] - @yoopta/[email protected] - @yoopta/[email protected] - @yoopta/[email protected] - @yoopta/[email protected] - @yoopta/[email protected] - @yoopta/[email protected] - @yoopta/[email protected] - @yoopta/[email protected] - @yoopta/[email protected] - @yoopta/[email protected] - @yoopta/[email protected] - @yoopta/[email protected] - @yoopta/[email protected] - @yoopta/[email protected] - @yoopta/[email protected] - @yoopta/[email protected] - @yoopta/[email protected] - @yoopta/[email protected] - @yoopta/[email protected] * update examples --------- Co-authored-by: Alexandru Golovatenco <[email protected]> Co-authored-by: 5andu <[email protected]> Co-authored-by: Vaishnav Deore <[email protected]>
yoopta-editor · Dec 27, 2024 · 7dac041 · 7dac041
1 parent 60be674
commit 7dac041
Show file tree

Hide file tree

Showing 54 changed files with 817 additions and 115 deletions.
diff --git a/.gitignore b/.gitignore
@@ -66,4 +66,6 @@ test-results/
 !.yarn/versions
 .pnp.*
 
-.env
+.env
+
+.yarn
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,24 @@
 # Changelog
 
+## [4.9.3] - 2024-12-27
+
+### Added
+
+- `Added icons to callout render`
+- `Added **selection** of current block on *editor.path*`
+- `Deserializer for images in markdown`
+- `More video embed types (Loom & Wistia)`
+
+## [4.9.2] - 2024-11-11
+
+### Added
+
+- `Added Email-Builder by @yoopta/email-builder`
+- `Email export: accordion component by`
+- `Feature/email builder resend integration`
+- `Feature: email video export and thumbnail`
+- `Add email export, implement export for paragraph and headings`
+
 ## [4.9.1] - 2024-10-31
 
 ### Added

diff --git a/package.json b/package.json
@@ -108,5 +108,5 @@
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7"
   },
-  "packageManager": "yarn@3.5.1+sha512.8cd0e31bd60779ef4ca92b855fb3462c7ec35ce8b345752b7349a68239776417f46d41d79c8047242d9c93b48a1516f64c7444ebe747d9a02bf26868e6fa1f2b"
+  "packageManager": "yarn@1.22.22"
 }
diff --git a/packages/core/editor/package.json b/packages/core/editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/editor",
-  "version": "4.9.2",
+  "version": "4.9.3",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

diff --git a/packages/core/editor/src/components/Block/Block.tsx b/packages/core/editor/src/components/Block/Block.tsx
@@ -44,7 +44,7 @@ const Block = memo(({ children, block, blockId, onActiveDragHandleChange }: Bloc
       onMouseEnter={handleMouseEnter}
     >
       <div style={styles.content}>{children}</div>
-      {isSelected && !editor.readOnly && <div className="yoopta-selection-block" />}
+      {!editor.readOnly && <div data-block-selected={isSelected} className="yoopta-selection-block" />}
     </div>
   );
 });

diff --git a/packages/core/editor/src/editor/types.ts b/packages/core/editor/src/editor/types.ts
@@ -1,4 +1,4 @@
-import { Descendant, Path, Point } from 'slate';
+import { Descendant, Path, Point, Selection } from 'slate';
 import { Plugin, PluginElementsMap, PluginOptions, PluginElementProps } from '../plugins/types';
 import { EditorBlurOptions } from './core/blur';
 import { deleteBlock, DeleteBlockOptions } from './blocks/deleteBlock';
@@ -47,6 +47,7 @@ export type YooptaPathIndex = number | null;
 export type YooptaPath = {
   current: YooptaPathIndex;
   selected?: number[] | null;
+  selection?: Selection | null;
 };
 
 // Marks

diff --git a/packages/core/editor/src/plugins/SlateEditorComponent.tsx b/packages/core/editor/src/plugins/SlateEditorComponent.tsx
@@ -6,14 +6,13 @@ import { YooptaMark } from '../marks';
 
 import { ExtendedLeafProps, PluginCustomEditorRenderProps, Plugin, PluginEvents } from './types';
 import { EditorEventHandlers } from '../types/eventHandlers';
-import { Editor, NodeEntry, Path, Range } from 'slate';
+import { Editor, NodeEntry, Path, Range, Selection } from 'slate';
 import { TextLeaf } from '../components/TextLeaf/TextLeaf';
 
 import { IS_FOCUSED_EDITOR } from '../utils/weakMaps';
 import { deserializeHTML } from '../parsers/deserializeHTML';
 import { useEventHandlers, useSlateEditor } from './hooks';
 import { SlateElement } from '../editor/types';
-import { Paths } from '../editor/paths';
 
 type Props<TElementMap extends Record<string, SlateElement>, TOptions> = Plugin<TElementMap, TOptions> & {
   id: string;
@@ -71,6 +70,15 @@ const SlateEditorComponent = <TElementMap extends Record<string, SlateElement>,
     [id],
   );
 
+  const onSelectionChange = useCallback(
+    (selection: Selection) => {
+      if (editor.readOnly) return;
+
+      editor.setPath({ current: editor.path.current, selected: editor.path.selected, selection: selection });
+    },
+    [editor.readOnly],
+  );
+
   const renderElement = useCallback(
     (elementProps: RenderElementProps) => {
       const ElementComponent = ELEMENTS_MAP[elementProps.element.type];
@@ -248,6 +256,7 @@ const SlateEditorComponent = <TElementMap extends Record<string, SlateElement>,
       slate={slate}
       initialValue={initialValue}
       onChange={onChange}
+      onSelectionChange={onSelectionChange}
       decorate={decorate}
       renderLeaf={renderLeaf}
       renderElement={renderElement}
@@ -269,6 +278,7 @@ type SlateEditorInstanceProps = {
   readOnly: boolean;
   initialValue: any;
   onChange: (value: any) => void;
+  onSelectionChange: (selection: Selection) => void;
   renderLeaf: (props: ExtendedLeafProps<any, any>) => JSX.Element;
   renderElement: (props: RenderElementProps) => JSX.Element;
   eventHandlers: EditorEventHandlers;
@@ -294,7 +304,7 @@ const SlateEditorInstance = memo<SlateEditorInstanceProps>(
     onKeyDown,
     onKeyUp,
     onFocus,
-    onBlur,
+    onSelectionChange,
     onPaste,
     customEditor,
     decorate,
@@ -305,7 +315,13 @@ const SlateEditorInstance = memo<SlateEditorInstanceProps>(
     }
 
     return (
-      <Slate key={`slate-${id}`} editor={slate} initialValue={initialValue} onValueChange={onChange}>
+      <Slate
+        key={`slate-${id}`}
+        editor={slate}
+        initialValue={initialValue}
+        onValueChange={onChange}
+        onSelectionChange={onSelectionChange}
+      >
         <Editable
           key={`editable-${id}`}
           renderElement={renderElement}

diff --git a/packages/core/editor/src/plugins/types.ts b/packages/core/editor/src/plugins/types.ts
@@ -43,17 +43,17 @@ export type PluginCustomEditorRenderProps = {
 export type PluginDefaultProps = { nodeType?: 'block' | 'inline' | 'void' | 'inlineVoid' };
 export type PluginElementProps<T> = PluginDefaultProps & T;
 
-export type PluginElement<T> = {
+export type PluginElement<TKeys, T> = {
   render: (props: PluginElementRenderProps) => JSX.Element;
   props?: PluginElementProps<T>;
   options?: PluginElementOptions;
   asRoot?: boolean;
-  children?: string[];
+  children?: TKeys[];
   rootPlugin?: string;
 };
 
 export type PluginElementsMap<TKeys extends string = string, TProps = PluginDefaultProps> = {
-  [key in TKeys]: PluginElement<TProps>;
+  [key in TKeys]: PluginElement<TKeys, TProps>;
 };
 
 export type EventHandlers = {
@@ -84,7 +84,7 @@ export type Plugin<TElementMap extends Record<string, SlateElement>, TPluginOpti
   extensions?: (slate: SlateEditor, editor: YooEditor, blockId: string) => SlateEditor;
   commands?: Record<string, (editor: YooEditor, ...args: any[]) => any>;
   elements: {
-    [K in keyof TElementMap]: PluginElement<TElementMap[K]['props']>;
+    [K in keyof TElementMap]: PluginElement<Exclude<keyof TElementMap, K>, TElementMap[K]['props']>;
   };
   events?: PluginEvents;
   options?: PluginOptions<TPluginOptions>;

diff --git a/packages/core/editor/src/styles.css b/packages/core/editor/src/styles.css
@@ -44,8 +44,16 @@
   @apply yoo-editor-relative yoo-editor-py-0 yoo-editor-px-[2px] yoo-editor-mt-[2px] yoo-editor-mb-[1px] yoo-editor-rounded
 }
 
+.yoopta-selection-block::before {
+  content: "";
+}
+
 .yoopta-selection-block {
-  @apply yoo-editor-absolute yoo-editor-left-0 yoo-editor-top-0 yoo-editor-bg-[#2383e224] yoo-editor-z-[90] yoo-editor-rounded yoo-editor-opacity-100 yoo-editor-h-full yoo-editor-w-full yoo-editor-pointer-events-none
+  @apply before:yoo-editor-pointer-events-none before:yoo-editor-absolute before:yoo-editor-inset-0 before:yoo-editor-z-[1] before:yoo-editor-size-full before:yoo-editor-rounded-[4px] before:yoo-editor-bg-[#2383e224] before:yoo-editor-transition-opacity before:yoo-editor-duration-200 before:yoo-editor-opacity-0
+}
+
+.yoopta-selection-block[data-block-selected="true"]::before {
+  @apply yoo-editor-bg-[#2383e224] yoo-editor-opacity-100
 }
 
 .yoopta-block-actions {

diff --git a/packages/core/editor/src/utils/blockElements.ts b/packages/core/editor/src/utils/blockElements.ts
@@ -15,7 +15,7 @@ export function getRootBlockElementType(elems: PluginElementsMap<string, unknown
 
 export function getRootBlockElement(
   elems: PluginElementsMap<string, unknown> | undefined,
-): PluginElement<unknown> | undefined {
+): PluginElement<string, unknown> | undefined {
   if (!elems) return;
 
   const rootElementType = getRootBlockElementType(elems);
@@ -70,7 +70,7 @@ export function buildSlateNodeElement(
 }
 
 function recursivelyCollectElementChildren(
-  blockElement: PluginElement<unknown>,
+  blockElement: PluginElement<string, unknown>,
   blockElements: PluginElementsMap,
   elementsMapWithTextContent?: ElementsMapWithTextContent,
 ): SlateElement[] {

diff --git a/packages/core/exports/package.json b/packages/core/exports/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/exports",
-  "version": "4.9.2",
+  "version": "4.9.3",
   "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/core/exports/src/markdown/deserialize.ts b/packages/core/exports/src/markdown/deserialize.ts
@@ -3,6 +3,30 @@ import { marked } from 'marked';
 import { deserializeHTML } from '../html/deserialize';
 
 export function deserializeMarkdown(editor: YooEditor, markdown: string): YooptaContentValue {
+  const imageExtension = {
+	  name: 'image',
+	  level: 'block',
+	  start(src: string) {
+		  return src.match(/!\[/)?.index;
+	  },
+	  tokenizer(src: string) {
+		  const rule = /^!\[(.*?)\]\((.*?)\)/;
+		  const match = rule.exec(src);
+		  if (match) {
+			  return {
+				  type: 'image',
+				  raw: match[0],
+				  alt: match[1],
+				  href: match[2]
+			  };
+		  }
+		  return;
+	  },
+	  renderer(token: any) {
+		  return `<img alt="${token.alt}" src="${token.href}">`;
+	  }
+  };
+  marked.use({ extensions: [imageExtension] });
   const html = marked.parse(markdown, { gfm: true, breaks: true, pedantic: false }) as string;
   return deserializeHTML(editor, html);
 }
diff --git a/packages/marks/package.json b/packages/marks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/marks",
-  "version": "4.9.2",
+  "version": "4.9.3",
   "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.2",
+  "version": "4.9.3",
   "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.2",
+  "version": "4.9.3",
   "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.2",
+  "version": "4.9.3",
   "description": "Callout plugin for Yoopta Editor",
   "author": "Darginec05 <[email protected]>",
   "homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",

diff --git a/packages/plugins/callout/src/icons/default.svg b/packages/plugins/callout/src/icons/default.svg
diff --git a/packages/plugins/callout/src/icons/info.svg b/packages/plugins/callout/src/icons/info.svg
diff --git a/packages/plugins/callout/src/styles.css b/packages/plugins/callout/src/styles.css
@@ -10,7 +10,11 @@
 }
 
 .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]
+  @apply yoo-callout-rounded-md yoo-callout-mt-2 yoo-callout-p-2 yoo-callout-pl-10 yoo-callout-leading-7 yoo-callout-text-[16px] yoo-callout-relative yoo-callout-gap-3
+}
+
+.yoopta-callout-icon {
+  @apply yoo-callout-mt-1.5 yoo-callout-w-4 yoo-callout-absolute yoo-callout-left-4 yoo-callout-top-2
 }
 
 .yoopta-callout-theme-default {

diff --git a/packages/plugins/callout/src/ui/Callout.tsx b/packages/plugins/callout/src/ui/Callout.tsx
@@ -1,5 +1,19 @@
 import { PluginElementRenderProps, useBlockData, useYooptaEditor, useYooptaReadOnly } from '@yoopta/editor';
 import { CalloutBlockOptions } from './CalloutBlockOptions';
+import { CalloutTheme } from '../types';
+import DefaultIcon from '../icons/default.svg';
+import SuccessIcon from '../icons/success.svg';
+import WarningIcon from '../icons/warning.svg';
+import ErrorIcon from '../icons/error.svg';
+import InfoIcon from '../icons/info.svg';
+
+const THEME_ICONS: Record<CalloutTheme, any> = {
+  default: DefaultIcon,
+  success: SuccessIcon,
+  warning: WarningIcon,
+  error: ErrorIcon,
+  info: InfoIcon,
+};
 
 const CalloutRender = ({ extendRender, ...props }: PluginElementRenderProps) => {
   const { element, attributes, children, blockId, HTMLAttributes = {} } = props;
@@ -14,8 +28,13 @@ const CalloutRender = ({ extendRender, ...props }: PluginElementRenderProps) =>
     return extendRender(props);
   }
 
+  const Icon = THEME_ICONS[theme];
+
   return (
     <div className={`yoopta-callout yoopta-callout-theme-${theme} ${className}`} {...htmlAttrs} {...attributes}>
+      <div className="yoopta-callout-icon">
+        <Icon />
+      </div>
       {!isReadOnly && <CalloutBlockOptions block={block} editor={editor} props={element.props} />}
       {children}
     </div>

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

diff --git a/packages/plugins/embed/src/plugin/index.tsx b/packages/plugins/embed/src/plugin/index.tsx
@@ -1,12 +1,6 @@
 import { generateId, YooptaPlugin } from '@yoopta/editor';
 import { EmbedCommands } from '../commands';
-import {
-  EmbedElementMap,
-  EmbedElementProps,
-  EmbedPluginElements,
-  EmbedPluginOptions,
-  EmbedProviderTypes,
-} from '../types';
+import { EmbedElementMap, EmbedPluginOptions } from '../types';
 import { EmbedRender } from '../ui/Embed';
 
 const ALIGNS_TO_JUSTIFY = {
@@ -70,6 +64,11 @@ const Embed = new YooptaPlugin<EmbedElementMap, EmbedPluginOptions>({
           vimeo: (id: string) => `https://player.vimeo.com/embed/${id}`,
           dailymotion: (id: string) => `https://www.dailymotion.com/embed/embed/${id}`,
           figma: (id: string) => `https://www.figma.com/embed?embed_host=share&url=${id}`,
+          loom: (id: string) =>
+            `https://www.loom.com/embed/${id}?hide_owner=true&hide_share=true&hide_title=true&hideEmbedTopBar=true`,
+          instagram: (id: string) => `https://www.instagram.com/p/${id}/embed`,
+          wistia: (id: string) => `https://fast.wistia.net/embed/iframe/${id}?videoFoam=false`,
+          twitter: (id: string) => `https://platform.twitter.com/widgets/tweet.html?id=${id}`,
         };
 
         let url = element.props.provider.url;
-Original file line number
+Diff line change
@@ Expand Up / @@ -66,4 +66,6 @@ test-results/ @@
     !.yarn/versions
     .pnp.*
-    .env
+    .env
+    .yarn