Feat/mark affinity

apps/www/package.json

@@ -82,6 +82,7 @@
     "@udecode/plate-line-height": "workspace:^",
     "@udecode/plate-link": "workspace:^",
     "@udecode/plate-list": "workspace:^",
+    "@udecode/plate-marks-affinity": "workspace:^",
     "@udecode/plate-media": "workspace:^",
     "@udecode/plate-mention": "workspace:^",
     "@udecode/plate-node-id": "workspace:^",

apps/www/src/registry/default/example/playground-demo.tsx

@@ -33,6 +33,10 @@ import {
   createSubscriptPlugin,
   createSuperscriptPlugin,
   createUnderlinePlugin,
+  MARK_BOLD,
+  MARK_ITALIC,
+  MARK_STRIKETHROUGH,
+  MARK_UNDERLINE,
 } from '@udecode/plate-basic-marks';
 import {
   createBlockquotePlugin,
@@ -49,7 +53,7 @@ import {
   ELEMENT_CODE_BLOCK,
 } from '@udecode/plate-code-block';
 import { createComboboxPlugin } from '@udecode/plate-combobox';
-import { createCommentsPlugin } from '@udecode/plate-comments';
+import { createCommentsPlugin, MARK_COMMENT } from '@udecode/plate-comments';
 import {
   createPlugins,
   Plate,
@@ -63,6 +67,11 @@ import {
   createFontBackgroundColorPlugin,
   createFontColorPlugin,
   createFontSizePlugin,
+  MARK_BG_COLOR,
+  MARK_COLOR,
+  MARK_FONT_FAMILY,
+  MARK_FONT_SIZE,
+  MARK_FONT_WEIGHT,
 } from '@udecode/plate-font';
 import {
   createHeadingPlugin,
@@ -83,6 +92,7 @@ import { createColumnPlugin } from '@udecode/plate-layout';
 import { createLineHeightPlugin } from '@udecode/plate-line-height';
 import { createLinkPlugin } from '@udecode/plate-link';
 import { createListPlugin, createTodoListPlugin } from '@udecode/plate-list';
+import { createMarkAffinityPlugin } from '@udecode/plate-marks-affinity';
 import {
   createImagePlugin,
   createMediaEmbedPlugin,
@@ -191,6 +201,22 @@ export const usePlaygroundPlugins = ({
           createItalicPlugin({ enabled: !!enabled.italic }),
           createUnderlinePlugin({ enabled: !!enabled.underline }),
           createStrikethroughPlugin({ enabled: !!enabled.strikethrough }),
+          createMarkAffinityPlugin({
+            options: {
+              validMarks: [
+                MARK_BG_COLOR,
+                MARK_BOLD,
+                MARK_COLOR,
+                MARK_UNDERLINE,
+                MARK_FONT_FAMILY,
+                MARK_FONT_SIZE,
+                MARK_FONT_WEIGHT,
+                MARK_ITALIC,
+                MARK_STRIKETHROUGH,
+                MARK_COMMENT,
+              ],
+            },
+          }),
           createCodePlugin({ enabled: !!enabled.code }),
           createSubscriptPlugin({ enabled: !!enabled.subscript }),
           createSuperscriptPlugin({ enabled: !!enabled.superscript }),

packages/mark-affinity/.npmignore

@@ -0,0 +1,3 @@
+__tests__
+__test-utils__
+__mocks__

packages/mark-affinity/README.md

@@ -0,0 +1,15 @@
+# Plate marks affinity plugins
+
+This package implements the following futures:
+For example, if the editor has "boldn|ormal" and the user presses the left arrow key or
+backspace and then types, the resulting text will not be bold. If the editor has "bol|dnormal"
+and the user presses the right arrow key and types, the resulting text will be bold.
+
+## Documentation
+
+Check out
+[Basic Marks](https://platejs.org/docs/basic-marks-affinity).
+
+## License
+
+[MIT](../../LICENSE)

packages/mark-affinity/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@udecode/plate-marks-affinity",
+  "version": "31.0.0",
+  "description": "marks affinity plugin for Plate",
+  "license": "MIT",
+  "homepage": "https://platejs.org",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/udecode/plate.git"
+  },
+  "bugs": {
+    "url": "https://github.com/udecode/plate/issues"
+  },
+  "sideEffects": false,
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "module": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "yarn p:build",
+    "build:watch": "yarn p:build:watch",
+    "brl": "yarn p:brl",
+    "clean": "yarn p:clean",
+    "lint": "yarn p:lint",
+    "lint:fix": "yarn p:lint:fix",
+    "test": "yarn p:test",
+    "test:watch": "yarn p:test:watch",
+    "typecheck": "yarn p:typecheck"
+  },
+  "dependencies": {
+    "lodash": "^4.17.21"
+  },
+  "devDependencies": {
+    "@udecode/plate-common": "workspace:^"
+  },
+  "peerDependencies": {
+    "@udecode/plate-common": ">=31.3.2",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
+    "slate": ">=0.94.0",
+    "slate-history": ">=0.93.0",
+    "slate-hyperscript": ">=0.66.0",
+    "slate-react": ">=0.99.0"
+  },
+  "keywords": [
+    "plate",
+    "plugin",
+    "slate"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/mark-affinity/src/createMarkAffinityPlugin.ts

@@ -0,0 +1,13 @@
+import { createPluginFactory } from '@udecode/plate-common';
+
+import { MarkAffinityPlugin } from './types';
+import { withMarkAffinity } from './withMarkAffinity';
+
+export const KEY_MARK_AFFINITY = 'mark-affinity';
+
+export const createMarkAffinityPlugin = createPluginFactory<MarkAffinityPlugin>(
+  {
+    key: KEY_MARK_AFFINITY,
+    withOverrides: withMarkAffinity,
+  }
+);

packages/mark-affinity/src/index.ts

@@ -0,0 +1,9 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './createMarkAffinityPlugin';
+export * from './types';
+export * from './withMarkAffinity';
+export * from './queries/index';
+export * from './transforms/index';

packages/mark-affinity/src/queries/getMarkBoundary.ts

@@ -0,0 +1,53 @@
+import {
+  getNodeEntry,
+  getRange,
+  isEndPoint,
+  isSelectionExpanded,
+  isStartPoint,
+  isText,
+  PlateEditor,
+  TText,
+} from '@udecode/plate-common';
+import { NodeEntry, Path } from 'slate';
+
+import { MarkBoundary } from '../types';
+
+export const getMarkBoundary = (editor: PlateEditor): MarkBoundary | null => {
+  const { selection } = editor;
+  if (!selection || isSelectionExpanded(editor)) return null;
+  const point = selection.anchor;
+
+  const selectedLeafRange = getRange(editor, point.path);
+
+  const direction = (() => {
+    if (isStartPoint(editor, point, selectedLeafRange)) {
+      return 'backward';
+    }
+
+    if (isEndPoint(editor, point, selectedLeafRange)) {
+      return 'forward';
+    }
+
+    return null;
+  })();
+
+  if (!direction) return null;
+
+  const currentLeafEntry = getNodeEntry<TText>(editor, point.path)!;
+
+  if (direction === 'backward' && point.path.at(-1) === 0)
+    return [null, currentLeafEntry];
+
+  const adjacentPathFn = direction === 'forward' ? Path.next : Path.previous;
+  const adjacentPath = adjacentPathFn(point.path);
+  const adjacentNode = getNodeEntry(editor, adjacentPath) ?? null;
+
+  const adjacentLeafEntry =
+    adjacentNode && isText(adjacentNode[0])
+      ? (adjacentNode as NodeEntry<TText>)
+      : null;
+
+  return direction === 'forward'
+    ? [currentLeafEntry, adjacentLeafEntry]
+    : [adjacentLeafEntry, currentLeafEntry];
+};

packages/mark-affinity/src/queries/getMarkBoundaryAffinity.ts

@@ -0,0 +1,54 @@
+import {
+  getNodeProps,
+  IS_FIREFOX,
+  PlateEditor,
+  TText,
+} from '@udecode/plate-common';
+import isEqual from 'lodash/isEqual';
+
+import { MarkBoundary } from '../types';
+
+export const getMarkBoundaryAffinity = (
+  editor: PlateEditor,
+  markBoundary: MarkBoundary
+): 'forward' | 'backward' | 'new-mark' => {
+  const { marks, selection } = editor;
+  if (!selection) return 'new-mark';
+  const marksMatchLeaf = (leaf: TText) =>
+    marks && isEqual(getNodeProps(leaf), marks);
+  const [backwardLeafEntry, forwardLeafEntry] = markBoundary;
+
+  if (!backwardLeafEntry || !forwardLeafEntry) {
+    const leafEntry = backwardLeafEntry || forwardLeafEntry;
+    const affinityIsTowardsLeaf = !marks || marksMatchLeaf(leafEntry[0]);
+    if (affinityIsTowardsLeaf) {
+      return leafEntry === backwardLeafEntry ? 'backward' : 'forward';
+    }
+    return 'new-mark';
+  }
+
+  const marksDirection: 'forward' | 'backward' | null =
+    marks &&
+    (() => {
+      if (backwardLeafEntry && marksMatchLeaf(backwardLeafEntry[0]))
+        return 'backward';
+      if (forwardLeafEntry && marksMatchLeaf(forwardLeafEntry[0]))
+        return 'forward';
+      return null;
+    })();
+
+  const selectionDirection =
+    selection.anchor.offset === 0 ? 'forward' : 'backward';
+
+  if (selectionDirection === 'backward' && marksDirection === 'forward')
+    return 'forward';
+
+  if (
+    IS_FIREFOX &&
+    selectionDirection === 'forward' &&
+    marksDirection !== 'backward'
+  )
+    return 'forward';
+
+  return 'backward';
+};

packages/mark-affinity/src/queries/index.ts

@@ -0,0 +1,6 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './getMarkBoundary';
+export * from './getMarkBoundaryAffinity';

packages/mark-affinity/src/transforms/index.ts

@@ -0,0 +1,5 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './setMarkBoundaryAffinity';

packages/mark-affinity/src/transforms/setMarkBoundaryAffinity.ts

@@ -0,0 +1,35 @@
+import { getEndPoint, getNodeProps, PlateEditor } from '@udecode/plate-common';
+import { Point } from 'slate';
+
+import { MarkBoundary } from '../types';
+
+export const setMarkBoundaryAffinity = (
+  editor: PlateEditor,
+  markBoundary: MarkBoundary,
+  affinity: 'forward' | 'backward'
+) => {
+  const setMarks = (marks: typeof editor.marks) => {
+    editor.marks = marks;
+    editor.onChange();
+  };
+
+  const selectPoint = (point: Point) => {
+    editor.setSelection({ anchor: point, focus: point });
+  };
+  if (affinity === 'backward') {
+    const [backwardLeafEntry] = markBoundary;
+    if (backwardLeafEntry === null) return setMarks(null);
+    const endOfBackward = getEndPoint(editor, backwardLeafEntry[1]);
+    selectPoint(endOfBackward);
+    setMarks(null);
+    return;
+  }
+
+  const [backwardLeafEntry, forwardLeafEntry] = markBoundary;
+  if (backwardLeafEntry === null) return setMarks(null);
+  if (forwardLeafEntry === null) return setMarks({});
+
+  const endOfBackward = getEndPoint(editor, backwardLeafEntry[1]);
+  selectPoint(endOfBackward);
+  setMarks(getNodeProps(forwardLeafEntry[0]));
+};

packages/mark-affinity/src/types.ts

@@ -0,0 +1,11 @@
+import { TText } from '@udecode/plate-common';
+import { NodeEntry } from 'slate';
+
+export interface MarkAffinityPlugin {
+  validMarks?: string[];
+}
+
+export type MarkBoundary =
+  | [NodeEntry<TText>, NodeEntry<TText>]
+  | [NodeEntry<TText>, null]
+  | [null, NodeEntry<TText>];