diff --git a/src/frontend/apps/impress/src/features/pads/pad/components/BlockNoteEditor.tsx b/src/frontend/apps/impress/src/features/pads/pad/components/BlockNoteEditor.tsx index 422b346a..9ec60d23 100644 --- a/src/frontend/apps/impress/src/features/pads/pad/components/BlockNoteEditor.tsx +++ b/src/frontend/apps/impress/src/features/pads/pad/components/BlockNoteEditor.tsx @@ -6,6 +6,7 @@ import { useAuthStore } from '@/core/auth'; import { PadStore, usePadStore } from '../store'; import { Pad } from '../types'; +import { randomColor } from '../utils'; interface BlockNoteEditorProps { pad: Pad; @@ -32,7 +33,7 @@ export const BlockNoteEditor = ({ pad }: BlockNoteEditorProps) => { fragment: provider.doc.getXmlFragment('document-store'), user: { name: userData?.name || userData?.email || 'Anonymous', - color: '#ff0000', + color: randomColor(), }, }, }); diff --git a/src/frontend/apps/impress/src/features/pads/pad/utils.ts b/src/frontend/apps/impress/src/features/pads/pad/utils.ts new file mode 100644 index 00000000..325a2304 --- /dev/null +++ b/src/frontend/apps/impress/src/features/pads/pad/utils.ts @@ -0,0 +1,24 @@ +export const randomColor = () => { + const randomInt = (min: number, max: number) => { + return Math.floor(Math.random() * (max - min + 1)) + min; + }; + + const h = randomInt(0, 360); // hue + const s = randomInt(42, 98); // saturation + const l = randomInt(70, 90); // lightness + + return hslToHex(h, s, l); +}; + +function hslToHex(h: number, s: number, l: number) { + l /= 100; + const a = (s * Math.min(l, 1 - l)) / 100; + const f = (n: number) => { + const k = (n + h / 30) % 12; + const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1); + return Math.round(255 * color) + .toString(16) + .padStart(2, '0'); + }; + return `#${f(0)}${f(8)}${f(4)}`; +}