Add option indent list

.changeset/aafraid-stingrays-visit.md

@@ -0,0 +1,7 @@
+---
+"@udecode/plate-indent-list": minor
+---
+
+- indent-list plugin: 
+  - new option: `getSiblingIndentListOptions` which is used by normalizers to get list siblings (e.g. for `listStart`).
+  - normalizer handling a few more cases

.changeset/tricky-fishes-joke.md

@@ -0,0 +1,7 @@
+---
+"@udecode/plate-core": minor
+---
+
+- `withoutNormalizing`: `Editor.withoutNormalizing` which returns true if normalized
+- `createPlateEditor`: add `normalizeInitialValue` option
+- `createPlateTestEditor`

jest.config.js

@@ -1,13 +1,15 @@
 module.exports = {
   collectCoverageFrom: [
-    'packages/*/src/**/*',
+    'packages/**/src/**/*.{ts,tsx}',
+    '!**/*.styles.ts*',
     '!**/index.ts*',
     '!**/*test*/**',
     '!**/*fixture*/**',
     '!**/*template*/**',
     '!**/*stories*',
     '!**/*.development.*',
   ],
+  rootDir: '.',
   globals: {
     'ts-jest': {
       tsconfig: 'tsconfig.test.json',
@@ -18,7 +20,7 @@ module.exports = {
   moduleNameMapper: {
     '\\.(css|less|sass|scss)$': '<rootDir>/scripts/styleMock.js',
     // '^@udecode/plate-ui-dnd$': '<rootDir>/packages/dnd/src',
-    '^@udecode/plate-common$': '<rootDir>/packages/common/src',
+    // '^@udecode/plate-common$': '<rootDir>/packages/common/src',
     // '^@udecode/plate-basic-elements$':
     //   '<rootDir>/packages/nodes/basic-elements/src',
     // '^@udecode/plate-alignment$': '<rootDir>/packages/nodes/alignment/src',

packages/core/src/common/__tests__/createPlateTestEditor.ts

@@ -0,0 +1,24 @@
+import { buildTestHarness } from 'slate-test-utils';
+import { PlateTest } from '../../components/PlateTest';
+import {
+  createPlateEditor,
+  CreatePlateEditorOptions,
+} from '../../utils/createPlateEditor';
+
+/**
+ * `buildTestHarness` where:
+ * - `Component`: `PlateTest`
+ * - `editor`: `createPlateEditor`
+ */
+export const createPlateTestEditor = async (
+  options: CreatePlateEditorOptions,
+  buildTestHarnessOptions?: Omit<
+    Parameters<ReturnType<typeof buildTestHarness>>[0],
+    'editor'
+  >
+) => {
+  return buildTestHarness(PlateTest)({
+    editor: createPlateEditor(options),
+    ...buildTestHarnessOptions,
+  });
+};

packages/core/src/common/transforms/index.ts

@@ -18,4 +18,5 @@ export * from './toggleNodeType';
 export * from './toggleWrapNodes';
 export * from './unhangRange';
 export * from './unwrapNodes';
+export * from './withoutNormalizing';
 export * from './wrapNodes';

packages/core/src/common/transforms/withoutNormalizing.ts

@@ -0,0 +1,19 @@
+import { Editor } from 'slate';
+import { TEditor } from '../../types/slate/TEditor';
+
+/**
+ * {@link Editor.withoutNormalizing}
+ * @return true if normalized.
+ */
+export const withoutNormalizing = (
+  editor: TEditor,
+  fn: () => boolean | void
+) => {
+  let normalized = false;
+
+  Editor.withoutNormalizing(editor, () => {
+    normalized = !!fn();
+  });
+
+  return normalized;
+};

packages/core/src/components/PlateTest.tsx

@@ -5,6 +5,7 @@ import { Plate, PlateProps } from './Plate';
 export const PlateTest = ({
   variant = 'wordProcessor',
   editableProps,
+  normalizeInitialValue,
   ...props
 }: {
   variant?: 'comment' | 'wordProcessor';
@@ -18,6 +19,7 @@ export const PlateTest = ({
       editor,
       plugins,
       id,
+      normalizeInitialValue,
     });
   }
 

packages/core/src/utils/createPlateEditor.ts

@@ -1,4 +1,4 @@
-import { createEditor } from 'slate';
+import { createEditor, Editor } from 'slate';
 import { withPlate, WithPlateOptions } from '../plugins/withPlate';
 import { OverrideByKey } from '../types/OverrideByKey';
 import { PlateEditor } from '../types/PlateEditor';
@@ -12,6 +12,7 @@ export interface CreatePlateEditorOptions<T = {}>
   plugins?: PlatePlugin<T>[];
   components?: Record<string, PlatePluginComponent>;
   overrideByKey?: OverrideByKey<T>;
+  normalizeInitialValue?: boolean;
 }
 
 /**
@@ -25,15 +26,22 @@ export const createPlateEditor = <T = {}>({
   plugins = [],
   components,
   overrideByKey,
+  normalizeInitialValue,
   ...withPlateOptions
 }: CreatePlateEditorOptions<T> = {}): PlateEditor<T> => {
   plugins = createPlugins(plugins, {
     components,
     overrideByKey,
   });
 
-  return withPlate(editor, {
+  editor = withPlate(editor, {
     plugins,
     ...withPlateOptions,
   });
+
+  if (normalizeInitialValue) {
+    Editor.normalize(editor, { force: true });
+  }
+
+  return editor;
 };

packages/nodes/indent-list/src/createIndentListPlugin.ts

@@ -1,11 +1,16 @@
 import { createPluginFactory } from '@udecode/plate-core';
+import { GetSiblingIndentListOptions } from './queries/getSiblingIndentList';
 import { injectIndentListComponent } from './injectIndentListComponent';
 import { withIndentList } from './withIndentList';
 
 export const KEY_LIST_STYLE_TYPE = 'listStyleType';
 export const KEY_LIST_START = 'listStart';
 
-export const createIndentListPlugin = createPluginFactory({
+export interface IndentListPlugin {
+  getSiblingIndentListOptions?: GetSiblingIndentListOptions;
+}
+
+export const createIndentListPlugin = createPluginFactory<IndentListPlugin>({
   key: KEY_LIST_STYLE_TYPE,
   inject: {
     belowComponent: injectIndentListComponent,

packages/nodes/indent-list/src/index.ts

@@ -4,7 +4,9 @@
 
 export * from './createIndentListPlugin';
 export * from './injectIndentListComponent';
+export * from './normalizeIndentList';
 export * from './types';
 export * from './withIndentList';
+export * from './normalizers/index';
 export * from './queries/index';
 export * from './transforms/index';

packages/nodes/indent-list/src/normalizeIndentList.ts

@@ -0,0 +1,29 @@
+import { TEditor, withoutNormalizing } from '@udecode/plate-core';
+import { NodeEntry } from 'slate';
+import { normalizeIndentListNotIndented } from './normalizers/normalizeIndentListNotIndented';
+import { normalizeIndentListStart } from './normalizers/normalizeIndentListStart';
+import { IndentListPlugin } from './createIndentListPlugin';
+
+export const normalizeIndentList = (
+  editor: TEditor,
+  { getSiblingIndentListOptions }: IndentListPlugin = {}
+) => {
+  const { normalizeNode } = editor;
+
+  return ([node, path]: NodeEntry) => {
+    const normalized = withoutNormalizing(editor, () => {
+      if (normalizeIndentListNotIndented(editor, [node, path])) return true;
+      if (
+        normalizeIndentListStart(
+          editor,
+          [node, path],
+          getSiblingIndentListOptions
+        )
+      )
+        return true;
+    });
+    if (normalized) return;
+
+    return normalizeNode([node, path]);
+  };
+};

packages/nodes/indent-list/src/normalizers/index.ts

@@ -0,0 +1,7 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './normalizeFirstIndentListStart';
+export * from './normalizeIndentListNotIndented';
+export * from './normalizeIndentListStart';

packages/nodes/indent-list/src/normalizers/normalizeFirstIndentListStart.spec.tsx

@@ -0,0 +1,42 @@
+/** @jsx jsx */
+
+import { createPlateEditor } from '@udecode/plate-core';
+import { createIndentPlugin } from '@udecode/plate-indent';
+import { jsx } from '@udecode/plate-test-utils';
+import { Editor } from 'slate';
+import { createParagraphPlugin } from '../../../paragraph/src/createParagraphPlugin';
+import { createIndentListPlugin } from '../createIndentListPlugin';
+
+jsx;
+
+const input = ((
+  <editor>
+    <hp>1</hp>
+    <hp indent={1} listStyleType="disc" listStart={1}>
+      2
+    </hp>
+  </editor>
+) as any) as Editor;
+
+const output = ((
+  <editor>
+    <hp>1</hp>
+    <hp indent={1} listStyleType="disc">
+      2
+    </hp>
+  </editor>
+) as any) as Editor;
+
+it('should be', async () => {
+  const editor = createPlateEditor({
+    editor: input,
+    plugins: [
+      createParagraphPlugin(),
+      createIndentPlugin(),
+      createIndentListPlugin(),
+    ],
+    normalizeInitialValue: true,
+  });
+
+  expect(editor.children).toEqual(output.children);
+});

packages/nodes/indent-list/src/normalizers/normalizeFirstIndentListStart.ts

@@ -0,0 +1,16 @@
+import { isDefined, TEditor, unsetNodes } from '@udecode/plate-core';
+import { NodeEntry } from 'slate';
+import { KEY_LIST_START } from '../createIndentListPlugin';
+
+/**
+ * If there is no previous list item and node list start is defined, unset list start (1).
+ */
+export const normalizeFirstIndentListStart = (
+  editor: TEditor,
+  [node, path]: NodeEntry
+) => {
+  if (isDefined(node[KEY_LIST_START])) {
+    unsetNodes(editor, KEY_LIST_START, { at: path });
+    return true;
+  }
+};

packages/nodes/indent-list/src/normalizers/normalizeIndentListNotIndented.spec.tsx

@@ -0,0 +1,36 @@
+/** @jsx jsx */
+
+import { createPlateEditor, TEditor } from '@udecode/plate-core';
+import { createIndentPlugin } from '@udecode/plate-indent';
+import { jsx } from '@udecode/plate-test-utils';
+import { createIndentListPlugin } from '../createIndentListPlugin';
+
+jsx;
+
+describe('normalizeIndentList', () => {
+  describe('when listStyleType without indent', () => {
+    it('should remove listStyleType and listStart props', async () => {
+      const input = ((
+        <editor>
+          <hp listStyleType="disc" listStart={1}>
+            1
+          </hp>
+        </editor>
+      ) as any) as TEditor;
+
+      const output = ((
+        <editor>
+          <hp>1</hp>
+        </editor>
+      ) as any) as TEditor;
+
+      const editor = createPlateEditor({
+        editor: input,
+        plugins: [createIndentListPlugin(), createIndentPlugin()],
+        normalizeInitialValue: true,
+      });
+
+      expect(editor.children).toEqual(output.children);
+    });
+  });
+});

packages/nodes/indent-list/src/normalizers/normalizeIndentListNotIndented.ts

@@ -0,0 +1,20 @@
+import { TEditor, unsetNodes } from '@udecode/plate-core';
+import { KEY_INDENT } from '@udecode/plate-indent';
+import { NodeEntry } from 'slate';
+import { KEY_LIST_START, KEY_LIST_STYLE_TYPE } from '../createIndentListPlugin';
+
+/**
+ * Unset KEY_LIST_STYLE_TYPE, KEY_LIST_START if KEY_INDENT is not defined.
+ */
+export const normalizeIndentListNotIndented = (
+  editor: TEditor,
+  [node, path]: NodeEntry
+) => {
+  if (
+    !node[KEY_INDENT] &&
+    (node[KEY_LIST_STYLE_TYPE] || node[KEY_LIST_START])
+  ) {
+    unsetNodes(editor, [KEY_LIST_STYLE_TYPE, KEY_LIST_START], { at: path });
+    return true;
+  }
+};