feat(ui): replace code button text label with CodeSimpleIcon

- add CodeSimpleIcon svg to shared icons index
- update inline toolbar code button to use CodeSimpleIcon instead of text label
This commit is contained in:
2026-04-25 19:19:24 -04:00
parent ec83f87fd2
commit 741bf39a39
2 changed files with 9 additions and 2 deletions
@@ -1,7 +1,7 @@
'use client'; 'use client';
import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'; import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { TextColorIcon, HighlighterIcon, Link02Icon } from '@zen/core/shared/icons'; import { TextColorIcon, HighlighterIcon, Link02Icon, CodeSimpleIcon } from '@zen/core/shared/icons';
import { INLINE_COLORS, INLINE_COLOR_KEYS, markKey } from './types.js'; import { INLINE_COLORS, INLINE_COLOR_KEYS, markKey } from './types.js';
// Toolbar flottant de formatage. Affiché tant qu'une sélection non-vide // Toolbar flottant de formatage. Affiché tant qu'une sélection non-vide
@@ -20,7 +20,7 @@ const SIMPLE_BUTTONS = [
{ type: 'italic', label: 'I', title: 'Italique (Ctrl+I)', className: 'italic' }, { type: 'italic', label: 'I', title: 'Italique (Ctrl+I)', className: 'italic' },
{ type: 'underline', label: 'U', title: 'Soulignement (Ctrl+U)', className: 'underline' }, { type: 'underline', label: 'U', title: 'Soulignement (Ctrl+U)', className: 'underline' },
{ type: 'strike', label: 'S', title: 'Barré', className: 'line-through' }, { type: 'strike', label: 'S', title: 'Barré', className: 'line-through' },
{ type: 'code', label: '</>', title: 'Code (Ctrl+E)', className: 'font-mono text-[11px]' }, { type: 'code', label: <CodeSimpleIcon width={15} height={15} />, title: 'Code (Ctrl+E)', className: '' },
]; ];
export default function InlineToolbar({ rect, activeMarks, onToggleMark, onPinChange, usedColors }) { export default function InlineToolbar({ rect, activeMarks, onToggleMark, onPinChange, usedColors }) {
+7
View File
@@ -685,4 +685,11 @@ export const Image01Icon = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={64} height={64} color={"currentColor"} fill={"none"} {...props}> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={64} height={64} color={"currentColor"} fill={"none"} {...props}>
<path fillRule="evenodd" clipRule="evenodd" d="M12.0745 1.5H11.9256H11.9255C9.74958 1.49998 8.01484 1.49996 6.65471 1.68282C5.25033 1.87164 4.09653 2.27175 3.18414 3.18414C2.27175 4.09653 1.87164 5.25033 1.68282 6.65471C1.49996 8.01484 1.49998 9.74956 1.5 11.9255V11.9255V12.0745V12.0745C1.49998 14.2504 1.49996 15.9852 1.68282 17.3453C1.87164 18.7497 2.27175 19.9035 3.18414 20.8159C4.09653 21.7283 5.25033 22.1284 6.65471 22.3172C8.01485 22.5 9.74959 22.5 11.9256 22.5H12.0744C14.2504 22.5 15.9851 22.5 17.3453 22.3172C18.7497 22.1284 19.9035 21.7283 20.8159 20.8159C21.7283 19.9035 22.1284 18.7497 22.3172 17.3453C22.5 15.9852 22.5 14.2504 22.5 12.0744V11.9256C22.5 9.74959 22.5 8.01485 22.3172 6.65471C22.1284 5.25033 21.7283 4.09653 20.8159 3.18414C19.9035 2.27175 18.7497 1.87164 17.3453 1.68282C15.9852 1.49996 14.2504 1.49998 12.0745 1.5H12.0745ZM5.5 7.5C5.5 6.39543 6.39543 5.5 7.5 5.5C8.60457 5.5 9.5 6.39543 9.5 7.5C9.5 8.60457 8.60457 9.5 7.5 9.5C6.39543 9.5 5.5 8.60457 5.5 7.5ZM6.92183 20.335C6.79989 20.3186 6.68349 20.3008 6.57227 20.2814C8.47707 17.9776 10.4184 15.6499 12.5989 14.1878C13.8589 13.343 15.1548 12.8211 16.5241 12.7568C17.7246 12.7003 19.0389 12.9927 20.4962 13.8125C20.4859 15.1635 20.4512 16.219 20.3356 17.0788C20.1766 18.2614 19.8811 18.9228 19.4023 19.4016C18.9234 19.8805 18.262 20.176 17.0794 20.335C15.8681 20.4979 14.2681 20.5 12.0006 20.5C9.73319 20.5 8.1332 20.4979 6.92183 20.335Z" fill="currentColor"></path> <path fillRule="evenodd" clipRule="evenodd" d="M12.0745 1.5H11.9256H11.9255C9.74958 1.49998 8.01484 1.49996 6.65471 1.68282C5.25033 1.87164 4.09653 2.27175 3.18414 3.18414C2.27175 4.09653 1.87164 5.25033 1.68282 6.65471C1.49996 8.01484 1.49998 9.74956 1.5 11.9255V11.9255V12.0745V12.0745C1.49998 14.2504 1.49996 15.9852 1.68282 17.3453C1.87164 18.7497 2.27175 19.9035 3.18414 20.8159C4.09653 21.7283 5.25033 22.1284 6.65471 22.3172C8.01485 22.5 9.74959 22.5 11.9256 22.5H12.0744C14.2504 22.5 15.9851 22.5 17.3453 22.3172C18.7497 22.1284 19.9035 21.7283 20.8159 20.8159C21.7283 19.9035 22.1284 18.7497 22.3172 17.3453C22.5 15.9852 22.5 14.2504 22.5 12.0744V11.9256C22.5 9.74959 22.5 8.01485 22.3172 6.65471C22.1284 5.25033 21.7283 4.09653 20.8159 3.18414C19.9035 2.27175 18.7497 1.87164 17.3453 1.68282C15.9852 1.49996 14.2504 1.49998 12.0745 1.5H12.0745ZM5.5 7.5C5.5 6.39543 6.39543 5.5 7.5 5.5C8.60457 5.5 9.5 6.39543 9.5 7.5C9.5 8.60457 8.60457 9.5 7.5 9.5C6.39543 9.5 5.5 8.60457 5.5 7.5ZM6.92183 20.335C6.79989 20.3186 6.68349 20.3008 6.57227 20.2814C8.47707 17.9776 10.4184 15.6499 12.5989 14.1878C13.8589 13.343 15.1548 12.8211 16.5241 12.7568C17.7246 12.7003 19.0389 12.9927 20.4962 13.8125C20.4859 15.1635 20.4512 16.219 20.3356 17.0788C20.1766 18.2614 19.8811 18.9228 19.4023 19.4016C18.9234 19.8805 18.262 20.176 17.0794 20.335C15.8681 20.4979 14.2681 20.5 12.0006 20.5C9.73319 20.5 8.1332 20.4979 6.92183 20.335Z" fill="currentColor"></path>
</svg> </svg>
);
export const CodeSimpleIcon = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={24} height={24} color={"currentColor"} fill={"none"} {...props}>
<path d="M1 12C1 11.2305 1.37561 10.6269 1.83105 10.1123C2.27334 9.61267 2.91679 9.06153 3.66797 8.41407L7.34668 5.24219C7.76499 4.88164 8.39723 4.92842 8.75781 5.34669C9.11836 5.76499 9.07158 6.39723 8.65332 6.75782L4.97363 9.92872C4.17815 10.6144 3.66029 11.0634 3.3291 11.4375C3.01113 11.7967 3 11.9411 3 12C3 12.0589 3.01114 12.2033 3.3291 12.5625C3.66029 12.9366 4.17815 13.3856 4.97363 14.0713L8.65332 17.2422C9.07158 17.6028 9.11836 18.235 8.75781 18.6533C8.39723 19.0716 7.76499 19.1184 7.34668 18.7578L3.66797 15.5859C2.91679 14.9385 2.27333 14.3873 1.83105 13.8877C1.37561 13.3732 1 12.7695 1 12Z" fill="currentColor"></path>
<path d="M21 12C21 11.9411 20.9889 11.7967 20.6709 11.4375C20.3397 11.0634 19.8219 10.6144 19.0264 9.92872L15.3467 6.75782C14.9284 6.39723 14.8816 5.76499 15.2422 5.34669C15.6028 4.92842 16.235 4.88164 16.6533 5.24219L20.332 8.41407C21.0832 9.06153 21.7267 9.61267 22.169 10.1123C22.6244 10.6269 23 11.2305 23 12C23 12.7695 22.6244 13.3732 22.169 13.8877C21.7267 14.3873 21.0832 14.9385 20.332 15.5859L16.6533 18.7578C16.235 19.1184 15.6028 19.0716 15.2422 18.6533C14.8816 18.235 14.9284 17.6028 15.3467 17.2422L19.0264 14.0713C19.8219 13.3856 20.3397 12.9366 20.6709 12.5625C20.9889 12.2033 21 12.0589 21 12Z" fill="currentColor"></path>
</svg>
); );