selection wip

Author: Alex Lohr

packages/selection/.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "babel-preset-solid",
+    "@babel/preset-typescript"
+  ]
+}

packages/selection/README.md

@@ -0,0 +1,32 @@
+# @solid-primitives/permission
+
+[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
+
+Creates a primitive to handle selection in editable elements.
+
+## How to use it
+
+```ts
+type Selection = {
+  start: number;
+  end: number;
+  text?: string;
+}
+const [selection: Accessor<Selection>, setSelection: Setter<Selection>] =
+  createInputSelection(ref?: HTMLInputElement | HTMLTextAreaElement);
+```
+
+## Demo
+
+TODO
+
+## Changelog
+
+<details>
+<summary><b>Expand Changelog</b></summary>
+
+0.0.100
+
+Initial release.
+
+</details>

packages/selection/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@solid-primitives/selection",
+  "version": "0.0.100",
+  "description": "Primitive that wraps permission queries",
+  "author": "Alex Lohr <[email protected]>",
+  "license": "MIT",
+  "homepage": "https://github.com/davedbase/solid-primitives/tree/main/packages/selection",
+  "private": false,
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": "false",
+  "scripts": {
+    "prebuild": "npm run clean",
+    "clean": "rimraf dist/",
+    "build": "tsc",
+    "test": "jest"
+  },
+  "keywords": [
+    "permission",
+    "query",
+    "solid",
+    "primitives"
+  ],
+  "devDependencies": {
+    "@babel/core": "7.14.8",
+    "@babel/preset-env": "7.14.8",
+    "@babel/preset-typescript": "7.14.5",
+    "@types/jest": "27.0.1",
+    "babel-preset-solid": "1.1.3",
+    "jest": "27.0.1",
+    "prettier": "^2.0.5",
+    "solid-testing-library": "^0.2.0",
+    "solid-jest": "0.2.0",
+    "tslib": "^2.3.1",
+    "typescript": "^4.4.3"
+  },
+  "dependencies": {
+    "solid-js": "^1.1.4"
+  },
+  "jest": {
+    "preset": "solid-jest/preset/browser",
+    "setupFiles": [
+      "./test/setup.ts"
+    ]
+  }
+}

packages/selection/src/index.ts

@@ -0,0 +1,117 @@
+import { isArrayExpression } from "@babel/types";
+import { Accessor, createEffect, createSignal, onCleanup, onMount, Setter } from "solid-js";
+
+export type InputSelection = {
+  start: number;
+  end: number;
+};
+
+export const createInputSelection = (
+  ref?: HTMLInputElement | HTMLTextAreaElement
+): [selection: Accessor<InputSelection>, setSelection: Setter<InputSelection>] => {
+  const [selection, setSelection] = createSignal({
+    start: ref?.selectionStart ?? -1,
+    end: ref?.selectionEnd ?? -1
+  });
+  
+  onMount(() => {
+    const listener = () => {
+      setSelection((last) => {
+        const start = ref?.selectionStart ?? -1,
+          end = ref?.selectionEnd ?? -1;
+        return (last.start === start && last.end === end) 
+          ? last
+          : { start, end };
+      });
+    }
+    ref?.addEventListener('selectionchange', listener);
+    onCleanup(() => ref?.removeEventListener('selectionChange', listener));
+  });
+
+  return [selection, (sel) => {
+    const next = setSelection(sel)
+    ref?.setSelectionRange(next.start, next.end);
+    return next;
+  }];
+};
+
+export type InputMaskFunc = ((value: string, sel: InputSelection) =>
+  [maskedValue: string, sel: InputSelection]);
+export type InputMask = (string | RegExp)[] | InputMaskFunc;
+
+const alignSelectionToRemovedPart = (selection: InputSelection, start: number, length: number): InputSelection => {
+  if (selection.start > start) {
+    if (selection.start > start + length) {
+      selection.start -= length
+    } else {
+      selection.start = start;
+    }
+  }
+  if (selection.end > start) {
+    if (selection.end > start + length) {
+      selection.end -= length
+    } else {
+      selection.end = start;
+    }
+  }
+  return selection;
+}
+
+const inputMaskArrayToFunc = (def: InputMask): InputMaskFunc => {  
+  if (Array.isArray(def)) {
+    return (value, selection) => {
+      if (value) {
+        let index = 0;
+        def.forEach((part, id) => {
+          // fixed part; add if not already in string and jump to next part
+          if (typeof part === 'string') {
+            if (value.substr(index, part.length) !== part) {
+              value = `${value.slice(0, index)}${part}${value.slice(index)}`;
+            }
+            index += part.length;
+          // regex part; delete before match and jump after match
+          } else {
+            const match = value.slice(index).match(part);
+            const matchIndex = match?.index ?? -1;
+            if (match && (matchIndex >= 0)) {
+              // remove characters padding the match
+              if (matchIndex > 0) {
+                value = `${value.slice(0, index)}${value.slice(matchIndex)}}`;
+                alignSelectionToRemovedPart(selection, index, matchIndex);
+              }
+              index += match[0].length;
+              // cut additional characters after the last part
+              const isLastPart = id === def.length - 1;
+              if (isLastPart && value.length > index) {
+                value = value.slice(0, index)
+              }
+            }
+          }
+        });
+      }      
+      return [value, selection];
+    }
+  }
+  return def
+}
+
+export const createInputMask = (ref?: HTMLInputElement, mask?: InputMask) => {
+  if (!mask) {
+    return;
+  }
+  const [selection, setSelection] = createInputSelection(ref);
+  const inputMask = inputMaskArrayToFunc(mask);
+ 
+  onMount(() => {
+    const handler = () => {
+      if (ref) {
+        const [newValue, newSelection] = inputMask(ref.value, selection());
+        ref.value = newValue;
+        setSelection(newSelection);
+      }
+    };
+    ref?.addEventListener('input', handler);
+    onCleanup(() => ref?.removeEventListener('input', handler));
+  });
+}
+

