feat(common): selectEditor

packages/common/src/transforms/index.ts

@@ -12,6 +12,7 @@ export * from './mergeNodes';
 export * from './moveChildren';
 export * from './removeMark';
 export * from './selectEndOfBlockAboveSelection';
+export * from './selectEditor';
 export * from './setNodes';
 export * from './toggleMark';
 export * from './toggleNodeType';

packages/common/src/transforms/selectEditor.spec.tsx

@@ -0,0 +1,111 @@
+/** @jsx jsx */
+
+import { jsx } from '@udecode/slate-plugins-test-utils';
+import { ReactEditor } from 'slate-react';
+import { selectEditor } from './selectEditor';
+
+jsx;
+
+describe('selectEditor', () => {
+  describe('when edge is end', () => {});
+  it('should set the cursor at the end', () => {
+    const input = ((
+      <editor>
+        <hp>
+          hello
+          <cursor />
+        </hp>
+        <element>
+          <hp>world</hp>
+        </element>
+      </editor>
+    ) as any) as ReactEditor;
+
+    const output = ((
+      <editor>
+        <hp>hello</hp>
+        <element>
+          <hp>
+            world
+            <cursor />
+          </hp>
+        </element>
+      </editor>
+    ) as any) as ReactEditor;
+
+    selectEditor(input, {
+      edge: 'end',
+    });
+
+    expect(input.selection).toEqual(output.selection);
+  });
+
+  describe('when edge is start', () => {});
+  it('should set the cursor at the start', () => {
+    const input = ((
+      <editor>
+        <hp>
+          hello
+          <cursor />
+        </hp>
+        <element>
+          <hp>world</hp>
+        </element>
+      </editor>
+    ) as any) as ReactEditor;
+
+    const output = ((
+      <editor>
+        <hp>
+          <cursor />
+          hello
+        </hp>
+        <element>
+          <hp>world</hp>
+        </element>
+      </editor>
+    ) as any) as ReactEditor;
+
+    selectEditor(input, {
+      edge: 'start',
+    });
+
+    expect(input.selection).toEqual(output.selection);
+  });
+
+  describe('when at is defined', () => {});
+  it('should set the cursor at', () => {
+    const input = ((
+      <editor>
+        <hp>
+          hello
+          <cursor />
+        </hp>
+        <element>
+          <hp>world</hp>
+        </element>
+      </editor>
+    ) as any) as ReactEditor;
+
+    const output = ((
+      <editor>
+        <hp>
+          h<cursor />
+          ello
+        </hp>
+        <element>
+          <hp>world</hp>
+        </element>
+      </editor>
+    ) as any) as ReactEditor;
+
+    selectEditor(input, {
+      at: {
+        anchor: { path: [0, 0], offset: 1 },
+        focus: { path: [0, 0], offset: 1 },
+      },
+    });
+
+    expect(input.selection).toEqual(output.selection);
+  });
+});

packages/common/src/transforms/selectEditor.ts

@@ -0,0 +1,45 @@
+import { Editor, Location, Transforms } from 'slate';
+import { ReactEditor } from 'slate-react';
+
+export interface SelectEditorOptions {
+  /**
+   * Specific location if edge is not defined.
+   */
+  at?: Location;
+
+  /**
+   * Start or end of the editor.
+   */
+  edge?: 'start' | 'end';
+
+  /**
+   * If true, focus the React editor before selecting.
+   */
+  focus?: boolean;
+}
+
+/**
+ * Select an editor at a target or an edge (start, end).
+ */
+export const selectEditor = (
+  editor: ReactEditor,
+  { at, edge, focus }: SelectEditorOptions
+) => {
+  if (focus) {
+    ReactEditor.focus(editor);
+  }
+
+  let location = at as Location;
+
+  if (edge === 'start') {
+    location = Editor.start(editor, []);
+  }
+
+  if (edge === 'end') {
+    location = Editor.end(editor, []);
+  }
+
+  if (location) {
+    Transforms.select(editor, location);
+  }
+};