Merge pull request #842 from streamich/peritext-block-element-improvements

Peritext block element improvements

Author: streamich

src/json-crdt-peritext-ui/__demos__/components/App.tsx

@@ -6,24 +6,22 @@ import {PeritextView} from '../../react';
 import {CursorPlugin} from '../../plugins/cursor';
 import {ToolbarPlugin} from '../../plugins/toolbar';
 import {DebugPlugin} from '../../plugins/debug';
+import {BlocksPlugin} from '../../plugins/blocks';
 
 const markdown =
   'The German __automotive sector__ is in the process of *cutting ' +
   'thousands of jobs* as it grapples with a global shift toward electric vehicles ' +
   '— a transformation Musk himself has been at the forefront of.' +
   '\n\n' +
+  '> To be, or not to be: that is the question.' +
+  '\n\n' +
   'A `ClipboardEvent` is dispatched for copy, cut, and paste events, and it contains ' +
   'a `clipboardData` property of type `DataTransfer`. The `DataTransfer` object ' +
   'is used by the Clipboard Events API to hold multiple representations of data.';
 
 export const App: React.FC = () => {
   const [[model, peritext]] = React.useState(() => {
-    const model = ModelWithExt.create(
-      ext.peritext.new(
-        '',
-        // 'The German automotive sector is in the process of cutting thousands of jobs as it grapples with a global shift toward electric vehicles — a transformation Musk himself has been at the forefront of.',
-      ),
-    );
+    const model = ModelWithExt.create(ext.peritext.new(''));
     const peritext = model.s.toExt().txt;
     peritext.refresh();
     // const transfer = new PeritextDataTransfer(peritext);
@@ -40,8 +38,9 @@ export const App: React.FC = () => {
   const plugins = React.useMemo(() => {
     const cursorPlugin = new CursorPlugin();
     const toolbarPlugin = new ToolbarPlugin();
+    const blocksPlugin = new BlocksPlugin();
     const debugPlugin = new DebugPlugin({enabled: false});
-    return [cursorPlugin, toolbarPlugin, debugPlugin];
+    return [cursorPlugin, toolbarPlugin, blocksPlugin, debugPlugin];
   }, []);
 
   return (

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

@@ -74,6 +74,8 @@ export class InputController implements UiLifeCycles {
       case 'insertFromYank':
       case 'insertReplacementText': // insert or replace existing text by means of a spell checker, auto-correct, writing suggestions or similar
       case 'insertText': {
+        // TODO: handle `dataTransfer` Image drops, URL drops
+        // TODO: handle `dataTransfer` HTML drops
         event.preventDefault();
         if (typeof event.data === 'string') {
           et.insert(event.data);
@@ -129,8 +131,11 @@ export class InputController implements UiLifeCycles {
         et.delete(-1, 'word');
         break;
       }
-      // case 'insertLineBreak': { // insert a line break
-      // }
+      case 'insertLineBreak': {
+        event.preventDefault();
+        et.insert('\n');
+        break;
+      }
       // case 'insertOrderedList': { // insert a numbered list
       // }
       // case 'insertUnorderedList': { // insert a bulleted list

src/json-crdt-peritext-ui/events/types.ts

@@ -329,7 +329,7 @@ export interface AnnalsDetail {
    * The list of {@link Patch} that will be applied to the document to undo or
    * redo the action, unless the action is cancelled.
    */
-  batch: [Patch];
+  batch: Patch[];
 }
 
 /**

src/json-crdt-peritext-ui/plugins/blocks/Blockquote.tsx

@@ -0,0 +1,20 @@
+// biome-ignore lint: React is used for JSX
+import * as React from 'react';
+import {rule} from 'nano-theme';
+import type {BlockViewProps} from '../../react/BlockView';
+
+const blockClass = rule({
+  bg: 'rgba(0,0,0,.02)',
+  bdl: '8px solid rgba(0,0,0,.1)',
+  mr: 0,
+  pd: '.05em .5em .05em 1.5em',
+  bdrad: '4px',
+});
+
+export interface BlockquoteProps extends BlockViewProps {
+  children: React.ReactNode;
+}
+
+export const Blockquote: React.FC<BlockquoteProps> = ({block, children}) => {
+  return <blockquote className={blockClass}>{children}</blockquote>;
+};

src/json-crdt-peritext-ui/plugins/blocks/BlocksPlugin.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import {RenderBlock} from './RenderBlock';
+import type {PeritextPlugin} from '../../react/types';
+
+const h = React.createElement;
+
+export class BlocksPlugin implements PeritextPlugin {
+  public readonly block: PeritextPlugin['block'] = (props, children) => h(RenderBlock, props as any, children);
+}

src/json-crdt-peritext-ui/plugins/blocks/RenderBlock.tsx

@@ -0,0 +1,24 @@
+// biome-ignore lint: React is used for JSX
+import * as React from 'react';
+import {CommonSliceType} from '../../../json-crdt-extensions';
+import {Blockquote} from './Blockquote';
+import type {BlockViewProps} from '../../react/BlockView';
+
+export interface RenderBlockProps extends BlockViewProps {
+  children: React.ReactNode;
+}
+
+export const RenderBlock: React.FC<RenderBlockProps> = (props) => {
+  const {block, children} = props;
+  const tag = block.tag();
+  switch (tag) {
+    case '':
+      return children;
+    case CommonSliceType.blockquote: {
+      return <Blockquote {...props} />;
+    }
+    default: {
+      return <p style={{padding: '16px 0'}}>{children}</p>;
+    }
+  }
+};

src/json-crdt-peritext-ui/plugins/blocks/index.ts

@@ -0,0 +1 @@
+export {BlocksPlugin} from './BlocksPlugin';

src/json-crdt-peritext-ui/plugins/debug/RenderBlock.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import {drule} from 'nano-theme';
 import {useDebugCtx} from './context';
 import type {BlockViewProps} from '../../react/BlockView';
+import {CommonSliceType} from '../../../json-crdt-extensions';
 
 const blockClass = drule({
   pos: 'relative',
@@ -41,7 +42,10 @@ export const RenderBlock: React.FC<RenderBlockProps> = ({block, hash, children})
             display: 'inline-block',
           }}
         >
-          {hash.toString(36)}
+          {hash.toString(36)}{' '}
+          {block.path
+            .map((type) => (typeof type === 'number' ? `<${CommonSliceType[type] ?? type}>` : `<${type}>`))
+            .join('.')}
         </span>
       </div>
       <div style={{outline: '1px dotted blue'}}>{children}</div>

src/json-crdt-peritext-ui/plugins/toolbar/RenderBlock.tsx

@@ -1,6 +1,5 @@
 // biome-ignore lint: React is used for JSX
 import * as React from 'react';
-import {CommonSliceType} from '../../../json-crdt-extensions';
 import type {BlockViewProps} from '../../react/BlockView';
 
 export interface RenderBlockProps extends BlockViewProps {
@@ -9,14 +8,6 @@ export interface RenderBlockProps extends BlockViewProps {
 
 export const RenderBlock: React.FC<RenderBlockProps> = ({block, children}) => {
   const tag = block.tag();
-  switch (tag) {
-    case '':
-      return children;
-    case CommonSliceType.blockquote: {
-      return <blockquote>{children}</blockquote>;
-    }
-    default: {
-      return <div style={{padding: '16px 0'}}>{children}</div>;
-    }
-  }
+
+  return children;
 };

src/json-crdt-peritext-ui/react/BlockView.tsx

@@ -74,9 +74,9 @@ export const BlockView: React.FC<BlockViewProps> = React.memo(
     }
 
     let children: React.ReactNode = (
-      <div ref={(element) => el?.(element)} style={{position: 'relative'}}>
+      <span ref={(element) => el?.(element)} style={{position: 'relative', display: 'block'}}>
         {elements.length ? elements : Char.ZeroLengthSpace}
-      </div>
+      </span>
     );
     for (const map of plugins) children = map.block?.(props, children) ?? children;
     return children;