Block render

package.json

@@ -95,6 +95,7 @@
     "test:cli:pack": "./bin/json-pack-test.js ./bin/json-pack.js",
     "demo:json-patch": "npx ts-node src/json-patch/__demos__/json-patch.ts",
     "demo:json-pointer": "npx ts-node src/json-pointer/__demos__/json-pointer.ts",
+    "demo:peritext:dom": "webpack serve --config ./src/json-crdt-peritext-ui/__demos__/dom/webpack.config.js",
     "bench:json-crdt:traces:crdt-libs": "cd src/json-crdt/__bench__ && yarn && yarn bench:traces:crdt-libs",
     "bench:json-crdt:traces:non-crdt-libs": "cd src/json-crdt/__bench__ && yarn && yarn bench:traces:non-crdt-libs",
     "bench:json-crdt:concurrent-traces": "cd src/json-crdt/__bench__ && yarn && yarn bench:concurrent-traces",
@@ -140,16 +141,22 @@
     "config-housekeeping": "https://github.com/streamich/housekeeping#3532d2abeac159315ddf403d70517859d079c801",
     "editing-traces": "https://github.com/streamich/editing-traces#6494020428530a6e382378b98d1d7e31334e2d7b",
     "fast-json-patch": "^3.1.1",
+    "html-webpack-plugin": "^5.6.0",
     "jest": "^29.7.0",
     "json-crdt-traces": "https://github.com/streamich/json-crdt-traces#ec825401dc05cbb74b9e0b3c4d6527399f54d54d",
     "json-logic-js": "^2.0.2",
+    "raw-loader": "^4.0.2",
     "rxjs": "^7.8.1",
     "ts-jest": "^29.1.2",
+    "ts-loader": "^9.5.1",
     "ts-node": "^10.9.2",
     "tslib": "^2.6.2",
     "tslint": "^6.1.3",
     "tslint-config-common": "^1.6.2",
-    "typescript": "^5.4.5"
+    "typescript": "^5.4.5",
+    "webpack": "^5.91.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4"
   },
   "jest": {
     "moduleFileExtensions": [

src/json-crdt-extensions/peritext/Peritext.ts

@@ -269,15 +269,18 @@ export class Peritext<T = string> implements Printable {
   public toString(tab: string = ''): string {
     const nl = () => '';
     const {savedSlices, extraSlices, localSlices} = this;
+    const slices = [
+      savedSlices.size() ? (tab: string) => savedSlices.toString(tab) : null,
+      extraSlices.size() ? (tab: string) => extraSlices.toString(tab) : null,
+      localSlices.size() ? (tab: string) => localSlices.toString(tab) : null,
+    ].filter(Boolean);
+    if (slices.length) slices.push(nl);
     return (
       this.constructor.name +
       printTree(tab, [
         (tab) => this.str.toString(tab),
         nl,
-        savedSlices.size() ? (tab) => savedSlices.toString(tab) : null,
-        extraSlices.size() ? (tab) => extraSlices.toString(tab) : null,
-        localSlices.size() ? (tab) => localSlices.toString(tab) : null,
-        nl,
+        ...slices,
         (tab) => this.overlay.toString(tab),
         nl,
         (tab) => this.blocks.toString(tab),

src/json-crdt-peritext-ui/__demos__/dom/main.ts

@@ -0,0 +1,14 @@
+import {ModelWithExt, ext} from '../../../json-crdt-extensions';
+import {s} from '../../../json-crdt-patch';
+import {PeritextDomUi} from '../../dom/PeritextDomUi';
+
+const div = document.createElement('div');
+document.body.appendChild(div);
+
+const model = ModelWithExt.create(s.obj({
+  richText: ext.peritext.new('hello world'),
+}));
+
+const ui = new PeritextDomUi(model.s.richText.toExt().txt);
+ui.render(div);
+ui.refresh();

src/json-crdt-peritext-ui/__demos__/dom/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../../../tsconfig.build.json",
+  "compilerOptions": {
+    "sourceMap": true,
+    "isolatedModules": false
+  },
+}

src/json-crdt-peritext-ui/__demos__/dom/webpack.config.js

@@ -0,0 +1,56 @@
+/* eslint-disable */
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+const PORT = 9993;
+
+module.exports = {
+  mode: 'development',
+  devtool: 'inline-source-map',
+  entry: {
+    bundle: path.join(__dirname, '/main.ts'),
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: [{
+          loader: 'ts-loader',
+          options: {
+            onlyCompileBundledFiles: true,
+            configFile: path.resolve(__dirname, 'tsconfig.json'),
+          },
+        }],
+        exclude: /(node_modules|__tests__)/,
+      },
+      {
+        test: /\.md$/i,
+        use: 'raw-loader',
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
+  output: {
+    filename: '[name].js',
+    chunkFilename: '[name].js',
+    sourceMapFilename: '[file].map',
+    asyncChunks: true,
+    path: path.resolve(__dirname, 'dist'),
+    publicPath: `http://localhost:${PORT}/`,
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      title: 'Peritext DOM demo',
+    }),
+  ],
+  devServer: {
+    port: PORT,
+    hot: false,
+    historyApiFallback: {
+      index: '',
+      disableDotRule: true,
+    },
+  },
+};

src/json-crdt-peritext-ui/dom/PeritextDomUi.ts

@@ -0,0 +1,36 @@
+import type {Peritext} from '../../json-crdt-extensions/peritext/Peritext';
+import {Block} from '../../json-crdt-extensions/peritext/block/Block';
+
+export class BlockUi {
+  public readonly el: HTMLElement;
+
+  constructor(protected readonly txt: Peritext) {
+    this.el = document.createElement('div');
+  }
+
+  public refresh(block: Block) {
+    this.el.innerHTML = block.text();
+  }
+}
+
+export class PeritextDomUi {
+  protected readonly block: BlockUi;
+
+  constructor(public readonly txt: Peritext) {
+    this.block = new BlockUi(txt);
+  }
+
+  public render(div: HTMLDivElement) {
+    div.appendChild(this.block.el);
+  }
+
+  public refresh() {
+    const txt = this.txt;
+    txt.refresh();
+    this.block.refresh(txt.blocks.root);
+  }
+
+  protected renderBlock() {
+
+  }
+}