feat: support delete detail from contenteditable area

projects/tui-editor/components/editor-socket/styles/details.less

@@ -6,11 +6,12 @@ summary {
     align-items: center;
     min-height: 3.5rem;
     width: 100%;
-    padding: 0 1.25rem;
     box-sizing: border-box;
     border-radius: var(--tui-radius-l);
     pointer-events: none;
     outline: none;
+    word-break: break-all;
+    padding: 0 4.6875rem 0 1.25rem;
 
     &:focus-visible {
         outline: 2px solid var(--tui-link);
@@ -50,6 +51,36 @@ details[open] summary {
     outline: none;
 }
 
+.t-details-delete {
+    position: absolute;
+    top: 1.4rem;
+    right: 2.7rem;
+    height: 1.125rem;
+    width: 1.25rem;
+    appearance: none;
+    box-sizing: border-box;
+    padding: 0;
+    background: none;
+    cursor: pointer;
+    outline: none;
+    border: none;
+
+    &:hover::after {
+        color: var(--tui-text-primary);
+    }
+
+    &::after {
+        content: '\00d7';
+        display: inline-block;
+        font: inherit;
+        font-size: 2rem;
+        color: var(--tui-text-secondary);
+        height: 100%;
+        width: 100%;
+        line-height: 0.8rem;
+    }
+}
+
 details {
     width: 100%;
     border: 1px solid var(--tui-base-04);

projects/tui-editor/extensions/details/details.extension.ts

@@ -61,27 +61,37 @@ export const TuiDetails = Node.create<TuiDetailsOptions>({
     },
 
     addNodeView() {
-        return ({node}) => {
-            const wrapper = document.createElement(`div`);
-            const details = document.createElement(`details`);
-            const button = document.createElement(`button`);
-
-            wrapper.className = `t-details-wrapper`;
-            button.className = `t-details-arrow`;
-
-            details.open = node.attrs.opened;
-
-            button.addEventListener(`click`, () => {
-                details.open = !details.open;
-                (node.attrs as unknown as Record<string, unknown>).opened = details.open;
-            });
-
-            wrapper.append(details, button);
-
-            return {
-                dom: wrapper,
-                contentDOM: details,
-            };
+        return ({node, editor}): any => {
+            if (globalThis.document) {
+                const wrapper = document.createElement('div');
+                const details = document.createElement('details');
+                const collapseButton = document.createElement('button');
+                const deleteButton = document.createElement('button');
+
+                wrapper.className = 't-details-wrapper';
+                collapseButton.className = 't-details-arrow';
+                deleteButton.className = 't-details-delete';
+
+                details.open = node.attrs.opened;
+
+                collapseButton.addEventListener('click', () => {
+                    details.open = !details.open;
+                    (node.attrs as unknown as Record<string, unknown>).opened =
+                        details.open;
+                });
+
+                deleteButton.addEventListener('click', () => {
+                    tuiDeleteNode(editor.state, editor.view.dispatch, this.name);
+                    editor.commands.focus('end');
+                });
+
+                wrapper.append(details, collapseButton, deleteButton);
+
+                return {
+                    dom: wrapper,
+                    contentDOM: details,
+                };
+            }
         };
     },
 
@@ -98,8 +108,11 @@ export const TuiDetails = Node.create<TuiDetailsOptions>({
                 },
             removeDetails:
                 () =>
-                ({state, dispatch}) =>
-                    tuiDeleteNode(state, dispatch, this.name),
+                ({editor, state, dispatch}) => {
+                    tuiDeleteNode(state, dispatch, this.name);
+
+                    return editor.commands.focus('end');
+                },
         };
     },
 });