Collaborative development via YJS

CONTRIBUTING.md

@@ -48,5 +48,5 @@ packages/
 ├── plugins - editor plugin extensions
 ├── tools - tools packages
 └── development - developer playground
-└── web/next-example - all examples
+web/next-example - all examples
 ```

package.json

@@ -21,7 +21,12 @@
     "release": "yarn clean && yarn build && yarn lerna publish --no-private"
   },
   "devDependencies": {
+    "@faker-js/faker": "^9.2.0",
     "@floating-ui/dom": "^1.6.11",
+    "@hocuspocus/extension-database": "^2.13.7",
+    "@hocuspocus/extension-sqlite": "^2.13.7",
+    "@hocuspocus/provider": "^2.13.7",
+    "@hocuspocus/server": "^2.13.7",
     "@playwright/test": "^1.30.0",
     "@radix-ui/react-icons": "^1.3.0",
     "@rollup/plugin-alias": "^4.0.2",
@@ -69,6 +74,7 @@
     "postcss-nesting": "^12.0.2",
     "postcss-scope": "^1.7.3",
     "prettier": "2.8.8",
+    "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "resend": "^4.0.0",
@@ -90,7 +96,10 @@
     "ts-node": "^10.9.1",
     "typescript": "^4.8.4",
     "vite-plugin-svgr": "^2.4.0",
-    "vitest": "^0.28.3"
+    "vitest": "^0.28.3",
+    "y-protocols": "^1.0.6",
+    "y-websocket": "^2.0.4",
+    "yjs": "^13.6.20"
   },
   "peerDependencies": {
     "react": ">=17.0.2",
@@ -108,5 +117,5 @@
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7"
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

packages/core/editor/package.json

@@ -2,7 +2,6 @@
   "name": "@yoopta/editor",
   "version": "4.9.7",
   "license": "MIT",
-  "private": false,
   "main": "dist/index.js",
   "type": "module",
   "module": "dist/index.js",

packages/core/editor/src/YooptaEditor.tsx

@@ -110,12 +110,18 @@ const YooptaEditor = ({
       version: prevState.version + 1,
     }));
 
+    if (typeof onPathChange === 'function' && Array.isArray(options.operations)) {
+      const operations = options.operations.filter((operation) => operation.type === 'set_path');
+
+      if (operations.length > 0) {
+        onPathChange(editor.path);
+      }
+    }
+
     if (typeof onChange === 'function' && Array.isArray(options.operations)) {
       const operations = options.operations.filter(
         (operation) =>
-          operation.type !== 'validate_block_paths' &&
-          operation.type !== 'set_block_path' &&
-          operation.type !== 'set_slate',
+          operation.type !== 'validate_block_paths' && operation.type !== 'set_path' && operation.type !== 'set_slate',
       );
 
       if (operations.length > 0) onChange(value, { operations });
@@ -128,11 +134,11 @@ const YooptaEditor = ({
     };
 
     editor.on('change', changeHandler);
-    editor.on('path-change', onEditorPathChange);
+    // editor.on('path-change', onEditorPathChange);
 
     return () => {
       editor.off('change', changeHandler);
-      editor.off('path-change', onEditorPathChange);
+      // editor.off('path-change', onEditorPathChange);
     };
   }, [editor, onValueChange]);
 

packages/core/editor/src/components/Block/FloatingBlockActions.tsx

@@ -168,19 +168,23 @@ export const FloatingBlockActions = memo(({ editor, dragHandleProps }: FloatingB
 
     if (!slate) return;
 
-    setTimeout(() => {
-      const currentBlock = editor.blocks[block.type];
-
-      if (!currentBlock.hasCustomEditor) {
-        ReactEditor.blur(slate);
-        ReactEditor.deselect(slate);
-        Transforms.deselect(slate);
-      }
-
-      editor.setPath({ current: block.meta.order, selected: [block.meta.order] });
-
-      setIsBlockOptionsOpen(true);
-    }, 10);
+    try {
+      setTimeout(() => {
+        const currentBlock = editor.blocks[block.type];
+
+        if (!currentBlock.hasCustomEditor) {
+          ReactEditor.blur(slate);
+          ReactEditor.deselect(slate);
+          Transforms.deselect(slate);
+        }
+
+        editor.setPath({ current: block.meta.order, selected: [block.meta.order] });
+
+        setIsBlockOptionsOpen(true);
+      }, 10);
+    } catch (error) {
+      // [TODO] - handle error
+    }
   };
 
   const onDragButtonRef = (node: HTMLElement | null) => {

packages/core/editor/src/components/Editor/Editor.tsx

@@ -276,7 +276,6 @@ const Editor = ({
       return;
     }
   };
-
   // This event handler will be fired only in read-only mode
   const onCopy = (e: ClipboardEvent) => {
     if (!isReadOnly) return;

packages/core/editor/src/editor/blocks/decreaseBlockDepth.ts

@@ -14,8 +14,8 @@ export function decreaseBlockDepth(editor: YooEditor, options: BlockDepthOptions
   const operation: YooptaOperation = {
     type: 'set_block_meta',
     id: block.id,
-    properties: { depth: newDepth },
-    prevProperties: { depth: block.meta.depth },
+    properties: { ...block.meta, depth: newDepth },
+    prevProperties: { ...block.meta, depth: block.meta.depth },
   };
 
   editor.applyTransforms([operation]);

packages/core/editor/src/editor/blocks/increaseBlockDepth.ts

@@ -18,8 +18,8 @@ export function increaseBlockDepth(editor: YooEditor, options: BlockDepthOptions
   const operation: YooptaOperation = {
     type: 'set_block_meta',
     id: block.id,
-    properties: { depth: newDepth },
-    prevProperties: { depth: block.meta.depth },
+    properties: { ...block.meta, depth: newDepth },
+    prevProperties: { ...block.meta, depth: block.meta.depth },
   };
 
   editor.applyTransforms([operation]);

packages/core/editor/src/editor/core/applyTransforms.ts

@@ -62,7 +62,7 @@ export type SplitBlockOperation = {
   path: YooptaPath;
 };
 
-export type ToogleBlockOperation = {
+export type ToggleBlockOperation = {
   type: 'toggle_block';
   properties: {
     toggledBlock: YooptaBlockData;
@@ -96,7 +96,7 @@ export type DeleteBlockOperation = {
 };
 
 export type SetSelectionBlockOperation = {
-  type: 'set_block_path';
+  type: 'set_path';
   path: YooptaPath;
 };
 
@@ -123,7 +123,7 @@ export type YooptaOperation =
   | SetBlockValueOperation
   | SetBlockMetaOperation
   | MergeBlockOperation
-  | ToogleBlockOperation
+  | ToggleBlockOperation
   | MoveBlockOperation
   | SetSlateOperation
   | SetEditorValueOperation;
@@ -338,7 +338,17 @@ function applyOperation(editor: YooEditor, op: YooptaOperation): void {
       break;
     }
 
-    case 'set_block_path': {
+    case 'set_path': {
+      // reset anchor selection if several blocks are selected
+      if (Array.isArray(op.path.selected) && op.path.selected.length > 0 && op.path.selection) {
+        op.path.selection = null;
+      }
+
+      // reset anchor selection if we change focused block
+      if (op.path.current !== editor.path.current && op.path.selection) {
+        op.path.selection = null;
+      }
+
       editor.path = op.path;
       break;
     }
@@ -390,7 +400,9 @@ export function applyTransforms(editor: YooEditor, ops: YooptaOperation[], optio
   editor.path = createDraft(editor.path);
 
   const { validatePaths = true, source } = options || {};
-  const operations = [...ops];
+  const operations = ops.slice();
+
+  editor.operations = [...editor.operations, ...operations];
 
   if (validatePaths) {
     operations.push({ type: 'validate_block_paths' });
@@ -423,11 +435,18 @@ export function applyTransforms(editor: YooEditor, ops: YooptaOperation[], optio
     editor.path = finishDraft(editor.path);
   }
 
+  // console.log(
+  //   'editor.children orders',
+  //   Object.values(editor.children)
+  //     .sort((aKey, bKey) => aKey.meta.order - bKey.meta.order)
+  //     .map((block) => `${block.meta.order}: ${block.id}`),
+  // );
+
   const saveHistory = editor.isSavingHistory() !== false;
   if (saveHistory) {
     const historyBatch = {
       operations: operations.filter(
-        (op) => op.type !== 'set_block_path' && op.type !== 'set_block_value' && op.type !== 'validate_block_paths',
+        (op) => op.type !== 'set_path' && op.type !== 'set_block_value' && op.type !== 'validate_block_paths',
       ),
       path: editor.path,
     };
@@ -446,6 +465,10 @@ export function applyTransforms(editor: YooEditor, ops: YooptaOperation[], optio
   editor.emit('change', changeOptions);
   editor.emit('path-change', editor.path);
 
+  Promise.resolve().then(() => {
+    editor.operations = [];
+  });
+
   if (process.env.NODE_ENV !== 'production') {
     assertValidPaths(editor);
   }

packages/core/editor/src/editor/index.tsx

@@ -41,7 +41,7 @@ export function createYooptaEditor(): YooEditor {
     id: '',
     children: {},
     blockEditorsMap: {},
-    path: { current: null },
+    path: { current: null, selection: null, selected: null },
     readOnly: false,
     isEmpty: () => isEmpty(editor),
     getEditorValue: () => getEditorValue(editor),
@@ -65,6 +65,7 @@ export function createYooptaEditor(): YooEditor {
     plugins: {},
     commands: {},
 
+    operations: [],
     applyTransforms: (operations, ...args) => applyTransforms(editor, operations, ...args),
     batchOperations: (callback) => batchOperations(editor, callback),
 

packages/core/editor/src/editor/paths/setPath.ts

@@ -1,5 +1,5 @@
 import { YooEditor, YooptaPath } from '../types';
 
 export function setPath(editor: YooEditor, path: YooptaPath) {
-  editor.applyTransforms([{ type: 'set_block_path', path }], { validatePaths: false });
+  editor.applyTransforms([{ type: 'set_path', path }], { validatePaths: false });
 }

packages/core/editor/src/editor/types.ts

@@ -23,6 +23,8 @@ import { getPlainText } from '../parsers/getPlainText';
 import { getEmail } from '../parsers/getEmail';
 import { ExtendedType } from './custom-types';
 
+export type YooptaContentValue = Record<string, YooptaBlockData>;
+
 export type YooptaBlockData<T = Descendant | SlateElement> = {
   id: string;
   value: T[];
@@ -36,7 +38,13 @@ export type YooptaBlockBaseMeta = {
   align?: 'left' | 'center' | 'right' | undefined;
 };
 
-export type YooptaContentValue = Record<string, YooptaBlockData>;
+// types for slate values
+export type SlateElement<K extends string = string, T = any> = {
+  id: string;
+  type: K;
+  children: Descendant[];
+  props?: PluginElementProps<T>;
+};
 
 export type SlateEditor = ReactEditor;
 
@@ -125,6 +133,7 @@ export type BaseYooEditor = {
   commands: Record<string, (...args: any[]) => any>;
 
   // core handlers
+  operations: YooptaOperation[];
   applyTransforms: WithoutFirstArg<typeof applyTransforms>;
   batchOperations: (fn: () => void) => void;
 
@@ -170,12 +179,4 @@ export type SlateElementTextNode = {
   highlight?: any;
 };
 
-// types for slate values
-export type SlateElement<K extends string = string, T = any> = {
-  id: string;
-  type: K;
-  children: Descendant[];
-  props?: PluginElementProps<T>;
-};
-
 export type YooEditor = ExtendedType<'YooEditor', BaseYooEditor>;

packages/core/editor/src/index.ts

@@ -68,6 +68,7 @@ export {
   SetBlockValueOperation,
   SetBlockMetaOperation,
   MergeBlockOperation,
+  ToggleBlockOperation,
   MoveBlockOperation,
   SetSlateOperation,
   SetEditorValueOperation,

packages/core/editor/src/plugins/SlateEditorComponent.tsx

@@ -304,13 +304,13 @@ const SlateEditorInstance = memo<SlateEditorInstanceProps>(
     slate,
     initialValue,
     onChange,
+    onSelectionChange,
     renderLeaf,
     renderElement,
     eventHandlers,
     onKeyDown,
     onKeyUp,
     onFocus,
-    onSelectionChange,
     onPaste,
     customEditor,
     decorate,

packages/core/editor/src/styles.css

@@ -46,6 +46,7 @@
   @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: "";
 }

packages/core/exports/package.json

@@ -5,7 +5,6 @@
   "author": "Darginec05 <[email protected]>",
   "homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",
   "license": "MIT",
-  "private": false,
   "main": "dist/index.js",
   "type": "module",
   "module": "dist/index.js",

packages/core/yoopta-chatGPT-assistant/package.json

@@ -14,9 +14,9 @@
     "dist/"
   ],
   "peerDependencies": {
+    "@yoopta/editor": ">=4.0.0",
     "react": ">=17.0.2",
-    "react-dom": ">=17.0.2",
-    "@yoopta/editor": ">=4.0.0"
+    "react-dom": ">=17.0.2"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"

packages/development/next.config.mjs

@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  reactStrictMode: true,
+  reactStrictMode: false,
   typescript: {
     ignoreBuildErrors: true,
   },

packages/development/package.json

@@ -38,6 +38,7 @@
     "@yoopta/table": "*",
     "@yoopta/toolbar": "*",
     "@yoopta/video": "*",
+    "@yoopta/mention": "*",
     "class-variance-authority": "^0.7.0",
     "classnames": "^2.5.1",
     "clsx": "^2.1.1",