feat(json-crdt-peritext-ui): 🎸 make delete button locked initially

Author: streamich

src/json-crdt-peritext-ui/plugins/toolbar/components/SoftLockedDeleteButton.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import BasicButton from 'nice-ui/lib/2-inline-block/BasicButton';
+import {Iconista} from 'nice-ui/lib/icons/Iconista';
+import {BasicTooltip} from 'nice-ui/lib/4-card/BasicTooltip';
+import {useT} from 'use-t';
+
+export interface SoftLockedDeleteButtonProps {
+  onDelete: () => void;
+}
+
+export const SoftLockedDeleteButton: React.FC<SoftLockedDeleteButtonProps> = ({onDelete}) => {
+  const [t] = useT();
+  const [locked, setLocked] = React.useState(true);
+
+  return (
+    <BasicTooltip renderTooltip={() => locked ? t('Unlock delete') : t('Delete')}>
+      <BasicButton size={32} rounder onClick={() => {
+        if (locked) {
+          setLocked(false);
+          return;
+        }
+        onDelete();
+      }}>
+        <Iconista set={'lucide'} icon={'trash'} width={16} height={16} style={{opacity: locked ? .5 : 1}} />
+      </BasicButton>
+    </BasicTooltip>
+  );
+};

src/json-crdt-peritext-ui/plugins/toolbar/formatting/FormattingsManagePane/FormattingDisplay.tsx

@@ -16,6 +16,7 @@ import {FormattingPane} from '../FormattingPane';
 import {ContextSep} from 'nice-ui/lib/4-card/ContextMenu';
 import {ButtonSeparator} from '../../../../components/ButtonSeparator';
 import {FormattingEditForm} from './FormattingEditForm';
+import {SoftLockedDeleteButton} from '../../components/SoftLockedDeleteButton';
 
 export interface FormattingDisplayProps {
   formatting: SavedFormatting;
@@ -46,17 +47,13 @@ export const FormattingDisplay: React.FC<FormattingDisplayProps> = ({formatting,
           </Flex>
         ) : (
           <Flex style={{justifyContent: 'flex-end', alignItems: 'center'}}>
-            <BasicTooltip renderTooltip={() => t('Delete')}>
-              <BasicButton size={32} rounder onClick={() => {
-                surface.events.et.format({
-                  at: formatting.range,
-                  action: 'del',
-                });
-                onClose?.();
-              }}>
-                <Iconista set={'lucide'} icon={'trash'} width={16} height={16} />
-              </BasicButton>
-            </BasicTooltip>
+            <SoftLockedDeleteButton onDelete={() => {
+              surface.events.et.format({
+                at: formatting.range,
+                action: 'del',
+              });
+              onClose?.();
+            }} />
             <Space horizontal size={-2} />
             <ButtonSeparator />
             <Space horizontal size={-2} />