refactor(BlockEditor): replace text symbols with icon components in block controls
- replace `+` and `⋮⋮` text with `PlusSignIcon` and `DragDropVerticalIcon` components - add `Add01Icon` export to shared icons index - update README to reference icon names and link to icons source
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import React, { useEffect, useImperativeHandle, useRef, useState, forwardRef } from 'react';
|
||||
import { PlusSignIcon, DragDropVerticalIcon } from '@zen/core/shared/icons';
|
||||
import { getBlockDef } from './blockRegistry.js';
|
||||
import {
|
||||
getCaretOffset,
|
||||
@@ -257,7 +258,7 @@ const Block = forwardRef(function Block(
|
||||
disabled={disabled}
|
||||
className="w-5 h-5 flex items-center justify-center rounded text-neutral-500 hover:bg-neutral-200 dark:hover:bg-neutral-700/60 hover:text-neutral-900 dark:hover:text-white text-sm leading-none"
|
||||
>
|
||||
+
|
||||
<PlusSignIcon width={14} height={14} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -267,7 +268,7 @@ const Block = forwardRef(function Block(
|
||||
disabled={disabled}
|
||||
className="w-5 h-5 flex items-center justify-center rounded text-neutral-500 hover:bg-neutral-200 dark:hover:bg-neutral-700/60 hover:text-neutral-900 dark:hover:text-white text-xs cursor-grab active:cursor-grabbing leading-none"
|
||||
>
|
||||
⋮⋮
|
||||
<DragDropVerticalIcon width={14} height={14} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -77,8 +77,10 @@ En mode sélection multi-blocs :
|
||||
## Drag and drop
|
||||
|
||||
Chaque bloc affiche au survol :
|
||||
- une poignée `+` pour insérer un bloc en dessous (ouvre le slash menu)
|
||||
- une poignée `⋮⋮` pour glisser-déposer (réordonner)
|
||||
- une poignée `PlusSignIcon` pour insérer un bloc en dessous (ouvre le slash menu)
|
||||
- une poignée `DragDropVerticalIcon` pour glisser-déposer (réordonner)
|
||||
|
||||
Les icônes proviennent de [`src/shared/icons/index.js`](../../icons/index.js).
|
||||
|
||||
Le drag-and-drop utilise l'API HTML5 native, pas de dépendance externe.
|
||||
|
||||
|
||||
@@ -554,4 +554,10 @@ export const DragDropVerticalIcon = (props) => (
|
||||
<path d="M9 19.75C9.9665 19.75 10.75 18.9665 10.75 18C10.75 17.0335 9.9665 16.25 9 16.25C8.0335 16.25 7.25 17.0335 7.25 18C7.25 18.9665 8.0335 19.75 9 19.75Z" fill="currentColor" />
|
||||
<path d="M9 13.75C9.9665 13.75 10.75 12.9665 10.75 12C10.75 11.0335 9.9665 10.25 9 10.25C8.0335 10.25 7.25 11.0335 7.25 12C7.25 12.9665 8.0335 13.75 9 13.75Z" fill="currentColor" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Add01Icon = (props) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={64} height={64} color={"currentColor"} fill={"none"} {...props}>
|
||||
<path d="M11.001 19.002V13.002H5C4.44772 13.002 4 12.5543 4 12.002C4 11.4498 4.44772 11.002 5 11.002H11.001V5.00009C11.001 4.44781 11.4487 4.00009 12.001 4.00009C12.5533 4.0001 13.001 4.44781 13.001 5.00009V11.002H19.002L19.1045 11.0069C19.6086 11.0583 20.002 11.4844 20.002 12.002C20.002 12.5197 19.6086 12.9458 19.1045 12.9972L19.002 13.002H13.001V19.002C13.001 19.5543 12.5533 20.002 12.001 20.002C11.4487 20.002 11.001 19.5543 11.001 19.002Z" fill="currentColor" />
|
||||
</svg>
|
||||
);
|
||||
Reference in New Issue
Block a user