packages/selection/test/index.test.ts

@@ -0,0 +1,52 @@
+import { createEffect, createRoot } from "solid-js";
+import { createInputSelection } from "../src";
+
+describe("createInputSelection", () => {
+  const selections = (window as any)._selections;
+  const getInput = document.createElement('input');
+  getInput.type = 'text';
+  getInput.value = 'longer value to allow selection';
+  selections.set(getInput, { start: 5, end: 5 });
+  document.body.appendChild(getInput);
+
+  test("reads selection range", () =>
+    createRoot(dispose => {
+      const [selection] = createInputSelection(getInput);
+      expect(selection()).toEqual({ start: 5, end: 5 });
+      dispose();
+    }));
+
+  const setInput = document.createElement('input');
+  setInput.type = 'text';
+  setInput.value = 'another longer value to allow selection';
+  document.body.appendChild(setInput);
+
+  test("sets selection range", () =>
+    createRoot(dispose => {
+      const [_, setSelection] = createInputSelection(setInput);
+      setSelection({ start: 7, end: 7 });
+      expect(selections.get(setInput)).toEqual({ start: 7, end: 7 });
+      dispose();
+    }));
+
+  const evInput = document.createElement('input');
+  evInput.type = 'text';
+  evInput.value = 'and another even longer value to allow selection';
+  selections.set(evInput, { start: 0, end: 0 });
+  document.body.appendChild(evInput);
+
+  test("updates the selection on selectionupdate event", () => new Promise<void>(resolve => createRoot(dispose => {
+    const [selection] = createInputSelection(evInput);
+    const expectedSelections = [{ start: 0, end: 0 }, { start: 1, end: 1 }];
+    createEffect(() => {
+      expect(selection()).toEqual(expectedSelections.shift());
+      if (expectedSelections.length === 1) {
+        selections.set(evInput, { start: 1, end: 1 });
+        evInput.dispatchEvent(new Event('selectionchange'));
+      } else if (expectedSelections.length === 0) {
+        dispose();
+        resolve();
+      }
+    })
+  })));
+});

packages/selection/test/setup.ts

@@ -0,0 +1,11 @@
+const selections = new Map<HTMLInputElement, { start: number; end: number; }>();
+
+(window as any)._selections = selections;
+
+Object.defineProperties(HTMLInputElement.prototype, {
+  selectionStart: { get: function() { return selections.get(this)?.start; } },
+  selectionEnd: { get: function() { return selections.get(this)?.end; } },
+  setSelectionRange: { get: function() { 
+    const field = this; return (start: number, end: number) => selections.set(field, { start, end });
+  } }
+});

packages/selection/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "emitDeclarationOnly": false
+  },
+  "include": ["./src"]
+}