Updates on SlateJs

* Fixed style modifying whole line
-----
* Need to add <ul> or <ol> element for list management

code/client/dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-a0f72815'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.3hobnoep3ho"
+    "revision": "0.ptn1a5ctte"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

code/client/package.json

@@ -2,6 +2,7 @@
   "name": "@notespace/client",
   "version": "1.0.0",
   "description": "",
+  "type": "module",
   "author": "notespace-team",
   "private": true,
   "license": "MIT",
@@ -31,7 +32,7 @@
   "devDependencies": {
     "@types/lodash": "^4.17.0",
     "@types/node": "^20.11.30",
-    "@types/react": "^18.2.70",
+    "@types/react": "^18.2.72",
     "@types/react-dom": "^18.2.22",
     "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^7.4.0",
@@ -47,7 +48,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
     "jsdom": "^24.0.0",
-    "knip": "^5.5.0",
+    "knip": "^5.6.0",
     "prettier": "^3.2.5",
     "sass": "^1.72.0",
     "typescript": "^5.4.3",

code/client/src/App.tsx

@@ -1,5 +1,5 @@
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
-import SlateEditor from '@editor/slate/SlateEditor.tsx';
+import SlateEditor from '@editor/slate.js/SlateEditor.tsx';
 import './App.scss';
 
 function App() {

code/client/src/editor/hooks/useEvents.ts

@@ -1,4 +1,4 @@
-import useSocketListeners from '@src/socket/useSocketListeners';
+import useSocketListeners from '@src/socket.io/useSocketListeners';
 import { type Fugue } from '@src/editor/crdt/fugue';
 import { type Node } from '@notespace/shared/crdt/types/nodes';
 import { type Operation } from '@notespace/shared/crdt/types/operations';

code/client/src/editor/slate.js/SlateEditor.tsx

@@ -1,15 +1,15 @@
 import { Editable, Slate, withReact } from 'slate-react';
-import useInputHandlers from '@editor/slate/hooks/useInputHandlers';
+import useInputHandlers from '@editor/slate.js/hooks/useInputHandlers';
 import useFugue from '@editor/hooks/useFugue';
 import useEvents from '@editor/hooks/useEvents';
-import useRenderers from '@editor/slate/hooks/useRenderers';
+import useRenderers from '@editor/slate.js/hooks/useRenderers';
 import './SlateEditor.scss';
-import Toolbar from '@editor/slate/toolbar/Toolbar';
+import Toolbar from '@editor/slate.js/toolbar/Toolbar';
 import { withHistory } from 'slate-history';
-import useEditor from '@editor/slate/hooks/useEditor';
-import { withMarkdown } from '@editor/slate/plugins/markdown/withMarkdown';
+import useEditor from '@editor/slate.js/hooks/useEditor';
+import { withMarkdown } from '@editor/slate.js/plugins/markdown/withMarkdown';
 import { withNormalize } from './plugins/normalize/withNormalize';
-import { toSlate } from '@editor/slate/utils/toSlate';
+import { toSlate } from '@editor/slate.js/utils/toSlate';
 
 const initialValue = [
   {
@@ -21,7 +21,7 @@ const initialValue = [
 function SlateEditor() {
   const editor = useEditor(withHistory, withReact, withMarkdown, withNormalize);
   const fugue = useFugue();
-  const { onKeyDown, onPaste } = useInputHandlers(editor, fugue);
+  const { onKeyDown, onPaste, onCut } = useInputHandlers(editor, fugue);
   const { renderElement, renderLeaf } = useRenderers();
 
   useEvents(fugue, () => {
@@ -45,6 +45,7 @@ function SlateEditor() {
             placeholder={'Start writing...'}
             onKeyDown={onKeyDown}
             onPaste={onPaste}
+            onCut={onCut}
           />
         </Slate>
       </div>

code/client/src/editor/slate.js/hooks/useInputHandlers.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
 import { type Fugue } from '@editor/crdt/fugue';
-import CustomEditor from '@editor/slate/model/CustomEditor';
+import CustomEditor from '@editor/slate.js/model/CustomEditor';
 import { type Editor } from 'slate';
 import { getSelection } from '../utils/selection';
 import { isEqual } from 'lodash';
@@ -45,15 +45,22 @@ function useInputHandlers(editor: Editor, fugue: Fugue) {
   function onPaste(e: React.ClipboardEvent<HTMLDivElement>) {
     const clipboardData = e.clipboardData?.getData('text');
     if (!clipboardData) return;
-    // const selection = getSelection();
-    // fugue.insertLocal(start, insertNode(clipboardData, []));
+    const selection = getSelection(editor);
+    const { start } = selection;
+    fugue.insertLocal(start, insertNode(clipboardData, [])); // TODO: Fix this
+  }
+
+  function onCut() {
+    const selection = getSelection(editor);
+    fugue.deleteLocal(selection); // TODO: Fix this
   }
 
   function shortcutHandler(event: React.KeyboardEvent<HTMLDivElement>) {
     const mark = hotkeys[event.key];
     CustomEditor.toggleMark(editor, mark, fugue);
   }
-  return { onKeyDown, onPaste };
+
+  return { onKeyDown, onPaste, onCut };
 }
 
 export default useInputHandlers;

code/client/src/editor/slate.js/hooks/useRenderers.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import { type RenderElementProps, type RenderLeafProps } from 'slate-react';
-import { getElementRenderer, getLeafRenderer } from '@editor/slate/plugins/markdown/rendering/renderers.tsx';
+import { getElementRenderer, getLeafRenderer } from '@editor/slate.js/plugins/markdown/rendering/renderers.tsx';
 
 /**
  * Returns the renderers for the editor.

code/client/src/editor/slate.js/model/CustomEditor.ts

@@ -1,6 +1,6 @@
-import { Editor, Transforms } from 'slate';
+import { Editor } from 'slate';
 import { type Fugue } from '@editor/crdt/fugue.ts';
-import { getAbsoluteSelection } from '@editor/slate/model/utils.ts';
+import { getAbsoluteSelection } from '@editor/slate.js/model/utils.ts';
 
 /**
  * Custom editor operations.
@@ -12,7 +12,7 @@ const CustomEditor = {
   },
   toggleMark(editor: Editor, mark: string, fugue: Fugue) {
     const isActive = CustomEditor.isMarkActive(editor, mark);
-    Transforms.setNodes(editor, { [mark]: !isActive }, { match: n => Editor.isBlock(editor, n) });
+    Editor.addMark(editor, mark, !isActive);
 
     const [start, end] = getAbsoluteSelection(editor)!;
     fugue.updateStyleLocal(start, end, !isActive, mark);

code/client/src/editor/slate.js/plugins/markdown/rendering/renderers.tsx

@@ -1,7 +1,7 @@
 import { type RenderElementProps } from 'slate-react';
 import { ElementRenderers, LeafRenderers } from './elements.tsx';
 import { Paragraph } from './components/components.ts';
-import { type CustomText } from '@editor/slate/model/types.ts';
+import { type CustomText } from '@editor/slate.js/model/types.ts';
 import { type ReactNode } from 'react';
 
 export const getElementRenderer = (type: string, props: RenderElementProps) => {

code/client/src/editor/slate.js/plugins/markdown/shortcuts.ts

@@ -1,7 +1,7 @@
-import { type CustomElement } from '@editor/slate/model/types.ts';
+import { type CustomElement } from '@editor/slate.js/model/types.ts';
 import { BlockStyles, InlineStyles } from '@notespace/shared/crdt/types/styles';
 import { type Editor, Element, Range, Text, Transforms } from 'slate';
-import { createDescendant } from '@editor/slate/model/utils.ts';
+import { createDescendant } from '@editor/slate.js/model/utils.ts';
 
 const escapeRegExp = (s: string) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 

code/client/src/editor/slate.js/toolbar/Toolbar.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { useFocused, useSlate } from 'slate-react';
-import CustomEditor from '@editor/slate/model/CustomEditor';
-import { isSelected } from '@editor/slate/utils/selection';
+import CustomEditor from '@editor/slate.js/model/CustomEditor';
+import { isSelected } from '@editor/slate.js/utils/selection';
 import { FaBold, FaItalic, FaUnderline, FaStrikethrough, FaCode } from 'react-icons/fa';
 import { type Fugue } from '@editor/crdt/fugue';
 

code/client/src/editor/slate.js/utils/toSlate.ts

@@ -1,8 +1,8 @@
 import type { Descendant } from 'slate';
 import type { Style, BlockStyle } from '../../../../../shared/crdt/types/styles';
-import type { CustomText } from '@editor/slate/model/types.ts';
+import type { CustomText } from '@editor/slate.js/model/types.ts';
 import { isEmpty, isEqual } from 'lodash';
-import { createChildren, createDescendant } from '@editor/slate/model/utils.ts';
+import { createChildren, createDescendant } from '@editor/slate.js/model/utils.ts';
 import { Fugue } from '@editor/crdt/fugue.ts';
 
 export function toSlate(fugue: Fugue): Descendant[] {

code/server/package.json

@@ -36,7 +36,7 @@
     "babel-jest": "^29.7.0",
     "eslint": "^8.57.0",
     "jest": "^29.7.0",
-    "knip": "^5.5.0",
+    "knip": "^5.6.0",
     "prettier": "^3.2.5",
     "socket.io-client": "^4.7.5",
     "test-jest": "^1.0.1",

code/server/src/controllers/socket.io/document/onOperation.ts

@@ -4,6 +4,7 @@ import { Operation } from '@notespace/shared/crdt/types/operations';
 
 function onOperation(service: DocumentService) {
   return (socket: Socket, operation: Operation) => {
+    console.log('operation', operation);
     switch (operation.type) {
       case 'insert': {
         service.insertCharacter(operation);

code/shared/package.json

@@ -16,7 +16,7 @@
     "@typescript-eslint/eslint-plugin": "^7.4.0",
     "@typescript-eslint/parser": "^7.4.0",
     "eslint": "^8.57.0",
-    "knip": "^5.5.0",
+    "knip": "^5.6.0",
     "prettier": "^3.2.5",
     "typescript": "^5.4.3"
   },