Skip to content

Commit 3bf573b

Browse files
phodalphodal
committed
docs: udpate layout to center
1 parent 93f5a76 commit 3bf573b

8 files changed

Lines changed: 454 additions & 98 deletions

File tree

‎components/editor/live-editor.jsx‎

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -81,26 +81,6 @@ const LiveEditor = () => {
8181

8282
return (
8383
<>
84-
{editor && <FloatingMenu editor={editor} tippyOptions={{ duration: 100 }}>
85-
<button
86-
onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
87-
className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
88-
>
89-
h1
90-
</button>
91-
<button
92-
onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
93-
className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
94-
>
95-
h2
96-
</button>
97-
<button
98-
onClick={() => editor.chain().focus().toggleBulletList().run()}
99-
className={editor.isActive('bulletList') ? 'is-active' : ''}
100-
>
101-
bullet list
102-
</button>
103-
</FloatingMenu>}
10484
<EditorProvider
10585
extensions={extensions}
10686
content={content}

‎components/editor/menu-bar.jsx‎

Lines changed: 75 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -10,126 +10,136 @@ import {
1010
StrikethroughIcon, TextIcon
1111
} from '@radix-ui/react-icons'
1212
import React from 'react'
13+
import * as ToggleGroup from '@radix-ui/react-toggle-group'
1314

1415
export const MenuBar = () => {
1516
const { editor } = useCurrentEditor()
1617

17-
if (!editor) {
18-
return null
19-
}
18+
if (!editor) return null
2019

2120
return (
22-
<>
23-
<button
21+
<ToggleGroup.Root
22+
className={"ToggleGroup"}
23+
type="single"
24+
defaultValue="center"
25+
aria-label="Text alignment"
26+
>
27+
<ToggleGroup.Item
2428
onClick={() => editor.chain().focus().toggleBold().run()}
2529
disabled={!editor.can().chain().focus().toggleBold().run()}
26-
className={editor.isActive('bold') ? 'is-active' : ''}
30+
className={editor.isActive('bold') ? 'is-active ToggleGroupItem' : 'ToggleGroupItem'}
31+
value="left" aria-label="Left aligned"
2732
>
2833
<FontBoldIcon/>
29-
</button>
30-
<button
34+
</ToggleGroup.Item>
35+
<ToggleGroup.Item
3136
onClick={() => editor.chain().focus().toggleItalic().run()}
3237
disabled={!editor.can().chain().focus().toggleItalic().run()}
33-
className={editor.isActive('italic') ? 'is-active' : ''}
38+
className={editor.isActive('italic') ? 'is-active ToggleGroupItem' : 'ToggleGroupItem'}
39+
value="center" aria-label="Center aligned"
3440
>
3541
<FontItalicIcon/>
36-
</button>
37-
<button
42+
</ToggleGroup.Item>
43+
<ToggleGroup.Item
3844
onClick={() => editor.chain().focus().toggleStrike().run()}
3945
disabled={!editor.can().chain().focus().toggleStrike().run()}
40-
className={editor.isActive('strike') ? 'is-active' : ''}
46+
className={editor.isActive('strike') ? 'is-active ToggleGroupItem' : 'ToggleGroupItem'}
47+
value="center" aria-label="Center aligned"
4148
>
4249
<StrikethroughIcon/>
43-
</button>
44-
<button
50+
</ToggleGroup.Item>
51+
<ToggleGroup.Item
4552
onClick={() => editor.chain().focus().toggleCode().run()}
4653
disabled={!editor.can().chain().focus().toggleCode().run()}
47-
className={editor.isActive('code') ? 'is-active' : ''}
54+
className={editor.isActive('code') ? 'is-active ToggleGroupItem' : 'ToggleGroupItem'}
55+
value="center" aria-label="Center aligned"
4856
>
4957
<CodeIcon/>
50-
</button>
51-
<button
58+
</ToggleGroup.Item>
59+
<ToggleGroup.Item
5260
onClick={() => editor.chain().focus().setParagraph().run()}
53-
className={editor.isActive('paragraph') ? 'is-active' : ''}
61+
className={editor.isActive('paragraph') ? 'is-active ToggleGroupItem' : 'ToggleGroupItem'}
62+
value="center" aria-label="Center aligned"
5463
>
5564
<TextIcon/>
56-
</button>
57-
<button
65+
</ToggleGroup.Item>
66+
<ToggleGroup.Item
5867
onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
59-
className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
68+
className={editor.isActive('heading', { level: 1 }) ? 'is-active ToggleGroupItem' : 'ToggleGroupItem'}
69+
value="center" aria-label="Center aligned"
6070
>
6171
H1
62-
</button>
63-
<button
72+
</ToggleGroup.Item>
73+
<ToggleGroup.Item
6474
onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
65-
className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
75+
className={editor.isActive('heading', { level: 2 }) ? 'is-active ToggleGroupItem' : 'ToggleGroupItem'}
76+
value="center" aria-label="Center aligned"
6677
>
6778
H2
68-
</button>
69-
<button
79+
</ToggleGroup.Item>
80+
<ToggleGroup.Item
7081
onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
71-
className={editor.isActive('heading', { level: 3 }) ? 'is-active' : ''}
82+
className={editor.isActive('heading', { level: 3 }) ? 'is-active ToggleGroupItem' : 'ToggleGroupItem'}
83+
value="center" aria-label="Center aligned"
7284
>
7385
H3
74-
</button>
75-
<button
86+
</ToggleGroup.Item>
87+
<ToggleGroup.Item
7688
onClick={() => editor.chain().focus().toggleHeading({ level: 4 }).run()}
77-
className={editor.isActive('heading', { level: 4 }) ? 'is-active' : ''}
89+
className={editor.isActive('heading', { level: 4 }) ? 'is-active ToggleGroupItem' : 'ToggleGroupItem'}
90+
value="center" aria-label="Center aligned"
7891
>
7992
H4
80-
</button>
81-
<button
93+
</ToggleGroup.Item>
94+
<ToggleGroup.Item
8295
onClick={() => editor.chain().focus().toggleHeading({ level: 5 }).run()}
83-
className={editor.isActive('heading', { level: 5 }) ? 'is-active' : ''}
96+
className={editor.isActive('heading', { level: 5 }) ? 'is-active ToggleGroupItem' : 'ToggleGroupItem'}
97+
value="center" aria-label="Center aligned"
8498
>
8599
H5
86-
</button>
87-
<button
100+
</ToggleGroup.Item>
101+
<ToggleGroup.Item
88102
onClick={() => editor.chain().focus().toggleHeading({ level: 6 }).run()}
89-
className={editor.isActive('heading', { level: 6 }) ? 'is-active' : ''}
103+
className={editor.isActive('heading', { level: 6 }) ? 'is-active ToggleGroupItem' : 'ToggleGroupItem'}
104+
value="center" aria-label="Center aligned"
90105
>
91106
H6
92-
</button>
93-
<button
107+
</ToggleGroup.Item>
108+
<ToggleGroup.Item
94109
onClick={() => editor.chain().focus().toggleBulletList().run()}
95-
className={editor.isActive('bulletList') ? 'is-active' : ''}
110+
className={editor.isActive('bulletList') ? 'is-active ToggleGroupItem' : 'ToggleGroupItem'}
111+
value="center" aria-label="Center aligned"
96112
>
97113
<ListBulletIcon/>
98-
</button>
99-
<button
114+
</ToggleGroup.Item>
115+
<ToggleGroup.Item
100116
onClick={() => editor.chain().focus().toggleOrderedList().run()}
101-
className={editor.isActive('orderedList') ? 'is-active' : ''}
117+
className={editor.isActive('orderedList') ? 'is-active ToggleGroupItem' : 'ToggleGroupItem'}
118+
value="center" aria-label="Center aligned"
102119
>
103120
<ActivityLogIcon/>
104-
</button>
105-
<button
121+
</ToggleGroup.Item>
122+
<ToggleGroup.Item
106123
onClick={() => editor.chain().focus().toggleCodeBlock().run()}
107-
className={editor.isActive('codeBlock') ? 'is-active' : ''}
124+
className={editor.isActive('codeBlock') ? 'is-active ToggleGroupItem' : 'ToggleGroupItem'}
125+
value="center" aria-label="Center aligned"
108126
>
109127
<CodeIcon/>
110-
</button>
111-
<button
128+
</ToggleGroup.Item>
129+
<ToggleGroup.Item
112130
onClick={() => editor.chain().focus().toggleBlockquote().run()}
113-
className={editor.isActive('blockquote') ? 'is-active' : ''}
131+
className={editor.isActive('blockquote') ? 'is-active ToggleGroupItem' : 'ToggleGroupItem'}
132+
value="center" aria-label="Center aligned"
114133
>
115134
<QuoteIcon/>
116-
</button>
117-
<button onClick={() => editor.chain().focus().setHorizontalRule().run()}>
135+
</ToggleGroup.Item>
136+
<ToggleGroup.Item
137+
onClick={() => editor.chain().focus().setHorizontalRule().run()}
138+
className={'ToggleGroupItem'}
139+
value="center" aria-label="Center aligned"
140+
>
118141
<DividerHorizontalIcon/>
119-
</button>
120-
<button
121-
onClick={() => editor.chain().focus().undo().run()}
122-
disabled={!editor.can().chain().focus().undo().run()}
123-
>
124-
undo
125-
</button>
126-
<button
127-
onClick={() => editor.chain().focus().redo().run()}
128-
disabled={!editor.can().chain().focus().redo().run()}
129-
>
130-
redo
131-
</button>
132-
133-
</>
142+
</ToggleGroup.Item>
143+
</ToggleGroup.Root>
134144
)
135145
}

0 commit comments

Comments
 (0)