feat(json-crdt-extensions): 🎸 add JSX capability to Peritext data transfer

Author: streamich

package.json

@@ -140,15 +140,16 @@
   "jest": {
     "moduleFileExtensions": [
       "ts",
-      "js"
+      "js",
+      "tsx"
     ],
     "transform": {
-      "^.+\\.ts$": "ts-jest"
+      "^.+\\.tsx?$": "ts-jest"
     },
     "transformIgnorePatterns": [
       ".*/node_modules/.*"
     ],
-    "testRegex": ".*/(__tests__|__jest__|demo)/.*\\.(test|spec)\\.ts$"
+    "testRegex": ".*/(__tests__|__jest__|demo)/.*\\.(test|spec)\\.tsx?$"
   },
   "config": {
     "commitizen": {

src/json-crdt-extensions/peritext/block/types.ts

@@ -1,13 +1,16 @@
 import type {SliceStacking} from '../slice/constants';
 
-export type PeritextMlNode = string | PeritextMlElement;
-
+export type PeritextMlNode = PeritextMlText | PeritextMlElement;
+export type PeritextMlText = string;
 export type PeritextMlElement<Tag extends string | number = string | number, Data = unknown, Inline = boolean> = [
   tag: Tag,
   attrs: null | PeritextMlAttributes<Data, Inline>,
   ...children: PeritextMlNode[],
 ];
 
+/**
+ * @todo Make this an array tuple.
+ */
 export interface PeritextMlAttributes<Data = unknown, Inline = boolean> {
   data?: Data;
   inline?: Inline;

src/json-crdt-extensions/peritext/slice/constants.ts

@@ -45,6 +45,7 @@ export const enum SliceTypeCon {
   collapse = 28, // Collapsible block
   note = 29, // Note block
   mathblock = 30, // <math> block
+  div = 31,
 
   // ------------------------------------------------ inline slices (-64 to -1)
   Cursor = -1,
@@ -113,6 +114,7 @@ export enum SliceTypeName {
   collapse = SliceTypeCon.collapse,
   note = SliceTypeCon.note,
   mathblock = SliceTypeCon.mathblock,
+  div = SliceTypeCon.div,
 
   Cursor = SliceTypeCon.Cursor,
   RemoteCursor = SliceTypeCon.RemoteCursor,

src/json-crdt-extensions/peritext/transfer/PeritextDataTransfer.ts

@@ -77,7 +77,9 @@ export class PeritextDataTransfer<T = string> {
     return tools.toHast(json);
   }
 
-  public toHtml(range: Range<T>, tab?: string, indent?: string): string {
+  public toHtml(range?: Range<T>, tab?: string, indent?: string): string {
+    if (!range) range = this.txt.rangeAll();
+    if (!range) return '';
     const tools = this.htmlE();
     const json = this.toJson(range);
     return tools.toHtml(json, tab, indent);

src/json-crdt-extensions/peritext/transfer/__tests__/PeritextDataTransfer.spec.ts

@@ -1,21 +1,5 @@
-import * as htmlExport from '../export-html';
-import * as htmlImport from '../import-html';
-import * as mdExport from '../export-markdown';
-import * as mdImport from '../import-markdown';
-import {PeritextDataTransfer} from '../PeritextDataTransfer';
-import {setupKit} from '../../__tests__/setup';
 import {CommonSliceType} from '../../slice';
-
-const setup = () => {
-  const kit = setupKit();
-  const transfer = new PeritextDataTransfer(kit.peritext, {
-    htmlExport,
-    htmlImport,
-    mdExport,
-    mdImport,
-  });
-  return {...kit, transfer};
-};
+import {setup} from './setup';
 
 const assertMarkdownReExport = (markdown: string) => {
   const kit = setup();

src/json-crdt-extensions/peritext/transfer/__tests__/jsx.spec.tsx

@@ -0,0 +1,36 @@
+/** @jsx h */
+/** @jsxFrag h */
+import {h} from '../jsx';
+import {SliceTypeCon} from '../../slice/constants';
+import {setup} from './setup';
+
+test('can create basic JSX elements', () => {
+  const jsx = (
+    <div className="test">
+      <b>Hello</b>
+    </div>
+  );
+
+  expect(jsx).toEqual([
+    SliceTypeCon.div,
+    { data: { className: 'test' }, inline: false, stacking: 0 },
+    [ SliceTypeCon.b, { inline: true, stacking: 2 }, 'Hello' ]
+  ]);
+});
+
+test('can import JSX nodes', () => {
+  const kit = setup();
+  const jsx = (
+    <>
+      <p>
+        <b>Hello</b> <u>world</u>!
+      </p>
+      <blockquote>
+        <p>Test</p>
+      </blockquote>
+    </>
+  );
+  kit.transfer.fromJson(0, jsx as any);
+  kit.peritext.refresh();
+  expect(kit.transfer.toHtml()).toBe('<p><b>Hello</b> <u>world</u>!</p><blockquote><p>Test</p></blockquote>');
+});

src/json-crdt-extensions/peritext/transfer/__tests__/setup.ts

@@ -0,0 +1,17 @@
+import * as htmlExport from '../export-html';
+import * as htmlImport from '../import-html';
+import * as mdExport from '../export-markdown';
+import * as mdImport from '../import-markdown';
+import {PeritextDataTransfer} from '../PeritextDataTransfer';
+import {setupKit} from '../../__tests__/setup';
+
+export const setup = () => {
+  const kit = setupKit();
+  const transfer = new PeritextDataTransfer(kit.peritext, {
+    htmlExport,
+    htmlImport,
+    mdExport,
+    mdImport,
+  });
+  return {...kit, transfer};
+};

src/json-crdt-extensions/peritext/transfer/import-html.ts

@@ -31,7 +31,7 @@ class ViewRangeBuilder {
   private slices: ViewSlice[] = [];
 
   private build0(node: PeritextMlNode, path: (string | number)[]): boolean {
-    const skipWhitespace = path.length < 2;
+    const skipWhitespace = path.length < 1;
     if (typeof node === 'string') {
       if (skipWhitespace && !node.trim()) return false;
       this.text += node;

src/json-crdt-extensions/peritext/transfer/jsx.ts

@@ -0,0 +1,21 @@
+import {PeritextMlElement, PeritextMlNode} from '../block/types';
+import {CommonSliceType} from '../slice';
+import {SliceStacking} from '../slice/constants';
+
+export const h = (tag: string, props: Record<string, unknown> | null, ...children: PeritextMlNode[]): PeritextMlElement => {
+  const attrs: PeritextMlElement[1] = {};
+  if (props) attrs.data = props;
+  if (tag as any === h) return ['', null, ...children];
+  const num = CommonSliceType[tag as any];
+  if (typeof num === 'number') {
+    const inline = num < 0;
+    attrs.inline = inline;
+    attrs.stacking = inline ? (props ? SliceStacking.Many : SliceStacking.One) : SliceStacking.Marker;
+    return [num, attrs, ...children];
+  } else {
+    const inline = !props;
+    attrs.inline = inline;
+    attrs.stacking = inline ? (props ? SliceStacking.Many : SliceStacking.One) : SliceStacking.Marker;
+    return [tag, attrs, ...children];
+  }
+};