Skip to content

Commit 8f8ee78

Browse files
streamichstreamich
committed
feat(json-crdt-peritext-ui): 🎸 allow to specify partial implementation in cboard action
1 parent 027ec28 commit 8f8ee78

File tree

1 file changed

+42
-63
lines changed
  • src/json-crdt-peritext-ui/plugins/toolbar/state

1 file changed

+42
-63
lines changed

‎src/json-crdt-peritext-ui/plugins/toolbar/state/index.tsx‎

Lines changed: 42 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -338,90 +338,80 @@ export class ToolbarState implements UiLifeCycles {
338338
};
339339
};
340340

341-
public readonly copyAsMenu = (type: 'copy' | 'cut', ctx: ClipboardMenuCtx = {}): MenuItem => {
341+
public readonly copyAsMenu = (action: 'copy' | 'cut', ctx: ClipboardMenuCtx = {}): MenuItem => {
342342
const icon =
343-
type === 'copy'
343+
action === 'copy'
344344
? () => <Iconista width={15} height={15} set="radix" icon="clipboard-copy" />
345345
: () => <Iconista width={16} height={16} set="tabler" icon="scissors" />;
346346
const et = this.surface.events.et;
347347
const iconMarkdown = () => <Iconista width={16} height={16} set="simple" icon="markdown" style={{opacity: 0.5}} />;
348348
const iconHtml = () => <Iconista width={14} height={14} set="simple" icon="html5" style={{opacity: 0.5}} />;
349349
const iconJson = () => <Iconista width={16} height={16} set="tabler" icon="json" style={{opacity: 0.5}} />;
350-
const onSelect = (format: BufferDetail['format']) => {
351-
et.buffer(type, format);
352-
};
353350
const markdownAction: MenuItem = {
354351
name: 'Markdown',
355-
text: type + ' paste markdown md',
352+
text: action + ' paste markdown md',
356353
icon,
357354
right: iconMarkdown,
358355
onSelect: () => {
359-
ctx.onBeforeAction?.(markdownAction);
360-
onSelect('md');
356+
et.buffer({...ctx.onBeforeAction?.(markdownAction), action, format: 'md'});
361357
},
362358
};
363359
const mdastAction: MenuItem = {
364360
name: 'MDAST',
365-
text: type + ' paste markdown md mdast',
361+
text: action + ' paste markdown md mdast',
366362
icon,
367363
right: iconMarkdown,
368364
onSelect: () => {
369-
ctx.onBeforeAction?.(markdownAction);
370-
onSelect('mdast');
365+
et.buffer({...ctx.onBeforeAction?.(mdastAction), action, format: 'mdast'});
371366
},
372367
};
373368
const htmlAction: MenuItem = {
374369
name: 'HTML',
375-
text: type + ' paste html',
370+
text: action + ' paste html',
376371
icon,
377372
right: iconHtml,
378373
onSelect: () => {
379-
ctx.onBeforeAction?.(htmlAction);
380-
onSelect('html');
374+
et.buffer({...ctx.onBeforeAction?.(htmlAction), action, format: 'html'});
381375
},
382376
};
383377
const hastAction: MenuItem = {
384378
name: 'HAST',
385-
text: type + ' paste html hast',
379+
text: action + ' paste html hast',
386380
icon,
387381
right: iconHtml,
388382
onSelect: () => {
389-
ctx.onBeforeAction?.(hastAction);
390-
onSelect('hast');
383+
et.buffer({...ctx.onBeforeAction?.(hastAction), action, format: 'hast'});
391384
},
392385
};
393386
const jsonAction: MenuItem = {
394387
name: 'Range view',
395-
text: type + ' paste range view peritext',
388+
text: action + ' paste range view peritext',
396389
icon,
397390
right: iconJson,
398391
onSelect: () => {
399-
ctx.onBeforeAction?.(jsonAction);
400-
onSelect('json');
392+
et.buffer({...ctx.onBeforeAction?.(jsonAction), action, format: 'json'});
401393
},
402394
};
403395
const jsonmlAction: MenuItem = {
404396
name: 'Fragment ML',
405-
text: type + ' paste peritext fragment ml node',
397+
text: action + ' paste peritext fragment ml node',
406398
icon,
407399
right: iconJson,
408400
onSelect: () => {
409-
ctx.onBeforeAction?.(jsonmlAction);
410-
onSelect('jsonml');
401+
et.buffer({...ctx.onBeforeAction?.(jsonmlAction), action, format: 'jsonml'});
411402
},
412403
};
413404
const fragmentAction: MenuItem = {
414405
name: 'Fragment text',
415-
text: type + 'peritext fragment debug',
406+
text: action + 'peritext fragment debug',
416407
icon,
417408
right: () => <Iconista width={16} height={16} set="lucide" icon="text" style={{opacity: 0.5}} />,
418409
onSelect: () => {
419-
ctx.onBeforeAction?.(fragmentAction);
420-
onSelect('fragment');
410+
et.buffer({...ctx.onBeforeAction?.(fragmentAction), action, format: 'fragment'});
421411
},
422412
};
423413
return {
424-
name: type === 'copy' ? 'Copy as' : 'Cut as',
414+
name: action === 'copy' ? 'Copy as' : 'Cut as',
425415
more: true,
426416
icon,
427417
children: [
@@ -450,18 +440,13 @@ export class ToolbarState implements UiLifeCycles {
450440
const iconHtml = () => <Iconista width={14} height={14} set="simple" icon="html5" style={{opacity: 0.5}} />;
451441
const iconJson = () => <Iconista width={16} height={16} set="tabler" icon="json" style={{opacity: 0.5}} />;
452442
const et = this.surface.events.et;
453-
const onSelect = (format: BufferDetail['format']) => {
454-
console.log('paste as', format);
455-
et.buffer('paste', format);
456-
};
457443
const markdownAction: MenuItem = {
458444
name: 'Markdown',
459445
text: 'paste markdown md',
460446
icon,
461447
right: iconMarkdown,
462448
onSelect: () => {
463-
ctx.onBeforeAction?.(markdownAction);
464-
onSelect('md');
449+
et.buffer({...ctx.onBeforeAction?.(markdownAction), action: 'paste', format: 'md'});
465450
},
466451
};
467452
const mdastAction: MenuItem = {
@@ -470,8 +455,7 @@ export class ToolbarState implements UiLifeCycles {
470455
icon,
471456
right: iconMarkdown,
472457
onSelect: () => {
473-
ctx.onBeforeAction?.(markdownAction);
474-
onSelect('mdast');
458+
et.buffer({...ctx.onBeforeAction?.(mdastAction), action: 'paste', format: 'mdast'});
475459
},
476460
};
477461
const htmlAction: MenuItem = {
@@ -480,8 +464,7 @@ export class ToolbarState implements UiLifeCycles {
480464
icon,
481465
right: iconHtml,
482466
onSelect: () => {
483-
ctx.onBeforeAction?.(htmlAction);
484-
onSelect('html');
467+
et.buffer({...ctx.onBeforeAction?.(htmlAction), action: 'paste', format: 'html'});
485468
},
486469
};
487470
const hastAction: MenuItem = {
@@ -490,8 +473,7 @@ export class ToolbarState implements UiLifeCycles {
490473
icon,
491474
right: iconHtml,
492475
onSelect: () => {
493-
ctx.onBeforeAction?.(hastAction);
494-
onSelect('hast');
476+
et.buffer({...ctx.onBeforeAction?.(hastAction), action: 'paste', format: 'hast'});
495477
},
496478
};
497479
const jsonAction: MenuItem = {
@@ -500,8 +482,7 @@ export class ToolbarState implements UiLifeCycles {
500482
icon,
501483
right: iconJson,
502484
onSelect: () => {
503-
ctx.onBeforeAction?.(jsonAction);
504-
onSelect('json');
485+
et.buffer({...ctx.onBeforeAction?.(jsonAction), action: 'paste', format: 'json'});
505486
},
506487
};
507488
const jsonmlAction: MenuItem = {
@@ -510,8 +491,7 @@ export class ToolbarState implements UiLifeCycles {
510491
icon,
511492
right: iconJson,
512493
onSelect: () => {
513-
ctx.onBeforeAction?.(jsonmlAction);
514-
onSelect('jsonml');
494+
et.buffer({...ctx.onBeforeAction?.(jsonmlAction), action: 'paste', format: 'jsonml'});
515495
},
516496
};
517497
return {
@@ -543,16 +523,14 @@ export class ToolbarState implements UiLifeCycles {
543523
name: 'Copy',
544524
icon: () => <Iconista width={15} height={15} set="radix" icon="clipboard-copy" />,
545525
onSelect: () => {
546-
ctx.onBeforeAction?.(copyAction);
547-
et.buffer('copy');
526+
et.buffer({...ctx.onBeforeAction?.(copyAction), action: 'copy'});
548527
},
549528
};
550529
const copyTextOnlyAction: MenuItem = {
551530
name: 'Copy text only',
552531
icon: () => <Iconista width={15} height={15} set="radix" icon="clipboard-copy" />,
553532
onSelect: () => {
554-
ctx.onBeforeAction?.(copyTextOnlyAction);
555-
et.buffer('copy', 'text');
533+
et.buffer({...ctx.onBeforeAction?.(copyTextOnlyAction), action: 'copy', format: 'text'});
556534
},
557535
};
558536
const children: MenuItem[] = [
@@ -564,8 +542,7 @@ export class ToolbarState implements UiLifeCycles {
564542
name: 'Copy style',
565543
icon: () => <Iconista width={15} height={15} set="radix" icon="clipboard-copy" />,
566544
onSelect: () => {
567-
ctx.onBeforeAction?.(copyStyleAction);
568-
et.buffer('copy', 'style');
545+
et.buffer({...ctx.onBeforeAction?.(copyStyleAction), action: 'copy', format: 'style'});
569546
},
570547
};
571548
children.push(copyStyleAction);
@@ -587,17 +564,15 @@ export class ToolbarState implements UiLifeCycles {
587564
danger: true,
588565
icon: () => <Iconista width={16} height={16} set="tabler" icon="scissors" />,
589566
onSelect: () => {
590-
ctx.onBeforeAction?.(cutAction);
591-
et.buffer('cut');
567+
et.buffer({...ctx.onBeforeAction?.(cutAction), action: 'cut'});
592568
},
593569
};
594570
const cutTextAction: MenuItem = {
595571
name: 'Cut text only',
596572
danger: true,
597573
icon: () => <Iconista width={16} height={16} set="tabler" icon="scissors" />,
598574
onSelect: () => {
599-
ctx.onBeforeAction?.(cutAction);
600-
et.buffer('cut', 'text');
575+
et.buffer({...ctx.onBeforeAction?.(cutTextAction), action: 'cut', format: 'text'});
601576
},
602577
};
603578
return {
@@ -619,16 +594,14 @@ export class ToolbarState implements UiLifeCycles {
619594
name: 'Paste',
620595
icon: () => <Iconista width={15} height={15} set="radix" icon="clipboard" />,
621596
onSelect: () => {
622-
ctx.onBeforeAction?.(pasteAction);
623-
et.buffer('paste');
597+
et.buffer({...ctx.onBeforeAction?.(pasteAction), action: 'paste'});
624598
},
625599
};
626600
const pasteTextAction: MenuItem = {
627601
name: 'Paste text',
628602
icon: () => <Iconista width={15} height={15} set="radix" icon="clipboard" />,
629603
onSelect: () => {
630-
ctx.onBeforeAction?.(pasteTextAction);
631-
et.buffer('paste', 'text');
604+
et.buffer({...ctx.onBeforeAction?.(pasteTextAction), action: 'paste', format: 'text'});
632605
},
633606
};
634607
const children: MenuItem[] = [
@@ -640,8 +613,7 @@ export class ToolbarState implements UiLifeCycles {
640613
name: 'Paste style',
641614
icon: () => <Iconista width={15} height={15} set="radix" icon="clipboard" />,
642615
onSelect: () => {
643-
ctx.onBeforeAction?.(pasteTextAction);
644-
et.buffer('paste', 'style');
616+
et.buffer({...ctx.onBeforeAction?.(pasteStyleAction), action: 'paste', format: 'style'});
645617
},
646618
};
647619
children.push(pasteStyleAction);
@@ -657,7 +629,6 @@ export class ToolbarState implements UiLifeCycles {
657629
};
658630

659631
public readonly clipboardMenu = (ctx: ClipboardMenuCtx = {}): MenuItem => {
660-
const et = this.surface.events.et;
661632
const copyMenu = this.copyMenu(ctx);
662633
const cutMenu = this.cutMenu(ctx);
663634
const pasteMenu = this.pasteMenu(ctx);
@@ -1516,6 +1487,7 @@ export class ToolbarState implements UiLifeCycles {
15161487

15171488
public readonly leafBlockSmallMenu = (ctx: LeafBlockMenuCtx): MenuItem => {
15181489
const et = this.surface.events.et;
1490+
const block = ctx.block;
15191491
const menu: MenuItem = {
15201492
name: 'Leaf block menu',
15211493
maxToolbarItems: 1,
@@ -1540,7 +1512,14 @@ export class ToolbarState implements UiLifeCycles {
15401512
});
15411513
},
15421514
},
1543-
this.clipboardMenu({hideStyleActions: true}),
1515+
this.clipboardMenu({
1516+
hideStyleActions: true,
1517+
onBeforeAction: (item) => {
1518+
return {
1519+
at: [block.start, block.end],
1520+
};
1521+
},
1522+
}),
15441523
],
15451524
},
15461525

@@ -1552,10 +1531,10 @@ export class ToolbarState implements UiLifeCycles {
15521531
}
15531532

15541533
export interface LeafBlockMenuCtx {
1555-
block: LeafBlock;
1534+
block: LeafBlock<string>;
15561535
}
15571536

15581537
export interface ClipboardMenuCtx {
15591538
hideStyleActions?: boolean;
1560-
onBeforeAction?: (item: MenuItem) => void;
1539+
onBeforeAction?: (item: MenuItem) => (void | Partial<BufferDetail>);
15611540
}

0 commit comments

Comments
 (0)